@charset "utf-8";

/* =============================================================
   franchise.parapuncture.fr — feuille de style unique
   Référence visuelle : maquette-reference/maquette.html (validée).
   Sommaire
   1. Polices auto-hébergées
   2. Variables (palette, typographie, espacements, mesures)
   3. Réinitialisation et éléments de base
   4. Utilitaires de mise en page
   5. Boutons et liens
   6. Bandeau d'annonce, en-tête, menu mobile
   7. Fil d'Ariane
   8. Gabarits de section
      8.1  Ouverture
      8.2  Ligne de repères
      8.3  Profils (« vous vous reconnaîtrez peut-être »)
      8.4  Aplat sauge illustré
      8.5  Citations d'avis
      8.6  Sommaire numéroté
      8.7  Investissement
      8.8  Liste de villes
      8.9  Notre histoire
      8.10 Frise du parcours (fond ardoise)
      8.11 Accordéons
      8.12 Bandeau final d'appel
   9. Pied de page
   10. Emplacements en attente (⟦À VENIR⟧, photos)
   11. Accessibilité, mouvement réduit, impression
   ============================================================= */


/* =============================================================
   1. POLICES AUTO-HÉBERGÉES
   Fichiers woff2 dans /polices/ — aucune ressource tierce (RGPD).
   Marcellus, Marcellus SC et Poppins sont sous licence SIL Open
   Font License 1.1. Voir polices/LICENCE.md.
   ============================================================= */

