@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --navy:#1A1A3E; --navy-2:#262663; --blue:#4DB8E8; --blue-dark:#2E9BCB;
  --green:#1D9E75; --orange:#F5A020; --red:#E74C3C; --purple:#6C4BC1;
  --bg:#EFF1F6; --card:#fff; --border:#E7E9F0; --text:#1F2430; --muted:#767C8C;
  --shadow-sm:0 1px 3px rgba(20,20,60,.06), 0 1px 2px rgba(20,20,60,.08);
  --shadow-md:0 4px 16px rgba(20,20,60,.08), 0 2px 6px rgba(20,20,60,.06);
  --shadow-lg:0 12px 40px rgba(20,20,60,.14);
  --radius:14px; --radius-sm:8px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',Arial,sans-serif;font-size:12pt;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--blue);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#C7CBDA;border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:#AEB4C8}

/* ── LOGIN ── */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 20%,#232358,#12122c 70%)}
.login-card{width:360px;max-width:92vw;background:#fff;border-radius:20px;box-shadow:var(--shadow-lg);padding:36px 32px;text-align:center;position:relative;overflow:hidden;animation:popIn .35s ease}
.login-card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--blue),var(--orange))}
.login-card img{height:56px;margin-bottom:14px}
.login-card h2{font-size:14pt;color:var(--navy);margin-bottom:18px;font-weight:700}
.login-card input{width:100%;border:1.5px solid #D8D8D8;border-radius:var(--radius-sm);padding:11px 12px;font-size:10.5pt;margin-bottom:12px;outline:none;font-family:'Inter',Arial,sans-serif;transition:border-color .15s,box-shadow .15s}
.login-card input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(77,184,232,.18)}
.login-card button{width:100%;background:var(--green);color:#fff;border:none;border-radius:var(--radius-sm);padding:12px;font-size:10.5pt;font-weight:700;cursor:pointer;transition:transform .12s,box-shadow .12s,filter .12s}
.login-card button:hover{filter:brightness(1.06);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.login-card button:active{transform:translateY(0)}
.login-card button:disabled{opacity:.6;cursor:wait;transform:none}
.login-err{color:var(--red);font-size:9.5pt;margin-top:10px;min-height:14px}
@keyframes popIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}

/* ── NAVIGATION (app) — tiroir masqué par défaut, ouvert via le bouton ⋮ ── */
.nav-toggle-btn{position:fixed;top:14px;left:14px;width:42px;height:42px;border-radius:50%;border:none;background:var(--navy);color:#fff;
  font-size:16pt;font-weight:800;cursor:pointer;z-index:80;box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center;
  transition:transform .12s ease,filter .12s ease;line-height:1}
.nav-toggle-btn:hover{filter:brightness(1.15);transform:scale(1.05)}
.nav-backdrop{position:fixed;inset:0;background:rgba(10,10,30,.4);z-index:59;opacity:0;pointer-events:none;transition:opacity .2s ease}
.nav-backdrop.open{opacity:1;pointer-events:auto}
.app-nav{width:206px;position:fixed;top:0;left:0;height:100vh;margin:0;display:flex;flex-direction:column;gap:16px;align-items:stretch;
  background:var(--card);padding:64px 12px 20px;box-shadow:var(--shadow-md);z-index:60;overflow-y:auto;border-radius:0;
  transform:translateX(-100%);transition:transform .22s ease}
.app-nav.open{transform:translateX(0)}
.app-nav .brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--navy);font-size:11pt;letter-spacing:.2px}
.app-nav .brand img{height:34px}
.app-nav .links{display:flex;flex-direction:column;gap:8px}
.app-nav a.nav-btn{text-decoration:none;background:var(--blue);color:#fff;padding:9px 12px;border-radius:var(--radius-sm);font-size:9pt;font-weight:700;white-space:nowrap;
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;box-shadow:var(--shadow-sm);display:block;text-align:left}
.app-nav a.nav-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);filter:brightness(1.05)}
.app-nav a.nav-btn:active{transform:translateY(0)}
.app-nav a.nav-btn.alt{background:var(--purple)}
.app-nav a.nav-btn.out{background:#F2F2F5;color:#555;box-shadow:none}
.app-nav a.nav-btn.cal{background:var(--green)}
.app-nav a.nav-btn.dash{background:#0C447C}
.app-nav a.nav-btn.plan{background:#8A3B1E}
.app-nav a.nav-btn.profs{background:#534AB7}
.app-nav a.nav-btn.seances{background:#D85A30}
.app-nav a.nav-btn.groupes{background:#993556}
.prof-nav a.nav-btn{text-decoration:none;background:#F2F2F5;color:#454B5C;padding:9px 16px;border-radius:var(--radius-sm);font-size:10pt;font-weight:700;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
.prof-nav a.nav-btn:hover{background:#E7E9F5;transform:translateY(-2px)}

/* ── PLAN DE L'ÉCOLE ── */
.plan-container{width:1100px;max-width:98vw;margin:16px auto 40px}
.plan-jours{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.plan-jour-btn{border:1.5px solid #D8D8D8;border-radius:20px;padding:8px 16px;font-size:10pt;cursor:pointer;background:#fff;font-family:'Inter',Arial,sans-serif;transition:all .15s ease}
.plan-jour-btn:hover{border-color:var(--blue);color:var(--blue-dark)}
.plan-jour-btn.on{background:#8A3B1E;color:#fff;border-color:#8A3B1E}
.plan-grid{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-areas:"salle3 classe salle2" "salle4 salle1 salle1" "bureau entree toilettes";gap:12px}
.plan-room{border-radius:var(--radius-sm);padding:14px 16px;min-height:120px;transition:box-shadow .15s ease}
.plan-room.bookable{background:#fff;border:1.5px solid var(--border);box-shadow:var(--shadow-sm)}
.plan-room.bookable:hover{box-shadow:var(--shadow-md)}
.plan-room.support{background:#F2F2F5;border:1px dashed #ccc;display:flex;align-items:center;justify-content:center;color:#aaa;font-size:9.5pt;min-height:60px}
.plan-room h4{font-size:11pt;color:var(--navy);margin-bottom:2px;font-weight:700}
.plan-room .badge-solo{display:inline-block;background:#FFF3E0;color:#E65100;font-size:8pt;font-weight:bold;padding:2px 8px;border-radius:10px;margin-bottom:8px}
.plan-room .session{background:#F7F7FB;border-left:3px solid var(--blue);border-radius:6px;padding:6px 9px;margin-top:6px;font-size:9pt;cursor:pointer;transition:background .12s ease}
.plan-room .session:hover{background:#EEF3FC}
.plan-room .session.camp{border-left-color:var(--orange)}
.plan-room .session b{color:var(--navy)}
.plan-room .empty{font-size:9pt;color:#bbb;margin-top:8px}

/* ── TABLEAU DE BORD ── */
.dash-grid{width:1100px;max-width:98vw;margin:16px auto;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.dash-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow-md);padding:18px 20px;transition:transform .15s ease,box-shadow .15s ease}
.dash-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.dash-card .val{font-size:21pt;font-weight:800;color:var(--navy)}
.dash-card .lbl{font-size:9.5pt;color:var(--muted);margin-top:2px}
.dash-section{width:1100px;max-width:98vw;margin:0 auto 24px;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow-md);overflow:hidden}
.dash-section h3{padding:15px 20px;background:#F8F9FC;border-bottom:1px solid var(--border);font-size:11.5pt;color:var(--navy);font-weight:700}
.notif-row{display:flex;justify-content:space-between;align-items:center;padding:13px 20px;border-bottom:1px solid #F2F3F7;transition:background .12s ease}
.notif-row:hover{background:#FAFBFD}
.notif-row:last-child{border-bottom:none}
.notif-row .info{font-size:10pt}
.notif-row .info b{color:var(--navy)}
.notif-empty{padding:26px 20px;color:#bbb;font-size:10pt;text-align:center}

/* ── ESPACE PROFESSEUR ── */
.prof-header{width:1100px;max-width:98vw;margin:16px auto;background:linear-gradient(135deg,var(--navy),var(--blue));border-radius:var(--radius);box-shadow:var(--shadow-md);padding:24px 30px;display:flex;align-items:center;gap:18px;overflow:hidden;position:relative}
.prof-header::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% -20%,rgba(255,255,255,.18),transparent 55%);pointer-events:none}
.prof-header .stripe{position:absolute;top:0;left:0;right:0;height:5px;background:var(--orange)}
.prof-header img{height:46px;flex-shrink:0;background:#fff;border-radius:8px;padding:5px}
.prof-avatar{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18pt;font-weight:800;flex-shrink:0;border:2px solid rgba(255,255,255,.4)}
.prof-header h2{font-size:15pt;color:#fff;font-weight:700}
.prof-header p{font-size:9.5pt;color:rgba(255,255,255,.85);margin-top:2px}
.prof-nav{width:206px;position:fixed;top:0;left:0;height:100vh;margin:0;display:flex;flex-direction:column;align-items:stretch;
  background:var(--card);padding:64px 12px 20px;box-shadow:var(--shadow-md);z-index:60;overflow-y:auto;border-radius:0;gap:16px;
  transform:translateX(-100%);transition:transform .22s ease}
.prof-nav.open{transform:translateX(0)}
.prof-nav .brand{display:flex;align-items:center;gap:10px}
.prof-nav .brand img{height:34px}
.prof-nav .brand span{font-weight:800;color:var(--navy);font-size:12pt}
.seance-row{display:flex;justify-content:space-between;align-items:center;padding:13px 20px;border-bottom:1px solid #F2F3F7;gap:12px;flex-wrap:wrap;transition:background .12s ease}
.seance-row:hover{background:#FAFBFD}
.seance-row:last-child{border-bottom:none}
.seance-row .info{font-size:10pt}
.seance-row .info b{color:var(--navy)}
.seance-row .actions{display:flex;gap:5px;flex-wrap:wrap}
.btn-mini.present{background:var(--green);color:#fff;border:none}
.btn-mini.absent{background:var(--red);color:#fff;border:none}
.btn-mini.annule{background:#F8F0F0;color:var(--red);border:1px solid #FFCDD2}
.btn-mini.reporte{background:var(--orange);color:#fff;border:none}

/* ── CALENDRIER ── */
.cal-container{width:1100px;max-width:98vw;margin:16px auto 40px;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden}
.cal-header{background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;padding:24px 30px;display:flex;justify-content:space-between;align-items:center;position:relative;overflow:hidden}
.cal-header::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 90% -30%,rgba(255,255,255,.16),transparent 55%);pointer-events:none}
.cal-header h2{font-size:17pt;font-weight:800;letter-spacing:.3px}
.cal-nav{display:flex;align-items:center;gap:14px;position:relative}
.cal-nav button{background:rgba(255,255,255,.15);color:#fff;border:none;border-radius:var(--radius-sm);padding:8px 14px;font-size:11pt;cursor:pointer;font-weight:700;transition:background .12s ease}
.cal-nav button:hover{background:rgba(255,255,255,.28)}
.cal-nav .cal-month-label{font-size:13pt;font-weight:700;min-width:170px;text-align:center}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-grid .cal-dow{background:var(--navy);color:#fff;text-align:center;padding:10px 0;font-size:9pt;font-weight:700;letter-spacing:.3px}
.cal-day{min-height:110px;border:1px solid #F2F3F7;padding:7px;vertical-align:top;position:relative;transition:background .12s ease}
.cal-day:hover{background:#FAFBFD}
.cal-day.other-month{background:#FAFAFA;color:#ccc}
.cal-day.other-month:hover{background:#FAFAFA}
.cal-day.today{background:#EEF7FF}
.cal-day-num{font-size:9.5pt;color:#888;font-weight:700;margin-bottom:4px}
.cal-chip{display:block;background:#E3F2FD;color:#1976D2;border-radius:6px;padding:3px 7px;font-size:8pt;margin-bottom:3px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:transform .1s ease,filter .1s ease}
.cal-chip.camp{background:#FFF3E0;color:#E65100}
.cal-chip.statut-present{background:#E3F6E8;color:#1E7A34}
.cal-chip.statut-absent{background:#FCE8E6;color:#C0392B}
.cal-chip.statut-annulee{background:#EFEFEF;color:#999;text-decoration:line-through}
.cal-chip:hover{filter:brightness(0.94);transform:translateX(1px)}
.cal-empty{text-align:center;padding:60px 20px;color:#bbb}

.cal-modal-overlay{display:none;position:fixed;inset:0;background:rgba(15,15,35,.5);backdrop-filter:blur(2px);z-index:100;align-items:center;justify-content:center}
.cal-modal-overlay.open{display:flex}
.cal-modal{background:#fff;border-radius:16px;width:420px;max-width:92vw;max-height:88vh;overflow-y:auto;padding:26px;box-shadow:var(--shadow-lg);animation:popIn .2s ease}
.cal-modal h3{color:var(--navy);font-size:13pt;margin-bottom:14px;font-weight:700}
.cal-modal .row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid #F2F3F7;font-size:10pt;gap:14px}
.cal-modal .row .lbl{color:var(--muted);white-space:nowrap}
.cal-modal .actions{display:flex;gap:10px;margin-top:18px}
.cal-modal .actions button{flex:1;padding:10px;border:none;border-radius:var(--radius-sm);font-size:10pt;font-weight:700;cursor:pointer;transition:filter .12s ease,transform .12s ease}
.cal-modal .actions button:hover{filter:brightness(1.06);transform:translateY(-1px)}
.cal-modal .btn-view{background:var(--navy);color:#fff}
.cal-modal .btn-edit{background:var(--green);color:#fff}
.cal-modal .btn-close{background:#F2F2F5;color:#555}

/* ── FORMULAIRE ── */
.form-container{width:900px;max-width:98vw;margin:16px auto 40px;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden}
.form-header{background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;padding:24px 30px;position:relative;overflow:hidden}
.form-header::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 90% -30%,rgba(255,255,255,.16),transparent 55%);pointer-events:none}
.form-header h2{font-size:16pt;font-weight:800}
.form-header p{font-size:9pt;opacity:.88;margin-top:4px}
.form-body{padding:26px 30px}
.form-section{margin-bottom:22px}
.form-section h3{font-size:11pt;color:var(--navy);border-bottom:2px solid #EEEFF4;padding-bottom:6px;margin-bottom:14px;font-weight:700}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px}
.form-grid.cols3{grid-template-columns:1fr 1fr 1fr}
.form-grid.cols4{grid-template-columns:1fr 1fr 1fr 1fr}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:9.5pt;color:#666;font-weight:700}
.field input[type=text],.field input[type=tel],.field input[type=email],.field input[type=number],.field input[type=date],.field input[type=time],.field select{
  border:1.5px solid #D8D8D8;border-radius:var(--radius-sm);padding:9px 10px;font-family:'Inter',Arial,sans-serif;font-size:10.5pt;outline:none;background:#fff;transition:border-color .15s,box-shadow .15s}
.field input:focus,.field select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(77,184,232,.15)}
.radio-row{display:flex;gap:16px;padding:6px 0}
.radio-opt{display:flex;align-items:center;gap:6px;font-size:10pt}
.jours-row{display:flex;flex-wrap:wrap;gap:8px}
.jour-chip{display:flex;align-items:center;gap:5px;border:1.5px solid #D8D8D8;border-radius:20px;padding:6px 12px;font-size:9.5pt;cursor:pointer;transition:border-color .12s ease,background .12s ease}
.jour-chip:hover{border-color:var(--blue)}
.jour-chip input{margin:0}
.readonly-box{background:#F7F7FB;border:1.5px dashed #C7C7E8;border-radius:var(--radius-sm);padding:9px 10px;font-size:10.5pt;font-weight:700;color:var(--navy)}
.btn-submit{background:var(--green);color:#fff;border:none;border-radius:var(--radius-sm);padding:13px 26px;font-size:11pt;font-weight:700;cursor:pointer;width:100%;transition:filter .12s ease,transform .12s ease,box-shadow .12s ease}
.btn-submit:hover{filter:brightness(1.05);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.btn-submit:active{transform:translateY(0)}
.btn-submit:disabled{opacity:.6;cursor:wait;transform:none}
.form-msg{margin-top:16px;padding:14px 16px;border-radius:var(--radius-sm);font-size:10pt;display:none}
.form-msg.ok{display:block;background:#EAF7EF;color:var(--green);border:1px solid #B9E6CC}
.form-msg.err{display:block;background:#FDECEA;color:var(--red);border:1px solid #F5C6C2}
.form-msg .btn-fac{display:inline-block;margin-top:10px;background:var(--navy);color:#fff;text-decoration:none;padding:9px 16px;border-radius:var(--radius-sm);font-size:10pt;font-weight:700;transition:filter .12s ease}
.form-msg .btn-fac:hover{filter:brightness(1.15)}

/* ── LISTE ── */
.hist-container{width:1100px;max-width:98vw;margin:16px auto 40px;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden}
.hist-header{background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;padding:24px 30px;display:flex;justify-content:space-between;align-items:center;position:relative;overflow:hidden}
.hist-header::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 90% -30%,rgba(255,255,255,.16),transparent 55%);pointer-events:none}
.hist-header h2{font-size:17pt;font-weight:800;letter-spacing:.3px}
.hist-header p{font-size:9pt;opacity:.85;margin-top:4px}
.hist-stats{display:flex;gap:20px;text-align:right;position:relative}
.hist-stat{background:rgba(255,255,255,.14);border-radius:var(--radius-sm);padding:8px 14px}
.hist-stat .val{font-size:15pt;font-weight:800}
.hist-stat .lbl{font-size:8pt;opacity:.8}
.hist-toolbar{padding:14px 20px;background:#F8F9FC;border-bottom:1px solid var(--border);display:flex;gap:10px;align-items:center}
.hist-search{flex:1;padding:9px 12px;border:1.5px solid #D0D0D0;border-radius:var(--radius-sm);font-size:10pt;font-family:'Inter',Arial,sans-serif;outline:none;transition:border-color .15s,box-shadow .15s}
.hist-search:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(77,184,232,.15)}
.hist-table-wrap{overflow-x:auto;max-height:65vh;overflow-y:auto}
table.hist{width:100%;border-collapse:collapse;font-size:9.5pt}
table.hist thead{position:sticky;top:0;z-index:10}
table.hist th{background:var(--navy);color:#fff;padding:11px 12px;text-align:left;font-size:9pt;white-space:nowrap;font-weight:700}
table.hist td{padding:10px 12px;border-bottom:1px solid #F2F3F7;vertical-align:middle}
table.hist tbody tr{transition:background .12s ease}
table.hist tbody tr:hover{background:#F5F8FC}
table.hist tbody tr:nth-child(even){background:#FAFBFD}
table.hist tbody tr:nth-child(even):hover{background:#F5F8FC}
.tag-service{display:inline-block;padding:3px 10px;border-radius:12px;font-size:8.5pt;font-weight:700;background:#E3F2FD;color:#1976D2}
.tag-paye{display:inline-block;padding:3px 10px;border-radius:12px;font-size:8.5pt;font-weight:700;background:#E8F8EF;color:var(--green)}
.tag-partiel{display:inline-block;padding:3px 10px;border-radius:12px;font-size:8.5pt;font-weight:700;background:#FFF3E0;color:#E65100}
.tag-nonpaye{display:inline-block;padding:3px 10px;border-radius:12px;font-size:8.5pt;font-weight:700;background:#FDECEA;color:var(--red)}
.btn-mini{background:#F2F2F5;color:#333;border:1px solid #ddd;border-radius:var(--radius-sm);padding:6px 10px;font-size:8.5pt;cursor:pointer;font-family:'Inter',Arial,sans-serif;font-weight:700;margin-right:4px;transition:filter .12s ease,transform .12s ease}
.btn-mini:hover{filter:brightness(0.97);transform:translateY(-1px)}
.btn-mini.fac{background:var(--navy);color:#fff;border:none}
.btn-mini.pay{background:var(--green);color:#fff;border:none}
.btn-mini.complete{background:#0C447C;color:#fff;border:none}
.btn-mini.del{background:#FEEEEE;color:var(--red);border:1px solid #FFCDD2}
.hist-empty{text-align:center;padding:50px 20px;color:#bbb}
.hist-empty p{font-size:14pt;margin-bottom:8px}
.hist-empty small{font-size:10pt}
.hist-footer{padding:12px 20px;background:#F8F9FC;border-top:1px solid var(--border);text-align:right;font-size:9pt;color:#888}

/* ── FACTURE (identique au document original — ne pas modifier l'apparence) ── */
.page{width:210mm;height:297mm;margin:20px auto;background:#fff;box-shadow:0 2px 16px rgba(0,0,0,.12);display:flex;flex-direction:column;overflow:hidden;}
.stripe-top{height:6px;background:#4DB8E8;flex-shrink:0}
.stripe-orange-top{height:3px;background:#F5A020;flex-shrink:0}
.stripe-orange-bot{height:3px;background:#F5A020;flex-shrink:0}
.stripe-bot{height:6px;background:#4DB8E8;flex-shrink:0}
.content{flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:9mm 16mm 8mm 16mm}
.header{display:flex;justify-content:space-between;align-items:center;padding-bottom:9px;border-bottom:1px solid #E0E0E0}
.header img{height:62px;width:auto}
.header-right{text-align:right}
.header-right .cn{font-size:13pt;font-weight:bold}
.header-right p{font-size:10pt;color:#888;margin-top:3px;line-height:1.6}
.title-row{display:flex;justify-content:space-between;align-items:flex-start}
.title-facture{font-size:23pt;font-weight:bold;letter-spacing:.5px}
.info-grid{display:grid;grid-template-columns:auto auto;gap:5px 12px;font-size:10pt}
.info-label{color:#888;text-align:right}
.info-value input{border:none;border-bottom:1px solid #D0D0D0;font-family:Arial;font-size:10pt;color:#1A1A1A;width:140px;outline:none;background:transparent;padding:2px 3px}
.info-value input:focus{border-bottom-color:#4DB8E8}
.client-block{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px 18px;padding:11px 14px;background:#FAFAFA;border:1px solid #EBEBEB;border-radius:5px;font-size:10pt}
.cb-field{display:flex;align-items:center;gap:7px}
.cb-label{color:#888;white-space:nowrap;font-size:9.5pt}
.cb-field input{border:none;border-bottom:1px solid #D0D0D0;font-family:Arial;font-size:10pt;color:#1A1A1A;flex:1;outline:none;background:transparent;padding:2px 3px}
.cb-field input:focus{border-bottom-color:#4DB8E8}
table.svc{width:100%;border-collapse:collapse;font-size:11.5pt}
table.svc thead tr{background:#F2F2F2}
table.svc th{padding:10px 11px;text-align:center;font-weight:bold;font-size:10.5pt;border:1px solid #D0D0D0;border-bottom:2.5px solid #1A1A1A}
table.svc th:first-child{text-align:left}
table.svc td{padding:15px 11px;border:1px solid #E8E8E8;font-size:11.5pt}
table.svc tbody tr:nth-child(odd){background:#FAFAFA}
table.svc td.c{text-align:center}
table.svc td.r{text-align:right}
table.svc td.tc{text-align:right;font-weight:500}
.totaux-wrap{display:flex;justify-content:flex-end}
.totaux-inner{width:340px}
.tr-row{display:flex;justify-content:space-between;padding:8px 11px;font-size:11pt}
.tr-st{background:#F5F5F5;color:#777;border-bottom:1px solid #E0E0E0}
.tr-rm{background:#FFF8F0;color:#555;font-style:italic;border-bottom:1px dashed #F5A020}
.tr-vs{background:#F0F8FF;color:#1976D2;border-bottom:1px solid #E0E0E0}
.tr-rs{background:#FFF8F0;color:#E65100;border-bottom:1px solid #E0E0E0;font-weight:bold}
.tr-tf{background:#F0F0F0;font-weight:bold;font-size:14pt;border-top:2.5px solid #1A1A1A;border-bottom:2.5px solid #1A1A1A}
.modalites{padding-top:10px;border-top:1.5px solid #D0D0D0;font-size:10pt}
.modalites .mt{font-weight:bold;font-size:11pt;margin-bottom:5px}
.modalites p{color:#555;margin-top:3px;line-height:1.6}
.modalites .lb{color:#888}
.notice{font-size:8pt;color:#bbb;font-style:italic;text-align:center;padding-top:8px;border-top:1px solid #EBEBEB;margin-top:8px}
.footer-text{text-align:center;font-size:9pt;color:#bbb;font-style:italic;margin-top:5px}

.print-bar{width:210mm;margin:0 auto 14px;display:flex;gap:10px;justify-content:space-between;align-items:center}
.print-bar-left{display:flex;gap:10px}
.btn{padding:9px 22px;border:none;border-radius:6px;font-family:Arial;font-size:10.5pt;cursor:pointer;font-weight:bold}
.btn-p{background:#4DB8E8;color:#fff}
.btn-pdf{background:#1D9E75;color:#fff}
.btn-retour{background:#6C4BC1;color:#fff}
.btn:disabled{opacity:.6;cursor:wait}

@page{size:210mm 297mm;margin:0}
@media print{
  body{background:#fff}
  .print-bar{display:none !important}
  .page{box-shadow:none;margin:0;width:210mm;height:297mm}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body.impression-fiche-paie > *:not(#payslipOverlay){display:none !important}
  body.impression-fiche-paie #payslipOverlay{position:static !important;background:none !important;padding:0 !important;display:flex !important}
  body.impression-fiche-paie #payslipOverlay .cal-modal{box-shadow:none !important;width:210mm !important;max-width:none !important}
  body.impression-fiche-paie .no-print{display:none !important}
}

/* ── SALAIRES ── */
.app-nav a.nav-btn.salaires{background:#3B6D11}
.app-nav a.nav-btn.camp{background:#D68A00}
.app-nav a.nav-btn.historique{background:#8E44AD}

/* ── HISTORIQUE APPRENANT (admin) ── */
.hist-edit-table{width:100%;border-collapse:collapse;font-size:9pt}
.hist-edit-table th,.hist-edit-table td{border:1px solid #EEEFF4;padding:6px 7px;text-align:left}
.hist-edit-table th{background:#F8F9FC;color:var(--navy);font-weight:700}
.hist-edit-table tbody tr:hover{background:#FAFBFD}
.hist-edit-table input,.hist-edit-table select{width:100%;border:1px solid #D8D8D8;border-radius:6px;padding:4px 5px;font-size:8.8pt;box-sizing:border-box;font-family:'Inter',Arial,sans-serif;transition:border-color .12s}
.hist-edit-table input:focus,.hist-edit-table select:focus{border-color:var(--blue);outline:none}
.hist-edit-table input[type=number]{width:60px}
.hist-edit-table input[type=date]{width:120px}

/* ── PLANNING SUMMER CAMP ── */
.camp-grid-wrap{overflow-x:auto;padding:0 18px 18px}
table.camp-grid{border-collapse:collapse;font-size:9pt;white-space:nowrap}
table.camp-grid th,table.camp-grid td{border:1px solid #EEEFF4;padding:7px 10px;text-align:center}
table.camp-grid th.label-col,table.camp-grid td.label-col{text-align:left;font-weight:700;background:#F8F9FC;position:sticky;left:0;z-index:2}
table.camp-grid th.week-header{background:var(--navy);color:#fff;font-size:10pt}
table.camp-grid th.day-header{background:#F0F1F6;color:var(--navy)}
table.camp-grid td.kids{background:#FDECEA}
table.camp-grid td.teens{background:#E8F8EF}
table.camp-grid input{width:90px;border:1px solid #D8D8D8;border-radius:6px;padding:4px 6px;font-size:9pt;text-align:center;font-family:'Inter',Arial,sans-serif;transition:border-color .12s}
table.camp-grid input:focus{border-color:var(--blue);outline:none}
.camp-claim-btn{background:var(--blue);color:#fff;border:none;border-radius:6px;padding:6px 9px;font-size:8.5pt;cursor:pointer;font-weight:700;transition:filter .12s ease,transform .12s ease}
.camp-claim-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.camp-slot-nom{font-weight:700;color:var(--navy)}
.salaire-payslip{background:#fff;border-radius:var(--radius-sm);overflow:hidden}
.salaire-payslip .sp-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;border-bottom:1px solid #E0E0E0;margin-bottom:14px}
.salaire-payslip .sp-header img{height:50px}
.salaire-payslip .sp-title{font-size:17pt;font-weight:800;color:var(--navy);margin-bottom:10px}
.salaire-line{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #F2F3F7;font-size:10.5pt}
.salaire-line.total{font-weight:800;font-size:13pt;border-top:2px solid #1A1A1A;border-bottom:2px solid #1A1A1A;margin-top:6px;padding:10px 0}
.salaire-line input{width:120px;text-align:right;border:1.5px solid var(--blue);border-radius:var(--radius-sm);padding:7px 9px;font-size:10.5pt;font-weight:700;color:var(--navy);background:#F0F8FF;transition:border-color .12s}
.salaire-line input:focus{border-color:var(--green);outline:none}

canvas{max-width:100%}

/* ── RESPONSIVE ── */
@media (max-width:820px){
  .dash-grid{grid-template-columns:repeat(2,1fr)}
  .form-grid.cols3,.form-grid.cols4{grid-template-columns:1fr 1fr}
  .plan-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .app-nav,.prof-nav{width:82vw}
  .dash-grid{grid-template-columns:1fr}
  .form-grid,.form-grid.cols3,.form-grid.cols4{grid-template-columns:1fr}
  .plan-grid{grid-template-columns:1fr}
  .cal-header,.form-header,.hist-header{flex-direction:column;align-items:flex-start;gap:12px}
  .hist-stats{width:100%;justify-content:flex-start}
  .app-nav a.nav-btn{padding:6px 9px;font-size:8.5pt}
  table.hist,table.camp-grid,.hist-edit-table{font-size:8pt}
}