@charset "utf-8";
/* =========================================================
   MAP Orientation — feuille de style unique
   Direction : cartographie / itinéraire (Savoie, parcours scolaire)
   ========================================================= */

/* ---------- Jetons ---------- */
/* Une seule tenue, sombre : un seul fond, le marine (--paper) du hero, sur
   toute la page, avec le vert pomme. Pas de second fond : les aplats
   (cartes, panneaux, en-tete) sont le marine eclairci d'un ou deux crans. */
:root {
  color-scheme: dark;

  /* Le neon : un coeur presque blanc et sa couleur de halo. Il ne sert plus
     qu'a « un avenir. » dans le titre d'accueil et dans l'arrivee sur le
     site ; le bleu, lui, ne colore plus que le panneau du selecteur de
     classe, sans halo. */
  --neon-bleu: #2f8cff;
  --neon-vert: #08fc3c;
  --neon-vert-coeur: #e2ffd6;

  /* Couleurs */
  /* Le marine du fond, puis deux crans plus clairs pour les aplats. */
  --paper: #0b1a2e;
  --paper-2: #1f2c3f;
  /* L'encre du texte courant, claire sur le marine. */
  --ink: #e8f0fb;
  /* La valeur du fond de page, gardee a part : les panneaux retournent
     --ink-soft, et une carte qui repose son propre fond a l'interieur d'un
     panneau doit pouvoir revenir ici. */
  --ink-soft-page: #bac9de;
  --ink-soft: var(--ink-soft-page);
  /* Le vert fluo du logo, #08FC3C. Le #6CC24A d'avant faisait terne a cote
     du nouveau logo : la cliente a demande le vert du logo partout. C'est le
     seul vert du site. Sur le marine il porte aussi du texte. */
  --vert: #08fc3c;
  --vert-texte-page: #08fc3c;
  --vert-texte: var(--vert-texte-page);
  /* Ce qui s'ecrit SUR un aplat de vert : ni le blanc ni le voile clair n'y
     tiennent, l'encre bleu nuit si (7,5). */
  --sur-vert: #14243b;
  --lac: #74c6ea;
  /* Le lac des panneaux et des cartes. */
  --lac-clair: #79b8d8;
  --ambre: #e8a33d;
  --trait: #2d3a4b;
  /* Le titre pose sur un panneau. */
  --blanc: #fffdf9;
  --surface: #1f2c3f;
  /* Le fond des panneaux et des cartes, un cran au-dessus du fond. */
  --panneau: #1f2c3f;
  /* Le texte pose sur un panneau. */
  --sur-panneau: #f7f6f1;
  --sur-panneau-doux: #b9c3d4;

  /* Pas de halo vert : un halo est un vert qui s'estompe, et le site n'en
     porte qu'un, #08fc3c, pur. La trame passe au trait, sans vert. Les
     jetons restent, a zero, pour les regles qui les lisent. */
  --lueur: 0 0 0 rgba(0, 0, 0, 0);
  --lueur-forte: 0 0 0 rgba(0, 0, 0, 0);
  --voile: rgba(232, 240, 251, 0.05);
  --grille: var(--trait);

  /* Liens : la paire par defaut, sur le marine. */
  --lien: var(--lac);
  --lien-survol: var(--ink);

  /* Typographie */
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --texte: "Newsreader", Georgia, "Times New Roman", serif;

  --fs-hero: clamp(2.5rem, 6.2vw, 4.5rem);
  --fs-h2: clamp(1.75rem, 3.6vw, 2.75rem);
  --fs-h3: clamp(1.15rem, 1.9vw, 1.4rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-micro: 0.8125rem;

  /* Rythme */
  --gouttiere: clamp(1.25rem, 4vw, 2.5rem);
  --largeur: 1180px;
  --section-y: clamp(3.5rem, 8vw, 7rem);

  --rayon: 3px;
  --rayon-l: 6px;

  /* Couleur des equerres quand la carte n'appartient a aucune famille
     coloree : le filet courant est trop pale pour se lire en repere. */
  --equerre-neutre: color-mix(in srgb, var(--trait) 62%, var(--ink));
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

/* L'en-tete se compacte des le premier defilement : une ancre atteinte
   s'arrete donc sous une barre de 4,25rem, pas de 5,75rem. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }

body {
  margin: 0;
  /* Place de l'en-tete fixe, hauteur deployee. Constante : c'est ce qui
     empeche le compactage de decaler la page. */
  padding-top: 5.75rem;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--texte);
  font-size: var(--fs-body);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

/* La couleur des liens passe par deux jetons plutot que par une valeur en
   dur : sur les surfaces encre — cartes MAP news, cartes de formules, bloc
   « Le concept » — le survol ramenait le lien a la couleur de son propre
   fond, et le texte disparaissait sous le curseur. Chaque surface sombre
   redefinit les deux jetons ; tout lien ajoute plus tard y sera lisible
   sans qu'il faille y penser. */
a { color: var(--lien); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--lien-survol); }

:where(a, button, input, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--lac);
  outline-offset: 3px;
  border-radius: 2px;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--ambre); color: var(--ink); }

/* Le lien d'evitement, visible seulement quand on l'atteint au clavier. Il
   prend --panneau comme les autres aplats inverses : sur --ink, il restait le
   dernier fond quasi blanc de la tenue sombre. */
.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--panneau);
  color: var(--blanc);
  padding: 0.75rem 1.25rem;
  z-index: 100;
}
.saut-contenu:focus { left: 0.5rem; top: 0.5rem; }

/* ---------- Structure ---------- */
.enveloppe {
  width: min(100% - 2 * var(--gouttiere), var(--largeur));
  margin-inline: auto;
}

.section { padding-block: var(--section-y); position: relative; }
.section--serre { padding-block: calc(var(--section-y) * 0.6); }
/* Les cartes marine : le lien y prend le lac eclairci, et le survol le
   blanc, jamais l'encre. */
.news__carte,
.formule {
  --lien: var(--lac-clair);
  --lien-survol: var(--blanc);
}
.section-entete { max-width: 46ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-entete h2 { font-size: var(--fs-h2); margin-bottom: 0.5rem; }
.section-entete p { color: var(--ink-soft); font-size: 1.125rem; margin: 0; }
/* Toutes les sections s'ouvrent comme l'accompagnement : un surtitre en
   capitales derriere un filet vert, puis un titre dont la fin passe en vert.
   Le surtitre sert aussi au panneau des formules. */
.surtitre {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--display);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.surtitre::before { content: ""; flex: none; width: 34px; height: 2px; background: var(--vert); }
.section-entete .surtitre { font-size: var(--fs-micro); margin: 0 0 1rem; }
/* La regle vaut aussi pour les titres de page (blog, articles, mentions)
   et pour celui du panneau des formules : chaque titre a sa partie verte. */
.section-entete h2 em,
h1 em,
.modale-formules__titre em { font-style: normal; color: var(--vert-texte); }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
}
/* L'encre fixe, et non --ink : en tenue sombre --ink est un voile clair, qui
   ne tient que 1,8 sur le vert du logo. */
.bouton--plein { background: var(--vert); color: var(--sur-vert); }
/* Les deux survols posent un aplat qui ne s'inverse pas — l'un sombre, l'autre
   blanc — et leur texte ne peut donc pas prendre --ink, qui s'inverse. Les deux
   couples tombaient en tenue sombre : du voile clair sur l'aplat sombre pour le
   premier, du presque-blanc sur le blanc pour le second. --panneau et
   --sur-panneau sont les deux seuls jetons sombre/clair stables des deux cotes.
   Le survol du bouton contour, lui, tient : --paper s'inverse avec --ink. */
.bouton--contour { border-color: var(--ink); color: var(--ink); }
.bouton--clair { border-color: color-mix(in srgb, var(--blanc) 45%, transparent); color: var(--blanc); }
/* Les survols ne valent que pour une souris. Sur telephone, :hover reste
   colle au bouton touche : au retour de Calendly, le « Prendre rendez-vous »
   gardait l'aplat --panneau des cartes de formule et s'y fondait. */
@media (hover: hover) {
  .bouton--plein:hover { background: var(--panneau); color: var(--sur-panneau); }
  .bouton--contour:hover { background: var(--ink); color: var(--paper); }
  .bouton--clair:hover { background: var(--blanc); color: var(--panneau); }
}
/* Taille de barre. Le bouton de page est dessine pour une colonne de texte ;
   pose dans l'en-tete il y tenait la hauteur de deux lignes et son libelle
   se coupait en deux des que la fenetre se resserrait. Le libelle ne se
   coupe plus : sous 560 px c'est le combine seul qui reste. */
.bouton--compact {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  gap: 0.4rem;
  white-space: nowrap;
}
.bouton svg { flex: none; }

/* ---------- Cartes : les coins équerre ---------- */
/* Les quatre familles de cartes portaient le meme filet d'un pixel a 3 px de
   rayon : un bord propre, mais qui ne disait ni de quelle famille etait la
   carte, ni d'ou venait le site. Le cadre ferme cede la place a quatre
   equerres de 18 px, comme les reperes de coupe d'une planche gravee, dans
   la couleur de la famille : bleu lac pour ce qu'on vend, vert pour les
   personnes, gris fonce pour le reste.

   Les equerres sont peintes en degrades plutot qu'en bordures : quatre coins
   ne se decrivent pas avec la propriete border, et deux pseudo-elements ne
   suffisent pas a en faire quatre. Chaque paire tient un coin, une barre
   horizontale et une verticale. */
.formule,
.fondatrice,
.legende__item,
.news__carte,
.temoignage,
.billet {
  --equerre: var(--equerre-neutre);
  --equerre-taille: 18px;
  --equerre-trait: 1.5px;
  /* Retrait des equerres par rapport au bord. Nul sur une carte claire, ou
     l'equerre marque l'angle meme ; rentre sur les cartes a l'aplat encre,
     qui tiennent deja la limite : au ras du bord, l'equerre se perdait
     contre le papier de la section. */
  --equerre-marge: 0px;
  border: 0;
  border-radius: 0;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--equerre) 0 0), linear-gradient(var(--equerre) 0 0),
    linear-gradient(var(--equerre) 0 0), linear-gradient(var(--equerre) 0 0),
    linear-gradient(var(--equerre) 0 0), linear-gradient(var(--equerre) 0 0),
    linear-gradient(var(--equerre) 0 0), linear-gradient(var(--equerre) 0 0);
  background-size:
    var(--equerre-taille) var(--equerre-trait), var(--equerre-trait) var(--equerre-taille),
    var(--equerre-taille) var(--equerre-trait), var(--equerre-trait) var(--equerre-taille),
    var(--equerre-taille) var(--equerre-trait), var(--equerre-trait) var(--equerre-taille),
    var(--equerre-taille) var(--equerre-trait), var(--equerre-trait) var(--equerre-taille);
  background-position:
    left var(--equerre-marge) top var(--equerre-marge),
    left var(--equerre-marge) top var(--equerre-marge),
    right var(--equerre-marge) top var(--equerre-marge),
    right var(--equerre-marge) top var(--equerre-marge),
    left var(--equerre-marge) bottom var(--equerre-marge),
    left var(--equerre-marge) bottom var(--equerre-marge),
    right var(--equerre-marge) bottom var(--equerre-marge),
    right var(--equerre-marge) bottom var(--equerre-marge);
}

/* Sans image de fond, une carte n'aurait plus aucune limite : a l'impression
   et en contraste renforce, le cadre ferme revient. */
@media (prefers-contrast: more) {
  .agrandir__signe { width: 2rem; height: 2rem; right: 0.5rem; bottom: 0.5rem; }
  .visionneuse img { max-height: 70vh; }
  .formule,
  .fondatrice,
  .billet,
  .legende__item,
  .news__carte,
  .temoignage { border: 1px solid var(--ink); }
}