@font-face {
  font-family: "Marcellus";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("polices/marcellus-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: "Marcellus";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("polices/marcellus-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;
}

/* Variante petites capitales : nom de marque et titres du pied de page. */
@font-face {
  font-family: "Marcellus SC";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("polices/marcellus-sc-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: "Marcellus SC";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("polices/marcellus-sc-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: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("polices/poppins-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: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("polices/poppins-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: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("polices/poppins-500-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: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("polices/poppins-500-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: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("polices/poppins-600-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: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("polices/poppins-600-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;
}


/* =============================================================
   2. VARIABLES
   ============================================================= */

:root {
  /* --- Palette de la charte ------------------------------------ */
  --sauge: #81926d;          /* grands titres, chiffres, filets d'accent */
  --ardoise: #303640;        /* texte courant */
  --creme: #fdf5ec;          /* fonds alternés */
  --blanc: #ffffff;
  --lime: #9ab026;           /* usage unique : appel à candidature */
  --foret: #173404;          /* texte du bouton lime */
  --terracotta: #e86e2c;     /* exceptionnel : étoiles des avis */
  --gris-bleute: #7c8491;    /* filets et éléments non textuels */

  /* --- Variantes de service (contraste AA) ---------------------- *
   * Le sauge et le gris bleuté de la charte n'atteignent pas le
   * rapport 4,5:1 exigé pour du texte courant. Ces variantes, très
   * proches, servent au TEXTE et aux aplats portant du texte. Les
   * couleurs de charte restent en place pour les grands titres,
   * les chiffres et les filets.                                   */
  --sauge-profond: #667553;      /* 4,96:1 sur blanc · 4,55:1 sur crème ·
                                    blanc sur ce fond : 4,96:1 */
  --sauge-encre: #566345;        /* survol des aplats et boutons sauge */
  --gris-bleute-fonce: #666e7c;  /* textes secondaires : 5,1:1 sur blanc */
  --gris-attente: #736b5c;       /* ⟦À VENIR⟧ : 5,3:1 sur blanc, 4,8:1 sur crème */
  --lime-survol: #a8bf33;

  /* --- Nuances de texte ---------------------------------------- */
  --ardoise-doux: #4a5058;    /* paragraphes de second plan (8,1:1) */
  --sauge-pale: #e8ecdf;      /* surtitre sur aplat sauge */
  --ardoise-clair: #e8eae5;   /* texte sur fond ardoise */
  --ardoise-tendre: #c9cdc4;  /* texte secondaire sur ardoise (7,5:1) */
  --vert-de-gris: #cfd3c8;    /* bandeau d'annonce sur ardoise (8,1:1) */
  --vert-pale: #aab89a;       /* surtitre sur ardoise (5,9:1) */

  /* --- Filets --------------------------------------------------- */
  --filet: #e3ddd2;                          /* filet chaud, fonds clairs */
  --filet-appuye: #cfc7b8;
  --filet-blanc: rgba(255, 255, 255, 0.35);  /* sur aplat sauge */
  --filet-sombre: rgba(255, 255, 255, 0.22); /* sur fond ardoise */

  /* --- Typographie ---------------------------------------------- */
  --police-titre: "Marcellus", "Iowan Old Style", "Palatino Linotype", Palatino,
    Georgia, "Times New Roman", serif;
  --police-titre-pc: "Marcellus SC", "Marcellus", "Palatino Linotype", Palatino,
    Georgia, serif;
  --police-texte: "Poppins", "Segoe UI", system-ui, -apple-system,
    "Helvetica Neue", Arial, sans-serif;

  /* Échelle fluide : la borne basse est la valeur à 375 px. */
  --t-titre-1: clamp(2.375rem, 1.55rem + 3.5vw, 3.75rem);   /* 38 → 60 px */
  --t-titre-2: clamp(1.75rem, 1.28rem + 2vw, 2.5rem);       /* 28 → 40 px */
  --t-titre-final: clamp(1.875rem, 1.3rem + 2.4vw, 2.875rem);
  --t-titre-3: 1.34375rem;                                  /* 21,5 px */
  --t-corps: 1rem;
  --t-chapo: 1.03125rem;                                    /* 16,5 px */
  --t-petit: 0.9375rem;                                     /* 15 px */
  --t-menu: 0.8125rem;                                      /* 13 px */
  --t-surtitre: 0.75rem;                                    /* 12 px */

  --interligne-titre: 1.15;
  --interligne-corps: 1.75;
  --lettrage-surtitre: 0.28em;

  /* --- Espacements ---------------------------------------------- */
  --e-1: 0.5rem;
  --e-2: 1rem;
  --e-3: 1.5rem;
  --e-4: 2rem;
  --e-5: 3rem;
  --e-6: 4rem;
  --e-7: 6rem;

  /* --- Mesures -------------------------------------------------- */
  --largeur-max: 1200px;
  --marge-laterale: clamp(1.25rem, 3vw, 1.5rem);
  --section-y: clamp(3.5rem, 1.6rem + 8vw, 6.875rem);   /* 56 → 110 px */
  --hauteur-entete: 4.25rem;
  --rayon: 0;

  /* Gouttière alignée sur l'enveloppe, pour les sections dont une
     colonne file jusqu'au bord de l'écran. */
  --gouttiere: max(
    var(--marge-laterale),
    calc((100% - var(--largeur-max)) / 2 + var(--marge-laterale))
  );
}

@media (min-width: 62em) {
  :root {
    --hauteur-entete: 4.875rem;
  }
}


/* =============================================================
   3. RÉINITIALISATION ET ÉLÉMENTS DE BASE
   ============================================================= */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hauteur-entete) + 1rem);
}

body {
  background-color: var(--blanc);
  color: var(--ardoise);
  font-family: var(--police-texte);
  font-size: var(--t-corps);
  font-weight: 400;
  line-height: var(--interligne-corps);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

body.menu-ouvert {
  overflow: hidden;
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* <picture> ne doit pas réintroduire d'espace autour de l'image. */
picture {
  line-height: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--police-titre);
  font-weight: 400;
  line-height: var(--interligne-titre);
  letter-spacing: 0.01em;
  text-wrap: balance;
}

h1 {
  font-size: var(--t-titre-1);
}

h2 {
  font-size: var(--t-titre-2);
}

h3 {
  font-size: var(--t-titre-3);
}

p {
  max-width: 72ch;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

strong,
b {
  font-weight: 600;
}

/* Marque déposée : jamais plus grosse que le mot qu'elle suit. */
.marque {
  font-size: 0.62em;
  vertical-align: 0.5em;
  letter-spacing: 0;
}


/* =============================================================
   4. UTILITAIRES DE MISE EN PAGE
   ============================================================= */

.enveloppe {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--marge-laterale);
}

.section {
  padding-block: var(--section-y);
}

.section--blanche {
  background-color: var(--blanc);
}

.section--creme {
  background-color: var(--creme);
}

.section--sauge {
  background-color: var(--sauge-profond);
  color: var(--blanc);
}

.section--ardoise {
  background-color: var(--ardoise);
  color: var(--ardoise-clair);
}

.section--sauge h2,
.section--sauge h3,
.section--ardoise h2,
.section--ardoise h3 {
  color: var(--blanc);
}

/* --- Surtitre (« eyebrow ») ---------------------------------- *
 * Poppins 500, majuscules très espacées, suivi d'un filet court. */
.surtitre {
  display: block;
  margin-bottom: 1.125rem;
  font-family: var(--police-texte);
  font-size: var(--t-surtitre);
  font-weight: 500;
  letter-spacing: var(--lettrage-surtitre);
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--sauge-profond);
}

.surtitre::after {
  content: "";
  display: inline-block;
  width: 44px;
  height: 1px;
  margin-left: 14px;
  vertical-align: middle;
  background-color: var(--sauge);
  opacity: 0.6;
}

/* Sur l'aplat sauge, seul le blanc pur atteint 4,5:1 : le surtitre et
   les paragraphes y restent blancs, le filet garde la teinte pâle. */
.section--sauge .surtitre {
  color: var(--blanc);
}

.section--sauge .surtitre::after {
  background-color: var(--sauge-pale);
}

.section--ardoise .surtitre {
  color: var(--vert-pale);
}

.section--ardoise .surtitre::after {
  background-color: var(--vert-pale);
}

/* --- Tétière de section --------------------------------------- */
.tetiere {
  max-width: 41.25rem;
  margin-bottom: var(--e-5);
}

.tetiere--large {
  max-width: 45rem;
}

.tetiere__chapo {
  margin-top: var(--e-2);
}

@media (min-width: 62em) {
  .tetiere {
    margin-bottom: 4rem;
  }
}

.filet {
  border: 0;
  border-top: 1px solid var(--filet);
  margin-block: var(--e-4);
}

.note-basse {
  margin-top: 2.125rem;
  font-size: 0.78125rem;
  line-height: 1.65;
  color: var(--gris-bleute-fonce);
  max-width: 40rem;
}

/* Variante « ligne de confiance » : filet fin au-dessus. */
.note-basse--filet {
  padding-top: 1.25rem;
  border-top: 1px solid var(--filet);
  max-width: 46rem;
}


/* =============================================================
   5. BOUTONS ET LIENS
   ============================================================= */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 1rem 2.125rem;
  border: 1px solid transparent;
  border-radius: var(--rayon);
  font-family: var(--police-texte);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease,
    color 0.2s ease;
}

.bouton--lime {
  background-color: var(--lime);
  color: var(--foret);
}

.bouton--lime:hover,
.bouton--lime:focus-visible {
  background-color: var(--lime-survol);
}

.bouton--sauge {
  background-color: var(--sauge-profond);
  color: var(--blanc);
}

.bouton--sauge:hover,
.bouton--sauge:focus-visible {
  background-color: var(--sauge-encre);
}

.bouton--contour {
  background-color: transparent;
  border-color: var(--filet-appuye);
  color: var(--ardoise);
}

.bouton--contour:hover,
.bouton--contour:focus-visible {
  border-color: var(--sauge-profond);
  color: var(--sauge-profond);
}

/* Lien sobre, souligné d'un filet sauge. */
.lien {
  display: inline-block;
  padding-bottom: 3px;
  font-size: 0.9375rem;
  color: var(--ardoise);
  text-decoration: none;
  border-bottom: 1px solid var(--sauge);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.lien:hover,
.lien:focus-visible {
  color: var(--sauge-profond);
  border-bottom-color: var(--sauge-profond);
}

.section--sauge .lien,
.section--ardoise .lien {
  color: var(--blanc);
  border-bottom-color: var(--blanc);
}

/* Sur fond sombre, le texte reste blanc (seule teinte à 4,5:1) :
   c'est le filet qui signale le survol. */
.section--sauge .lien:hover,
.section--sauge .lien:focus-visible,
.section--ardoise .lien:hover,
.section--ardoise .lien:focus-visible {
  color: var(--blanc);
  border-bottom-color: var(--sauge-pale);
}

/* Lien à l'intérieur d'un texte courant. */
.lien-texte {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--filet-appuye);
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.lien-texte:hover,
.lien-texte:focus-visible {
  color: var(--sauge-profond);
  text-decoration-color: currentColor;
}

.appels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) 1.875rem;
  margin-top: var(--e-4);
}


