/* =========================================================
   MAP73 — feuille de style unique
   Direction : cartographie / itinéraire (Savoie, parcours scolaire)
   ========================================================= */

/* ---------- Jetons ---------- */
:root {
  color-scheme: light;

  /* Couleurs */
  --paper: #f7f6f1;
  --paper-2: #efece2;
  --ink: #14243b;
  --ink-soft: #4a5872;
  /* Le vert du logo, mesure sur assets/img/logo-480.webp : #94C412, une teinte
     olive a 76 deg. C'est le seul vert du site. Vert clair (1,91 sur le
     papier), il ne porte que l'aplat, le trait et le dessin ; tout ce qui est
     texte sur fond clair prend l'encre ou le lac, sinon ca ne se lit plus. */
  --vert: #94c412;
  --lac: #2b759d; /* assombri : le bleu d'origine tombait a 4,48 sur blanc,
                     sous le seuil AA des petits textes qui l'utilisent. */
  /* Le meme lac, eclairci pour l'aplat encre : sur #14243b, le lac courant
     ne monte qu'a 3,07 et aucun petit texte ne s'y lit. Celui-ci tient
     7,18, de quoi porter les intitules et les depliants des formules. */
  --lac-clair: #79b8d8;
  --ambre: #e8a33d;
  --trait: #d5d1c2;
  --blanc: #fffdf9;

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6.5rem; }

body {
  margin: 0;
  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; }

a { color: var(--lac); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

: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); }

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  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); }
.section--encre { background: var(--ink); color: var(--paper); }
.section--encre h2 { color: var(--blanc); }
.section--craie { background: var(--paper-2); }

.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; }
.section--encre .section-entete p { color: #b9c3d4; }

/* ---------- 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;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.bouton--plein { background: var(--vert); color: var(--ink); }
.bouton--plein:hover { background: var(--ink); color: var(--blanc); }
.bouton--contour { border-color: var(--ink); color: var(--ink); }
.bouton--contour:hover { background: var(--ink); color: var(--paper); }
.bouton--clair { border-color: rgba(255, 253, 249, 0.45); color: var(--blanc); }
.bouton--clair:hover { background: var(--blanc); color: var(--ink); }
.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, ambre sur la carte phare, 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 la carte phare, dont l'aplat
     encre tient deja la limite : au ras du bord, l'ambre 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 ---------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.entete[data-defile="oui"] {
  border-bottom-color: var(--trait);
  background: color-mix(in srgb, var(--paper) 96%, transparent);
}
.entete__barre {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 5.75rem;
  position: relative;
}
.entete__logo { flex: none; line-height: 0; }
.entete__logo img { width: 104px; height: 63px; object-fit: contain; }

.nav { margin-left: auto; }
.nav__liste {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.8vw, 1.6rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__lien {
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
  display: inline-block;
}
.nav__lien:hover { border-bottom-color: var(--vert); }

.entete__bascule {
  display: none;
  margin-left: auto;
  background: none;
  border: 1.5px solid var(--trait);
  border-radius: var(--rayon);
  padding: 0.5rem 0.7rem;
  color: var(--ink);
  cursor: pointer;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
}
.hero__fond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Les courbes de niveau ouvrent la page : elles portent le lac, dilue
     dans le papier, plutot que le filet courant. */
  color: color-mix(in srgb, var(--lac) 34%, var(--paper));
  pointer-events: none;
}
.hero__contenu { position: relative; }
.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; }

/* ---------- Itinéraire (élément signature) ---------- */
.itineraire { margin-top: clamp(3rem, 6vw, 5rem); position: relative; }
.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;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.etape__point::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink);
  transition: background-color 0.18s ease;
}
.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(--ink);
  color: var(--paper);
  padding: clamp(1.15rem, 2vw, 1.35rem);
}
/* Les reperes disent ce que couvre l'accompagnement : 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 entre la legende et « A propos ». 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 { border-bottom: 1px solid var(--trait); }
.news__titre {
  font-family: var(--display);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
}
.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(--ink);
  color: var(--paper);
  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 rgba(255, 253, 249, 0.28);
  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);
  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: #b9c3d4; margin: 0; }
.news__lien {
  font-family: var(--display);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--lac-clair);
  justify-self: start;
}

/* ---------- Coutures : la courbe de niveau ---------- */
/* Les sections se posaient bord a bord, et l'arete des sections encre
   tombait d'un coup. Le bord du bloc qui arrive est desormais une courbe de
   niveau, celle que le hero dessine deja, accompagnee de deux niveaux plus
   fins. Deux amplitudes : pleine sur les coutures encre, ou l'arete est
   brutale, reduite sur les coutures craie, ou le contraste est faible et ou
   une pleine courbe ferait onduler la page. */