/* ---------- En-tête ----------
   L'en-tete tient sur un bandeau d'encre : le meme bleu que le fond des
   cartes de formules et du bloc « Le concept ». Il donne au site sa
   couleur des la premiere ligne, la ou l'ancien site posait du noir.
   Le bandeau est opaque : translucide, le papier du hero le delavait et
   le logo blanc perdait son fond. */
/* Fixe, et non collant : l'en-tete change de hauteur au defilement, et
   un element collant qui maigrit remonte tout le contenu d'un coup de
   24 px. Fixe, il sort du flux ; la hauteur deployee est rendue par le
   retrait haut du body, qui lui ne bouge jamais. */
.entete {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  /* Le marine de la page : le bandeau ne fait plus bande a part au-dessus
     du hero. Seul un liseré de lumiere, bleu puis vert comme les deux neons
     du hero, l'en separe. */
  background: var(--paper);
}
.entete::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #2f8cff 25%, #e2ffd6 50%, #08fc3c 75%, transparent);
  box-shadow: 0 0 8px #2f8cff, 0 0 18px rgba(47, 140, 255, 0.4);
  pointer-events: none;
}
/* Des qu'on quitte le haut de page, le bandeau devient translucide et
   floute le contenu qui passe dessous. */
.entete[data-defile="oui"] {
  background: rgba(11, 26, 46, 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
/* Le bandeau se compacte des qu'on quitte le haut de page : 18 px de
   hauteur rendus a la lecture, et le logo suit. C'est la seule mesure
   animee du site ; elle ne porte que sur l'en-tete, jamais sur le
   contenu, pour que le recalcul reste borne a une barre. */
.entete__barre {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 5.75rem;
  position: relative;
  transition: min-height 0.25s ease;
}
.entete[data-defile="oui"] .entete__barre { min-height: 4.25rem; }

.entete__logo { flex: none; line-height: 0; }
/* Version blanche du logo : sur le bandeau, le bleu passe entre les
   lettres. Le pied de page, lui, garde le logo encre sur son papier.
   Le dessin fait 2,31 de rapport, d'ou ces mesures : la hauteur reste le
   reperage, la largeur suit. */
.entete__logo img {
  width: 148px;
  height: 64px;
  object-fit: contain;
  transition: width 0.25s ease, height 0.25s ease;
}
.entete[data-defile="oui"] .entete__logo img { width: 116px; height: 50px; }

/* ---------- La navigation, toujours en menu deroulant ----------
   Les huit intitules ne sont plus poses sur la barre, a aucune largeur :
   ils tiennent dans un menu que le bouton a trois traits ouvre. La barre
   ne garde que le logo, la bascule de tenue et l'appel a l'action.

   Le menu est un panneau ancre sous le bouton, et non une nappe pleine
   largeur : la barre est pleine largeur mais son contenu suit l'enveloppe
   centree, si bien qu'au-dela de 1180 px une nappe calee sur l'enveloppe
   flottait au milieu de la fenetre, bords visibles de part et d'autre.
   Ancre a droite, il tombe sous le bouton a toute largeur. --panneau et
   non --ink : le bandeau reste sombre dans les deux tenues, le menu aussi. */
.nav {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  width: min(320px, calc(100vw - 2 * var(--gouttiere)));
  background: var(--panneau);
  border: 1px solid rgba(255, 253, 249, 0.18);
  border-top: 0;
  padding: 0.5rem 1.25rem 0.75rem;
  box-shadow: 0 14px 30px rgba(5, 11, 22, 0.35);
}
.nav[data-ouvert="oui"] { display: block; }

/* Le filet du lien courant est fait pour une rangee : dans une colonne il
   ne veut rien dire. Le script le laisse a zero des que le CSS le masque,
   et seul aria-current marque alors le lien de la section lue. */
.nav__curseur { display: none; }
.nav__curseur {
  position: absolute;
  left: 0;
  top: 0;
  height: 2px;
  width: 0;
  background: var(--vert);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
    width 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
    top 0.25s ease;
}
.nav__lien[aria-current="true"] { color: var(--blanc); }
.nav__liste {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__lien {
  font-family: var(--display);
  font-size: 0.9rem;
  font-weight: 500;
  /* Un intitule ne se coupe jamais : mieux vaut basculer en menu
     deroulant que garder une barre sur deux lignes. */
  white-space: nowrap;
  color: var(--sur-panneau);
  text-decoration: none;
  display: block;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(255, 253, 249, 0.18);
}
/* Le dernier intitule de chaque liste n'a rien a souligner : en bas du
   panneau c'est le bord, et entre deux rubriques c'est l'en-tete suivant
   qui fait la separation. */
.nav__liste li:last-child .nav__lien { border-bottom: 0; }

/* ---------- Le menu range par rubrique ----------
   Huit lignes a la suite se lisent une par une ; sous trois en-tetes elles
   deviennent trois paquets, et le visiteur ne cherche que dans celui qui le
   concerne. « Accueil » reste seul en tete : il ne depend d'aucune rubrique,
   il ramene en haut.

   Les interlignes se resserrent, sinon les trois en-tetes allongeaient le
   panneau d'un tiers. */
.nav__groupe { margin-top: 0.9rem; }
.nav__rubrique {
  font-family: var(--display);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vert);
  margin: 0 0 0.15rem;
}
.nav--rubriques .nav__lien { padding: 0.5rem 0; }
.nav__lien:hover { color: var(--blanc); border-bottom-color: var(--vert); }

/* L'appel a l'action prend la marge automatique : c'est lui qui pousse la
   fin de rangee a droite, le bouton de menu le suit. */
.entete__appel { margin-left: auto; }

.entete__bascule {
  display: inline-flex;
  align-items: center;
  background: none;
  border: 1.5px solid rgba(255, 253, 249, 0.35);
  border-radius: var(--rayon);
  padding: 0.5rem 0.7rem;
  color: var(--sur-panneau);
  cursor: pointer;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
}
/* Le titre est borne a 15ch et le chapo a 52ch : le hero laissait donc une
   colonne de blanc a droite, sous le bouton de l'en-tete. Les preuves
   chiffrees s'y logent, et le titre garde sa mesure. La grille ne vaut qu'a
   partir de 900 px ; en dessous, tout retombe dans le flux. */
.hero__contenu {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(15rem, 23vw, 18.5rem);
  column-gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.hero h1,
.hero__chapo,
.hero__actions { grid-column: 1; }
.hero h1 {
  font-size: var(--fs-hero);
  max-width: 15ch;
  margin-bottom: 1.25rem;
}
.hero__chapo {
  font-size: clamp(1.125rem, 1.9vw, 1.375rem);
  color: var(--ink-soft);
  max-width: 52ch;
  margin-bottom: 2rem;
}
.hero__chapo strong { color: var(--ink); font-weight: 600; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; }

/* ---------- Preuves chiffrées du hero ---------- */
/* Trois faits qu'un parent vérifie avant de lire une formule. Pas de carte :
   la colonne se lit comme une liste, séparée par le filet courant, et le
   vert ne porte que la tuile du glyphe — sur fond clair, ce vert olive ne
   tient pas un texte, c'est la règle posée sur le jeton `--vert`.
   Le bloc occupe les trois premières rangées de la grille, donc toute la
   hauteur du titre, du chapo et des boutons. */
.hero__preuves {
  grid-column: 2;
  grid-row: 1 / span 3;
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--trait);
  border-block: 1px solid var(--trait);
}
.preuve {
  background: var(--paper);
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 0.25rem;
}
/* Aplat vert plein, glyphe à l'encre : le même contraste que le logo, et le
   seul endroit du hero où le vert est une surface. */
.preuve__tuile {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--vert);
  color: var(--ink);
}
.preuve__valeur {
  display: block;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.preuve__quoi {
  display: block;
  font-size: var(--fs-small);
  line-height: 1.35;
  color: var(--ink-soft);
}

/* ---------- Itinéraire (élément signature) ---------- */
.itineraire { margin-top: clamp(3rem, 6vw, 5rem); position: relative; }
/* Les quatre jalons gardent toute la largeur : les borner à la colonne du
   texte rétrécirait la frise signature de trois cents pixels. */
.hero__contenu > .itineraire { grid-column: 1 / -1; }
.itineraire__intro {
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
}
.itineraire__etapes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  position: relative;
}
.itineraire__etapes::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 12.5%;
  height: 2px;
  width: 75%;
  background: repeating-linear-gradient(90deg, var(--trait) 0 8px, transparent 8px 14px);
  transform-origin: left center;
  animation: trace 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}
@keyframes trace { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.etape { text-align: center; }
.etape__lien { display: block; text-decoration: none; color: inherit; }
.etape__point {
  width: 24px;
  height: 24px;
  margin: 0 auto 0.85rem;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--paper);
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
}
.etape__point::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink);
}
.etape__lien:hover .etape__point { background: var(--lac); border-color: var(--lac); }
.etape__lien:hover .etape__point::after { background: var(--ink); }
.etape__niveau {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
  display: block;
  line-height: 1.2;
}
.etape__quoi {
  display: block;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  margin-top: 0.15rem;
}

/* ---------- Repères : la légende de la carte ---------- */
/* Quatre faits de natures differentes — une duree, une equipe, un tarif, un
   lieu. Les traiter en quatre tuiles identiques les faisait passer pour
   quatre indicateurs comparables. Ils deviennent la legende de la carte que
   le hero dessine : un glyphe propre a chaque fait. */
.legende { border-block: 1px solid var(--trait); }
.legende__titre {
  font-family: var(--display);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
}
.legende__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.1rem);
}
/* En carte, et non en simple ligne : le glyphe pose au fil du texte se lisait
   comme une seconde frise, a 200 px de l'itineraire du hero. Le cadre separe
   les deux lectures. */
.legende__item {
  display: grid;
  gap: 0.65rem;
  align-content: start;
  background-color: var(--panneau);
  color: var(--sur-panneau);
  padding: clamp(1.15rem, 2vw, 1.35rem);
}
/* Les reperes disent ce que couvre l'accompagnement scolaire : ils appartiennent
   a ce qu'on vend, et prennent le lac plutot que le vert des personnes. */
.legende__item { --equerre: var(--lac-clair); }
.legende__glyphe { color: var(--lac-clair); }
.legende__fait {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.15;
  display: block;
}
.legende__quoi { font-size: var(--fs-small); color: #b9c3d4; margin: 0; }

/* ---------- MAP news ---------- */
/* Les nouveautes du cabinet, posees sous la legende. Meme traitement en
   cartes que la legende juste au-dessus, pour que les deux bandes se lisent
   comme un seul haut de page, avec une date en vert en guise de vignette
   plutot qu’un glyphe. */
.news__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.1rem);
}
.news__carte { --equerre: var(--lac-clair);
  display: grid;
  gap: 0.5rem;
  align-content: start;
  background-color: var(--panneau);
  color: var(--sur-panneau);
  padding: clamp(1.15rem, 2vw, 1.35rem);
}
/* Le portrait n'apparait que sur les cartes qui en portent un — un edito
   est signe, une annonce de rentree ne l'est pas. */
.news__portrait {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--blanc) 28%, transparent);
  justify-self: start;
}
.news__date {
  font-family: var(--display);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vert-texte);
  margin: 0;
}
.news__intitule { font-size: 1.2rem; line-height: 1.2; color: var(--blanc); margin: 0; }
.news__texte { font-size: var(--fs-small); color: var(--ink-soft); margin: 0; }
.news__lien {
  font-family: var(--display);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--lac-clair);
  justify-self: start;
}

/* ---------- L'ADN ---------- */
/* Trois valeurs, chacune ouverte par un adage. La legende et les nouveautes
   viennent d'aligner six cartes a l'encre : une septieme rangee de tuiles
   aurait fait du haut de page une grille. Ici, rien qu'une borne verte, un
   intitule et du texte — la bande respire, et l'adage porte la section a lui
   seul. C'est le seul italique du site, et le seul endroit ou une phrase est
   citee pour elle-meme. */