/* =============================================================
   6. BANDEAU D'ANNONCE, EN-TÊTE, MENU MOBILE
   ============================================================= */

/* --- Bandeau d'annonce (au-dessus de l'en-tête) --------------- */
.annonce {
  background-color: var(--ardoise);
  color: var(--vert-de-gris);
  font-size: 0.78125rem;
  letter-spacing: 0.06em;
  line-height: 1.6;
  text-align: center;
  padding: 0.5625rem 1rem;
}

.annonce p {
  max-width: none;
}

.annonce strong {
  color: var(--blanc);
  font-weight: 500;
}

/* --- En-tête -------------------------------------------------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--filet);
}

@supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))) {
  .entete {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}

/* Sans JavaScript, la navigation reste dépliée sous la barre : un
   en-tête collant deviendrait alors envahissant sur un petit écran. */
html:not(.js) .entete {
  position: static;
  background-color: var(--blanc);
}

.entete__barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--hauteur-entete);
}

/* --- Signature (logo + nom) --- */
/* Signature, bouton d'appel et déclencheur doivent tenir sur une seule
   ligne dès 375 px : les tailles montent par paliers. */
.signature {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-right: auto;
  text-decoration: none;
  color: var(--ardoise);
}

.signature__logo {
  flex: none;
  width: auto;
  height: 2.25rem;
}

.signature__texte {
  display: block;
  line-height: 1;
}

.signature__nom {
  display: block;
  font-family: var(--police-titre-pc);
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
}

.signature__mention {
  display: block;
  margin-top: 4px;
  font-family: var(--police-texte);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--sauge-profond);
}

/* --- Zone de droite --- */
.entete__actions {
  order: 2;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.entete__bouton {
  padding: 0.55rem 0.8rem;
  min-height: 2.75rem;
  font-size: 0.8125rem;
}

/* --- Déclencheur du menu (masqué tant que JS n'a pas répondu) --- */
.declencheur {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.5rem;
  background: none;
  border: 0;
  color: var(--ardoise);
  cursor: pointer;
}

.js .declencheur {
  display: inline-flex;
}

.declencheur__traits {
  display: block;
  position: relative;
  width: 1.375rem;
  height: 1px;
  background-color: currentColor;
  transition: background-color 0.2s ease;
}

.declencheur__traits::before,
.declencheur__traits::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transition: transform 0.24s ease;
}

.declencheur__traits::before {
  top: -6px;
}

.declencheur__traits::after {
  top: 6px;
}

.declencheur[aria-expanded="true"] .declencheur__traits {
  background-color: transparent;
}

.declencheur[aria-expanded="true"] .declencheur__traits::before {
  transform: translateY(6px) rotate(45deg);
}

.declencheur[aria-expanded="true"] .declencheur__traits::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* --- Navigation --- */
.navigation {
  order: 3;
  width: 100%;
  padding-bottom: var(--e-2);
  border-top: 1px solid var(--filet);
}

.navigation__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
}

.navigation__lien {
  display: inline-block;
  padding-block: 0.7rem;
  min-height: 2.75rem;
  font-size: 0.90625rem;
  text-decoration: none;
  color: var(--ardoise);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.navigation__lien:hover,
.navigation__lien:focus-visible {
  color: var(--sauge-profond);
  border-bottom-color: var(--sauge-profond);
}

.navigation__lien[aria-current="page"] {
  border-bottom-color: var(--sauge);
}

.navigation__pied {
  display: none;
}

/* Panneau plein écran (uniquement si JavaScript est actif). */
/* Panneau déroulant ancré SOUS la barre d'en-tête, et non calé sur le
   viewport : sa hauteur suit son contenu, donc pas d'ascenseur
   inutile. Il ne peut pas non plus recouvrir la barre lorsque le
   bandeau d'annonce est encore visible en haut de page.
   L'ancrage marche parce que .entete est en position sticky, ce qui
   en fait le bloc de référence des enfants positionnés. */
.js .navigation {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 40;
  display: block;
  padding: var(--e-3) var(--marge-laterale) var(--e-4);
  background-color: var(--creme);
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
  /* Filet de sécurité : sur un écran très bas (paysage), on défile
     dans le panneau plutôt que de perdre les derniers liens. */
  max-height: calc(100vh - var(--hauteur-entete));
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-0.5rem);
  transition: opacity 0.24s ease, transform 0.24s ease,
    visibility 0s linear 0.24s;
}

@supports (height: 100dvh) {
  .js .navigation {
    max-height: calc(100dvh - var(--hauteur-entete));
  }
}

.js .navigation__pied {
  margin-top: var(--e-3);
  padding-top: var(--e-3);
  border-top: 1px solid var(--filet);
}

.js .navigation[data-ouvert="oui"] {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 0.24s ease, transform 0.24s ease, visibility 0s;
}

.js .navigation__liste {
  flex-direction: column;
  gap: 0;
}

.js .navigation__lien {
  padding-block: 1rem;
  font-family: var(--police-titre);
  font-size: 1.625rem;
  line-height: 1.25;
  border-bottom: 1px solid var(--filet);
}

.js .navigation__lien:hover,
.js .navigation__lien:focus-visible {
  border-bottom-color: var(--sauge-profond);
}

.js .navigation__pied {
  display: block;
  font-size: var(--t-menu);
  color: var(--gris-bleute-fonce);
}

.js .navigation__pied a {
  color: inherit;
}

@media (min-width: 26em) {
  .signature {
    gap: 0.75rem;
  }

  .signature__logo {
    height: 2.625rem;
  }

  .signature__nom {
    font-size: 1.0625rem;
    letter-spacing: 0.06em;
  }

  .entete__actions {
    gap: 0.5rem;
  }

  .entete__bouton {
    padding: 0.65rem 1.1rem;
    font-size: 0.84375rem;
  }
}

