/* ==========================================================================
   SCOLARIS — DESIGN SYSTEM
   Palette : Marine profond (#0B1B3A) + Bleu électrique (#2563EB) + Or discret (#C9A227)
   Typo    : Sora (titres) / Inter (corps) / JetBrains Mono (matricules, montants)
   Signature : cartes "verre marine" (glassmorphism) + liseré or sur les éléments actifs,
               évoquant un registre scolaire haut de gamme relié en temps réel.
   ========================================================================== */

:root{
  --navy-950:#060e21;
  --navy-900:#0b1b3a;
  --navy-800:#132a54;
  --navy-700:#1c3a6e;
  --blue-600:#2563eb;
  --blue-500:#3b82f6;
  --blue-400:#60a5fa;
  --gold-500:#c9a227;
  --gold-400:#e0bf4f;
  --white:#ffffff;
  --slate-50:#f8fafc;
  --slate-100:#eef2f8;
  --slate-200:#e2e8f0;
  --slate-400:#94a3b8;
  --slate-500:#64748b;
  --slate-600:#475569;
  --success:#16a34a;
  --warning:#d97706;
  --danger:#dc2626;
  --info:#0891b2;

  --blue-600-rgb:37,99,235;
  --blue-500-rgb:59,130,246;
  --gold-500-rgb:201,162,39;

  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:20px;
  --shadow-soft:0 8px 30px rgba(11,27,58,.08);
  --shadow-lift:0 16px 40px rgba(11,27,58,.14);

  --bg:var(--slate-50);
  --surface:rgba(255,255,255,.72);
  --surface-solid:#ffffff;
  --text:#0f1b33;
  --text-muted:var(--slate-500);
  --border:rgba(11,27,58,.09);
}

[data-theme="dark"]{
  --bg:#070f24;
  --surface:rgba(19,32,64,.62);
  --surface-solid:#0e1c3c;
  --text:#eef2fb;
  --text-muted:#93a3c4;
  --border:rgba(255,255,255,.08);
  --slate-100:#12213f;
  --slate-200:#1a2b4d;
}

/* ==========================================================================
   THÈMES DE COULEUR — s'appliquent indépendamment du mode clair/sombre
   via [data-color="..."] posé sur <html>, en plus (et non à la place)
   du thème sombre géré par [data-theme="dark"] ci-dessus.
   ========================================================================== */