.adn { border-bottom: 0; }
/* Sur l'encre, l'adage prend le lac eclairci et le texte la valeur claire
   de la famille : le lac sombre tombait a 3,1 de contraste, l'encre
   adoucie a 1,9. */
.adn__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: clamp(1.75rem, 3.5vw, 3.25rem);
}
.adn__valeur { display: grid; gap: 0.7rem; align-content: start; }
/* La meme borne que les jalons de l'itineraire portent en vert : elle dit a
   quelle famille appartient le bloc sans lui poser de cadre. */
.adn__nom {
  font-size: var(--fs-h3);
  margin: 0;
  padding-top: 0.9rem;
  border-top: 3px solid var(--vert);
  justify-self: start;
  padding-right: 1.5rem;
}
.adn__adage {
  font-style: italic;
  font-size: 1.1875rem;
  line-height: 1.45;
  color: var(--lac);
  margin: 0;
  text-wrap: pretty;
}
.adn__texte { font-size: var(--fs-small); color: var(--ink-soft); margin: 0; }


/* ---------- Images agrandissables ---------- */
/* Le signe est une loupe posee dans l'angle, du cote ou l'image touche la
   gouttiere : rien n'indiquait qu'on pouvait cliquer. */
.agrandir {
  display: block;
  position: relative;
  line-height: 0;
  cursor: zoom-in;
}
.agrandir__signe {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--trait);
}
.agrandir:hover .agrandir__signe,
.agrandir:focus-visible .agrandir__signe { background: var(--vert); color: var(--ink); }

.visionneuse {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  border: 0;
  padding: clamp(1rem, 4vw, 3rem);
  background: transparent;
  color: var(--paper);
  /* place-content plutot que place-items : l'image garde sa taille naturelle
     et reste centree, y compris quand elle est plus petite que l'ecran. */
  display: grid;
  place-content: center;
  gap: 0.85rem;
}
.visionneuse:not([open]) { display: none; }
.visionneuse::backdrop { background: rgba(20, 36, 59, 0.88); }
.visionneuse img {
  max-width: min(100%, 854px);
  max-height: 78vh;
  width: auto;
  border: 1px solid rgba(255, 253, 249, 0.22);
}
.visionneuse__legende {
  margin: 0;
  font-size: var(--fs-small);
  color: #cfd7e4;
  text-align: center;
  max-width: 60ch;
  justify-self: center;
}
.visionneuse__fermer {
  position: fixed;
  top: clamp(0.75rem, 2vw, 1.5rem);
  right: clamp(0.75rem, 2vw, 1.5rem);
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid rgba(255, 253, 249, 0.35);
  color: var(--paper);
  cursor: pointer;
}
.visionneuse__fermer:hover { background: var(--paper); color: var(--ink); }

/* ---------- Piliers ---------- */
.piliers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: color-mix(in srgb, var(--blanc) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--blanc) 16%, transparent);
}
.pilier { background: var(--panneau); padding: clamp(1.75rem, 3vw, 2.5rem); }
/* Le rang reprend le jalon de l'itineraire du hero, au lieu du grand chiffre
   detoure : la page raconte deja un parcours, elle n'a pas besoin d'un second
   vocabulaire pour le dire, et le chiffre redevient lisible. */
.pilier__rang {
  font-family: var(--display);
  font-size: var(--fs-micro);
  font-weight: 700;
  line-height: 1;
  color: var(--vert-texte);
  font-variant-numeric: tabular-nums;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 2px solid var(--vert);
  border-radius: 50%;
  margin-bottom: 1rem;
}
.pilier h3 { font-size: var(--fs-h3); color: var(--blanc); margin-bottom: 0.75rem; }
.pilier__role {
  font-family: var(--display);
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--ambre);
  display: block;
  margin-bottom: 0.4rem;
}
.pilier p { color: var(--ink-soft); font-size: var(--fs-small); }

/* ---------- Concept : les etapes qui s'empilent ---------- */
/* Chaque etape se colle sous l'en-tete, un cran plus bas que la precedente
   (--rang) : la suivante monte et la recouvre, et les bords des cartes deja
   passees restent visibles au-dessus, comme une pile. La marge sous chaque
   carte donne la longueur de defilement pendant laquelle elle tient. */
.etapes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(2.5rem, 8vh, 5rem);
}
.etape {
  --c: var(--vert);
  position: sticky;
  top: calc(5.25rem + (var(--rang) - 1) * 1.1rem);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  min-height: min(30rem, 72vh);
  overflow: hidden;
  border: 1.5px solid var(--c);
  border-radius: 22px;
  background: #0f1f35;
  box-shadow: 0 -18px 40px rgba(4, 10, 20, 0.55);
}
.etape:nth-child(2) { --c: var(--neon-bleu); }
.etape:nth-child(3) { --c: var(--lac); }
.etape:nth-child(4) { --c: var(--ambre); }
.etape__media { position: relative; background: var(--panneau); }
.etape__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.etape__texte {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.75rem, 4vw, 3.25rem);
}
/* Grand ecran : case de 600 x 450, la taille exacte des fichiers -600. Le
   navigateur n'a rien a reduire, c'est ce qui garde les photos nettes. */
@media (min-width: 1280px) {
  .etape { grid-template-columns: 600px minmax(0, 1fr); min-height: 0; }
  .etape__media { aspect-ratio: 4 / 3; max-height: calc(100vh - 9rem); }
}
.etape__rang {
  font-family: var(--display);
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 800;
  line-height: 1;
  color: var(--c);
  margin-bottom: 0.75rem;
}
.etape__role {
  font-family: var(--display);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c);
  margin: 0 0 0.5rem;
}
.etape h3 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); color: var(--blanc); margin-bottom: 0.85rem; }
.etape p:last-child { color: var(--sur-panneau-doux); }

@media (max-width: 899px) {
  .etapes { gap: 3rem; }
  .etape {
    top: calc(4.75rem + (var(--rang) - 1) * 0.75rem);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: clamp(150px, 26vh, 240px) auto;
    min-height: 0;
  }
  .etape__texte { justify-content: start; padding: 1.4rem 1.4rem 1.6rem; }
  .etape__rang { font-size: 2.25rem; margin-bottom: 0.5rem; }
  .etape p:last-child { font-size: var(--fs-small); }
}
/* Ecran trop bas pour qu'une carte y tienne entiere : plus de pile, la
   carte suivante masquerait le texte de la precedente avant sa lecture. */
@media (max-height: 560px) {
  .etape { position: relative; top: auto; }
}

/* ---------- Formules ---------- */
.formules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: stretch;
}
/* background-color et non background : la forme courte effacerait les
   degrades qui dessinent les equerres. */
/* Les cartes portent l'aplat encre du bloc « Le concept », que la cliente
   voulait retrouver sur toute l'offre. Elles passent donc en fond sombre :
   les accents clairs (lac eclairci, vert, blanc) remplacent l'encre et le
   lac sombre, qui ne se lisaient plus. Les equerres rentrent de 8 px : au
   ras du bord, elles se perdaient contre le papier de la section. */
.formule {
  --equerre: var(--lac-clair);
  --equerre-marge: 8px;
  background-color: var(--panneau);
  color: var(--sur-panneau);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
}
/* Deux lignes reservees a la cible et au titre, meme quand ils n'en
   occupent qu'une : « Eleves de seconde, sur les trois annees de lycee »
   et « TERMINALE PARCOURSUP 1 AN » debordent, et sans cette reserve elles
   poussaient de 22 px tout ce qui les suit sur leur carte. Les titres et
   les objectifs d'une meme bande se lisent desormais sur une ligne. */
.formule__cible {
  font-family: var(--display);
  font-size: var(--fs-micro);
  font-weight: 600;
  line-height: 1.3;
  min-height: 2.6em;
  color: var(--lac-clair);
  margin: 0 0 0.5rem;
}
.formule h3 {
  font-size: 1.2rem;
  line-height: 1.15;
  min-height: 2.3em;
  color: var(--blanc);
  margin-bottom: 0.85rem;
}

/* « Objectif » et « Contenu » sont les deux intitules avec lesquels le
   client decrit ses formules : ils sont repris tels quels, en display, pour
   qu'on retrouve la meme lecture que sur ses documents. Le vert les porte
   sur l'encre, ou il tient 7,56 de contraste. */
.formule__intitule {
  font-family: var(--display);
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--vert-texte);
}
.formule__intitule--seul { display: block; margin: 0 0 0.4rem; }

.formule__objectif { font-size: var(--fs-small); margin-bottom: 0.85rem; }
.formule__contenu { font-size: var(--fs-small); margin-bottom: 1.25rem; }
.formule__liste { list-style: none; margin: 0 0 1rem; padding: 0; font-size: var(--fs-small); }
.formule__liste li { padding: 0.5rem 0; border-top: 1px solid color-mix(in srgb, var(--blanc) 18%, transparent); }
/* Le depliant, le prix et le bouton forment le bloc du bas, et c'est leur
   alignement d'une carte a l'autre qui fait tenir la grille. L'espace
   libre revient donc au dernier element de la partie haute : le contenu
   d'ordinaire, l'objectif sur une carte qui n'en a pas, le pied lui-meme
   sur une carte reduite au seul prix. */
.formule__contenu { margin-bottom: auto; }
.formule:not(:has(.formule__contenu)) .formule__objectif { margin-bottom: auto; }
.formule:not(:has(.formule__contenu, .formule__objectif)) .formule__pied { margin-top: auto; }
.formule__prix {
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ambre);
  line-height: 1.1;
  display: block;
}
.formule__prix-note {
  font-size: var(--fs-micro);
  color: var(--ink-soft);
  display: block;
  margin-bottom: 1rem;
}
.formule__pied .bouton { width: 100%; justify-content: center; }
/* Le bouton contour est dessine pour le papier : sur l'aplat encre, son
   filet encre disparaissait. */

.formule__details { margin: 0 0 1.25rem; font-size: var(--fs-small); }
.formule__details summary {
  cursor: pointer;
  font-family: var(--display);
  font-weight: 600;
  color: var(--lac-clair);
  list-style: none;
}
.formule__details summary::-webkit-details-marker { display: none; }
/* Meme chevron que les questions frequentes, plutot que le couple « + » et
   « - » : un tiret de moins a l'ecran, et un seul signe a apprendre. */
/* Deux lignes reservees ici aussi, et le chevron cale en haut plutot
   qu'au milieu : « Seance a la carte, parmi les services proposes » en
   occupe deux quand les autres cartes disent « Le programme » en une, et
   le depliant partait alors 26 px plus haut sur cette seule carte. */
.formule__details summary {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  line-height: 1.3;
  min-height: 2.6em;
}
.formule__details summary::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(3px) rotate(45deg);
  transition: transform 0.18s ease;
}
.formule__details[open] summary::before { transform: translateY(6px) rotate(-135deg); }
.formule__details ul { margin: 0.75rem 0 0; padding-left: 1.1rem; }
.formule__details li { padding: 0.15rem 0; }

/* ---------- Fondatrices ---------- */
/* Traitement en fiches : formation, expérience, certifications, chacune à sa
   ligne. C'est ce qu'un parent compare quand il choisit entre plusieurs
   accompagnements — et ce qui se met à jour sans refaire la mise en page.
   La carte reprend le vocabulaire du reste de la page : filet d'un pixel,
   angles a peine casses, aucune ombre portee. Les formules portent un filet
   bleu en tete, les fondatrices un filet vert : ce qu'on vend et ceux qui le
   font ne se confondent pas. Les annees d'experience sont le seul chiffre qui
   compte ici, autant les traiter comme tels. */
.fondatrices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem);
  /* Les deux fiches s'etirent a la hauteur de la plus haute : deux
     parcours de longueur inegale ne doivent pas donner deux cartes
     decalees. Les certifications sont poussees en pied, de sorte que
     le blanc supplementaire tombe au milieu et non sous elles. */
  align-items: stretch;
}