.couture {
  display: block;
  height: 54px;
  background: var(--couture-sortant);
  /* La courbe et la section suivante se touchent : sans ce pixel, un liseré
     de la couleur sortante reste visible aux zooms fractionnaires. */
  margin-bottom: -1px;
  overflow: hidden;
}
.couture svg { display: block; width: 100%; height: 100%; }
.couture .remplissage { fill: var(--couture-entrant); }
.couture .niveau { fill: none; stroke: var(--couture-niveau); stroke-width: 1.25; }
/* Une couture sur deux est retournee : la meme vague huit fois de suite se
   verrait comme un motif. */
.couture--miroir svg { transform: scaleX(-1); }
.couture--fine { height: 30px; }

.couture--clair-encre {
  --couture-sortant: var(--paper);
  --couture-entrant: var(--ink);
  --couture-niveau: var(--trait);
}
.couture--encre-clair {
  --couture-sortant: var(--ink);
  --couture-entrant: var(--paper);
  --couture-niveau: color-mix(in srgb, var(--ink) 62%, var(--paper));
}
.couture--encre-craie {
  --couture-sortant: var(--ink);
  --couture-entrant: var(--paper-2);
  --couture-niveau: color-mix(in srgb, var(--ink) 62%, var(--paper));
}
/* Entre le papier et la craie, l'ecart de valeur est de deux pour cent : le
   remplissage seul ne se verrait pas. Ce sont les niveaux qui dessinent la
   courbe, donc ils sont un cran plus sombres que le filet courant. */
.couture--clair-craie {
  --couture-sortant: var(--paper);
  --couture-entrant: var(--paper-2);
  --couture-niveau: color-mix(in srgb, var(--trait) 74%, var(--ink));
}
.couture--craie-clair {
  --couture-sortant: var(--paper-2);
  --couture-entrant: var(--paper);
  --couture-niveau: color-mix(in srgb, var(--trait) 74%, var(--ink));
}

/* ---------- À propos ---------- */
.propos {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.propos__titre { font-size: var(--fs-h2); }
.propos__acronyme {
  border-left: 3px solid var(--vert);
  padding: 0 0 0 1.25rem;
  margin: 0;
  list-style: none;
}
.propos__acronyme li { font-family: var(--display); font-size: 1.05rem; padding: 0.35rem 0; }
.propos__acronyme b {
  font-weight: 800;
  color: var(--vert);
  font-size: 1.35em;
}
.propos__media img { width: 100%; }
.propos__legende { font-size: var(--fs-micro); color: var(--ink-soft); margin-top: 0.6rem; }

/* ---------- 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);
  transition: background-color 0.18s ease, color 0.18s ease;
}
.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;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.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: rgba(255, 253, 249, 0.16);
  border: 1px solid rgba(255, 253, 249, 0.16);
}
.pilier { background: var(--ink); 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);
  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: #c3cbd9; font-size: var(--fs-small); }

/* ---------- 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, comme
   sur la carte phare : au ras du bord, elles se perdaient contre le papier
   de la section. */
.formule {
  --equerre: var(--lac-clair);
  --equerre-marge: 8px;
  background-color: var(--ink);
  color: var(--paper);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
}
/* La carte phare partage l'encre de toutes les autres : un fond a peine
   plus clair se lisait comme un defaut d'impression, pas comme une
   intention, alors que l'ambre de ses equerres et de son prix la designe
   deja sans ambiguite. */
.formule--phare {
  --equerre: var(--ambre);
}
.formule--phare .formule__prix { color: var(--ambre); }
.formule--phare .formule__details summary { color: var(--ambre); }

/* 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);
}
.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 rgba(255, 253, 249, 0.18); }
/* 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(--blanc);
  line-height: 1.1;
  display: block;
}
.formule__prix-note {
  font-size: var(--fs-micro);
  color: #b9c3d4;
  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 .bouton--contour { border-color: rgba(255, 253, 249, 0.45); color: var(--blanc); }
.formule .bouton--contour:hover { background: var(--blanc); color: var(--ink); }

.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);
  align-items: start;
}

.fondatrice {
  --equerre: var(--vert);
  background-color: var(--blanc);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  display: grid;
  gap: 1.25rem;
}

.fondatrice__entete {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
}

/* 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: 76px;
  height: 76px;
  object-fit: cover;
  border: 1px solid var(--trait);
}

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

/* Repères chiffrés, sur une surface légèrement en creux. */
.fondatrice__chiffres {
  display: grid;
  /* auto-fit plutot que 1fr 1fr : le panel autorise un ou trois reperes,
     la rangee doit rester lisible sans revenir dans la feuille de style. */
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1px;
  background: var(--trait);
  border: 1px solid var(--trait);
  overflow: hidden;
}
.fondatrice__chiffre { background: var(--paper); padding: 0.85rem 1rem; }
.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;
}

