/* ═══════════════════════════════════════════════════════════════════════
   NAJAH — THÈME CLAIR DU SITE PUBLIC
   ═══════════════════════════════════════════════════════════════════════

   Cette feuille s'ajoute à najah.css et n'est chargée QUE par les pages
   publiques. Les quatre espaces connectés (famille, professeur,
   établissement, élève) ne la chargent pas : ils gardent le vert, intact,
   et on les reprendra séparément. C'est ce qui rend ce changement
   réversible — il suffit de retirer une ligne pour revenir en arrière.

   DEUX PORTÉES, et il faut les distinguer :

   « body.clair »          — les couleurs, les polices, les champs de
                             formulaire, le focus. Tout ce qui doit valoir
                             PARTOUT : site public comme espaces connectés.
   « body.page-publique »  — la mise en page du site public seulement :
                             échelle des titres, en-tête, accueil, cartes
                             de professeurs, pied de page. Les espaces
                             connectés ont leur propre mise en page ; leur
                             imposer celle-ci faisait un titre de 48 px
                             au-dessus du nom d'un élève.

   On ne s'accroche jamais à la classe « site » : school-dashboard.html la
   porte aussi, alors que ce n'est pas une page publique.

   ─── Les couleurs ───
   encre    #0E2A47  les titres et le logo
   bleu     #2563EB  tout ce sur quoi on clique
   ciel     #EAF1FE  les surfaces teintées, le fond de l'accueil
   brume    #F5F8FC  une section sur deux
   sable    #E9A23B  l'accent chaud — l'ancien jaune craie de Najah, gardé
                     pour que la marque reste reconnaissable
   ═══════════════════════════════════════════════════════════════════════ */

