/* Najah — design system unique.
   Toutes les couleurs, polices, rayons et composants sont définis ICI et
   nulle part ailleurs. Pour changer le jaune du site, une seule ligne à
   modifier : --chalk-yellow ci-dessous. */

  :root{
    --bg: #16302B;
    --bg-card: #1E3F38;
    --bg-card-alt: #234A42;
    --chalk-yellow: #E8C468;
    --chalk-yellow-soft: #F2DDA0;
    --violet: #8B7FD1;
    --text: #F2EFE4;
    --text-muted: #9FB3AC;
    --border: rgba(242,239,228,0.10);
    --good: #7FBF9E;
    --bad: #E2725B;
    /* --teal était utilisé pour les tarifs sans avoir jamais été défini :
       le prix s'affichait donc dans la couleur héritée au lieu de ressortir.
       Bug invisible tant que les couleurs étaient recopiées dans 8 fichiers. */
    --teal: #6FC2AE;
  }
  *{ box-sizing:border-box; margin:0; padding:0; }
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Source Serif 4', serif;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  .display{ font-family:'Space Grotesk', sans-serif; }
  .mono{ font-family:'JetBrains Mono', monospace; }

  a{ color:inherit; }
  .wrap{ max-width:1080px; margin:0 auto; padding:0 24px; }

  /* subtle chalk dust texture */
  body.site::before{
    content:"";
    position:fixed; inset:0;
    background-image: radial-gradient(rgba(242,239,228,0.035) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events:none;
    z-index:0;
  }

  header{
    position:relative;
    /* Au-dessus des sections (qui sont en z-index:2) : sinon le menu mobile
       déroulé passe DERRIÈRE le contenu de la page et devient illisible. */
    z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding:28px 24px;
    max-width:1080px; margin:0 auto;
  }
  /* ═══════════ L'ÉCRAN DE LANCEMENT ═══════════
     La première image à l'ouverture de l'application. Il est caché par
     défaut et n'apparaît que si le petit script de <head> a posé la classe
     sur <html> : si ce script ne tourne pas, on ne voit rien du tout
     plutôt que de rester bloqué derrière un voile qui ne part jamais.

     Même raison pour l'effacement : il est fait par une ANIMATION CSS, pas
     par du JavaScript. Une erreur de script ailleurs dans la page ne peut
     donc pas laisser quelqu'un enfermé devant l'écran de lancement. */
  #ecran-lancement{ display:none; }
  html.avec-lancement{ overflow:hidden; }
  html.avec-lancement #ecran-lancement{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
    position:fixed; inset:0; z-index:9999; padding:32px;
    background:
      radial-gradient(120% 90% at 50% 12%, #27564C 0%, rgba(39,86,76,0) 62%),
      radial-gradient(100% 80% at 50% 100%, #1A3A33 0%, rgba(26,58,51,0) 70%),
      var(--bg);
    /* Sous la barre d'état et au-dessus des boutons du téléphone. */
    padding-top:calc(32px + env(safe-area-inset-top));
    padding-bottom:calc(32px + env(safe-area-inset-bottom));
    animation:lancement-partir .5s cubic-bezier(.4,0,.6,1) 1.25s forwards;
  }
  /* Un appui n'importe où saute l'animation : personne n'attend un logo. */
  html.lancement-passe #ecran-lancement{ animation:lancement-partir .22s ease-out forwards; }
  @keyframes lancement-partir{
    to{ opacity:0; transform:translateY(-14px); visibility:hidden; pointer-events:none; }
  }
  .lancement-marque{
    width:78px; height:78px; border-radius:22px;
    background:linear-gradient(155deg, var(--chalk-yellow-soft), var(--chalk-yellow));
    display:flex; align-items:center; justify-content:center;
    color:var(--bg); font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:38px;
    box-shadow:0 18px 50px rgba(232,196,104,.22);
  }
  .lancement-nom{
    font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:34px;
    letter-spacing:-0.02em; color:var(--text); line-height:1;
  }
  .lancement-trait{ width:64px; height:2px; border-radius:2px; background:var(--chalk-yellow); opacity:.7; }
  .lancement-phrase{
    font-size:14.5px; color:var(--text-muted); text-align:center;
    max-width:300px; line-height:1.55; margin:0;
  }
  @media (prefers-reduced-motion: no-preference){
    html.avec-lancement .lancement-marque{ animation:lancement-marque .62s cubic-bezier(.2,1.4,.4,1) both; }
    html.avec-lancement .lancement-nom{ animation:lancement-monter .5s cubic-bezier(.2,.7,.3,1) .28s both; }
    html.avec-lancement .lancement-trait{ animation:lancement-trait .45s cubic-bezier(.2,.7,.3,1) .46s both; }
    html.avec-lancement .lancement-phrase{ animation:lancement-monter .5s cubic-bezier(.2,.7,.3,1) .58s both; }
    @keyframes lancement-marque{ from{ opacity:0; transform:scale(.55); } to{ opacity:1; transform:none; } }
    @keyframes lancement-monter{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
    @keyframes lancement-trait{ from{ opacity:0; transform:scaleX(0); } to{ opacity:.7; transform:none; } }
  }
  /* Téléphone qui demande moins d'animation : l'écran s'affiche d'un bloc
     et s'efface plus vite, sans rien faire bouger. */
  @media (prefers-reduced-motion: reduce){
    html.avec-lancement #ecran-lancement{
      animation:lancement-partir-net .2s linear .7s forwards;
    }
    @keyframes lancement-partir-net{ to{ opacity:0; visibility:hidden; pointer-events:none; } }
  }

  .logo{ display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; }
  .logo-mark{
    width:34px; height:34px; border-radius:9px;
    background: linear-gradient(155deg, var(--chalk-yellow-soft), var(--chalk-yellow));
    display:flex; align-items:center; justify-content:center;
    color:var(--bg); font-weight:700; font-family:'Space Grotesk',sans-serif; font-size:16px;
  }
  .logo-text{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:20px; letter-spacing:-0.01em; }

  /* Le menu est une rangée souple : c'est l'espacement (gap) qui sépare les
     liens, plus des marges posées lien par lien. Avec des marges, le sélecteur
     de langue tombait sur sa propre ligne et occupait toute la largeur. */
  nav{ display:flex; align-items:center; gap:21px; }
  nav a{ text-decoration:none; color:var(--text-muted); font-size:14px; transition:color .2s; white-space:nowrap; }
  nav a:hover{ color:var(--text); }
  /* Trait de séparation entre la navigation du site et l'accès aux comptes. */
  .nav-sep{ width:1px; height:20px; background:var(--border); flex-shrink:0; }
  .nav-compte{
    border:1px solid var(--border); border-radius:100px; padding:7px 14px;
    font-size:13px; color:var(--text);
  }
  .nav-compte:hover{ border-color:rgba(232,196,104,0.50); color:var(--chalk-yellow); }

  /* Son espace, reconnaissable d'un coup d'œil : les initiales dans une
     pastille dorée. C'est le même repère que l'avatar de son tableau de
     bord, pour qu'on sache tout de suite qu'on est bien chez soi. */
  .nav-moi{ display:inline-flex; align-items:center; gap:8px; border-color:rgba(232,196,104,0.45);
    color:var(--chalk-yellow); font-weight:600; }
  .pastille-moi{
    display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
    width:24px; height:24px; border-radius:50%; background:var(--chalk-yellow); color:var(--bg);
    font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:11px; letter-spacing:.02em;
    margin-inline-start:-5px;
  }
  .nav-deco{
    background:none; border:none; cursor:pointer; font-family:inherit; font-size:12.5px;
    color:var(--text-muted); padding:7px 4px; text-decoration:underline; text-underline-offset:3px;
  }
  .nav-deco:hover{ color:var(--text); }

  .lang-switch{ display:flex; gap:4px; background:var(--bg-card); border:1px solid var(--border); border-radius:100px; padding:3px; }
  .lang-btn{
    border:none; background:transparent; color:var(--text-muted); font-family:'JetBrains Mono',monospace;
    font-size:11px; padding:5px 10px; border-radius:100px; cursor:pointer; letter-spacing:0.03em;
  }
  .lang-btn.active{ background:var(--chalk-yellow); color:var(--bg); font-weight:600; }

  body.is-rtl{ direction:rtl; }
  /* Plus de marges à corriger ici : « gap » ne connaît pas la gauche
     ni la droite, il fonctionne à l'identique dans les deux sens. */
  body.is-rtl .eyebrow-dot{ margin-left:8px; margin-right:0; }
  body.is-rtl .cta-row, body.is-rtl .steps, body.is-rtl .pricing-cols, body.is-rtl .row2, body.is-rtl .tabs{ direction:rtl; }
  body.is-rtl .plan-badge{ right:auto; left:16px; }
  body.is-rtl .step-num, body.is-rtl .payment-step-num{ direction:ltr; }

  /* HERO */
  /* --- BANNIÈRE D'ACCUEIL ------------------------------------------
     Deux mises en page, choisies par le serveur selon qu'une photo a été
     déposée dans public/images ou non.
       · sans photo : le texte à gauche, l'illustration à craie à droite
       · avec photo : l'image couvre toute la bannière, un voile sombre
                      passe par-dessus et le texte s'écrit dessus
     Le voile n'est pas décoratif : sans lui, une photo claire rendrait le
     titre et les boutons illisibles, et on ne maîtrise pas la photo que
     l'on déposera dans six mois. */
  .hero{ position:relative; z-index:2; padding:64px 24px 40px; text-align:left; }
  .hero .wrap{ position:relative; z-index:1; }
  /* Le texte prend la plus grande part : les titres de Najah sont longs
     (« Votre professeur démissionne en février… ») et se brisaient sur cinq
     lignes quand les deux colonnes étaient à égalité. */
  .hero-grille{ display:grid; grid-template-columns:1.25fr 0.75fr; gap:40px; align-items:center; }
  .hero-illus{ width:100%; height:auto; display:block; }
  @media(max-width:900px){
    .hero-grille{ grid-template-columns:1fr; gap:8px; }
    .hero-illus{ max-width:440px; margin:6px auto 0; opacity:.92; }
  }
  .hero.avec-photo{ padding-top:92px; padding-bottom:82px; overflow:hidden; }
  .hero.avec-photo .hero-grille{ grid-template-columns:1fr; }
  .hero.avec-photo .hero-texte{ max-width:660px; }
  .hero-photo{
    position:absolute; inset:0; z-index:0;
    width:100%; height:100%; object-fit:cover; object-position:center 38%;
  }
  /* Force du voile — les trois seuls nombres à toucher pour éclaircir ou
     assombrir la bannière. Du côté du texte vers le côté opposé :
       0.95 / 0.86 / 0.58  → réglage actuel, sûr avec n'importe quelle photo
       0.80 / 0.68 / 0.40  → photo plus visible, à réserver aux images sombres
     Un voile uniforme à 40 % ne suffit pas ici : le texte est en clair, et
     une photo prise en plein soleil à Nouakchott le ferait disparaître. */
  .hero-voile{
    --voile-1:0.95; --voile-2:0.86; --voile-3:0.58;
    position:absolute; inset:0; z-index:0;
    background:
      linear-gradient(95deg, rgba(22,48,43,var(--voile-1)) 0%, rgba(22,48,43,var(--voile-2)) 42%, rgba(22,48,43,var(--voile-3)) 100%),
      linear-gradient(180deg, rgba(22,48,43,0.42) 0%, rgba(22,48,43,0.22) 40%, rgba(22,48,43,0.92) 100%);
  }
  /* En arabe le texte part de la droite : le côté sombre doit suivre. */
  body.is-rtl .hero-voile{
    background:
      linear-gradient(265deg, rgba(22,48,43,var(--voile-1)) 0%, rgba(22,48,43,var(--voile-2)) 42%, rgba(22,48,43,var(--voile-3)) 100%),
      linear-gradient(180deg, rgba(22,48,43,0.42) 0%, rgba(22,48,43,0.22) 40%, rgba(22,48,43,0.92) 100%);
  }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.06em;
    color:var(--chalk-yellow-soft); background:rgba(232,196,104,0.10);
    border:1px solid rgba(232,196,104,0.25); padding:6px 12px; border-radius:100px;
    margin-bottom:22px;
  }
  .eyebrow-dot{ width:6px;height:6px;border-radius:50%;background:var(--good); }
  h1{
    font-family:'Space Grotesk',sans-serif; font-weight:600;
    font-size:clamp(34px, 6vw, 58px); line-height:1.06; letter-spacing:-0.02em;
    max-width:760px; margin-bottom:22px;
  }
  h1 em{ font-style:normal; color:var(--chalk-yellow); }
  .hero-sub{ font-size:18px; color:var(--text-muted); max-width:560px; margin-bottom:34px; }
  .cta-row{ display:flex; gap:14px; flex-wrap:wrap; }
  .btn{
    font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px;
    padding:14px 24px; border-radius:12px; border:none; cursor:pointer;
    text-decoration:none; display:inline-flex; align-items:center; gap:8px;
    transition:transform .15s ease, opacity .15s ease;
  }
  .btn:hover{ transform:translateY(-1px); }
  .btn-primary{ background:var(--chalk-yellow); color:var(--bg); }
  .btn-ghost{ background:transparent; color:var(--text); border:1px solid var(--border); }

  /* LEDGER / SIGNATURE */
  .ledger-section{ position:relative; z-index:2; padding:20px 24px 64px; }
  .ledger{
    background:var(--bg-card); border:1px solid var(--border); border-radius:20px;
    padding:26px 26px 10px; max-width:1080px; margin:0 auto;
  }
  .ledger-title{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:18px; padding-bottom:14px; border-bottom:1px dashed var(--border);
  }
  .ledger-title span{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.08em; color:var(--text-muted); text-transform:uppercase; }
  .ledger-row{
    display:grid; grid-template-columns: 1fr 1fr 1fr auto;
    gap:14px; padding:14px 0; border-bottom:1px solid var(--border);
    font-size:14px; align-items:center;
  }
  .ledger-row:last-child{ border-bottom:none; }
  .ledger-row .subject{ font-family:'Space Grotesk',sans-serif; font-weight:600; }
  .ledger-row .muted{ color:var(--text-muted); font-size:13px; }
  .pill{
    font-family:'JetBrains Mono',monospace; font-size:11px; padding:4px 10px; border-radius:100px;
    background:rgba(127,191,158,0.14); color:var(--good); white-space:nowrap; justify-self:end;
  }

  /* HOW IT WORKS */
  section.block{ position:relative; z-index:2; padding:56px 24px; }
  .section-head{ margin-bottom:36px; }
  .section-label{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--chalk-yellow-soft); letter-spacing:0.08em; margin-bottom:10px; }
  h2{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:clamp(24px,4vw,32px); letter-spacing:-0.01em; }

  .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .step{ background:var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:22px; }
  .step-num{ font-family:'JetBrains Mono',monospace; color:var(--chalk-yellow); font-size:13px; margin-bottom:12px; }
  .step h3{ font-family:'Space Grotesk',sans-serif; font-size:17px; font-weight:600; margin-bottom:8px; }
  .step p{ color:var(--text-muted); font-size:14px; }

  /* FORMS */
  .forms-wrap{ position:relative; z-index:2; padding:20px 24px 72px; }
  .tabs{ display:flex; gap:10px; margin-bottom:22px; max-width:640px; margin-left:auto; margin-right:auto; }
  .tab{
    flex:1; text-align:center; padding:12px; border-radius:12px; cursor:pointer;
    font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14px;
    border:1px solid var(--border); color:var(--text-muted); background:var(--bg-card);
    transition:all .15s ease;
  }
  .tab.active{ background:var(--chalk-yellow); color:var(--bg); border-color:transparent; }

  .form-card{
    max-width:640px; margin:0 auto; background:var(--bg-card); border:1px solid var(--border);
    border-radius:20px; padding:30px; display:none;
  }
  .form-card.active{ display:block; }
  .form-card h3{ font-family:'Space Grotesk',sans-serif; font-size:20px; margin-bottom:6px; }
  .form-card .desc{ color:var(--text-muted); font-size:14px; margin-bottom:24px; }

  .field{ margin-bottom:16px; }

  /* ═══ Un choix à cocher, avec son explication ═══
     Une case à cocher nue, suivie d'une ligne de texte, se coche au
     hasard : on ne sait pas ce qu'on choisit. Ici, le titre et la
     conséquence tiennent ensemble dans la zone cliquable. */
  .case-but{
    display:flex; gap:11px; align-items:flex-start; cursor:pointer;
    padding:12px 13px; margin-top:8px; border-radius:12px;
    border:1px solid var(--border, #D7E0EC); background:var(--bg-card, #fff);
  }
  .case-but:hover{ border-color:var(--chalk-yellow, #2563EB); }
  .case-but input{ flex:none; width:18px; height:18px; margin-top:2px; }
  .case-but b{ display:block; font-size:14.5px; line-height:1.4; }
  .case-but small{ display:block; margin-top:3px; font-size:12.5px; line-height:1.5; opacity:.78; }
  .case-but:has(input:checked){
    border-color:var(--chalk-yellow, #2563EB);
    background:rgba(37,99,235,.06);
  }
  .aide-champ{ display:block; margin-top:5px; font-size:12.5px; line-height:1.5; opacity:.75; }
  .facultatif{ font-weight:400; opacity:.65; }

  /* ═══ Les erreurs de formulaire ═══
     Sous le champ, en rouge, et qui restent à l'écran : elles remplacent
     les boîtes d'alerte du navigateur, qui bloquaient la page, se
     fermaient d'un clic et ne disaient jamais quel champ corriger. */
  .erreur-champ{
    margin-top:6px; font-size:13px; line-height:1.5;
    color:var(--bad, #B91C1C); display:flex; gap:6px; align-items:flex-start;
  }
  .erreur-champ::before{ content:"⚠"; flex:none; }
  .erreur-generale{
    margin:4px 0 14px; padding:11px 13px; border-radius:11px; font-size:13.5px; line-height:1.55;
    color:var(--bad, #B91C1C); background:rgba(185,28,28,.08); border:1px solid rgba(185,28,28,.28);
  }
  /* Le champ lui-même se signale : le message seul se perd dans un
     formulaire long, surtout sur un écran de téléphone. */
  .en-erreur,
  input.en-erreur, select.en-erreur, textarea.en-erreur{
    border-color:var(--bad, #B91C1C) !important;
    box-shadow:0 0 0 2px rgba(185,28,28,.14);
  }
  /* L'attribut `hidden` du navigateur vaut `display:none`, mais la moindre
     règle d'auteur qui pose un `display` le remporte sans rien signaler.
     On le dit donc explicitement, une fois, pour toute la feuille. */
  [hidden]{ display:none !important; }
  .field label{ display:block; font-size:12px; color:var(--text-muted); margin-bottom:6px; font-family:'JetBrains Mono',monospace; letter-spacing:0.03em; }
  .field input, .field select{
    width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--border);
    background:var(--bg); color:var(--text); font-family:'Source Serif 4',serif; font-size:15px;
    outline:none; transition:border-color .15s ease;
  }
  .field input:focus, .field select:focus{ border-color:var(--chalk-yellow); }
  .row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

  .submit-btn{
    width:100%; padding:14px; border:none; border-radius:12px; margin-top:8px;
    background:var(--chalk-yellow); color:var(--bg); font-family:'Space Grotesk',sans-serif;
    font-weight:600; font-size:15px; cursor:pointer; transition:opacity .15s ease;
  }
  .submit-btn:hover{ opacity:0.9; }

  .photo-upload{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
  .photo-preview{
    width:64px; height:64px; border-radius:50%; background:var(--bg); border:1.5px dashed var(--border);
    display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; color:var(--text-muted); font-size:22px;
  }
  .photo-preview img{ width:100%; height:100%; object-fit:cover; }
  .photo-upload-btn{
    background:var(--bg); border:1px solid var(--border); color:var(--text); padding:9px 14px; border-radius:9px;
    font-family:'Space Grotesk',sans-serif; font-size:12.5px; font-weight:600; cursor:pointer;
  }
  .photo-upload-hint{ font-size:11.5px; color:var(--text-muted); margin-top:4px; }

  .confirm{
    display:none; text-align:center; padding:20px; margin-top:16px;
    border-radius:12px; background:rgba(127,191,158,0.10); border:1px solid rgba(127,191,158,0.3);
    color:var(--good); font-size:14px;
  }
  .confirm.show{ display:block; }
  .mode-choix{ display:flex; flex-direction:column; gap:8px; }
  .mode-option{
    display:flex; align-items:flex-start; gap:10px; padding:12px 14px; cursor:pointer;
    background:var(--bg); border:1px solid var(--border); border-radius:10px; transition:border-color .15s ease;
  }
  .mode-option:has(input:checked){ border-color:var(--chalk-yellow); background:rgba(232,196,104,0.07); }
  .mode-option input{ margin-top:3px; accent-color:var(--chalk-yellow); flex-shrink:0; }
  .mode-option strong{ display:block; font-family:'Space Grotesk',sans-serif; font-size:13.5px; font-weight:600; }
  .mode-option em{ display:block; font-style:normal; font-size:12px; color:var(--text-muted); margin-top:2px; }
  .cgu-mention{ text-align:center; font-size:11.5px; color:var(--text-muted); margin-top:14px; line-height:1.5; }
  .cgu-mention a{ color:var(--chalk-yellow); text-decoration:none; }
  .switch-link{ text-align:center; font-size:12.5px; color:var(--text-muted); margin-top:14px; }
  .switch-link a{ color:var(--chalk-yellow); text-decoration:none; font-weight:600; }

  /* LE CARREFOUR DES CONNEXIONS (/connexion) */
  .choix-espaces{ display:grid; gap:12px; }
  .espace-carte{
    display:flex; align-items:center; gap:14px; padding:18px;
    background:var(--bg-card); border:1px solid var(--border); border-radius:16px;
    text-decoration:none; color:var(--text); transition:border-color .15s, transform .15s;
  }
  .espace-carte:hover, .espace-carte:focus-visible{ border-color:var(--chalk-yellow); }
  .espace-icone{ font-size:26px; line-height:1; flex:0 0 auto; }
  .espace-texte{ display:flex; flex-direction:column; gap:4px; min-width:0; flex:1; }
  .espace-titre{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:16px; }
  .espace-pour{ font-size:13px; color:var(--text-muted); line-height:1.5; }
  /* La flèche part dans le sens de la lecture : en arabe elle pointe à gauche. */
  .espace-fleche{ color:var(--chalk-yellow); font-size:18px; flex:0 0 auto; }
  [dir="rtl"] .espace-fleche{ transform:scaleX(-1); }
  @media (prefers-reduced-motion: no-preference){
    .espace-carte:hover{ transform:translateY(-2px); }
  }
  @media(max-width:520px){
    .espace-carte{ padding:15px; gap:11px; }
    .espace-titre{ font-size:15px; }
    .espace-pour{ font-size:12.5px; }
  }

  /* SESSION LOG (demo transparency) */
  .session-log{
    max-width:640px; margin:22px auto 0; padding:16px 20px;
    border-top:1px dashed var(--border); font-size:12px; color:var(--text-muted);
    font-family:'JetBrains Mono',monospace;
  }

  footer{
    position:relative; z-index:2; padding:48px 24px 32px;
    color:var(--text-muted); font-size:13px; border-top:1px solid var(--border);
    margin-top:40px;
  }
  .pied-grille{
    display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; text-align:left;
  }
  .pied-baseline{ font-size:13px; max-width:280px; line-height:1.5; }
  .pied-titre{
    font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:13px;
    color:var(--text); margin-bottom:12px;
  }
  .pied-grille a{
    display:block; text-decoration:none; color:var(--text-muted);
    font-size:13px; padding:3px 0; transition:color .2s;
  }
  .pied-grille a:hover{ color:var(--chalk-yellow); }
  .pied-bas{
    margin-top:34px; padding-top:18px; border-top:1px solid var(--border);
    font-size:12px; text-align:center;
  }
  @media(max-width:720px){
    .pied-grille{ grid-template-columns:1fr 1fr; gap:26px; }
    .pied-baseline{ max-width:none; }
  }
  @media(max-width:420px){
    .pied-grille{ grid-template-columns:1fr; }
  }

  /* Lien d'évitement : invisible jusqu'à ce qu'on navigue au clavier.
     Permet à quelqu'un qui n'utilise pas la souris de sauter le menu. */
  /* Masqué par découpe plutôt que par une position négative : en arabe
     (lecture de droite à gauche), un « left:-9999px » élargit la zone de
     défilement et fait déborder toutes les pages sur le côté. */
  .saut-contenu{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
    background:var(--chalk-yellow); color:var(--bg);
    border-radius:8px; text-decoration:none; font-weight:600;
  }
  .saut-contenu:focus{
    width:auto; height:auto; overflow:visible;
    clip:auto; clip-path:none; padding:10px 16px;
    top:8px; inset-inline-start:16px; z-index:300;
  }

  /* Focus visible partout : exigence d'accessibilité du cahier des charges. */
  a:focus-visible, button:focus-visible, input:focus-visible,
  select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
    outline:2px solid var(--chalk-yellow); outline-offset:2px; border-radius:4px;
  }

  nav a.actif{ color:var(--chalk-yellow); }

  /* --- Menu mobile ---
     Avant, la navigation disparaissait purement et simplement sous 720px :
     sur un téléphone, il n'y avait aucun menu. Maintenant elle se replie
     derrière un bouton. */
  .menu-bouton{
    display:none; flex-direction:column; gap:5px; background:none; border:none;
    cursor:pointer; padding:8px; border-radius:8px;
  }
  .menu-bouton span{
    display:block; width:22px; height:2px; background:var(--text); border-radius:2px;
    transition:transform .25s ease, opacity .2s ease;
  }
  .menu-bouton[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .menu-bouton[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .menu-bouton[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* ANNUAIRE */
  .annuaire-filtres{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; }
  .filtre-btn{
    background:var(--bg-card); border:1px solid var(--border); color:var(--text-muted);
    padding:7px 14px; border-radius:100px; font-family:'Space Grotesk',sans-serif;
    font-size:12.5px; font-weight:600; cursor:pointer; transition:all .15s ease;
  }
  .filtre-btn.active{ background:var(--chalk-yellow); color:var(--bg); border-color:transparent; }
  .annuaire-grille{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap:16px; }
  /* Chaque carte est un vrai lien <a> vers /professeurs/{id} : indexable par
     Google, partageable sur WhatsApp, ouvrable dans un nouvel onglet. */
  .prof-card{
    /* En colonne, avec le tarif poussé en bas : d'une carte à l'autre, le
       prix et « Voir ce professeur » se retrouvent à la même hauteur, même
       quand l'une a trois lignes de présentation et l'autre aucune. */
    display:flex; flex-direction:column; text-decoration:none; color:inherit;
    background:var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:18px;
    position:relative; cursor:pointer; transition:transform .15s ease, border-color .15s ease;
  }
  .prof-card:hover{ transform:translateY(-3px); border-color:rgba(232,196,104,0.55); }
  .prof-card:focus-visible{ outline:2px solid var(--chalk-yellow); outline-offset:3px; }
  .prof-card.boost{ border-color:rgba(232,196,104,0.45); }

  /* --- Fiche professeur (page /professeurs/{id}) ---
     C'était une fenêtre surgissante ; c'est devenu une vraie page, pour que
     Google l'indexe et qu'un professeur puisse envoyer son lien. */
  .fiche-page{ position:relative; z-index:2; padding:32px 24px 56px; }
  .fiche{
    background:var(--bg-card); border:1px solid var(--border); border-radius:20px;
    width:100%; max-width:640px; padding:30px; position:relative; margin:0 auto;
  }
  .fil-ariane{
    max-width:640px; margin:0 auto 18px; font-size:13px; color:var(--text-muted);
  }
  .fil-ariane a{ color:var(--text-muted); text-decoration:none; }
  .fil-ariane a:hover{ color:var(--chalk-yellow); }
  .fil-ariane span{ margin:0 7px; opacity:.5; }
  .fiche-top{ display:flex; align-items:center; gap:16px; margin-bottom:16px; }
  .fiche-nom{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:22px; }
  .fiche-matiere{ color:var(--chalk-yellow-soft); font-size:14.5px; }
  .fiche-ligne{ font-size:13.5px; color:var(--text-muted); margin-bottom:6px; }
  .fiche-bio{ font-size:14px; line-height:1.6; margin:14px 0; }
  .fiche-tarif{
    font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:17px;
    color:var(--teal); margin-bottom:16px;
  }
  .fiche-mur{
    background:rgba(232,196,104,0.10); border:1px solid rgba(232,196,104,0.35);
    border-radius:14px; padding:18px; text-align:center; margin-top:18px;
  }
  .fiche-mur-titre{
    font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:0.06em;
    color:var(--chalk-yellow); margin-bottom:10px;
  }
  .fiche-mur-texte{ font-size:14px; line-height:1.55; margin-bottom:16px; }
  .fiche-actions{ display:flex; flex-direction:column; gap:9px; }
  /* Les deux chemins de contact : WhatsApp en premier, parce que c'est
     l'application déjà ouverte sur le téléphone de la plupart des familles
     de Nouakchott, et que la conversation y commence en une seconde. */
  .fiche-actions-contact{ gap:10px; margin-bottom:12px; }
  .fiche-actions-contact .btn{
    width:100%; justify-content:center; font-size:15px; padding:13px 18px;
  }

  /* Le vert de WhatsApp, et non la couleur d'action du site : c'est ce vert
     que l'œil reconnaît avant d'avoir lu le libellé. Le blanc dessus tient
     le contraste (4,6:1), contrairement au vert clair de la marque. */
  .btn-whatsapp{
    background:#128C7E; border:1px solid #128C7E; color:#fff;
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
  }
  .btn-whatsapp:hover{ background:#0E7A6D; border-color:#0E7A6D; color:#fff; }

  /* ═══ La fenêtre « Demander à être rappelé » ═══ */
  .dlg-rappel{
    margin:auto; width:100%; max-width:min(440px, calc(100vw - 32px));
    border:none; padding:0; background:none; color:var(--text);
    max-height:calc(100vh - 40px); overflow:auto;
  }
  .dlg-rappel::backdrop{ background:rgba(0,0,0,.55); }
  .dlg-corps{
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:18px; padding:22px;
  }
  .dlg-corps h2{ font:700 18px 'Space Grotesk',sans-serif; margin-bottom:8px; }
  .dlg-sous{ color:var(--text-muted); font-size:13.5px; line-height:1.6; margin-bottom:18px; }
  .dlg-actions{ display:flex; justify-content:flex-end; margin-top:14px; }
  .fiche-lien-sec{
    background:none; border:none; color:var(--text-muted); font-size:13px;
    cursor:pointer; text-decoration:underline; padding:4px;
  }
  .fiche-tel{
    font-family:'JetBrains Mono',monospace; font-size:21px; color:var(--chalk-yellow);
    background:var(--bg); border:1px dashed rgba(232,196,104,0.45); border-radius:12px;
    padding:14px; text-align:center; margin:14px 0; letter-spacing:0.04em;
  }
  .fiche-info{
    font-size:13px; padding:11px 14px; border-radius:10px; margin-top:14px;
    background:rgba(127,191,158,0.12); border:1px solid rgba(127,191,158,0.3); color:var(--good);
  }
  .fiche-info.attente{
    background:rgba(232,196,104,0.10); border-color:rgba(232,196,104,0.3); color:var(--chalk-yellow-soft);
  }
  .fiche-avis{ margin-top:20px; border-top:1px solid var(--border); padding-top:16px; }
  .fiche-avis h4{ font-family:'Space Grotesk',sans-serif; font-size:14px; margin-bottom:10px; }
  .fiche-avis-item{ padding:9px 0; border-bottom:1px solid var(--border); font-size:13.5px; }
  .fiche-avis-item:last-child{ border-bottom:none; }
  .fiche-avis-top{ display:flex; justify-content:space-between; gap:10px; margin-bottom:3px; }
  .fiche-avis-note{ color:var(--chalk-yellow); letter-spacing:1px; }
  .fiche-form{ margin-top:16px; }
  @media(max-width:520px){ .fiche{ padding:20px; } .fiche-nom{ font-size:19px; } .fiche-page{ padding:20px 16px 44px; } }
  .prof-boost-tag{
    position:absolute; top:-9px; right:14px; background:var(--chalk-yellow); color:var(--bg);
    font-family:'JetBrains Mono',monospace; font-size:9.5px; padding:3px 9px; border-radius:100px; font-weight:600;
  }
  .prof-top{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
  .prof-nom{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px; }
  .prof-matiere{ font-size:12.5px; color:var(--chalk-yellow-soft); }
  .prof-meta{ font-size:12px; color:var(--text-muted); margin-bottom:6px; }
  .prof-note{ color:var(--chalk-yellow); font-size:12.5px; letter-spacing:1px; }
  /* La bio tient en trois lignes : une présentation de dix lignes rendait
     sa carte deux fois plus haute que ses voisines, et toute la rangée
     avec elle. La carte entière mène à la fiche, où la bio est entière. */
  .prof-bio{
    font-size:12.5px; color:var(--text-muted); margin:8px 0; line-height:1.45;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
    line-clamp:3; overflow:hidden;
  }
  /* Recherche de l'annuaire */
  .recherche-annuaire{
    position:relative; display:flex; align-items:center; max-width:460px; margin:0 0 10px;
    background:var(--bg-card); border:1px solid var(--border); border-radius:100px;
  }
  .recherche-annuaire:focus-within{ border-color:rgba(232,196,104,.55); }
  .recherche-annuaire .loupe{ padding-inline-start:16px; font-size:14px; opacity:.75; }
  .recherche-annuaire input{
    flex:1 1 auto; min-width:0; background:none; border:none; outline:none; color:var(--text);
    font-family:inherit; font-size:14.5px; padding:12px 14px;
  }
  .recherche-annuaire input::placeholder{ color:var(--text-muted); }
  .recherche-annuaire input::-webkit-search-cancel-button{ display:none; }
  .recherche-annuaire .vider{
    background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:14px;
    padding:0 16px; min-height:40px;
  }
  .recherche-annuaire .vider:hover{ color:var(--text); }
  .compteur-annuaire{ font-size:12.5px; color:var(--text-muted); min-height:18px; margin-bottom:14px; }

  .prof-exp{
    display:inline-block; margin-inline-start:7px; padding:2px 8px; border-radius:100px;
    background:rgba(127,191,158,.12); color:var(--good); font-size:11.5px; white-space:nowrap;
  }
  .prof-niveaux{ display:flex; flex-wrap:wrap; gap:5px; margin:7px 0 0; }
  .badge-niveau{
    font-size:11px; padding:2px 9px; border-radius:100px; white-space:nowrap;
    background:rgba(139,127,209,.14); color:#B7ADEB; border:1px solid rgba(139,127,209,.26);
  }
  .prof-neuf{
    font-size:11.5px; color:var(--good); background:rgba(127,191,158,.12);
    border:1px solid rgba(127,191,158,.28); border-radius:100px; padding:3px 9px;
    display:inline-block; letter-spacing:0;
  }

  /* Sur la fiche, la bio peut être longue : on la replie au-delà de six
     lignes, avec un bouton pour la dérouler. */
  .fiche-bio.repliable{
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:6;
    line-clamp:6; overflow:hidden;
  }
  .btn-lire{
    display:block; margin:2px 0 14px;
    background:none; border:none; padding:4px 0; cursor:pointer; font-family:inherit;
    color:var(--chalk-yellow); font-size:13px; text-decoration:underline; text-underline-offset:3px;
  }
  .btn-lire:focus-visible{ outline:2px solid var(--chalk-yellow); outline-offset:3px; border-radius:4px; }

  /* Le bouton d'action de la fiche, toujours sous les yeux sur téléphone.
     Un visiteur devait faire défiler toute la fiche pour trouver comment
     joindre le professeur — beaucoup repartaient avant. */
  /* Marges nulles : la barre est posée APRÈS la section, elle n'a plus à
     compenser le rembourrage d'une page en particulier. Elle sert à la fois
     la fiche d'un professeur et celle d'un établissement. */
  .fiche-barre{
    position:sticky; bottom:0; z-index:30; margin:0; padding:12px 24px calc(12px + env(safe-area-inset-bottom));
    background:rgba(22,48,43,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border-top:1px solid var(--border); text-align:center;
  }
  .fiche-barre .btn{ width:100%; max-width:420px; font-size:15px; padding:14px 20px; }
  /* Deux boutons dans la barre collante : côte à côte dès qu'il y a la
     place, l'un sous l'autre sur un téléphone étroit. */
  .fiche-barre-actions{
    display:flex; flex-wrap:wrap; gap:9px; justify-content:center;
    max-width:520px; margin:0 auto;
  }
  .fiche-barre-actions .btn{ flex:1 1 220px; max-width:none; }
  .fiche-barre .sous{ font-size:12px; color:var(--text-muted); margin-top:7px; }
  @media(min-width:760px){ .fiche-barre{ position:static; margin:24px 0 0; padding:0; background:none;
    border-top:none; backdrop-filter:none; -webkit-backdrop-filter:none; } }
  .prof-tarif{ margin-top:auto; padding-top:8px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14px; color:var(--teal); }
  .prof-verrou{ font-size:11px; color:var(--text-muted); margin-top:10px; padding-top:10px; border-top:1px dashed var(--border); }
  .annuaire-cta{ text-align:center; margin-top:26px; }

  /* ═══ « Inscrire mon école » ═══
     Posé dans l'en-tête de la page des établissements, là où un directeur
     comprend en trois secondes que Najah s'adresse aussi à lui. Le chemin
     n'existait que dans le pied de page. */
  .etab-appel{
    display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    margin-top:20px;
  }
  .etab-appel-sous{ font-size:13.5px; line-height:1.55; color:var(--text-muted); flex:1 1 240px; }
  .btn-grand{ font-size:16px; padding:14px 26px; border-radius:12px; }
  @media(max-width:560px){
    /* Sur téléphone, le bouton prend toute la largeur : c'est l'action de
       la page, elle ne doit pas se faufiler entre deux lignes de texte. */
    .etab-appel{ flex-direction:column; align-items:stretch; gap:10px; }
    .btn-grand{ width:100%; justify-content:center; }
    .etab-appel-sous{ text-align:center; }
  }
  .annuaire-vide{ color:var(--text-muted); font-size:14px; padding:20px; text-align:center; }

  /* --- AVATARS -----------------------------------------------------
     Un seul composant pour les professeurs, les écoles et les offres.
     Avec photo : l'image cadrée, cerclée d'un filet clair qui la détache
     du fond sombre. Sans photo : les initiales sur un dégradé tiré du nom.
     Plus aucun émoji : un 👨‍🏫 par défaut signalait « site pas fini », et
     c'est précisément ce qu'une famille ne doit pas penser en arrivant. */
  .av{
    flex-shrink:0; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    object-fit:cover;
    background:var(--bg-card-alt);
    box-shadow: 0 0 0 2px rgba(232,196,104,0.22), 0 4px 14px rgba(0,0,0,0.30);
  }
  .av-rond{ border-radius:50%; }
  .av-carre{ border-radius:14px; }
  .av-sm{ width:48px; height:48px; font-size:17px; }
  .av-md{ width:56px; height:56px; font-size:20px; }
  .av-lg{ width:96px; height:96px; font-size:34px; }
  .av-ini{
    font-family:'Space Grotesk',sans-serif; font-weight:700;
    /* Texte sombre sur dégradé clair : même traitement que le logo, et le
       contraste reste bon quelle que soit la teinte tirée. */
    color:#16302B; letter-spacing:0.02em; line-height:1;
    -webkit-user-select:none; user-select:none;
  }
  /* Dix teintes, et non six : avec six, deux professeurs sur quatre
     tombaient sur la même couleur dans une liste de quatre — la pastille
     ne distinguait plus personne, ce qui est tout son travail.

     Le bout FONCÉ de chaque dégradé a été éclairci : les initiales sont
     écrites en #16302B, et sur l'ancien bout foncé le contraste tombait à
     2,6 — illisible. Les vingt bouts portent maintenant leur texte à 4,5
     au moins. Les valeurs sont calculées, pas choisies à l'œil. */
  .av-c1{ background:linear-gradient(150deg,#F2DDA0,#D2A648); }  /* sable */
  .av-c2{ background:linear-gradient(150deg,#93D9C6,#5CA491); }  /* menthe */
  .av-c3{ background:linear-gradient(150deg,#ABA0E6,#9890C8); }  /* violet */
  .av-c4{ background:linear-gradient(150deg,#9FD6B8,#67A388); }  /* vert */
  .av-c5{ background:linear-gradient(150deg,#F0B189,#C68864); }  /* abricot */
  .av-c6{ background:linear-gradient(150deg,#9FC1E2,#789ABD); }  /* bleu */
  .av-c7{ background:linear-gradient(150deg,#8FD3D0,#5FA3A0); }  /* turquoise */
  .av-c8{ background:linear-gradient(150deg,#B9B2F0,#958ED3); }  /* indigo */
  .av-c9{ background:linear-gradient(150deg,#F3B9C9,#C98397); }  /* rose */
  .av-c10{ background:linear-gradient(150deg,#D8C9A8,#A89566); }  /* lin */
  /* Sur une carte survolée, l'avatar s'éclaire avec le reste. */
  .prof-card:hover .av, .ecole-carte:hover .av{
    box-shadow: 0 0 0 2px rgba(232,196,104,0.50), 0 6px 18px rgba(0,0,0,0.34);
  }
  @media(max-width:520px){ .av-lg{ width:78px; height:78px; font-size:27px; } }

  /* PRICING */
  .clarif-box{
    background:rgba(139,127,209,0.10); border:1px solid rgba(139,127,209,0.35); border-radius:12px;
    padding:14px 18px; margin-bottom:26px; font-size:13.5px; color:#B7ADEB; line-height:1.5;
  }
  .note-profs{ margin-top:14px; font-size:12.5px; color:var(--good); background:rgba(127,191,158,0.08); border:1px solid rgba(127,191,158,0.25); border-radius:10px; padding:11px 14px; line-height:1.5; }
  .pricing-cols{ display:grid; grid-template-columns:1fr 1fr; gap:36px; }
  .pricing-group-label{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px; margin-bottom:16px; color:var(--text-muted); }
  .plans{ display:flex; flex-direction:column; gap:14px; }
  .plan-card{
    background:var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:20px;
    position:relative;
  }
  .plan-card.reco{ border-color:var(--chalk-yellow); background:var(--bg-card-alt); }
  .plan-badge{
    position:absolute; top:-11px; right:16px; background:var(--chalk-yellow); color:var(--bg);
    font-family:'JetBrains Mono',monospace; font-size:10px; padding:3px 10px; border-radius:100px; font-weight:600;
  }
  /* flex-wrap et gap : sur un écran étroit, un nom de formule long
     (« École Essentielle — année ») poussait le prix hors de l'écran et faisait
     défiler toute la page sur le côté. Maintenant le prix passe à la ligne. */
  .plan-top{
    display:flex; align-items:baseline; justify-content:space-between;
    margin-bottom:10px; gap:10px; flex-wrap:wrap;
  }
  .plan-name{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:16px; }
  .plan-price{
    font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:19px;
    color:var(--chalk-yellow); white-space:nowrap;
  }
  .plan-price small{ font-family:'JetBrains Mono',monospace; font-weight:400; font-size:11px; color:var(--text-muted); }
  .plan-desc{ font-size:13px; color:var(--text-muted); margin-bottom:14px; }
  .plan-btn{
    width:100%; padding:10px; border-radius:10px; border:1px solid var(--border); background:transparent;
    color:var(--text); font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:13px; cursor:pointer;
  }
  .plan-btn.primary{ background:var(--chalk-yellow); color:var(--bg); border:none; }
  /* La carte « Famille — gratuit » est écrite en dur dans la page et son
     bouton est un lien, pas un <button> : sans ça il ne prendrait ni la
     largeur ni le centrage des autres boutons de formule. */
  a.plan-btn{ display:block; box-sizing:border-box; text-align:center; text-decoration:none; }

  /* PAYMENT FLOW */
  .payment-steps{ display:flex; flex-direction:column; gap:16px; margin-bottom:26px; }

  /* --- Nouveau parcours de paiement --- */
  .montant-hero{
    text-align:center; padding:20px; margin-bottom:22px; border-radius:16px;
    background:linear-gradient(160deg, rgba(232,196,104,0.14), rgba(232,196,104,0.05));
    border:1px solid rgba(232,196,104,0.3);
  }
  .montant-hero .lbl{
    font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--text-muted); margin-bottom:6px;
  }
  .montant-hero .val{
    font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:38px;
    color:var(--chalk-yellow); line-height:1;
  }
  .montant-hero .sub{ font-size:12.5px; color:var(--text-muted); margin-top:8px; }

  .etape-bloc{ margin-bottom:22px; }
  .etape-titre{
    display:flex; align-items:center; gap:10px; margin-bottom:12px;
    font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px;
  }
  .etape-num{
    width:26px; height:26px; border-radius:50%; background:var(--chalk-yellow); color:var(--bg);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:13px;
  }
  .etape-num.inactif{ background:var(--bg-card); color:var(--text-muted); border:1px solid var(--border); }
  .etape-bloc.verrouille{ opacity:0.45; pointer-events:none; }

  .moyens-choix{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .moyen-card{
    background:var(--bg-card); border:2px solid var(--border); border-radius:14px;
    padding:18px 14px; cursor:pointer; text-align:center; transition:all .18s ease;
  }
  .moyen-card:hover{ transform:translateY(-2px); border-color:rgba(232,196,104,0.5); }
  .moyen-card.actif{ border-color:var(--chalk-yellow); background:rgba(232,196,104,0.10); }
  .moyen-logo{
    width:46px; height:46px; border-radius:12px; margin:0 auto 10px;
    display:flex; align-items:center; justify-content:center;
    font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:20px; color:#fff;
  }
  .moyen-logo.bankily{ background:linear-gradient(140deg,#1B7F5C,#0F5C41); }
  .moyen-logo.masrivi{ background:linear-gradient(140deg,#C4562F,#9C3D1E); }
  .moyen-nom{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14.5px; }
  .moyen-check{ font-size:11px; color:var(--good); margin-top:4px; height:14px; }

  .numero-bloc{
    background:var(--bg); border:1px dashed rgba(232,196,104,0.45); border-radius:14px;
    padding:18px; text-align:center;
  }
  .numero-affiche{
    font-family:'JetBrains Mono',monospace; font-weight:600; font-size:27px;
    color:var(--chalk-yellow); letter-spacing:0.05em; margin:8px 0 14px; word-break:break-word;
  }
  .btn-copier{
    background:var(--chalk-yellow); color:var(--bg); border:none; border-radius:10px;
    padding:11px 22px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:13.5px;
    cursor:pointer; transition:opacity .15s ease;
  }
  .btn-copier:hover{ opacity:0.9; }
  .btn-copier.copie{ background:var(--good); }
  .rappel-motif{
    margin-top:14px; font-size:12.5px; color:var(--chalk-yellow-soft);
    background:rgba(232,196,104,0.08); border-radius:9px; padding:10px 14px;
  }
  @media(max-width:520px){
    .moyens-choix{ grid-template-columns:1fr; }
    .montant-hero .val{ font-size:32px; }
    .numero-affiche{ font-size:22px; }
  }
  .payment-step{ display:flex; gap:14px; }
  .payment-step-num{
    flex-shrink:0; width:26px; height:26px; border-radius:50%; background:var(--chalk-yellow);
    color:var(--bg); display:flex; align-items:center; justify-content:center;
    font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:13px;
  }
  .payment-step-title{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14.5px; margin-bottom:3px; }
  .payment-step-text{ font-size:13px; color:var(--text-muted); }
  .phone-highlight{
    font-family:'JetBrains Mono',monospace; font-size:20px; font-weight:600; color:var(--chalk-yellow);
    background:rgba(232,196,104,0.10); border:1px solid rgba(232,196,104,0.25);
    padding:8px 14px; border-radius:10px; display:inline-block; margin-top:8px; letter-spacing:0.03em;
  }

  @media(max-width:720px){
    .pricing-cols{ grid-template-columns:1fr; gap:26px; }
    .steps{ grid-template-columns:1fr; }
    .row2{ grid-template-columns:1fr; }
    .ledger-row{ grid-template-columns:1fr; gap:4px; }
    .pill{ justify-self:start; }

  }

  /* --- Menu replié ---------------------------------------------------
     Le repli se déclenche à 1000px et non à 720px : entre les deux, les
     liens tenaient sur l'écran mais débordaient sur deux ou trois lignes,
     ce qui donnait au site l'air cassé — pire qu'un menu replié. */
  @media(max-width:1000px){
    .menu-bouton{ display:flex; }
    /* Le sélecteur de langue sortait du menu replié avec le reste : un
       parent arabophone ouvrait le site sur son téléphone, voyait une page
       en français, et aucun bouton pour en changer. C'est précisément le
       visiteur le moins à l'aise qui restait bloqué. Il reste donc dans la
       barre, à côté du bouton de menu. */
    .lang-switch{ display:flex; order:1; margin-inline-start:auto; }
    .menu-bouton{ order:2; }
    nav{
      display:none; position:absolute; top:76px; right:16px; left:16px; z-index:50;
      background:var(--bg-card); border:1px solid var(--border); border-radius:16px;
      padding:10px; flex-direction:column; align-items:stretch; gap:0;
      box-shadow:0 18px 40px rgba(0,0,0,0.35);
    }
    nav.ouvert{ display:flex; }
    nav a{
      padding:13px 14px; border-radius:10px; font-size:15px;
      border-bottom:1px solid var(--border);
    }
    nav a:last-of-type{ border-bottom:none; }
    /* Dans le menu replié, les liens de compte redeviennent des lignes
       comme les autres : une pastille au milieu d'une liste jure. */
    .nav-compte{ border:none; border-bottom:1px solid var(--border); border-radius:10px; color:var(--chalk-yellow-soft); }
    .nav-moi{ border:none; border-bottom:1px solid var(--border); }
    .nav-deco{ text-align:start; padding:12px 4px; }
    .nav-sep{ display:none; }
  }

  /* --- Questions fréquentes --- */
  .faq-item{
    background:var(--bg-card); border:1px solid var(--border); border-radius:14px;
    padding:0; margin-bottom:10px; overflow:hidden;
  }
  .faq-item summary{
    cursor:pointer; padding:17px 20px; list-style:none;
    font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15.5px;
    display:flex; justify-content:space-between; align-items:center; gap:14px;
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary::after{
    content:"+"; color:var(--chalk-yellow); font-size:20px; flex-shrink:0; line-height:1;
  }
  .faq-item[open] summary::after{ content:"−"; }
  .faq-item summary:hover{ color:var(--chalk-yellow-soft); }
  .faq-item p{
    padding:0 20px 18px; color:var(--text-muted); font-size:14.5px; line-height:1.65;
  }

  /* --- Pages de texte légal --- */
  .page-texte{ max-width:760px; }
  .page-texte h2{ font-size:20px; margin:30px 0 10px; }
  .page-texte p, .page-texte li{ color:var(--text-muted); font-size:14.5px; line-height:1.7; margin-bottom:10px; }
  .page-texte ul{ padding-inline-start:22px; margin-bottom:14px; }
  .page-texte strong{ color:var(--text); }
  .page-texte .maj{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text-muted); }

  /* --- Grille de cases à cocher (quartiers, disponibilités) ---
     Deux colonnes sur téléphone : assez large pour être touchable au doigt,
     assez compact pour ne pas transformer le formulaire en tunnel. */
  .cases-grille{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px;
  }
  .case-option{
    display:flex; align-items:center; gap:9px; cursor:pointer;
    background:var(--bg); border:1px solid var(--border); border-radius:10px;
    padding:11px 13px; font-size:13.5px; transition:border-color .15s ease;
  }
  .case-option:hover{ border-color:rgba(232,196,104,0.4); }
  .case-option:has(input:checked){
    border-color:var(--chalk-yellow); background:rgba(232,196,104,0.08);
  }
  .case-option input{ accent-color:var(--chalk-yellow); width:17px; height:17px; flex-shrink:0; }

  .separateur-form{
    display:flex; align-items:center; gap:12px; margin:30px 0 20px;
    font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.07em;
    color:var(--chalk-yellow-soft);
  }
  .separateur-form::after{
    content:""; flex:1; height:1px; background:var(--border);
  }

  /* --- Étiquettes de modalité sur les cartes et les fiches --- */
  .badges-modalite{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
  .badge-mod{
    font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.02em;
    padding:3px 9px; border-radius:100px; white-space:nowrap;
    background:rgba(127,191,158,0.14); color:var(--good);
  }
  .badge-mod.en-ligne{ background:rgba(139,127,209,0.18); color:var(--violet); }
  .badge-mod.neutre{ background:var(--bg); color:var(--text-muted); border:1px solid var(--border); }

  .fiche-bloc{
    border-top:1px solid var(--border); margin-top:18px; padding-top:16px;
  }
  .fiche-bloc h4{
    font-family:'Space Grotesk',sans-serif; font-size:13.5px; margin-bottom:9px;
  }
  .fiche-detail{
    display:flex; gap:10px; font-size:13.5px; color:var(--text-muted);
    padding:4px 0; align-items:flex-start;
  }
  .fiche-detail .icone{ flex-shrink:0; }
  .fiche-detail strong{ color:var(--text); font-weight:500; }

  /* --- Lignes de filtres de l'annuaire --- */
  .filtre-ligne{
    display:flex; align-items:baseline; gap:14px; margin-bottom:12px; flex-wrap:wrap;
  }
  .filtre-titre{
    font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.06em;
    color:var(--text-muted); min-width:64px; text-transform:uppercase;
  }
  .filtre-ligne .annuaire-filtres{ margin-bottom:0; flex:1; }
  @media(max-width:520px){
    .filtre-ligne{ gap:6px; }
    .filtre-titre{ min-width:0; width:100%; }
  }

  /* --- Offres d'emploi --- */
  .offres-liste{ display:flex; flex-direction:column; gap:14px; }
  .offre-carte{
    background:var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:20px;
  }
  .offre-tete{ display:flex; gap:14px; align-items:center; margin-bottom:12px; }
  .offre-poste{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:18px; line-height:1.25; }
  .offre-ecole{ color:var(--chalk-yellow-soft); font-size:14px; margin-top:2px; }
  .offre-desc{ font-size:14px; line-height:1.6; color:var(--text-muted); margin-top:12px; }
  .offre-bas{
    display:flex; gap:16px; flex-wrap:wrap; align-items:center;
    margin-top:14px; padding-top:13px; border-top:1px solid var(--border); font-size:13.5px;
  }
  .offre-salaire{ font-family:'Space Grotesk',sans-serif; font-weight:700; color:var(--teal); }
  .offre-date{ color:var(--text-muted); }

  /* --- Formules école : cartes un peu plus larges que celles des familles --- */
  .plan-card.recommandee{ border-color:rgba(232,196,104,0.55); }

  /* --- Cartes d'établissements --- */
  .ecole-carte{
    display:block; text-decoration:none; color:inherit; position:relative;
    background:var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:18px;
    transition:transform .15s ease, border-color .15s ease;
  }
  .ecole-carte:hover{ transform:translateY(-3px); border-color:rgba(232,196,104,0.55); }
  .ecole-carte.avant{ border-color:rgba(232,196,104,0.45); }
  /* Le logo d'un établissement est son enseigne : il mérite de la place.
     À 48 px et 12 px d'écart, il paraissait coincé contre le nom. */
  .ecole-tete{ display:flex; gap:15px; align-items:center; margin-bottom:14px; }
  .ecole-tete .av{ flex:0 0 auto; }
  .ecole-tete .av-md{ width:62px; height:62px; font-size:22px; border-radius:15px; }
  /* Un logo n'est pas un visage : « cover » en rognait les bords et le
     texte de l'enseigne disparaissait. « contain » le montre en entier,
     avec un peu d'air autour. */
  .ecole-tete img.av{ object-fit:contain; padding:6px; background:var(--bg-card-alt); }
  .ecole-logo img.av{ object-fit:contain; padding:9px; background:var(--bg-card-alt); }
  @media(max-width:520px){ .ecole-tete .av-md{ width:54px; height:54px; font-size:19px; } }
  .ecole-nom{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:16.5px; line-height:1.25; }
  .ecole-meta{ color:var(--chalk-yellow-soft); font-size:13px; margin-top:2px; }
  .ecole-desc{ font-size:13.5px; color:var(--text-muted); line-height:1.55; margin-top:10px; }
  .ecole-bas{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-top:11px; font-size:13px; }
  .ecole-frais{ font-family:'Space Grotesk',sans-serif; font-weight:700; color:var(--teal); }
  .ecole-detail{ color:var(--text-muted); }

  /* --- Bandeau de chiffres réels (accueil) --- */
  .chiffres-bande{ position:relative; z-index:2; padding:6px 24px 30px; }
  .chiffres-grille{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:14px;
    background:var(--bg-card); border:1px solid var(--border); border-radius:18px; padding:22px;
  }
  .chiffre{ text-align:center; }
  .chiffre-valeur{
    font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:28px;
    color:var(--chalk-yellow); line-height:1.1;
  }
  .chiffre-label{
    font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.05em;
    color:var(--text-muted); text-transform:uppercase; margin-top:6px;
  }

  /* ═══════════════════════════════════════════════════════════════════
     FICHE PUBLIQUE D'UN ÉTABLISSEMENT (/etablissements/:id)
     Ce qu'une famille doit voir en trois secondes : qui est l'école,
     qu'elle est vérifiée, ses niveaux et ses frais, et comment s'inscrire.
     ═══════════════════════════════════════════════════════════════════ */
  .ecole-page{ position:relative; z-index:2; max-width:1080px; margin:0 auto; padding:26px 24px 64px; }
  .ecole-page .fil-ariane{ max-width:none; }

  .ecole-hero{ position:relative; border-radius:22px; overflow:hidden; border:1px solid var(--border);
    background:var(--bg-card); box-shadow:0 20px 50px -30px rgba(0,0,0,.6); }
  .ecole-couverture{ height:128px;
    background:
      radial-gradient(600px 220px at 12% 0%, rgba(232,196,104,.30), transparent 65%),
      radial-gradient(500px 240px at 95% 120%, rgba(111,194,174,.22), transparent 60%),
      linear-gradient(120deg, #24503F, #1B3B34 55%, #1E4038);
    position:relative; }
  .ecole-couverture::after{ content:""; position:absolute; inset:0; opacity:.55;
    background-image:linear-gradient(rgba(242,239,228,.05) 1px, transparent 1px),
                     linear-gradient(90deg, rgba(242,239,228,.05) 1px, transparent 1px);
    background-size:26px 26px; }
  .ecole-identite{ display:flex; gap:22px; align-items:flex-end; padding:0 30px 26px; margin-top:-48px; position:relative; }
  .ecole-logo{ flex-shrink:0; padding:5px; border-radius:20px; background:var(--bg-card); box-shadow:0 10px 30px -10px rgba(0,0,0,.55); }
  .ecole-logo .av-lg{ width:108px; height:108px; }
  .ecole-titres{ min-width:0; padding-bottom:2px; }
  .ecole-hero .ecole-nom{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(23px, 3vw, 32px); letter-spacing:-.015em; line-height:1.15; }
  .ecole-hero .ecole-meta{ display:flex; flex-wrap:wrap; gap:6px; color:var(--chalk-yellow-soft); font-size:14.5px; margin:6px 0 12px; }
  .ecole-hero .ecole-meta .point{ opacity:.5; }
  .ecole-badges{ display:flex; flex-wrap:wrap; gap:8px; }
  .ecole-badge{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:100px; font:600 12.5px 'Space Grotesk',sans-serif;
    border:1px solid var(--border); background:rgba(242,239,228,.05); color:var(--text); text-decoration:none; }
  .ecole-badge.verifie{ color:#A9E0C5; background:rgba(127,191,158,.12); border-color:rgba(127,191,158,.35); }
  .ecole-badge.ouvert i{ width:7px; height:7px; border-radius:50%; background:var(--good); box-shadow:0 0 0 3px rgba(127,191,158,.22); }
  .ecole-badge.ferme{ color:var(--text-muted); }
  .ecole-badge.poste:hover{ border-color:var(--chalk-yellow); }

  .ecole-grille{ display:grid; grid-template-columns:minmax(0,1fr) 370px; gap:22px; margin-top:22px; align-items:start; }
  .ecole-principal{ display:flex; flex-direction:column; gap:18px; min-width:0; }

  /* Des tuiles qui s'étirent pour remplir la ligne : aucun trou, quelles
     que soient les informations que l'école a remplies. */
  .ecole-chiffres{ display:flex; flex-wrap:wrap; gap:12px; }
  .ecole-chiffres .chiffre{ flex:1 1 150px; background:var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:16px 18px; text-align:start; }
  .ecole-chiffres .chiffre.large{ flex:2 1 260px; }
  .ecole-chiffres .chiffre small{ display:block; font:600 11px 'Space Grotesk',sans-serif; letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted); margin-bottom:8px; }
  .ecole-chiffres .chiffre strong{ display:block; font:700 22px 'Space Grotesk',sans-serif; color:var(--text); letter-spacing:-.01em; }
  .ecole-chiffres .chiffre em{ font-style:normal; color:var(--text-muted); font-size:13px; }
  .ecole-chiffres .puces{ display:flex; flex-wrap:wrap; gap:6px; }
  .ecole-chiffres .puces span{ padding:5px 11px; border-radius:9px; font:600 13px 'Space Grotesk',sans-serif; color:#BFE3D5; background:rgba(111,194,174,.12); border:1px solid rgba(111,194,174,.25); }
  .ecole-chiffres .puces.violet span{ color:#CFC8F4; background:rgba(139,127,209,.14); border-color:rgba(139,127,209,.32); }

  .ecole-bloc{ background:var(--bg-card); border:1px solid var(--border); border-radius:18px; padding:22px 24px; }
  .ecole-bloc h2{ font:700 17px 'Space Grotesk',sans-serif; margin-bottom:12px; }
  .ecole-texte{ font-size:15.5px; line-height:1.7; white-space:pre-line; }
  .ecole-liste{ list-style:none; display:grid; gap:10px; }
  .ecole-liste li{ display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--text); }
  .ecole-liste .ic{ width:30px; height:30px; flex-shrink:0; border-radius:9px; display:grid; place-items:center; background:rgba(242,239,228,.05); font-size:14px; }
  .ecole-liste li > span:last-child, .ecole-liste a{ padding-top:5px; }
  .ecole-liste a{ color:var(--chalk-yellow); word-break:break-all; }
  .ecole-en-cours{ display:flex; gap:14px; align-items:flex-start; border-style:dashed; }
  .ecole-en-cours-icone{ width:38px; height:38px; flex-shrink:0; border-radius:11px; display:grid; place-items:center; background:rgba(232,196,104,.12); color:var(--chalk-yellow); font-size:18px; }
  .ecole-en-cours strong{ font-family:'Space Grotesk',sans-serif; display:block; margin-bottom:4px; }
  .ecole-en-cours p{ color:var(--text-muted); font-size:14px; line-height:1.6; }

  .ecole-postes{ display:grid; gap:10px; }
  .ecole-poste{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:13px; border:1px solid var(--border); text-decoration:none; color:var(--text);
    background:rgba(242,239,228,.03); transition:border-color .15s, transform .15s; }
  .ecole-poste:hover{ border-color:var(--chalk-yellow); transform:translateY(-1px); }
  .ecole-poste .txt{ flex:1; display:flex; flex-direction:column; }
  .ecole-poste small{ color:var(--text-muted); font-size:13px; }
  .ecole-poste .fleche{ color:var(--chalk-yellow); }

  .ecole-inscription{ position:sticky; top:20px; }
  .ecole-carte-inscription{ background:linear-gradient(180deg, #22493F, var(--bg-card)); border:1px solid rgba(232,196,104,.28); border-radius:20px;
    padding:24px; box-shadow:0 24px 50px -28px rgba(0,0,0,.7); }
  .ecole-carte-inscription h2{ font:700 19px 'Space Grotesk',sans-serif; margin-bottom:12px; }
  .ecole-inscription-intro{ color:var(--text-muted); font-size:14px; line-height:1.6; margin-bottom:14px; }
  .ecole-etapes{ list-style:none; display:grid; gap:9px; margin-bottom:18px; }
  .ecole-etapes li{ display:flex; gap:10px; align-items:center; font-size:14px; }
  .ecole-etapes b{ width:24px; height:24px; flex-shrink:0; border-radius:50%; display:grid; place-items:center; font:700 12px 'Space Grotesk',sans-serif;
    color:var(--bg); background:var(--chalk-yellow); }
  .ecole-carte-inscription .field label{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:13px; color:var(--text); letter-spacing:0; }
  .ecole-rassurance{ display:flex; gap:8px; align-items:flex-start; margin-top:16px; padding-top:14px; border-top:1px solid var(--border);
    color:var(--text-muted); font-size:12.5px; line-height:1.5; }
  .ecole-rassurance svg{ flex-shrink:0; margin-top:1px; color:var(--good); }
  .ecole-retour{ text-align:center; margin-top:26px; }

  /* ═══ Le formulaire d'inscription, ouvert à tous ═══
     Il est plus long qu'avant — il porte maintenant les coordonnées et le
     mot de passe — et c'est exactement pour cela qu'il doit se lire par
     blocs : « qui s'inscrit », « l'élève », « vos coordonnées ». Un mur de
     douze champs identiques est un mur qu'on ne franchit pas. */
  .insc-bascule{ display:flex; gap:8px; flex-wrap:wrap; }
  .insc-bascule label{
    flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:center; gap:7px;
    padding:10px 8px; border-radius:11px; cursor:pointer; font-size:13.5px;
    /* Sur la colonne étroite de la fiche, « Mon enfant » se coupait en deux
       lignes et les deux boutons n'avaient plus la même hauteur. */
    white-space:nowrap;
    border:1px solid var(--border); background:rgba(255,255,255,.04);
  }
  /* :has() plutôt qu'une classe posée par le script : la case cochée est
     déjà la source de vérité, et deux sources finissent toujours par se
     contredire. Les navigateurs qui l'ignorent voient simplement deux
     boutons radio ordinaires — rien n'est cassé. */
  .insc-bascule label:has(input:checked){
    border-color:var(--chalk-yellow); background:rgba(232,196,104,.14); font-weight:600;
  }
  /* « width:auto » : la règle générale met tous les champs à 100 %, et le
     bouton radio s'étirait en un long rectangle bleu à côté de son texte. */
  .insc-bascule input{ width:auto; flex:none; margin:0; accent-color:var(--chalk-yellow); }

  .insc-separateur{
    display:flex; align-items:center; gap:10px; margin:22px 0 14px;
    font:600 10.5px 'JetBrains Mono',monospace; letter-spacing:.07em; color:var(--text-muted);
  }
  .insc-separateur::after{ content:""; flex:1; height:1px; background:var(--border); }

  .insc-case{
    display:flex; gap:9px; align-items:flex-start; margin:14px 0 4px;
    font-size:13.5px; line-height:1.5; cursor:pointer;
  }
  .insc-case input{ width:auto; flex:none; margin-top:2px; accent-color:var(--chalk-yellow); }
  .insc-suite{ margin-top:10px; font-size:13.5px; line-height:1.6; color:var(--text-muted); }
  .insc-deja{ text-align:center; margin-top:12px; font-size:13px; }

  /* Le champ-piège : masqué, mais pas en display:none — un robot un peu
     sérieux ignore ce qui est en display:none. Masqué par DÉCOUPE, et non
     par un « left:-9999px » : en arabe (lecture de droite à gauche), une
     position négative élargit la zone de défilement et fait déborder toute
     la page sur le côté. C'est la même technique que « .saut-contenu »,
     et pour exactement la même raison. */
  .insc-piege{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  }

  @media (max-width: 900px){
    .ecole-grille{ grid-template-columns:1fr; }
    .ecole-inscription{ position:static; }
  }
  @media (max-width: 560px){
    .ecole-page{ padding:18px 16px 48px; }
    .ecole-couverture{ height:92px; }
    .ecole-identite{ flex-direction:column; align-items:flex-start; gap:12px; padding:0 18px 20px; margin-top:-44px; }
    .ecole-logo .av-lg{ width:84px; height:84px; font-size:28px; }
    .ecole-chiffres .chiffre{ flex-basis:40%; }
    .ecole-chiffres .chiffre.large{ flex-basis:100%; }
    .ecole-hero .ecole-meta .point{ display:none; }
    .ecole-hero .ecole-meta{ flex-direction:column; gap:2px; }
    .ecole-bloc, .ecole-carte-inscription{ padding:18px; }
  }

/* ═══════════ LES NIVEAUX D'UN ÉTABLISSEMENT ═══════════

   Une liste que le directeur compose lui-même : chaque niveau est une
   puce qu'il peut retirer, et une case en dessous pour en ajouter.
   Des cases à cocher auraient été plus simples à écrire, mais elles
   supposent une liste connue d'avance — c'est précisément ce dont on
   sort. Les puces montrent SA liste, dans SON ordre.

   Servent sur la page d'inscription et dans l'espace établissement :
   mêmes classes, même apparence, un seul endroit à corriger. */
.niv-aide{ font-size:12.5px; color:var(--text-muted); line-height:1.5; margin:-2px 0 10px; }
.niv-liste{ display:flex; flex-wrap:wrap; gap:8px; }
.niv-liste:empty{ display:none; }
.niv-puce{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 8px 7px 13px; border-radius:100px;
  background:rgba(37,99,235,.07); border:1px solid rgba(37,99,235,.22);
  font-size:13.5px; line-height:1.2; color:var(--encre, #0E2A47);
  max-width:100%; overflow-wrap:anywhere;
}
.niv-retirer{
  flex:none; width:22px; height:22px; border:0; border-radius:50%;
  background:rgba(37,99,235,.14); color:#1D4ED8;
  font-size:17px; line-height:1; cursor:pointer; padding:0;
  display:grid; place-items:center;
}
.niv-retirer:hover{ background:rgba(220,38,38,.16); color:#B91C1C; }
.niv-ajout{ display:flex; gap:8px; margin-top:10px; }
.niv-ajout input{ flex:1 1 auto; min-width:0; }
.niv-bouton{
  flex:none; font:inherit; font-size:13.5px; font-weight:600; cursor:pointer;
  padding:0 16px; border-radius:10px;
  background:rgba(37,99,235,.1); border:1px solid rgba(37,99,235,.28); color:#1D4ED8;
}
.niv-bouton:hover{ background:rgba(37,99,235,.18); }
.niv-vide{ font-size:12.5px; color:var(--bad, #B91C1C); margin-top:8px; }

/* Un bloc que l'on ouvre si on en a besoin. Les filières et les promotions
   ne concernent que les centres de formation : les montrer dépliées à un
   directeur d'école primaire lui fait croire qu'il a des champs à remplir. */
.bloc-repliable{
  border:1px solid var(--trait, rgba(14,42,71,.12)); border-radius:12px;
  padding:12px 14px; margin:4px 0 18px; background:rgba(14,42,71,.02);
}
.bloc-repliable > summary{
  cursor:pointer; font-size:13.5px; font-weight:600;
  color:var(--encre, #0E2A47); list-style:none;
}
.bloc-repliable > summary::-webkit-details-marker{ display:none; }
.bloc-repliable > summary::before{ content:"▸ "; color:var(--text-muted); }
.bloc-repliable[open] > summary::before{ content:"▾ "; }
.bloc-repliable > summary:hover{ color:#1D4ED8; }