[data-color="emeraude"]{
  --navy-950:#0d1c15; --navy-900:#163125; --navy-800:#224937; --navy-700:#31634c;
  --blue-600:#26c97d; --blue-500:#47e199; --blue-400:#71eab1;
  --gold-500:#39b2d0; --gold-400:#64c5dd;
  --blue-600-rgb:38,201,125; --blue-500-rgb:71,225,153; --gold-500-rgb:57,178,208;
}
[data-color="rubis"]{
  --navy-950:#1c0d0f; --navy-900:#31161b; --navy-800:#492229; --navy-700:#633139;
  --blue-600:#c92642; --blue-500:#e14760; --blue-400:#ea7185;
  --gold-500:#d08539; --gold-400:#dda164;
  --blue-600-rgb:201,38,66; --blue-500-rgb:225,71,96; --gold-500-rgb:208,133,57;
}
[data-color="amethyste"]{
  --navy-950:#140d1c; --navy-900:#241631; --navy-800:#362249; --navy-700:#4a3163;
  --blue-600:#7826c9; --blue-500:#9447e1; --blue-400:#ad71ea;
  --gold-500:#d039b7; --gold-400:#dd64c9;
  --blue-600-rgb:120,38,201; --blue-500-rgb:148,71,225; --gold-500-rgb:208,57,183;
}
[data-color="ambre"]{
  --navy-950:#1c160d; --navy-900:#312716; --navy-800:#493b22; --navy-700:#635131;
  --blue-600:#c98e26; --blue-500:#e1a847; --blue-400:#eabe71;
  --gold-500:#a3d039; --gold-400:#b9dd64;
  --blue-600-rgb:201,142,38; --blue-500-rgb:225,168,71; --gold-500-rgb:163,208,57;
}
[data-color="rose-poudre"]{
  --navy-950:#1c0d14; --navy-900:#311624; --navy-800:#492236; --navy-700:#63314a;
  --blue-600:#c92678; --blue-500:#e14794; --blue-400:#ea71ad;
  --gold-500:#d05239; --gold-400:#dd7864;
  --blue-600-rgb:201,38,120; --blue-500-rgb:225,71,148; --gold-500-rgb:208,82,57;
}
[data-color="turquoise"]{
  --navy-950:#0d1c1b; --navy-900:#16312f; --navy-800:#224945; --navy-700:#31635e;
  --blue-600:#26c9b9; --blue-500:#47e1d2; --blue-400:#71eade;
  --gold-500:#397ad0; --gold-400:#6499dd;
  --blue-600-rgb:38,201,185; --blue-500-rgb:71,225,210; --gold-500-rgb:57,122,208;
}
[data-color="corail"]{
  --navy-950:#1c0f0d; --navy-900:#311a16; --navy-800:#492722; --navy-700:#633831;
  --blue-600:#c93c26; --blue-500:#e15b47; --blue-400:#ea8171;
  --gold-500:#d0b239; --gold-400:#ddc564;
  --blue-600-rgb:201,60,38; --blue-500-rgb:225,91,71; --gold-500-rgb:208,178,57;
}
[data-color="indigo"]{
  --navy-950:#0d0d1c; --navy-900:#171631; --navy-800:#242249; --navy-700:#333163;
  --blue-600:#2f26c9; --blue-500:#4e47e1; --blue-400:#7771ea;
  --gold-500:#a539d0; --gold-400:#bb64dd;
  --blue-600-rgb:47,38,201; --blue-500-rgb:78,71,225; --gold-500-rgb:165,57,208;
}
[data-color="foret"]{
  --navy-950:#0d1c0f; --navy-900:#16311b; --navy-800:#224929; --navy-700:#316339;
  --blue-600:#26c942; --blue-500:#47e160; --blue-400:#71ea85;
  --gold-500:#39d0b7; --gold-400:#64ddc9;
  --blue-600-rgb:38,201,66; --blue-500-rgb:71,225,96; --gold-500-rgb:57,208,183;
}
[data-color="bordeaux"]{
  --navy-950:#1c0d11; --navy-900:#31161d; --navy-800:#49222c; --navy-700:#63313d;
  --blue-600:#c9264f; --blue-500:#e1476d; --blue-400:#ea718f;
  --gold-500:#d07839; --gold-400:#dd9764;
  --blue-600-rgb:201,38,79; --blue-500-rgb:225,71,109; --gold-500-rgb:208,120,57;
}
[data-color="charbon"]{
  --navy-950:#121417; --navy-900:#1f2228; --navy-800:#30343b; --navy-700:#444850;
  --blue-600:#265dc9; --blue-500:#477ae1; --blue-400:#7199ea;
  --gold-500:#6b39d0; --gold-400:#8d64dd;
  --blue-600-rgb:38,93,201; --blue-500-rgb:71,122,225; --gold-500-rgb:107,57,208;
}
[data-color="lavande"]{
  --navy-950:#110d1c; --navy-900:#1e1631; --navy-800:#2e2249; --navy-700:#403163;
  --blue-600:#5726c9; --blue-500:#7547e1; --blue-400:#9571ea;
  --gold-500:#cb39d0; --gold-400:#d964dd;
  --blue-600-rgb:87,38,201; --blue-500-rgb:117,71,225; --gold-500-rgb:203,57,208;
}
[data-color="menthe"]{
  --navy-950:#0d1c18; --navy-900:#16312a; --navy-800:#22493f; --navy-700:#316357;
  --blue-600:#26c9a1; --blue-500:#47e1ba; --blue-400:#71eacc;
  --gold-500:#3991d0; --gold-400:#64abdd;
  --blue-600-rgb:38,201,161; --blue-500-rgb:71,225,186; --gold-500-rgb:57,145,208;
}
[data-color="saumon"]{
  --navy-950:#1c100d; --navy-900:#311c16; --navy-800:#492a22; --navy-700:#633b31;
  --blue-600:#c94726; --blue-500:#e16647; --blue-400:#ea8971;
  --gold-500:#d0bc39; --gold-400:#ddcd64;
  --blue-600-rgb:201,71,38; --blue-500-rgb:225,102,71; --gold-500-rgb:208,188,57;
}
[data-color="cyan"]{
  --navy-950:#0d1a1c; --navy-900:#162d31; --navy-800:#224249; --navy-700:#315b63;
  --blue-600:#26aec9; --blue-500:#47c7e1; --blue-400:#71d6ea;
  --gold-500:#3952d0; --gold-400:#6478dd;
  --blue-600-rgb:38,174,201; --blue-500-rgb:71,199,225; --gold-500-rgb:57,82,208;
}
[data-color="magenta"]{
  --navy-950:#1c0d1c; --navy-900:#311631; --navy-800:#492249; --navy-700:#633163;
  --blue-600:#c926c9; --blue-500:#e147e1; --blue-400:#ea71ea;
  --gold-500:#d0396b; --gold-400:#dd648d;
  --blue-600-rgb:201,38,201; --blue-500-rgb:225,71,225; --gold-500-rgb:208,57,107;
}
[data-color="olive"]{
  --navy-950:#1a1c0d; --navy-900:#2e3116; --navy-800:#444922; --navy-700:#5c6331;
  --blue-600:#b4c926; --blue-500:#cce147; --blue-400:#daea71;
  --gold-500:#57d039; --gold-400:#7cdd64;
  --blue-600-rgb:180,201,38; --blue-500-rgb:204,225,71; --gold-500-rgb:87,208,57;
}
[data-color="bronze"]{
  --navy-950:#1c140d; --navy-900:#312416; --navy-800:#493622; --navy-700:#634a31;
  --blue-600:#c97826; --blue-500:#e19447; --blue-400:#eaad71;
  --gold-500:#b7d039; --gold-400:#c9dd64;
  --blue-600-rgb:201,120,38; --blue-500-rgb:225,148,71; --gold-500-rgb:183,208,57;
}
[data-color="sable"]{
  --navy-950:#171512; --navy-900:#28251f; --navy-800:#3b3830; --navy-700:#504c44;
  --blue-600:#c99826; --blue-500:#e1b347; --blue-400:#eac671;
  --gold-500:#99d039; --gold-400:#b1dd64;
  --blue-600-rgb:201,152,38; --blue-500-rgb:225,179,71; --gold-500-rgb:153,208,57;
}
[data-color="ciel"]{
  --navy-950:#0d161c; --navy-900:#162631; --navy-800:#223949; --navy-700:#314e63;
  --blue-600:#2685c9; --blue-500:#47a1e1; --blue-400:#71b7ea;
  --gold-500:#4539d0; --gold-400:#6e64dd;
  --blue-600-rgb:38,133,201; --blue-500-rgb:71,161,225; --gold-500-rgb:69,57,208;
}
[data-color="nuit-etoilee"]{
  --navy-950:#0d0e1c; --navy-900:#161831; --navy-800:#222549; --navy-700:#313563;
  --blue-600:#2634c9; --blue-500:#4754e1; --blue-400:#717bea;
  --gold-500:#9139d0; --gold-400:#ab64dd;
  --blue-600-rgb:38,52,201; --blue-500-rgb:71,84,225; --gold-500-rgb:145,57,208;
}
[data-color="terracotta"]{
  --navy-950:#1c110d; --navy-900:#311d16; --navy-800:#492c22; --navy-700:#633d31;
  --blue-600:#c94f26; --blue-500:#e16d47; --blue-400:#ea8f71;
  --gold-500:#d0c439; --gold-400:#ddd364;
  --blue-600-rgb:201,79,38; --blue-500-rgb:225,109,71; --gold-500-rgb:208,196,57;
}
[data-color="jade"]{
  --navy-950:#0d1c17; --navy-900:#163128; --navy-800:#22493c; --navy-700:#316352;
  --blue-600:#26c993; --blue-500:#47e1ae; --blue-400:#71eac2;
  --gold-500:#399ed0; --gold-400:#64b5dd;
  --blue-600-rgb:38,201,147; --blue-500-rgb:71,225,174; --gold-500-rgb:57,158,208;
}
[data-color="cerise"]{
  --navy-950:#1c0d12; --navy-900:#31161f; --navy-800:#49222f; --navy-700:#633142;
  --blue-600:#c9265d; --blue-500:#e1477a; --blue-400:#ea7199;
  --gold-500:#d06b39; --gold-400:#dd8d64;
  --blue-600-rgb:201,38,93; --blue-500-rgb:225,71,122; --gold-500-rgb:208,107,57;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  transition:background .3s ease, color .3s ease;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.font-display{font-family:'Sora',sans-serif;}
.mono{font-family:'JetBrains Mono',monospace;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
img{max-width:100%; display:block;}
::selection{background:var(--gold-400); color:var(--navy-950);}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--blue-500); outline-offset:2px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

/* ---------- Layout shell ---------- */
.app-shell{display:flex; min-height:100vh;}

.sidebar{
  width:264px; flex-shrink:0;
  background:linear-gradient(180deg, var(--navy-950), var(--navy-900) 60%, var(--navy-800));
  color:#e7ecf9;
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
  z-index:40;
}
.sidebar-brand{
  display:flex; align-items:center; gap:10px;
  padding:22px 20px; border-bottom:1px solid rgba(255,255,255,.08);
}
.sidebar-brand .mark{
  width:36px; height:36px; border-radius:10px;
  background:linear-gradient(135deg, var(--gold-400), var(--gold-500));
  display:flex; align-items:center; justify-content:center;
  color:var(--navy-950); font-family:'Sora',sans-serif; font-weight:800; font-size:17px;
  overflow:hidden;
}
/* Logo Scoofly (image) à l'intérieur d'un .mark — remplace les initiales
   texte tout en gardant les mêmes dimensions/coins arrondis partout. */
.mark img{width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block;}
.sidebar-brand .name{font-family:'Sora',sans-serif; font-weight:700; font-size:17px; letter-spacing:.2px;}
.sidebar-brand .sub{font-size:11px; color:#93a3c4; letter-spacing:.4px; text-transform:uppercase;}

.sidebar-nav{flex:1; overflow-y:auto; padding:14px 10px;}
.nav-section{margin-bottom:18px;}
.nav-label{font-size:10.5px; text-transform:uppercase; letter-spacing:1px; color:#5f72a0; padding:8px 12px 6px;}
.nav-item{
  display:flex; align-items:center; gap:11px;
  padding:10px 12px; border-radius:10px; font-size:14px; font-weight:500;
  color:#c7d2ea; margin-bottom:2px; position:relative;
  transition:background .15s ease, color .15s ease;
}
.nav-item .ic{width:18px; text-align:center; font-size:15px;}
.nav-item:hover{background:rgba(255,255,255,.06); color:#fff;}
.nav-item.active{background:rgba(var(--blue-500-rgb),.16); color:#fff;}
.nav-item.active::before{
  content:""; position:absolute; left:-10px; top:8px; bottom:8px; width:3px;
  background:var(--gold-400); border-radius:3px;
}
.nav-item .badge{
  margin-left:auto; background:var(--danger); color:#fff; font-size:10px; font-weight:700;
  padding:1px 6px; border-radius:20px;
}

.sidebar-footer{padding:14px; border-top:1px solid rgba(255,255,255,.08);}
.user-chip{display:flex; align-items:center; gap:10px; padding:8px; border-radius:10px;}
.user-chip:hover{background:rgba(255,255,255,.06);}
.avatar{
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, var(--blue-500), var(--navy-700));
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; color:#fff;
  overflow:hidden;
}
.avatar img{width:100%; height:100%; object-fit:cover; border-radius:50%; display:block;}
.avatar-lg{
  width:84px; height:84px; border-radius:50%; flex-shrink:0; margin:0 auto;
  background:linear-gradient(135deg, var(--blue-500), var(--navy-700));
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:26px; color:#fff;
  overflow:hidden; position:relative; cursor:pointer;
}
.avatar-lg img{width:100%; height:100%; object-fit:cover; border-radius:50%; display:block;}
.avatar-lg .avatar-lg-edit{
  position:absolute; inset:0; background:rgba(11,27,58,.55); color:#fff;
  display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .15s;
}
.avatar-lg:hover .avatar-lg-edit{opacity:1;}
.user-chip .u-name{font-size:13px; font-weight:600; color:#fff;}
.user-chip .u-role{font-size:11px; color:#93a3c4;}

.main{flex:1; min-width:0; display:flex; flex-direction:column;}

.topbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:16px;
  padding:14px 28px; background:var(--surface); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
.topbar h1{font-size:19px; font-weight:700;}
.topbar .path{font-size:12.5px; color:var(--text-muted);}
.search-box{
  display:flex; align-items:center; gap:8px; background:var(--slate-100);
  border:1px solid var(--border); border-radius:10px; padding:8px 12px; width:280px; margin-left:auto;
}
.search-box input{border:none; background:transparent; outline:none; font-size:13.5px; width:100%; color:var(--text);}

.search-results-dropdown{
  display:none; position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:60;
  background:var(--surface-solid); border:1px solid var(--border); border-radius:10px;
  box-shadow:0 12px 28px rgba(11,27,58,.16); max-height:360px; overflow-y:auto; padding:6px;
}
.search-results-dropdown.open{display:block;}
.search-results-group-label{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted); padding:8px 10px 4px;}
.search-results-item{
  display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; text-decoration:none;
  color:var(--text); font-size:13px;
}
.search-results-item:hover{background:var(--slate-100);}
.search-results-sub{margin-left:auto; font-size:11px; color:var(--text-muted); font-family:monospace;}
.search-results-empty{padding:14px; text-align:center; font-size:12.5px; color:var(--text-muted);}
.icon-btn{
  width:38px; height:38px; border-radius:10px; border:1px solid var(--border);
  background:var(--surface-solid); display:flex; align-items:center; justify-content:center;
  position:relative; font-size:15px; color:var(--text);
}
.icon-btn:hover{border-color:var(--blue-400);}

/* ---------- Sélecteur de thème de couleur ---------- */
.theme-picker-panel{
  display:none; position:absolute; top:calc(100% + 10px); right:0;
  width:236px; background:var(--surface-solid); border:1px solid var(--border);
  border-radius:var(--radius-md); box-shadow:0 12px 28px rgba(11,27,58,.16);
  padding:12px; z-index:60;
}
.theme-picker-panel.open{display:block;}
.theme-picker-title{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); margin-bottom:10px;}
.theme-swatch-grid{display:grid; grid-template-columns:repeat(5, 1fr); gap:8px;}
.theme-swatch{
  width:34px; height:34px; border-radius:50%; border:2px solid transparent;
  background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center;
  padding:0; transition:border-color .15s ease, transform .15s ease;
}
.theme-swatch:hover{transform:scale(1.08);}
.theme-swatch.active{border-color:var(--text);}
.theme-swatch-dot{
  width:24px; height:24px; border-radius:50%; background:var(--sw);
  box-shadow:0 2px 6px rgba(11,27,58,.25);
  display:block; position:relative;
}
.theme-swatch.active .theme-swatch-dot::after{
  content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:13px; font-weight:800; text-shadow:0 1px 2px rgba(0,0,0,.4);
}
.dot-alert{
  position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:50%;
  background:var(--danger); border:2px solid var(--surface-solid);
}

.content{padding:26px 28px 60px; max-width:1400px; width:100%; margin:0 auto;}

/* ---------- Glass card ---------- */
.card{
  background:var(--surface-solid); border:1px solid var(--border); border-radius:var(--radius-md);
  box-shadow:var(--shadow-soft);
}
.card-pad{padding:20px 22px;}
.card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.card-head h3{font-size:15px; font-weight:700;}
.card-head .hint{font-size:12px; color:var(--text-muted);}

/* ---------- KPI grid ---------- */
.kpi-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); gap:16px; margin-bottom:22px;}
.kpi{
  background:var(--surface-solid); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:18px 20px; position:relative; overflow:hidden;
}
.kpi::after{
  content:""; position:absolute; right:-30px; top:-30px; width:100px; height:100px; border-radius:50%;
  background:radial-gradient(circle, rgba(var(--blue-600-rgb),.10), transparent 70%);
}
.kpi .label{font-size:12px; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.4px;}
.kpi .value{font-family:'Sora',sans-serif; font-size:28px; font-weight:800; margin-top:6px;}
.kpi .delta{font-size:12px; margin-top:6px; display:inline-flex; align-items:center; gap:4px;}
.kpi .delta.up{color:var(--success);}
.kpi .delta.down{color:var(--danger);}
.kpi .kpi-icon{
  position:absolute; right:16px; top:16px; width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; font-size:16px;
  background:linear-gradient(135deg, var(--blue-500), var(--navy-800)); color:#fff;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:10px;
  font-size:13.5px; font-weight:600; border:1px solid transparent; transition:transform .12s ease, box-shadow .12s ease;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:linear-gradient(135deg, var(--blue-600), var(--navy-800)); color:#fff; box-shadow:0 8px 20px rgba(var(--blue-600-rgb),.25);}
.btn-gold{background:linear-gradient(135deg, var(--gold-400), var(--gold-500)); color:var(--navy-950);}
.btn-outline{background:transparent; border-color:var(--border); color:var(--text);}
.btn-outline:hover{border-color:var(--blue-400);}
.btn-ghost{background:transparent; color:var(--text-muted);}
.btn-danger{background:var(--danger); color:#fff;}
.btn-sm{padding:6px 10px; font-size:12.5px; border-radius:8px;}
.btn:disabled{opacity:.5; cursor:not-allowed;}

/* ---------- Forms ---------- */
.field{margin-bottom:14px;}
.field label{display:block; font-size:12.5px; font-weight:600; margin-bottom:6px; color:var(--text-muted);}
.field input, .field select, .field textarea{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border);
  background:var(--slate-50); color:var(--text); font-size:13.5px; font-family:inherit;
}
[data-theme="dark"] .field input, [data-theme="dark"] .field select, [data-theme="dark"] .field textarea{background:var(--navy-900);}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--blue-500); outline:none;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 16px;}
.form-grid.cols-3{grid-template-columns:1fr 1fr 1fr;}
@media (max-width:720px){.form-grid, .form-grid.cols-3{grid-template-columns:1fr;}}

/* ---------- Table ---------- */
.table-wrap{overflow-x:auto;}
table{width:100%; border-collapse:collapse; font-size:13.5px;}
thead th{
  text-align:left; padding:10px 14px; font-size:11px; text-transform:uppercase; letter-spacing:.5px;
  color:var(--text-muted); border-bottom:1px solid var(--border); white-space:nowrap;
}
tbody td{padding:12px 14px; border-bottom:1px solid var(--border); vertical-align:middle;}
tbody tr:hover{background:var(--slate-50);}
[data-theme="dark"] tbody tr:hover{background:rgba(255,255,255,.03);}
.cell-name{display:flex; align-items:center; gap:10px;}
.mini-avatar{width:30px; height:30px; border-radius:8px; background:var(--slate-200); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--navy-800); flex-shrink:0;}