body.clair{
  --encre:#0E2A47;
  --bleu:#2563EB;
  --bleu-sombre:#1D4ED8;
  --ciel:#EAF1FE;
  --brume:#F5F8FC;
  --papier:#FFFFFF;
  --trait:#E2E9F2;
  --gris:#55708C;
  --sable:#E9A23B;
  /* Assez foncés pour se lire SUR LEUR PROPRE FOND PÂLE : à #15803D,
     « Prof assigné » tombait à 4,38 sur son vert à 10 %. */
  --vert:#13643A;
  --ambre:#C2690A;
  --ombre:0 1px 2px rgba(14,42,71,.04), 0 10px 30px rgba(14,42,71,.07);
  --ombre-haute:0 2px 4px rgba(14,42,71,.05), 0 18px 46px rgba(14,42,71,.11);

  /* Les noms de l'ancien système, redéfinis : tout ce qui écrit
     « var(--bg) » ou « var(--chalk-yellow) » suit sans être retouché. */
  --bg:var(--papier);
  --bg-card:var(--papier);
  --bg-card-alt:var(--brume);
  --chalk-yellow:var(--bleu);
  --chalk-yellow-soft:var(--bleu-sombre);
  --violet:#6D5BD0;
  --text:var(--encre);
  --text-muted:var(--gris);
  --border:var(--trait);
  --good:var(--vert);
  --bad:#B33A3A;
  --teal:var(--bleu);

  background:var(--papier);
  color:var(--encre);
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

body.page-publique .wrap{ max-width:1140px; }

/* ─── Les titres ───
   Space Grotesk serrée pour les titres, Inter pour tout le reste. Deux
   familles, deux rôles, rien de plus. */
body.page-publique h1, body.page-publique h2, body.page-publique h3,
body.page-publique .display, body.page-publique .logo-text{
  font-family:'Space Grotesk', system-ui, sans-serif;
  color:var(--encre);
  letter-spacing:-0.025em;
  line-height:1.15;
}
body.page-publique h1{ font-size:clamp(32px, 5vw, 48px); font-weight:700; }
body.page-publique h1 em{ font-style:normal; color:var(--bleu); }
body.page-publique h2{ font-size:clamp(25px, 3.4vw, 34px); font-weight:700; }
body.page-publique h3{ font-size:19px; font-weight:600; letter-spacing:-0.015em; }
body.page-publique .mono{ font-family:'Inter', system-ui, sans-serif; }

/* L'ancien système mettait les intitulés de section en petites capitales
   espacées. Sur fond clair c'est bruyant et ça ne dit rien de plus : on
   garde le texte, en gris, à sa taille normale. */
body.page-publique .section-label{
  font-family:'Inter', system-ui, sans-serif;
  font-size:14px; font-weight:600; letter-spacing:0;
  text-transform:none; color:var(--bleu); margin-bottom:8px;
}
body.page-publique .section-head{ margin-bottom:34px; }
body.page-publique .hero-sub{ font-size:17px; color:var(--gris); line-height:1.65; max-width:62ch; }

/* ─── L'en-tête ───
   Blanc, collé en haut, avec un filet qui n'apparaît qu'une fois la page
   déroulée (voir commun.js). */
/* La barre blanche va d'un bord à l'autre de l'écran ; son contenu, lui,
   reste aligné sur le reste de la page. D'où le conteneur intérieur. */
body.page-publique header{
  background:rgba(255,255,255,.90);
  backdrop-filter:saturate(1.6) blur(10px);
  -webkit-backdrop-filter:saturate(1.6) blur(10px);
  border-bottom:1px solid transparent;
  position:sticky; top:0; z-index:100;
  padding:13px 24px;
  max-width:none; margin:0;
  display:block;
  transition:border-color .2s, box-shadow .2s;
}
/* Le filet n'apparaît qu'une fois la page déroulée : en haut, la barre se
   fond dans le dégradé de l'accueil. */
body.clair header.pose{ border-bottom-color:var(--trait); box-shadow:0 6px 24px rgba(14,42,71,.05); }
body.page-publique .entete-interieur{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; width:100%; max-width:1140px; margin:0 auto;
}
body.page-publique .logo-mark{
  width:36px; height:36px; border-radius:11px;
  background:linear-gradient(150deg, #3B82F6, var(--bleu));
  color:#fff; font-size:17px;
  box-shadow:0 4px 12px rgba(37,99,235,.3);
}
body.page-publique .logo-text{ font-size:21px; color:var(--encre); }
body.page-publique nav{ gap:26px; }
body.page-publique nav a{
  color:var(--gris); text-decoration:none; font-size:15px; font-weight:500;
  padding:6px 0; border-bottom:2px solid transparent;
}
body.page-publique nav a:hover{ color:var(--encre); }
body.page-publique nav a.actif{ color:var(--bleu); border-bottom-color:var(--bleu); font-weight:600; }
body.page-publique .nav-sep{ display:none; }

/* « Se connecter » en simple lien, « Créer un compte » en bouton plein :
   la hiérarchie dit lequel des deux on attend de vous. */
body.page-publique .nav-compte{
  border:none; border-radius:10px; padding:9px 0; background:none;
  color:var(--encre); font-weight:600; font-size:15px;
}
body.page-publique .nav-compte:hover{ color:var(--bleu); border:none; }
body.page-publique .nav-inscription{
  background:var(--bleu); color:#fff; border-radius:10px;
  padding:10px 18px; font-weight:600; font-size:15px; text-decoration:none;
  white-space:nowrap; border:none;
}
body.page-publique .nav-inscription:hover{ background:var(--bleu-sombre); color:#fff; }
body.page-publique .nav-moi{
  border:1px solid var(--trait); border-radius:100px; padding:5px 14px 5px 5px;
  background:var(--papier); color:var(--encre);
}
body.page-publique .nav-moi:hover{ border-color:var(--bleu); color:var(--bleu); }
body.page-publique .pastille-moi{ background:var(--ciel); color:var(--bleu); font-weight:700; }
body.page-publique .nav-deco{ color:var(--gris); font-weight:500; }
body.page-publique .nav-deco:hover{ color:var(--bleu); }
body.page-publique .lang-switch{ background:var(--brume); border-color:var(--trait); }
body.page-publique .lang-btn{ color:var(--gris); font-family:'Inter', sans-serif; font-weight:500; }
body.clair .lang-btn.active{ background:var(--bleu); color:#fff; }
body.page-publique .menu-bouton span{ background:var(--encre); }

/* ─── Les boutons ─── */
body.clair .btn{
  font-family:'Inter', system-ui, sans-serif;
  border-radius:11px; padding:13px 22px; font-size:15px; font-weight:600;
  border:1px solid transparent; letter-spacing:0;
}
body.clair .btn-primary{ background:var(--bleu); color:#fff; box-shadow:0 6px 18px rgba(37,99,235,.22); }
body.clair .btn-primary:hover{ background:var(--bleu-sombre); }
body.clair .btn-ghost{ background:var(--papier); color:var(--encre); border-color:var(--trait); }
body.clair .btn-ghost:hover{ border-color:var(--bleu); color:var(--bleu); }
/* Un bouton ne saute pas sous le doigt : seule la couleur répond. */
body.clair .btn:hover{ transform:none; }
body.clair .submit-btn, body.clair .plan-btn.primary{
  background:var(--bleu); color:#fff; border:none; border-radius:11px;
  font-family:'Inter', sans-serif; font-weight:600;
}
body.clair .submit-btn:hover{ background:var(--bleu-sombre); opacity:1; }
body.clair .plan-btn{ border-radius:11px; font-family:'Inter', sans-serif; font-weight:600; }

/* ─── L'accueil ───
   Le seul endroit où l'on hausse la voix : un grand titre, une
   illustration, deux pastilles posées dessus. Tout le reste de la page
   reste calme. */
body.page-publique .hero{
  background:
    radial-gradient(90% 120% at 82% 18%, rgba(37,99,235,.10) 0%, rgba(37,99,235,0) 58%),
    linear-gradient(180deg, var(--ciel) 0%, #F7FAFF 62%, var(--papier) 100%);
  padding:72px 24px 56px;
}
body.clair .hero-grille{ grid-template-columns:1.02fr .98fr; gap:48px; }
body.clair .hero-texte h1{ margin-bottom:18px; }
body.page-publique .eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--papier); border:1px solid var(--trait); border-radius:100px;
  padding:7px 15px; font-size:13.5px; font-weight:600; color:var(--encre);
  box-shadow:0 2px 8px rgba(14,42,71,.05); margin-bottom:22px;
  font-family:'Inter', sans-serif; letter-spacing:0; text-transform:none;
}
body.clair .eyebrow-dot{ background:var(--vert); }

/* Le bloc illustration : l'image, et deux pastilles qui disent ce que le
   site fait pour vous. Elles sont posées en pourcentage pour rester au
   bon endroit quelle que soit la taille de l'écran. */
body.page-publique .hero-visuel{ position:relative; }
body.page-publique .hero-illus{ width:100%; height:auto; display:block; }
/* La photo d'en-tête. Encadrée et arrondie plutôt qu'en fond pleine
   largeur : le titre garde son fond clair et reste lisible.
   « aspect-ratio » fixe la place AVANT que l'image n'arrive, pour que la
   page ne saute pas sous les yeux quand elle finit de charger. */
body.page-publique .hero-image{
  width:100%; height:auto; display:block; aspect-ratio:509/257; object-fit:cover;
  border-radius:20px; box-shadow:var(--ombre-haute);
}
body.page-publique .hero-pastille{
  position:absolute; display:flex; align-items:center; gap:10px;
  background:var(--papier); border:1px solid var(--trait); border-radius:14px;
  padding:11px 14px; box-shadow:var(--ombre-haute); font-size:13px;
  line-height:1.35; max-width:min(66%, 252px);
}
body.page-publique .hero-pastille .rond{
  width:30px; height:30px; border-radius:9px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; font-size:15px;
  background:var(--ciel);
}
body.page-publique .hero-pastille strong{ display:block; font-weight:600; color:var(--encre); font-size:13px; }
body.page-publique .hero-pastille span{ color:var(--gris); font-size:12px; line-height:1.4; }
/* Posées là où elles ne cachent rien : l'une déborde sous le bureau,
   l'autre occupe le coin laissé libre par le carnet retiré du dessin. */
/* Posée plus bas, elle déborde sous la photo au lieu de couvrir les
   visages des élèves. */
body.page-publique .pastille-lieu{ inset-inline-start:-22px; bottom:-13%; }
body.page-publique .pastille-progres{ inset-inline-end:-8px; top:2%; }
body.page-publique .hero-pastille .jauge{ display:block; height:6px; border-radius:100px; background:var(--ciel); margin-top:7px; }
body.page-publique .hero-pastille .jauge i{ display:block; height:100%; border-radius:100px; background:var(--bleu); }
@media(max-width:900px){
  body.page-publique .hero{ padding:40px 20px 36px; }
  body.clair .hero-grille{ grid-template-columns:1fr; gap:28px; }
  /* Sur téléphone les pastilles reviennent dans le flux : posées sur une
     image deux fois plus petite, elles la recouvraient entièrement. */
  body.page-publique .hero-pastille{ position:static; max-width:none; margin-top:10px; box-shadow:var(--ombre); }
  body.page-publique .hero-visuel{ display:flex; flex-direction:column; }
}

/* ─── Le bandeau de réassurance, sous l'accueil ─── */
body.page-publique .chiffres-bande{ background:var(--papier); border-top:1px solid var(--trait); padding:30px 24px; }
body.page-publique .chiffres-grille{ gap:26px; }
body.page-publique .chiffre-valeur{ font-family:'Space Grotesk', sans-serif; color:var(--encre); }
body.page-publique .chiffre-label{ color:var(--gris); font-family:'Inter', sans-serif; font-size:13.5px; letter-spacing:0; text-transform:none; }

/* ─── Les sections ───
   Une sur deux sur fond brume : c'est la seule chose qui sépare les
   sections, pas de filets ni de grands blancs. */
body.page-publique .block{ padding:64px 24px; }
body.page-publique .block:nth-of-type(even){ background:var(--brume); }
@media(max-width:700px){ body.page-publique .block{ padding:44px 20px; } }

/* ─── Les cartes ───
   Un seul traitement : blanc, filet fin, ombre douce. Au survol, le filet
   bleuit et l'ombre s'ouvre — la carte ne saute pas. */
body.page-publique .step, body.page-publique .plan-card,
body.page-publique .prof-card, body.page-publique .ecole-carte, body.page-publique .fiche,
body.page-publique .espace-carte, body.page-publique .moyen-card, body.page-publique .clarif-box,
body.clair .form-card{
  background:var(--papier); border:1px solid var(--trait); border-radius:16px;
  box-shadow:var(--ombre);
}
body.page-publique .prof-card:hover, body.page-publique .ecole-carte:hover,
body.page-publique .espace-carte:hover, body.page-publique .moyen-card:hover{
  transform:none; border-color:var(--bleu); box-shadow:var(--ombre-haute);
}
body.page-publique .step{ padding:26px; }
body.page-publique .step-num{
  font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:14px;
  color:var(--bleu); background:var(--ciel); width:34px; height:34px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
body.page-publique .step p{ color:var(--gris); font-size:14.5px; }

/* ─── Le relevé de l'accueil ─── */
body.page-publique .ledger{
  background:var(--papier); border:1px solid var(--trait); border-radius:18px;
  box-shadow:var(--ombre); padding:8px 22px;
}
body.page-publique .ledger-title{ border-bottom:1px solid var(--trait); }
body.page-publique .ledger-title span{ font-family:'Inter', sans-serif; text-transform:none; letter-spacing:0; font-size:13.5px; }
body.page-publique .ledger-row{ border-bottom:1px solid var(--trait); }
body.page-publique .ledger-row .subject{ font-family:'Space Grotesk', sans-serif; color:var(--encre); }
body.page-publique .ledger-row .muted{ color:var(--gris); }
body.page-publique .pill{
  background:rgba(21,128,61,.10); color:var(--vert); border:1px solid rgba(21,128,61,.22);
  font-family:'Inter', sans-serif; font-weight:600;
}

/* ─── Les cartes de professeurs ───
   Ordre de lecture voulu : qui c'est, ce qu'il enseigne, ce qu'en disent
   les familles, combien ça coûte. Le tarif est poussé en bas par
   « margin-top:auto », pour que toutes les cartes d'une rangée l'alignent
   même si les présentations n'ont pas la même longueur. */
body.page-publique .annuaire-grille{ grid-template-columns:repeat(auto-fill, minmax(min(282px, 100%), 1fr)); gap:18px; }
body.page-publique .prof-card{ padding:22px; display:flex; flex-direction:column; }
body.page-publique .prof-top{ gap:14px; margin-bottom:14px; align-items:center; }
body.page-publique .prof-nom{ display:flex; align-items:center; gap:6px; }
body.page-publique .prof-verifie{
  color:var(--vert); font-size:12px; font-weight:700; flex:0 0 auto;
  background:rgba(21,128,61,.12); width:17px; height:17px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
}
body.page-publique .prof-note{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin:12px 0 0; }
body.page-publique .prof-note .etoiles{ color:var(--ambre); letter-spacing:1px; }
body.page-publique .prof-niveaux{ margin-top:10px; }
/* Le « Voir la fiche » prend l'allure d'un bouton, comme sur la maquette.
   La carte entière reste un seul lien : deux vrais boutons imbriqués dans
   un lien, c'est du HTML invalide, et un lecteur d'écran s'y perd. */
body.page-publique .prof-verrou{
  margin-top:14px; padding:11px 14px; border:1px solid var(--trait); border-top:1px solid var(--trait);
  border-radius:11px; text-align:center; font-size:14px; font-weight:600;
  color:var(--bleu); background:var(--papier);
}
body.page-publique .prof-card:hover .prof-verrou{ background:var(--bleu); color:#fff; border-color:var(--bleu); }
/* L'étiquette « En avant » tient DANS la carte : posée à cheval sur le
   bord, elle était rognée par le coin arrondi. */
body.page-publique .prof-boost-tag{
  position:absolute; top:12px; inset-inline-end:12px; inset-inline-start:auto;
  border-radius:100px; font-size:11px; font-weight:600; padding:4px 10px;
  font-family:'Inter', sans-serif; letter-spacing:0;
}
body.page-publique .prof-card{ position:relative; }
/* Le champ de recherche doit rester attrapable au pouce : il était tombé
   à 39 px de haut dans le panneau. On ne descend pas sous 44. */
body.page-publique .recherche-annuaire{ min-height:46px; }
body.page-publique .recherche-annuaire input{ min-height:44px; padding-block:10px; }
body.page-publique .annuaire-panneau .recherche-annuaire input{ font-size:13.5px; }
body.clair .prof-card.boost{ border-color:rgba(233,162,59,.5); }
body.page-publique .prof-boost-tag{ background:rgba(233,162,59,.14); color:#9A6512; border:1px solid rgba(233,162,59,.3); }
body.page-publique .prof-nom{ font-family:'Space Grotesk', sans-serif; font-size:16px; color:var(--encre); }
body.page-publique .prof-matiere{ color:var(--bleu); font-weight:500; font-size:13px; }
body.page-publique .prof-meta{ color:var(--gris); font-size:12.5px; }
body.page-publique .prof-note{ color:var(--ambre); font-size:13px; letter-spacing:0; }
body.page-publique .prof-bio{ color:var(--gris); font-size:13.5px; }
body.page-publique .prof-tarif{ font-family:'Space Grotesk', sans-serif; color:var(--encre); font-size:16px; }
body.page-publique .prof-verrou{ color:var(--gris); border-top:1px dashed var(--trait); }
body.page-publique .badge-niveau{
  background:var(--brume); border:1px solid var(--trait); color:var(--gris);
  font-family:'Inter', sans-serif; border-radius:7px;
}
body.page-publique .prof-exp{ color:var(--gris); background:var(--brume); border:1px solid var(--trait);
  border-radius:7px; padding:2px 8px; font-size:11.5px; }
body.page-publique .badge-mod{
  font-family:'Inter', sans-serif; font-size:11.5px; letter-spacing:0; font-weight:500;
  padding:4px 10px; background:rgba(21,128,61,.10); color:#13643A;
}
body.clair .badge-mod.en-ligne{ background:rgba(37,99,235,.10); color:var(--bleu-sombre); }
body.clair .badge-mod.neutre{ background:var(--brume); color:var(--gris); border:1px solid var(--trait); }
body.page-publique .prof-neuf{ background:var(--ciel); color:var(--bleu); border:1px solid rgba(37,99,235,.22); }

/* Le badge « vérifié » : une pastille verte, comme sur la maquette. */
body.page-publique .prof-verifie{ color:var(--vert); font-size:13px; }

/* ─── La recherche et les filtres ───
   Rassemblés dans un panneau blanc. Sur grand écran il se range à
   gauche et suit le défilement ; sur téléphone il reste au-dessus de la
   liste, où on l'attend. */
body.page-publique .annuaire-mise{ display:block; }
@media(min-width:1000px){
  body.page-publique .annuaire-mise{ display:grid; grid-template-columns:286px minmax(0,1fr); gap:28px; align-items:start; }
  body.page-publique .annuaire-panneau{ position:sticky; top:84px; }
}
body.page-publique .annuaire-panneau{
  background:var(--papier); border:1px solid var(--trait); border-radius:16px;
  box-shadow:var(--ombre); padding:20px; margin-bottom:22px;
}
body.page-publique .annuaire-panneau .titre{
  font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:16px;
  color:var(--encre); margin-bottom:14px;
}
/* Dans le panneau, chaque filtre est une ligne : son intitulé au-dessus,
   ses choix en dessous. Les petites capitales espacées de l'ancien thème
   étaient illisibles sur fond blanc. */
body.page-publique .filtre-ligne{ display:block; margin-bottom:16px; }
body.page-publique .filtre-titre{
  display:block; font-family:'Inter', sans-serif; font-size:13px; font-weight:600;
  color:var(--encre); letter-spacing:0; text-transform:none; margin-bottom:8px; min-width:0;
}
body.page-publique .recherche-annuaire{
  background:var(--papier); border:1px solid var(--trait); border-radius:11px;
  box-shadow:none; margin-bottom:16px;
}
body.page-publique .recherche-annuaire:focus-within{ border-color:var(--bleu); box-shadow:0 0 0 3px rgba(37,99,235,.14); }
body.page-publique .recherche-annuaire input{ font-family:'Inter', sans-serif; font-size:14.5px; color:var(--encre); }
body.page-publique .recherche-annuaire input::placeholder{ color:var(--gris); }
body.page-publique .annuaire-filtres{ gap:7px; margin-bottom:0; }
body.page-publique .filtre-btn{
  background:var(--papier); border:1px solid var(--trait); color:var(--gris);
  border-radius:100px; font-family:'Inter', sans-serif; font-size:13px; font-weight:500;
  /* 31 px de haut, c'était trop petit pour un pouce : on vise un filtre
     et on en touche un autre. Porté à 38. */
  padding:10px 14px; min-height:38px;
}
body.page-publique .filtre-btn:hover{ border-color:var(--bleu); color:var(--bleu); }
body.clair .filtre-btn.active{ background:var(--bleu); color:#fff; border-color:var(--bleu); font-weight:600; }
body.page-publique .compteur-annuaire{ color:var(--gris); font-size:14px; }

/* ─── La fiche d'un professeur ─── */
body.page-publique .fiche{ padding:28px; }
body.page-publique .fiche-nom{ font-family:'Space Grotesk', sans-serif; color:var(--encre); }
body.page-publique .fiche-matiere{ color:var(--bleu); }
body.page-publique .fiche-ligne{ color:var(--gris); }
body.page-publique .fiche-tarif{ background:var(--ciel); border:1px solid rgba(37,99,235,.18); color:var(--encre); border-radius:12px; }
body.page-publique .fiche-mur{ background:var(--brume); border:1px solid var(--trait); border-radius:14px; }
body.clair .fiche-mur-titre{ font-family:'Space Grotesk', sans-serif; color:var(--encre); }
body.page-publique .fiche-info{ background:var(--ciel); border:1px solid rgba(37,99,235,.2); color:var(--encre); border-radius:12px; }
body.clair .fiche-info.attente{ background:rgba(233,162,59,.10); border-color:rgba(233,162,59,.3); }
body.page-publique .fiche-tel{ background:var(--papier); border:1px solid var(--trait); color:var(--encre); }
body.page-publique .fiche-lien-sec{ color:var(--bleu); }
body.page-publique .fiche-avis-note{ color:var(--ambre); }
body.page-publique .fil-ariane a{ color:var(--gris); }
body.page-publique .fil-ariane a:hover{ color:var(--bleu); }
body.page-publique .fiche-barre{ background:rgba(255,255,255,.94); border-top:1px solid var(--trait); backdrop-filter:blur(8px); }
body.page-publique .btn-lire{ color:var(--bleu); font-family:'Inter', sans-serif; font-weight:600; }

/* ─── Les avatars ─── */
body.clair .av-ini{ color:#fff; font-family:'Space Grotesk', sans-serif; }
/* Les initiales sont écrites en blanc : les DEUX bouts du dégradé doivent
   donc pouvoir porter du blanc. Avec les teintes claires d'abord choisies,
   les initiales disparaissaient sur le haut de la pastille — 1,9 de
   contraste sur le vert clair. Les voici assez foncées de bout en bout. */
body.clair .av-c1{ background:linear-gradient(150deg,#2563EB,#1D4ED8); }
body.clair .av-c2{ background:linear-gradient(150deg,#0F7A4A,#15803D); }
body.clair .av-c3{ background:linear-gradient(150deg,#6D5BD0,#5B4BC4); }
body.clair .av-c4{ background:linear-gradient(150deg,#0284C7,#0369A1); }
body.clair .av-c5{ background:linear-gradient(150deg,#B45309,#92400E); }
body.clair .av-c6{ background:linear-gradient(150deg,#DB2777,#BE185D); }
body.page-publique .prof-card:hover .av, body.page-publique .ecole-carte:hover .av{ filter:none; }

/* ─── Les formulaires ─── */
body.clair .form-card{ padding:28px; }
body.clair .field label{
  font-family:'Inter', sans-serif; font-size:13.5px; font-weight:500;
  color:var(--encre); letter-spacing:0; margin-bottom:7px;
}
body.clair .field input, body.clair .field select, body.clair .field textarea, body.clair textarea{
  background:var(--papier); border:1px solid var(--trait); border-radius:11px;
  color:var(--encre); font-family:'Inter', sans-serif; font-size:15px; padding:12px 14px;
}
body.clair .field input::placeholder, body.clair textarea::placeholder{ color:#9AAEC4; }
body.clair .field input:focus, body.clair .field select:focus, body.clair textarea:focus{
  border-color:var(--bleu); box-shadow:0 0 0 3px rgba(37,99,235,.14); outline:none;
}
body.page-publique .tab{
  background:var(--papier); border:1px solid var(--trait); color:var(--gris);
  border-radius:11px; font-family:'Inter', sans-serif; font-weight:600;
}
body.clair .tab.active{ background:var(--bleu); color:#fff; border-color:var(--bleu); }
body.clair .mode-option{ background:var(--papier); border:1px solid var(--trait); border-radius:12px; }
body.clair .mode-option:has(input:checked){ border-color:var(--bleu); background:var(--ciel); }
body.clair .mode-option strong{ font-family:'Space Grotesk', sans-serif; color:var(--encre); }
body.clair .mode-option em{ color:var(--gris); }
body.clair .photo-preview{ background:var(--brume); border:1px dashed var(--trait); }
body.clair .photo-upload-btn{ background:var(--papier); border:1px solid var(--trait); color:var(--encre); border-radius:10px; }
body.clair .confirm{ background:rgba(21,128,61,.08); border:1px solid rgba(21,128,61,.25); color:var(--vert); border-radius:12px; }
body.clair .cgu-mention a, body.clair .switch-link a{ color:var(--bleu); }

/* ─── Les tarifs ─── */
body.page-publique .plan-card{ padding:22px; }
body.clair .plan-card.reco{ border-color:var(--bleu); background:var(--papier); box-shadow:var(--ombre-haute); }
body.page-publique .plan-badge{ background:var(--bleu); color:#fff; font-family:'Inter', sans-serif; font-weight:600; }
body.page-publique .plan-name{ font-family:'Space Grotesk', sans-serif; color:var(--encre); }
body.page-publique .plan-price{ font-family:'Space Grotesk', sans-serif; color:var(--encre); }
body.page-publique .plan-price small{ font-family:'Inter', sans-serif; color:var(--gris); }
body.page-publique .plan-desc{ color:var(--gris); }
body.page-publique .pricing-group-label{ font-family:'Space Grotesk', sans-serif; color:var(--encre); font-size:17px; }
body.page-publique .clarif-box{ background:var(--ciel); border:1px solid rgba(37,99,235,.18); color:var(--encre); padding:16px 18px; }
body.page-publique .note-profs{ background:rgba(21,128,61,.07); border-color:rgba(21,128,61,.22); color:#13643A; }
body.page-publique .montant-hero{ background:var(--ciel); border:1px solid rgba(37,99,235,.2); border-radius:16px; }
body.page-publique .montant-hero .val{ font-family:'Space Grotesk', sans-serif; color:var(--encre); }
body.page-publique .etape-num{ background:var(--bleu); color:#fff; font-family:'Inter', sans-serif; font-weight:700; }
body.clair .etape-num.inactif{ background:var(--brume); color:var(--gris); border:1px solid var(--trait); }
body.clair .moyen-card.actif{ border-color:var(--bleu); background:var(--ciel); }

/* ─── Le carrefour des connexions ─── */
body.page-publique .espace-carte{ padding:20px; }
body.page-publique .espace-icone{ background:var(--ciel); width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; font-size:21px; }
body.page-publique .espace-titre{ font-family:'Space Grotesk', sans-serif; color:var(--encre); }
body.page-publique .espace-pour{ color:var(--gris); }
body.page-publique .espace-fleche{ color:var(--bleu); }

/* ─── Le pied de page ─── */
body.page-publique footer{ background:var(--encre); color:#C7D7E8; border-top:none; padding:52px 24px 28px; }
body.page-publique footer .logo-text{ color:#fff; }
body.page-publique footer .logo-mark{ box-shadow:none; }
body.page-publique .pied-baseline{ color:#9FB6CE; }
body.page-publique .pied-titre{
  color:#fff; font-family:'Space Grotesk', sans-serif; font-weight:600;
  font-size:15px; letter-spacing:0; text-transform:none; margin-bottom:12px;
}
body.page-publique .pied-grille a{ color:#A9C0D6; font-size:14px; }
body.page-publique .pied-grille a:hover{ color:#fff; }
body.page-publique .pied-bas{ border-top:1px solid rgba(255,255,255,.12); color:#8FA8C0; }

/* ─── L'écran de lancement ───
   Il annonce le site : il prend donc ses couleurs, pas celles d'avant. */
body.page-publique #ecran-lancement{
  background:
    radial-gradient(110% 80% at 50% 14%, rgba(37,99,235,.14) 0%, rgba(37,99,235,0) 60%),
    linear-gradient(180deg, var(--ciel) 0%, #FFFFFF 70%);
}
body.page-publique .lancement-marque{
  background:linear-gradient(150deg, #3B82F6, var(--bleu)); color:#fff;
  border-radius:24px; box-shadow:0 20px 50px rgba(37,99,235,.28);
}
body.page-publique .lancement-nom{ color:var(--encre); font-family:'Space Grotesk', sans-serif; }
body.page-publique .lancement-trait{ background:var(--bleu); opacity:.5; }
body.page-publique .lancement-phrase{ color:var(--gris); font-family:'Inter', sans-serif; }

/* ─── Les espaces connectés ───
   Ces pages sont passées au clair en remplaçant leurs teintes codées en
   dur (voir passer-au-clair.py). Il reste ce qu'une substitution de
   couleur ne peut pas deviner. */

/* Un bouton sans variante n'avait pas de fond : sur le vert foncé il se
   voyait quand même, sur blanc il disparaissait. */
body.clair .btn:not(.btn-primary):not(.btn-ghost){
  background:var(--papier); color:var(--encre); border:1px solid var(--trait);
}
body.clair .btn:not(.btn-primary):not(.btn-ghost):hover{ border-color:var(--bleu); color:var(--bleu); }

/* L'annonce importante et l'annonce ordinaire se sont retrouvées de la
   même couleur : le jaune d'alerte était devenu le bleu d'information.
   On rend sa distinction à l'alerte, en ambre. */
body.clair .annonce.important{
  background:rgba(194,105,10,.10); border-color:rgba(194,105,10,.40);
}

/* La barre du haut des espaces : cloche, langues, déconnexion. Avec son
   nouveau fond et son filet, « Se déconnecter » a gagné en largeur et la
   rangée dépassait de 12 px à droite sur un téléphone. On autorise la
   rangée à passer à la ligne, et on resserre les boutons sur petit écran. */
body.clair .top > div{ flex-wrap:wrap; justify-content:flex-end; }
@media(max-width:520px){
  body.clair .btn{ padding:11px 15px; font-size:14px; }
}

/* Les étoiles d'une note sont restées accrochées à la couleur d'action,
   devenue bleue : des étoiles bleues ne se lisent pas comme une note.
   On leur rend l'or — assez foncé pour tenir sur blanc. */
body.clair .note-etoiles, body.clair .etoiles, body.clair .fiche-avis-note{ color:var(--ambre); }

/* Un bouton dans une cellule de tableau reste compact : à la taille d'un
   bouton de formulaire, la colonne « actions » de l'administration
   poussait le tableau 70 px au-delà de l'écran. */
body.clair td .btn, body.clair th .btn{ padding:8px 12px; font-size:13px; }
/* Et si un tableau reste trop large malgré tout, c'est LUI qui défile,
   pas la page entière. */
body.clair .tableau, body.clair .table-wrap, body.clair .bloc > table{
  max-width:100%; overflow-x:auto;
}

/* Les tableaux des espaces : lignes fines, en-têtes lisibles. */
body.clair thead th, body.clair table th{ color:var(--gris); }
body.clair tr:hover > td{ background:var(--brume); }

/* ─── Les pages de connexion ───
   Ce sont des fichiers à part, avec leurs propres styles écrits avant la
   refonte : ils demandent encore la police à chasse fixe. Ces règles-ci
   sont plus précises que les leurs (« body.clair input » l'emporte sur
   « input »), elles reprennent donc la main sans qu'on touche aux six
   fichiers un par un. */
body.clair input, body.clair button, body.clair select, body.clair textarea{
  font-family:'Inter', system-ui, sans-serif;
}
body.clair .card{
  background:var(--papier); border:1px solid var(--trait);
  border-radius:18px; box-shadow:var(--ombre);
}
body.clair .card h1{ font-size:27px; }
body.clair .card input{ border:1px solid var(--trait); background:var(--papier); }
body.clair .card input:focus{ border-color:var(--bleu); box-shadow:0 0 0 3px rgba(37,99,235,.14); }
body.clair .card button[type="submit"], body.clair .card .btn-plein{
  background:var(--bleu); color:#fff;
}
body.clair a.back{ color:var(--gris); }
body.clair a.back:hover{ color:var(--bleu); }

/* ─── Les établissements ───
   Deux blocs de la fiche d'un établissement étaient peints en vert foncé
   directement dans najah.css, sans passer par une variable : la bannière
   de couverture et l'encart « Inscrire mon enfant ». Ils étaient donc
   restés sombres après la refonte, avec un titre bleu nuit par-dessus et
   un paragraphe devenu illisible. */
body.page-publique .ecole-carte{ padding:20px; }
body.page-publique .ecole-nom{ font-family:'Space Grotesk', sans-serif; color:var(--encre); }
body.page-publique .ecole-hero{ background:var(--papier); box-shadow:var(--ombre); }
body.page-publique .ecole-couverture{
  background:
    radial-gradient(620px 240px at 12% 0%, rgba(37,99,235,.22), transparent 66%),
    radial-gradient(520px 240px at 95% 120%, rgba(233,162,59,.18), transparent 62%),
    linear-gradient(120deg, #DCE9FC, #EAF1FE 55%, #F2F7FF);
}
body.page-publique .ecole-couverture::after{
  background-image:linear-gradient(rgba(14,42,71,.05) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(14,42,71,.05) 1px, transparent 1px);
}
body.page-publique .ecole-logo{ background:var(--papier); box-shadow:0 10px 26px -12px rgba(14,42,71,.4); }
body.page-publique .ecole-hero .ecole-meta{ color:var(--bleu); }
body.page-publique .ecole-badge{ background:var(--brume); border-color:var(--trait); color:var(--encre); }
body.page-publique .ecole-bloc{ background:var(--papier); border:1px solid var(--trait);
  border-radius:18px; box-shadow:var(--ombre); }
body.page-publique .ecole-carte-inscription{
  background:linear-gradient(180deg, var(--ciel), var(--papier));
  border:1px solid rgba(37,99,235,.28); box-shadow:var(--ombre-haute);
}
body.page-publique .ecole-inscription-intro{ color:var(--gris); }
body.page-publique .ecole-etapes b{ background:var(--bleu); color:#fff; }
body.page-publique .ecole-rassurance{ color:var(--gris); border-top-color:var(--trait); }
body.page-publique .ecole-rassurance svg{ color:var(--vert); }

/* ─── Accessibilité ───
   Le contour de focus doit se voir sur fond blanc : le bleu de l'ancien
   système était pensé pour du vert foncé. */
body.clair :focus-visible{ outline:3px solid rgba(37,99,235,.55); outline-offset:2px; border-radius:6px; }
body.page-publique .saut-contenu:focus{ background:var(--bleu); color:#fff; }
body.clair ::selection{ background:rgba(37,99,235,.18); color:var(--encre); }

/* ─── Droite à gauche ───
   L'arabe lit de droite à gauche : ce qui est posé à un bord doit changer
   de côté. « inset-inline » le fait tout seul ; la flèche, non. */
body.clair [dir="rtl"] .espace-fleche, [dir="rtl"] body.clair .espace-fleche{ transform:scaleX(-1); }

/* ─── Menu sur téléphone ───
   On garde le mécanisme qui marche déjà — un panneau qui se déplie sous
   le bouton, le même point de bascule que najah.css (1000 px) — et on ne
   change que son habillage. Un deuxième point de bascule aurait laissé
   une bande d'écran où le bouton s'affiche sans que le panneau soit
   habillé. */
@media(max-width:1000px){
  body.page-publique nav{
    top:68px; background:var(--papier); border:1px solid var(--trait);
    border-radius:16px; box-shadow:0 18px 44px rgba(14,42,71,.14); padding:10px;
  }
  body.page-publique nav a{ border-bottom:1px solid var(--trait); border-radius:10px; padding:12px 14px; }
  body.page-publique nav a.actif{ border-bottom-color:var(--trait); background:var(--ciel); }
  body.page-publique .nav-compte{
    border:none; border-bottom:1px solid var(--trait); border-radius:10px;
    color:var(--encre); padding:12px 14px;
  }
  body.page-publique .nav-inscription{
    border-bottom:none; text-align:center; margin-top:8px; padding:12px 14px;
    background:var(--bleu); color:#fff;
  }
  body.page-publique .lang-switch{ align-self:flex-start; margin:10px 0 2px 4px; }
}

/* ─── Trois textes rattrapés par le balayage de contraste ───
   Le contrôle ne portait que sur l'accueil ; étendu aux seize pages
   publiques, il a trouvé ceci. */

/* Les niveaux d'un établissement : vert très pâle sur vert très pâle,
   1,28 de contraste. Invisibles. */
body.page-publique .ecole-chiffres .puces span{
  color:#13643A; background:rgba(21,128,61,.10); border-color:rgba(21,128,61,.26);
}
body.page-publique .ecole-chiffres .puces.violet span{
  color:#4A3BA8; background:rgba(109,91,208,.10); border-color:rgba(109,91,208,.28);
}
/* L'étiquette « En avant » passait à 4,47 — juste sous le seuil. */
body.page-publique .prof-boost-tag{ color:#7A4F0C; }

/* ─── Deux cibles trop petites pour un pouce ───
   Trouvées en mesurant chaque bouton de chaque page sur un téléphone. */

/* Le bouton du menu faisait 38 × 32. C'est le contrôle le PLUS important
   sur un téléphone — il ouvre toute la navigation — et c'était le plus
   petit de la page. Porté à 44 × 44, la taille d'un doigt. */
body.page-publique .menu-bouton{
  padding:11px; min-width:44px; min-height:44px;
  align-items:center; justify-content:center;
}

/* Les liens du pied de page faisaient 28 px de haut, empilés les uns sur
   les autres : on visait un lien et on en touchait un autre. */
body.page-publique .pied-grille a{ padding:8px 0; font-size:13.5px; }

/* Un lien d'action posé au fil d'un encadré : assez grand pour le pouce,
   sans prendre l'allure d'un bouton principal. */
body.page-publique .lien-bouton{
  display:inline-block; margin-top:10px; padding:10px 16px;
  background:var(--papier); border:1px solid var(--trait); border-radius:10px;
  color:var(--bleu); font-weight:600; font-size:14px; text-decoration:none;
  white-space:nowrap;
}
body.page-publique .lien-bouton:hover{ border-color:var(--bleu); background:var(--ciel); }

/* ═══════════ L'INSCRIPTION FAMILLE, EN DEUX CHEMINS ═══════════

   L'inscription demandait d'emblée la matière, le niveau et le quartier.
   Un parent venu seulement voir les notes de son enfant devait inventer
   une recherche de professeur dont il n'avait pas besoin. On lui pose
   maintenant la question avant, avec deux cartes — les mêmes que sur la
   page « Quel est votre espace ? », pour qu'il reconnaisse le geste. */

/* Les cartes du choix sont des BOUTONS et non des liens : elles ne mènent
   nulle part, elles dévoilent un formulaire sur place. Un navigateur donne
   à un bouton sa propre police et son propre alignement : on les remet. */
body.page-publique button.espace-carte{
  width:100%; text-align:start; font:inherit; color:inherit;
  background:var(--papier); cursor:pointer; -webkit-appearance:none; appearance:none;
}
body.is-rtl button.espace-carte{ text-align:start; }

/* « ← Changer » : discret, mais toujours là. Quelqu'un qui s'est trompé de
   chemin ne doit pas avoir à recharger la page pour revenir. */
/* L'en-tête du site reste collé en haut. Sans cette marge, amener le
   formulaire sous les yeux glissait son premier élément — le bouton
   « ← Changer » — DERRIÈRE l'en-tête : il existait, mais on ne le voyait
   pas, et on ne pouvait donc plus revenir au choix. */
body.page-publique .form-card{ scroll-margin-top:92px; }

body.page-publique .retour-choix{
  display:inline-flex; align-items:center; gap:6px;
  margin:0 0 14px; padding:8px 12px; min-height:38px;
  border:1px solid var(--trait); border-radius:100px; background:var(--brume);
  color:var(--gris); font:600 13px 'Space Grotesk',sans-serif; cursor:pointer;
}
body.page-publique .retour-choix:hover{ color:var(--encre); border-color:var(--bleu); }
body.is-rtl .retour-choix{ transform:scaleX(1); }

/* L'explication sous un champ. Le numéro de téléphone n'est pas ici une
   formalité : c'est lui que l'école saisira. Il faut le dire à l'endroit
   où on le tape, pas trois écrans plus loin. */
body.clair .aide-champ{
  margin-top:7px; font-size:12.5px; line-height:1.5; color:var(--gris);
}

body.page-publique .scol-etapes{
  margin:10px 0 0; padding-inline-start:20px; display:grid; gap:7px;
  font-size:13.5px; line-height:1.55; color:var(--encre);
}
body.page-publique .scol-etapes li::marker{ color:var(--bleu); font-weight:700; }
/* « scol-reserve » sert aussi dans l'espace famille, qui porte « clair »
   mais pas « page-publique » : on ne l'accroche donc pas à la mise en page
   du site public, sinon la nuance disparaîtrait côté tableau de bord. */
body.clair .scol-reserve{
  margin:12px 0 0; font-size:12.5px; line-height:1.55; color:var(--gris);
}

/* ─── L'encadré « donnez votre numéro à l'école », dans l'espace famille ─── */
body.clair .clarif-box{
  background:var(--ciel); border:1px solid rgba(37,99,235,.18);
  color:var(--encre); border-radius:14px; padding:16px 18px;
}
body.clair .clarif-box b{
  display:block; margin-bottom:6px; font-family:'Space Grotesk',sans-serif; font-size:15px;
}
body.clair .dash-rattach-texte{ margin:0; font-size:13.5px; line-height:1.55; color:var(--gris); }
body.clair .dash-rattach-numero{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:12px 0 4px;
}
body.clair .dash-rattach-numero .mono{
  font-size:20px; font-weight:600; letter-spacing:.06em; color:var(--encre);
  background:var(--papier); border:1px solid var(--trait); border-radius:10px;
  padding:9px 14px;
}
body.clair #rattach-copier{ min-height:40px; }
body.clair .clarif-box .lien-bouton{
  display:inline-flex; align-items:center; margin-top:12px; padding:9px 14px;
  border:1px solid var(--trait); border-radius:100px; background:var(--papier);
  color:var(--bleu); font-weight:600; font-size:13px; text-decoration:none;
}
body.clair .clarif-box .lien-bouton:hover{ border-color:var(--bleu); background:var(--ciel); }

/* ═══════════ LA FORMULE ANNUELLE, VISIBLEMENT LA PLUS AVANTAGEUSE ═══════════

   Une pastille « La plus avantageuse » posée sur une carte, c'est une
   affirmation. Un directeur d'établissement en voit dix par jour et n'en
   croit aucune. Ce qui convainc, c'est le calcul posé sous ses yeux :
   l'équivalent mensuel de l'annuel, et combien il met de côté. Les deux
   sont calculés par la page — ils restent justes après n'importe quel
   changement de prix fait depuis l'espace administrateur. */
body.page-publique .plan-equivalent{
  margin-top:4px; font-size:13px; color:var(--gris); font-weight:500;
}
body.page-publique .plan-economie{
  margin:12px 0 14px; padding:11px 13px; border-radius:12px;
  background:rgba(19,100,58,.08); border:1px solid rgba(19,100,58,.22);
  display:grid; gap:3px;
}
body.page-publique .plan-economie strong{
  font-family:'Space Grotesk', sans-serif; font-size:15px; color:var(--vert);
}
body.page-publique .plan-economie span{ font-size:12.5px; line-height:1.5; color:var(--gris); }