/* --- Thème clair (défaut) --- */
:root{
  color-scheme:light;
  --bg:#f4f6fa; --panel:#ffffff; --ink:#1e2430; --muted:#6b7688;
  --line:#e2e7f0; --line2:#eef1f7; --accent:#3d85c6; --accent-ink:#fff;
  --we:#d9dee8; --we-ink:#8b93a3; --today:#ff7a00; --vac:#8b5cf6;
  --shadow:0 1px 3px rgba(20,30,50,.08),0 8px 24px rgba(20,30,50,.06);
  --radius:12px;
  /* Aurore (fond décoratif) */
  --aur1:#3d85c6; --aur2:#8b7fd6; --aur3:#4fc3b0; --aur4:#f2a3c0;
  --aur-site:.05;   /* intensité du fond léger sur tout le site */
  --glass:rgba(255,255,255,.72); --glass-line:rgba(255,255,255,.6);
  --login-scrim:linear-gradient(180deg, rgba(12,18,34,.28) 0%, rgba(12,18,34,.50) 100%);
  --field-bg:rgba(255,255,255,.66);
}
/* --- Thème sombre : jeu de variables réutilisable --- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0f141c; --panel:#171e29; --ink:#e6ebf3; --muted:#95a0b3;
  --line:#26303f; --line2:#1d2635; --we:#212a38; --we-ink:#6b7688; --vac:#a78bfa;
  --shadow:0 1px 3px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  --aur1:#2f6ea8; --aur2:#6f63c4; --aur3:#2f9d8c; --aur4:#b85a86;
  --aur-site:.12;
  --glass:rgba(23,30,41,.62); --glass-line:rgba(255,255,255,.08);
  --login-scrim:linear-gradient(180deg, rgba(6,10,20,.45) 0%, rgba(6,10,20,.68) 100%);
  --field-bg:rgba(15,21,32,.55);
}
/* Repli : suit le système si aucun choix explicite n'est stocké */
@media (prefers-color-scheme:dark){
  :root:not([data-theme]){
    color-scheme:dark;
    --bg:#0f141c; --panel:#171e29; --ink:#e6ebf3; --muted:#95a0b3;
    --line:#26303f; --line2:#1d2635; --we:#212a38; --we-ink:#6b7688; --vac:#a78bfa;
    --shadow:0 1px 3px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
    --aur1:#2f6ea8; --aur2:#6f63c4; --aur3:#2f9d8c; --aur4:#b85a86;
    --aur-site:.12;
    --glass:rgba(23,30,41,.62); --glass-line:rgba(255,255,255,.08);
    --login-scrim:linear-gradient(180deg, rgba(6,10,20,.45) 0%, rgba(6,10,20,.68) 100%);
    --field-bg:rgba(15,21,32,.55);
  }
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink);
  font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
/* Aurore discrète derrière tout le site (calque fixe, sous les panneaux opaques) */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:var(--aur-site);
  background:
    radial-gradient(38vw 38vw at 12% 8%, var(--aur1) 0, transparent 60%),
    radial-gradient(42vw 42vw at 88% 4%, var(--aur2) 0, transparent 60%),
    radial-gradient(46vw 46vw at 78% 92%, var(--aur3) 0, transparent 62%),
    radial-gradient(40vw 40vw at 8% 96%, var(--aur4) 0, transparent 60%);
}
h1,h2{margin:0}
.muted{color:var(--muted)}

/* ---------- Topbar ---------- */
.topbar{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:12px 20px; background:var(--panel); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20; box-shadow:var(--shadow);
}
.brand{display:flex; align-items:center; gap:10px}
.brand .logo{font-size:26px}
.brand h1{font-size:20px; letter-spacing:.3px}
.brand p{margin:0; font-size:12px; color:var(--muted)}
.year-nav{display:flex; align-items:center; gap:6px; margin-left:auto}
.year-nav .year{font-size:20px; font-weight:700; min-width:74px; text-align:center}
.actions{display:flex; gap:8px}

.btn{
  border:1px solid var(--line); background:var(--panel); color:var(--ink);
  padding:8px 14px; border-radius:9px; cursor:pointer; font-size:14px;
  transition:background .15s,border-color .15s,transform .05s;
}
.btn:hover{background:var(--line2)}
.btn:active{transform:translateY(1px)}
.btn.icon{padding:6px 12px; font-size:18px; line-height:1}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent}
.btn.erase{border-style:dashed}
.btn.active{outline:2px solid var(--accent); outline-offset:1px}