/* ---------- Badges / status ---------- */
.badge{display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:20px; font-size:11.5px; font-weight:700;}
.badge-blue{background:rgba(var(--blue-600-rgb),.12); color:var(--blue-600);}
.badge-green{background:rgba(22,163,74,.12); color:var(--success);}
.badge-amber{background:rgba(217,119,6,.12); color:var(--warning);}
.badge-red{background:rgba(220,38,38,.12); color:var(--danger);}
.badge-slate{background:var(--slate-100); color:var(--text-muted);}
.badge-gold{background:rgba(var(--gold-500-rgb),.14); color:var(--gold-500);}

/* ---------- Tabs ---------- */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:18px; overflow-x:auto;}
.tab{padding:10px 16px; font-size:13.5px; font-weight:600; color:var(--text-muted); border-bottom:2px solid transparent; white-space:nowrap;}
.tab.active{color:var(--blue-600); border-color:var(--blue-600);}

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(6,14,33,.55); backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center; z-index:100; padding:20px;
}
.modal-overlay.open{display:flex;}
.modal{
  background:var(--surface-solid); border-radius:var(--radius-lg); width:100%; max-width:560px;
  max-height:88vh; overflow-y:auto; box-shadow:var(--shadow-lift); border:1px solid var(--border);
}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--border);}
.modal-head h3{font-size:16px; font-weight:700;}
.modal-body{padding:22px;}
.modal-foot{display:flex; justify-content:flex-end; gap:10px; padding:16px 22px; border-top:1px solid var(--border);}