.fondatrice {
  --equerre: var(--vert);
  background-color: var(--surface);
  /* La section est passee a l'aplat encre : sans cette couleur, le nom et
     les valeurs des fiches heritaient du papier et disparaissaient sur le
     fond blanc de la carte. Seuls les intitules, qui portent leur propre
     couleur, restaient lisibles. */
  color: var(--ink);
  padding: clamp(1.5rem, 2.5vw, 1.9rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* Traitement « profil » : portrait rond cercle de vert, nom et role
     centres, faits alignes a gauche sous un filet. C'est le seul rond du
     site, assume : la fiche parle de personnes, pas d'une offre. */
  align-items: center;
  text-align: center;
}

.fondatrice__entete {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
}

/* Le portrait est carré, comme les fichiers attendus : un cadrage décidé ici
   plutôt qu'au moment de la photo se verrait au premier remplacement. */
.fondatrice__portrait {
  width: 92px;
  height: 92px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--vert);
}

.fondatrice h3 { font-size: 1.4rem; margin: 0 0 0.15rem; }
.fondatrice__role {
  font-family: var(--display);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-soft);
  margin: 0;
}

/* Reperes chiffres : une rangee centree, sans creux ni filets. Le
   panneau autorise un ou trois reperes, d'ou le retour a la ligne. */
.fondatrice__chiffres {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.75rem;
}
.fondatrice__chiffre { padding: 0; }
.fondatrice__valeur {
  display: block;
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.fondatrice__mesure {
  display: block;
  font-size: var(--fs-micro);
  color: var(--ink-soft);
  margin-top: 0.15rem;
}

/* Les trois faits en grille deux par deux, chacun dans un cartouche en
   creux : le parcours d'un cote et de l'autre, ce qu'elle fait en
   seance seule en bas, sur toute la largeur et sur un fond vert lave.
   C'est la seule des trois lignes qui parle de l'enfant du visiteur,
   les deux autres parlant du parcours des fondatrices. */
.fondatrice__faits {
  margin: 0;
  font-size: var(--fs-small);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  /* Le texte courant reste aligne a gauche : trois paragraphes centres
     ne se lisent pas. Seuls le portrait, le nom et les chiffres le sont. */
  text-align: left;
  width: 100%;
}
.fondatrice__faits .fondatrice__ligne {
  background: var(--paper);
  padding: 0.85rem 0.95rem;
  gap: 0.5rem;
  align-content: start;
}
/* Chaque intitule porte un trait vert, comme les trois valeurs de
   l'ADN : la meme borne, a l'echelle de la ligne. */
.fondatrice__faits .fondatrice__ligne dt {
  justify-self: start;
  border-bottom: 2px solid var(--vert);
  padding-bottom: 0.25rem;
  color: var(--ink);
}
.fondatrice__faits .fondatrice__ligne:last-child {
  grid-column: 1 / -1;
  /* Melange avec --surface, le fond de la carte, et non --blanc : celui-ci
     est blanc dans les deux tenues, et la ligne restait donc vert pale sous
     un texte passe au clair — 1,0 de contraste en tenue sombre. */
  box-shadow: inset 0 0 0 1px var(--vert);
}

.fondatrice__ligne { display: grid; gap: 0.2rem; }
/* Intitules en casse normale : six libelles en capitales dans une meme carte
   se lisent comme un gabarit, et le contraste de graisse suffit a les
   distinguer du texte. */
.fondatrice__ligne dt {
  font-family: var(--display);
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--ink-soft);
}
.fondatrice__ligne dd { margin: 0; }

.fondatrice__pastilles {
  list-style: none;
  /* Poussees en pied : dans la fiche la plus courte, le blanc en trop
     se loge au-dessus d'elles plutot qu'en dessous. */
  margin: auto 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
}
.pastille {
  font-family: var(--display);
  font-size: var(--fs-micro);
  font-weight: 600;
  /* Aplat vert plein, texte a l'encre : le meme couple que le bouton et
     que les tuiles des preuves chiffrees. La teinte lavee d'avant se
     perdait sur le blanc de la fiche. C'est --sur-vert et non --ink, comme
     pour le bouton : en tenue sombre --ink est un voile clair, qui ne tient
     que 1,8 sur le vert du logo. */
  color: var(--sur-vert);
  background: var(--vert);
  border: 1px solid var(--vert);
  /* Angles droits : arrondie a fond, l'etiquette se lisait comme un bouton,
     et rien ne se passe quand on clique dessus. */
  border-radius: 0;
  padding: 0.28rem 0.7rem;
}

/* Alignement des rangees d'une fiche a l'autre. Etirer les cartes a la
   meme hauteur ne suffisait pas : un parcours plus long allongeait ses
   cartouches, et « dans les seances » puis les certifications tombaient
   plus bas d'un cote que de l'autre. Chaque fiche calque donc ses
   rangees sur celles de la section — portrait, chiffres, premiere
   rangee de faits, seances, certifications — et son bloc de faits fait
   de meme sur deux d'entre elles.

   Derriere un @supports : sans subgrid, les fiches gardent la colonne
   souple d'avant, simplement moins bien alignees. */
@supports (grid-template-rows: subgrid) {
  .fondatrices {
    grid-template-rows: repeat(5, auto);
    row-gap: 1rem;
  }
  .fondatrice {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 1rem;
    justify-items: center;
  }
  .fondatrice__faits {
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: 0.75rem;
  }
  /* La rangee etant commune aux deux fiches, les etiquettes s'alignent
     d'elles-memes : le calage en pied n'a plus lieu d'etre. */
  .fondatrice__pastilles { margin: 0; align-self: end; }
}

/* ---------- Témoignages ----------
   Retour aux colonnes : la rangee qui defilait cachait la moitie des
   temoignages, et un texte qui bouge ne se lit pas. Trois mouvements
   les remplacent, tous discrets et rendus a la carte :

   - un guillemet vert qui se leve derriere le texte au survol ;
   - un filet vert qui se trace le long du bord gauche, et la
     signature qui glisse de six pixels ;
   - a l'entree dans le champ, la carte arrive legerement inclinee et
     se redresse, comme une fiche qu'on pose.

   Aucun ne promet de clic : une carte qui se souleve, sur un bloc
   inerte, annonce une action qui n'existe pas.

   Les durees sont en !important : le bloc « moins de mouvement » de la
   feuille les ramenerait a un millieme de seconde, et ces trois effets
   doivent rester visibles partout. */
.temoignages { columns: 3 260px; column-gap: clamp(1.25rem, 2.5vw, 2rem); }

@keyframes temoin-pose {
  from { transform: translateY(26px) rotate(var(--angle)) scale(0.97); }
  to { transform: none; }
}
.temoignages[data-pose="oui"] .temoignage {
  animation: temoin-pose 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-duration: 0.6s !important;
  animation-delay: calc(var(--i, 0) * 80ms);
}

/* La carte seule passe a l'encre, la section garde son papier : c'est ce
   qui separe cette mise en page d'un bandeau plein. */
.temoignage {
  position: relative;
  overflow: hidden;
  break-inside: avoid;
  margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
  --equerre: var(--lac-clair);
  /* L'inclinaison alterne d'une carte a l'autre : le meme angle six
     fois se lirait comme un defaut de mise en page. */
  --angle: -0.9deg;
  background-color: var(--panneau);
  color: var(--sur-panneau);
  padding: 1.5rem;
}
.temoignage:nth-child(even) { --angle: 0.9deg; }

/* Le filet qui se trace, au bord gauche. */
.temoignage::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--vert);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}
.temoignage:hover::before,
.temoignage:focus-within::before { transform: scaleY(1); }

/* Le guillemet qui se leve, derriere le texte. */
.temoignage::after {
  /* Le guillemet anglais ouvrant, dans la serif du corps de texte. Il
     s'affichait en grand C : l'echappement CSS s'etait ecrit en
     caractere de controle suivi d'un « C ». Le caractere est donc pose
     en clair. */
  content: "“";
  position: absolute;
  right: 0.9rem;
  bottom: -2.6rem;
  font-family: var(--texte);
  font-size: 8rem;
  line-height: 1;
  color: var(--vert);
  transform: translateY(12px);
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}
.temoignage:hover::after,
.temoignage:focus-within::after { transform: translateY(-4px); }

.temoignage blockquote,
.temoignage figcaption { position: relative; z-index: 1; }
.temoignage blockquote { margin: 0 0 1rem; font-size: var(--fs-small); }
.temoignage blockquote p { margin-bottom: 0.75rem; }
.temoignage figcaption {
  font-family: var(--display);
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--lac-clair);
  transition: transform 0.35s ease !important;
}
.temoignage:hover figcaption,
.temoignage:focus-within figcaption { transform: translateX(6px); color: var(--vert); }

/* ---------- Presse ----------
   La rangee defile toute seule, en boucle continue. Deux etats :

   - sans script, c'est la grille d'avant, cinq parutions posees. Rien
     ne bouge, rien ne manque.
   - avec script, main.js double la serie, marque la copie en
     aria-hidden et pose data-ruban sur le conteneur. Le CSS bascule
     alors en piste horizontale et l'anime jusqu'a -50 % : la copie
     arrive exactement la ou etait l'originale, la boucle ne se voit
     pas.

   Le mouvement s'arrete au survol, au clavier, et par le bouton — un
   contenu qui bouge plus de cinq secondes doit pouvoir etre arrete
   autrement qu'en le survolant, ce que le doigt ne sait pas faire. */
.presse {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}
.presse__article { display: flex; flex-direction: column; margin: 0; }

/* Ruban : monte par le script uniquement. */
.presse[data-ruban="oui"] {
  display: block;
  overflow: hidden;
  /* Les deux bords s'effacent : sans cela, les vignettes apparaissent et
     disparaissent d'un coup contre le bord de la section. */
  mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
}
.presse__piste {
  display: flex;
  gap: clamp(1rem, 2vw, 1.75rem);
  width: max-content;
}
.presse__piste > .presse__article { width: 210px; flex: none; }

/* Sans garde de mouvement, a la demande de la cliente : les deux
   rubans defilent pour tout le monde. Ils s'arretent au survol, au
   clavier, et le ruban de presse porte un bouton d'arret. */
.presse[data-ruban="oui"] .presse__piste {
  animation: presse-ruban 60s linear infinite;
}
@keyframes presse-ruban { to { transform: translateX(-50%); } }

.presse[data-ruban="oui"]:hover .presse__piste,
.presse[data-ruban="oui"]:focus-within .presse__piste,
.presse[data-anime="non"] .presse__piste { animation-play-state: paused; }
.presse__lien { text-decoration: none; color: inherit; display: block; }
.presse__lien img {
  border-radius: var(--rayon);
  border: 1px solid var(--trait);
  background: var(--blanc);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
}
.presse__lien:hover img { border-color: var(--vert); }
.presse__citation { font-size: var(--fs-small); margin: 0.9rem 0 0.4rem; }
.presse__source {
  font-family: var(--display);
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--ink-soft);
}
/* Sur l'aplat encre, l'encre adoucie tombe a 1,9 de contraste : la source
   et le filet des vignettes prennent les valeurs claires de la famille. */

/* ---------- Contact ---------- */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.coordonnees { font-size: var(--fs-small); }
/* La photo des fondatrices, recadree sur les visages : en entier, le
   portrait vertical poussait les coordonnees sous le formulaire. */
.contact__photo {
  margin: 0 0 1.75rem;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--rayon-l);
  border: 1.5px solid var(--vert);
}
.contact__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.coordonnees h3 { font-size: 1.1rem; margin-bottom: 0.4rem; color: var(--ink); }
.coordonnees__bloc { margin-bottom: 1.75rem; }
.coordonnees__bloc p { margin-bottom: 0.35rem; }
/* :not(.bouton) : la regle est faite pour les liens courants du bloc, poses
   a meme le panneau. Depuis que l'appel a l'action y est un bouton vert, elle
   l'atteignait aussi — un lien est plus specifique qu'une classe de bouton —
   et son texte passait au creme sur le vert, a 1,9 dans les deux tenues.
   Le bloc repose sur le marine : encre claire, puis lac au survol. */