/* ---------- Toolbar / palette ---------- */
main{padding:16px 20px 40px}
.toolbar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:10px 14px; margin-bottom:16px; box-shadow:var(--shadow);
}
.tool-hint{color:var(--muted); font-size:12.5px}
.swatches{display:flex; gap:6px; flex-wrap:wrap}
.swatch{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  border:1px solid var(--line); border-radius:8px; padding:5px 9px;
  background:var(--panel); color:var(--ink); font-size:12.5px; user-select:none;
}
.swatch .dot{width:13px; height:13px; border-radius:3px; flex:none}
.swatch.active{outline:2px solid var(--ink); outline-offset:1px; font-weight:600}
.half-toggle{display:inline-flex; align-items:center; gap:6px; font-size:13px; cursor:pointer}
.zone-select{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--muted)}
.zone-select select{border:1px solid var(--line); border-radius:8px; padding:5px 8px;
  background:var(--bg); color:var(--ink); font-size:13px; cursor:pointer}

/* ---------- Layout ---------- */
.layout{display:flex; gap:16px; align-items:flex-start}
.calwrap{flex:1 1 auto; min-width:0; overflow:auto;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:10px; box-shadow:var(--shadow);}
.recap{flex:0 0 300px; position:sticky; top:78px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; box-shadow:var(--shadow);}
@media (max-width:980px){
  .layout{flex-direction:column}
  .recap{position:static; width:100%; flex-basis:auto}
}

/* ---------- Calendrier ---------- */
.calendar{display:grid; grid-template-columns:repeat(12,minmax(58px,1fr)); gap:0;
  min-width:760px;}
.month{display:flex; flex-direction:column; border-right:1px solid var(--line2)}
.month:last-child{border-right:0}
.month-h{
  text-align:center; font-weight:700; font-size:12px; padding:6px 2px;
  text-transform:uppercase; letter-spacing:.4px; color:var(--muted);
  position:sticky; top:0; background:var(--panel); border-bottom:1px solid var(--line);
}
.cell{
  display:flex; align-items:center; gap:4px; justify-content:flex-start;
  padding:3px 5px; height:23px; font-size:11.5px; cursor:pointer;
  border-bottom:1px solid var(--line2); position:relative; user-select:none;
}
.cell .dnum{color:var(--muted); min-width:26px; font-variant-numeric:tabular-nums}
.cell .dwd{opacity:.7; font-size:10px; text-transform:uppercase}
.cell.empty{cursor:default; background:transparent; border-bottom:1px solid transparent}
.cell.we{background:var(--we); color:var(--we-ink); cursor:not-allowed}
.cell.we .dnum{color:var(--we-ink)}
.cell.leave{color:#fff; font-weight:600}
.cell.leave .dnum{color:rgba(255,255,255,.85)}
.cell.leave .code{margin-left:auto; font-size:10px; letter-spacing:.3px}
.cell.half{background-image:linear-gradient(135deg,var(--half-col) 0 50%,var(--we) 50% 100%)!important;}
.cell.today{box-shadow:inset 0 0 0 2px var(--today)}
.cell.sel{box-shadow:inset 0 0 0 2px var(--accent)}
.cell:not(.we):not(.empty):hover{filter:brightness(.96)}
.cell.hol{position:relative}
.cell.hol::after{content:"•"; color:var(--today); position:absolute; right:3px; top:0}
/* Vacances scolaires : trait vertical continu le long des jours (indicatif).
   bottom:-1px comble la bordure inter-cellules pour une ligne d'un seul tenant. */
.cell.vac::before{content:""; position:absolute; left:1px; top:0; bottom:-1px; width:3px;
  border-radius:2px; background:var(--vac); pointer-events:none}

/* ---------- Récap ---------- */
.recap h2{font-size:16px; margin-bottom:10px}
.recap-table{width:100%; border-collapse:collapse; font-size:13px}
.recap-table th{ text-align:right; font-size:11px; color:var(--muted); font-weight:600;
  padding:4px 6px; border-bottom:1px solid var(--line)}
.recap-table th:first-child{text-align:left}
.recap-table td{padding:5px 6px; border-bottom:1px solid var(--line2); text-align:right;
  font-variant-numeric:tabular-nums}
.recap-table td:first-child{text-align:left}
.recap-table .tname{display:inline-flex; align-items:center; gap:7px}
.recap-table .tname .dot{width:11px; height:11px; border-radius:3px; flex:none}
.recap-table .auto-badge{font-size:9px; background:var(--line); color:var(--muted);
  padding:1px 5px; border-radius:6px; margin-left:2px}
.recap-table .reste-neg{color:#d13b3b; font-weight:700}
.recap-table tr.total-row td{border-top:2px solid var(--line); font-weight:700}
.events{margin-top:14px; font-size:12px; color:var(--muted); display:flex; flex-direction:column; gap:5px}
.events .ev{display:flex; gap:7px; align-items:baseline}
.events .ev b{color:var(--ink)}
.school-events:not(:empty){margin-top:12px; padding-top:10px; border-top:1px solid var(--line2)}
.school-events .school-head{font-size:12.5px; color:var(--ink); margin-bottom:2px}
.school-events .school-head b{color:var(--vac)}

/* ---------- Popover ---------- */
.popover{
  position:absolute; z-index:40; background:var(--panel); border:1px solid var(--line);
  border-radius:10px; box-shadow:var(--shadow); padding:10px; min-width:190px;
}
.popover h4{margin:0 0 8px; font-size:13px}
.popover .pv-grid{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.popover .pv-btn{border:1px solid var(--line); border-radius:7px; padding:6px; cursor:pointer;
  background:var(--panel); color:var(--ink); font-size:12px; display:flex; align-items:center; gap:6px}
.popover .pv-btn .dot{width:10px;height:10px;border-radius:3px;flex:none}
.popover .pv-btn:hover{background:var(--line2)}
.popover .pv-foot{display:flex; gap:6px; margin-top:8px}

/* ---------- Modales ---------- */
.modal{position:fixed; inset:0; background:rgba(10,15,25,.5); display:flex;
  align-items:center; justify-content:center; z-index:60; padding:16px}
.modal-card{background:var(--panel); border-radius:14px; box-shadow:var(--shadow);
  padding:22px; width:100%; max-width:520px; max-height:88vh; overflow:auto}
.modal-card h2{font-size:18px; margin-bottom:6px}
.settings-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; margin:16px 0}
.settings-grid label{display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--muted)}
.settings-grid .lab{display:inline-flex; align-items:center; gap:7px; color:var(--ink); font-weight:600; font-size:13px}
.settings-grid .lab .dot{width:11px;height:11px;border-radius:3px}
.settings-grid input{border:1px solid var(--line); border-radius:8px; padding:7px 9px;
  font-size:14px; background:var(--bg); color:var(--ink)}
.modal-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:8px}
.help{margin:8px 0 16px; padding-left:18px; display:flex; flex-direction:column; gap:7px; font-size:13.5px}