/* ---------- Impression du reçu de paiement (modal-receipt) ----------
   window.print() sur la page telle quelle imprimait tout l'écran (menu,
   overlay sombre...), et comme .modal limite la hauteur avec défilement
   (max-height:88vh; overflow-y:auto), le contenu situé en bas — dont le
   QR code — sortait de la zone imprimée et n'apparaissait pas sur le
   papier, même s'il s'affichait bien à l'écran. On isole donc #modal-receipt
   à l'impression : tout le reste est masqué, et la hauteur/le défilement
   du modal sont supprimés pour que rien ne soit coupé. */
@media print {
  body * { visibility: hidden; }
  #modal-receipt, #modal-receipt * { visibility: visible; }
  #modal-receipt {
    position: absolute; inset: 0; padding: 0; background: #fff;
    display: block !important; backdrop-filter: none;
  }
  #modal-receipt .modal { max-width: 100%; max-height: none; overflow: visible; box-shadow: none; border: none; }
  #modal-receipt .modal-head, #modal-receipt .modal-foot { display: none; }
}

/* ---------- Login ---------- */
.auth-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 20% 20%, #132a54, var(--navy-950) 60%);
  padding:20px; position:relative; overflow:hidden;
}
#particles-bg{position:absolute; inset:0; z-index:0;}
.auth-card{
  position:relative; z-index:1; width:100%; max-width:410px;
  background:rgba(15,27,55,.55); backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.12); border-radius:20px; padding:34px 30px;
  box-shadow:0 30px 80px rgba(0,0,0,.4); color:#fff;
}
.auth-card .mark{
  width:52px; height:52px; border-radius:14px; margin-bottom:16px;
  background:linear-gradient(135deg, var(--gold-400), var(--gold-500));
  display:flex; align-items:center; justify-content:center; font-family:'Sora',sans-serif; font-weight:800; font-size:22px; color:var(--navy-950);
}
.auth-card h1{font-size:22px; margin-bottom:4px;}
.auth-card p.lead{color:#a9b6d8; font-size:13.5px; margin-bottom:24px;}
.auth-card .field label{color:#a9b6d8;}
.auth-card .field input{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:#fff;}
.auth-card .field input::placeholder{color:#5f72a0;}
.auth-card .btn-primary{width:100%; justify-content:center; padding:12px;}
.demo-note{margin-top:18px; padding:12px 14px; border-radius:10px; background:rgba(var(--gold-500-rgb),.12); border:1px solid rgba(var(--gold-500-rgb),.3); font-size:12px; color:var(--gold-400);}
.role-quickpick{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:16px;}
.role-quickpick button{
  padding:8px 6px; font-size:11px; border-radius:8px; border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04); color:#c7d2ea; font-weight:600;
}
.role-quickpick button:hover{background:rgba(255,255,255,.1); color:#fff;}
.role-quickpick button.active{background:var(--gold-500); color:var(--navy-950); border-color:var(--gold-500);}

/* ---------- Utilities ---------- */
.flex{display:flex;}
.flex-col{display:flex; flex-direction:column;}
.items-center{align-items:center;}
.justify-between{justify-content:space-between;}
.gap-8{gap:8px;} .gap-10{gap:10px;} .gap-14{gap:14px;} .gap-20{gap:20px;}
.mt-8{margin-top:8px;} .mt-14{margin-top:14px;} .mt-20{margin-top:20px;} .mt-30{margin-top:30px;}
.mb-14{margin-bottom:14px;} .mb-20{margin-bottom:20px;}
.w-full{width:100%;}
.text-muted{color:var(--text-muted);}
.text-sm{font-size:12.5px;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.grid-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px;}
@media (max-width:960px){.grid-2,.grid-3{grid-template-columns:1fr;}}
.empty-state{text-align:center; padding:50px 20px; color:var(--text-muted);}
.empty-state .ic{font-size:34px; margin-bottom:10px;}
.chip-row{display:flex; flex-wrap:wrap; gap:8px;}
.status-filter{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px;}
.status-filter button{padding:7px 14px; border-radius:20px; border:1px solid var(--border); background:var(--surface-solid); font-size:12.5px; font-weight:600; color:var(--text-muted); cursor:pointer;}
.status-filter button:hover{border-color:var(--navy-800);}
.status-filter button.active{background:var(--navy-800); color:#fff; border-color:var(--navy-800);}
.pagination{display:flex; align-items:center; gap:6px; justify-content:flex-end; margin-top:14px;}
.pagination button{width:30px; height:30px; border-radius:8px; border:1px solid var(--border); background:var(--surface-solid); font-size:12.5px;}
.pagination button.active{background:var(--blue-600); color:#fff; border-color:var(--blue-600);}
.toast-wrap{position:fixed; bottom:20px; right:20px; z-index:200; display:flex; flex-direction:column; gap:10px;}
.toast{
  background:var(--navy-950); color:#fff; padding:12px 16px; border-radius:10px; font-size:13px;
  box-shadow:var(--shadow-lift); display:flex; align-items:center; gap:10px; min-width:220px;
  border-left:3px solid var(--gold-400); animation:toast-in .25s ease;
}
.toast.success{border-left-color:var(--success);}
.toast.error{border-left-color:var(--danger);}
@keyframes toast-in{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}

/* mobile */
.hamburger{display:none;}
.sidebar-overlay{
  display:none; position:fixed; inset:0; background:rgba(6,14,33,.55);
  backdrop-filter:blur(2px); z-index:39; opacity:0; transition:opacity .25s ease;
}
.sidebar-overlay.open{display:block; opacity:1;}
@media (max-width:1024px){
  .sidebar{
    position:fixed; top:0; left:-300px; height:100vh; width:264px; max-width:82vw;
    transition:left .25s ease; box-shadow:0 0 40px rgba(0,0,0,.3); z-index:40;
  }
  .sidebar.open{left:0;}
  .hamburger{display:flex;}
  .content{padding:18px;}
}
@media (max-width:900px){
  .search-box{display:none;}
}
@media (max-width:1024px){
  body.sidebar-locked{overflow:hidden;}
}

/* progress ring for grades */
.progress-bar{height:8px; border-radius:20px; background:var(--slate-100); overflow:hidden;}
.progress-bar > span{display:block; height:100%; background:linear-gradient(90deg, var(--blue-500), var(--gold-400)); border-radius:20px;}

.divider{height:1px; background:var(--border); margin:18px 0;}

/* skeleton loading */
.skel{background:linear-gradient(90deg, var(--slate-100) 25%, var(--slate-200) 37%, var(--slate-100) 63%); background-size:400% 100%; animation:skel 1.4s ease infinite; border-radius:8px;}
@keyframes skel{0%{background-position:100% 50%;} 100%{background-position:0 50%;}}

/* ==========================================================================
   PAGE D'ACCUEIL PUBLIQUE (vitrine)
   ========================================================================== */
.public-header{
  position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:14px;
  padding:16px 30px; background:rgba(6,14,33,.85); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.public-header .mark{
  width:34px; height:34px; border-radius:10px;
  background:linear-gradient(135deg, var(--gold-400), var(--gold-500));
  display:flex; align-items:center; justify-content:center;
  color:var(--navy-950); font-family:'Sora',sans-serif; font-weight:800; font-size:14px;
}
.public-header .brand-name{color:#fff; font-family:'Sora',sans-serif; font-weight:700; font-size:15px;}
.public-header nav{display:flex; gap:22px; margin-left:26px;}
.public-header nav a{color:#a9b6d8; font-size:13.5px; font-weight:500;}
.public-header nav a:hover{color:#fff;}

.public-hero{
  background:radial-gradient(circle at 25% 15%, #132a54, var(--navy-950) 65%);
  color:#fff; padding:80px 24px 60px; text-align:center;
}
.public-hero h1{font-size:clamp(28px,4.5vw,44px); margin-bottom:16px; max-width:760px; margin-left:auto; margin-right:auto;}
.public-hero p.lead-public{color:#a9b6d8; font-size:15px; max-width:560px; margin:0 auto 30px; line-height:1.7;}
.public-hero .cta-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

.stats-bar{
  display:flex; justify-content:center; gap:50px; flex-wrap:wrap;
  background:rgba(255,255,255,.04); border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08);
  padding:30px 20px; margin-top:40px;
}
.stat-item{text-align:center;}
.stat-value{font-family:'Sora',sans-serif; font-weight:800; font-size:30px; color:var(--gold-400);}
.stat-label{color:#a9b6d8; font-size:12px; text-transform:uppercase; letter-spacing:.5px; margin-top:4px;}

.public-section{padding:70px 24px; max-width:1180px; margin:0 auto;}
.public-section h2{font-size:26px; text-align:center; margin-bottom:10px;}
.public-section .section-sub{color:var(--text-muted); text-align:center; max-width:520px; margin:0 auto 40px; font-size:14px;}

.school-cards-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:22px;}
.school-card{
  background:var(--surface-solid); border:1px solid var(--border); border-radius:16px; padding:24px;
  box-shadow:var(--shadow-soft); transition:transform .15s ease, box-shadow .15s ease;
}
.school-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lift);}
.school-card-head{display:flex; align-items:center; gap:14px; margin-bottom:16px;}
.school-logo{
  width:44px; height:44px; border-radius:12px; flex-shrink:0;
  background:linear-gradient(135deg, var(--gold-400), var(--gold-500));
  display:flex; align-items:center; justify-content:center;
  color:var(--navy-950); font-family:'Sora',sans-serif; font-weight:800; font-size:14px;
}
.school-card h3{font-size:15.5px;}
.school-address{color:var(--text-muted); font-size:12px; display:flex; align-items:center; gap:4px; margin-top:2px;}
.school-mini-stats{display:flex; gap:12px; flex-wrap:wrap; font-size:12px; color:var(--text-muted);}
.school-mini-stats span{background:var(--slate-100); padding:4px 10px; border-radius:20px;}

.public-footer{
  background:var(--navy-950); color:#a9b6d8; font-size:13px;
}
.public-footer a{color:#e0bf4f; text-decoration:none;}
.public-footer h4{color:#fff; font-size:13.5px; margin-bottom:12px;}
.footer-grid{
  max-width:1100px; margin:0 auto; display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px;
}
.footer-col ul.footer-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px;}
.footer-list li{display:flex; align-items:center; gap:7px; color:#a9b6d8;}
.footer-social{display:flex; gap:10px;}
.footer-social a{
  width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center; color:#fff;
  transition:transform .15s ease, background .15s ease;
}
.footer-social a:hover{transform:translateY(-2px);}
.footer-social a svg{width:17px;height:17px;}
.footer-social a.social-fb{background:#1877F2;}
.footer-social a.social-ig{background:radial-gradient(circle at 30% 110%, #FDF497 0%, #FD5949 45%, #D6249F 60%, #285AEB 90%);}
.footer-social a.social-wa{background:#25D366;}
.footer-social a.social-yt{background:#FF0000;}
.footer-legal{
  max-width:1100px; margin:32px auto 0; padding-top:20px; border-top:1px solid rgba(255,255,255,.1);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12px;
}
.footer-legal-links{display:flex; gap:18px; flex-wrap:wrap;}
@media (max-width:820px){
  .footer-grid{grid-template-columns:1fr 1fr; gap:26px;}
}
@media (max-width:520px){
  .footer-grid{grid-template-columns:1fr;}
  .footer-legal{flex-direction:column; text-align:center;}
}

.network-top10-card{max-width:820px; margin:0 auto;}
.live-indicator{display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--success); text-transform:uppercase; letter-spacing:.4px;}
.live-indicator.offline{color:var(--text-muted);}
.live-dot{width:8px; height:8px; border-radius:50%; background:var(--success); box-shadow:0 0 0 0 rgba(var(--blue-500-rgb),.5); animation:live-pulse 1.6s infinite;}
.live-indicator.offline .live-dot{background:var(--text-muted); animation:none; box-shadow:none;}
@keyframes live-pulse{
  0%{box-shadow:0 0 0 0 rgba(38,201,125,.55);}
  70%{box-shadow:0 0 0 8px rgba(38,201,125,0);}
  100%{box-shadow:0 0 0 0 rgba(38,201,125,0);}
}
.success-rate-pill{font-size:11px; font-weight:700; padding:2px 9px; border-radius:20px; background:rgba(var(--blue-500-rgb),.12); color:var(--blue-500);}

@media (max-width:760px){
  .public-header nav{display:none;}
  .stats-bar{gap:26px;}
}

/* ==========================================================================
   FORMULAIRE D'INSCRIPTION PUBLIQUE
   ========================================================================== */
.school-pick-btn{
  display:flex; align-items:center; gap:12px; text-align:left; width:100%;
  padding:10px 12px; border-radius:10px; border:1px solid var(--border);
  background:var(--surface-solid); color:var(--text);
}
.school-pick-btn:hover{border-color:var(--blue-400);}
.link-btn{background:transparent; border:none; color:var(--blue-600); font-size:11.5px; text-decoration:underline; cursor:pointer;}
.spin{animation:spin 1s linear infinite; display:inline-block;}
@keyframes spin{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}

.enroll-wrap{max-width:640px; margin:0 auto; padding:40px 20px 80px;}
.enroll-card{background:var(--surface-solid); border:1px solid var(--border); border-radius:18px; padding:30px; box-shadow:var(--shadow-soft);}

/* ==========================================================================
   FRAIS SCOLAIRES MENSUELS — grille de mois (responsive)
   ========================================================================== */
.monthly-fee-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(110px, 1fr));
  gap:12px;
}
.month-fee-card{
  border:2px solid var(--border); border-radius:12px; padding:12px 14px;
  background:var(--surface-solid); transition:transform .12s ease, box-shadow .12s ease;
}
.month-fee-card[onclick]{cursor:pointer;}
.month-fee-card[onclick]:hover{transform:translateY(-2px); box-shadow:var(--shadow-soft);}
.month-fee-card.paid{border-color:var(--success); background:rgba(22,163,74,.06);}
.month-fee-card.partial{border-color:var(--warning); background:rgba(217,119,6,.06);}
.month-fee-card.unpaid{border-color:var(--danger); background:rgba(220,38,38,.05);}
.month-fee-card.future{border-color:var(--border); background:var(--slate-50); opacity:.75;}
.month-fee-check{
  width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800;
  background:var(--slate-100); color:var(--text-muted);
}
.month-fee-card.paid .month-fee-check{background:var(--success); color:#fff;}
.month-fee-card.partial .month-fee-check{background:var(--warning); color:#fff;}
.month-fee-due-date{font-size:9.5px; color:var(--text-muted); margin-top:4px;}

@media (max-width:640px){
  .monthly-fee-grid{grid-template-columns:repeat(auto-fill, minmax(90px, 1fr)); gap:8px;}
  .month-fee-card{padding:10px;}
}

/* ==========================================================================
   FICHE ÉLÈVE — LISTE DES FRAIS (case à cocher + encaissement rapide)
   ========================================================================== */
.fee-checklist{max-height:340px; overflow-y:auto; padding-right:4px;}
.fee-check-row{
  display:flex; align-items:center; gap:10px; padding:9px 4px;
  border-bottom:1px solid var(--border);
}
.fee-check-row:last-child{border-bottom:none;}
.fee-check-row input[type="checkbox"]{width:18px; height:18px; flex-shrink:0; accent-color:var(--success);}
.fee-check-row .fee-check-label{flex:1; min-width:0;}
.fee-check-row .fee-check-pay{display:none; align-items:center; gap:6px; flex-shrink:0;}
.fee-check-row .fee-check-pay input[type="number"]{width:92px; padding:6px 8px;}
.fee-check-row .fee-check-pay.open{display:flex;}

/* ==========================================================================
   HISTORIQUE DES ANNÉES SCOLAIRES PASSÉES (Finances)
   ========================================================================== */
.history-filters{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:14px;}
.history-filters .field{margin-bottom:0; min-width:150px;}

/* =========================================================
   SCOLARIS — BOUTON NOTIFICATIONS
   ========================================================= */

/* Le contenu principal reste au-dessus de son arrière-plan */
#page-content {
  position: relative;
  z-index: 1;
  overflow: visible;
}

/* Zone du bouton */
.notification-button-container {
  position: relative !important;

  width: 100% !important;
  max-width: 100% !important;

  display: flex !important;
  flex-direction: row !important;

  justify-content: center !important;
  align-items: center !important;

  box-sizing: border-box !important;

  margin: 20px 0 25px 0 !important;
  padding: 10px 20px !important;

  overflow: visible !important;

  z-index: 2 !important;
}

/* Bouton */
#enable-notifications-btn {
  position: relative !important;

  display: inline-flex !important;

  justify-content: center !important;
  align-items: center !important;

  visibility: visible !important;
  opacity: 1 !important;

  width: auto !important;
  min-width: 240px !important;
  min-height: 50px !important;

  margin: 0 !important;
  padding: 13px 24px !important;

  box-sizing: border-box !important;

  background-color: #0b1b3a !important;
  color: #ffffff !important;

  border: 2px solid #c9a227 !important;
  border-radius: 12px !important;

  font-family: Inter, Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: center !important;

  text-decoration: none !important;
  white-space: nowrap !important;

  cursor: pointer !important;

  pointer-events: auto !important;

  transform: none !important;

  z-index: 3 !important;

  box-shadow: 0 6px 18px rgba(11, 27, 58, 0.22) !important;

  transition:
    background-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease !important;
}

/* Souris sur ordinateur */
#enable-notifications-btn:hover {
  background-color: #17366d !important;

  transform: translateY(-2px) !important;

  box-shadow:
    0 9px 22px rgba(11, 27, 58, 0.28) !important;
}

/* Appui sur téléphone */
#enable-notifications-btn:active {
  transform: scale(0.97) !important;

  box-shadow:
    0 3px 10px rgba(11, 27, 58, 0.2) !important;
}

/* Après activation */
#enable-notifications-btn:disabled {
  background-color: #16803c !important;

  color: #ffffff !important;

  border-color: #16803c !important;

  cursor: default !important;

  opacity: 1 !important;

  transform: none !important;
}

/* Adaptation téléphone */
@media (max-width: 600px) {

  .notification-button-container {
    padding: 10px 12px !important;
  }

  #enable-notifications-btn {
    width: 100% !important;

    max-width: 320px !important;

    min-width: 0 !important;

    min-height: 50px !important;

    font-size: 14px !important;

    padding: 13px 16px !important;
  }

}
/* ==========================================================================
   ASSISTANT VOCAL — bouton flottant + bulle de dialogue
   ========================================================================== */
.voice-fab{
  position:fixed; right:20px; bottom:20px; z-index:200;
  width:60px; height:60px; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(135deg, var(--gold-400), var(--gold-500));
  color:var(--navy-950); display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 24px rgba(0,0,0,.35); transition:transform .15s ease, box-shadow .15s ease;
}
.voice-fab:hover{transform:scale(1.05);}
.voice-fab:active{transform:scale(.96);}
.voice-fab.listening{
  background:linear-gradient(135deg,#e34848,#c92f2f); color:#fff;
  animation:voice-pulse 1.4s ease-in-out infinite;
}
.voice-fab.speaking{background:linear-gradient(135deg, var(--blue-500), var(--blue-600)); color:#fff;}
.voice-fab.unsupported{opacity:.5; cursor:not-allowed;}
@keyframes voice-pulse{
  0%{box-shadow:0 6px 24px rgba(0,0,0,.35), 0 0 0 0 rgba(220,50,50,.55);}
  70%{box-shadow:0 6px 24px rgba(0,0,0,.35), 0 0 0 18px rgba(220,50,50,0);}
  100%{box-shadow:0 6px 24px rgba(0,0,0,.35), 0 0 0 0 rgba(220,50,50,0);}
}
.voice-panel{
  position:fixed; right:20px; bottom:92px; z-index:200; width:280px; max-width:78vw;
  background:var(--surface-solid); border:1px solid var(--border); border-radius:16px;
  box-shadow:0 12px 40px rgba(0,0,0,.25); padding:14px 16px;
  display:none; flex-direction:column; gap:8px; font-size:13px;
}
.voice-panel.open{display:flex;}
.voice-panel .voice-status{
  display:flex; align-items:center; gap:8px; font-weight:700; font-size:12px;
  text-transform:uppercase; letter-spacing:.4px; color:var(--text-muted);
}
.voice-panel .voice-dot{width:8px; height:8px; border-radius:50%; background:var(--slate-300); flex-shrink:0;}
.voice-panel.state-listening .voice-dot{background:var(--danger); animation:voice-dot-blink 1s infinite;}
.voice-panel.state-speaking .voice-dot{background:var(--blue-500);}
@keyframes voice-dot-blink{0%,100%{opacity:1;} 50%{opacity:.3;}}
.voice-panel .voice-heard{color:var(--text); font-style:italic; word-break:break-word;}
.voice-panel .voice-reply{color:var(--text); font-weight:600; word-break:break-word;}
.voice-lang-switch{display:flex; gap:6px;}
.voice-lang-btn{
  flex:1; padding:5px 8px; font-size:11px; font-weight:700; border-radius:8px;
  border:1px solid var(--border); background:transparent; color:var(--text-muted); cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.voice-lang-btn.active{background:var(--blue-600); border-color:var(--blue-600); color:#fff;}
.voice-panel .voice-close{
  align-self:flex-end; background:none; border:none; color:var(--text-muted);
  font-size:11px; cursor:pointer; text-decoration:underline; padding:0; margin-top:2px;
}
@media (max-width:640px){
  .voice-fab{right:14px; bottom:14px; width:54px; height:54px;}
  .voice-panel{right:14px; bottom:80px; width:calc(100vw - 28px);}
}

/* ---------- Palmarès des écoles (réseau) — exams.html, rôle Promoteur --- */
.rank-row-top td{position:relative;}
.rank-row-top.rank-1{background:linear-gradient(90deg, rgba(var(--gold-500-rgb),.10), transparent 60%);}
.rank-row-top.rank-2{background:linear-gradient(90deg, rgba(148,163,184,.14), transparent 60%);}
.rank-row-top.rank-3{background:linear-gradient(90deg, rgba(217,119,6,.10), transparent 60%);}
.rank-cell{width:1%; white-space:nowrap;}
.rank-medal{font-size:19px; line-height:1;}
.rank-num{font-family:'Sora',sans-serif; font-weight:800; color:var(--text-muted);}
.school-ranking-card .progress-bar{background:var(--slate-100);}

/* ---------- Visionneuse d'import de résultats (PDF/scan) ---------------- */
.exam-import-page{border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:14px; overflow:hidden;}
.exam-import-page-head{
  background:var(--slate-100); color:var(--text-muted); font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.4px; padding:8px 12px; border-bottom:1px solid var(--border);
}
.exam-import-page-text{
  margin:0; padding:14px; font-family:'JetBrains Mono',monospace; font-size:12.5px; line-height:1.6;
  white-space:pre-wrap; word-break:break-word; color:var(--text);
}

.partners-marquee {
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: 24px 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

.partners-track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  animation: partners-scroll 25s linear infinite;
}

.partners-track img {
  height: 48px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%) brightness(1.8);
  opacity: 0.75;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

.partners-track img:hover {
  filter: none;
  opacity: 1;
}

@keyframes partners-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Pause au survol */
.partners-marquee:hover .partners-track {
  animation-play-state: paused;
}


.terms-consent {
  margin: 20px 0;
}

.terms-consent-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted, #a8b3c7);
}

.terms-consent-label input[type="checkbox"] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--gold-500, #d4af37);
  cursor: pointer;
  flex-shrink: 0;
}

.terms-consent-label a {
  color: var(--gold-500, #d4af37);
  text-decoration: underline;
}

.terms-consent-label a:hover {
  color: #fff;
}

.terms-consent-error {
  color: #e5484d;
  font-size: 13px;
  margin-top: 8px;
}

#submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}