@media (min-width: 36em) {
  .signature__logo {
    height: 2.875rem;
  }

  .signature__nom {
    font-size: 1.1875rem;
  }

  .entete__actions {
    gap: var(--e-2);
  }

  .entete__bouton {
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
  }
}

/* --- Navigation en ligne dans la barre --- */
@media (min-width: 62em) {
  .js .declencheur,
  .declencheur {
    display: none;
  }

  .entete__barre {
    gap: 2.125rem;
  }

  .signature__logo {
    height: 3.25rem;
  }

  .signature__nom {
    font-size: 1.3125rem;
  }

  .js .navigation,
  .navigation {
    position: static;
    inset: auto;
    order: 1;
    width: auto;
    flex-direction: row;
    justify-content: flex-end;
    padding: 0;
    background: none;
    border: 0;
    overflow: visible;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .navigation__liste,
  .navigation__liste {
    flex-direction: row;
    align-items: center;
    gap: 0 clamp(1.125rem, 2.4vw, 1.875rem);
  }

  .js .navigation__lien,
  .navigation__lien {
    padding-block: 0.6rem;
    font-family: var(--police-texte);
    font-size: 0.90625rem;
    border-bottom: 1px solid transparent;
  }

  .js .navigation__pied,
  .navigation__pied {
    display: none;
  }
}


/* =============================================================
   7. FIL D'ARIANE
   ============================================================= */

.ariane {
  padding-block: var(--e-3);
  font-size: var(--t-menu);
  color: var(--gris-bleute-fonce);
}

.ariane__liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.5rem;
}

.ariane__liste li + li::before {
  content: "\00b7";
  margin-right: 0.5rem;
  color: var(--filet-appuye);
}

.ariane a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--filet);
}

.ariane a:hover,
.ariane a:focus-visible {
  color: var(--ardoise);
  border-bottom-color: var(--ardoise);
}

.ariane [aria-current="page"] {
  color: var(--ardoise);
}


/* =============================================================
   8. GABARITS DE SECTION
   ============================================================= */

/* --- 8.1 Ouverture ------------------------------------------- */

.ouverture {
  background-color: var(--creme);
  overflow: hidden;
}

.ouverture__texte {
  padding: var(--e-5) var(--marge-laterale) var(--e-4);
}

.ouverture__titre {
  margin-bottom: var(--e-3);
}

/* Respiration de couleur dans le titre : « du bien-être. » en sauge.
   Grand corps de texte, donc contraste AA « grand texte » (3,1:1). */
.ouverture__titre em {
  font-style: normal;
  color: var(--sauge);
}

.ouverture__chapo {
  max-width: 46ch;
  font-size: var(--t-chapo);
}

.ouverture__media {
  position: relative;
  min-height: 21.25rem;
}

.ouverture__media img,
.ouverture__media .photo-attente {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Une photo verticale placée dans un cadre large est rognée en haut
   et en bas à parts égales — ce qui coupe le visage. On remonte le
   point d'ancrage pour garder le regard dans le cadre. */
.ouverture__media--portrait img {
  object-position: center 18%;
}

@media (min-width: 62em) {
  .ouverture__media--portrait img {
    object-position: center 22%;
  }
}

@media (min-width: 62em) {
  .ouverture {
    display: grid;
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    align-items: stretch;
    padding-left: var(--gouttiere);
  }

  .ouverture__texte {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5.5rem 3.5rem 5.5rem 0;
  }

  .ouverture__media {
    min-height: 32.5rem;
  }

  /* Fondu crème sur le bord gauche de la photo : elle se fond dans
     la section. C'est un fondu d'image, pas un dégradé décoratif. */
  .ouverture__media::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 0;
    bottom: 0;
    width: 110px;
    z-index: 2;
    background: linear-gradient(90deg, var(--creme), rgba(253, 245, 236, 0));
  }
}

/* --- 8.2 Ligne de repères ------------------------------------ */

.reperes {
  background-color: var(--blanc);
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
}

/* Six repères : une grille plutôt qu'une seule ligne. Les valeurs
   reprennent le libellé exact du contenu (« 15 ans », « 2 centres »),
   bien plus larges que les chiffres nus de la maquette — six d'entre
   elles ne tiendraient pas sur un rang. Trois colonnes sur deux rangs
   laissent en prime chaque libellé sur deux lignes au plus. */
.reperes__liste {
  display: grid;
  gap: 1rem;
  padding-block: 1.625rem;
}

.reperes__item {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.reperes__valeur {
  font-family: var(--police-titre);
  font-size: 1.75rem;
  line-height: 1;
  white-space: nowrap;
  color: var(--sauge-profond);
}

.reperes__libelle {
  font-size: var(--t-menu);
  line-height: 1.45;
  color: var(--gris-bleute-fonce);
}

@media (min-width: 34em) {
  .reperes__liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 2rem;
  }
}

@media (min-width: 62em) {
  .reperes__liste {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem 2.5rem;
  }

  .reperes__valeur {
    font-size: 1.875rem;
  }
}

/* --- 8.3 Profils --------------------------------------------- */

.profils {
  display: grid;
  gap: 2.75rem;
}

.profil + .profil {
  padding-top: 2.5rem;
  border-top: 1px solid var(--filet);
}

.profil__numero {
  display: block;
  margin-bottom: 0.875rem;
  font-family: var(--police-titre);
  font-size: 0.9375rem;
  letter-spacing: 0.2em;
  color: var(--sauge-profond);
}

.profil__titre {
  margin-bottom: 0.875rem;
  font-size: var(--t-titre-3);
}

.profil p {
  font-size: var(--t-petit);
  color: var(--ardoise-doux);
}