/* ---------- Toast ---------- */
.toast{position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:var(--bg); padding:9px 16px; border-radius:9px;
  font-size:13px; z-index:80; box-shadow:var(--shadow); opacity:0; transition:opacity .2s}
.toast.show{opacity:1}

/* ---------- Utilisateur / thème (topbar) ---------- */
.user-box{display:flex; align-items:center; gap:8px}
.user-box .uname{font-size:13px; color:var(--muted); max-width:160px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.user-box .uname b{color:var(--ink)}

/* ---------- Page login ---------- */
.login-page{
  min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center;
  padding:20px; position:relative; overflow:hidden; isolation:isolate;
  background:var(--bg); /* repli tant que la photo n'est pas chargée */
  /* Photo choisie au hasard par login.php (--login-img) parmi assets/login-bg-*.jpg
     (paysages libres de droits, Pexels). Repli : login-bg-1.jpg. */
  background:var(--login-scrim), var(--login-img, url('login-bg-1.jpg')) center center / cover no-repeat, var(--bg);
}
.login-card{
  position:relative; z-index:1;
  background:var(--glass); border:1px solid var(--glass-line); border-radius:22px;
  box-shadow:
    0 24px 60px -18px rgba(6,12,30,.55),
    0 6px 18px -8px rgba(6,12,30,.35),
    inset 0 1px 0 rgba(255,255,255,.28);
  padding:36px 34px 32px; width:100%; max-width:380px;
  -webkit-backdrop-filter:blur(22px) saturate(1.5); backdrop-filter:blur(22px) saturate(1.5);
  animation:card-in .6s cubic-bezier(.2,.75,.2,1) both;
}
/* Filet dégradé lumineux tout en haut de la carte */
.login-card::before{
  content:""; position:absolute; left:22px; right:22px; top:0; height:2px; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--accent), #7db4e6, transparent);
  opacity:.8; pointer-events:none;
}
@keyframes card-in{
  from{opacity:0; transform:translateY(16px) scale(.985)}
  to{opacity:1; transform:none}
}
@media (prefers-reduced-motion:reduce){ .login-card{animation:none} }