.coordonnees a:not(.bouton) { color: var(--ink); }
.coordonnees a:not(.bouton):hover { color: var(--lac); }

.formulaire {
  background: var(--surface);
  border-radius: var(--rayon-l);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--ink);
}
.formulaire h3 { font-size: 1.25rem; }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.champ { display: flex; flex-direction: column; gap: 0.35rem; }
.champ--large { grid-column: 1 / -1; }
.champ label { font-family: var(--display); font-size: var(--fs-micro); font-weight: 600; }
.champ input,
.champ textarea,
.champ select {
  font: inherit;
  font-size: var(--fs-small);
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--paper);
  color: var(--ink);
  width: 100%;
}
.champ textarea { min-height: 7rem; resize: vertical; }
.champ input:user-invalid,
.champ textarea:user-invalid { border-color: #b23b2e; }

.consentement {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: var(--fs-micro);
  margin: 1.25rem 0;
  color: var(--ink-soft);
}
.consentement input { margin-top: 0.25rem; flex: none; width: auto; }

.formulaire .bouton { width: 100%; justify-content: center; }
.formulaire__etat {
  font-size: var(--fs-small);
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--rayon);
  background: transparent;
  border: 1px solid var(--vert);
}
.formulaire__etat--erreur { border-color: #b23b2e; }
.formulaire__direct {
  font-size: var(--fs-micro);
  color: var(--ink-soft);
  margin-top: 1rem;
  text-align: center;
  overflow-wrap: anywhere;
}
.formulaire__direct a { color: inherit; text-decoration: underline; }
.formulaire .bouton:disabled { opacity: 0.6; cursor: wait; }
/* Piège à robots : sorti de l'écran plutôt que display:none, que certains robots repèrent. */
.formulaire__piege {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Pied de page ---------- */
.pied {
  background: var(--paper);
  border-top: 1px solid var(--trait);
  padding-block: clamp(2.5rem, 5vw, 4rem) 1.5rem;
  font-size: var(--fs-small);
}
.pied__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem;
  margin-bottom: 2.5rem;
}
.pied h3 { font-size: var(--fs-micro); font-weight: 700; margin-bottom: 0.9rem; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { padding: 0.2rem 0; }
.pied a { color: var(--ink); text-decoration: none; }
.pied a:hover { text-decoration: underline; }
.pied__logo img { width: 150px; height: 65px; object-fit: contain; margin-bottom: 0.85rem; }
.pied__bas {
  border-top: 1px solid var(--trait);
  padding-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  font-size: var(--fs-micro);
  color: var(--ink-soft);
}
.reseaux { display: flex; gap: 0.75rem; padding: 0; }
.reseaux a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--trait);
  border-radius: 50%;
  color: var(--ink);
}
.reseaux a:hover { background: var(--ink); color: var(--paper); }

/* ---------- Questions fréquentes ---------- */
.questions { max-width: 72ch; }
.question {
  border-top: 1px solid var(--trait);
  padding: 0.35rem 0;
}
.question:last-of-type { border-bottom: 1px solid var(--trait); }
.question summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  padding: 0.95rem 2rem 0.95rem 0;
  position: relative;
}
.question summary::-webkit-details-marker { display: none; }
.question summary::after {
  content: "";
  position: absolute;
  right: 0.3rem;
  top: 1.5rem;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--lac);
  border-bottom: 2px solid var(--lac);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}
.question[open] summary::after { transform: rotate(-135deg); }
.question p {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  margin: 0 0 1.1rem;
}

/* ---------- Utilitaires ---------- */
.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Page intérieure ---------- */
.page-texte { max-width: 68ch; }
.page-texte h1 { font-size: var(--fs-h2); margin-bottom: 1.5rem; }
.page-texte h2 { font-size: 1.35rem; margin-top: 2.25rem; }

/* ---------- Blog ---------- */
/* Les billets reprennent la carte encre du reste du site. Le sommaire du
   blog est une grille de cartes ; l'article, lui, est une colonne de
   lecture etroite sur le papier, parce qu'on y reste plusieurs minutes et
   qu'un aplat sombre sur mille mots fatigue. */
.blog__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* auto-fill et non auto-fit : avec un seul article, auto-fit etirait la
     carte sur toute la largeur de la page. La colonne garde sa mesure,
     que le blog compte un billet ou douze. */
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
/* Etat vide du blog : le message n'est pas pose a la main, il est masque
   des que la liste contient un billet. Vider la liste suffit donc a le
   faire apparaitre, et publier un article a le faire disparaitre — rien
   a synchroniser entre le HTML et ce qui est affiche. */
.blog__vide {
  background: var(--paper-2);
  border: 1px dashed var(--trait);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  max-width: 54ch;
}
.blog__vide h2,
.blog__vide h3 {
  font-size: var(--fs-h3);
  margin-bottom: 0.5rem;
}
.blog__vide p {
  color: var(--ink-soft);
  font-size: var(--fs-small);
  margin-bottom: 1.25rem;
}
.blog__vide .bouton + .bouton { margin-left: 0.5rem; }
.blog__liste:has(> li) + .blog__vide { display: none; }

/* Renvoi vers le blog complet, sous la liste de la page d'accueil. */
.blog__tous {
  margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
  font-family: var(--display);
  font-size: var(--fs-small);
  font-weight: 600;
}

.billet {
  --equerre: var(--lac-clair);
  --equerre-marge: 8px;
  background-color: var(--panneau);
  color: var(--sur-panneau);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.billet__meta {
  font-family: var(--display);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lac-clair);
  margin: 0;
}
.billet__titre { font-size: 1.2rem; line-height: 1.2; margin: 0; }
.billet__titre a {
  color: var(--blanc);
  text-decoration: none;
}
/* Toute la carte est cliquable, mais c'est le titre qui porte le lien :
   un lecteur au clavier n'a ainsi qu'une seule tabulation par billet. */
.billet__titre a::after { content: ""; position: absolute; inset: 0; }
.billet { position: relative; }
.billet:hover { background-color: color-mix(in srgb, var(--ink) 92%, var(--lac)); }
.billet__titre a:focus-visible { outline: 2px solid var(--lac-clair); outline-offset: 4px; }
.billet__chapo { font-size: var(--fs-small); color: var(--ink-soft); margin: 0; }
.billet__lire {
  font-family: var(--display);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--lac-clair);
  margin: auto 0 0;
}

/* L'article lui-meme */
.article { max-width: 68ch; }
.article__meta {
  font-family: var(--display);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lac);
  margin: 0 0 0.75rem;
}
.article h1 { font-size: var(--fs-h2); margin-bottom: 1rem; text-wrap: balance; }
.article__chapo {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--trait);
}
.article__corps h2 { font-size: 1.35rem; margin-top: 2.5rem; margin-bottom: 0.75rem; }
.article__corps h3 { font-size: 1.1rem; margin-top: 1.75rem; margin-bottom: 0.5rem; }
.article__corps p { margin: 0 0 1.1rem; }
.article__corps ul, .article__corps ol { margin: 0 0 1.4rem; padding-left: 1.3rem; }
.article__corps li { margin-bottom: 0.5rem; }
.article__corps a { font-weight: 600; }
/* L'encadre : un conseil detache du fil, marque par un filet lac plutot
   que par un aplat, pour ne pas concurrencer les cartes du site. */
.article__encadre {
  border-left: 3px solid var(--lac);
  background: var(--surface);
  padding: 1.1rem 1.25rem;
  margin: 0 0 1.4rem;
  font-size: var(--fs-small);
}
.article__encadre p:last-child { margin-bottom: 0; }
.article__encadre strong { font-family: var(--display); }

/* Le pied d'article ramene vers l'offre : c'est la raison d'etre du blog. */
.article__pied {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--trait);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}
.article__pied p { margin: 0; flex: 1 1 22ch; font-size: var(--fs-small); color: var(--ink-soft); }

/* Signature d'article : portrait, nom, role. Posee en haut d'un edito,
   parce qu'on lit d'abord qui parle. */
.signature {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 1.5rem;
}
.signature__portrait {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border: 1px solid var(--trait);
  flex: none;
}
.signature__texte { margin: 0; display: grid; }
.signature__nom { font-family: var(--display); font-weight: 700; font-size: 1.05rem; }
.signature__role { font-size: var(--fs-small); color: var(--ink-soft); }
/* La signature de fin, alignee a droite comme au bas d'une lettre. */
.article__signe {
  font-family: var(--display);
  font-weight: 600;
  text-align: right;
  margin-top: 1.75rem;
}

.fil {
  font-family: var(--display);
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
}
.fil a { color: var(--lac); }
.fil span { padding: 0 0.4rem; opacity: 0.5; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .contact { grid-template-columns: 1fr; }

  /* Plus de colonne de blanc à droite : les preuves repassent sous les
     boutons, en rangée de trois, glyphe au-dessus du chiffre. */
  .hero__contenu { display: block; }
  .hero__preuves {
    margin-top: clamp(2rem, 5vw, 2.75rem);
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--trait);
  }
  .preuve {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 0.6rem;
    padding: 1rem 0.75rem;
  }
}

/* ---------- En-tête : bascule en menu déroulant ----------
   Sept intitulés plus un bouton d'appel ne tiennent pas sur une ligne en
   dessous de 1240 px : ils passaient sur deux ou trois lignes et le bouton
   d'appel enflait en pavé. Mesuré au rendu : la barre réclame 1125 px, et
   le conteneur vaut la fenêtre moins deux gouttières de 40 px — il faut
   donc 1205 px de fenêtre, 1240 avec la marge de sécurité. Le seuil est
   celui de l'en-tête seul, pas celui du reste de la mise en page, qui
   bascule plus bas. */
/* Le menu etant desormais deroulant a toutes les largeurs, il ne reste ici
   que ce qui tient vraiment a la place : la barre se resserre et le logo
   suit. Le seuil est celui de l'en-tete seul. */
@media (max-width: 1240px) {
  body { padding-top: 4.75rem; }
  .entete__barre { min-height: 4.75rem; }
  .entete[data-defile="oui"] .entete__barre { min-height: 4rem; }
  .entete__logo img { width: 122px; height: 53px; }
  .entete[data-defile="oui"] .entete__logo img { width: 99px; height: 43px; }
}

/* Sous 560 px, l'appel a l'action ne garde que le combine : trois elements
   plus un libelle de vingt-trois caracteres ne tiennent pas sur la rangee.
   Le nom accessible reste porte par le texte, simplement sorti du rendu. */