@media (min-width: 62em) {
  .profils {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .profil {
    padding: 0.5rem 2.5rem 0.5rem 0;
  }

  .profil + .profil {
    padding: 0.5rem 2.5rem 0.5rem 2.5rem;
    border-top: 0;
    border-left: 1px solid var(--filet);
  }

  .profil:last-child {
    padding-right: 0;
  }
}

/* --- 8.4 Aplat sauge illustré -------------------------------- */

.concept__grille {
  display: grid;
  gap: var(--e-5);
}

.concept__titre {
  margin-bottom: var(--e-3);
}

.concept p {
  margin-bottom: 1.25rem;
  color: var(--blanc);
}

/* Phrase de preuve détachée, précédée d'un filet blanc. */
.concept .preuve {
  margin-top: var(--e-1);
  padding-top: 1.375rem;
  border-top: 1px solid var(--filet-blanc);
  font-family: var(--police-titre);
  font-size: 1.3125rem;
  line-height: 1.4;
  color: var(--blanc);
}

.concept .lien {
  margin-top: 1.625rem;
}

.concept__photo {
  position: relative;
}

.concept__photo img,
.concept__photo .photo-attente {
  width: 100%;
  height: auto;
}

/* Cadre-filet blanc décalé vers le bas-droite. */
.concept__photo::after {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1px solid var(--filet-blanc);
  pointer-events: none;
}

@media (min-width: 62em) {
  .concept__grille {
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
    gap: 4.5rem;
    align-items: center;
  }
}

/* --- 8.5 Citations d'avis ------------------------------------ */

.citations {
  display: grid;
  gap: var(--e-5);
  align-items: start;
}

.citations__colonne {
  display: grid;
  gap: 2.75rem;
}

.citation {
  position: relative;
  padding-top: 2.75rem;
}

.citation::before {
  content: "\00ab";
  position: absolute;
  top: -10px;
  left: -4px;
  font-family: var(--police-titre);
  font-size: 5.5rem;
  line-height: 1;
  color: var(--sauge);
  opacity: 0.35;
}

.citation__texte {
  font-family: var(--police-titre);
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--ardoise);
  max-width: none;
}

.citation--petite .citation__texte {
  font-size: 1.125rem;
}

.citation__signature {
  margin-top: 1.125rem;
  font-size: var(--t-menu);
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris-bleute-fonce);
}

.citation__signature b {
  color: var(--ardoise);
  font-weight: 500;
}

.etoiles {
  margin-right: 0.625rem;
  letter-spacing: 2px;
  font-size: var(--t-menu);
  color: var(--terracotta);
}

@media (min-width: 62em) {
  .citations {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 3.5rem 5rem;
  }
}

/* --- 8.6 Sommaire numéroté ----------------------------------- */

.sommaire {
  counter-reset: sommaire;
  max-width: 55rem;
  margin-top: 2.5rem;
  border-top: 1px solid var(--filet);
}

.sommaire__item {
  counter-increment: sommaire;
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  padding-block: 1.75rem;
  border-bottom: 1px solid var(--filet);
}

.sommaire__item::before {
  content: counter(sommaire, decimal-leading-zero);
  padding-top: 4px;
  font-family: var(--police-titre);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--sauge);
}

/* Chiffres en contour ; repli en couleur pleine si non pris en charge. */
@supports (-webkit-text-stroke: 1px currentColor) {
  .sommaire__item::before {
    color: transparent;
    -webkit-text-stroke: 1px var(--sauge);
  }
}

.sommaire__titre {
  margin-bottom: 0.5rem;
  font-family: var(--police-texte);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0;
}

.sommaire__item p {
  font-size: var(--t-petit);
  color: var(--ardoise-doux);
}

@media (min-width: 62em) {
  .sommaire__item {
    grid-template-columns: 6.875rem minmax(0, 1fr);
    gap: 2.125rem;
    padding-block: 2.375rem;
  }

  .sommaire__item::before {
    font-size: 3.625rem;
  }
}

/* --- 8.7 Investissement -------------------------------------- */

.invest {
  display: grid;
  gap: var(--e-4);
  align-items: center;
}

.invest__chiffre {
  font-family: var(--police-titre);
  font-size: clamp(5.25rem, 3rem + 9vw, 9.25rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: var(--ardoise);
  word-spacing: -0.18em;
}

.invest__legende {
  display: block;
  margin-top: 0.75rem;
  font-size: clamp(1.25rem, 0.9rem + 1.4vw, 1.75rem);
  line-height: 1.2;
  word-spacing: normal;
  color: var(--sauge-profond);
}

.invest p {
  margin-bottom: 1.375rem;
}

.invest__detail {
  padding-top: 1.25rem;
  border-top: 1px solid var(--filet);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--gris-bleute-fonce);
}

.invest__detail .lien {
  font-size: inherit;
}

@media (min-width: 62em) {
  .invest {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 4.375rem;
  }
}

/* --- 8.8 Liste de villes ------------------------------------- */

.villes__titre {
  margin-bottom: 0.75rem;
}

.villes__intro {
  max-width: 37.5rem;
  margin-bottom: var(--e-4);
}

.liste-villes {
  border-top: 1px solid var(--filet);
}

/* Mobile : le nom occupe sa propre ligne, le département et la flèche
   se placent en dessous. Au-delà, tout revient sur une seule ligne. */
.ville {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.35rem var(--e-2);
  padding: 1.375rem 0.375rem;
  border-bottom: 1px solid var(--filet);
  text-decoration: none;
  transition: padding-left 0.2s ease;
}

.ville__nom {
  grid-column: 1 / -1;
}

.ville:hover,
.ville:focus-visible {
  padding-left: 1.125rem;
}

.ville__nom {
  font-family: var(--police-titre);
  font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.25rem);
  line-height: 1.2;
}

.ville__departement {
  font-size: var(--t-menu);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris-bleute-fonce);
}

.ville__fleche {
  flex: none;
  margin-left: var(--e-2);
  font-family: var(--police-titre);
  font-size: 1.625rem;
  line-height: 1;
  color: var(--sauge-profond);
}

.villes__autre {
  margin-top: 1.875rem;
  font-size: 0.90625rem;
  color: var(--ardoise-doux);
}

@media (min-width: 48em) {
  .ville {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--e-2);
    padding-block: 1.625rem;
  }
}

/* --- 8.9 Notre histoire -------------------------------------- */

.histoire {
  display: grid;
  gap: var(--e-5);
  align-items: center;
}

.histoire__photo {
  position: relative;
}