.login-card .logo-row{display:flex; align-items:center; gap:13px; margin-bottom:4px}
.login-card .logo-row .logo{
  font-size:24px; width:48px; height:48px; flex:none; display:grid; place-items:center;
  border-radius:15px; background:linear-gradient(140deg,var(--accent),#6aa8e0);
  box-shadow:0 8px 20px -6px rgba(61,133,198,.65), inset 0 1px 0 rgba(255,255,255,.4);
}
.login-card h1{font-size:25px; font-weight:700; letter-spacing:-.02em}
.login-card p.sub{color:var(--muted); font-size:13.5px; margin:10px 0 24px; line-height:1.5}

.login-card label{
  display:block; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); margin:18px 0 7px;
}
.login-card input{
  width:100%; border:1px solid var(--glass-line); border-radius:13px;
  padding:13px 15px 13px 44px; font-size:15px; color:var(--ink); background-color:var(--field-bg);
  background-repeat:no-repeat; background-position:14px center; background-size:19px 19px;
  transition:border-color .15s, box-shadow .18s, background-color .15s;
}
.login-card input::placeholder{color:var(--muted)}
.login-card input[name="username"]{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%238b93a3%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2021v-2a4%204%200%200%200-4-4H8a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3C%2Fsvg%3E")}
.login-card input[type="password"]{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%238b93a3%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%2211%22%20width%3D%2218%22%20height%3D%2211%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M7%2011V7a5%205%200%200%201%2010%200v4%22%2F%3E%3C%2Fsvg%3E")}
.login-card input:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 24%, transparent);
}

.login-card .err{
  display:flex; align-items:center; gap:8px;
  background:color-mix(in srgb, #e5484d 16%, var(--glass));
  color:#c0272d; border:1px solid color-mix(in srgb, #e5484d 40%, transparent);
  padding:10px 13px; border-radius:11px; font-size:13px; margin-top:16px;
}
.login-card .err::before{content:"⚠"; font-size:14px}
:root[data-theme="dark"] .login-card .err{color:#ffb3b6}

.login-card button.primary{
  width:100%; margin-top:26px; padding:14px; border:0; border-radius:13px;
  font-size:15px; font-weight:650; letter-spacing:.01em; cursor:pointer; color:#fff;
  background:linear-gradient(135deg, var(--accent), #5a97d6);
  box-shadow:0 12px 26px -10px rgba(61,133,198,.8), inset 0 1px 0 rgba(255,255,255,.35);
  position:relative; overflow:hidden; isolation:isolate;
  transition:transform .08s ease, box-shadow .2s ease, filter .2s ease;
}
.login-card button.primary::before{ /* reflet qui balaie au survol */
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform:translateX(-120%); transition:transform .55s ease;
}
.login-card button.primary:hover{
  filter:brightness(1.05); transform:translateY(-1px);
  box-shadow:0 16px 32px -10px rgba(61,133,198,.9), inset 0 1px 0 rgba(255,255,255,.35);
}
.login-card button.primary:hover::before{transform:translateX(120%)}
.login-card button.primary:active{transform:translateY(0)}
.login-card button.primary:focus-visible{outline:none; box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent)}

/* ---------- Page admin ---------- */
.admin-wrap{max-width:900px; margin:24px auto; padding:0 20px}
.admin-wrap .back{display:inline-block; margin-bottom:14px; color:var(--accent); text-decoration:none; font-size:13px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:18px 20px; margin-bottom:18px}
.card h2{font-size:17px; margin-bottom:12px}
.users-table{width:100%; border-collapse:collapse; font-size:13.5px}
.users-table th{text-align:left; font-size:11px; color:var(--muted); font-weight:600;
  padding:8px 8px; border-bottom:1px solid var(--line); text-transform:uppercase; letter-spacing:.3px}
.users-table td{padding:9px 8px; border-bottom:1px solid var(--line2); vertical-align:middle}
.users-table .role{font-size:11px; padding:2px 8px; border-radius:20px; background:var(--line); color:var(--muted)}
.users-table .role.admin{background:var(--accent); color:var(--accent-ink)}
.users-table .row-actions{display:flex; gap:6px; flex-wrap:wrap}
.form-row{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end}
.form-row .fld{display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted)}
.form-row input, .form-row select{border:1px solid var(--line); border-radius:8px; padding:8px 10px;
  font-size:14px; background:var(--bg); color:var(--ink)}
.form-row label.chk{flex-direction:row; align-items:center; gap:6px; color:var(--ink); font-size:13px}
.btn.danger{border-color:#e0a0a0; color:#c23434}
.btn.danger:hover{background:#fdecec}
:root[data-theme="dark"] .btn.danger{border-color:#6b3232; color:#f0a0a0}
:root[data-theme="dark"] .btn.danger:hover{background:#3a1d1d}
.btn.sm{padding:5px 10px; font-size:12.5px}