@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=Poppins:wght@500;600&display=swap');
/* Le lettrage "School Editor" est figé en tracés SVG (voir .wordmark-svg) —
   il ne dépend plus de Harrington, French Script MT, Berkshire Swash,
   Yeseva One ni Fondamento, qui ont donc été retirées de cet import. */

  :root{
    --ink:#1F2937; --muted:#6B7280;
    --teal:#1FB6A6; --pink:#D6265E; --blue:#2E7BD9; --navy:#26344A; --gold:#D9A441;
    --paper:#FFFFFF; --line:#ECEDF0; --bg-soft:#FAFBFC; --card:#FFFFFF;
    --scale:1;
  }
  [data-theme="dark"]{
    --ink:#E8ECF1; --muted:#9AA5B1;
    --paper:#121821; --line:#26303C; --bg-soft:#161D27; --card:#1C2430; --navy:#0C1118;
  }
  *{box-sizing:border-box;}
  /* Contrôle "Aa" (voir js/textscale.js) : zoom plutôt que rem/transform —
     tout le reste de cette feuille est en px, zoom scale texte+icônes+cartes
     uniformément sans rien casser, contrairement à transform:scale qui
     interagit mal avec les éléments position:absolute/fixed du design. */
  html{zoom:var(--scale);}
  html,body{height:100%;margin:0;}
  /* overflow-y:auto (pas hidden) : l'accueil vise à tenir sur un seul écran
     à taille de texte normale, mais un scroll doit apparaître automatiquement
     dès que le contenu ne rentre plus (taille de texte agrandie via "Aa",
     traduction plus longue...) plutôt que de couper silencieusement des
     éléments hors cadre. Voir aussi .hero{overflow:visible} plus bas. */
  body{font-family:'IBM Plex Sans',sans-serif;background:var(--paper);color:var(--ink);
    overflow-y:auto;overflow-x:hidden;
    transition:background .25s ease,color .25s ease;display:flex;flex-direction:column;}

  .bokeh{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 30%, var(--card), var(--bg-soft));
    box-shadow: inset -4px -4px 8px rgba(0,0,0,.04);animation: float 4s ease-in-out infinite;}
  @keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-16px);}}

  .topbar{position:relative;padding:14px 28px;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;}
  .topbar-left,.topbar-right{display:flex;align-items:center;gap:14px;}
  .topbar a{color:var(--ink);text-decoration:none;font-size:11.5px;letter-spacing:.07em;font-weight:500;
    text-transform:uppercase;display:flex;align-items:center;gap:6px;}
  .topbar a svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:1.8;flex-shrink:0;}

  .lang-toggle{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    display:flex;align-items:center;background:var(--card);border:1px solid var(--line);
    border-radius:20px;padding:3px;gap:2px;
  }
  .lang-toggle button{
    font-family:'Poppins',sans-serif;font-size:11px;font-weight:600;padding:5px 12px;
    border:none;background:none;border-radius:16px;cursor:pointer;color:var(--muted);
  }
  @keyframes gradShift{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}
  .lang-toggle button.active,.cta-row a,.wave-strip,.feature{
    background-size:200% 200%;animation:gradShift 3s ease infinite;
  }
  .lang-toggle button.active{background:linear-gradient(135deg,var(--teal),var(--blue));color:#fff;}

  .theme-toggle{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:20px;
    padding:5px 12px;font-size:11px;font-weight:500;color:var(--muted);cursor:pointer;background:var(--card);}
  .theme-toggle svg{width:13px;height:13px;stroke:var(--muted);}

  /* Bouton "Aa" — taille du texte, voir js/textscale.js */
  .text-scale-btn{
    display:flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:20px;
    padding:5px 12px;font-family:'Poppins',sans-serif;font-weight:600;color:var(--muted);
    cursor:pointer;background:var(--card);
  }
  .text-scale-btn .ts-sm{font-size:9.5px;}
  .text-scale-btn .ts-lg{font-size:13px;}

  .contact-trigger{
    color:var(--ink);text-decoration:none;font-size:11.5px;letter-spacing:.07em;font-weight:500;
    text-transform:uppercase;display:flex;align-items:center;gap:6px;background:none;border:none;
    font-family:'IBM Plex Sans',sans-serif;cursor:pointer;padding:0;
  }
  .contact-trigger svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:1.8;flex-shrink:0;}

  .contact-box{max-width:340px;}
  .contact-list{display:flex;flex-direction:column;gap:14px;margin-top:6px;}
  .contact-row{display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--ink);}
  .contact-row svg{width:18px;height:18px;stroke:var(--teal);fill:none;stroke-width:1.8;flex-shrink:0;}
  .contact-row a{color:var(--ink);text-decoration:none;}
  .contact-row a.wa{color:#1FB6A6;font-weight:600;}
  .contact-row .wa-badge{
    display:inline-flex;align-items:center;gap:5px;background:rgba(31,182,166,.12);
    padding:4px 10px;border-radius:14px;font-size:12px;font-weight:600;color:#0E8C7F;margin-left:4px;
  }

  @media (max-width:820px){
    .topbar a span, .theme-toggle span, .contact-trigger span{display:none;}
    .theme-toggle, .text-scale-btn{padding:7px;}
  }

  .hero{position:relative;flex:1;min-height:0;overflow:visible;background:var(--bg-soft);
    display:flex;flex-direction:column;justify-content:center;padding:10px 28px;}
  .hero-inner{max-width:1120px;width:100%;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:center;position:relative;z-index:2;}
  @media (max-width:820px){
    html,body{height:auto;overflow:auto;}
    body{overflow-y:auto;-webkit-overflow-scrolling:touch;}
    .hero{flex:none;overflow:visible;min-height:auto;padding:14px 20px 24px;}
    .illus{min-height:130px;}
    .savanna,.sky{flex-shrink:0;}
    .hero-inner{grid-template-columns:1fr;}
    .illus{order:2;}
    .brandcol{order:1;}
  }

  .illus{display:flex;align-items:center;justify-content:center;min-height:170px;position:relative;}
  .illus svg{width:100%;max-width:280px;height:auto;position:absolute;opacity:0;transition:opacity .5s ease;}
  .illus svg.active{opacity:1;position:relative;}

  .brandcol{text-align:center;}
  .brandcol img{width:110px;height:auto;margin-bottom:4px;}
  .wordmark{color:var(--ink);margin:0 0 6px;display:flex;justify-content:center;}
  .wordmark-svg{color:var(--ink);width:122px;height:auto;}
  .wordmark-svg path{fill:currentColor;}
  .brandcol .tagline{font-size:11px;letter-spacing:.06em;color:var(--muted);margin-bottom:14px;}

  .cta-row{margin-bottom:8px;}
  .cta-row a{
    font-family:'Poppins',sans-serif;color:#fff;text-decoration:none;font-weight:600;
    padding:10px 28px;border-radius:22px;font-size:13.5px;letter-spacing:.01em;
    background:linear-gradient(135deg,var(--teal),var(--blue));display:inline-block;
    box-shadow:0 6px 16px rgba(31,182,166,.28);
  }
  .sub-row{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;}
  .btn-ico{width:20px;height:20px;flex-shrink:0;}
  .sub-row a, .sub-row button{display:inline-flex;align-items:center;gap:7px;}
  .cta-row a{display:inline-flex;align-items:center;gap:8px;}

  .sub-row a, .sub-row button{
    font-family:'Poppins',sans-serif;color:var(--navy);text-decoration:none;font-weight:600;
    padding:6px 14px 6px 10px;border-radius:18px;border:1.5px solid var(--line);
    background:var(--card);letter-spacing:.01em;cursor:pointer;font-size:11.5px;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  [data-theme="dark"] .sub-row a,[data-theme="dark"] .sub-row button{color:var(--ink);}
  .sub-row a:hover,.sub-row button:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,.08);}

  .slide-caption{max-width:1120px;margin:12px auto 0;padding:0 28px;position:relative;z-index:2;width:100%;}
  .slide-caption h3{font-family:'Poppins',sans-serif;font-size:16px;font-weight:600;color:var(--ink);margin:0 0 4px;letter-spacing:.01em;text-transform:uppercase;}
  .slide-caption p{font-size:13px;color:var(--muted);margin:0;max-width:64ch;line-height:1.5;}
  .slide-caption b{color:var(--ink);}
  .slide-caption .hl{color:var(--pink);text-decoration:underline;text-decoration-color:var(--pink);}

  .dots{display:flex;gap:7px;margin-top:10px;}
  .dot{width:8px;height:8px;border-radius:5px;background:var(--ink);opacity:.3;border:none;cursor:pointer;padding:0;}
  .dot.active{width:22px;background:var(--teal);opacity:1;}

  .wave-strip{height:5px;background:linear-gradient(90deg,var(--pink),var(--blue),var(--teal));flex-shrink:0;background-size:200% 200%;animation:gradShift 3s ease infinite;}

  .sky{height:46px;flex-shrink:0;overflow:hidden;position:relative;background:var(--bg-soft);}
  .sky svg{width:100%;height:100%;display:block;}
  .sky .sky-day{display:block;}
  .sky .sky-night{display:none;}
  [data-theme="dark"] .sky .sky-day{display:none;}
  [data-theme="dark"] .sky .sky-night{display:block;}

  .cloud{animation:drift linear infinite;}
  @keyframes drift{from{transform:translateX(-120px);}to{transform:translateX(920px);}}

  .star{animation:twinkle 2.6s ease-in-out infinite;}
  @keyframes twinkle{0%,100%{opacity:.15;}50%{opacity:.9;}}

  .savanna{height:58px;flex-shrink:0;overflow:hidden;position:relative;background:var(--bg-soft);}
  .savanna svg{width:100%;height:100%;display:block;}
  .sv-ink{color:var(--ink);}
  .sv-teal{color:var(--teal);}
  .sv-sun{color:var(--gold,#D9A441);}
  .footer{background:var(--navy);color:#C4CCD6;padding:8px 28px;text-align:center;font-size:11px;flex-shrink:0;}

  .modal-overlay{display:none;position:fixed;inset:0;background:rgba(10,14,20,.45);align-items:center;justify-content:center;z-index:50;padding:20px;}
  .modal-overlay.open{display:flex;}
  .modal-box{background:var(--card);border-radius:16px;max-width:640px;width:100%;max-height:90vh;overflow-y:auto;
    padding:22px 24px 24px;position:relative;box-shadow:0 20px 50px rgba(0,0,0,.25);}
  .modal-box h2{font-family:'Poppins',sans-serif;font-size:18px;color:var(--ink);margin:0 0 4px;}
  .modal-box p.sub{color:var(--muted);font-size:12.5px;margin:0 0 18px;}
  .modal-close{position:absolute;top:14px;right:16px;background:none;border:none;font-size:18px;color:var(--muted);cursor:pointer;line-height:1;}
  .feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
  .feature{border-radius:12px;padding:16px;color:#fff;min-height:96px;display:flex;flex-direction:column;justify-content:space-between;}
  .feature svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.7;}
  .feature b{font-size:12.5px;font-weight:600;line-height:1.35;}
  .schools-box{max-width:720px;}
  .marquee-wrap{
    overflow:hidden;margin:14px 0 0;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  }
  .marquee-row{display:flex;gap:12px;width:max-content;animation:marqueeLeft 168s linear infinite;}
  .marquee-row.marquee-reverse{animation:marqueeRight 200s linear infinite;}
  @keyframes marqueeLeft{from{transform:translateX(0);}to{transform:translateX(-50%);}}
  @keyframes marqueeRight{from{transform:translateX(-50%);}to{transform:translateX(0);}}
  @media (prefers-reduced-motion: reduce){.marquee-row{animation:none;}}
  .marquee-wrap:hover .marquee-row{animation-play-state:paused;}

  .school-card{
    flex:0 0 auto;width:118px;display:flex;flex-direction:column;align-items:center;text-align:center;
    gap:6px;padding:12px 8px;background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;
  }
  .school-logo{
    width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    color:#fff;font-family:'Poppins',sans-serif;font-weight:600;font-size:12.5px;flex-shrink:0;
    position:relative;overflow:hidden;
  }
  .school-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;}
  .school-name{font-size:10px;font-weight:600;color:var(--ink);line-height:1.3;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .school-region{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;}

  .f1{background:linear-gradient(135deg,var(--teal),#0E8C7F);}
  .f2{background:linear-gradient(135deg,var(--blue),#1D5AA8);}
  .f3{background:linear-gradient(135deg,var(--pink),#A31A48);}
  .f4{background:linear-gradient(135deg,var(--navy),#16202E);}
  .f5{background:linear-gradient(135deg,#7A3F9E,#4E2668);}
  .f6{background:linear-gradient(135deg,#E08A2E,#B85F14);}

  /* ===============================================================
     Pages du parcours de connexion (région > département >
     établissement > connexion). Contrairement à l'accueil, ces pages
     défilent normalement (liste d'options de longueur variable).
  =============================================================== */
  body.step-body{height:auto;min-height:100vh;overflow:visible;}
  body.step-body .topbar{border-bottom:1px solid var(--line);}

  .back-link{
    display:inline-flex;align-items:center;gap:6px;color:var(--muted);text-decoration:none;
    font-size:12px;font-weight:500;background:none;border:none;cursor:pointer;padding:0;
    font-family:'IBM Plex Sans',sans-serif;
  }
  .back-link svg{width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:2;}
  .back-link:hover{color:var(--ink);}
  .back-link:hover svg{stroke:var(--ink);}

  .breadcrumb-steps{
    display:flex;align-items:center;gap:6px;flex-wrap:wrap;
    font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  }
  .breadcrumb-steps .sep{opacity:.5;}
  .breadcrumb-steps .done{color:var(--teal);}
  .breadcrumb-steps a.done{text-decoration:none;cursor:pointer;}
  .breadcrumb-steps a.done:hover{text-decoration:underline;}
  .breadcrumb-steps a.done:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:3px;}
  .breadcrumb-steps .now{color:var(--ink);font-weight:700;}

  /* Bouton retour rapproché du contenu, juste au-dessus du fil d'Ariane,
     plutôt qu'isolé dans la barre du haut — plus facile à remarquer. */
  .step-nav-row{display:flex;align-items:center;gap:16px;margin-bottom:12px;flex-wrap:wrap;}
  .step-nav-row .back-link{flex-shrink:0;}

  /* Logo compact dans le header des pages autres que l'accueil — sert aussi
     de lien de retour à l'accueil (topbar-left, vide sur ces pages sinon). */
  .topbar-logo{display:flex;align-items:center;flex-shrink:0;}
  .topbar-logo img{height:30px;width:auto;display:block;}
  .topbar-logo:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:6px;}

  /* margin-top négatif : le bloc remonte vers le décor ciel, mais reste
     assez conservateur pour que le fil d'Ariane (premier élément, juste
     après le padding-top) ne chevauche jamais le ciel — seul le blanc entre
     les deux se réduit. */
  /* flex:1 0 auto (motif "footer collant") : le bloc grandit pour occuper
     l'espace vertical restant quand le contenu est court, ce qui pousse la
     savane tout en bas de l'écran plutôt que de la laisser flotter juste
     après un contenu court. Ne rétrécit jamais sous sa taille de contenu
     (flex-basis:auto), donc reste scrollable normalement si le contenu
     dépasse la hauteur de l'écran. */
  .step-main{max-width:760px;margin:-8px auto 0;padding:28px 24px 60px;width:100%;position:relative;z-index:2;flex:1 0 auto;}
  .step-header h1{font-family:'Poppins',sans-serif;font-size:22px;margin:0 0 6px;font-weight:600;}
  .step-header .step-sub{font-size:13px;color:var(--muted);margin:0 0 24px;}

  .option-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;}
  .option-card{
    display:flex;flex-direction:column;gap:10px;text-align:left;
    background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;
    cursor:pointer;font-family:inherit;color:var(--ink);
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  }
  .option-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.08);border-color:var(--teal);}
  .option-card:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
  .option-card .oc-icon{
    width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,var(--teal),var(--blue));color:#fff;flex-shrink:0;
  }
  .option-card .oc-icon svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:1.8;}
  .option-card .oc-title{font-weight:600;font-size:14px;line-height:1.3;}
  .option-card .oc-sub{font-size:11.5px;color:var(--muted);}
  .option-card .oc-badge{
    align-self:flex-start;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
    background:rgba(31,182,166,.14);color:#0E8C7F;padding:2px 8px;border-radius:999px;
  }

  /* Carte établissement : réutilise le badge logo/initiales du carrousel accueil */
  .option-card.etab-card{flex-direction:row;align-items:center;gap:12px;}
  .option-card.etab-card .school-logo{width:42px;height:42px;font-size:14px;}
  .option-card.etab-card .oc-title{font-size:13.5px;}
  /* Établissement non actif : grisé mais le bouton reste cliquable (demande
     explicite) — pas de disabled/pointer-events:none, juste un signal visuel. */
  .option-card.etab-card-inactive{opacity:.5;}
  .option-card.etab-card-inactive:hover{opacity:.75;}

  .empty-state{
    text-align:center;padding:40px 20px;color:var(--muted);font-size:13px;
  }

  /* Carte interactive des régions (sélection région). Statut par région
     (voir cmrRegionStats dans etabs-data.js), encodé par couleur — carte
     chaleur (Point 6, 2026-08-09) : teal, d'autant plus foncé qu'il y a
     d'établissements actifs (palier heat-low/-mid/-high calculé en JS dans
     renderRegions(), connexion-region.html) ; gris neutre = a des
     établissements mais aucun actif ; quasi blanc = aucun établissement.
     Seules les régions teal (status-active) sont cliquables. La hauteur de
     la carte est calée en JS (cmrFitMapHeight) sur l'espace réellement
     restant sous le titre, pas une fraction fixe de la fenêtre. */
  .cmr-map-wrap{display:flex;flex-direction:column;align-items:center;margin-top:4px;}
  /* Marges resserrées (2026-08-11) : chaque pixel repris au-dessus est rendu à
     la carte, dont la hauteur est calculée à partir de la place restante.
     La barre de nom garde en revanche sa hauteur réservée même invisible —
     sinon la carte sauterait à chaque survol de région. */
  .cmr-name-bar{
    margin-bottom:10px;min-height:34px;text-align:center;
    font-family:'Poppins',sans-serif;font-weight:600;font-size:14.5px;color:var(--ink);
    background:var(--card);border:1px solid var(--line);border-radius:20px;
    padding:7px 22px;opacity:0;transition:opacity .2s ease;
  }
  .cmr-name-bar.show{opacity:1;}
  /* La HAUTEUR pilote (2026-08-11, demande explicite : la carte doit occuper
     l'espace vertical laissé libre au lieu de flotter au milieu du vide).
     `--cmr-map-h` est calculée en JS d'après la place réellement disponible
     sous le titre — voir cmrFitMapHeight() dans connexion-region.html.
     `aspect-ratio` reprend les dimensions du viewBox (448x664), donc la
     largeur suit toute seule : inutile de la contraindre, et l'ancien
     `max-width:460px` bridait justement la carte à ~350px de haut sur un
     écran de bureau, quelle que soit la place libre.
     Plancher à 480px comme demandé ; `max-width:100%` garde la priorité sur
     un écran étroit, où c'est la largeur qui contraint. */
  /* Pas d'`aspect-ratio` ici : sur un bloc, `width:auto` veut dire « remplis le
     conteneur » et l'emporte sur le ratio — la carte se retrouvait étirée à la
     largeur de la page. Les DEUX dimensions sont donc posées en JS à partir de
     la hauteur disponible, ce qui est déterministe. */
  .cmr-map{width:auto;max-width:100%;overflow:visible;display:block;margin:0 auto;}

  .reg-wrap{
    transform:scale(.93);cursor:pointer;transition:transform .25s ease;
    animation-timing-function:ease-in-out;animation-iteration-count:infinite;
  }
  .cmr-fl1{animation-name:cmrFloat1;} .cmr-fl2{animation-name:cmrFloat2;}
  .cmr-fl3{animation-name:cmrFloat3;} .cmr-fl4{animation-name:cmrFloat4;}
  @keyframes cmrFloat1{0%,100%{transform:scale(.93) translate(0,0);}50%{transform:scale(.93) translate(1.5px,-2.5px);}}
  @keyframes cmrFloat2{0%,100%{transform:scale(.93) translate(0,0);}50%{transform:scale(.93) translate(-2px,-1.5px);}}
  @keyframes cmrFloat3{0%,100%{transform:scale(.93) translate(0,0);}50%{transform:scale(.93) translate(1px,2px);}}
  @keyframes cmrFloat4{0%,100%{transform:scale(.93) translate(0,0);}50%{transform:scale(.93) translate(-1.5px,2px);}}

  /* COULEURS PLEINES, et non `fill:url(#grad-...)` — correction du 2026-08-11.
     Ces dégradés sont définis dans le <defs> de connexion-region.html : la
     couleur d'une région dépendait donc d'un identifiant vivant dans le HTML.
     Que le HTML et cette feuille servis divergent d'une version — ce qui
     arrive après un déploiement, le CDN de l'hébergeur pouvant resservir l'un
     des deux périmé pendant plusieurs minutes — et `url(#...)` ne résout plus
     rien : la région devient BLANCHE, donc invisible, et comme seules les
     régions actives sont cliquables, la carte paraît morte. Panne signalée
     deux fois. Une couleur pleine ne peut pas manquer sa cible.
     Teintes reprises au milieu de chaque ancien dégradé : à l'échelle de la
     carte, le rendu est le même, et les trois paliers de densité restent
     parfaitement distincts. */
  .reg-wrap.status-active .region, .reg-wrap.status-active .region-shadow{fill:#3ECBB7;}
  .reg-wrap.status-active.heat-low .region, .reg-wrap.status-active.heat-low .region-shadow{fill:#9FF0E0;}
  .reg-wrap.status-active.heat-mid .region, .reg-wrap.status-active.heat-mid .region-shadow{fill:#3ECBB7;}
  .reg-wrap.status-active.heat-high .region, .reg-wrap.status-active.heat-high .region-shadow{fill:#199991;}
  .reg-wrap.status-inactive .region, .reg-wrap.status-inactive .region-shadow{fill:#CED4DC;}
  .reg-wrap.status-none .region, .reg-wrap.status-none .region-shadow{fill:#EEF1F4;}

  .reg-wrap:hover, .reg-wrap.active{animation:none;}
  .reg-wrap.status-active:hover, .reg-wrap.status-active.active{transform:scale(1.05);}
  .reg-wrap.status-inactive, .reg-wrap.status-none{cursor:not-allowed;}

  @media (prefers-reduced-motion: reduce){.reg-wrap{animation:none;}}

  /* Noms de région annotés directement sur la carte (PC uniquement — sur
     mobile la légende ci-dessous prend le relais, les libellés seraient
     illisibles sur les petites régions). Élément frère des tracés dans le
     même <g> : hérite donc du même flottement/animation ("flottants"). */
  .region-label{
    font-family:'Poppins',sans-serif;font-weight:600;font-size:11px;
    fill:#fff;pointer-events:none;paint-order:stroke fill;
    stroke:rgba(15,25,40,.45);stroke-width:3px;stroke-linejoin:round;
  }
  @media (max-width: 640px){.region-label{display:none;}}

  /* Légende mobile : les cartes SVG sont trop petites au doigt pour les
     régions étroites — sur petit écran, une liste texte cliquable des seules
     régions actives (bleues) prend le relais, au-dessus de la carte. */
  .cmr-legend{display:none;}
  @media (max-width: 640px){
    .cmr-legend{
      order:-1;
      display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
      margin:0 0 20px;padding:0 4px;
    }
    .cmr-legend button{
      font-family:inherit;font-size:12.5px;font-weight:600;color:#fff;
      background:linear-gradient(135deg,#2E7BD9,#1F5FA8);border:none;border-radius:999px;
      padding:8px 16px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;
    }
    .cmr-legend button:hover, .cmr-legend button:focus-visible{
      transform:translateY(-1px);box-shadow:0 4px 12px rgba(46,123,217,.35);outline:none;
    }
  }

  /* Page de connexion (formulaire) */
  .login-shell{max-width:400px;margin:-8px auto 0;padding:28px 24px 0;position:relative;z-index:2;flex:1 0 auto;}
  .etab-context{
    display:flex;align-items:center;gap:12px;background:var(--bg-soft);border:1px solid var(--line);
    border-radius:14px;padding:14px 16px;margin-bottom:22px;
  }
  .etab-context .school-logo{width:40px;height:40px;font-size:13px;flex-shrink:0;}
  .etab-context .ec-name{font-weight:600;font-size:13.5px;line-height:1.3;}
  .etab-context .ec-region{font-size:11px;color:var(--muted);}
  .etab-context .ec-change{margin-left:auto;font-size:11px;color:var(--teal);font-weight:600;background:none;border:none;cursor:pointer;white-space:nowrap;}

  .login-form .field{margin-bottom:14px;}
  .login-form label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:6px;}
  .login-form input{
    width:100%;background:var(--bg-soft);border:1px solid var(--line);border-radius:10px;
    padding:11px 13px;font-size:14px;color:var(--ink);font-family:'IBM Plex Sans',sans-serif;
  }
  .login-form input:focus-visible{outline:2px solid var(--teal);outline-offset:1px;}
  .pass-field-wrap{position:relative;}
  .pass-field-wrap input{padding-right:38px;width:100%;}
  .pass-toggle-btn{
    position:absolute;top:50%;right:8px;transform:translateY(-50%);
    background:none;border:none;padding:4px;cursor:pointer;color:var(--muted);
    display:flex;align-items:center;justify-content:center;
  }
  .pass-toggle-btn:hover{color:var(--teal);}
  .pass-toggle-btn .icon-eye-off{display:none;}
  .pass-toggle-btn.showing .icon-eye{display:none;}
  .pass-toggle-btn.showing .icon-eye-off{display:block;}
  .login-form .btn-submit{
    width:100%;font-family:'Poppins',sans-serif;color:#fff;font-weight:600;
    padding:12px;border-radius:22px;font-size:14px;border:none;cursor:pointer;margin-top:6px;
    background:linear-gradient(135deg,var(--teal),var(--blue));box-shadow:0 6px 16px rgba(31,182,166,.28);
    display:flex;align-items:center;justify-content:center;gap:8px;
    transition:opacity .2s ease;
  }
  /* ---- Animation de connexion (Point 4, proposition n°2 "Clé qui tourne",
     choisie 2026-08-10) — le bouton passe en chargement pendant l'appel
     réseau réel (/api/login, voir <script> en bas de page), aujourd'hui
     totalement inerte pendant cette attente. Au succès, un cadenas apparaît
     au centre de l'écran et se déverrouille (l'anse pivote) pendant que le
     formulaire s'efface en fondu-flou, juste avant la redirection vers le
     tableau de bord. */
  .btn-submit-spinner{
    display:none;width:14px;height:14px;border-radius:50%;flex-shrink:0;
    border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
    animation:loginBtnSpin .7s linear infinite;
  }
  .btn-submit.is-loading{opacity:.85;cursor:default;pointer-events:none;}
  .btn-submit.is-loading .btn-submit-spinner{display:block;}
  @keyframes loginBtnSpin{to{transform:rotate(360deg);}}

  .login-unlock{
    position:absolute;top:50%;left:50%;z-index:5;width:60px;height:60px;
    margin:-30px 0 0 -30px;color:var(--teal);opacity:0;pointer-events:none;
    transform:scale(.6);transition:opacity .3s ease,transform .3s ease;
  }
  .login-unlock svg{width:100%;height:100%;filter:drop-shadow(0 6px 14px rgba(31,182,166,.35));}
  .login-unlock-shackle{transform-origin:12px 8px;transition:transform .5s cubic-bezier(.4,0,.2,1) .35s;}
  .login-unlock.is-active{opacity:1;transform:scale(1);}
  .login-unlock.is-active .login-unlock-shackle{transform:rotate(35deg) translateY(-2px);}

  .login-form.is-success{opacity:0;filter:blur(4px);pointer-events:none;transition:opacity .35s ease .5s,filter .35s ease .5s;}

  @media (prefers-reduced-motion: reduce){
    .btn-submit-spinner,.login-unlock,.login-unlock-shackle,.login-form{transition:none !important;animation:none !important;}
  }
  .login-foot-note{text-align:center;font-size:11.5px;color:var(--muted);margin-top:18px;display:flex;align-items:center;justify-content:center;gap:6px;}
  .login-foot-note .dot{width:5px;height:5px;border-radius:50%;background:#6fae7c;display:inline-block;}

  /* Connexion réelle (Lycée de Wack uniquement, voir js/wack-login-data.js) */
  .login-demo-hint{text-align:center;font-size:11.5px;color:var(--muted);margin-top:10px;padding:8px 12px;background:var(--bg-soft);border-radius:8px;}
  .login-notbuilt{margin-top:14px;padding:14px 16px;border-radius:10px;background:var(--bg-soft);border:1px solid var(--line);font-size:12.5px;color:var(--ink);text-align:center;}
  .login-notbuilt b{color:var(--pink);}
  .login-error{margin-top:10px;padding:8px 12px;border-radius:8px;background:rgba(214,38,94,.1);color:var(--pink);font-size:12.5px;text-align:center;}
/* ---- Connexion impossible sans établissement (2026-08-11, correction du
   bug « connexion dans le vide → établissement aléatoire », voir
   js/etab-context.js) : les champs et le bouton sont réellement `disabled`
   en JS ; ce style rend l'état visible au lieu de laisser un formulaire
   d'apparence normale qui ne répond pas. ---- */
.login-form.is-locked .field input,
.login-form.is-locked .btn-submit{opacity:.5;cursor:not-allowed;}
.empty-state-hint{display:inline-block;margin-top:6px;font-size:12.5px;opacity:.75;line-height:1.45;}