.histoire__photo img,
.histoire__photo .photo-attente {
  width: 100%;
  height: auto;
}

/* Cadre-filet sauge décalé vers le haut-gauche. */
.histoire__photo::after {
  content: "";
  position: absolute;
  inset: -16px 16px 16px -16px;
  border: 1px solid var(--sauge);
  opacity: 0.45;
  pointer-events: none;
}

.histoire__titre {
  margin-bottom: 1.375rem;
}

.histoire p {
  margin-bottom: 1.25rem;
}

@media (min-width: 62em) {
  .histoire {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 5rem;
  }
}

/* --- 8.10 Frise du parcours (fond ardoise) ------------------- */

.parcours__titre {
  margin-bottom: var(--e-4);
}

.frise {
  counter-reset: frise;
  display: grid;
  gap: 2.125rem;
  position: relative;
}

/* Filet continu reliant les jalons : vertical sur mobile. */
.frise::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 19px;
  width: 1px;
  background-color: var(--filet-sombre);
}

.frise__etape {
  counter-increment: frise;
  position: relative;
  padding-left: 3.75rem;
}

.frise__etape::before {
  content: counter(frise);
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background-color: var(--fond-frise, var(--ardoise));
  font-family: var(--police-titre);
  font-size: 1rem;
  line-height: 1;
  color: var(--blanc);
}

.frise__texte {
  min-height: 38px;
  font-size: 0.875rem;
  color: var(--ardoise-tendre);
}

@media (min-width: 62em) {
  .frise {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2.375rem;
  }

  .frise::before {
    top: 19px;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 1px;
  }

  .frise__etape {
    padding-left: 0;
    padding-top: 3.625rem;
  }

  .frise__texte {
    min-height: 0;
  }
}

/* --- 8.11 Accordéons ----------------------------------------- */

.accordeons {
  margin-top: var(--e-5);
  border-top: 1px solid var(--filet);
}

.accordeon {
  border-bottom: 1px solid var(--filet);
}

.accordeon__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e-3);
  min-height: 3.5rem;
  padding: 1.375rem 0.25rem;
  font-family: var(--police-titre);
  font-size: 1.1875rem;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
  transition: color 0.2s ease;
}

.accordeon__question::-webkit-details-marker {
  display: none;
}

.accordeon__question:hover {
  color: var(--sauge-profond);
}

/* Indicateur « + » qui pivote à 45° à l'ouverture. */
.accordeon__question::after {
  content: "+";
  flex: none;
  font-family: var(--police-titre);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--sauge);
  transition: transform 0.2s ease;
}

.accordeon[open] > .accordeon__question::after {
  transform: rotate(45deg);
}

.accordeon__reponse {
  padding: 0 0.25rem 1.75rem;
}

.accordeon__reponse p {
  max-width: 72ch;
  font-size: 0.96875rem;
  color: var(--ardoise-doux);
}

.accordeon__reponse p + p {
  margin-top: var(--e-2);
}

.accordeons + .lien {
  margin-top: 2.125rem;
}

@media (min-width: 48em) {
  .accordeon__question {
    padding-block: 1.625rem;
    font-size: 1.3125rem;
  }
}

/* --- 8.12 Formulaire de candidature -------------------------- */

.page-candidature {
  display: grid;
  gap: var(--e-5);
  align-items: start;
}

.formulaire {
  display: grid;
  gap: var(--e-3);
  max-width: 40rem;
}

.champ {
  display: grid;
  gap: 0.4rem;
}

.champ__label,
.choix__intitule {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.champ__obligatoire {
  color: var(--sauge-profond);
}

.champ__aide {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--gris-bleute-fonce);
  max-width: none;
}

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 0.875rem;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ardoise);
  background-color: var(--blanc);
  border: 1px solid var(--filet-appuye);
  border-radius: var(--rayon);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.champ textarea {
  min-height: 8rem;
  resize: vertical;
}

.champ select {
  /* Flèche dessinée en CSS : aucune image, aucun script. */
  appearance: none;
  padding-right: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--sauge-profond) 50%),
    linear-gradient(135deg, var(--sauge-profond) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 1.35rem, calc(100% - 0.85rem) 1.35rem;
  background-size: 0.3rem 0.3rem, 0.3rem 0.3rem;
  background-repeat: no-repeat;
}

.champ input:hover,
.champ select:hover,
.champ textarea:hover {
  border-color: var(--gris-bleute);
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  border-color: var(--sauge-profond);
  outline: 2px solid var(--sauge-profond);
  outline-offset: 1px;
}

/* Signalement d'erreur natif, sans JavaScript : le navigateur marque
   lui-même les champs invalides une fois le formulaire soumis. */
.champ input:user-invalid,
.champ select:user-invalid,
.champ textarea:user-invalid {
  border-color: var(--terracotta);
}

/* Message d'erreur renvoyé par le serveur, sous le champ concerné. */
.champ__erreur {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  font-weight: 500;
  color: #b4471a;
}

.champ [aria-invalid="true"] {
  border-color: #b4471a;
}

/* Bandeau récapitulatif en tête de formulaire. */
.alerte {
  max-width: 40rem;
  margin-bottom: var(--e-3);
  padding: 0.9rem 1.1rem;
  background-color: #fdf0e9;
  border: 1px solid #e8b79c;
  border-radius: var(--rayon);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #8f3812;
}

.duo {
  display: grid;
  gap: var(--e-3);
}

/* --- Groupes de choix (boutons radio) --- */
.choix {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.4rem;
}

.choix__intitule {
  padding: 0;
  margin-bottom: 0.25rem;
}

.choix__option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  font-size: 0.9375rem;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.choix__option:hover {
  border-color: var(--sauge-profond);
}

.choix__option input {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.28rem;
  accent-color: var(--sauge-profond);
}

.choix__option:has(input:checked) {
  border-color: var(--sauge-profond);
  background-color: rgba(102, 117, 83, 0.06);
}

/* --- Consentement --- */
.consentement {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding-top: var(--e-2);
  border-top: 1px solid var(--filet);
  font-size: 0.9375rem;
  line-height: 1.6;
  cursor: pointer;
}

.consentement input {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.3rem;
  accent-color: var(--sauge-profond);
}

