:root{
    /* ---- Charte graphique LAPENSE237 : Bleu LAPENSE, Bleu Marine, Blanc, Or LAPENSE ---- */
    --navy:#0B1F3E; --navy-dark:#071527; --navy-soft:#14315C; --navy-glow:#1857C4;
    --royal:#1857C4; --royal-deep:#123F94; --royal-light:#EAF2FF;
    --ink900:#0B1F3E;
    --gold:#F0B429; --gold-light:#FDF1D6; --gold-deep:#C6900D; --gold-glow:#F6C862;
    --emerald:#16A34A; --emerald-light:#ECFDF3;
    --cream:#FFFFFF; --card:#FFFFFF; --line:#E2E8F0; --line-soft:#F1F5F9; --ink:#334155; --ink-soft:#64748B;
    --green:#16A34A; --green-bg:#ECFDF3; --red:#DC2626; --red-bg:#FEF2F2; --grey-bg:#F1F5F9;
    --shadow-xs:0 1px 2px rgba(11,31,62,.05);
    --shadow-sm:0 3px 10px -2px rgba(11,31,62,.08), 0 1px 2px rgba(11,31,62,.05);
    --shadow-md:0 14px 32px -10px rgba(11,31,62,.16), 0 4px 10px -4px rgba(11,31,62,.08);
    --shadow-lg:0 28px 60px -14px rgba(11,31,62,.28), 0 10px 20px -8px rgba(11,31,62,.12);
    --glow-gold:0 10px 26px -6px rgba(240,180,41,.5), 0 2px 8px -2px rgba(240,180,41,.32);
    --glow-navy:0 10px 26px -8px rgba(11,31,62,.45);
    --radius:20px; --radius-sm:13px; --radius-lg:26px; --radius-xl:32px;
    --ease:cubic-bezier(.16,1,.3,1);
    --ease-spring:cubic-bezier(.34,1.56,.64,1);
    /* ---- Charte ÉDITORIALE du module Actualités uniquement (utilisée par les classes .ed-*) ---- */
    --ed-ink:#0E1B2C;      /* Encre profonde : titres */
    --ed-paper:#FBF8F1;    /* Papier crème : fond */
    --ed-coral:#E85A4F;    /* Corail vivant : CTA urgent */
    --ed-sage:#7BA098;     /* Sauge élégant : événements */
    --ed-mustard:#E0A458;  /* Moutarde dorée : conseils */
    --ed-plum:#6B2D5C;     /* Prune royale : premium */
    --ed-shadow:0 12px 32px -12px rgba(14,27,44,.18);
    --ed-shadow-hover:0 20px 48px -16px rgba(14,27,44,.28);
  }
  *{box-sizing:border-box;}
  html{ scroll-behavior:smooth; color-scheme:only light; }
  /* Interlignage plus aéré pour les textes courants ; les éléments compacts (boutons,
     pastilles, champs, titres, chiffres) gardent leur hauteur actuelle. */
  body{ line-height:1.55; }
  button, input, select, textarea, .btn, .pill, .quicknav-badge, .toggle button{ line-height:normal; }
  /* L'en-tête garde exactement sa hauteur (le menu latéral est positionné juste dessous) */
  header, .side-drawer-head{ line-height:normal; }
  h1, h2, h3, .login-title, .boot-brand, .stat .num, .badge-card .bname{ line-height:1.25; }
  .card .name{ line-height:1.3; }
  body{ margin:0; font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    background:
      radial-gradient(900px 480px at 108% -6%, rgba(240,180,41,.10), transparent 60%),
      radial-gradient(760px 460px at -14% 2%, rgba(24,87,196,.08), transparent 55%),
      radial-gradient(640px 420px at 55% 118%, rgba(24,87,196,.045), transparent 62%),
      var(--cream);
    background-attachment:fixed;
    color:var(--ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    font-feature-settings:"tnum" 1; }
  ::selection{ background:var(--gold-light); color:var(--navy-dark); }
  ::-webkit-scrollbar{ height:0; width:0; }
  a{ color:inherit; }
  /* Focus : --navy sur fond clair (contraste suffisant), --gold conservé sur les fonds sombres */
  :focus-visible{ outline:2px solid var(--navy); outline-offset:3px; border-radius:6px; }
  /* Fonds sombres : contour or clair, le plus lumineux de la charte */
  header :focus-visible, nav :focus-visible, .side-drawer :focus-visible, .login-wrap :focus-visible,
  .badge-card :focus-visible{ outline-color:var(--gold-light); }
  .login-wrap .card :focus-visible{ outline-color:var(--navy); }
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  }

  header{ background:
      radial-gradient(520px 160px at 10% -20%, rgba(240,180,41,.16), transparent 65%),
      linear-gradient(128deg,var(--navy) 0%, var(--navy-soft) 58%, var(--navy-glow) 120%);
    color:#fff; padding:20px 18px 12px;
    position:relative; z-index:10; box-shadow:0 14px 34px -12px rgba(6,14,26,.55);
    border-bottom:1px solid rgba(255,255,255,.07); overflow:hidden; }
  header::before{ content:''; position:absolute; inset:0; background:radial-gradient(420px 140px at 12% 0%, rgba(255,255,255,.10), transparent 70%); pointer-events:none; }
  header .top{ display:flex; justify-content:space-between; align-items:flex-start; position:relative; z-index:1; }
  header .brand{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
  header .brand b{ font-family:'Poppins',sans-serif; font-size:21px; letter-spacing:.4px; background:linear-gradient(95deg,#fff 15%,var(--gold-light) 90%); -webkit-background-clip:text; background-clip:text; color:transparent; }
  header .brand span{ font-size:11px; color:var(--gold-light); opacity:.95; background:rgba(255,255,255,.09); padding:4.5px 11px; border-radius:20px; border:1px solid rgba(247,232,196,.28); letter-spacing:.3px; backdrop-filter:blur(6px); }
  header .scope{ font-size:11.5px; color:#B9C9DB; margin-top:8px; position:relative; z-index:1; }
  .logout{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); color:#EEF3F8; font-size:11px; padding:7.5px 15px; border-radius:20px; cursor:pointer; transition:.22s var(--ease); backdrop-filter:blur(8px); }
  .logout:hover{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.38); transform:translateY(-1px); }
  .logout:active{ transform:translateY(0) scale(.97); }
  nav{ display:flex; align-items:center; gap:6px; padding:10px 10px 11px 10px; position:relative; z-index:9;
    background:linear-gradient(185deg, var(--navy-soft), var(--navy-dark) 120%);
    border-bottom:1px solid rgba(255,255,255,.05); }
  #tabs-scroll{ display:flex; overflow-x:auto; gap:8px; padding:4px 2px 5px; flex:1; min-width:0; scroll-padding:12px; scroll-behavior:smooth;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); }
  nav button{ flex:0 0 auto; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); color:#CFDCE8; font-size:12.5px; font-weight:600; padding:9.5px 16px; border-radius:22px; cursor:pointer; white-space:nowrap; transition:.22s var(--ease); }
  nav button:hover{ background:rgba(255,255,255,.14); transform:translateY(-1px); border-color:rgba(255,255,255,.2); }
  nav button.active{ background:linear-gradient(120deg,var(--gold),var(--gold-deep)); color:var(--navy-dark); font-weight:800; border-color:transparent; box-shadow:var(--glow-gold); transform:translateY(-1px); }

  main{ padding:20px 16px; max-width:760px; margin:0 auto; padding-bottom:64px; animation:fadeInUp .45s var(--ease); }
  /* ---- Étape 44 : en-tête (logo, langue, déconnexion) et barre (☰, onglets, icônes rapides,
     badges) FIXES ; le contenu défile dessous. Hauteurs mesurées en JS (adjustFixedLayout) :
     --app-header-h = en-tête seul, --header-height = en-tête + barre. Les deux barres gardent
     leur dégradé opaque d'origine (pas de flou : voir la note de livraison). ---- */
  .app-header{ position:fixed; top:0; left:0; right:0; z-index:100; transition:box-shadow .25s var(--ease); }
  /* Barre au-dessus de l'en-tête dans l'empilement : les fenêtres ouvertes depuis les icônes
     rapides (demande de répétition, « Besoin d'un répétiteur ») sont DANS la barre et doivent
     couvrir l'en-tête. Les deux barres ne se chevauchent pas : aucun effet visible. */
  .app-nav{ position:fixed; top:var(--app-header-h, 96px); left:0; right:0; z-index:101; transition:box-shadow .25s var(--ease); }
  .app-header.scrolled, .app-nav.scrolled{ box-shadow:0 14px 34px -12px rgba(6,14,26,.55); }
  .app-main{ padding-top:calc(var(--header-height, 150px) + 16px); min-height:100vh; }
  html{ scroll-padding-top:calc(var(--header-height, 0px) + 12px); }
  /* Même écran redessiné (après un enregistrement, une recherche…) : pas de nouvelle entrée */
  main.settled{ animation:none; }
  /* Changement d'onglet : le contenu glisse dans le sens de la navigation (onglet suivant →
     depuis la droite, précédent → depuis la gauche). Autre profil/connexion : fadeInUp. */
  @keyframes tabSlideInRight{ from{ opacity:0; transform:translateX(12px); } to{ opacity:1; transform:translateX(0); } }
  @keyframes tabSlideInLeft{ from{ opacity:0; transform:translateX(-12px); } to{ opacity:1; transform:translateX(0); } }
  main.enter-next{ animation:tabSlideInRight .35s var(--ease); }
  main.enter-prev{ animation:tabSlideInLeft .35s var(--ease); }
  /* Le glissement latéral ne doit jamais créer de défilement horizontal passager */
  #root{ overflow-x:clip; }
  @keyframes fadeInUp{ from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:translateY(0);} }
  @keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
  @keyframes shimmer{ 0%{ background-position:-200% 0; } 100%{ background-position:200% 0; } }
  @keyframes floatBlob{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-16px,16px) scale(1.07); } }
  @keyframes pulseDot{ 0%,100%{ box-shadow:0 0 0 0 rgba(240,180,41,.5); } 50%{ box-shadow:0 0 0 7px rgba(240,180,41,0); } }
  @keyframes pulseDotOrange{ 0%,100%{ box-shadow:0 0 0 0 rgba(232,134,43,.55); } 50%{ box-shadow:0 0 0 7px rgba(232,134,43,0); } }
  /* ---- Cercles clignotants de la classe virtuelle (indicateurs demande de parole / question) ---- */
  .vc-blink-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:4px; vertical-align:middle; }
  .vc-blink-dot.gold{ background:var(--gold); animation:pulseDot 1.2s ease-in-out infinite; }
  .vc-blink-dot.orange{ background:#E8862B; animation:pulseDotOrange 1.2s ease-in-out infinite; }
  @keyframes spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

  /* =====================================================================
     SYSTÈME D'ANIMATIONS GLOBAL — v2.1
     Uniquement --ease / --ease-spring, et les couleurs --gold / --gold-light /
     --line-soft de la charte. Toutes les durées ≤ .5s, sauf les boucles
     infinies (pulsation, squelette). Respecte prefers-reduced-motion.
     ===================================================================== */
  @keyframes cardEnter{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:translateY(0); } }
  @keyframes listItemEnter{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
  @keyframes subtlePulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } }
  @keyframes buttonBounce{ 0%{ transform:scale(1); } 40%{ transform:scale(.97); } 100%{ transform:scale(1); } }
  /* Éclair doré : halo --gold qui s'élargit en s'effaçant (couleur de la charte, pas de rgba codé en dur) */
  @keyframes goldFlash{ 0%{ box-shadow:0 0 0 0 var(--gold); } 100%{ box-shadow:0 0 0 12px transparent; } }
  @keyframes checkDraw{ from{ stroke-dashoffset:32; } to{ stroke-dashoffset:0; } }
  @keyframes modalEnter{ from{ opacity:0; transform:scale(.94); } to{ opacity:1; transform:scale(1); } }
  @keyframes tabSlideIn{ from{ opacity:0; transform:translateX(8px); } to{ opacity:1; transform:translateX(0); } }
  /* Ajouts : sortie de modale et petit rebond de compteur (badge qui change de valeur) */
  @keyframes modalExit{ from{ opacity:1; transform:scale(1); } to{ opacity:0; transform:scale(.96); } }
  @keyframes fadeOut{ from{ opacity:1; } to{ opacity:0; } }
  @keyframes countBump{ 0%{ transform:scale(1); } 45%{ transform:scale(1.22); } 100%{ transform:scale(1); } }

  .anim-card-enter{ animation:cardEnter .4s var(--ease) backwards; }
  .anim-list-item{ animation:listItemEnter .35s var(--ease) backwards; }
  .anim-modal{ animation:modalEnter .3s var(--ease-spring) both; }
  .anim-modal-exit{ animation:modalExit .2s var(--ease) both; }
  .anim-tab{ animation:tabSlideIn .3s var(--ease) backwards; }
  .anim-pulse{ animation:subtlePulse 2s var(--ease) infinite; }
  .anim-bounce{ animation:buttonBounce .3s var(--ease-spring); }
  .anim-bump{ animation:countBump .4s var(--ease-spring); }
  .anim-gold-flash{ animation:goldFlash .5s var(--ease); }
  /* Prépas Concours — habillage premium */
  .prepa-progress{ position:sticky; top:var(--header-height, 0px); z-index:5; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:12px 14px; margin:0 0 16px; box-shadow:0 8px 20px -14px rgba(11,31,62,.25); animation:cardEnter .4s var(--ease); }
  .prepa-press{ transition:transform .25s var(--ease-spring), box-shadow .25s var(--ease); }
  .prepa-press:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
  .prepa-press:active{ transform:scale(.98); }
  .prepa-num-dot{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--gold); color:var(--navy-dark); font-weight:800; font-size:12px; margin-right:6px; vertical-align:middle; }
  .prepa-chip{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; background:var(--cream); padding:4px 10px; border-radius:20px; color:var(--ink); }
  @media (prefers-reduced-motion: reduce){ .prepa-press, .prepa-press:hover, .prepa-press:active{ transform:none; transition:none; } }
  /* Message de discussion qui vient d'arriver (messagerie, classe virtuelle) */
  .msg-new{ animation:listItemEnter .25s var(--ease) backwards; }
  /* Carte qui vient d'être modifiée : éclair doré, même quand l'écran est simplement redessiné */
  main.settled .stagger > .anim-gold-flash{ animation:goldFlash .5s var(--ease); }
  /* Coche SVG dessinée : <svg><path class="anim-check" …></svg> (longueur de tracé ≤ 32) */
  .anim-check{ stroke-dasharray:32; stroke-dashoffset:32; animation:checkDraw .4s var(--ease) .1s forwards; }

  /* Liste en cascade : les enfants entrent l'un après l'autre (plafonné à 240ms) */
  /* 'backwards' (et non 'both') : invisible pendant son délai, puis l'animation se retire —
     sinon la position finale figée par l'animation bloquerait le soulèvement au survol. */
  .stagger > *{ animation:listItemEnter .35s var(--ease) backwards; }
  .stagger > *:nth-child(1){ animation-delay:0ms; }
  .stagger > *:nth-child(2){ animation-delay:40ms; }
  .stagger > *:nth-child(3){ animation-delay:80ms; }
  .stagger > *:nth-child(4){ animation-delay:120ms; }
  .stagger > *:nth-child(5){ animation-delay:160ms; }
  .stagger > *:nth-child(6){ animation-delay:200ms; }
  .stagger > *:nth-child(n+7){ animation-delay:240ms; }

  /* Squelette de chargement aux couleurs de la charte (réutilise @keyframes shimmer) */
  .skel{ display:block; border-radius:var(--radius-sm); min-height:13px;
    background:linear-gradient(90deg, var(--line-soft) 25%, var(--gold-light) 50%, var(--line-soft) 75%);
    background-size:200% 100%; animation:shimmer 1.4s linear infinite; }

  /* ---- Squelettes de chargement (cartes et statistiques) : mêmes couleurs que .skel ---- */
  .skeleton-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 19px; margin-bottom:13px; box-shadow:var(--shadow-xs); }
  .skeleton-line, .skeleton-stat .sk-num, .skeleton-stat .sk-label{
    background:linear-gradient(90deg, var(--line-soft) 25%, var(--gold-light) 50%, var(--line-soft) 75%);
    background-size:200% 100%; animation:shimmer 1.4s linear infinite; }
  .skeleton-line{ height:12px; border-radius:6px; margin-bottom:10px; }
  .skeleton-line:last-child{ margin-bottom:0; }
  .skeleton-line.w40{ width:40%; } .skeleton-line.w60{ width:60%; } .skeleton-line.w80{ width:80%; } .skeleton-line.w100{ width:100%; }
  .skeleton-stat{ background:linear-gradient(165deg,#fff,var(--cream) 140%); border:1px solid var(--line); border-radius:var(--radius); padding:18px;
    display:flex; flex-direction:column; gap:12px; box-shadow:var(--shadow-xs); }
  .skeleton-stat .sk-num{ height:27px; width:60%; border-radius:6px; }
  .skeleton-stat .sk-label{ height:11px; width:80%; border-radius:4px; }
  /* Les squelettes d'une même page scintillent en décalé plutôt qu'en bloc */
  .skeleton-card:nth-child(2n) .skeleton-line, .skeleton-stat:nth-child(2n) .sk-num, .skeleton-stat:nth-child(2n) .sk-label{ animation-delay:-.35s; }
  .skeleton-card:nth-child(3n) .skeleton-line, .skeleton-stat:nth-child(3n) .sk-num, .skeleton-stat:nth-child(3n) .sk-label{ animation-delay:-.7s; }

  /* ---- Barre de progression en haut de page (chargements et enregistrements longs) :
     avance vite puis ralentit jusqu'à 85 %, se complète et s'efface à la fin. N'apparaît
     qu'après 0,2 s pour ne pas clignoter sur les réponses rapides. ---- */
  #top-progress{ position:fixed; top:env(safe-area-inset-top, 0px); left:0; right:0; height:3px; z-index:999; pointer-events:none;
    background:linear-gradient(90deg,var(--gold),var(--gold-deep)); box-shadow:0 0 8px var(--gold-glow);
    transform:scaleX(0); transform-origin:left; opacity:0; }
  #top-progress.active{ opacity:1; transform:scaleX(.85); transition:transform 6s var(--ease), opacity .2s var(--ease); }
  #top-progress.done{ opacity:0; transform:scaleX(1); transition:transform .2s var(--ease), opacity .3s var(--ease) .2s; }

  /* Écran simplement redessiné (après un enregistrement, une recherche…) : aucune entrée
     rejouée — sinon listes en cascade et cartes clignoteraient à chaque action (lot 1). */
  main.settled .stagger > *, main.settled .anim-card-enter, main.settled .anim-list-item,
  main.settled .anim-tab, main.settled .empty, main.settled .empty .eicon{ animation:none; }

  /* Mouvement réduit : la règle globale raccourcit déjà les durées ; il faut aussi annuler
     les délais, sinon les éléments d'une cascade restent invisibles jusqu'à 240ms. */
  @media (prefers-reduced-motion: reduce){
    .stagger > *, .anim-card-enter, .anim-list-item, .anim-modal, .anim-tab, .anim-check{ animation-delay:0s !important; }
    .anim-pulse, .skel, .quicknav-badge, .skeleton-line, .skeleton-stat .sk-num, .skeleton-stat .sk-label{ animation:none !important; }
    html{ scroll-behavior:auto; }
    .anim-check{ stroke-dashoffset:0; }
  }

  .card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 19px; margin-bottom:13px;
    box-shadow:var(--shadow-sm); transition:box-shadow .35s var(--ease), transform .35s var(--ease), border-color .35s var(--ease); position:relative; }
  .card::before{ content:''; position:absolute; top:0; left:18px; right:18px; height:1px; background:linear-gradient(90deg,transparent,rgba(240,180,41,.35),transparent); opacity:0; transition:opacity .3s var(--ease); }
  /* Liseré doré à gauche (0 → 3px au survol), en plus de la ligne dorée du haut (::before) */
  .card::after{ content:''; position:absolute; left:0; top:12px; bottom:12px; width:0;
    background:linear-gradient(180deg,var(--gold),var(--gold-deep)); border-radius:0 3px 3px 0;
    transition:width .35s var(--ease); pointer-events:none; }
  /* Survol réservé aux appareils à souris : sur téléphone, une carte touchée ne reste plus
     « soulevée » (survol collant). */
  @media (hover:hover){
    .card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:#DED2AC; }
    .card:hover::before{ opacity:1; }
    .card:hover::after{ width:3px; }
    .stat:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:#DED2AC; }
  }
  /* Carte contenant un champ en cours de saisie : elle ne bouge pas sous le doigt/curseur */
  .card:has(input:focus, select:focus, textarea:focus){ transform:none; }
  .card:has(input:focus, select:focus, textarea:focus)::after{ width:0; }
  .timeslot-card{ border-left:4px solid var(--gold); background:linear-gradient(100deg,#fff 55%,var(--cream) 130%); }
  .timeslot{ display:flex; justify-content:space-between; align-items:center; gap:10px; background:linear-gradient(100deg,var(--cream),#fff); border:1px solid var(--line); border-left:4px solid var(--gold); border-radius:13px; padding:12px 14px; margin-top:9px; transition:.22s var(--ease); }
  .timeslot:hover{ box-shadow:var(--shadow-sm); transform:translateX(3px); border-color:#DED2AC; }
  h2.section-title{ font-family:'Poppins',sans-serif; font-size:17px; color:var(--navy); margin:30px 0 14px; letter-spacing:.1px; display:flex; align-items:center; gap:9px; font-weight:700; }
  h2.section-title:first-child{ margin-top:0; }
  h2.section-title::before{ content:''; width:5px; height:17px; border-radius:3px; background:linear-gradient(180deg,var(--gold),var(--gold-deep)); flex:0 0 auto; box-shadow:0 0 0 3px rgba(240,180,41,.14); }
  h2.section-title::after{ content:''; flex:1; height:1px; background:linear-gradient(90deg,var(--line),transparent); margin-left:4px; }
  .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .stat{ background:linear-gradient(165deg,#fff,var(--cream) 140%); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-sm); transition:.28s var(--ease); position:relative; overflow:hidden; }
  .stat::after{ content:''; position:absolute; top:-45%; right:-32%; width:120px; height:120px; border-radius:50%; background:radial-gradient(circle,rgba(240,180,41,.20),transparent 70%); pointer-events:none; }
  .stat .num{ font-size:27px; font-weight:800; font-family:'Poppins',sans-serif; position:relative; z-index:1;
    background:linear-gradient(120deg,var(--navy) 20%,var(--navy-glow) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .stat .label{ font-size:11px; color:var(--ink-soft); margin-top:5px; letter-spacing:.4px; position:relative; z-index:1; }
  .row{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
  .row + .row{ margin-top:7px; }
  .pill{ font-size:10.5px; padding:5px 12px; border-radius:20px; font-weight:700; letter-spacing:.2px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.03); display:inline-flex; align-items:center; gap:5px; }
  .pill::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.85; flex:0 0 auto; }
  .pill.paid{ background:var(--green-bg); color:var(--ink); }
  .pill.paid::before{ background:var(--green); opacity:1; }
  .pill.due{ background:var(--red-bg); color:var(--red); }
  .pill.group{ background:linear-gradient(120deg,var(--gold-light),#EFDBA8); color:#7A5A16; }
  .pill.group::before{ display:none; }
  .pill.home{ background:#E7EEF7; color:var(--navy); }
  .pill.home::before{ display:none; }
  .pill.active{ background:var(--green-bg); color:var(--ink); }
  .pill.active::before{ background:var(--green); opacity:1; }
  .pill.inactive{ background:var(--grey-bg); color:var(--ink-soft); }
  .pill.role{ background:#E7EEF7; color:var(--navy); }
  .pill.role::before{ display:none; }
  .pill.present{ background:var(--green-bg); color:var(--ink); }
  .pill.present::before{ background:var(--green); opacity:1; }
  .pill.absent{ background:var(--red-bg); color:var(--red); }
  .name{ font-weight:750; font-size:14.5px; letter-spacing:.1px; color:var(--navy); }
  .meta{ font-size:12px; color:var(--ink-soft); margin-top:3px; line-height:1.6; }
  form{ display:flex; flex-direction:column; gap:10px; }
  form label{ font-size:10.5px; color:var(--ink-soft); margin-bottom:-4px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; transition:color .25s var(--ease); }
  /* Seul le libellé du champ actif change de couleur (et non tous ceux du formulaire) */
  form label:has(+ :is(input,select,textarea):focus), form label:has(+ .field :is(input,select,textarea):focus){ color:var(--navy); }
  input,select,textarea{ font-size:14.5px; padding:12.5px 14px; border:1.5px solid var(--line); border-radius:var(--radius-sm); background:#fff; color:var(--ink); width:100%; font-family:inherit; transition:border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease); }
  input:hover,select:hover,textarea:hover{ border-color:#D8CFB8; }
  input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--navy); box-shadow:0 0 0 4px rgba(240,180,41,.16);
    background:linear-gradient(180deg,var(--card) 55%,var(--gold-light)); }
  /* Champ en erreur (validation en direct ou champ obligatoire vide à l'envoi) */
  input.error,select.error,textarea.error{ border-color:var(--red); background:var(--red-bg); animation:shakeError .35s var(--ease); }
  input.error:focus,select.error:focus,textarea.error:focus{ border-color:var(--red); }
  @keyframes shakeError{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-4px); } 75%{ transform:translateX(4px); } }
  /* ---- Validation en direct : coche verte dans le champ, message d'erreur sous le champ ---- */
  .field{ position:relative; }
  .input-check{ position:absolute; right:14px; top:50%; transform:translateY(-50%) scale(0); color:var(--green); font-weight:700; font-size:16px;
    opacity:0; transition:opacity .25s var(--ease), transform .25s var(--ease-spring); pointer-events:none; }
  .field select ~ .input-check{ right:34px; }
  .field .valid ~ .input-check{ opacity:1; transform:translateY(-50%) scale(1); }
  .field input.valid{ padding-right:36px; }
  .field-msg{ display:block; font-size:11.5px; font-weight:600; color:var(--red); margin-top:-4px; animation:fadeInUp .25s var(--ease); }
  .field-msg:empty{ display:none; }
  textarea{ min-height:80px; resize:vertical; }
  .btn{ background:linear-gradient(120deg,var(--royal),var(--royal-deep)); color:#fff; border:none; padding:12.5px 19px; border-radius:var(--radius-sm); font-size:14px; font-weight:700; cursor:pointer; margin-top:4px; text-decoration:none; display:inline-block; text-align:center; transition:transform .2s var(--ease-spring), box-shadow .2s var(--ease), filter .2s; box-shadow:0 10px 26px -8px rgba(24,87,196,.45); position:relative; overflow:hidden; letter-spacing:.1px; }
  .btn::after{ content:''; position:absolute; inset:0; background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.24) 50%,transparent 70%); transform:translateX(-120%); transition:transform .55s var(--ease); }
  .btn:hover{ transform:translateY(-2px); filter:brightness(1.06); box-shadow:var(--shadow-lg); }
  .btn:hover::after{ transform:translateX(120%); }
  .btn:active{ transform:translateY(1px) scale(.97); }
  /* Envoi en cours (lockSubmit / guardedClick) : bouton atténué + petit indicateur tournant,
     qui n'apparaît qu'après .15s pour ne pas clignoter sur les actions instantanées */
  .btn[aria-busy="true"], .btn.loading{ cursor:progress; opacity:.78; transform:none; filter:none; }
  .btn[aria-busy="true"]::before, .btn.loading::before{ content:''; display:inline-block; width:1em; height:1em; margin-right:8px; vertical-align:-.15em;
    border-radius:50%; border:2px solid currentColor; border-right-color:transparent; opacity:0;
    animation:spin .7s linear infinite, fadeIn .2s var(--ease) .15s forwards; }
  .btn.secondary{ background:var(--royal-light); color:var(--royal); border:1.5px solid transparent; box-shadow:none; }
  .btn.secondary:hover{ background:var(--cream); box-shadow:var(--shadow-sm); }
  .btn.small{ padding:7.5px 14px; font-size:12px; margin-top:0; border-radius:18px; }
  /* Téléphone : zone tactile confortable pour les petits boutons (liste, actions) */
  @media (max-width:480px){
    .btn.small{ min-height:40px; padding:10px 16px; display:inline-flex; align-items:center; justify-content:center; }
    .quicknav-btn{ min-width:44px; min-height:44px; }
    nav button{ min-height:40px; }
  }
  .btn.danger{ background:#fff; color:var(--red); border:1.5px solid var(--red-bg); box-shadow:none; }
  .btn.danger:hover{ background:var(--red-bg); }
  .btn.gold{ background:linear-gradient(120deg,var(--gold),var(--gold-deep)); color:var(--navy-dark); box-shadow:var(--glow-gold); }
  .btn.royal{ background:linear-gradient(120deg,var(--royal),var(--royal-deep)); color:#fff; box-shadow:0 10px 22px -6px rgba(46,79,217,.45); }
  .empty{ text-align:center; color:var(--ink-soft); font-size:13px; padding:40px 20px; animation:cardEnter .4s var(--ease) backwards; }
  .empty .eicon{ font-size:42px; display:block; margin-bottom:14px; opacity:.75; filter:drop-shadow(0 4px 12px var(--gold-light));
    animation:cardEnter .4s var(--ease-spring) .08s backwards; }
  .empty .etitle{ font-family:'Poppins',sans-serif; font-size:15px; font-weight:600; color:var(--navy); margin-bottom:6px; display:block; }
  .empty .emsg{ display:block; font-size:12.5px; line-height:1.6; max-width:280px; margin:0 auto; }
  .empty .eaction{ margin-top:14px; }
  /* ---- Écran de chargement initial (remplace le texte "Chargement…" brut) ---- */
  .boot-wrap{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
    background:radial-gradient(circle at 30% 20%, var(--navy-glow) 0%, transparent 55%), linear-gradient(128deg,var(--navy) 0%, var(--navy-soft) 58%, var(--navy-glow) 120%); }
  .boot-brand{ font-family:'Poppins',sans-serif; font-size:24px; font-weight:700; letter-spacing:.5px;
    background:linear-gradient(95deg,#fff 15%,var(--gold-light) 90%); -webkit-background-clip:text; background-clip:text; color:transparent; animation:fadeInUp .6s var(--ease); }
  .boot-skel{ width:min(320px,80vw); display:flex; flex-direction:column; gap:10px; animation:fadeInUp .6s var(--ease) .1s backwards; }
  .boot-skel .sk-line{ height:13px; border-radius:8px; background:linear-gradient(90deg, rgba(255,255,255,.06) 25%, rgba(247,232,196,.22) 50%, rgba(255,255,255,.06) 75%); background-size:200% 100%; animation:shimmer 1.5s ease-in-out infinite; }
  .boot-skel .sk-line.w60{ width:60%; } .boot-skel .sk-line.w80{ width:80%; } .boot-skel .sk-line.w40{ width:40%; }
  .boot-dot{ width:9px; height:9px; border-radius:50%; background:var(--gold); animation:pulseDot 1.3s ease-in-out infinite; }
  /* ---- Mini-graphiques CSS pour le tableau de bord (pas de librairie, léger) ---- */
  .mbar-row{ display:flex; align-items:center; gap:10px; padding:9px 0; }
  .mbar-row .mbar-label{ flex:0 0 auto; width:104px; font-size:12.5px; color:var(--ink); font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:6px; }
  .mbar-row .mbar-track{ flex:1; height:10px; border-radius:6px; background:var(--line-soft); overflow:hidden; position:relative; }
  .mbar-row .mbar-fill{ height:100%; border-radius:6px; background:linear-gradient(90deg,var(--gold-deep),var(--gold)); width:0; animation:mbarGrow 1s var(--ease) forwards; box-shadow:0 0 0 1px rgba(240,180,41,.15) inset; }
  .mbar-row .mbar-val{ flex:0 0 auto; font-size:12.5px; font-weight:800; color:var(--navy); min-width:52px; text-align:right; }
  @keyframes mbarGrow{ from{ width:0; } }
  .donut-wrap{ display:flex; align-items:center; gap:18px; }
  .donut{ width:78px; height:78px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center; position:relative;
    background:conic-gradient(var(--gold) calc(var(--pct,0) * 1%), var(--line-soft) 0); }
  .donut::before{ content:''; position:absolute; inset:9px; border-radius:50%; background:var(--card); }
  .donut b{ position:relative; z-index:1; font-family:'Poppins',sans-serif; font-size:16px; color:var(--navy); }
  .donut-legend{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; }
  .donut-legend b{ color:var(--navy); }
  .fab-add{ display:flex; justify-content:flex-end; margin-bottom:13px; gap:8px; }
  .actions{ display:flex; gap:8px; margin-top:9px; flex-wrap:wrap; }
  .toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(14px) scale(.96); background:linear-gradient(120deg,var(--navy-dark),var(--navy)); color:#fff; padding:12.5px 23px; border-radius:26px; font-size:13px; font-weight:600; opacity:0; pointer-events:none; transition:opacity .32s var(--ease), transform .32s var(--ease-spring); z-index:70; box-shadow:var(--shadow-lg); border:1px solid rgba(255,255,255,.12);
    max-width:90vw; width:max-content; line-height:1.45; }
  /* Variantes : icône à gauche, couleurs de la charte uniquement */
  .toast.success, .toast.error, .toast.warn, .toast.info{ padding-left:46px; }
  .toast.success::before, .toast.error::before, .toast.warn::before, .toast.info::before{
    position:absolute; left:18px; top:50%; transform:translateY(-50%); font-size:15px; font-weight:800; line-height:1; }
  .toast.success::before{ content:'✓'; color:var(--gold); }
  .toast.error::before{ content:'✕'; color:var(--red); }
  .toast.warn::before{ content:'!'; color:var(--gold); width:18px; height:18px; border-radius:50%; border:2px solid var(--gold);
    display:flex; align-items:center; justify-content:center; font-size:11px; }
  .toast.info::before{ content:'i'; color:var(--royal-light); width:18px; height:18px; border-radius:50%; border:2px solid var(--royal-light);
    display:flex; align-items:center; justify-content:center; font-size:11px; font-style:italic; }
  .toast.error{ border-color:var(--red); }
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
  .banner{ background:linear-gradient(120deg,var(--gold-light),#FBF2DD); color:#7A5A16; font-size:12.5px; padding:12px 16px; border-radius:15px; margin-bottom:15px; border:1px solid #EBD9A6; box-shadow:0 6px 16px -6px rgba(240,180,41,.28); }
  .filterbar{ margin-bottom:15px; }
  /* Photos d'actualité : s'adaptent à la largeur de l'écran, sans déformation */
  .news-img{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; object-position:center; border-radius:var(--radius-sm); margin-bottom:10px; background:var(--line-soft); }
  .news-img-preview{ max-height:200px; }
  .news-img-full{ display:block; width:auto; max-width:100%; height:auto; max-height:70vh; margin:0 auto 12px; object-fit:contain; border-radius:var(--radius-sm); background:var(--line-soft); }
  @supports (height:1dvh){ .news-img-full{ max-height:70dvh; } }
  @media (min-width:720px){ .news-img{ aspect-ratio:21/9; max-height:300px; } }
  /* Sous-onglets de la présence (appel / historique / statistiques) */
  .att-subtabs{ display:flex; gap:8px; margin-bottom:16px; border-bottom:1px solid var(--line-soft); padding-bottom:8px; overflow-x:auto; }
  .att-subtab{ background:none; border:none; color:var(--ink-soft); font-size:13px; font-weight:600; padding:8px 14px; border-radius:20px; cursor:pointer; transition:.2s var(--ease); white-space:nowrap; }
  .att-subtab:hover{ background:var(--cream); color:var(--navy); }
  .att-subtab:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
  .att-subtab.active{ background:var(--gold); color:var(--navy-dark); font-weight:700; }
  .rank{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:linear-gradient(135deg,var(--gold-light),#EFD9A0); color:#7A5A16; font-size:11px; font-weight:800; margin-right:9px; flex:0 0 auto; box-shadow:0 3px 8px -2px rgba(240,180,41,.5); }
  .att-row{ display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--line-soft); }
  .att-row:last-child{ border-bottom:none; }
  .toggle{ display:flex; gap:6px; }
  .toggle button{ border:1.5px solid var(--line); background:#fff; font-size:11px; font-weight:700; padding:6.5px 14px; border-radius:16px; cursor:pointer; transition:.2s var(--ease); }
  .toggle button:hover{ transform:translateY(-1px); }
  .toggle button.on-present{ background:var(--green-bg); color:var(--green); border-color:var(--green-bg); }
  .toggle button.on-absent{ background:var(--red-bg); color:var(--red); border-color:var(--red-bg); }
  .grade-input{ width:72px; text-align:center; }
  .badge-card{ position:relative; overflow:hidden; background:linear-gradient(155deg,var(--navy) 0%,var(--navy-dark) 80%); color:#fff; border-radius:24px; padding:30px 22px; text-align:center; box-shadow:var(--shadow-lg); border:1px solid rgba(247,232,196,.16); }
  .badge-card::before{ content:''; position:absolute; top:-60%; left:-20%; width:160%; height:160%; background:conic-gradient(from 200deg, rgba(240,180,41,.22), transparent 30%, transparent 70%, rgba(240,180,41,.12)); pointer-events:none; animation:spin 16s linear infinite; }
  .badge-card .bname{ font-family:'Poppins',sans-serif; font-size:20px; font-weight:700; margin-top:10px; position:relative; z-index:1; letter-spacing:.2px; }
  .badge-card .blevel{ font-size:13px; color:var(--gold-light); margin-top:4px; position:relative; z-index:1; }
  .badge-card .bcenter{ font-size:11.5px; color:#CBD8E4; margin-top:12px; position:relative; z-index:1; }
  .badge-card .bid{ font-size:10px; color:#8DA3B8; margin-top:18px; letter-spacing:1.8px; position:relative; z-index:1; }
  .contact-item{ display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--line-soft); flex-wrap:wrap; gap:6px; }
  .contact-item:last-child{ border-bottom:none; }

  /* ---- Drapeau du Cameroun flottant ---- */
  .cm-flag{ position:absolute; top:10px; right:14px; z-index:2; width:32px; height:21px; border-radius:3px; overflow:hidden; box-shadow:0 4px 10px rgba(0,0,0,.35); animation:flagFloat 3.2s ease-in-out infinite; }
  .cm-flag svg{ display:block; width:100%; height:100%; }
  .cm-flag.inline{ position:static; display:inline-block; vertical-align:middle; margin-left:8px; animation:flagFloat 3.2s ease-in-out infinite; }
  @keyframes flagFloat{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-4px) rotate(-2deg); } }

  /* ---- Menu déroulant flottant (bas-droite, toutes les pages) ---- */
  .fmenu{ position:fixed; right:16px; bottom:20px; z-index:60; display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
  .fmenu-list{ display:none; flex-direction:column; gap:3px; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:8px; box-shadow:var(--shadow-lg); min-width:200px; animation:fadeInUp .22s var(--ease); }
  .fmenu-list.open{ display:flex; }
  .fmenu-list button, .fmenu-list a{ background:none; border:none; text-align:left; font-size:13px; font-weight:700; color:var(--navy); padding:10px 11px; border-radius:11px; cursor:pointer; text-decoration:none; display:flex; align-items:center; gap:9px; font-family:inherit; }
  .fmenu-list button:hover, .fmenu-list a:hover{ background:var(--cream); }
  .fmenu-toggle{ width:52px; height:52px; border-radius:50%; background:linear-gradient(120deg,var(--gold),var(--gold-deep)); border:none; box-shadow:var(--glow-gold); color:var(--navy-dark); font-size:22px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform .25s var(--ease-spring); }
  .fmenu-toggle:hover{ transform:scale(1.07); }
  .fmenu-toggle.open{ transform:rotate(45deg); }
  @media print{ .fmenu{ display:none !important; } }
  /* ---- Flèches haut/bas des longues pages : au-dessus du menu flottant, centrées sur lui ---- */
  .scroll-nav{ position:fixed; right:20px; bottom:90px; z-index:55; display:flex; flex-direction:column; gap:8px;
    pointer-events:none; opacity:0; transform:translateY(10px); transition:opacity .3s var(--ease), transform .3s var(--ease); }
  .scroll-nav.visible{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .scroll-nav-btn{ width:44px; height:44px; border-radius:50%; background:var(--card); border:1px solid var(--line); color:var(--navy);
    font-size:20px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md);
    transition:transform .2s var(--ease-spring), box-shadow .2s var(--ease), background .2s var(--ease), opacity .2s var(--ease); }
  @media (hover:hover){ .scroll-nav-btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); background:var(--cream); } }
  .scroll-nav-btn:active{ transform:scale(.94); }
  .scroll-nav-btn:disabled{ opacity:0; pointer-events:none; }
  /* Masquées quand un menu ou une fenêtre est ouvert (elles ne doivent jamais passer devant) */
  body:has(.fmenu-list.open) .scroll-nav, body:has(.side-drawer.open) .scroll-nav, body:has(.tr-overlay) .scroll-nav{ opacity:0; pointer-events:none; }
  @media print{ .scroll-nav{ display:none !important; } }

  /* ---- Menu latéral (déroulant de la gauche vers la droite) ---- */
  .hamburger-btn{ background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16); color:#fff; width:44px; height:44px; border-radius:12px; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex:0 0 auto; transition:.2s var(--ease); }
  .hamburger-btn:hover{ background:rgba(255,255,255,.18); transform:translateY(-1px); }
  .quicknav{ display:flex; align-items:center; gap:6px; flex:0 0 auto; margin-left:auto; padding-left:6px; }
  .quicknav-btn{ position:relative; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16); color:#fff; width:44px; height:44px; border-radius:12px; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:transform .2s var(--ease-spring), background .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
  @media (hover:hover){ .quicknav-btn:hover{ background:rgba(255,255,255,.18); transform:translateY(-2px); } }
  .quicknav-btn:active{ transform:scale(.94); }
  .quicknav-btn.active{ background:var(--gold); border-color:var(--gold); box-shadow:var(--glow-gold); }
  .quicknav-badge{ position:absolute; top:-4px; right:-4px; background:var(--red); color:#fff; font-size:9.5px; font-weight:800; min-width:16px; height:16px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 3px; border:1.5px solid var(--navy);
    animation:subtlePulse 2s var(--ease) infinite; }
  /* Nombre qui augmente : petit rebond marqué, puis retour à la pulsation douce */
  .quicknav-badge.anim-bump{ animation:countBump .4s var(--ease-spring); }
  .tr-overlay{ position:fixed; inset:0; background:rgba(11,31,62,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); z-index:200; display:flex; align-items:center; justify-content:center; padding:20px;
    animation:fadeIn .25s var(--ease); }
  .tr-modal{ background:var(--card); border-radius:var(--radius); padding:22px; width:100%; max-width:400px; max-height:85vh; overflow-y:auto; box-shadow:var(--shadow-lg);
    animation:modalEnter .3s var(--ease-spring) backwards; overscroll-behavior:contain; }
  .tr-modal:focus{ outline:none; }
  /* Fenêtre déjà ouverte, simplement redessinée : pas de nouvelle entrée */
  .tr-overlay.settled, .tr-overlay.settled .tr-modal{ animation:none; }
  /* Fermeture animée (fenêtre de confirmation) */
  .tr-overlay.closing{ animation:fadeIn .2s var(--ease) reverse forwards; }
  .tr-overlay.closing .tr-modal{ animation:modalExit .2s var(--ease) forwards; }
  .side-drawer-overlay{ position:fixed; inset:0; background:rgba(10,20,36,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); z-index:7; opacity:0; pointer-events:none; transition:opacity .3s var(--ease); }
  .side-drawer-overlay.open{ opacity:1; pointer-events:auto; }
  .side-drawer{ position:fixed; top:var(--header-height, 126px); left:0; bottom:0; width:80%; max-width:310px; z-index:8;
    background:linear-gradient(165deg, var(--navy-soft) 0%, var(--navy-dark) 75%);
    transform:translateX(-100%); transition:transform .32s cubic-bezier(.22,1,.36,1); box-shadow:10px 0 40px rgba(0,0,0,.35); display:flex; flex-direction:column;
    border-right:1px solid rgba(240,180,41,.18); }
  .side-drawer.open{ transform:translateX(0); }
  .side-drawer-head{ padding:26px 20px 20px; position:relative; overflow:hidden; }
  .side-drawer-head::before{ content:''; position:absolute; top:-40%; right:-30%; width:180px; height:180px; border-radius:50%;
    background:radial-gradient(circle, rgba(240,180,41,.25), transparent 70%); pointer-events:none; }
  .side-drawer-avatar{ width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg,var(--gold),var(--gold-deep)); color:var(--navy-dark);
    display:flex; align-items:center; justify-content:center; font-family:'Poppins',sans-serif; font-weight:700; font-size:19px; margin-bottom:12px; box-shadow:0 4px 14px rgba(240,180,41,.35); position:relative; }
  .side-drawer-head b{ color:#fff; font-family:'Poppins',sans-serif; font-size:17px; display:block; letter-spacing:.3px; }
  .side-drawer-head div.sub{ color:#B9C6D6; font-size:12.5px; margin-top:3px; position:relative; }
  .side-drawer-close{ position:absolute; top:16px; right:14px; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.08); border:none; color:#CFDCE8; font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
  .side-drawer-close:hover{ background:rgba(255,255,255,.16); }
  .side-drawer-divider{ height:1px; background:linear-gradient(90deg,transparent,rgba(240,180,41,.25),transparent); margin:2px 18px 8px; }
  .side-drawer-list{ flex:1; overflow-y:auto; padding:6px 12px 14px; }
  .side-drawer-list button{ width:100%; text-align:left; background:none; border:none; color:#CFDCE8; font-size:14px; font-weight:600; padding:11px 12px; border-radius:13px; cursor:pointer; display:flex; align-items:center; gap:12px; font-family:inherit; margin-bottom:3px; transition:.18s var(--ease); }
  .side-drawer-list button .dicon{ width:30px; height:30px; border-radius:9px; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; font-size:15px; flex:0 0 auto; transition:.18s var(--ease); }
  .side-drawer-list button.active{ background:linear-gradient(120deg,rgba(240,180,41,.16),rgba(240,180,41,.06)); color:#fff; box-shadow:inset 3px 0 0 var(--gold); }
  .side-drawer-list button.active .dicon{ background:linear-gradient(135deg,var(--gold),var(--gold-deep)); color:var(--navy-dark); }
  .side-drawer-list button:not(.active):hover{ background:rgba(255,255,255,.06); transform:translateX(2px); }
  /* Entrée en cascade des éléments à l'ouverture du menu (pas quand le menu déjà ouvert est
     simplement redessiné : classe .settled). 'backwards' pour garder l'effet de survol. */
  .side-drawer.open:not(.settled) .side-drawer-list button{ animation:listItemEnter .3s var(--ease) backwards; }
  .side-drawer.open:not(.settled) .side-drawer-list button:nth-child(1){ animation-delay:60ms; }
  .side-drawer.open:not(.settled) .side-drawer-list button:nth-child(2){ animation-delay:90ms; }
  .side-drawer.open:not(.settled) .side-drawer-list button:nth-child(3){ animation-delay:120ms; }
  .side-drawer.open:not(.settled) .side-drawer-list button:nth-child(4){ animation-delay:150ms; }
  .side-drawer.open:not(.settled) .side-drawer-list button:nth-child(n+5){ animation-delay:180ms; }
  .side-drawer-list button:not(.active):hover .dicon{ background:rgba(255,255,255,.12); }
  .side-drawer-logout{ margin:6px 12px 16px; }
  .side-drawer-logout button{ width:100%; background:rgba(196,60,50,.12); border:1px solid rgba(196,60,50,.25); color:#F0B4AC; font-size:13.5px; font-weight:700; padding:11px 12px; border-radius:13px; cursor:pointer; display:flex; align-items:center; gap:10px; font-family:inherit; }
  .side-drawer-logout button:hover{ background:rgba(196,60,50,.2); }
  @media print{ .side-drawer, .side-drawer-overlay, .hamburger-btn{ display:none !important; } }

  /* ---- Responsive : petits écrans (mobiles) ---- */
  html, body{ overflow-x:hidden; max-width:100%; }
  img, svg, table{ max-width:100%; }
  @media (max-width:480px){
    main{ padding:14px 10px; padding-bottom:70px; }
    header{ padding:16px 12px 10px; }
    /* Étape 44 : barres fixes plus compactes sur téléphone */
    .app-header{ padding:12px 12px 8px; }
    .app-nav{ padding:6px 6px 8px; }
    .app-main{ padding-top:calc(var(--header-height, 130px) + 12px); }
    header .brand b{ font-size:18px; }
    .role-grid{ grid-template-columns:1fr; }
    .grid2{ gap:9px; }
    .login-wrap{ padding:16px 10px; }
    .login-box{ max-width:100%; }
    .cm-flag{ width:26px; height:17px; top:8px; right:10px; }
    .fmenu{ right:10px; bottom:14px; }
    .scroll-nav{ right:13px; bottom:80px; }
    .scroll-nav-btn{ width:40px; height:40px; font-size:18px; }
    .fmenu-toggle{ width:46px; height:46px; font-size:19px; }
    .fmenu-list{ min-width:170px; }
    .card{ padding:14px; }
    .name{ font-size:14px; }
    .actions{ flex-wrap:wrap; }
    .row{ flex-wrap:wrap; gap:8px; }
  }
  @media (max-width:360px){
    header .brand span{ font-size:10px; padding:3.5px 8px; }
    .btn{ font-size:13px; }
  }

  .login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px 16px; position:relative; overflow:hidden;
    background:
      radial-gradient(520px 340px at 8% -6%, rgba(240,180,41,.14), transparent 62%),
      linear-gradient(170deg,var(--navy-dark),var(--navy) 55%,var(--navy-soft)); }
  .login-wrap::before, .login-wrap::after{ content:''; position:absolute; border-radius:50%; filter:blur(64px); pointer-events:none; animation:floatBlob 11s ease-in-out infinite; }
  .login-wrap::before{ width:360px; height:360px; background:radial-gradient(circle,rgba(240,180,41,.32),transparent 70%); top:-9%; right:-11%; }
  .login-wrap::after{ width:320px; height:320px; background:radial-gradient(circle,rgba(24,87,196,.55),transparent 70%); bottom:-11%; left:-9%; animation-delay:2.2s; }
  .login-box{ width:100%; max-width:400px; animation:fadeInUp .55s var(--ease); position:relative; z-index:1; }
  .login-title{ text-align:center; color:#fff; margin-bottom:5px; }
  .app-logo{ display:block; width:72px; height:72px; margin:0 auto 10px; border-radius:50%; box-shadow:0 8px 20px rgba(0,0,0,.35); animation:fadeInUp .5s var(--ease); }
  .app-logo.boot{ width:84px; height:84px; margin-bottom:14px; }
  .login-title b{ font-family:'Poppins',sans-serif; font-size:30px; letter-spacing:.5px; background:linear-gradient(95deg,#fff 15%,var(--gold-light) 90%); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .login-sub{ text-align:center; color:#AFC1D3; font-size:13px; margin-bottom:29px; letter-spacing:.2px; }
  .role-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .role-tile{ background:rgba(255,255,255,.06); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.14); border-radius:19px; padding:23px 8px; text-align:center; cursor:pointer; transition:transform .24s var(--ease-spring), background .24s var(--ease), box-shadow .24s var(--ease), border-color .24s; }
  .role-tile:hover{ background:rgba(255,255,255,.13); transform:translateY(-4px); box-shadow:0 16px 34px -10px rgba(0,0,0,.4); border-color:rgba(247,232,196,.38); }
  .role-tile:active{ transform:translateY(-1px) scale(.98); }
  .role-tile .emoji{ font-size:28px; display:block; margin-bottom:10px; filter:drop-shadow(0 3px 8px rgba(0,0,0,.4)); }
  .role-tile .role-photo{ width:56px; height:56px; border-radius:50%; object-fit:cover; display:block; margin:0 auto 10px; border:2px solid rgba(240,180,41,.7); box-shadow:0 4px 12px rgba(0,0,0,.35); }
  .role-tile .lbl{ font-size:11.5px; font-weight:700; color:#fff; letter-spacing:.2px; }
  .backlink{ font-size:12px; color:var(--gold-light); text-align:center; display:block; margin-top:19px; cursor:pointer; opacity:.85; transition:opacity .2s, transform .2s; }
  .backlink:hover{ opacity:1; transform:translateY(-1px); }
  .login-box .card{ background:rgba(255,255,255,.985); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.55); box-shadow:0 32px 64px -16px rgba(0,0,0,.48); }

  @media print{
    body *{ visibility:hidden; }
    #print-area, #print-area *{ visibility:visible; -webkit-print-color-adjust:exact; print-color-adjust:exact; color-adjust:exact; }
    #print-area{ position:absolute; top:0; left:0; width:100%; }
  }

  /* ============================================
     MODULE ACTUALITÉS — CHARTE ÉDITORIALE (étape 1)
     Classes préfixées .ed-* et variables --ed-* : rien ne s'applique en dehors du module.
     ============================================ */
  .ed-news-wrapper{
    background:var(--ed-paper); min-height:100vh; padding:0 0 40px;
    /* Le bloc annule les marges de <main> pour occuper toute la largeur, sans passer sous
       l'en-tête fixe (le haut reste au niveau du contenu : 16 px ordinateur, 12 px téléphone). */
    margin:-16px -16px -64px;
    font-family:'Inter', sans-serif; color:var(--ed-ink);
  }
  @media (max-width:480px){ .ed-news-wrapper{ margin:-12px -10px -70px; } }

  /* Masthead éditorial */
  .ed-masthead{ background:var(--ed-ink); color:var(--ed-paper); padding:28px 24px 20px; position:relative; overflow:hidden; }
  .ed-masthead::before{
    content:''; position:absolute; top:-40%; right:-20%; width:300px; height:300px;
    background:radial-gradient(circle, rgba(232,90,79,.28), transparent 70%); pointer-events:none;
  }
  .ed-masthead-title{ font-family:'Fraunces', Georgia, serif; font-weight:900; font-size:28px; letter-spacing:-0.5px; line-height:1; position:relative; z-index:1; }
  .ed-masthead-sub{ font-family:'Fraunces', Georgia, serif; font-weight:400; font-size:13px; letter-spacing:2px; text-transform:uppercase; color:var(--ed-coral); margin-top:8px; position:relative; z-index:1; }
  .ed-masthead-edition{ font-family:'Fraunces', Georgia, serif; font-weight:400; font-size:11px; letter-spacing:2px; text-transform:uppercase; opacity:.6; margin-top:8px; position:relative; z-index:1; }

  /* Rubriques */
  .ed-rubrics{ display:flex; gap:6px; overflow-x:auto; padding:16px 20px; scrollbar-width:none; background:var(--ed-paper); border-bottom:1px solid rgba(14,27,44,.08); }
  .ed-rubrics::-webkit-scrollbar{ display:none; }
  .ed-rubric{
    flex:0 0 auto; background:transparent; border:1.5px solid rgba(14,27,44,.15); color:var(--ed-ink);
    font-family:'Fraunces', Georgia, serif; font-weight:600; font-size:13px; padding:8px 16px; border-radius:100px;
    cursor:pointer; transition:all .25s cubic-bezier(.16,1,.3,1); white-space:nowrap;
  }
  .ed-rubric:hover{ border-color:var(--ed-coral); color:var(--ed-coral); }
  .ed-rubric.active{ background:var(--ed-ink); color:var(--ed-paper); border-color:var(--ed-ink); }
  .ed-rubric:focus-visible, .ed-cta:focus-visible, .ed-back:focus-visible, .ed-article:focus-visible{ outline:3px solid var(--ed-coral); outline-offset:3px; }

  /* Carte article */
  .ed-article{
    background:#fff; border-radius:20px; overflow:hidden; margin:16px 20px; box-shadow:var(--ed-shadow);
    transition:all .35s cubic-bezier(.16,1,.3,1); cursor:pointer; position:relative;
  }
  .ed-grid .ed-article{ margin:0; }   /* dans la grille, l'espacement vient du gap */
  .ed-article:hover{ transform:translateY(-4px); box-shadow:var(--ed-shadow-hover); }
  .ed-article.ed-hero .ed-image{ height:240px; }
  .ed-article.ed-hero .ed-title{ font-size:28px; line-height:1.15; }

  /* Image — traitement de la charte : saturation +8 %, contraste +5 %, coins 20 px (via la carte) */
  .ed-image{
    width:100%; height:180px; object-fit:cover; display:block;
    filter:saturate(1.08) contrast(1.05);
    transition:transform .5s cubic-bezier(.16,1,.3,1);
  }
  .ed-article:hover .ed-image{ transform:scale(1.04); }

  /* Tags rubrique */
  .ed-tag{ display:inline-block; font-family:'Fraunces', Georgia, serif; font-weight:700; font-size:10px; letter-spacing:2px; text-transform:uppercase; padding:4px 10px; border-radius:4px; margin-bottom:10px; }
  .ed-tag--coral{ background:var(--ed-coral); color:#fff; }
  .ed-tag--sage{ background:var(--ed-sage); color:#fff; }
  .ed-tag--mustard{ background:var(--ed-mustard); color:var(--ed-ink); }
  .ed-tag--plum{ background:var(--ed-plum); color:#fff; }
  .ed-tag--ink{ background:var(--ed-ink); color:var(--ed-paper); }

  /* Contenu carte */
  .ed-content{ padding:22px 22px 24px; }
  .ed-title{ font-family:'Fraunces', Georgia, serif; font-weight:900; font-size:22px; line-height:1.15; letter-spacing:-0.4px; color:var(--ed-ink); margin:0 0 12px; }
  .ed-lead{ font-family:'Instrument Serif', Georgia, serif; font-style:italic; font-size:17px; line-height:1.5; color:rgba(14,27,44,.72); margin:0 0 14px; }
  .ed-meta{ font-family:'Fraunces', Georgia, serif; font-weight:600; font-size:10.5px; letter-spacing:1.8px; text-transform:uppercase; color:rgba(14,27,44,.5); }
  .ed-meta strong{ color:var(--ed-coral); font-weight:700; }

  /* Lecture pleine page */
  .ed-reader{ background:#fff; max-width:680px; margin:0 auto; padding:32px 24px 48px; }
  .ed-reader .ed-title{ font-size:34px; line-height:1.1; margin-bottom:18px; }
  .ed-reader .ed-lead{ font-size:21px; margin-bottom:22px; }
  .ed-reader .ed-image{ height:auto; max-height:400px; border-radius:20px; margin:20px 0; }
  .ed-body{ font-family:'Inter', sans-serif; font-size:16.5px; line-height:1.8; color:var(--ed-ink); margin-top:20px; }
  .ed-body p{ margin:0 0 18px; }

  /* Citation */
  .ed-quote{ font-family:'Instrument Serif', Georgia, serif; font-style:italic; font-size:22px; line-height:1.4; color:var(--ed-ink); padding:8px 0 8px 20px; border-left:4px solid var(--ed-coral); margin:24px 0; }

  /* Encadré « En bref » */
  .ed-highlight{ background:linear-gradient(135deg, rgba(224,164,88,.12), rgba(224,164,88,.04)); border-left:4px solid var(--ed-mustard); border-radius:12px; padding:18px 20px; margin:24px 0; }
  .ed-highlight-title{ font-family:'Fraunces', Georgia, serif; font-weight:900; font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--ed-ink); margin-bottom:10px; }
  .ed-highlight ul{ margin:0; padding-left:18px; font-size:15px; line-height:1.7; }

  /* CTA éditorial */
  .ed-cta{
    display:inline-block; background:var(--ed-coral); color:#fff; font-family:'Fraunces', Georgia, serif; font-weight:700; font-size:15px;
    padding:14px 24px; border-radius:100px; text-decoration:none; margin-top:20px; transition:all .25s cubic-bezier(.16,1,.3,1); border:none; cursor:pointer;
  }
  .ed-cta:hover{ background:var(--ed-ink); transform:translateY(-2px); box-shadow:0 12px 24px -8px rgba(232,90,79,.4); }

  /* Légende photo */
  .ed-caption{ font-family:'Inter', sans-serif; font-style:italic; font-size:12px; color:rgba(14,27,44,.55); text-align:center; margin-top:8px; }

  /* Grille magazine */
  .ed-grid{ display:grid; grid-template-columns:1fr; gap:16px; padding:16px 20px; }
  @media (min-width:640px){
    .ed-grid{ grid-template-columns:1fr 1fr; }
    .ed-grid > *:first-child{ grid-column:1 / -1; }
  }

  /* Bouton retour lecture */
  .ed-back{ display:inline-flex; align-items:center; gap:8px; font-family:'Fraunces', Georgia, serif; font-weight:700; font-size:13px; color:var(--ed-coral); background:none; border:none; cursor:pointer; padding:8px 0; margin-bottom:16px; transition:all .2s; }
  .ed-back:hover{ color:var(--ed-ink); }
  /* ============ fin charte éditoriale Actualités ============ */

  /* ---- Demande d'emploi : bandeau d'accueil (charte générale : bleu marine + or) ---- */
  .job-hero{ position:relative; overflow:hidden; border-radius:var(--radius-lg); padding:20px 18px 18px; margin-bottom:14px;
    background:linear-gradient(135deg,var(--navy) 0%,var(--navy-soft) 55%,var(--royal) 130%); color:#fff; box-shadow:var(--glow-navy); }
  .job-hero::after{ content:''; position:absolute; right:-40px; top:-50px; width:180px; height:180px; border-radius:50%;
    background:radial-gradient(circle, rgba(240,180,41,.35), transparent 70%); pointer-events:none; }
  .job-hero-title{ font-family:'Poppins',sans-serif; font-weight:800; font-size:20px; line-height:1.2; position:relative; z-index:1; }
  .job-hero-sub{ font-size:13px; opacity:.85; margin-top:6px; line-height:1.5; position:relative; z-index:1; }
  .job-hero-stats{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; position:relative; z-index:1; }
  .job-chip{ flex:1 1 0; min-width:0; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); border-radius:14px; padding:8px 10px; }
  .job-chip b{ display:block; font-family:'Poppins',sans-serif; font-size:20px; color:var(--gold); line-height:1.1; }
  .job-chip span{ font-size:11px; opacity:.85; }
  .job-hero-cta{ margin-top:14px; position:relative; z-index:1; }

  /* ---- Authentification (étape 2) : champ mot de passe + indicateur de force ---- */
  .pwd-strength{ animation:cardEnter .3s var(--ease); }
  .pwd-input-wrap{ position:relative; display:flex; align-items:center; }
  .pwd-input-wrap > input{ flex:1 1 auto; min-width:0; width:100% !important; max-width:none !important; margin:0; padding-right:48px !important; }
  .pwd-toggle{ position:absolute; z-index:2; right:10px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer;
    font-size:16px; color:var(--ink-soft); width:36px; height:36px; padding:0; border-radius:50%; transition:all .2s var(--ease);
    display:flex; align-items:center; justify-content:center; }
  .pwd-toggle:hover{ background:var(--cream); color:var(--navy); }
  .pwd-toggle:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
  .pwd-field{ display:flex; flex-direction:column; gap:4px; }
  .pwd-bars{ display:flex; gap:4px; margin-bottom:8px; }
  .pwd-bars span{ flex:1; height:4px; border-radius:2px; background:var(--line-soft); transition:background .3s var(--ease); }
  .pwd-crit{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-soft); transition:color .25s var(--ease); }
  .pwd-crit i{ font-style:normal; display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%;
    background:var(--line-soft); font-size:10px; font-weight:800; transition:all .25s var(--ease); }
  .pwd-crit.ok{ color:var(--green); }
  .pwd-crit.ok i{ background:var(--green-bg); color:var(--green); }

  /* ---- Authentification (étape 3) : écran de connexion ---- */
  .login-card{ animation:cardEnter .35s var(--ease); }
  .login-card-title{ font-family:'Poppins',sans-serif; font-weight:700; font-size:20px; color:var(--navy); margin:0 0 12px; }
  .icon-input{ position:relative; }
  .icon-input-ico{ position:absolute; left:14px; top:50%; transform:translateY(-50%); font-size:16px; opacity:.6; pointer-events:none; z-index:2; line-height:1; }
  .icon-input input{ padding-left:44px !important; width:100%; }
  .login-sep{ display:flex; align-items:center; gap:12px; margin:20px 0; }
  .login-sep span{ flex:1; height:1px; background:var(--line-soft); }
  .login-sep em{ font-style:normal; font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:1px; }

  /* ═════════════ REFONTE v1 — en-tête compact et fond de la maquette ═════════════
     Une seule barre : ☰ · PENSÉE 237 / rôle · 📰 💬 🔔. Déconnexion dans le menu ☰,
     langue dans le menu ≡ (bas d'écran). Le sélecteur d'enfant d'un parent reste visible. */
  body{ background:#FFFFFF; }   /* fond de l'application : blanc */
  .app-header .top, .app-header .scope, .app-header > .cm-flag{ display:none !important; }
  .app-header{ padding:0 !important; background:linear-gradient(135deg,#0B1F3E,#12305c); }
  .app-header select{ margin:8px 12px !important; }
  .app-nav{ display:flex; align-items:center; gap:10px; padding:10px 12px 12px !important; background:linear-gradient(135deg,#0B1F3E,#12305c); }
  .nav-brand{ display:flex; flex-direction:column; justify-content:center; line-height:1.15; color:#fff; min-width:0; flex:0 1 auto; overflow:hidden; }
  .nav-brand b{ font-family:'Poppins',sans-serif; font-weight:700; font-size:16px; letter-spacing:.2px; white-space:nowrap; display:flex; align-items:center; }
  .nav-brand b .cm-flag.inline{ width:20px; height:13px; margin-left:6px; animation:none; }
  .nav-brand span{ font-size:11.5px; color:var(--gold); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #tabs-scroll{ flex:1 1 0; min-width:0; }
  .home-hero .stat .num{ font-size:24px; }
  @media (max-width:360px){ .nav-brand b{ font-size:14px; } .nav-brand b .cm-flag.inline{ display:none; } }

  /* ═════════════ Présentation de bienvenue (première connexion) ═════════════ */
  .tour-overlay{ position:fixed; inset:0; z-index:9000; background:rgba(7,21,39,.72); animation:cardEnter .3s var(--ease); }
  .tour-overlay.has-spot{ background:transparent; }
  .tour-spot{ position:fixed; border-radius:14px; box-shadow:0 0 0 9999px rgba(7,21,39,.72), 0 0 0 3px var(--gold), 0 0 24px 6px rgba(240,180,41,.55); pointer-events:none; transition:all .35s var(--ease); }
  .tour-card{ position:fixed; left:16px; right:16px; max-width:420px; margin:0 auto; background:#fff; border-radius:20px; padding:20px 18px 16px; box-shadow:0 24px 60px -12px rgba(0,0,0,.45); text-align:center; animation:cardEnter .35s var(--ease); }
  .tour-icon{ font-size:42px; line-height:1; margin-bottom:8px; }
  .tour-title{ font-family:'Poppins',sans-serif; font-weight:700; font-size:18px; color:var(--navy); margin-bottom:6px; }
  .tour-text{ font-size:14px; color:#475569; line-height:1.55; }
  .tour-dots{ display:flex; justify-content:center; gap:6px; margin:14px 0 12px; }
  .tour-dots span{ width:7px; height:7px; border-radius:4px; background:#E2E8F0; transition:all .25s var(--ease); }
  .tour-dots span.on{ width:20px; background:var(--gold); }
  .tour-actions{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
  @media (prefers-reduced-motion: reduce){ .tour-overlay, .tour-card, .tour-spot{ animation:none; transition:none; } }

  /* ═════════════ Formulaire enseignant : sections, niveaux en tuiles, cascade universitaire ═════════════ */
  .tform-sec{ display:flex; align-items:center; gap:10px; margin:18px 0 4px; font-family:'Poppins',sans-serif; font-weight:700; font-size:15px; color:var(--navy); }
  .tform-sec:first-of-type{ margin-top:4px; }
  .tform-num{ width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--gold),var(--gold-deep)); color:var(--navy-dark); font-size:13px; font-weight:800; box-shadow:0 4px 10px -4px rgba(198,144,13,.7); flex:0 0 auto; }
  .tform-levels{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:4px 0 6px; }
  .tform-level{ display:flex; align-items:center; gap:8px; padding:12px; border-radius:14px; border:1.5px solid var(--line); background:#fff; font-weight:600; font-size:13px; color:var(--navy); cursor:pointer; text-align:left; transition:all .2s var(--ease); }
  .tform-level span{ font-size:20px; }
  .tform-level:hover{ border-color:var(--gold); transform:translateY(-1px); }
  .tform-level.on{ border-color:var(--gold); background:linear-gradient(135deg,#FFFBF0,#FDF1D6); box-shadow:0 0 0 3px rgba(240,180,41,.18); }
  #reg-t-schools label.card:has(input:checked){ border-color:var(--gold); background:#FFFBF0; box-shadow:0 0 0 3px rgba(240,180,41,.15); }
  .univ-card{ background:#fff; border:1.5px solid var(--line); border-radius:18px; padding:14px; margin:8px 0; box-shadow:0 10px 24px -18px rgba(11,31,62,.35); animation:cardEnter .35s var(--ease); }
  .univ-head{ display:flex; align-items:center; gap:8px; }
  .univ-head-title{ flex:1; font-family:'Poppins',sans-serif; font-weight:700; color:var(--navy); font-size:14.5px; }
  .univ-count{ font-size:11.5px; font-weight:800; color:var(--gold-deep); background:var(--gold-light); padding:3px 9px; border-radius:20px; }
  .univ-del{ border:0; background:#FEF2F2; color:var(--red,#DC2626); width:30px; height:30px; border-radius:50%; cursor:pointer; }
  .univ-bar{ height:5px; border-radius:3px; background:#EEF2F7; margin:10px 0; overflow:hidden; }
  .univ-bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--gold),var(--gold-deep)); border-radius:3px; transition:width .4s var(--ease); }
  .univ-crumbs{ display:flex; flex-wrap:wrap; gap:4px; align-items:center; font-size:11.5px; margin-bottom:8px; }
  .univ-crumbs span{ background:var(--cream,#F8FAFC); border:1px solid var(--line); padding:3px 9px; border-radius:20px; color:var(--navy); font-weight:600; }
  .univ-crumbs b{ color:var(--gold-deep); }
  .univ-step{ display:flex; gap:10px; position:relative; padding-bottom:4px; animation:cardEnter .3s var(--ease); }
  .univ-step:not(:last-of-type)::before{ content:''; position:absolute; left:14px; top:32px; bottom:-4px; width:2px; background:var(--line); }
  .univ-step.done::before{ background:var(--gold); }
  .univ-dot{ width:30px; height:30px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:14px; background:#F1F5F9; border:2px solid var(--line); margin-top:22px; z-index:1; }
  .univ-step.done .univ-dot{ background:var(--emerald,#16A34A); border-color:var(--emerald,#16A34A); color:#fff; font-weight:800; }
  .univ-step.current .univ-dot{ background:var(--gold); border-color:var(--gold); box-shadow:0 0 0 4px rgba(240,180,41,.25); }
  .univ-field{ flex:1; min-width:0; }
  .univ-field label em{ font-style:normal; font-weight:500; color:#94A3B8; text-transform:none; letter-spacing:0; }
  .univ-step.current select, .univ-step.current input{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(240,180,41,.15); }
  .univ-next{ font-size:12px; color:#64748B; background:#F8FAFC; border:1px dashed var(--line); border-radius:12px; padding:9px 12px; margin-top:8px; }
  .univ-ok{ font-size:12.5px; font-weight:700; color:#14753A; background:#ECFDF3; border-radius:12px; padding:9px 12px; margin-top:8px; text-align:center; }
  @media (prefers-reduced-motion: reduce){ .univ-card, .univ-step{ animation:none; } .univ-bar i, .tform-level{ transition:none; } }

  /* ═════════════ Parcours élève : Primaire · Secondaire · BAC ÉTRANGERS ═════════════ */
  .path-grid{ display:flex; flex-direction:column; gap:12px; margin-top:6px; }
  .path-tile{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:18px; border-radius:19px; cursor:pointer;
    background:rgba(255,255,255,.06); backdrop-filter:blur(10px); border:1.5px solid rgba(255,255,255,.14); color:#fff; transition:.24s var(--ease-spring); animation:cardEnter .4s var(--ease) both; }
  .path-tile:nth-child(2){ animation-delay:.06s; } .path-tile:nth-child(3){ animation-delay:.12s; }
  .path-tile:hover, .path-tile:focus-visible{ transform:translateY(-2px); border-color:var(--gold); box-shadow:0 14px 30px -16px rgba(240,180,41,.6); }
  .path-tile:active{ transform:scale(.98); }
  .path-tile.gold{ background:linear-gradient(120deg,rgba(240,180,41,.18),rgba(240,180,41,.05)); border-color:rgba(240,180,41,.4); }
  .path-ico{ font-size:34px; line-height:1; }
  .path-txt{ flex:1; display:flex; flex-direction:column; gap:4px; }
  .path-txt b{ font-family:'Poppins',sans-serif; font-size:16.5px; }
  .path-tile.gold .path-txt b{ color:var(--gold); }
  .path-txt small{ font-size:12px; color:rgba(255,255,255,.72); line-height:1.45; }
  .path-go{ font-size:24px; color:rgba(255,255,255,.5); }
  .path-banner{ background:linear-gradient(120deg,var(--gold-light),#FBF2DD); color:#7A5A16; border:1px solid #EBD9A6; border-radius:14px; padding:12px 14px; font-size:13px; text-align:center; margin-bottom:12px; }
  .bac-progress{ background:var(--card,#fff); border-radius:16px; padding:12px 14px; margin-bottom:12px; box-shadow:0 10px 24px -18px rgba(0,0,0,.5); }
  .bac-bars{ display:flex; gap:4px; margin-bottom:8px; } .bac-bars i{ flex:1; height:5px; border-radius:3px; background:#E2E8F0; transition:background .3s var(--ease); } .bac-bars i.on{ background:linear-gradient(90deg,var(--gold),var(--gold-deep)); }
  .bac-step-lbl{ font-size:12px; color:#64748B; text-align:center; } .bac-step-lbl b{ color:var(--navy); }
  .bac-crumbs{ display:flex; flex-wrap:wrap; gap:4px; justify-content:center; margin-top:8px; font-size:11px; } .bac-crumbs span{ background:#F8FAFC; border:1px solid var(--line); border-radius:20px; padding:2px 8px; color:var(--navy); font-weight:600; } .bac-crumbs b{ color:var(--gold-deep); }
  .bac-card{ animation:cardEnter .35s var(--ease); }
  .bac-q{ font-family:'Poppins',sans-serif; font-weight:700; font-size:16px; color:var(--navy); margin-bottom:10px; }
  .bac-choices{ display:flex; flex-direction:column; gap:8px; max-height:52vh; overflow-y:auto; padding:2px; }
  .bac-choice{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:12px 14px; border-radius:14px; border:1.5px solid var(--line); background:#fff; cursor:pointer; transition:all .2s var(--ease); font-size:14px; color:var(--navy); }
  .bac-choice > span:first-child{ font-size:20px; } .bac-choice .t{ flex:1; display:flex; flex-direction:column; } .bac-choice .t small{ font-size:11.5px; color:#64748B; font-weight:500; } .bac-choice .go{ color:#CBD5E1; font-size:20px; }
  .bac-choice:hover, .bac-choice:focus-visible{ border-color:var(--gold); background:#FFFBF0; transform:translateX(2px); }
  .bac-empty{ background:#F8FAFC; border:1px dashed var(--line); border-radius:14px; padding:16px; font-size:13px; color:#64748B; text-align:center; }
  .bac-recap{ border:1.5px solid #F3D99A; background:linear-gradient(135deg,#FFFBF0,#FDF1D6); border-radius:16px; padding:12px 14px; margin-bottom:6px; }
  .bac-recap-head{ font-family:'Poppins',sans-serif; font-weight:800; color:var(--navy); margin-bottom:8px; }
  .bac-recap-row{ display:flex; justify-content:space-between; gap:10px; font-size:13px; padding:5px 0; border-top:1px solid rgba(198,144,13,.18); } .bac-recap-row span{ color:#7A5A16; } .bac-recap-row b{ color:var(--navy); text-align:right; }
  @media (prefers-reduced-motion: reduce){ .path-tile, .bac-card{ animation:none; } }

  /* ═════════════ FORMULAIRES — style moderne unifié (toute l'application) ═════════════ */
  input, select, textarea{ border-radius:14px; background-color:#F8FAFC; border:1.5px solid #E2E8F0; min-height:48px;
    transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease); }
  textarea{ min-height:96px; }
  input:hover, select:hover, textarea:hover{ border-color:#F3D99A; }
  input:focus, select:focus, textarea:focus{ border-color:var(--gold); background-color:#fff; box-shadow:0 0 0 4px rgba(240,180,41,.18); }
  input.filled, select.filled, textarea.filled{ background-color:#fff; border-color:#EAD9A8; box-shadow:inset 3px 0 0 var(--gold); }
  input:disabled, select:disabled, textarea:disabled{ background-color:#F1F5F9; color:#94A3B8; border-style:dashed; cursor:not-allowed; box-shadow:none; }
  select{ --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C6900D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    appearance:none; -webkit-appearance:none; padding-right:42px; cursor:pointer; }
  select, select:hover, select:focus, select.filled, select:disabled{ background-image:var(--chev) !important; background-repeat:no-repeat !important; background-position:right 16px center !important; background-size:14px 14px !important; }
  select:disabled{ --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); }
  input:focus, textarea:focus{ background-image:none; }
  input[type=checkbox], input[type=radio]{ accent-color:var(--gold-deep); width:18px; height:18px; min-height:0; box-shadow:none; }
  input[type=file]{ padding:8px; background:#fff; border-style:dashed; cursor:pointer; }
  input[type=file]::file-selector-button{ border:0; border-radius:10px; padding:9px 14px; margin-right:10px; font-weight:700; cursor:pointer;
    background:linear-gradient(120deg,var(--gold),var(--gold-deep)); color:var(--navy-dark); }
  form label{ color:#475569; letter-spacing:.6px; margin-top:4px; }
  form label:has(+ :is(input,select,textarea):focus){ color:var(--gold-deep); }
  /* Bouton d'envoi des formulaires : doré, large, avec halo (comme « Créer mon compte » du BAC) */
  form:not(#msg-send-form):not(#vc-compose-form) button[type=submit].btn:not(.secondary):not(.small){ width:100%; padding:14px 18px; font-size:15px; border-radius:14px;
    background:linear-gradient(120deg,var(--gold),var(--gold-deep)); color:var(--navy-dark); box-shadow:0 12px 24px -14px rgba(198,144,13,.9); margin-top:10px; }
  form:not(#msg-send-form):not(#vc-compose-form) button[type=submit].btn:not(.secondary):not(.small):active{ transform:scale(.98); }
  /* Apparition progressive des champs */
  .login-box form > *, .tr-modal form > *{ animation:cardEnter .35s var(--ease) both; }
  .login-box form > *:nth-child(2), .tr-modal form > *:nth-child(2){ animation-delay:.03s; } .login-box form > *:nth-child(3), .tr-modal form > *:nth-child(3){ animation-delay:.06s; }
  .login-box form > *:nth-child(4), .tr-modal form > *:nth-child(4){ animation-delay:.09s; } .login-box form > *:nth-child(5), .tr-modal form > *:nth-child(5){ animation-delay:.12s; }
  .login-box form > *:nth-child(n+6), .tr-modal form > *:nth-child(n+6){ animation-delay:.15s; }
  /* Cartes et tuiles des écrans de connexion / inscription */
  .login-box .card{ border-radius:20px; box-shadow:0 18px 40px -26px rgba(0,0,0,.6); animation:cardEnter .35s var(--ease); }
  .role-tile:hover, .role-tile:focus-visible{ border-color:var(--gold); box-shadow:0 14px 30px -16px rgba(240,180,41,.6); transform:translateY(-2px); }
  .role-tile:active{ transform:scale(.97); }
  .tr-modal{ border-radius:22px; }
  @media (prefers-reduced-motion: reduce){ .login-box form > *, .tr-modal form > *, .login-box .card{ animation:none; } }

  /* ═════════════ FORMULAIRES — expérience avancée (validation en direct, fichiers, envoi) ═════════════ */
  form label:has(+ :is(input,select,textarea):required)::after, form label:has(+ .pwd-input-wrap input:required)::after{ content:' *'; color:var(--gold-deep); font-weight:800; }
  input.fux-ok:not([type=file]):not([type=checkbox]):not([type=radio]):not(:focus), textarea.fux-ok:not(:focus){ border-color:#86D3A3;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2316A34A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 14px center; background-size:16px; padding-right:40px; }
  select.fux-ok:not(:focus){ border-color:#86D3A3; }
  input.fux-bad, select.fux-bad, textarea.fux-bad{ border-color:#F59E9E !important; background-color:#FFF7F7 !important; box-shadow:0 0 0 4px rgba(220,38,38,.10) !important; }
  .fux-err{ font-size:12px; color:#B91C1C; font-weight:600; margin:5px 2px 2px; animation:cardEnter .25s var(--ease); }
  .fux-count{ font-size:11px; color:#94A3B8; text-align:right; margin-top:4px; transition:color .2s; } .fux-count.near{ color:#C2410C; font-weight:700; }
  .fux-shake{ animation:fuxShake .45s var(--ease); }
  @keyframes fuxShake{ 0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-6px); } 40%{ transform:translateX(6px); } 60%{ transform:translateX(-4px); } 80%{ transform:translateX(3px); } }
  .fux-file{ display:flex; align-items:center; gap:10px; margin-top:8px; padding:8px 10px; border-radius:14px; background:#F0FDF4; border:1px solid #BBE5C8; animation:cardEnter .3s var(--ease); }
  .fux-file img{ width:44px; height:44px; border-radius:10px; object-fit:cover; flex:0 0 auto; }
  .fux-file-ico{ font-size:26px; } .fux-file-t{ flex:1; min-width:0; display:flex; flex-direction:column; } .fux-file-t b{ font-size:13px; color:var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .fux-file-t small{ font-size:11px; color:#64748B; }
  .fux-file-ok{ color:#16A34A; font-weight:800; }
  /* Bouton d'envoi : état « en cours » (désactivé pendant l'envoi) */
  form.fux-sending button[type=submit]:disabled{ position:relative; color:transparent !important; pointer-events:none; }
  form.fux-sending button[type=submit]:disabled::after{ content:''; position:absolute; left:50%; top:50%; width:20px; height:20px; margin:-10px 0 0 -10px; border-radius:50%;
    border:2.5px solid rgba(7,21,39,.25); border-top-color:var(--navy-dark); animation:fuxSpin .7s linear infinite; }
  @keyframes fuxSpin{ to{ transform:rotate(360deg); } }
  /* Cases à cocher et boutons radio dans une carte : carte sélectionnée en doré */
  label:has(> input[type=checkbox]:checked), label:has(> input[type=radio]:checked){ border-color:var(--gold) !important; background:#FFFBF0 !important; }
  input[type=checkbox], input[type=radio]{ transition:transform .15s var(--ease); } input[type=checkbox]:active, input[type=radio]:active{ transform:scale(.88); }
  /* Champs sur fond de modale : un peu plus d'air entre les blocs */
  .tr-modal label{ margin-top:12px; } .tr-modal form .actions{ margin-top:16px; }
  @media (prefers-reduced-motion: reduce){ .fux-shake, .fux-err, .fux-file{ animation:none; } }