.fondatrice__faits { margin: 0; font-size: var(--fs-small); display: grid; gap: 0.9rem; }
.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;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.pastille {
  font-family: var(--display);
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--ink);
  background: color-mix(in srgb, var(--vert) 10%, var(--blanc));
  border: 1px solid color-mix(in srgb, var(--vert) 45%, var(--blanc));
  /* 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;
}

/* ---------- Témoignages ---------- */
.temoignages { columns: 3 260px; column-gap: clamp(1.25rem, 2.5vw, 2rem); }
/* 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 {
  break-inside: avoid;
  margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
  --equerre: var(--lac-clair);
  background-color: var(--ink);
  color: var(--paper);
  padding: 1.5rem;
}
.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: #b9c3d4;
}

/* ---------- Presse ---------- */
.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; }
.presse__lien { text-decoration: none; color: inherit; display: block; }
.presse__lien img {
  border-radius: var(--rayon);
  border: 1px solid var(--trait);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  transition: border-color 0.18s ease;
}
.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);
}

/* ---------- 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); }
.coordonnees h3 { font-size: 1.1rem; margin-bottom: 0.4rem; color: var(--blanc); }
.coordonnees__bloc { margin-bottom: 1.75rem; }
.coordonnees__bloc p { margin-bottom: 0.35rem; }
.coordonnees a { color: var(--paper); }
.coordonnees a:hover { color: var(--ambre); }

.formulaire {
  background: var(--blanc);
  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: color-mix(in srgb, var(--vert) 12%, var(--blanc));
  border: 1px solid var(--vert);
}

/* ---------- Pied de page ---------- */
.pied {
  background: var(--paper-2);
  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: 91px; 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);
}
.billet {
  --equerre: var(--lac-clair);
  --equerre-marge: 8px;
  background-color: var(--ink);
  color: var(--paper);
  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: #b9c3d4; 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(--blanc);
  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) {
  .propos,
  .contact { grid-template-columns: 1fr; }
  .propos__media { order: -1; }
}

@media (max-width: 780px) {
  .entete__bascule { display: block; }
  .entete__barre { min-height: 4.75rem; }
  .entete__logo img { width: 88px; height: 53px; }
  .nav {
    display: none;
    position: absolute;
    inset-inline: calc(var(--gouttiere) * -1);
    top: 100%;
    background: var(--paper);
    border-block: 1px solid var(--trait);
    padding: 1rem var(--gouttiere) 1.5rem;
    margin-left: 0;
  }
  .nav[data-ouvert="oui"] { display: block; }
  .nav__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__lien { display: block; padding: 0.85rem 0; border-bottom: 1px solid var(--trait); }
  .nav__lien:hover { border-bottom-color: var(--vert); }
  .nav .bouton { margin-top: 1rem; width: 100%; justify-content: center; }

  .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__entete { grid-template-columns: 64px minmax(0, 1fr); gap: 0.85rem; }
  .fondatrice__portrait { width: 64px; height: 64px; }
  .fondatrice h3 { font-size: 1.25rem; }
  .fondatrice__valeur { font-size: 1.25rem; }
  .couture { height: 34px; }
  .couture--fine { height: 22px; }
  .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; }
  .hero__actions .bouton { width: 100%; justify-content: center; }
  .formule { padding: 1.35rem; }
  .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, .hero__fond, .formulaire, .couture { display: none; }
  /* 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; }
}