/* --- Pot de miel : invisible à l'œil, atteignable par les robots.
   On évite display:none, que les robots savent repérer. --- */
.pot-de-miel {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulaire__envoi {
  margin-top: var(--e-2);
}

.formulaire__mention {
  margin-top: var(--e-2);
  font-size: 0.8125rem;
  color: var(--gris-bleute-fonce);
}

/* --- Colonne de réassurance --- */
.reassurance {
  padding: var(--e-3);
  background-color: var(--creme);
}

.reassurance__titre {
  margin-bottom: 0.75rem;
  font-family: var(--police-titre);
  font-size: 1.3125rem;
  font-weight: 400;
  line-height: 1.25;
}

.reassurance p {
  font-size: 0.9375rem;
  color: var(--ardoise-doux);
}

@media (min-width: 34em) {
  .duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 62em) {
  .page-candidature {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 4.375rem;
  }

  .reassurance {
    padding: var(--e-4);
  }
}

/* --- 8.13 Bandeau final d'appel ------------------------------ */

.bandeau {
  background-color: var(--sauge-profond);
  color: var(--blanc);
}

.bandeau__contenu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2.25rem;
  padding-block: clamp(3rem, 1.9rem + 4.6vw, 6rem);
}

.bandeau__titre {
  max-width: 35rem;
  font-size: var(--t-titre-final);
}

.bandeau__texte {
  margin-top: 0.875rem;
  font-size: 0.96875rem;
  color: var(--blanc);
}


/* =============================================================
   9. PIED DE PAGE
   ============================================================= */

.pied {
  background-color: var(--ardoise);
  color: var(--ardoise-tendre);
  padding-block: var(--e-6) 2.5rem;
  font-size: 0.84375rem;
}

.pied a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.pied a:hover,
.pied a:focus-visible {
  color: var(--blanc);
}

.pied__grille {
  display: grid;
  gap: var(--e-4);
  margin-bottom: var(--e-5);
}

.pied__titre {
  margin-bottom: var(--e-2);
  font-family: var(--police-titre-pc);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--blanc);
}

.pied__identite .signature {
  color: var(--blanc);
  margin-bottom: var(--e-2);
}

.pied__identite .signature__mention {
  color: var(--vert-pale);
}

.pied__identite p {
  max-width: 34ch;
  line-height: 1.65;
}

.pied__liste li {
  margin-bottom: 2px;
}

.pied__liste a {
  display: inline-block;
  padding-block: 0.5rem;
  min-height: 2.5rem;
}

.pied__legal {
  padding-top: 1.625rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.78125rem;
  color: var(--vert-de-gris);
}

.pied__legal p {
  max-width: none;
}

@media (min-width: 48em) {
  .pied__grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e-5) var(--e-4);
  }
}

@media (min-width: 62em) {
  .pied__grille {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--e-5);
  }
}


/* =============================================================
   10. EMPLACEMENTS EN ATTENTE
   Tout ce qui est ⟦À VENIR⟧ dans contenus/ est rendu grisé et
   explicitement marqué : jamais de faux contenu réaliste.
   ============================================================= */

.a-venir {
  color: var(--gris-attente);
  font-style: italic;
}

.section--sauge .a-venir,
.section--ardoise .a-venir,
.bandeau .a-venir {
  color: var(--blanc);
}

.reperes__valeur.a-venir {
  color: var(--gris-attente);
}

.bloc-a-venir {
  margin-top: var(--e-2);
  padding: var(--e-3);
  border: 1px dashed var(--filet-appuye);
  background-color: rgba(124, 132, 145, 0.05);
  color: var(--gris-bleute-fonce);
  font-style: italic;
}

.bloc-a-venir p {
  max-width: none;
}

.etiquette-attente {
  display: inline-block;
  margin-bottom: 0.6rem;
  font-family: var(--police-texte);
  font-size: 0.6875rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
}

/* Emplacement photo : gabarit visuel, sans image de banque. */
.photo-attente {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: var(--e-3);
  background-color: rgba(124, 132, 145, 0.08);
  border: 1px dashed var(--filet-appuye);
  color: var(--gris-bleute-fonce);
  font-size: var(--t-petit);
  font-style: italic;
  text-align: center;
}

.section--sauge .photo-attente,
.bandeau .photo-attente {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: var(--filet-blanc);
  color: rgba(255, 255, 255, 0.9);
}

.section--sauge .etiquette-attente,
.bandeau .etiquette-attente {
  color: var(--creme);
}

.photo-attente--portrait {
  aspect-ratio: 3 / 4;
}

.photo-attente--paysage {
  aspect-ratio: 3 / 2;
}

/* Bandeau propre à la page de démonstration (jamais en production). */
.bandeau-demo {
  background-color: var(--sauge-encre);
  color: var(--blanc);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.bandeau-demo p {
  max-width: none;
  padding-block: 0.7rem;
}

.bandeau-demo .a-venir {
  color: var(--creme);
}

/* --- Photo posée simplement dans une grille ------------------ */
.photo-simple img {
  width: 100%;
  height: auto;
}

/* --- Citation isolée (une seule par section) ----------------- */
.citations--seule {
  grid-template-columns: minmax(0, 1fr);
  max-width: 46rem;
  margin-top: var(--e-5);
}

/* --- Repères sans aplat : simple filet, dans le flux --------- */
.reperes--nu {
  background: none;
  border-bottom: 0;
  margin-top: var(--e-4);
}

.reperes--nu .reperes__liste {
  padding-bottom: 0;
}

.reperes--nu .reperes__libelle {
  max-width: none;
  color: var(--ardoise-doux);
}

/* --- Encadré sobre (sans liseré latéral) --------------------- */
.encadre {
  margin-top: var(--e-4);
  padding: var(--e-3);
  background-color: var(--creme);
  max-width: 46rem;
}

/* Sous une grille de colonnes, l'encadré récapitule : il prend alors
   toute la largeur, sinon il paraît tronqué. */
.profils + .encadre {
  max-width: none;
  padding: var(--e-3) var(--e-4);
}

.section--creme .encadre {
  background-color: var(--blanc);
}

.encadre p {
  font-size: var(--t-petit);
  color: var(--ardoise-doux);
}

/* --- Liste détaillée : intitulé fort puis explication -------- */
.liste-detail {
  display: grid;
  gap: 0;
  margin-top: var(--e-4);
  max-width: 46rem;
  border-top: 1px solid var(--filet);
}

.liste-detail > li {
  padding-block: var(--e-3);
  border-bottom: 1px solid var(--filet);
}

.liste-detail strong {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--police-texte);
  font-size: 1.0625rem;
  font-weight: 600;
}

