/* ===========================================================================
   TOKENS — seule source de vérité pour le visuel.
   Charte déduite de la maquette : crème chaud, vert forêt, accent terracotta,
   titres en serif, corps en sans. Règle : aucune couleur, taille ou espacement
   en dur dans style.css.
   =========================================================================== */

/* --- Polices --------------------------------------------------------------
   Cardo (SIL Open Font License), servie depuis assets/fonts/ et NON depuis le
   CDN Google : appeler fonts.googleapis.com transmettrait l'adresse IP de
   chaque visiteur à Google, ce que la page confidentialité exclut et que la
   jurisprudence européenne a sanctionné. Auto-hébergée, la police rend la même
   chose sans requête externe ni cookie.

   font-display: swap — le texte s'affiche immédiatement dans la police de
   repli, puis bascule. Jamais de titre invisible pendant le chargement.

   Les plages unicode viennent de Google : un navigateur ne télécharge
   latin-ext que si la page contient réellement ces caractères.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Cardo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/cardo-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Cardo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/cardo-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Cardo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/cardo-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Cardo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/cardo-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* --- Couleur ---------------------------------------------------------- */

  /* Le fond n'est pas blanc mais un crème chaud : c'est ce qui donne son
     caractère à la maquette. Le blanc pur ne doit apparaître nulle part. */
  --c-bg:            #f7f3ec;
  --c-bg-subtle:     #efe9dd;   /* sections alternées */
  /* Blanc franc, réservé aux boutons à cadre. Les cartes, elles, reprennent
     le fond de page : elles sont délimitées par leur bordure et leur liseré,
     pas par un aplat. */
  --c-surface:       #ffffff;   /* boutons à cadre */
  /* Vert du pied de page, valeur donnée par Émilie. Les deux couleurs
     « inverse » plus bas sont calculées pour rester lisibles sur ce vert
     précis : les recalculer s'il change. Contrastes obtenus ici — texte
     crème 10,56, intitulés orange 5,45, texte sauge 5,67, tous au-dessus
     des 4,5 attendus. */
  --c-bg-inverse:    #153F37;

  --c-text:          #2e2e29;
  --c-text-muted:    #5c5a52;
  --c-text-inverse:  #f7f3ec;
  /* Sur le vert du pied de page, le terracotta de la charte tombe à 2,87 :
     illisible pour du texte. C'est donc l'orange qu'on ajuste, pas le vert.
     Celui-ci est le plus saturé qui reste lisible — 5,45. Ne pas le réaligner
     sur --c-secondary sans refaire le calcul. */
  --c-inverse-heading: #ff9752;  /* intitulés de colonne du pied de page */
  --c-inverse-muted:   #a6bb9b;  /* texte secondaire sur fond foncé, 4.90:1 */

  --c-border:        #e4ded1;
  --c-border-strong: #c3bcab;

  /* Vert forêt : titres, boutons principaux, liseré des cartes. */
  --c-accent:        #123d2d;
  --c-accent-hover:  #0b291e;
  --c-accent-soft:   #dde4d3;   /* aplat sauge */
  --c-accent-mid:    #6f8a63;   /* filets et traits secondaires */
  --c-accent-text:   #ffffff;

  /* Terracotta : ponctuation, jamais une surface large.
     Deux valeurs volontairement — la version vive n'a pas un contraste
     suffisant pour du texte, elle est réservée au décor et aux icônes. */
  --c-secondary:      #cf5a33;  /* décor, icônes, filets */
  /* Ocre de la maquette. Contraste 3.78:1 sur le fond crème et 3.60:1 sur
     l'aplat du hero lycée, sous les 4.5 attendus pour du texte de 13px :
     choix de direction artistique assumé. Pour le rendre conforme sans
     changer la couleur, il suffirait de passer le bandeau à 19px en gras —
     il basculerait en « grand texte », seuil 3:1. */
  --c-secondary-text: #b9671d;  /* dès qu'il s'agit de texte */
  --c-secondary-soft: #f7e5dc;

  /* Aplats décoratifs de la maquette (formes organiques des cartes). */
  /* Aplats d'angle des cartes. Chacun a un fond et un trait plus soutenu.
     Le bleu est celui du dessin d'Émilie. Le violet est une proposition :
     son calque s'appelle « purple corner » mais porte des valeurs vertes,
     et le vert a été écarté. Même clarté et même faible saturation que le
     bleu, pour que les deux cartes se répondent. À remplacer par la valeur
     exacte dès qu'elle est connue. */
  --c-decor-blue:          #cedcdb;
  --c-decor-blue-trait:    #c0d2d4;
  --c-decor-violet:        #dcd6e4;
  --c-decor-violet-trait:  #cbc2d6;

  /* Focus : la seule couleur qui doit rester visible sur TOUS les fonds du
     site. Éclaircie par rapport au terracotta du décor, qui tombait à 2,98
     contre le vert des boutons — sous le minimum de 3 exigé pour un
     indicateur de focus. Ici 3,39 sur le crème et 3,24 sur le vert.
     Ne pas la réaligner sur --c-secondary sans refaire ce calcul. */
  --c-focus:         #d4623a;
  --focus-w:         2px;    /* épaisseur du contour de focus */

  /* Retours de formulaire */
  --c-success:       #1f6b45;
  --c-success-soft:  #e3efe6;
  --c-danger:        #a32a24;
  --c-danger-soft:   #f8e4e2;

  /* --- Typographie ------------------------------------------------------ */

  /* Titres en Cardo, auto-hébergée (voir les @font-face plus haut). La pile de
     repli reste alignée sur son dessin — serif humaniste à empattements fins —
     pour que la bascule après chargement ne fasse pas sauter la mise en page. */
  --font-display: "Cardo", "Iowan Old Style", "Palatino Linotype", Palatino,
                  "Book Antiqua", Georgia, ui-serif, serif;
  --font-body:    system-ui, -apple-system, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;

  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  /* Corps de texte du site. Descendu de 17 à 15px : c'est la taille retenue
     après l'avoir vue en place sur la page lycée. --fs-sm vaut désormais la
     même chose — les deux ne se distinguent plus, ce qui est sans effet mais
     explique qu'aucun réglage local ne subsiste pour « du texte plus petit ». */
  --fs-base: 0.9375rem;
  --fs-md:   1.1875rem;
  --fs-lg:   1.4375rem;
  --fs-xl:   1.875rem;
  --fs-2xl:  2.375rem;
  /* Le titre de la maquette est très large : il s'adapte à la fenêtre plutôt
     que de casser en petites tailles. */
  /* Le plafond est la valeur réellement rendue sur grand écran : c'est lui
     qui fixe la taille du titre du hero. 3rem = 48px, atteint au-delà
     d'environ 620px de large — la formule fluide gouverne en dessous. */
  --fs-3xl:  clamp(2.5rem, 1.6rem + 3.6vw, 3rem);

  --fw-regular:  400;
  /* Graisse intermédiaire : 500 était trop appuyé, 400 trop léger. Rendue
     fidèlement par les polices système modernes, qui sont variables
     (Segoe UI Variable, SF Pro, Roboto) ; ailleurs elle retombe sur 400. */
  --fw-book:     450;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-normal:  1.7;

  --tracking-tight: -0.02em;
  --tracking-wide:   0.12em;   /* bandeau « LE PRADET · VAR » */
  --tracking-wider:  0.44em;   /* sous-titre du logotype */
  /* Propre au bandeau « LE PRADET · VAR » : --tracking-wide sert aussi au
     logotype et au téléphone, les modifier ensemble décalerait tout. */
  --eyebrow-tracking: 0.16em;

  /* --- Espacement ------------------------------------------------------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;

  /* --- Mise en page ----------------------------------------------------- */
  --wrap-max:      72rem;
  --wrap-narrow:   44rem;
  --wrap-gutter:   var(--sp-5);
  /* Retrait latéral du contenu principal, en plus de la gouttière de `.wrap`.
     N'affecte ni l'en-tête ni le pied de page, qui ont leur propre réglage. */
  --main-gutter:   70px;

  /* --- Formes ----------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 12px;

  --border-w: 1px;

  /* Signatures de la maquette. */
  --card-accent-w: 4px;      /* liseré vert en haut des cartes */
  --card-radius:   8px;      /* propre aux cartes : --radius-lg sert ailleurs */
  --card-border-w: 2px;      /* contour des cartes */

  --section-radius: 6px;     /* coins des sections en aplat */
  /* Marge restante entre le bord de l'écran et une section débordante. */
  --section-bleed: 30px;
  --section-bleed-pad: 30px;  /* respiration interne, haut et bas */
  /* Respiration interne latérale. Elle complète exactement le débordement :
     leur somme vaut --main-gutter, donc le texte du bandeau reste aligné sur
     le reste de la page — la marge négative sort l'aplat, ce padding remet le
     contenu en place. Toucher à l'un demande de reprendre l'autre. */
  --section-bleed-pad-x: calc(var(--main-gutter) - var(--section-bleed));
  /* Écart total entre deux sections voisines. Porté par une seule des deux
     (celle qui précède, ou celle qui suit le bandeau) : les paddings de
     sections adjacentes s'additionnent, les répartir doublerait l'écart. */
  --section-gap: 40px;
  /* Respiration verticale d'une section, et sa variante resserrée. Elles
     étaient écrites directement en paliers dans style.css : passées en tokens
     pour que le rythme du site se reprenne d'un seul endroit — c'est ce qui
     permet de le resserrer sur téléphone sans toucher à l'échelle --sp-*, qui
     sert partout ailleurs. */
  --section-pad:       var(--sp-8);
  --section-pad-tight: var(--sp-7);
  /* Modalités : hauteur d'icône fixe pour que les pastilles des trois
     colonnes s'alignent, et que le filet qui les relie tombe juste. */
  --etape-icon-h:   5.5rem;
  --etape-icon-w:   4.5rem;
  /* Décor de l'angle haut-droit du bandeau. Le motif est dessiné pour venir
     à fleur de l'angle : il est posé à 0 et rogné par le coin arrondi. */
  --modalites-decor-w: 13rem;
  --etape-num-size: 2.75rem;
  --etape-num-fs:   0.9375rem;
  --eyebrow-gap:    8px;     /* sous le bandeau de section */
  --etapes-gap:     18px;    /* entre le titre de section et les icônes */
  /* Modalités empilées : écart entre deux étapes, et entre la colonne de
     l'icône et celle du texte. */
  --etapes-row-gap: var(--sp-6);
  --etape-col-gap:  var(--sp-4);
  /* Longueur de ligne du texte d'une étape. Courte en trois colonnes, elle
     s'allonge en pile : la colonne y est déjà étroite, et la brider deux fois
     laissait un tiers de la largeur vide à droite. */
  --etape-texte-max: 28ch;
  /* Colonne de l'icône : plus large que l'icône elle-même, ce qui creuse une
     gouttière avant le texte. */
  --card-icon-col: calc(var(--icon-size) + 30px);
  --card-pad-y:    var(--sp-6);
  --card-pad-x:    var(--sp-5);
  --card-col-gap:  var(--sp-5);   /* entre la colonne de l'icône et le texte */
  /* Appel à l'action des cartes : écart avant la flèche, et retrait au-dessus. */
  --card-cta-gap:  var(--sp-2);
  --card-cta-mt:   var(--sp-5);
  --card-title-fs: 1.5625rem; /* 25px */
  /* Cardo n'a que deux graisses, 400 et 700 : le titre est déjà au maximum.
     Ce contour épaissit le tracé sans changer de fonte — mettre 0 l'annule.
     Au-delà de 0.5px le dessin des empattements commence à s'empâter. */
  --card-title-stroke: 0.4px;
  --card-text-fs:  0.875rem;  /* 14px */
  --rule-w:        3px;      /* filet court sous les titres de carte */
  --rule-len:      2.75rem;

  --underline-w:      1px;   /* soulignés appuyés (téléphone) */
  --underline-offset: 4px;

  /* Bouton de menu des écrans étroits. Le cadre est carré et sa taille est
     imposée : le centrage est fait par la boîte, pas par des rembourrages à
     recalculer à chaque retouche de l'icône. Les barres extérieures étant
     translatées, elles ne comptent dans aucune hauteur — un cadre ajusté au
     contenu ne connaissait que la barre du milieu et les deux autres venaient
     buter dessus. */
  --burger-taille: 36px;     /* côté du cadre, bordure comprise */
  --burger-w:      16px;     /* largeur des barres */
  --burger-bar-h:  2px;      /* épaisseur d'une barre */
  --burger-gap:    4px;      /* vide entre deux barres */
  /* Pas d'une barre à la suivante — épaisseur plus vide. Hauteur totale de
     l'icône : deux pas plus une épaisseur, soit 14px, centrés dans les 34px
     intérieurs du cadre. */
  --burger-pas:    calc(var(--burger-bar-h) + var(--burger-gap));

  --card-min: 17rem;         /* largeur mini d'une carte avant repli */
  /* Calée sur la hauteur de la colonne de texte : au-delà, c'est elle qui
     fixe le bas du hero et un vide apparaît sous le téléphone. */
  --illu-max: 29.04rem;      /* illustration du hero — 22rem + 10% + 20% */
  /* ── Page « À propos » ──────────────────────────────────────────────────
     Portrait circulaire. Le recadrage se fait ici et non dans le fichier :
     l'original est très allongé et le visage y occupe peu de place.
     --portrait-position remonte le cadrage sur le visage — le relever oblige
     à le refaire si la photo change. */
  --portrait-taille:   17rem;
  /* 10 % et non 2 % : le cadrage descend dans l'image, ce qui fait monter le
     visage dans le disque d'environ 17px. Le pourcentage porte sur la hauteur
     rognée (212px ici), pas sur celle du disque — d'où l'écart entre les deux
     chiffres. */
  --portrait-position: 50% 10%;
  /* Anneau décalé derrière le portrait, comme les cercles du hero d'accueil. */
  --portrait-anneau-x: 1.75rem;
  --portrait-anneau-y: 0.75rem;

  --apropos-carte-cols:   1fr 1fr;
  --c-apropos-carte:      var(--c-bg-subtle);
  --apropos-carte-pad:    var(--sp-8);
  --apropos-carte-radius: var(--radius-lg);
  --apropos-hero-pad-y:   var(--sp-7);
  /* Arc décoratif de l'angle bas-gauche de la carte. Très grand et largement
     hors cadre : seul son arc entre dans la composition. */
  --apropos-arc-taille: 26rem;
  --apropos-arc-x:     -19rem;
  --apropos-arc-y:     -19rem;

  /* Lignes de la page : repère, titre, description. Les deux premières
     colonnes ont une largeur fixe et la troisième prend le reste — c'est ce
     qui fait démarrer les titres au même endroit d'une ligne à l'autre, quelle
     que soit la longueur du repère. */
  --apropos-col-label: 10.5rem;
  --apropos-col-titre: 19rem;
  --apropos-gap:       50px;
  --ligne-pad-y:     var(--sp-6);
  --ligne-label-fs:  var(--fs-xs);
  --ligne-titre-fs:  var(--fs-lg);
  /* Haut et bas dissociés : le bas commande directement l'écart avec les
     cartes, puisque la section suivante n'ajoute plus rien. */
  --hero-pad-top:    40px;
  --hero-pad-bottom: 30px;
  /* Largeur supplémentaire du titre du hero : il déborde d'autant sur la
     gouttière qui le sépare de l'illustration, laquelle fait 48px — la marge
     est donc suffisante, mais au-delà le titre viendrait la toucher. */
  --hero-h1-extra: 10px;
  /* Paragraphe d'introduction du hero. Token dédié : --fs-md sert aussi aux
     h3, au numéro de téléphone et à la marque du pied de page. */
  --hero-lead-fs: 1rem;      /* 16px */
  --hero-phone-fs: 1.0625rem; /* 17px — numéro sous les boutons du hero */
  /* Interlettrage propre au numéro : --tracking-wide sert au logotype, les
     modifier ensemble décalerait « ÉMILIE SVT ». Un numéro très espacé se
     lit mal en bloc, d'où une valeur bien plus faible. */
  --phone-tracking: 0.04em;

  /* ── Hero à panneau (page lycée) ───────────────────────────────────────
     Aplat chaud de la colonne de droite. Valeur relevée à l'œil sur la
     maquette : à confirmer sur le fichier source. */
  --c-hero-panneau:    #f7ece5;
  /* Respiration propre à ce hero, en plus de celle du hero d'accueil : il
     respire nettement plus haut et bas. */
  --hero-panneau-pad-y:   50px;
  --hero-panneau-pad:     var(--sp-6);   /* entre le filet et le texte */
  /* L'aplat ne colle pas au filet : il démarre franchement plus à droite, si
     bien que les numéros restent sur le crème. */
  --hero-panneau-aplat-x: 120px;
  --jalon-gap:         40px;          /* entre le numéro et son libellé */
  --jalon-pad-y:       var(--sp-4);
  --jalon-num-fs:      var(--fs-xs);
  --jalon-fs:          var(--fs-base);
  /* Filets du sommaire, volontairement à peine visibles : ils rythment sans
     découper. 1px reste le plancher d'un trait net — c'est donc la couleur,
     et non l'épaisseur, qui les efface. --c-border ressortait trop sur
     l'aplat chaud, que les filets traversent. */
  --c-jalon-rule:      #e8ded4;
  /* Filet court posé devant l'accroche du hero. Le décalage haut l'amène sur
     la première ligne du texte plutôt qu'au milieu du bloc. */
  --accroche-rule-len: 2.25rem;
  --accroche-rule-w:   2px;
  --accroche-rule-gap: var(--sp-4);
  --accroche-rule-top: 0.6em;

  /* ── Section « Niveaux et objectifs » (page lycée) ──────────────────────
     Dégradé bicolore du panneau : sauge à gauche, rose à droite. Le rose
     rejoint celui du hero, les deux sections se répondent. */
  --c-niveau-degrade-1: #e8ece4;
  --c-niveau-degrade-2: #f9ede6;
  /* Grand chiffre du panneau : ocre très éclairci, il est décoratif et ne
     doit pas concurrencer le titre. */
  --c-niveau-numero:    #d9a97f;
  --niveau-cols:        1fr 2.6fr;
  --niveau-gap:         var(--sp-6);
  --niveau-grille-mt:   var(--sp-7);   /* entre le titre de section et les onglets */
  --niveau-min-h:       22rem;
  --niveau-bord-w:      4px;          /* filet épais à gauche du panneau */
  --niveau-pad:         var(--sp-6);
  --niveau-num-fs:      3.25rem;
  /* Branche d'olivier : 30 % de moins que la taille d'origine (23rem), calée
     un peu hors du bord droit et remontée du fond du panneau. */
  --niveau-plante-w:      16.1rem;
  --niveau-plante-droite: -1rem;
  --niveau-plante-bas:    2rem;
  /* Filigrane : plante et cercles reculent ensemble derrière le texte, qui
     peut alors occuper toute la largeur du panneau. Une seule valeur pour les
     deux — si les cercles restaient plus appuyés que la plante, le texte
     paraîtrait passer sur une erreur plutôt que sur un décor. */
  --niveau-decor-opacite: 0.16;
  /* Corps du panneau, 2px sous les tailles courantes. Les titres et le grand
     chiffre gardent les leurs. */
  --niveau-petit-fs:    0.6875rem;      /* 11px — objectif et mots-clés */
  /* Cercles au trait. Les deux sont calés sur la plante, pas sur le panneau :
     posé à la largeur de la plante, l'orange retombait sur le texte. */
  --niveau-cercle-bleu:         9rem;
  --niveau-cercle-bleu-haut:    var(--sp-5);
  --niveau-cercle-bleu-droite:  var(--sp-5);
  --niveau-cercle-orange:        9rem;
  --niveau-cercle-orange-bas:    var(--sp-5);
  --niveau-cercle-orange-droite: 94px;   /* 50px plus à droite que le réglage initial */
  /* Titre de section propre à ce bloc : la maquette le veut nettement plus
     grand que le h2 courant du site. */
  --niveau-titre-fs: var(--fs-2xl);
  /* Filets qui ouvrent et ferment les sections. Un seul aspect pour tous : le
     vert du premier essai faisait du filet sous le hero un élément à part,
     alors qu'il joue le même rôle que les autres. */
  --c-separateur:       var(--c-border);
  --separateur-w:       var(--border-w);
  --separateur-marge:   var(--sp-7);
  --separateur-decalage: 40px;   /* recul du filet sous le hero */
  /* Filet resserré, quand il sépare deux blocs d'un même sujet plutôt que
     deux sections. Haut et bas dissociés : le trait ouvre le bloc qui suit,
     il s'en tient donc plus près. */
  --separateur-serre-haut: 40px;
  --separateur-serre-bas:  20px;
  --onglet-gap:         var(--sp-3);
  --onglet-pad-y:       var(--sp-4);
  --onglet-pad-x:       var(--sp-4);
  --onglet-num-gap:     var(--sp-4);
  --onglet-num-fs:      var(--fs-xs);
  --onglet-fs:          var(--fs-sm);
  --tag-gap:            var(--sp-4);
  --tag-point:          4px;          /* pastille entre deux mots-clés */

  /* ── Fin de la page lycée ──────────────────────────────────────────────── */
  --final-cols:        3fr 2fr;
  --final-gap:         var(--sp-8);
  /* Respiration après le filet vertical, et sur les autres bords de l'aplat.
     Les deux valeurs latérales portent 10px de plus que les paliers
     d'espacement : réglage relevé à l'œil sur la maquette, d'où le calc
     plutôt qu'un palier. */
  --final-pad:         calc(var(--sp-7) + 10px);
  --final-profil-pad-x: calc(var(--sp-6) + 10px);
  /* Bord droit plus dégagé que le gauche : le texte s'y arrête franchement
     avant l'arête de l'aplat, sous les cercles. */
  --final-profil-pad-right: calc(var(--final-profil-pad-x) + 30px);
  /* Aplat sauge de la colonne de droite. Plus clair que celui du panneau des
     niveaux : il porte du texte courant sur toute sa hauteur, pas seulement
     quelques lignes. */
  --c-final-profil:    #edf0e7;
  --final-profil-pad:  calc(var(--sp-6) + 40px);
  /* Cette section aère davantage sous ses surtitres que le reste du site. */
  --final-eyebrow-gap: var(--sp-4);
  /* Filet entre les deux colonnes. Plus marqué que ceux des listes, mais
     atténué : à pleine intensité, une ocre sur toute la hauteur écrase les
     deux colonnes. `color-mix` plutôt qu'une valeur figée, pour qu'il suive
     --c-secondary-text si la charte bouge. */
  --c-final-filet:     color-mix(in srgb, var(--c-secondary-text) 45%, transparent);
  --final-filet-w:     2px;           /* plus épais que les filets de liste */
  --repere-gap:        calc(var(--sp-5) + 10px);   /* entre le numéro et son libellé */
  --repere-pad-y:      var(--sp-4);
  --repere-num-fs:     var(--fs-xs);
  --repere-titre-fs:   var(--fs-md);
  /* Le passage encadré par le guide ocre est volontairement plus grand que le
     texte courant : c'est le seul endroit de la page qui hausse la voix. */
  --citation-fs:       var(--fs-md);
  --citation-filet-w:  2px;
  --citation-pad:      var(--sp-5);
  /* Le guide dépasse le texte en haut et en bas : c'est un rembourrage
     vertical du bloc, la bordure suivant la boîte et non les lignes. */
  --citation-depasse:  20px;
  /* Cercles de l'angle haut-droit, concentriques : les trois partagent le même
     centre, donné une fois ici. Chacun est ensuite ramené sur ce point par une
     translation de la moitié de sa propre taille — c'est ce qui rend le
     centrage indépendant des diamètres. */
  --final-cercle-cx:     calc(7rem - 30px);  /* distance du centre au bord droit */
  --final-cercle-cy:     2.5rem;  /* distance du centre au haut de la colonne */
  --final-cercle-large:  14rem;
  --final-cercle-moyen:  8.5rem;
  --final-cercle-plein:  4.5rem;
  /* Les anneaux reprennent le bleu-gris pastel des aplats de carte plutôt que
     l'ocre du filet : sur l'aplat sauge, l'ocre tirait l'œil vers le décor au
     lieu du texte. Le disque central, lui, garde son beige — c'est la seule
     touche chaude de la colonne. */
  --c-final-cercle-trait:  var(--c-decor-blue-trait);
  --final-cercle-opacite:  0.55;
  --c-final-cercle-plein: #e7d3c2;

  /* ── Page de contact ────────────────────────────────────────────────────
     Tout le contenu tient dans un seul panneau beige, la carte du formulaire
     étant le seul aplat blanc de la page — c'est ce qui la désigne comme
     l'action attendue. */
  --c-contact-panneau:   var(--c-bg-subtle);
  /* Haut et bas dissociés : le bandeau touchant l'en-tête, sa respiration
     haute se règle indépendamment de la basse. */
  --contact-panneau-pad-haut: calc(var(--sp-8) - 15px);
  --contact-panneau-pad: var(--sp-8);
  --contact-intro-max:   46rem;
  /* Plume à droite du surtitre. Elle est calée par le bas — le bout de la
     plume s'aligne sur la ligne de base du libellé — et non centrée : le
     dessin monte vers la droite, un centrage le faisait flotter. */
  --plume-w:             4.5rem;
  --plume-gap:           var(--sp-3);
  /* Remontée du dessin par rapport à la ligne de base : le bec n'est pas au
     bas de l'image, la volute passe dessous. Sans ce rattrapage, les boîtes
     s'alignent bien mais le dessin paraît tomber. */
  --plume-remontee:      3px;
  --contact-citation-fs: var(--fs-md);
  --contact-carte-pad:   var(--sp-7);
  --contact-carte-mt:    var(--sp-8);   /* entre l'accroche et la carte */
  --contact-carte-liseret: 4px;    /* liseré vert en haut de la carte */
  --contact-hint-max:    34rem;
  /* Tableau des modalités : plus étroit que le panneau et centré, avec des
     filets nettement plus marqués que ceux des listes — ici le quadrillage
     structure, il ne se contente pas de ponctuer. */
  --infos-max:           48rem;
  --c-info-filet:        var(--c-border-strong);
  --info-pad-y:          var(--sp-6);
  --info-pad-x:          var(--sp-6);
  --info-label-fs:       var(--fs-xs);
  --info-titre-fs:       var(--fs-md);
  /* Interligne resserré et écart de rangée propre : l'interligne courant du
     site (1,7) est fait pour du texte suivi, il aère beaucoup trop une liste
     de noms courts qui passe à la ligne. */
  --commune-gap:         var(--sp-3);
  --commune-row-gap:     var(--sp-2);

  /* ── Page des tarifs ────────────────────────────────────────────────────
     Grille à deux entrées, niveau × modalité. */
  --tarifs-marge-haut: 40px;   /* entre le chapô et le haut de la grille */
  --tarifs-pad-y:      var(--sp-4);
  /* Rembourrage latéral des cellules. Il pèse six fois dans la largeur de la
     table — deux par colonne — et c'est donc lui, bien avant les textes, qui
     décide si elle tient dans l'écran. */
  --tarifs-pad-x:      var(--sp-5);
  /* Largeur de la colonne des niveaux. `auto` sur grand écran : la table a la
     place, le navigateur répartit mieux que nous. */
  --tarifs-col-niveau: auto;
  --tarifs-prix-fs:    var(--fs-md);
  --tarifs-tete-fs:    var(--fs-xs);
  /* Le prix final passe devant le tarif facturé : c'est lui qui décide. */
  --tarifs-net-fs:     var(--fs-xl);
  --tarifs-brut-fs:    var(--fs-xs);
  /* La colonne éligible au crédit d'impôt est la seule à porter un aplat :
     c'est ce qui la désigne du regard sans rien écrire. */
  --c-tarifs-eligible: var(--c-bg-subtle);

  /* Rembourrage vertical des boutons. 10.5px de chaque côté au lieu de 12 :
     la hauteur totale baisse d'exactement 3px. */
  --button-pad-y: 10.5px;
  /* Variante réduite, pour les appels à l'action secondaires placés dans une
     colonne étroite. */
  --button-petit-fs:    var(--fs-xs);
  --button-petit-pad-y: 8px;
  --button-petit-pad-x: var(--sp-4);
  --icon-size: 2.75rem;      /* icônes des cartes */
  --decor-size: 5rem;        /* aplats d'angle en pied de carte */
  /* ── Logotype ──────────────────────────────────────────────────────────
     Toutes ses mesures dérivent de --logo-echelle : la marque, le nom, le
     sous-titre et les décalages fins se réduisent ensemble, donc les
     proportions ajustées restent intactes à n'importe quelle taille.
     Pour redimensionner le logotype quelque part, ne toucher qu'à l'échelle. */
  --logo-echelle:  1;
  --logo-mark-base: 4rem;
  --logo-name-base: 2.125rem;        /* « ÉMILIE SVT » — 34px à l'échelle 1 */
  --logo-sub-base:  0.8125rem;       /* sous-titre — 13px à l'échelle 1 */
  --logo-name-nudge-base: 10px;
  --logo-sub-nudge-base:   5px;
  --logo-sub-shift-base:   4px;
  /* Étirement vertical seul du nom : 34px de haut rendus comme 36px, sans
     élargir le mot. C'est une déformation assumée de la police, pas une
     graisse — si le dessin devait s'en trouver altéré, revenir à 1. */
  --logo-name-stretch: 1.06;
  /* Le bandeau d'en-tête respire davantage que le reste de la page : sa
     gouttière est celle de `.wrap` augmentée de cette valeur. */
  --header-gutter-extra: 15px;
  /* Écart entre les entrées du menu : gouttière de base + 20px. */
  --nav-gap: calc(var(--sp-5) + 20px);

  /* Bouton « Contact » du menu. Le texte reste à --fs-xs, seul le
     rembourrage grossit : c'est la boîte qui manquait de présence. */
  --nav-cta-pad-y: 10px;
  --nav-cta-pad-x: 20px;

  /* Respiration verticale du bandeau de menu, 5px de plus que le palier. */
  --header-pad-y:    calc(var(--sp-4) + 5px);
  --header-border-w: 2px;    /* filet sous le bandeau */
  --footer-rule-w:   2px;    /* filet terracotta au-dessus du pied de page */
  /* Tailles du pied de page, 2px sous celles du reste du site. Le logotype
     n'en fait pas partie : il doit rester identique à celui de l'en-tête. */
  --footer-fs:         0.8125rem;  /* 13px */
  --footer-heading-fs: 0.6875rem;  /* 11px */
  --footer-tel-fs:     1.0625rem;  /* 17px */
  /* Réserve à droite pour le graphique décoratif. Ne s'applique qu'aux
     colonnes : la barre légale du bas garde son propre retrait, plus faible,
     pour que ses liens restent calés à droite. */
  --footer-pad-left:   40px;   /* retrait du pied de page, des deux côtés */
  --footer-pad-right:  150px;  /* distance totale des colonnes au bord droit */
  --footer-legal-pad-block: 19px;   /* barre du bas, 5px de moins qu'avant de chaque côté */
  --footer-col-gap:    25px;        /* entre les trois colonnes de liens */
  --footer-link-gap:   8px;         /* entre deux liens d'une même colonne */
  --footer-logo-gap:   70px;        /* entre le logotype et la première colonne */
  /* Propre aux intitulés de colonne : --tracking-wider sert au sous-titre du
     logotype, les modifier ensemble le déformerait. */
  --footer-heading-tracking: 0.18em;
  --footer-pad-top:  4.5rem;
  /* Cercles décoratifs du pied de page. Le décalage les fait sortir du cadre
     pour n'en laisser que les arcs : sans lui ils traversent la colonne
     Contact et gênent la lecture des liens. */
  /* Décor de l'angle droit du pied de page. Le dessin étant plus grand que le
     bloc qui l'accueille, les deux décalages disent de combien il en sort.
     Le repère est le bloc haut, dont les bords coïncident avec ceux du pied
     de page : le décalage haut se compte donc depuis le filet orange. */
  --footer-decor-w:      20rem;
  --footer-decor-droite:  3rem;
  --footer-decor-haut:    5rem;
  --nav-underline-w: 2px;    /* soulignement au survol */
  --nav-underline-gap: 6px;  /* distance sous le texte */

  /* Menu déplié des écrans étroits. À la souris, un libellé de 13px haut de
     21 se vise sans y penser ; au doigt, c'est une cible deux fois trop
     petite, et le bouton Contact venait border « À propos ». Le libellé
     grossit, le lien devient un bloc qui porte sa propre hauteur, et le
     bouton prend de l'air. */
  --nav-mobile-fs:     var(--fs-base);
  --nav-mobile-pad-y:  var(--sp-3);   /* moitié de la hauteur ajoutée */
  --nav-mobile-gap:    var(--sp-2);   /* zone morte entre deux cibles */
  --nav-mobile-cta-mt: var(--sp-3);
  /* Rapprochement optique des deux lignes du logotype. Les capitales ne
     remplissent pas leur boîte : sans ce décalage l'écart paraît plus grand
     qu'il ne l'est. Appliqué en transform, donc sans effet sur la mise en
     page ni sur la hauteur de l'en-tête.
     Deux valeurs distinctes et non un décalage symétrique : descendre le nom
     ne doit pas remonter d'autant le sous-titre. Attention, elles se
     rapprochent l'une de l'autre — l'écart disponible n'est que de 17px. */
  /* Ombres discrètes : la maquette repose sur les bordures, pas sur le
     relief. Teintées de vert plutôt que de noir pour rester chaudes. */
  --shadow-sm: 0 1px 2px rgba(18, 61, 45, 0.06);
  --shadow-md: 0 6px 20px rgba(18, 61, 45, 0.08);

  /* --- Mouvement -------------------------------------------------------- */
  --ease:     cubic-bezier(0.2, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
}