@media (max-width: 560px) {
  .entete__barre { gap: 0.75rem; }
  .entete__appel { padding: 0.55rem; border-radius: 50%; }
  .entete__appel__texte {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

@media (max-width: 780px) {
  .itineraire__etapes { grid-template-columns: 1fr; gap: 0; }
  .itineraire__etapes::before {
    top: 12px;
    bottom: 12px;
    left: 11px;
    height: auto;
    width: 2px;
    background: repeating-linear-gradient(180deg, var(--trait) 0 8px, transparent 8px 14px);
    transform-origin: top center;
    animation-name: trace-vertical;
  }
  @keyframes trace-vertical { from { transform: scaleY(0); } to { transform: scaleY(1); } }

  .etape { text-align: left; }
  .etape__lien {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 0 1rem;
    align-items: center;
    padding: 0.6rem 0;
  }
  .etape__point { margin: 0; }
  .etape__niveau,
  .etape__quoi { grid-column: 2; }

  .champs { grid-template-columns: 1fr; }
  .temoignages { columns: 1; }

  .fondatrice__portrait { width: 80px; height: 80px; }
  .fondatrice__chiffres { gap: 1.25rem; }
  .fondatrice__portrait { width: 64px; height: 64px; }
  .fondatrice h3 { font-size: 1.25rem; }
  .fondatrice__valeur { font-size: 1.25rem; }
  .formule,
  .fondatrice,
  .legende__item,
  .news__carte,
  .temoignage { --equerre-taille: 14px; }
  .legende__fait { font-size: 1.1rem; }
  .pied__bas { flex-direction: column; }
}

@media (max-width: 480px) {
  .hero h1 { max-width: none; }
  /* « d'admission Parcoursup » sur trois colonnes de cent pixels se coupe en
     quatre lignes : sous 480 px la rangée redevient une liste. */
  .hero__preuves { grid-template-columns: 1fr; }
  .preuve {
    grid-template-columns: 44px minmax(0, 1fr);
    justify-items: start;
    text-align: left;
    gap: 0.9rem;
    padding: 0.85rem 1rem;
  }
  .hero__actions .bouton { width: 100%; justify-content: center; }
  .formule { padding: 1.35rem; }
  .presse__piste > .presse__article { width: 160px; }
  /* Deux colonnes dans une carte de 300 px : les mots se coupent. */
  .fondatrice__faits { grid-template-columns: 1fr; }
  .legende__item { padding: 0.9rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media print {
  .entete, .nav, .formulaire { display: none; }
  /* Sans l'en-tete, son retrait n'a plus lieu d'etre. */
  body { padding-top: 0; }
  /* Les navigateurs n'impriment pas les images de fond : sans cadre, les
     cartes n'auraient plus aucune limite sur le papier. */
  .formule, .fondatrice, .legende__item, .temoignage, .billet { border: 1px solid #999; }
  body { background: #fff; color: #000; }
}

/* =========================================================
   Refonte 2026 — demandes du document « modif site »
   ========================================================= */

/* ---------- Hero ---------- */
/* Le fond du hero est le marine de toute la page, avec pour tout decor une
   lueur posee dessus. Elle s'efface sur le bas du hero : rien ne marque sa
   fin, elle se poursuit dans la section suivante. Une seule enseigne au
   neon s'y detache, « un avenir. » dans le titre ; c'est le seul neon du
   site. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --neon-bleu: #2f8cff;
  --neon-vert: #08fc3c;
  --neon-vert-coeur: #e2ffd6;
}

.hero__decor {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
}
/* La lumiere sur le fond : bleue a droite, verte sous le titre. */
.hero__lueur {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(560px 380px at 74% 34%, color-mix(in srgb, var(--neon-bleu) 15%, transparent), transparent 70%),
    radial-gradient(520px 300px at 26% 52%, color-mix(in srgb, var(--neon-vert) 8%, transparent), transparent 70%);
}

/* Le titre : « un avenir. » en tube neon vert, dessine au trait, sans
   remplissage. La classe est posee dans le HTML sur le dernier segment.
   Le tube ne gresille pas : un clignotement sous les yeux du visiteur, le
   temps qu'il lise la premiere phrase, se remarque plus qu'il n'habille. */
.hero__accent {
  color: transparent;
  -webkit-text-stroke: 2px var(--neon-vert-coeur);
  filter:
    drop-shadow(0 0 2px var(--neon-vert))
    drop-shadow(0 0 7px var(--neon-vert))
    drop-shadow(0 0 18px var(--neon-vert));
}
@media (max-width: 700px) {
  .hero__accent { -webkit-text-stroke-width: 1.5px; }
}

/* Le trait court au-dessus du titre, repris des maquettes. */
.hero__filet {
  display: block;
  width: 68px;
  height: 3px;
  background: var(--vert);
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
  box-shadow: var(--lueur);
}

/* Le hero passe en deux colonnes : le discours a gauche, le selecteur de
   classe a droite, comme sur la maquette. */
.hero__grille {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 901px) {
  .hero__grille { grid-template-columns: 1.35fr 1fr; }
}

/* ---------- Le selecteur de classe, dans le hero ---------- */
/* Camille le veut a droite du titre, puis en grand au clic. C'est donc un
   bouton, pas un <select> : il ouvre un dialogue. Le <select> reste dans le
   formulaire de contact, ou il n'a pas ce role. */
/* Un panneau pose sur le fond du hero, souligne d'un filet bleu : le tube
   au neon et son clignotement sont partis, seule la couleur reste pour le
   distinguer du discours a sa gauche. */
.hero__classe {
  position: relative;
  display: grid;
  gap: 1.25rem;
  align-content: start;
  padding: 1.75rem;
  border: 1px solid color-mix(in srgb, var(--neon-bleu) 40%, transparent);
  border-radius: 26px;
  background: rgba(5, 11, 22, 0.6);
}
@media (max-width: 900px) {
  .hero__classe { padding: 1.5rem 1.25rem; border-radius: 22px; }
}

.hero__classe-entete { display: flex; align-items: center; gap: 1rem; }

.hero__classe-rond {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  flex: none;
  border: 1.5px solid color-mix(in srgb, var(--neon-bleu) 45%, transparent);
  border-radius: 50%;
  color: var(--vert-texte);
}

.hero__classe-titre {
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}
.hero__classe-titre em { font-style: normal; color: var(--vert-texte); display: block; }

.hero__classe-bouton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1rem 1.25rem;
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--ink);
  background: var(--voile);
  border: 1px solid color-mix(in srgb, var(--neon-bleu) 55%, transparent);
  border-radius: 999px;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}
.hero__classe-bouton:hover {
  box-shadow: var(--lueur-forte);
  background: var(--vert);
  color: var(--sur-vert);
}
.hero__classe-bouton svg { flex: none; color: var(--vert-texte); }
.hero__classe-bouton:hover svg { color: var(--sur-vert); }

/* ---------- Le dialogue « en quelle classe ? » ---------- */
/* <dialog> natif : il gere le piege de tabulation, Echap et le retour du
   focus, trois choses qu'une surcouche maison rate presque toujours. Le flou
   demande par Camille est sur ::backdrop. */
.modale-classe {
  width: min(100% - 2rem, 30rem);
  padding: 0;
  border: 1px solid var(--vert);
  border-radius: var(--rayon-l);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}

.modale-classe::backdrop {
  background: color-mix(in srgb, #0b1a2e 72%, transparent);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.modale-classe[open] { animation: modale-entree 0.22s ease-out; }
@keyframes modale-entree {
  from { transform: translateY(10px) scale(0.98); }
  to   { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .modale-classe[open] { animation: none; }
}

.modale-classe__entete {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 1.5rem 0.25rem;
}
.modale-classe__titre {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
.modale-classe__titre em { font-style: normal; color: var(--vert-texte); }

.modale-classe__fermer {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--trait);
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}
.modale-classe__fermer:hover { color: var(--ink); border-color: var(--ink-soft); }

.modale-classe__liste {
  list-style: none;
  margin: 0;
  padding: 1.25rem 1.5rem 1.5rem;
  display: grid;
  gap: 0.75rem;
}

.classe-choix {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-l);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s;
}
.classe-choix:hover {
  border-color: var(--vert);
  box-shadow: var(--lueur);
  transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
  .classe-choix:hover { transform: none; }
}

.classe-choix__rond {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 2px solid var(--vert);
  border-radius: 50%;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--vert-texte);
}
.classe-choix:hover .classe-choix__rond { box-shadow: var(--lueur); }

.classe-choix__texte { display: grid; gap: 0.1rem; }
.classe-choix__nom { font-family: var(--display); font-weight: 700; font-size: 1rem; }
.classe-choix__quoi { font-size: var(--fs-small); color: var(--ink-soft); }

.classe-choix__fleche {
  margin-left: auto;
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--vert);
  border-radius: 50%;
  color: var(--vert-texte);
}

/* ---------- Deuxieme page : l'accompagnement ---------- */
/* Les trois chiffres viennent du hero, ou ils encombraient la premiere vue.
   Camille ne garde que ces pictos-la : les trois lignes du haut passent en
   texte simple, sans vignette. */
.accompagnement__grille {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 880px) {
  .accompagnement__grille { grid-template-columns: 1.05fr 1fr; }
}

.accompagnement__faits { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.accompagnement__fait { border-left: 2px solid var(--trait); padding-left: 1rem; }
.accompagnement__fait strong { display: block; font-family: var(--display); font-size: 1.05rem; }
.accompagnement__fait span { color: var(--ink-soft); font-size: var(--fs-small); }

/* Les trois chiffres. Separes par un filet plutot qu'enfermes dans des
   cartes : trois cadres de plus auraient refait la serie de tuiles que
   Camille trouve deja trop nombreuse. */
.chiffres {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
}
@media (max-width: 560px) {
  .chiffres { grid-template-columns: 1fr; text-align: left; }
  .chiffre { display: flex; align-items: center; gap: 1rem; }
  .chiffre + .chiffre { border-top: 1px solid var(--trait); padding-top: 1.25rem; }
}
@media (min-width: 561px) {
  .chiffre + .chiffre { border-left: 1px solid var(--trait); }
}

.chiffre__rond {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 0.85rem;
  flex: none;
  border: 2px solid var(--vert);
  border-radius: 50%;
  color: var(--vert-texte);
  box-shadow: var(--lueur);
}
@media (max-width: 560px) {
  .chiffre__rond { margin: 0; width: 52px; height: 52px; }
}

.chiffre__valeur {
  display: block;
  font-family: var(--display);
  font-size: clamp(2rem, 4.5vw, 2.9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--vert-texte);
}
.chiffre__quoi { display: block; margin-top: 0.35rem; font-size: var(--fs-small); color: var(--ink-soft); }

/* ---------- Troisieme page : l'ADN sur l'arc ---------- */
.adn--arc { position: relative; overflow: hidden; }
.adn--arc .section-entete { max-width: none; text-align: center; margin-inline: auto; }
.adn--arc .surtitre { justify-content: center; }
/* .section-entete .adn__chapo et non .adn__chapo seul : le chapo est borne
   a 62ch, et sans les marges automatiques son bloc se calait a gauche de
   l'enveloppe — le texte s'y centrait bien, mais 283 px plus a gauche que
   le titre. Les marges venaient d'etre effacees par .section-entete p, qui
   pose margin: 0 et l'emporte avec une classe et un element contre une
   seule classe. */
.section-entete .adn__chapo {
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
  color: var(--ink-soft);
}

.adn__scene { position: relative; margin-top: clamp(2rem, 5vw, 3.5rem); }

/* L'arc lui-meme. Il n'existe qu'a partir de 900px : en dessous, les quatre
   piliers s'empilent et une courbe qui les traverserait ne relierait plus
   rien. */
.adn__arc { display: none; }
@media (min-width: 900px) {
  .adn__arc {
    display: block;
    position: absolute;
    inset: 0 0 auto;
    width: 100%;
    height: 180px;
    overflow: visible;
    color: var(--vert);
  }
}

.adn__liste--arc {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .adn__liste--arc { grid-template-columns: repeat(4, 1fr); padding-top: 150px; }
  /* Ces 150 px degagent l'arc : les tiges partent exactement ou le retrait
     s'arrete, et les bouts de la courbe tombent dedans. Le retrait n'est
     donc pas negociable — mais il s'ajoutait a la marge qui separe le chapo
     de la scene, et les deux ensemble faisaient 206 px de vide avant la
     premiere tige. On resserre la marge, pas le retrait, et seulement ici :
     sous 900 px l'arc n'existe pas, les piliers s'empilent, et l'ecart d'une
     entete de section a son contenu doit rester celui du reste du site. */
  .adn--arc .section-entete { margin-bottom: 1rem; }
  .adn--arc .adn__scene { margin-top: 1rem; }
  /* Les deux piliers du milieu sont plus hauts sur l'arc : on les remonte
     pour que chaque titre reste sous son point. */
  .adn__liste--arc > :nth-child(2),
  .adn__liste--arc > :nth-child(3) { margin-top: -48px; }
}

.adn__pilier { text-align: center; position: relative; }
@media (max-width: 899px) {
  .adn__pilier { text-align: left; border-left: 2px solid var(--vert); padding-left: 1.25rem; }
}

.adn__tige {
  display: none;
  position: relative;
  width: 2px;
  height: 26px;
  margin: 0 auto 0.9rem;
  background: var(--vert);
}
/* Le point pose sur l'arc. En CSS plutot que dans le SVG : il tombe ainsi
   pile au centre de la colonne, quelle que soit la gouttiere de la grille. */
.adn__tige::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--vert);
  box-shadow: var(--lueur-forte);
}
@media (min-width: 900px) { .adn__tige { display: block; } }

.adn__filet {
  display: block;
  width: 36px;
  height: 2px;
  background: var(--vert);
  margin: 0 auto 0.9rem;
  box-shadow: var(--lueur);
}
@media (max-width: 899px) { .adn__filet { display: none; } }

/* Le filet vert de l'arc remplace la borne que .adn__nom porte en bordure
   haute dans la mise en page d'origine : la garder tracerait une seconde
   ligne, large de toute la colonne, juste sous la premiere. */
.adn__pilier .adn__nom {
  font-size: var(--fs-h3);
  margin-bottom: 0.6rem;
  padding-top: 0;
  border-top: 0;
  justify-self: stretch;
  padding-right: 0;
}
.adn__pilier .adn__adage {
  font-style: italic;
  color: var(--vert-texte);
  font-size: var(--fs-small);
  margin-bottom: 0.7rem;
}
.adn__pilier .adn__texte { font-size: var(--fs-small); color: var(--ink-soft); margin: 0; max-width: none; }

/* ---------- L'ADN : les piliers se posent, puis repondent ----------
   Deux mouvements qui ne se croisent pas. Le premier joue une fois, a
   l'entree dans le champ : les quatre colonnes montent l'une apres
   l'autre. Le second ne part jamais seul, il repond au visiteur.

   Le remplissage est « backwards » et non « both » comme pour les
   temoignages, parce que les deux mouvements se disputent le meme
   transform : avec both, l'etat final de l'animation resterait pose sur
   le pilier et le survol n'aurait plus prise. Backwards tient l'etat de
   depart pendant le retard, puis rend le pilier a ses regles normales —
   qui valent exactement ce que l'animation vient d'atteindre, de sorte
   que rien ne saute au passage. */
@keyframes adn-pilier-monte {
  from { transform: translateY(20px); }
  to { transform: none; }
}
.adn__liste[data-pose="oui"] .adn__pilier {
  animation: adn-pilier-monte 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
  animation-delay: calc(var(--i, 0) * 110ms);
}

/* Le survol : le pilier se souleve, son point grossit et s'entoure de
   lueur, son titre passe au vert, son filet s'allonge. :focus-within
   double le geste au clavier — les piliers ne sont pas cliquables, mais
   le texte se parcourt.

   Le filet s'etire en scaleX plutot qu'en width : la largeur recalculerait
   la mise en page a chaque image, l'echelle non. Il est centre, l'etirement
   part donc du milieu. */
.adn__pilier { transition: transform 0.25s ease; }
.adn__pilier .adn__tige::before { transition: transform 0.25s ease; }
.adn__pilier .adn__filet { transition: transform 0.25s ease; }

.adn__pilier:hover,
.adn__pilier:focus-within { transform: translateY(-5px); }
.adn__pilier:hover .adn__tige::before,
.adn__pilier:focus-within .adn__tige::before { transform: scale(1.6); box-shadow: 0 0 16px var(--vert); }
.adn__pilier:hover .adn__nom,
.adn__pilier:focus-within .adn__nom { color: var(--vert-texte); }
.adn__pilier:hover .adn__filet,
.adn__pilier:focus-within .adn__filet { transform: scaleX(1.6); }

/* Qui demande moins de mouvement garde la section entiere, immobile. */
@media (prefers-reduced-motion: reduce) {
  .adn__liste[data-pose="oui"] .adn__pilier { animation: none; }
  .adn__pilier,
  .adn__pilier .adn__tige::before,
  .adn__pilier .adn__nom,
  .adn__pilier .adn__filet { transition: none; }
  .adn__pilier:hover,
  .adn__pilier:focus-within { transform: none; }
  .adn__pilier:hover .adn__tige::before,
  .adn__pilier:focus-within .adn__tige::before { transform: none; }
  .adn__pilier:hover .adn__filet,
  .adn__pilier:focus-within .adn__filet { transform: none; }
}

/* ---------- Formules : le panneau d'une classe ---------- */
/* La section ne montre plus que ses quatre cartes de classe ; les sept
   fiches vivent dans ce panneau, ou main.js les a emportees. Les onglets de
   niveau ont disparu avec le catalogue : la carte de classe fait le meme
   travail, en disant pour qui elle est. */
.modale-formules {
  width: min(100% - 1.5rem, 46rem);
  max-height: min(100% - 1.5rem, 54rem);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--vert);
  border-radius: var(--rayon-l);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}
/* Le display: flex ci-dessus ecrase le display: none que le navigateur donne
   au dialogue ferme : le panneau restait affiche, en position absolue, par-
   dessus la presentation de Camille et Julie. Ferme, il disparait. */
.modale-formules:not([open]) { display: none; }
.modale-formules::backdrop {
  background: color-mix(in srgb, #0b1a2e 72%, transparent);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.modale-formules[open] { animation: modale-entree 0.22s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .modale-formules[open] { animation: none; }
}

/* L'en-tete et le pied restent en place, seules les fiches defilent : sur
   un telephone, le titre de la classe sortait de l'ecran des la premiere
   fiche et on ne savait plus quel niveau on lisait. */
.modale-formules__entete {
  flex: none;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border-bottom: 1px solid var(--trait);
}
.modale-formules__surtitre { margin: 0 0 0.5rem; }
.modale-formules__titre {
  font-family: var(--display);
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
/* L'exposant garde sa minuscule, comme sur la carte d'ou vient le titre. */
.modale-formules__titre sup { text-transform: none; }
.modale-formules__quoi {
  margin: 0.4rem 0 0;
  max-width: 54ch;
  color: var(--ink-soft);
  font-size: var(--fs-small);
}
.modale-formules__fermer { align-self: start; }

.modale-formules__corps {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(1.25rem, 3vw, 1.75rem);
}
.modale-formules__pied {
  flex: none;
  padding: 1rem clamp(1.25rem, 3vw, 1.75rem);
  border-top: 1px solid var(--trait);
}
.modale-formules__pied .bouton { width: 100%; justify-content: center; }

/* Une seule colonne, une fiche sous l'autre. Sur deux colonnes, la fiche de
   la classe — la seule de sa rangee, puisque les autres suivent l'intertitre
   — laissait une moitie de panneau vide a sa droite, et la troisieme, qui
   n'a que deux fiches en tout, deux demi-rangees. Une colonne se lit comme
   la page de la classe, ce qu'elle est. */
.modale-formules .formules { grid-template-columns: minmax(0, 1fr); }

/* Le filtrage se fait sur l'attribut hidden : le panneau garde les sept
   fiches, ce qui laisse les liens profonds fonctionner, et n'en montre
   qu'une famille a la fois. */
.formule[hidden],
.formules__plus[hidden] { display: none; }

/* L'intertitre ouvre la liste de chaque classe. Il occupe toute la largeur
   de la grille : il annonce ce qui le suit, pas une colonne. */
.formules__plus {
  grid-column: 1 / -1;
  margin-bottom: clamp(0.25rem, 1vw, 0.5rem);
}
.formules__hors-surtitre {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--display);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.6rem;
}
.formules__hors-surtitre::before { content: ""; width: 34px; height: 2px; background: var(--vert); }
.formules__hors-titre {
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  margin-bottom: 0.4rem;
}
.formules__hors-note { color: var(--ink-soft); font-size: var(--fs-small); margin: 0; max-width: 62ch; }

.formule--unite h4 {
  font-family: var(--display);
  font-size: 1.2rem;
  line-height: 1.15;
  color: var(--blanc);
  margin: 0 0 0.85rem;
}

/* ---------- Jetons du panneau ---------- */
/* Les panneaux et les cartes marine : le texte doux et le vert y sont ceux
   qui se lisent sur un aplat sombre. */
.entete,
.formule,
.pilier,
.news__carte,
.temoignage,
.billet {
  --ink-soft: var(--sur-panneau-doux);
  --vert-texte: var(--vert);
}

/* La grille du hero remplace l'ancienne mise en page a trois rangees, qui
   calait le chapo et les boutons en premiere colonne pour laisser la place
   aux preuves chiffrees. Ces preuves sont parties dans l'accompagnement :
   sans cette remise a plat, le bloc « en quelle classe » heriterait de leur
   emplacement. */
.hero__grille .hero__chapo,
.hero__grille .hero__actions { grid-column: auto; }

/* ---------- Une carte posee dans un panneau inverse ---------- */
/* Le formulaire de contact repose son propre fond, --surface, au milieu de la
   section encre. Son aplat n'est donc pas retourne, alors que les jetons du
   panneau, eux, le sont : sans ce retour, sa mention legale prenait le texte
   doux calibre pour le panneau et tombait a 2,0 de contraste. */
.formulaire,
.formulaire__etat,
/* La fiche fondatrice est dans le meme cas depuis qu'elle est passee au
   traitement « profil » : une carte a son propre fond, posee sur la section
   encre. Le role et les mesures des chiffres y prenaient le texte doux du
   panneau, pale, sur le blanc de la carte. */
.fondatrice {
  --ink-soft: var(--ink-soft-page);
  --vert-texte: var(--vert-texte-page);
}

/* ---------- Le sous-titre de l'ADN ---------- */
/* La maquette pose une ligne entre le titre et le paragraphe : elle annonce
   la promesse, le paragraphe l'explique. */
.adn__sous-titre {
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: none;
  margin: -0.2rem 0 0.9rem;
}

/* ---------- Les reseaux dans le hero ---------- */
/* Ils remplissent le vide laisse sous le selecteur de classe. La liste est la
   meme qu'au pied de page ; elle n'y est pas dupliquee par hasard, le hero
   est le seul endroit ou elle se voit sans defiler. */
/* Poses bas dans la colonne, dans le vide laisse sous le selecteur, plutot
   que colles dessous : c'est cet espace-la qui restait inoccupe. */
.hero__reseaux { margin: clamp(1.5rem, 6vw, 4.5rem) 0 0; list-style: none; }
.hero__reseaux a { border-color: color-mix(in srgb, var(--ink) 28%, transparent); }
.hero__reseaux a:hover { background: var(--vert); color: var(--sur-vert); border-color: var(--vert); }
@media (max-width: 900px) { .hero__reseaux { margin-top: 0.25rem; } }

/* ---------- Le vert, partout ---------- */
/* Le neon reste au titre d'accueil et nulle part ailleurs : etendu au site
   entier, il allumait tout a la fois et plus rien ne ressortait. Les ronds,
   les filets et les mots verts des titres gardent donc le vert plein, sans
   halo ni tube. Les regles de base portent deja « color: var(--vert-texte) »
   pour les mots verts et les grands chiffres, il n'y a rien a y remettre. */
/* Les regles de base portent deja « color: var(--vert-texte) » pour les
   mots verts des titres et les grands chiffres : en retirant le tube, il n'y
   a rien a remettre a leur place. */

/* ---------- Le laser des titres ---------- */
/* Le trait neon que main.js fait entrer par la droite et courir sur chaque
   titre a son arrivee ; il disparait une fois passe. Sans script ou en
   mouvement reduit, il n'existe pas. C'est le seul endroit du site, avec
   « un avenir. », ou le vert s'allume encore. */
.balayage {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: 100%;
  width: 2px;
  background: var(--neon-vert-coeur);
  box-shadow: 0 0 6px var(--neon-vert), 0 0 16px var(--neon-vert), 0 0 30px var(--neon-vert);
  pointer-events: none;
  z-index: 5;
  opacity: 0;
}

/* ---------- Cartes facon Blackmoon ---------- */
/* Tete commune aux cartes du concept et des classes : les visages de
   Camille et Julie a gauche, une fleche a droite. La couleur de la carte
   passe par --c. */
.carte-tete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  color: var(--c, var(--vert));
}
.carte-tete svg { transition: transform 0.35s ease; }
.avatars { display: flex; }
.avatars img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--c, var(--vert));
  background: var(--paper);
}
.avatars img + img { margin-left: -12px; }