.liste-detail p {
  font-size: var(--t-petit);
  color: var(--ardoise-doux);
}

/* --- Variante claire de la frise ----------------------------- */
.frise--claire {
  --fond-frise: var(--blanc);
}

.section--creme .frise--claire {
  --fond-frise: var(--creme);
}

.frise--claire::before {
  background-color: var(--filet);
}

.frise--claire .frise__etape::before {
  border-color: var(--sauge);
  background-color: var(--fond-frise);
  color: var(--sauge-profond);
}

.frise--claire .frise__texte {
  color: var(--ardoise-doux);
}

/* --- Récit chronologique (Notre histoire) -------------------- */
.recit-dates {
  display: grid;
  gap: var(--e-4);
  max-width: 46rem;
  margin-top: var(--e-4);
}

.recit-dates__etape {
  padding-top: var(--e-3);
  border-top: 1px solid var(--filet);
}

.recit-dates__jalon {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--police-titre);
  font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.625rem);
  line-height: 1.2;
  color: var(--sauge-profond);
}

.recit-dates p {
  color: var(--ardoise-doux);
}

/* --- Deux portraits côte à côte (« Qui fait quoi ») ---------- */
.duo-portraits {
  display: grid;
  gap: var(--e-4);
  margin-top: var(--e-4);
}

.portrait__image img,
.portrait__image .photo-attente {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.portrait__nom {
  margin-top: var(--e-2);
  margin-bottom: 0.35rem;
  font-family: var(--police-titre);
  font-size: 1.375rem;
  line-height: 1.2;
}

.portrait__role {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sauge-profond);
}

.portrait p {
  font-size: var(--t-petit);
  color: var(--ardoise-doux);
}

/* Photo large d'équipe, posée sobrement. */
.photo-equipe {
  margin-bottom: var(--e-4);
}

.photo-equipe img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 30%;
}

/* --- Bande de portraits de l'équipe -------------------------- *
 * Sur mobile : défilement horizontal doux, avec accroche.
 * Au-delà : grille de quatre colonnes.                          */
.equipe {
  margin-top: var(--e-4);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 45%;
  gap: var(--e-2);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: var(--e-2);
  overscroll-behavior-x: contain;
}

.equipe__membre {
  scroll-snap-align: start;
}

.equipe__membre img,
.equipe__membre .photo-attente {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}

.equipe__prenom {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ardoise);
}

@media (min-width: 34em) {
  .equipe {
    grid-auto-columns: 30%;
  }
}

@media (min-width: 48em) {
  .duo-portraits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e-5);
  }

  .equipe {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-columns: auto;
    gap: var(--e-3) var(--e-2);
    overflow-x: visible;
  }
}

@media (min-width: 62em) {
  .recit-dates {
    gap: var(--e-5);
  }
}

/* --- Pages de texte suivi (mentions légales, confidentialité) --- */
.page-legale {
  max-width: 46rem;
}

.page-legale h2 {
  margin-top: var(--e-5);
  margin-bottom: var(--e-2);
  font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.625rem);
}

.page-legale h3 {
  margin-top: var(--e-3);
  margin-bottom: 0.35rem;
  font-family: var(--police-texte);
  font-size: 1.0625rem;
  font-weight: 600;
}

.page-legale p + p {
  margin-top: var(--e-2);
}

.page-legale ul {
  margin-top: var(--e-2);
  display: grid;
  gap: 0.5rem;
}

.page-legale li {
  padding-left: 1.125rem;
  position: relative;
}

.page-legale li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 1px;
  background-color: var(--sauge);
}

/* --- Page 404 --- */
.page-erreur {
  max-width: 40rem;
  padding-block: var(--e-5);
}

.page-erreur__code {
  display: block;
  font-family: var(--police-titre);
  font-size: clamp(3.5rem, 2rem + 6vw, 6rem);
  line-height: 1;
  color: var(--sauge);
}

/* Mention de statut pour les pages encore à valider par Maxime. */
.mention-proposition {
  margin-top: var(--e-5);
  padding: var(--e-2) var(--e-3);
  border-left: 0;
  border-top: 1px solid var(--filet);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--gris-bleute-fonce);
  padding-left: 0;
  padding-right: 0;
}

.mention-proposition p {
  max-width: 60ch;
}

.theme-faq + .theme-faq {
  margin-top: var(--e-5);
}

.theme-faq__titre {
  font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.625rem);
}

.demo-groupe {
  margin-top: var(--e-5);
}

.demo-groupe > h3 {
  margin-bottom: var(--e-2);
  font-family: var(--police-texte);
  font-size: 1.0625rem;
  font-weight: 600;
}

.demo-groupe > .appels:first-of-type {
  margin-top: 0;
}

code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.9em;
}


/* =============================================================
   11. ACCESSIBILITÉ, MOUVEMENT RÉDUIT, IMPRESSION
   ============================================================= */

:focus-visible {
  outline: 2px solid var(--sauge-profond);
  outline-offset: 3px;
}

.section--sauge :focus-visible,
.section--ardoise :focus-visible,
.bandeau :focus-visible,
.pied :focus-visible,
.annonce :focus-visible {
  outline-color: var(--lime);
}

.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.9rem 1.5rem;
  background-color: var(--ardoise);
  color: var(--blanc);
  text-decoration: none;
}

.evitement:focus {
  left: 0;
}

.hors-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .annonce,
  .entete,
  .declencheur,
  .navigation,
  .bandeau,
  .bandeau-demo {
    display: none !important;
  }

  body {
    color: #000;
    font-size: 11pt;
  }

  .section {
    padding-block: 1rem;
    background: none !important;
    color: #000 !important;
  }

  .accordeon__reponse {
    display: block !important;
  }
}