/* Sur petit écran, le logotype pleine taille pousse le bouton de menu à la
   ligne suivante. On le réduit ici plutôt que dans style.css, pour que toutes
   les tailles restent décidées dans ce seul fichier. */
@media (max-width: 46rem) {
  :root {
    /* Une seule valeur suffit : marque, nom, sous-titre et décalages en
       dérivent tous, les proportions restent donc intactes. */
    --logo-echelle: 0.75;
    /* À 0.52em le sous-titre passe sur deux lignes et vient recouvrir le nom,
       la hauteur du bloc étant calée sur celle du cercle. */
    --tracking-wider: 0.18em;
    /* La gouttière élargie de l'en-tête est un raffinement d'écran large :
       sur 375px elle ne fait que voler la place du bouton de menu. */
    --header-gutter-extra: 0px;
    /* 70px de chaque côté ne laisseraient presque rien sur un téléphone. Mais
       pas 0 non plus : depuis que les sections ne portent plus de gouttière,
       `main` est seul à écarter le contenu des bords de l'écran. */
    --main-gutter: var(--wrap-gutter);
    /* Le débordement des bandeaux valait 30px pour une gouttière tombée à 24 :
       la soustraction passait sous zéro, le padding latéral était donc nul et
       les textes se collaient au bord de l'aplat. Les deux valeurs sont
       reprises ensemble, et leur somme fait toujours --main-gutter : l'aplat
       se rapproche du bord de l'écran, garde ses coins visibles, et son texte
       reste aligné sur celui du reste de la page. */
    --section-bleed:       var(--sp-2);
    --section-bleed-pad-x: var(--sp-4);
    /* Les modalités passent en pile : l'icône n'a plus à tenir une colonne
       entière, elle sert de vignette devant son texte.
       Boîte carrée, à la différence de l'affichage en colonnes : là-bas elle
       est plus haute que le dessin pour aligner les pastilles, ici les
       pastilles ont disparu et cette bande vide se voyait — le filet touchait
       le bas du dessin mais s'arrêtait 4px avant son haut. Les trois dessins
       ont une viewBox carrée de 38 unités ; un dessin d'un autre format
       rouvrirait l'écart. */
    --etape-icon-w: 3.25rem;
    --etape-icon-h: var(--etape-icon-w);
    --etape-texte-max: 40ch;

    /* ── Rythme vertical resserré ────────────────────────────────────────
       Les respirations sont pensées pour un grand écran, où elles se lisent
       d'un coup d'œil. Empilées sur une colonne de 360px elles s'additionnent
       en écrans entiers de vide : mesuré sur la page lycée, 90px au-dessus du
       titre, 80 sous le hero, puis 40 + 48 autour du filet avant même le
       premier mot de la section suivante. Toutes les valeurs ci-dessous sont
       divisées par deux environ. Elles valent pour les neuf pages : le défaut
       tient au format, pas à une page. */
    --hero-pad-top:        var(--sp-5);
    --hero-pad-bottom:     var(--sp-5);
    --hero-panneau-pad-y:  var(--sp-5);
    --section-pad:         var(--sp-6);
    --section-pad-tight:   var(--sp-5);
    --section-gap:         var(--sp-5);
    --separateur-decalage: var(--sp-5);
    --separateur-marge:    var(--sp-6);
    --niveau-grille-mt:    var(--sp-5);
    --final-gap:           var(--sp-6);
    --final-profil-pad:    var(--sp-6);
    /* Écart entre le numéro d'un jalon et son libellé. 40px creusaient une
       colonne vide au milieu du sommaire, pour un numéro large de 16. */
    --jalon-gap:           var(--sp-4);
    /* Retrait gauche de l'aplat du hero. Compté depuis le bord de l'écran et
       non depuis le panneau, à la différence du grand écran : le style
       retranche le retrait de `main`. 120px sur 360 de large ne laisseraient
       plus qu'un tiers d'aplat. */
    --hero-panneau-aplat-x: 90px;

    /* Grille des tarifs. À 24px de rembourrage latéral, la table mesurait
       339px de large pour un cadre de 312 : elle défilait sous le doigt à
       l'intérieur de son cadre, ce qui se lit comme un débordement de la page.
       Le rembourrage compte six fois — deux par colonne — et c'est donc lui,
       bien avant les textes, qui décide si la table tient. La colonne des
       niveaux était la plus large des trois alors qu'elle porte le moins :
       elle rend sa place aux deux colonnes de prix. */
    --tarifs-pad-x:      var(--sp-3);
    --tarifs-col-niveau: 30%;

    /* Carte du formulaire. Son rembourrage vaut désormais le retrait de
       `main` : les champs s'alignent donc sur le texte du reste du site, alors
       qu'ils commençaient à 72px du bord de l'écran. */
    --contact-carte-pad: var(--main-gutter);
    --contact-carte-mt:  var(--sp-6);
  }
}

/* Sous 34rem, la carte n'a plus la place d'offrir une gouttière à son icône :
   colonne de gauche, gouttière et rembourrage latéral lui prenaient près de
   120px sur les 435px d'un téléphone, et le texte commençait au tiers de la
   carte. L'icône rétrécit, sa colonne se réduit à sa propre largeur et la
   gouttière est divisée par deux. Seuil propre aux cartes, plus bas que celui
   de l'en-tête : à 46rem elles occupent encore toute la largeur et l'icône
   pleine taille y est justifiée. */
@media (max-width: 34rem) {
  :root {
    --icon-size:     2.25rem;
    --card-icon-col: var(--icon-size);
    --card-col-gap:  var(--sp-3);
    /* Le rembourrage latéral porte l'icône : c'est lui qui la décale à gauche. */
    --card-pad-x:    var(--sp-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
  }
}