/* Les formules : une carte par classe, au-dessus des onglets. */
.classes-cartes {
  list-style: none;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.85rem, 1.6vw, 1.25rem);
}
.classes-cartes li { display: flex; }
.classes-cartes li:nth-child(1) { --c: var(--vert); }
.classes-cartes li:nth-child(2) { --c: var(--lac); }
.classes-cartes li:nth-child(3) { --c: var(--ambre); }
.classes-cartes li:nth-child(4) { --c: var(--neon-bleu); }
.classe-carte {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 1.4rem 1.35rem 1.3rem;
  border: 1.5px solid var(--c);
  border-radius: 20px;
  background: #0f1f35;
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s ease;
}
.classe-carte:hover,
.classe-carte:focus-visible { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--c), 0 0 28px color-mix(in srgb, var(--c) 40%, transparent); color: var(--ink); }
.classe-carte:hover .carte-tete svg { transform: translate(3px, -3px); }
.classe-carte h3 {
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--blanc);
  margin: 0 0 0.9rem;
}
.classe-carte p { font-size: var(--fs-small); color: var(--ink-soft); margin: 0 0 1.4rem; }
.classe-carte__lire {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.9rem;
}
.classe-carte__lire svg { transition: transform 0.3s ease; }
.classe-carte:hover .classe-carte__lire svg { transform: translateX(4px); }
@media (max-width: 1000px) { .classes-cartes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .classes-cartes { grid-template-columns: 1fr; } }

