/* 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; }
  .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; }
  .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; }
  .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; }
  .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;
  }
  .av-c1{ background:linear-gradient(150deg,#F2DDA0,#D2A648); }
  .av-c2{ background:linear-gradient(150deg,#93D9C6,#4E9C88); }
  .av-c3{ background:linear-gradient(150deg,#ABA0E6,#6A5FB0); }
  .av-c4{ background:linear-gradient(150deg,#9FD6B8,#5A9B7E); }
  .av-c5{ background:linear-gradient(150deg,#F0B189,#BF7850); }
  .av-c6{ background:linear-gradient(150deg,#9FC1E2,#5A83AE); }
  /* 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; }
    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; }
    .lang-switch{ margin:10px 14px 4px; align-self:flex-start; }
  }

  /* --- 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; }

  @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; }
  }