/* L'accompagnement : les chiffres en mosaique.
   Deux encadres cote a cote dans la colonne de gauche, et c'est leur
   contraste qui les distingue : le chiffre phare sur un aplat de vert, la
   satisfaction sur du blanc. La photo du cabinet est cernee d'un filet
   blanc, assez clair pour la detacher du fond marine sans l'encadrer
   lourdement. */
.bento {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "phare photo" "avis photo" "barre barre";
  align-self: center;
}
.bento > * { border-radius: 22px; overflow: hidden; position: relative; margin: 0; }
.bento__photo {
  grid-area: photo;
  min-height: 340px;
  border: 2px solid rgba(255, 253, 249, 0.55);
}
.bento__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bento__photo figcaption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 0.35rem 0.8rem;
  border-radius: 8px;
  background: var(--sur-panneau);
  color: var(--paper);
  font: 700 0.8rem var(--display);
}
.bento__phare {
  grid-area: phare;
  display: flex;
  flex-direction: column;
  min-height: 262px;
  padding: 1.4rem 1.5rem 1.5rem;
  background: var(--vert);
  color: var(--paper);
}
.bento__haut { display: flex; justify-content: space-between; align-items: center; position: relative; }
.bento__etiquette {
  padding: 0.3rem 0.7rem;
  border-radius: 7px;
  background: var(--sur-panneau);
  font: 700 0.72rem var(--display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bento__phare .bento__gros { margin-top: auto; font: 800 clamp(3rem, 5vw, 4rem)/1 var(--display); letter-spacing: -0.02em; position: relative; }
.bento__phare p { margin: 0.4rem 0 0; font: 600 1.02rem/1.25 var(--display); position: relative; }
.bento__decor { position: absolute; right: -30px; bottom: -40px; width: 190px; height: 190px; color: rgba(255, 255, 255, 0.28); pointer-events: none; }
.bento__avis {
  grid-area: avis;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
  min-height: 190px;
  padding: 1.4rem 1.5rem;
  background: var(--blanc);
  border: 2px solid rgba(255, 253, 249, 0.55);
}
.bento__avis .bento__gros { font: 800 3rem/1 var(--display); color: var(--sur-vert); }
.bento__etoiles { color: var(--vert); letter-spacing: 0.15em; font-size: 1.15rem; }
.bento__avis p { margin: 0; color: color-mix(in srgb, var(--sur-vert) 80%, var(--blanc)); font: 600 0.98rem var(--display); }
.bento__barre {
  grid-area: barre;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 1.4rem 0.6rem;
  text-align: center;
  border: 1.5px solid rgba(232, 240, 251, 0.22);
}
.bento__barre li + li { border-left: 1px solid rgba(232, 240, 251, 0.22); }
.bento__barre strong { display: block; font: 800 2.1rem/1.05 var(--display); color: var(--ink); }
.bento__barre span { display: block; margin-top: 0.3rem; padding: 0 0.3rem; color: var(--ink-soft); font: 600 0.85rem/1.25 var(--display); }
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; grid-template-areas: "photo" "phare" "avis" "barre"; }
  .bento__photo { min-height: 240px; }
  .bento__phare { min-height: 0; }
  .bento__avis { min-height: 0; }
  .bento__barre strong { font-size: 1.6rem; }
}

/* MAP news : cartes claires, la rubrique en etiquette posee de travers. */
#news .news__liste { gap: clamp(1rem, 2vw, 1.5rem); }
#news .news__carte {
  background: var(--sur-panneau);
  background-image: none;
  color: var(--paper);
  border-radius: 26px;
  padding: 1.6rem 1.5rem 1.5rem;
  gap: 0.7rem;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
#news .news__carte:hover { transform: translateY(-5px); }
#news .news__date {
  justify-self: start;
  padding: 0.4rem 0.85rem;
  border-radius: 9px;
  background: var(--vert);
  color: var(--paper);
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.8rem;
  text-shadow: none;
  transform: rotate(-6deg);
  margin-bottom: 0.4rem;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#news .news__carte:nth-child(3n + 2) .news__date { background: var(--ambre); transform: rotate(5deg); }
#news .news__carte:nth-child(3n) .news__date { background: var(--lac); transform: rotate(-4deg); }
#news .news__carte:hover .news__date { transform: rotate(0); }
#news .news__intitule { color: var(--paper); font-size: clamp(1.25rem, 2vw, 1.5rem); text-transform: uppercase; line-height: 1.1; }
#news .news__texte { color: #3a4659; }
#news .news__lien { color: var(--paper); font-family: var(--display); font-weight: 700; }
#news .news__portrait { border-radius: 50%; border: 2px solid var(--vert); width: 56px; height: 56px; }

/* Temoignages : l'eventail. main.js pose data-eventail et --d (l'ecart a
   la carte du centre) ; sans script, les cartes restent en colonnes. */
.temoignages[data-eventail] { columns: auto; position: relative; height: 600px; margin-top: 1rem; }
#temoignages:has(.temoignages[data-eventail]) { overflow: hidden; }
.temoignages[data-eventail] .temoignage {
  --a: 0;
  position: absolute !important;
  left: 50%;
  top: 20px;
  width: min(340px, 76vw);
  min-height: 440px;
  margin: 0;
  padding: 1.6rem 1.5rem;
  border-radius: 24px;
  background: var(--paper);
  background-image: none;
  color: var(--ink);
  border: 1.5px solid rgba(232, 240, 251, 0.55);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transform: translateX(calc(-50% + var(--d, 0) * 92%)) translateY(calc(var(--a) * 26px)) rotate(calc(var(--d, 0) * 6deg));
  opacity: calc(1 - var(--a) * 0.25);
  z-index: calc(10 - var(--a));
  cursor: pointer;
  animation: none;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.6s ease, background-color 0.4s ease, color 0.4s ease;
}
.temoignages[data-eventail] .temoignage[data-loin] { opacity: 0; pointer-events: none; }
.temoignages[data-eventail] .temoignage::before,
.temoignages[data-eventail] .temoignage::after { display: none; }
.temoignages[data-eventail] .temoignage[data-actif] {
  background: var(--vert);
  color: var(--paper);
  border-color: var(--vert);
  cursor: default;
}
.temoignages[data-eventail] .temoignage blockquote { margin: 0; font-size: 1rem; line-height: 1.5; }
.temoignages[data-eventail] .temoignage figcaption { margin-top: auto; font-weight: 700; color: inherit; }
.temoin__initiale {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--sur-panneau);
  color: var(--paper);
  font: 800 1.3rem var(--display);
}
.temoin__nom { font: 800 1.35rem/1.1 var(--display); text-transform: uppercase; }
.temoins__fleches { display: flex; justify-content: center; gap: 1.5rem; margin-top: 1rem; }
.temoins__fleches button {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(232, 240, 251, 0.4);
  background: transparent;
  color: var(--ink);
  font-size: 1.3rem;
  cursor: pointer;
}
.temoins__fleches button:hover { border-color: var(--vert); color: var(--vert); }
@media (max-width: 560px) { .temoignages[data-eventail] { height: 640px; } }
/* L'exposant garde sa minuscule : « 3E » se lirait mal. */
.classe-carte h3 sup { text-transform: none; }
/* Sans la liste des reperes, le titre se centre face a la mosaique. */
@media (min-width: 901px) { .accompagnement__grille > div:first-child { align-self: center; } }

/* ---------- L'arrivee sur le site ---------- */
/* Trois temps en fondu sur le bleu nuit : le logo apparait puis s'efface,
   la phrase du titre d'accueil prend sa place, puis le voile se dissout et
   decouvre la page. Que des opacites : pas de canevas, pas de decoupe, rien
   que le navigateur ne compose sans peine sur un telephone.

   Le voile n'existe que si le script du <head> a pose data-intro : sans
   script, une fois deja vue, ou en mouvement reduit, la page s'affiche
   directement. Tout est en CSS et non en JavaScript : l'arrivee doit jouer
   des le premier affichage, sans attendre le chargement de main.js.

   La minuterie, a tenir d'un seul tenant (main.js lit INTRO_FIN, le <head>
   garde le filet de securite) :
     0,15 s  le logo apparait        2,60 s  il a fini de s'effacer
     2,50 s  la phrase apparait      4,60 s  le voile commence a partir
     5,40 s  la page est a nu. */
.intro { display: none; }
html[data-intro="oui"] { overflow: hidden; }
html[data-intro="oui"] .intro {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 1000;
  padding: 6vw;
  pointer-events: none;
  background:
    radial-gradient(560px 380px at 74% 34%, rgba(47, 140, 255, 0.16), transparent 70%),
    radial-gradient(520px 300px at 26% 62%, rgba(8, 252, 60, 0.1), transparent 70%),
    var(--paper);
  animation: intro-sortie 0.8s ease 4.6s both;
}
/* Les deux temps se superposent dans la meme case : l'un s'efface avant
   que l'autre arrive, ils ne se croisent donc jamais a l'ecran. */
.intro__temps { grid-area: 1 / 1; margin: 0; text-align: center; opacity: 0; }
.intro__logo {
  width: min(480px, 72vw);
  height: auto;
  animation: intro-passage 2.45s ease 0.15s both;
}
.intro__phrase {
  max-width: 22ch;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.75rem, 7vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  animation: intro-entree 0.8s ease 2.5s both;
}
/* Le seul neon du site, comme dans le titre d'accueil. */
.intro__phrase em {
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 2px var(--neon-vert-coeur);
  filter:
    drop-shadow(0 0 2px var(--neon-vert))
    drop-shadow(0 0 7px var(--neon-vert))
    drop-shadow(0 0 18px var(--neon-vert));
}
@media (max-width: 700px) {
  .intro__phrase em { -webkit-text-stroke-width: 1.5px; }
}
/* Le logo apparait, tient, puis repart : un seul passage. */
@keyframes intro-passage {
  0% { opacity: 0; transform: scale(0.97); }
  29%, 71% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: scale(1.015); }
}
@keyframes intro-entree {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes intro-sortie {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Les cartes des classes : un pictogramme par niveau, dans un anneau fin
   de la couleur de la carte, comme les ronds des chiffres. */
.classe-carte__rond {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--c) 50%, transparent);
  color: var(--c);
}
@media (max-width: 560px) { .classe-carte__rond { width: 50px; height: 50px; } }