/* ==========================================================================
   POLICES — hébergées localement (assets/fonts/)

   Sous-ensemble latin uniquement : il couvre les accents français, « », œ
   et le tiret cadratin. Fraunces et Hanken Grotesk sont les fichiers
   variables — un seul fichier par style au lieu d'un par graisse, et l'axe
   optique de Fraunces reste disponible (font-optical-sizing: auto).
   Caveat est réduit aux sept lettres du mot « bonjour », son seul usage.

   Pour mettre à jour : récupérer les woff2 sur Google Fonts en sous-ensemble
   latin, puis pour Caveat
     python3 -m fontTools.subset caveat.woff2 --text="bonjour" --flavor=woff2
   ========================================================================== */

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-normal.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: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/fraunces-normal.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: 'Fraunces';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/fraunces-italic.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;
}

/* Raleway ne sert qu'au logo : le fichier est réduit aux seules lettres de
   « Telosie » et de sa signature, 4,6 Ko contre 21 Ko pour la police entière.
   Ajouter un mot au lockup demande de relancer `outils/police-logo.py`. */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/raleway-logo.woff2') format('woff2');
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/caveat.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;
}

/* ==========================================================================
   Evelyne Rubaudo — Coach professionnelle
   Feuille de styles unique. Organisation :
     1. Tokens        2. Reset       3. Base
     4. Layout        5. Composants  6. Responsive
   ========================================================================== */

/* 1. TOKENS ================================================================ */

/* ==========================================================================
   PALETTE — alignée sur la charte du logo Telosie

   Le seul bloc à modifier pour changer l'habillage du site : tout le reste
   de la feuille, y compris les traits, les voiles et les dégradés, en est
   dérivé. Aucune valeur de couleur n'est écrite ailleurs.

   Toute la gamme dérive de la teinte du sauge du logo (94°) : crème en fond,
   encre en texte, et des verts olive du plus clair au plus sombre. Le doré
   reste la couleur d'action, réservée aux boutons.

   Valeurs de référence : colors.md, à la racine du dépôt. Pour essayer une
   autre palette, remplacer les valeurs ci-dessous en conservant les rôles
   (un fond clair reste clair, un texte sur fond sombre reste clair).
   ========================================================================== */

:root {
  /* --- Fonds --- */
  --c-paper:        #F6F4EC; /* crème, fond clair principal */
  --c-green-deep:   #37422E; /* portrait, boutons, accents */
  --c-green-dark:   #28543F; /* sections offres et lectures, réservation */
  --c-green-black:  #141910; /* pied de page */
  --c-black:        #0C100A; /* aplats les plus sombres */
  --c-mint:         #DFE8D8; /* fond des témoignages */

  /* --- Texte sur fond clair --- */
  --c-ink:          #2B2F26; /* encre, texte principal — 12,5:1 sur le crème */
  --c-pine:         #414C39; /* corps de texte long — 8,2:1 */
  --c-fern:         #4B5841; /* réponses de la FAQ — 6,9:1 */
  --c-moss:         #556549; /* tout le secondaire — 5,7:1, 5,0:1 sur le mint */
  /* Le sauge est la couleur du symbole du logo. Il ne porte plus de texte :
     à 4,1:1 sur le crème et 3,6:1 sur le vert pâle des témoignages, il passait
     sous le seuil partout où il servait — dates, temps de lecture, libellés.
     C'est le moss qui a repris ces rôles. */
  --c-sage:         #6B7C5E;

  /* --- Texte sur fond foncé ---
     Les deux fonds sombres n'ont pas la même exigence : sur le noir-vert du
     pied de page tout passe largement, mais le vert des sections est monté en
     luminosité et n'accorde plus que 7,6:1 au texte le plus clair. Les teintes
     ci-dessous sont calées sur ce vert-là, le plus contraignant des deux. */
  --c-light:        #EDF1EA; /* 7,6:1 sur le vert des sections */
  --c-light-mint:   #DDE6D6; /* 6,7:1 */
  --c-light-ice:    #CBD7C1; /* 5,8:1 */
  --c-light-teal:   #B5CDA1; /* 5,0:1 — libellés de section */
  --c-light-sage:   #B1C0A5; /* 4,5:1 — pied de page seulement */
  --c-light-mist:   #ACBAA0; /* 4,2:1 — hors du vert des sections */

  /* --- Accent --- */
  --c-gold:         #CF9530;

  /* --- Dégradés : livres et vignettes du blog --- */
  --c-grad-teal:      #45B077;
  --c-grad-teal-soft: #408263;
  --c-grad-teal-pale: #69BF8B;
  --c-grad-moss:      #1F472F;
  --c-grad-forest:    #0E2519;
  --c-grad-pine:      #0D2118;
  --c-grad-night:     #0F130C;

  /* --- Voile du héro et ombres --- */
  --c-scrim:  #171A12; /* dégradé sombre au bas de la photo du héro */
  --c-shadow: #000;

  /* Le doré et le sauge sont appliqués tels quels, comme le demande la
     charte. Sur le crème ils donnent 2,4:1 et 4,1:1, sous le seuil WCAG AA
     de 4,5:1 pour du texte — décision assumée, voir le README. Sur le vert
     des sections, le doré tombe à 3,3:1 : il y tient les traits, les puces et
     les boutons, où le seuil des éléments graphiques (3:1) s'applique, et
     laisse le texte au vert clair. Il reste bon en texte sur le pied de page
     (6,8:1). */

  /* --- Traits et voiles, dérivés de la palette ------------------------------
     color-mix évite de figer les composantes RVB dans des rgba() : changer
     --c-ink ou --c-light met à jour toutes les bordures d'un coup. */
  --line-dark:      color-mix(in srgb, var(--c-ink) 15%, transparent);
  --line-dark-soft: color-mix(in srgb, var(--c-ink) 10%, transparent);
  --line-dark-fine: color-mix(in srgb, var(--c-ink) 12%, transparent);
  --line-light:     color-mix(in srgb, var(--c-light) 18%, transparent);
  --line-pill:      color-mix(in srgb, var(--c-light) 25%, transparent);

  /* --- Typographie --- */
  --font-serif:  'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans:   'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-script: 'Caveat', 'Brush Script MT', cursive;
  --font-logo:   'Raleway', var(--font-sans);

  /* Échelle fluide : interpolation linéaire entre les bornes mobile et
     desktop du design, ce qui supprime les sauts de taille aux breakpoints. */
  --fs-h1:         clamp(1.75rem,   0.60rem + 2.90vw, 3.25rem);  /* 28 → 52 */
  --fs-h2:         clamp(1.625rem,  0.59rem + 2.40vw, 2.75rem);  /* 26 → 44 */
  /* Dans le héro, l'accroche passe devant ; la citation vient juste après,
     assez grande pour se lire d'un coup d'œil, assez en dessous de l'accroche
     pour ne pas lui disputer la première place. */
  --fs-hero-tagline: clamp(1.375rem,  0.71rem + 1.69vw, 2.25rem);  /* 22 → 36 */
  --fs-hero-quote:   clamp(1.1875rem, 0.79rem + 1.02vw, 1.75rem);  /* 19 → 28 */
  --fs-quote:      clamp(1.1875rem, 0.50rem + 1.67vw, 2.00rem);  /* 19 → 32 */
  --fs-h3:         1.5625rem;  /* 25 */
  --fs-body:       1.03125rem; /* 16.5 */
  --fs-sm:         0.90625rem; /* 14.5 */
  --fs-xs:         0.8125rem;  /* 13 */
  --fs-label:      0.75rem;    /* 12 */

  /* --- Rythme --- */
  --pad-x: 72px;  /* marge latérale minimale des sections */
  --pad-y: 110px; /* marge verticale des sections */

  /* Largeur utile maximale. Au-delà, la marge latérale grandit au lieu du
     contenu : sans elle, les titres de section s'étirent sur 1700 px d'une
     seule ligne et les fonds pleine largeur restent, eux, pleine largeur. */
  --content-max: 1360px;
  --pad-inline: max(var(--pad-x), (100% - var(--content-max)) / 2);

  /* --- Divers --- */
  --nav-h: 88px;
  /* Hauteur du héro. Elle grandit avec la largeur, et c'est tout l'enjeu :
     `cover` cale la photo sur la largeur du cadre, si bien qu'un héro de
     hauteur fixe montre une tranche d'autant plus mince que l'écran est
     large. À 680 px figés, un écran de 1900 px n'en laissait voir que 54 % —
     le paysage y paraissait zoomé, l'horizon coupé.

     46vw maintient la part visible autour de 70 % quelle que soit la
     largeur ; le plancher préserve la hauteur d'avant sur un portable, et
     85svh interdit au héro d'occuper tout l'écran — sur un téléphone à
     l'horizontale, le visiteur ne verrait que la photo, sans indice qu'il y a
     un site en dessous.

     La parallaxe se sert de cette même variable pour caler sa course sur la
     sortie d'écran de la photo : les deux ne peuvent pas diverger. */
  --hero-h-min: 680px;
  --hero-h: min(max(var(--hero-h-min), 46vw), 85svh);
  --radius-arch: 220px;
  --shadow-card: 0 30px 70px -30px color-mix(in srgb, var(--c-shadow) 50%, transparent);
  --ease: cubic-bezier(.4, 0, .2, 1);
}

@media (max-width: 900px) {
  :root { --pad-x: 32px; --pad-y: 64px; --nav-h: 72px; --hero-h-min: 600px; }
}
@media (max-width: 600px) {
  :root { --pad-x: 20px; --pad-y: 48px; --nav-h: 68px; --hero-h-min: 540px; }
}

/* 2. RESET ================================================================= */

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

body, h1, h2, h3, h4, p, figure, blockquote, ul, ol {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

img, svg { display: block; max-width: 100%; }

button { font: inherit; color: inherit; }

/* 3. BASE ================================================================== */

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Les bandes pleine largeur d'un article (voir `.encadre`) se calent sur
     100vw, qui compte la barre de défilement : sans quoi elles débordent de
     quelques pixels et le site glisse latéralement. `clip` plutôt que
     `hidden`, qui priverait la barre de navigation de son `sticky`. */
  overflow-x: clip;
}

body {
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.serif {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
}

a { color: inherit; text-decoration: none; }

/* Anneau de focus : currentColor s'adapte automatiquement aux sections
   claires comme sombres, sans avoir à le redéclarer partout. */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Compense la navigation collante lors d'un saut d'ancre. */
:target,
section[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

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

.skip-link {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -110%);
  z-index: 100;
  padding: 12px 24px;
  background: var(--c-green-deep);
  color: var(--c-light);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* 4. LAYOUT ================================================================ */

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

/* Les sections qui portent déjà leur propre max-width reviennent à la marge
   simple. Dans --pad-inline, le pourcentage se calcule sur le bloc parent
   (le body) et non sur l'élément : appliqué à un bloc de 640 px, il en
   retirerait presque toute la largeur utile. */
.article,
.faq,
.legal,
.error-page {
  padding-inline: var(--pad-x);
}

.section--paper { background: var(--c-paper); }
.section--dark  { background: var(--c-green-dark); color: var(--c-light); }

/* Bandeau d'accroche : label doré + titre + chapô */
/* Un cran au-dessus des autres libellés : celui-ci annonce une section, il
   doit se lire de loin malgré ses capitales et son interlettrage. */
.eyebrow {
  font-size: 0.875rem;
  letter-spacing: .18em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 18px;
}
/* Sur le vert des sections, le doré n'atteint plus 3,3:1 : le libellé y passe
   au vert clair, et le doré reste au trait qui ferme l'en-tête. */
.section--dark .eyebrow,
.contact .eyebrow { color: var(--c-light-teal); }

.section-title {
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.2px;
  text-wrap: balance;
}

.lede {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--c-moss);
}
.section--dark .lede { color: var(--c-light-ice); }

/* Boutons ------------------------------------------------------------------ */

.btn {
  display: inline-block;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease);
}

.btn--outline {
  border: 1px solid var(--c-gold);
  color: var(--c-gold);
  padding: 15px 30px;
  font-size: var(--fs-xs);
  align-self: flex-start;
}
.btn--outline:hover {
  background: var(--c-gold);
  color: var(--c-paper);
}

.btn--solid {
  display: block;
  background: var(--c-gold);
  color: var(--c-ink);
  padding: 18px 32px;
  font-size: 0.90625rem;
  letter-spacing: .02em;
  text-transform: none;
  border-radius: 2px;
  text-align: center;
  transition: background-color .2s var(--ease);
}
.btn--solid:hover { background: color-mix(in srgb, var(--c-gold) 82%, black); }

/* Variante qui ne prend que la largeur de son texte, pour les boutons
   posés dans une colonne de contenu plutôt que dans une carte. */
.btn--auto {
  display: inline-block;
  align-self: flex-start;
  padding: 15px 30px;
}

/* Médaillon de numérotation romaine ---------------------------------------- */

.medallion {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--font-serif);
  font-style: italic;
  border: 1px solid var(--c-green-deep);
  color: var(--c-green-deep);
  background: var(--c-paper);
  width: 40px; height: 40px;
  font-size: 1rem;
  flex-shrink: 0;
}
.medallion--sm {
  width: 30px; height: 30px;
  font-size: 0.8125rem;
  border-color: color-mix(in srgb, var(--c-ink) 22%, transparent);
  background: none;
}
.medallion--on-dark {
  width: 34px; height: 34px;
  font-size: 0.875rem;
  border-color: color-mix(in srgb, var(--c-light) 35%, transparent);
  color: var(--c-light-mint);
  background: none;
}

/* 5. COMPOSANTS ============================================================ */

/* 5.1 Navigation ----------------------------------------------------------- */

/* Le collage porte sur le <header> : un élément sticky ne peut pas dépasser
   les limites de son parent, et le header a exactement la hauteur de la nav. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
}

.nav {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 26px var(--pad-inline);
  background: color-mix(in srgb, var(--c-paper) 96%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-dark-soft);
  transition: box-shadow .25s var(--ease);
}
.nav.is-scrolled { box-shadow: 0 6px 24px -18px color-mix(in srgb, var(--c-shadow) 70%, transparent); }

.nav__brand { flex-shrink: 0; line-height: 1.2; }

/* Le logo : du texte, pas une image ---------------------------------------

   Il a longtemps été un SVG aux contours vectorisés — la police du nom était
   sous licence et ne pouvait pas être servie. Raleway étant libre, le texte
   reprend ses droits : 4,6 Ko de police sous-ensemblée contre 13 Ko de
   chemins par variante, une couleur et un corps qui se règlent en CSS, un nom
   qui se sélectionne, se lit à voix haute et se traduit en gras dans les
   résultats de recherche.

   Le nom est centré sur sa signature, plus large que lui. L'interlettrage
   pose un blanc après la dernière lettre, y compris la dernière du mot : sans
   le `text-indent` qui le compense, les deux lignes paraîtraient décalées
   vers la gauche. */
.marque {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: var(--font-logo);
  line-height: 1;
  white-space: nowrap;
}
/* L'interlettrage étire le nom jusqu'à la largeur exacte de sa signature —
   0.664em, mesuré, pas choisi. La valeur ne tient que si le rapport des deux
   corps ne bouge pas : la signature est donc une fraction du nom (11/21) au
   lieu d'une taille à elle, et `--marque-corps` pilote les deux. Changer ce
   rapport ou l'interlettrage de la signature demande de reprendre les .664. */
.marque__nom {
  font-size: var(--marque-corps, 1.3125rem);
  font-weight: 500;
  letter-spacing: .664em;
  text-indent: .664em;
  text-transform: uppercase;
  color: var(--marque-teinte, var(--c-gold));
}
/* Le nom seul, sans sa signature : plus rien à centrer, et le `text-indent`
   n'a plus qu'un effet, décaler le mot vers la droite. Dans le héro, il
   écartait « TELOSIE » de l'accroche et du bouton alignés sous lui, d'un
   demi-espace de lettre — assez pour que l'à-plomb se voie. */
.marque__nom:only-child { text-indent: 0; }
.marque__signature {
  font-size: calc(var(--marque-corps, 1.3125rem) * .524);
  font-weight: 500;
  letter-spacing: .1em;
  text-indent: .1em;
  color: var(--marque-teinte-signature, var(--c-moss));
}

.nav__links {
  display: flex;
  align-items: center;
  column-gap: 22px;
  row-gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 1;
  min-width: 0;
}
.nav__link {
  font-size: var(--fs-xs);
  white-space: nowrap;
  position: relative;
  padding: 4px 0;
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current='true']::after { transform: scaleX(1); }

.nav__cta {
  background: var(--c-gold);
  color: var(--c-ink);
  border: 1px solid var(--c-gold);
  padding: 9px 18px;
  font-size: 0.78125rem;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.nav__cta:hover {
  background: color-mix(in srgb, var(--c-gold) 82%, black);
  border-color: color-mix(in srgb, var(--c-gold) 82%, black);
}

.nav__toggle {
  display: none;
  position: relative; /* référence de positionnement des deux barres */
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--c-ink);
  cursor: pointer;
  flex-shrink: 0;
}
.nav__toggle-bars,
.nav__toggle-bars::before,
.nav__toggle-bars::after {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--c-ink);
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.nav__toggle-bars::before,
.nav__toggle-bars::after { content: ''; position: absolute; }
.nav__toggle-bars::before { transform: translateY(-6px); }
.nav__toggle-bars::after  { transform: translateY(6px); }

.nav__toggle[aria-expanded='true'] .nav__toggle-bars { background: transparent; }
.nav__toggle[aria-expanded='true'] .nav__toggle-bars::before { transform: rotate(45deg); }
.nav__toggle[aria-expanded='true'] .nav__toggle-bars::after  { transform: rotate(-45deg); }

/* 5.2 Héro ----------------------------------------------------------------- */

.hero {
  position: relative;
  /* Plancher, croissance et plafond sont tous les trois dans `--hero-h`, au
     plus près de leur justification. */
  height: var(--hero-h);
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Cadrage centré, celui d'où part la parallaxe plus bas. */
  object-position: 50% 50%;
  /* Pas de retournement : dans cette photographie l'arbre se tient déjà à
     droite du cadre et laisse la gauche au rideau de peupliers et à son
     reflet, où se posent le titre et la citation. La version précédente,
     cadrée à l'envers, se retournait ici. */
  /* Aucun filtre : les photographies gardent leurs couleurs d'origine. Ce sont
     les dégradés — voile du héro, vignettes, livres — qui portent la charte. */
  background: linear-gradient(160deg, var(--c-green-deep), var(--c-green-black));
}

/* Parallaxe : la photo descend plus lentement que la page, le voile et le
   texte restent solidaires du cadre. Le déplacement est piloté par la barre de
   défilement elle-même — `animation-timeline`, pas d'écouteur de scroll.

   Le cadre ne bouge pas et la photo n'est jamais agrandie : c'est le cadrage
   à l'intérieur du cadre qui glisse, via `object-position`. Le recadrage se
   fait dans la marge que `cover` produit déjà — sur un écran large, la photo
   est dessinée trois cents pixels plus haute que le héro, et ces trois cents
   pixels sont perdus de toute façon. La parallaxe ne fait que les parcourir.

   Conséquence, et c'est le but : aucun pixel de la photographie n'est
   sacrifié à l'effet, à aucune largeur. Là où `cover` ne laisse pas de marge
   verticale — un téléphone à la verticale, où c'est la hauteur qui commande
   le cadrage — la photo reste simplement immobile. L'effet s'efface de
   lui-même là où il coûterait quelque chose.

   Le prix de ce choix : `object-position` n'est pas une propriété que le
   compositeur sait animer seul, contrairement à `transform`. Le héro est donc
   repeint à chaque image le temps qu'il traverse l'écran. C'est un
   million de pixels sur une seule couche, largement dans le budget d'une
   image — mais si la photo devait un jour être remplacée par bien plus lourde,
   c'est ici qu'il faudrait regarder. La variante `transform` existe et glisse
   sur le compositeur, au prix d'un recadrage sur les écrans étroits : c'est
   exactement le compromis qu'on refuse ici.

   Les navigateurs sans `animation-timeline` — Safari 18 et antérieurs,
   Firefox 143 et antérieurs — gardent le héro fixe d'aujourd'hui. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__media {
      animation: hero-parallaxe linear both;
      animation-timeline: scroll(root block);
      /* La course s'achève quand la photo a fini de quitter l'écran. */
      animation-range: 0 var(--hero-h);
    }
  }
}
@keyframes hero-parallaxe {
  from { object-position: 50% 50%; }
  /* 50 % est le cadrage centré, celui d'avant la parallaxe ; y ajouter des
     pixels fait descendre la photo dans son cadre, en retard sur la page qui
     remonte.

     La course est dite en pixels, et non en pourcentage, pour qu'elle vaille
     autant sur un portable que sur un écran large : la marge de `cover`, elle,
     va du simple au double d'un écran à l'autre, et une course proportionnelle
     y serait tantôt imperceptible, tantôt spectaculaire.

     `min(0px, …)` l'arrête au bord haut de la photographie. Attention en
     relisant : la base de ces pourcentages est négative — cadre moins photo —
     si bien que c'est `min` et non `max` qui borne la descente. Quand la marge
     est plus courte que la course, la borne prend le relais et l'effet
     s'atténue de lui-même, jusqu'à disparaître faute de place. */
  to   { object-position: 50% min(0px, calc(50% + 90px)); }
}
.hero__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    /* Voile latéral : les peupliers et leur reflet occupent la gauche du
       cadre, et le rideau doré est ce que la photographie a de plus clair là
       où se posent le titre et la citation. Le voile y est monté de six points
       par rapport à la photo précédente, dont la gauche n'était que du lac, et
       il descend maintenant en trois temps plutôt que deux : le palier de 30 %
       tient la bande du milieu, celle où se lit la ligne d'accroche, sans
       étendre le noir jusqu'à l'arbre. Il s'arrête avant l'arbre et le ciel,
       restés intacts. */
    linear-gradient(90deg,
      color-mix(in srgb, var(--c-scrim) 68%, transparent) 0%,
      color-mix(in srgb, var(--c-scrim) 52%, transparent) 30%,
      color-mix(in srgb, var(--c-scrim) 30%, transparent) 48%,
      transparent 70%),
    /* Voile du bas : porte la citation et raccorde la photo à la page. */
    linear-gradient(0deg,
      color-mix(in srgb, var(--c-scrim) 78%, transparent) 0%,
      color-mix(in srgb, var(--c-scrim) 18%, transparent) 45%,
      transparent 65%);
}

/* Le contenu du héro tient dans une colonne posée sur la photo : le bloc de
   marque se centre dans la hauteur libre, la citation reste ancrée en bas. */
.hero__layer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 48px var(--pad-inline) 56px;
  /* Sur un écran bas, le héro est rogné par max-height et les marges
     automatiques tombent à zéro : cet écart garde l'air entre le bouton et
     la citation. */
  row-gap: clamp(28px, 5vh, 64px);
}
.hero__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 34px;
  /* Centré dans l'espace que la citation lui laisse. */
  margin-block: auto;
}
.hero__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  margin: 0;
}
/* Le voile seul ne suffisait pas au nom de la marque : le doré du logo se
   posait sur le doré des peupliers, deux valeurs voisines, et le mot s'y
   diluait — 2:1 mesuré, là où un élément graphique en demande 3. Assombrir le
   voile jusqu'à l'écart nécessaire aurait éteint le rideau d'arbres, c'est-à-
   dire ce que la photographie a de plus beau à cet endroit.
   L'ombre portée règle le contraste là où il se joue, au bord des lettres, et
   nulle part ailleurs : très diffuse et discrète, elle se lit comme une
   profondeur, pas comme un contour. Le logo est une image, il lui faut
   `drop-shadow`, qui suit le tracé du SVG ; le texte se contente de
   `text-shadow`. */
/* Sur la photographie, le nom est en crème : le doré n'y donnait que 1,9:1,
   deux valeurs voisines où le mot se diluait. */
.hero .marque {
  --marque-corps: clamp(2rem, 4.4vw, 3.5rem);
  --marque-teinte: var(--c-light);
  text-shadow: 0 1px 14px color-mix(in srgb, var(--c-shadow) 62%, transparent);
}
.hero__tagline,
.hero__quote {
  text-shadow: 0 1px 16px color-mix(in srgb, var(--c-shadow) 55%, transparent);
}
.hero__tagline {
  display: block;
  color: var(--c-light);
  font-family: var(--font-serif);
  font-size: var(--fs-hero-tagline);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: .01em;
  text-wrap: balance;
}
.hero__tagline--small {
  margin-top: 6px;
  font-size: clamp(1rem, 0.82rem + 0.7vw, 1.375rem);
}
.hero__content {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 32px;
}
/* Le filet doré reprend celui des citations d'article : il pose la phrase
   comme une citation plutôt que comme une légende, et la détache de la
   photographie sans avoir à l'assombrir davantage. Crème plutôt que crème
   glacée : sur ce fond, la nuance froide la faisait reculer d'un cran. */
.hero__quote {
  max-width: 620px;
  color: var(--c-light);
  font-size: var(--fs-hero-quote);
  font-weight: 400;
  font-style: italic;
  line-height: 1.4;
  letter-spacing: .1px;
  text-align: right;
  text-wrap: balance;
  border-right: 2px solid var(--c-gold);
  padding-right: clamp(18px, 2vw, 26px);
}

/* 5.3 À propos -------------------------------------------------------------- */

/* Deux colonnes dont la seconde commande : le cadre de la photo se cale sur
   la hauteur du texte (voir le bloc `min-width: 1400px` plus bas). En dessous
   de cette largeur la photo reprend ses proportions et les deux colonnes ne
   finissent plus ensemble — les égaler y demanderait de rogner le portrait
   d'un tiers de sa largeur. Le centrage répartit alors l'écart de part et
   d'autre plutôt que de le laisser tomber d'un seul côté. */
.about {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 72px;
  align-items: center;
}
/* La photo garde son format et le vert fait le tour, comme un passe-partout.

   Aucun `aspect-ratio` ici : c'est la photo qui donne sa hauteur au cadre.
   Un rapport écrit en dur obligerait à rogner dès que la photo n'a pas
   exactement celui-là — la source est en 427:640, et non en 4:5 comme le
   cadre le supposait. Changer de photo ne demandera donc rien.

   La marge est plus large en bas qu'en haut, comme sur un encadrement : à
   marges égales, l'ensemble paraît glisser vers le bas. */
.about__frame {
  background: var(--c-green-deep);
  padding: 22px 22px 30px;
}
.about__photo {
  display: block;
  width: 100%;
  height: auto;
}
/* Au-delà de cette largeur, la colonne photo est assez large pour que le
   cadre puisse épouser la hauteur du texte sans que le portrait y perde plus
   de quelques pour cent : les deux colonnes commencent et finissent alors
   exactement ensemble. 1400 px est le seuil sous lequel le texte gagne des
   lignes plus vite que la photo ne gagne en hauteur — le rognage y partirait
   en vrille. */
@media (min-width: 1400px) {
  .about { align-items: stretch; }

  /* Sorti du flux, le cadre ne pèse plus sur la hauteur de la ligne : c'est
     le texte qui la fixe, et la photo vient la remplir — sans quoi les deux
     colonnes se renverraient leur hauteur l'une à l'autre et la plus haute
     l'emporterait toujours. */
  .about__media { position: relative; }
  .about__frame { position: absolute; inset: 0; }

  /* Le <picture> est en ligne par défaut : sans ce display, la hauteur ne
     descendrait pas du cadre jusqu'à l'image. */
  .about__frame picture { display: block; height: 100%; }

  /* `cover` remplit le cadre quelle que soit sa hauteur, et `top` choisit ce
     qu'on sacrifie : le rognage se prend en bas de l'image, jamais sur le
     visage. */
  .about__photo {
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }
}

.about__body { display: flex; flex-direction: column; }

.about__hello {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.about__hello::before {
  content: '';
  width: 44px; height: 1px;
  background: var(--c-gold);
}
.about__hello span {
  font-family: var(--font-script);
  font-size: 1.875rem;
  font-weight: 600;
  color: var(--c-gold);
  line-height: 1;
}

.about__title {
  font-size: clamp(1.375rem, 0.94rem + 1.4vw, 2rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.3px;
  margin-bottom: 24px;
  text-wrap: balance;
}
.about__text {
  line-height: 1.8;
  color: var(--c-pine);
  /* 660 plutôt que 500 : la colonne était étroite pour le texte qu'elle porte,
     et le paragraphe s'y étirait en hauteur bien au-delà du portrait. Les deux
     colonnes se terminent maintenant à quelques pixels près à la même hauteur
     — c'est de là que viennent aussi les 0.85fr / 1.15fr de la grille. */
  max-width: 660px;
  margin-bottom: 16px;
}
.about__text:last-of-type { margin-bottom: 36px; }

/* Deux actions côte à côte : prendre rendez-vous, ou lire la version longue
   du parcours avant de se décider. */
.about__actions {
  display: flex;
  flex-wrap: wrap;
  /* Les deux boutons prennent la hauteur du plus grand plutôt que chacun la
     sienne. Ils ne l'avaient pas : `.btn--auto` ramène le bouton plein à 15 px
     de rembourrage quand le contour en garde 18, plus son trait d'un pixel de
     chaque côté — huit pixels d'écart, visibles côte à côte. Les égaliser par
     le calcul tiendrait jusqu'à la prochaine retouche de police ou de
     rembourrage ; `stretch` les tient tout court. */
  align-items: stretch;
  gap: 14px;
}
.about__actions .btn {
  /* `.btn--outline` et `.btn--auto` posent tous deux `align-self: flex-start`,
     utile dans les colonnes où ils servent ailleurs — ici, il annulerait le
     `stretch` du conteneur. */
  align-self: stretch;
  /* Étirés, les boutons ne centreraient plus leur texte : leur boîte grandit,
     pas leur ligne. Le flex le recentre dans la hauteur. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Aligné sur le bouton doré qu'il accompagne : même corps, même hauteur, pas
   de capitales — seul le remplissage les distingue. */
.about__actions .btn--outline {
  border-color: color-mix(in srgb, var(--c-ink) 30%, transparent);
  color: var(--c-ink);
  padding: 18px 28px;
  font-size: 0.90625rem;
  letter-spacing: .02em;
  text-transform: none;
  border-radius: 2px;
}
.about__actions .btn--outline:hover {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-paper);
}

/* 5.4 Références clients ---------------------------------------------------- */

.clients {
  padding: 36px var(--pad-inline);
  border-bottom: 1px solid var(--line-dark-soft);
}
.clients__title {
  text-align: center;
  font-size: 0.6875rem;
  letter-spacing: .18em;
  color: var(--c-moss);
  font-weight: 600;
  margin-bottom: 22px;
  text-transform: uppercase;
}
.clients__list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 56px;
  flex-wrap: wrap;
}
.clients__item { opacity: .6; }

/* Hauteur imposée, largeur libre : les quatre logos n'ont pas le même
   rapport de forme, c'est la hauteur des lettres qui doit s'aligner.
   Les fichiers sont monochromes, dans --c-ink sur --c-paper (voir README
   si la palette change). */
.clients__logo {
  height: 26px;
  width: auto;
  max-width: 160px;
}
/* Équilibrage optique : à hauteur de boîte égale, un mot tout en capitales
   pèse plus lourd qu'un logo en bas-de-casse ou en petites capitales. */
.clients__logo[src*="vinci"]    { height: 30px; }
.clients__logo[src*="novartis"] { height: 23px; }
.clients__logo[src*="bull"]     { height: 27px; }

/* 5.5 Méthode --------------------------------------------------------------- */

/* Deux sections crème qui se suivent se lisaient comme un seul bloc : un
   filet très pâle marque le passage sans peser. */
.section--paper + .section--paper { border-top: 1px solid var(--line-dark-soft); }

.method__intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 70px;
}
.method__intro .lede { font-size: 1rem; line-height: 1.8; }
.method__intro .section-title { margin-bottom: 34px; }

/* Court trait doré fermant l'en-tête d'une partie, comme sous la promesse de
   chaque accompagnement : il détache l'annonce de ce qu'elle introduit. */
.method__intro::after,
.tools__intro::after {
  content: '';
  display: block;
  width: 34px;
  height: 2px;
  margin: 36px auto 0;
  background: var(--c-gold);
}

.principles {
  /* Hauteur réservée aux titres, sur laquelle se cale le trait qui les
     souligne tous les trois. À ajuster si un titre passait sur deux lignes. */
  --hauteur-titre: 40px;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  position: relative;
  margin-bottom: 96px;
}
/* Trait horizontal courant sous les trois titres : il sépare les intitulés de
   leurs explications et tient la rangée ensemble. */
.principles::before {
  content: '';
  position: absolute;
  top: var(--hauteur-titre); left: 16.5%; right: 16.5%;
  height: 1px;
  background: var(--line-dark);
}
.principle { text-align: center; position: relative; }
.principle h3 {
  font-size: 1.125rem;
  font-weight: 600;
  height: var(--hauteur-titre);
  margin-bottom: 28px;
}
.principle p {
  font-size: var(--fs-sm);
  color: var(--c-moss);
  line-height: 1.75;
  max-width: 230px;
  margin-inline: auto;
}

/* Les outils forment une partie à part : le filet est doublé d'un large
   blanc, faute de quoi ils se lisaient dans la foulée des principes. */
.tools {
  border-top: 1px solid var(--line-dark);
  padding-top: 88px;
}
.tools__intro { text-align: center; max-width: 720px; margin: 0 auto 48px; }
/* Doré comme les autres libellés de section : le vert profond le rangeait
   avec les titres alors qu'il annonce une section. */
.tools__intro .eyebrow { margin-bottom: 18px; }
/* Cette phrase porte le sens de toute la partie : elle est traitée comme le
   titre de la section, un cran en dessous, plutôt que dans le même petit
   corps que le texte des cartes qu'elle annonce. */
.tools__intro .lede {
  font-family: var(--font-serif);
  font-size: clamp(1.4375rem, 0.95rem + 1.35vw, 2rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -.2px;
  color: var(--c-ink);
  text-wrap: balance;
}

.tools__carrousel { position: relative; }

.tools__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}

/* Chaque discipline est une carte traitée comme les vignettes du carnet : fond
   vert profond, halo de la teinte des dégradés dans l'angle et arcs
   concentriques rappelant l'arche du portrait. Le halo reste cantonné au coin
   haut-droit, laissé vide : posé sur le corps de la carte, il ramènerait le
   texte crème sous le seuil de lisibilité.

   La charte compte trois dégradés, pas un : ils tournent d'une carte à
   l'autre comme ils tournent d'une catégorie du carnet à l'autre. Cinq outils,
   trois paires, et aucune couleur répétée d'une carte à sa voisine. */
.tool {
  position: relative;
  overflow: hidden;
  padding: 26px 24px 30px;
  border-radius: 4px;
  color: var(--c-light);
}
/* Les arcs se posent sur le dégradé, le contenu par-dessus les deux. */
.tool::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'><g fill='none' stroke='%23EDF1EA' stroke-opacity='0.09' stroke-width='2'><circle cx='370' cy='322' r='165'/><circle cx='370' cy='322' r='231'/><circle cx='370' cy='322' r='297'/><circle cx='370' cy='322' r='363'/></g></svg>") center / cover no-repeat;
}
.tool > * { position: relative; }

.tool--1 {
  background:
    radial-gradient(circle at 90% 4%,
                    color-mix(in srgb, var(--c-grad-teal) 72%, transparent) 0%,
                    transparent 52%),
    linear-gradient(150deg, var(--c-grad-forest), var(--c-grad-night));
}
.tool--2 {
  background:
    radial-gradient(circle at 90% 4%,
                    color-mix(in srgb, var(--c-grad-teal-soft) 78%, transparent) 0%,
                    transparent 52%),
    linear-gradient(150deg, var(--c-grad-pine), var(--c-grad-night));
}
.tool--3 {
  background:
    radial-gradient(circle at 90% 4%,
                    color-mix(in srgb, var(--c-grad-teal-pale) 68%, transparent) 0%,
                    transparent 52%),
    linear-gradient(150deg, var(--c-grad-moss), var(--c-grad-forest));
}

/* Organisme et période : la matière la plus concrète de chaque discipline,
   annoncée avant le titre comme les libellés de section. */
.tool__repere {
  font-size: 0.6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--c-gold);
  margin-bottom: 10px;
}
/* Le doré est réservé au texte large sur le vert des sections (3,3:1), mais le
   fond des cartes d'outils est bien plus sombre — le vert nuit du dégradé lui
   rend 6,2:1, largement au-dessus du seuil pour ce corps-là. */
.tool h4 {
  font-size: 0.96875rem;
  font-weight: 600;
  color: var(--c-gold);
  margin-bottom: 8px;
}
.tool p {
  font-size: 0.84375rem;
  line-height: 1.65;
  color: var(--c-light-mint);
}

/* Carrousel des outils -------------------------------------------------------
   Cinq disciplines alignées se lisaient comme une liste où rien ne ressort.
   Elles deviennent des cartes dont une seule est mise en avant, les autres
   s'éloignant en s'amenuisant. La classe est posée par le JS : sans lui, la
   grille ci-dessus reste en place et tout demeure lisible. */

.tools__carrousel.is-carrousel .tools__grid {
  display: block;
  position: relative;
  /* La hauteur de la carte, plus la place que réclame son ombre portée. */
  height: 390px;
  overflow: hidden;
  /* Les cartes de bord s'effacent au lieu d'être tranchées net. */
  mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
}

.is-carrousel .tool {
  position: absolute;
  top: 0;
  left: 50%;
  /* La largeur commande tout le reste : l'écart entre deux cartes est calculé
     dessus dans main.js (`ECART`), les deux doivent bouger ensemble. */
  width: 400px;
  margin-left: -200px;
  /* Hauteur commune : sans elle, la carte du centre changerait de taille à
     chaque rotation, au gré de la longueur des textes. */
  height: 325px;
  padding: 32px 30px;
  /* Contour et ombre franches : empilées, deux cartes voisines se lisaient
     comme une seule surface. Le trait est clair, comme le texte : sur le vert
     profond, un contour d'encre disparaissait. */
  border: 1px solid color-mix(in srgb, var(--c-light) 14%, transparent);
  box-shadow: 0 12px 22px -20px var(--c-shadow);
  cursor: pointer;
}
/* Voile crème dosé par la distance au centre, que le JS inscrit dans
   `--loin`. Les cartes restent opaques : leur mettre de la transparence
   laissait paraître le texte de celle qu'elles recouvrent. */
.is-carrousel .tool::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-paper);
  opacity: calc(var(--loin, 0) * 0.17);
  pointer-events: none;
}

/* Les transitions n'entrent en jeu qu'une fois les cartes en place : sinon
   elles s'animeraient toutes depuis le centre au chargement. */
.is-carrousel.est-pret .tool {
  transition: transform .55s var(--ease), opacity .55s var(--ease),
              border-color .55s var(--ease);
}
.is-carrousel.est-pret .tool::after { transition: opacity .55s var(--ease); }
/* La carte du centre se détache par son contour et son ombre : le JS efface et
   rapetisse les autres, la couleur n'a plus à faire ce travail. */
.is-carrousel .tool.est-active {
  border-color: color-mix(in srgb, var(--c-light) 34%, transparent);
  box-shadow: 0 26px 44px -24px var(--c-shadow);
  cursor: default;
}

/* Hiérarchie interne de la carte : le repère se serre contre le titre auquel
   il appartient, le titre prend une taille et un poids qui le détachent
   nettement du texte, et le filet, plus franc, isole l'explication. Sans cet
   écart, les trois se lisaient comme un seul bloc. */
.is-carrousel .tool h4 {
  font-family: var(--font-serif);
  font-size: 1.875rem;
  font-weight: 500;
  line-height: 1.25;
  padding-bottom: 22px;
  margin-bottom: 24px;
  border-bottom: 1px solid color-mix(in srgb, var(--c-light) 22%, transparent);
}
.is-carrousel .tool p {
  font-size: 1.0625rem;
  line-height: 1.7;
}
.is-carrousel .tool__repere {
  font-size: var(--fs-xs);
  margin-bottom: 12px;
}

/* Le survol d'une carte en retrait annonce qu'elle est cliquable. */
.is-carrousel .tool:not(.est-active):hover {
  opacity: .85 !important;
  border-color: color-mix(in srgb, var(--c-light) 24%, transparent);
}

/* 5.6 Offres ---------------------------------------------------------------- */

/* C'est la section qui porte l'offre : elle prend plus d'air que les autres,
   au-dessus comme au-dessous, pour qu'on la lise comme un temps fort et non
   comme un paragraphe de plus. */
#offres { padding-block: calc(var(--pad-y) + 36px); }

/* Un cran au-dessus du --fs-h2 commun, comme le reste de la section. */
#offres .section-title { font-size: clamp(1.875rem, 0.68rem + 2.76vw, 3.125rem); }

.services__header { margin-bottom: 84px; }
.services__header .section-title { margin-bottom: 14px; }
.services__header .lede { max-width: 520px; }

.services__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto auto;
  gap: 0 28px;
}

/* Les trois offres sont posées sur un fond plus sombre que la section : c'est
   ce qui les détache du vert et donne à chacune le poids d'un objet plutôt
   que d'une colonne de texte. `subgrid` fait partager aux trois offres les
   lignes de la grille parente : titres, promesses, questions et bouton
   restent au même niveau d'une carte à l'autre bien que les textes n'aient
   pas la même longueur. */
.service {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  align-items: start;
  position: relative;
  padding: 40px 36px 44px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--c-black) 42%, var(--c-green-dark));
  border: 1px solid color-mix(in srgb, var(--c-light) 12%, transparent);
  transition: transform .25s var(--ease), border-color .25s var(--ease),
              box-shadow .25s var(--ease);
}
.service__cta {
  align-self: end;
  margin-top: 28px;
}

/* Le doré ne sert qu'à désigner : au survol, il souligne la carte visée sans
   repeindre les deux autres. */
.service:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--c-gold) 55%, transparent);
  box-shadow: 0 26px 50px -30px var(--c-shadow);
}

@media (prefers-reduced-motion: reduce) {
  .service { transition: border-color .25s var(--ease); }
  .service:hover { transform: none; }
}

/* Un cran au-dessus du --fs-h3 commun : à taille égale, le romain du titre et
   l'italique de la promesse se ressemblaient trop pour qu'on les distingue au
   premier regard. */
/* Le doré ne rend que 3,3:1 sur le vert des sections : il n'y est admis qu'en
   texte large, où le seuil WCAG AA tombe à 3:1. Ce titre part de 24 px, la
   limite exacte de cette catégorie — c'est pour ça que le corps ne doit pas
   descendre en dessous. */
.service__title {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 1.32rem + 1.14vw, 2.375rem);
  font-weight: 400;
  line-height: 1.2;
  padding-bottom: 18px;
  color: var(--c-gold);
}

/* Titre et promesse forment l'en-tête de l'offre : le trait doré ferme ce
   bloc plutôt que de séparer ses deux moitiés, et la promesse se tient à
   mi-chemin entre les deux corps — assez loin des questions pour qu'on ne
   les confonde pas. */
.service__lede {
  position: relative;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.1875rem, 1.06rem + 0.33vw, 1.375rem);
  line-height: 1.5;
  color: var(--c-light-ice);
  padding-bottom: 30px;
  margin-bottom: 34px;
}
.service__lede::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 2px;
  background: var(--c-gold);
}

/* Chaque question tient sur une ligne : l'interligne peut donc être serré et
   l'air passer entre les items plutôt qu'à l'intérieur. */
.service__questions {
  display: grid;
  align-content: start;
  gap: 24px;
}
.service__questions li {
  position: relative;
  padding-left: 24px;
  font-size: clamp(1.0625rem, 0.98rem + 0.21vw, 1.1875rem);
  line-height: 1.5;
  /* Le plus clair de la palette (7,6:1) : ce sont les questions qu'on vient
     lire dans cette section, elles passent devant la promesse en italique. */
  color: var(--c-light);
}
.service__questions li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.58em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--c-gold) 80%, transparent);
}

/* 5.7 Témoignages ----------------------------------------------------------- */

.testimonials {
  background: var(--c-mint);
  padding: 68px 0 40px;
  overflow: hidden;
  position: relative;
}

.testimonials__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.testimonials__track::-webkit-scrollbar { display: none; }

/* Fenêtre de hauteur fixe : d'un témoignage à l'autre, la section ne saute
   plus et les flèches restent sous la main. Le contenu est centré dedans, si
   bien qu'un texte court respire au lieu de se coller en haut. `min-height`
   plutôt qu'une hauteur ferme : un témoignage plus long que prévu pousse la
   fenêtre au lieu de déborder. */
.testimonial {
  scroll-snap-align: start;
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 300px;
  padding: 0 140px;
  text-align: center;
}
.testimonial__mark {
  font-family: var(--font-serif);
  font-size: 5rem;
  color: color-mix(in srgb, var(--c-green-deep) 18%, transparent);
  line-height: 0;
  position: relative;
  top: 22px;
  user-select: none;
}
.testimonial__quote {
  font-family: var(--font-serif);
  font-size: var(--fs-quote);
  font-style: italic;
  line-height: 1.5;
  color: var(--c-ink);
  max-width: 820px;
  margin: 0 auto 24px;
  text-wrap: balance;
}
/* Trois échelles selon la longueur du témoignage. Une phrase détachée porte
   d'être posée en grand et centrée ; passé quelques lignes, la même taille
   devient un mur, et le texte demande un corps plus petit, aligné à gauche et
   une mesure resserrée. La classe se choisit à la main, au moment d'ajouter
   le témoignage — repère : au-delà de deux phrases, `--moyen` ; au-delà de
   deux paragraphes, `--long`. */
.testimonial__quote--moyen,
.testimonial__quote--long {
  text-align: left;
  text-wrap: pretty;
}
.testimonial__quote--moyen {
  font-size: clamp(1.0625rem, 0.93rem + 0.68vw, 1.375rem);
  max-width: 660px;
  line-height: 1.45;
}
.testimonial__quote--long {
  font-size: clamp(0.96875rem, 0.90rem + 0.35vw, 1.125rem);
  max-width: 620px;
  line-height: 1.45;
}
.testimonial__quote p { margin: 0 0 0.75em; }
.testimonial__quote p:last-child { margin-bottom: 0; }

.testimonial figcaption { font-style: normal; }
.testimonial__author {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
}
.testimonial__role {
  display: block;
  font-size: var(--fs-xs);
  color: var(--c-moss);
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--c-green-deep);
  background: var(--c-paper);
  color: var(--c-green-deep);
  font-size: 1.125rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.carousel-arrow:hover { background: var(--c-green-deep); color: var(--c-paper); }
.carousel-arrow:disabled { opacity: .35; cursor: default; }
.carousel-arrow:disabled:hover { background: var(--c-paper); color: var(--c-green-deep); }
.carousel-arrow--prev { left: 32px; }
.carousel-arrow--next { right: 32px; }

/* `display` déclaré plus bas écraserait la valeur `none` que le navigateur
   applique à [hidden] : sans JavaScript, les contrôles réapparaîtraient. */
.carousel-arrow[hidden],
.carousel-dots[hidden] { display: none; }

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0; /* l'écart vient du rembourrage des cibles, pas d'une marge */
  margin-top: 30px;
}
/* Le repère visuel fait 6 px, mais la cible cliquable doit rester
   confortable au doigt : 44 px, la recommandation WCAG 2.5.5. */
.carousel-dots button {
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.carousel-dots button::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c-ink) 25%, transparent);
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.carousel-dots button[aria-current='true']::before {
  background: var(--c-green-deep);
  transform: scale(1.15);
}

/* 5.8 Lectures -------------------------------------------------------------- */

.books__title { margin-bottom: 60px; }

.livres {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
}

.livre__lien {
  display: block;
  margin-bottom: 14px;
}

/* Jaquette réelle. Un calque vert la recouvre au repos : les couvertures
   d'éditeurs n'ont aucune unité graphique, et posées telles quelles sur la
   section sombre elles la faisaient éclater. Le calque les ramène dans la
   gamme du site ; au survol il s'efface et le livre avance, comme si on le
   sortait de l'étagère. */
.livre__cadre {
  display: block;
  position: relative;
  aspect-ratio: 2 / 3;
  max-width: 190px;
  margin: 0 auto 20px;
  transition: transform .35s var(--ease), filter .35s var(--ease);
  filter: drop-shadow(0 12px 22px color-mix(in srgb, var(--c-shadow) 50%, transparent));
}

/* Traitement repris des vignettes du blog : un halo radial dans l'angle et
   des arcs concentriques, plutôt qu'un aplat vert qui écrasait les jaquettes.
   La désaturation reste légère — juste de quoi calmer les rouges d'éditeurs
   sans transformer l'étagère en monochrome. */
.livre__couv-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.45) contrast(1.04) brightness(.92);
  transition: filter .35s var(--ease);
}
.livre__lien:hover .livre__couv-img,
.livre__lien:focus-visible .livre__couv-img,
.livre.est-en-avant .livre__couv-img {
  filter: saturate(1) contrast(1) brightness(1);
}

.livre__cadre::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 300'><circle cx='188' cy='14' r='56' fill='none' stroke='%23EDF1EA' stroke-opacity='0.22' stroke-width='1.2'/><circle cx='188' cy='14' r='94' fill='none' stroke='%23EDF1EA' stroke-opacity='0.22' stroke-width='1.2'/><circle cx='188' cy='14' r='132' fill='none' stroke='%23EDF1EA' stroke-opacity='0.22' stroke-width='1.2'/><circle cx='188' cy='14' r='170' fill='none' stroke='%23EDF1EA' stroke-opacity='0.22' stroke-width='1.2'/><circle cx='188' cy='14' r='208' fill='none' stroke='%23EDF1EA' stroke-opacity='0.22' stroke-width='1.2'/></svg>") center / cover no-repeat,
    radial-gradient(circle at 88% 8%,
                    color-mix(in srgb, var(--c-grad-teal) 62%, transparent) 0%,
                    color-mix(in srgb, var(--c-grad-forest) 52%, transparent) 55%,
                    color-mix(in srgb, var(--c-grad-forest) 72%, transparent) 100%);
  transition: opacity .35s var(--ease);
}

.livre__lien:hover .livre__cadre,
.livre__lien:focus-visible .livre__cadre,
.livre.est-en-avant .livre__cadre {
  transform: translateY(-12px) scale(1.04);
  filter: drop-shadow(0 24px 36px color-mix(in srgb, var(--c-shadow) 62%, transparent));
}
.livre__lien:hover .livre__cadre::after,
.livre__lien:focus-visible .livre__cadre::after,
.livre.est-en-avant .livre__cadre::after { opacity: 0; }

.livre.est-en-avant .livre__titre { color: var(--c-gold); }

/* La mise en avant automatique est plus lente que la réponse au survol :
   un geste doit paraître immédiat, un mouvement de fond doit passer
   inaperçu. */
.livre.est-en-avant .livre__cadre,
.livre.est-en-avant .livre__couv-img { transition-duration: .9s; }

.livre__titre {
  display: block;
  transition: color .35s var(--ease);
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--c-light);
  margin-bottom: 4px;
}
.livre__lien:hover .livre__titre { color: var(--c-gold); }
.livre__auteur {
  display: block;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--c-light-mint);
}
/* Plus grande et plus claire que le vert d'origine : en italique serif à
   14 px sur fond sombre, la note se lisait mal malgré un contraste correct
   sur le papier. */
.livre__note {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--c-light-ice);
  margin-top: 10px;
}

/* 5.9 Blog ------------------------------------------------------------------ */

.blog__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 64px;
}
.blog__header .lede { max-width: 520px; }

.posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
}
.post__link { display: block; }
.post__thumb {
  aspect-ratio: 4 / 3;
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
}
.post__thumb--1 { background: linear-gradient(150deg, var(--c-light-ice), var(--c-green-deep)); }
.post__thumb--2 { background: linear-gradient(150deg, var(--c-light-mist), var(--c-grad-forest)); }
.post__thumb--3 { background: linear-gradient(150deg, var(--c-grad-teal-soft), var(--c-grad-night)); }
.post__thumb .medallion {
  position: absolute;
  top: 14px; left: 14px;
  width: 32px; height: 32px;
  background: color-mix(in srgb, var(--c-light) 90%, transparent);
  color: var(--c-black);
  border: 0;
  font-size: var(--fs-xs);
}
/* La catégorie annonce la carte : à 12 px elle se lisait à peine sous la
   vignette. Montée à 16 px, elle tient tête au titre sans le concurrencer —
   les capitales et l'interlettrage lui donnent déjà de la présence, un corps
   plus grand passerait devant lui. */
.post__category {
  font-size: 1rem;
  letter-spacing: .1em;
  color: var(--c-gold);
  font-weight: 600;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.post__title {
  font-family: var(--font-serif);
  font-size: 1.3125rem;
  font-weight: 400;
  line-height: 1.35;
  margin-bottom: 10px;
  transition: color .2s var(--ease);
}
.post__link:hover .post__title { color: var(--c-green-deep); }
.post__meta { font-size: 0.78125rem; color: var(--c-moss); }

.blog__more,
.tools__more { text-align: center; margin-top: 56px; }
.blog__more a,
.tools__more a {
  border-bottom: 1px solid var(--c-ink);
  padding-bottom: 4px;
  font-size: 0.875rem;
  font-weight: 600;
}

/* 5.10 FAQ ------------------------------------------------------------------ */

.faq {
  max-width: 900px;
  margin-inline: auto;
  padding-bottom: calc(var(--pad-y) + 10px);
}
.faq .section-title { margin-bottom: 56px; }

.faq__item {
  border-top: 1px solid var(--line-dark);
  padding: 26px 0;
}
.faq__item:last-of-type { border-bottom: 1px solid var(--line-dark); }

.faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-size: 1.0625rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after {
  content: '+';
  color: var(--c-green-deep);
  font-size: 1.375rem;
  font-weight: 300;
  line-height: 1;
  transition: transform .2s var(--ease);
}
.faq__item[open] .faq__question::after { transform: rotate(45deg); }

.faq__answer {
  font-size: 0.96875rem;
  color: var(--c-fern);
  line-height: 1.8;
  margin-top: 16px;
  max-width: 640px;
}

/* 5.11 Contact -------------------------------------------------------------- */

/* Le bloc de réservation reprend le vert des sections : seul le pied de page
   garde le noir-vert, où il se pose comme un socle. */
.contact {
  background: var(--c-green-dark);
  color: var(--c-light);
  text-align: center;
  padding: calc(var(--pad-y) + 20px) var(--pad-inline);
}
.contact .eyebrow { margin-bottom: 22px; }
.contact__title {
  font-size: var(--fs-h1);
  font-weight: 400;
  letter-spacing: -.3px;
  margin-bottom: 26px;
  text-wrap: balance;
}
.contact__lede {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--c-light-ice);
  max-width: 560px;
  margin: 0 auto 44px;
}
.contact__card {
  max-width: 480px;
  margin-inline: auto;
  background: var(--c-paper);
  border-radius: 4px;
  box-shadow: var(--shadow-card);
  padding: 48px 44px;
  color: var(--c-ink);
}
.contact__facts {
  display: flex;
  justify-content: center;
  gap: 28px;
  row-gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line-dark-fine);
}
/* dd porte la valeur (30 min), dt le libellé (Durée) : l'ordre du balisage
   place déjà la valeur en premier, aucun réordonnancement CSS nécessaire. */
.contact__facts dd {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  margin: 0;
}
.contact__facts dt {
  margin-top: 4px;
  font-size: 0.71875rem;
  color: var(--c-moss);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.contact__note {
  font-size: var(--fs-xs);
  color: var(--c-moss);
  line-height: 1.6;
  margin-top: 16px;
}
/* Le numéro est la seule alternative à l'agenda : il doit se voir comme un
   lien, pas se fondre dans la note. */
.contact__note a {
  color: var(--c-ink);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--c-ink) 35%, transparent);
}
.contact__note a:hover { text-decoration-color: currentColor; }

/* Renvoi vers la page de contact, sous la carte de réservation : le
   rendez-vous reste la porte principale, l'écrit est la porte de côté. */
.contact__aussi {
  margin-top: 28px;
  font-size: var(--fs-sm);
  color: var(--c-light-ice);
}
.contact__aussi a {
  color: var(--c-light);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--c-light) 45%, transparent);
}
.contact__aussi a:hover { text-decoration-color: currentColor; }

/* 5.11 bis  Page de contact -------------------------------------------------- */

.contact-page__entete {
  max-width: 620px;
  margin-bottom: 64px;
}
.contact-page__entete .section-title { margin-bottom: 20px; }
.contact-page__entete .lede { font-size: 1.0625rem; line-height: 1.75; }

/* Le formulaire prend la moitié la plus large : c'est ce qu'on est venu
   faire ici. Les autres moyens de joindre se rangent à côté, à portée de
   regard pour qui préfère appeler. */
.contact-page__grille {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 80px;
  align-items: start;
}

.contact-page__cote {
  display: grid;
  gap: 32px;
  padding-left: 40px;
  border-left: 1px solid var(--line-dark);
}
.contact-page__bloc p {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-pine);
}
.contact-page__bloc .btn { margin-top: 14px; }
.contact-page__titre {
  font-size: var(--fs-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--c-gold);
  margin-bottom: 10px;
}
.contact-page__lien {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  color: var(--c-ink);
  border-bottom: 1px solid color-mix(in srgb, var(--c-ink) 30%, transparent);
  padding-bottom: 2px;
  transition: border-color .2s var(--ease);
}
.contact-page__lien:hover { border-bottom-color: var(--c-ink); }

.form { display: grid; gap: 20px; }
.form__champ { display: grid; gap: 7px; }
.form__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--c-ink);
}
/* Le trait sous le champ suffit à en marquer l'étendue ; un cadre complet
   aurait ajouté trois traits pour rien sur une carte déjà cadrée. */
.form__input {
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--c-ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--c-ink) 28%, transparent);
  border-radius: 0;
  padding: 8px 2px;
  width: 100%;
  transition: border-color .2s var(--ease);
}
.form__input:hover { border-bottom-color: color-mix(in srgb, var(--c-ink) 45%, transparent); }
.form__input:focus {
  outline: none;
  border-bottom-color: var(--c-gold);
  border-bottom-width: 2px;
  /* Compense l'épaisseur gagnée, sinon le champ sautille à la mise au point. */
  padding-bottom: 7px;
}
.form__textarea { resize: vertical; min-height: 120px; line-height: 1.6; }

/* Le rouge n'est pas dans la charte : le champ fautif se signale par son
   trait doré plein et son message, pas par une couleur d'alerte. La règle ne
   mord qu'après une tentative d'envoi, marquée par la classe sur le
   formulaire — sinon tout champ vide serait en faute dès l'arrivée. */
.form.est-verifie .form__input:invalid {
  border-bottom-color: var(--c-gold);
  border-bottom-width: 2px;
  padding-bottom: 7px;
}

.form__envoi { justify-self: start; margin-top: 4px; cursor: pointer; }
.form__envoi[disabled] { opacity: .6; cursor: progress; }

/* Vide, le retour ne doit pas creuser d'écart sous le bouton. */
.form__retour:empty { display: none; }
.form__retour {
  font-size: var(--fs-sm);
  line-height: 1.6;
  padding: 12px 14px;
  border-left: 2px solid var(--c-gold);
  background: color-mix(in srgb, var(--c-green-deep) 6%, transparent);
  color: var(--c-pine);
}

.form__mentions {
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--c-moss);
}
.form__mentions a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--c-moss) 45%, transparent);
}
.form__mentions a:hover { text-decoration-color: currentColor; }

/* 5.12 Pied de page --------------------------------------------------------- */

.footer {
  padding: 64px var(--pad-inline);
  background: var(--c-green-black);
  color: var(--c-light-sage);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  border-top: 1px solid color-mix(in srgb, var(--c-light) 12%, transparent);
}
/* Variante crème : sur le fond vert-noir du pied, le sauge du symbole
   manquerait de contraste. */
.footer .marque {
  --marque-teinte-signature: var(--c-light-sage);
  margin-bottom: 14px;
}
.footer__about {
  font-size: 0.84375rem;
  line-height: 1.7;
  max-width: 260px;
}
.footer__heading {
  font-size: var(--fs-label);
  letter-spacing: .1em;
  color: var(--c-light-sage);
  margin-bottom: 14px;
  text-transform: uppercase;
}
.footer__list {
  display: flex;
  flex-direction: column;
  gap: 1px; /* l'écart visuel vient du rembourrage des liens ci-dessous */
  font-size: 0.84375rem;
}
/* 16 px de hauteur de ligne + 2×4 px = 24 px, le minimum exigé pour une
   cible tactile (WCAG 2.5.8). L'entraxe reste celui du design d'origine. */
.footer__list a,
.footer__list span {
  display: inline-block;
  padding: 4px 0;
  transition: color .2s var(--ease);
}
.footer__list a:hover { color: var(--c-light); }

.footer__legal {
  grid-column: 1 / -1;
  border-top: 1px solid color-mix(in srgb, var(--c-light) 12%, transparent);
  padding-top: 24px;
  font-size: 0.78125rem;
}
/* Trois zones : droits à gauche, signature au centre, liens à droite.
   En grille plutôt qu'en space-between, pour que le centre reste
   réellement centré quelles que soient les largeurs des deux côtés. */
.footer__legal {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px 24px;
}
.footer__droits p { line-height: 1.6; }
.footer__droits p + p {
  color: color-mix(in srgb, var(--c-light-sage) 70%, transparent);
  font-size: 0.71875rem;
}
.footer__signature { text-align: center; white-space: nowrap; }
.footer__liens { text-align: right; }
.footer__legal a {
  display: inline-block;
  padding: 5px 2px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}
.footer__legal a:hover { color: var(--c-light); }

/* 5.13 Pages de texte (mentions légales) ------------------------------------ */

.legal {
  max-width: 780px;
  margin-inline: auto;
}
.legal h2 {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-weight: 400;
  margin: 48px 0 14px;
}
.legal p {
  line-height: 1.8;
  color: var(--c-pine);
  margin-bottom: 14px;
}
.legal a { text-decoration: underline; text-underline-offset: 3px; }

/* Champs légaux non renseignés. Surlignés volontairement : un placeholder
   discret finit toujours par partir en production. À supprimer, avec la
   classe dans le HTML, une fois les informations obtenues. */
.todo {
  background: color-mix(in srgb, var(--c-gold) 22%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-gold) 22%, transparent);
  border-radius: 2px;
}

/* 5.14 Article de blog ------------------------------------------------------ */

.article {
  max-width: 780px;
  margin-inline: auto;
}

/* Retour vers la page d'où l'on vient, en tête d'article. Assez présent pour
   se voir tout de suite, assez discret pour ne pas concurrencer le titre. */
.retour {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-moss);
  border: 1px solid var(--line-dark);
  border-radius: 2px;
  padding: 9px 18px;
  margin-bottom: 20px;
  transition: color .2s var(--ease), border-color .2s var(--ease),
              background-color .2s var(--ease);
}
.retour:hover {
  color: var(--c-ink);
  border-color: var(--c-gold);
  background: color-mix(in srgb, var(--c-gold) 10%, transparent);
}
.retour__fleche { transition: transform .2s var(--ease); }
.retour:hover .retour__fleche { transform: translateX(-3px); }

/* Sur une page de liste, revenir en arrière n'est pas l'action principale : le
   lien perd son cadre et ne garde que la flèche. Le soulignement est posé dès
   le repos, en transparent, pour que son apparition au survol ne décale rien. */
.retour--discret {
  border-color: transparent;
  padding-inline: 0;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 5px;
  transition: color .2s var(--ease), text-decoration-color .2s var(--ease);
}
.retour--discret:hover {
  background: none;
  border-color: transparent;
  text-decoration-color: var(--c-gold);
}

/* Sans fil d'Ariane sous lui — un article hors du carnet n'en a pas — le lien
   reprend à son compte la respiration que celui-ci apportait. */
.retour--espace { margin-bottom: 60px; }

/* Le même lien en fin d'article, à la place des voisins de lecture : il en
   garde le filet et l'écart, pour ne pas coller à la dernière ligne. */
.retour-bas {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--line-dark);
}
.retour-bas .retour { margin-bottom: 0; }

.fil-ariane {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--c-moss);
  margin-bottom: 40px;
}
.fil-ariane a { text-decoration: underline; text-underline-offset: 3px; }
.fil-ariane a:hover { color: var(--c-ink); }

.article__entete {
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line-dark);
}
.article__titre {
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.3px;
  margin-bottom: 16px;
  text-wrap: balance;
}
.article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--c-moss);
}

/* Corps de l'article : la largeur de ligne prime sur tout le reste. */
.article__corps {
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--c-pine);
}
.article__corps > * + * { margin-top: 1.35em; }

/* Chapô : la ligne qui prolonge le titre avant que le texte ne commence.
   Plus grande que `.lede` ailleurs sur le site, sans quoi elle passerait
   sous la taille du corps qu'elle est censée introduire. */
.article__corps .lede {
  font-size: 1.1875rem;
  line-height: 1.7;
}

.article__corps h2 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--c-ink);
  margin-top: 2.4em;
  margin-bottom: -.4em; /* rapproche le titre de son paragraphe */
}
.article__corps h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--c-ink);
  margin-top: 2em;
  margin-bottom: -.5em;
}

.article__corps ul,
.article__corps ol { padding-left: 1.4em; }
.article__corps li { margin-bottom: .5em; }
.article__corps ul li { list-style: disc; }
.article__corps ol li { list-style: decimal; }
.article__corps li::marker { color: var(--c-gold); }

.article__corps a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--c-gold);
}
.article__corps a:hover { color: var(--c-green-deep); }

.article__corps blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.3125rem;
  line-height: 1.5;
  color: var(--c-ink);
  border-left: 2px solid var(--c-gold);
  padding: 4px 0 4px 28px;
  margin-block: 2em;
}

.article__corps img {
  width: 100%;
  height: auto;
  margin-block: 2em;
}

.article__corps strong { font-weight: 600; color: var(--c-ink); }

/* Rangée de boutons écrite dans le texte : `{{ bouton: Libellé | lien }}`.
   Déclarée après les règles de `.article__corps` : à spécificité égale c'est
   la dernière qui gagne, et la respiration autour des boutons doit primer sur
   l'écart entre deux paragraphes. Le soulignement doré des liens du corps
   n'a rien à faire sur un bouton. */
.boutons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-block: 2em;
}
.boutons > .btn { text-decoration: none; }

/* Ailleurs sur le site, le bouton cerclé est en petites capitales espacées.
   Posé dans un article à côté d'un bouton plein, il doit lui répondre : même
   corps, même casse, sinon la rangée paraît bancale. */
.boutons > .btn--outline {
  font-size: 0.90625rem;
  letter-spacing: .02em;
  text-transform: none;
  border-radius: 2px;
}

/* Sommaire, affiché seulement à partir de trois titres. */
.sommaire {
  background: color-mix(in srgb, var(--c-green-deep) 5%, transparent);
  border-left: 2px solid var(--c-gold);
  padding: 24px 28px;
  margin-bottom: 48px;
}
.sommaire__titre {
  font-size: var(--fs-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--c-moss);
  margin-bottom: 14px;
}
.sommaire ol {
  counter-reset: sommaire;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sommaire li { counter-increment: sommaire; }
.sommaire li::before {
  content: counter(sommaire) '.';
  color: var(--c-gold);
  margin-right: 8px;
  font-variant-numeric: tabular-nums;
}
.sommaire a {
  font-size: 0.9375rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: transparent;
  transition: text-decoration-color .2s var(--ease);
}
.sommaire a:hover { text-decoration-color: currentColor; }

.bandeau-brouillon {
  background: color-mix(in srgb, var(--c-gold) 22%, transparent);
  border: 1px solid var(--c-gold);
  border-radius: 2px;
  padding: 12px 18px;
  margin-bottom: 32px;
  font-size: 0.9375rem;
  font-weight: 600;
}

/* Récit illustré ------------------------------------------------------------

   Pour les articles qui avancent par étapes, chacune avec son image : la
   fable du sage et de l'âne, et celles qui suivront. Le vignettage classique
   — image pleine largeur, texte dessous — les étirait sur trois écrans ; ici
   l'image tient dans la marge et l'œil descend la colonne d'un pas régulier.

   Rien à déclarer côté build : ce sont des classes à écrire dans le corps de
   l'article, comme n'importe quelle balise. */

.etapes {
  counter-reset: etape;
  margin-block: 2.5em;
}
.etape {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 28px;
  align-items: start;
  padding-block: 30px;
  border-top: 1px solid var(--line-dark);
}
/* La règle générale du corps d'article donne aux images toute la largeur et
   deux cadratins de marge : dans une étape, elles occupent leur colonne. */
.etape img {
  width: 100%;
  margin-block: 0;
  border-radius: 2px;
}
/* Illustrations panoramiques : dans une colonne étroite, un dessin large et
   bas se réduit à un bandeau. On lui donne le tiers de la largeur. */
.etapes--large .etape { grid-template-columns: 320px 1fr; }

.etape__texte > * + * { margin-top: 1em; }

/* Le numéro est posé par le compteur plutôt qu'écrit dans le titre : le
   sommaire automatique n'y voit alors que l'intitulé, et renuméroter une
   étape déplacée ne demande rien. */
.etape__titre {
  display: flex;
  align-items: baseline;
  gap: 14px;
  /* Les marges que `.article__corps h2` réserve à un titre de section
     n'ont pas lieu d'être en tête d'une étape déjà détachée par son filet. */
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.25rem;
}
.etape__titre::before {
  counter-increment: etape;
  content: counter(etape);
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-gold);
  border-radius: 50%;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c-gold);
  /* Ramène le cercle sur la ligne du titre plutôt que sur sa base. */
  transform: translateY(4px);
}
/* La voix du marché : une réplique, pas une citation d'autorité. Elle garde
   l'italique du blockquote mais rend le filet doré et la solennité du corps
   de texte à la leçon finale, qui est la seule à les mériter. */
.etape blockquote {
  font-size: 1.0625rem;
  line-height: 1.6;
  border-left: 0;
  padding: 0;
  /* Plus spécifique que l'écart commun de `.etape__texte` : il faut le
     redonner ici, sinon la réplique se colle au récit qui l'amène. */
  margin-top: 1.2em;
  margin-bottom: 0;
  color: var(--c-moss);
}

/* Encadrés — la leçon, puis les questions à se poser. Deux blocs pleins qui
   coupent la colonne de texte, comme les cartouches d'une affiche. */
/* Une bande, pas une boîte : l'encadré sort de la colonne de l'article et
   traverse l'écran, comme les sections de l'accueil. Son texte, lui, reste
   aligné sur la colonne — d'où le rembourrage calculé sur la demi-largeur du
   corps d'article (636 px de texte dans 780 px de page).

   `margin-inline` négatif : le bloc rattrape la marge de son parent avant de
   s'étendre. Voir `overflow-x: clip` sur `html`, qui absorbe la barre de
   défilement que `100vw` ignore. */
.encadre {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-block: 2.75em;
  padding-block: 44px;
  padding-inline: max(var(--pad-x), calc(50vw - 318px));
}
.encadre__titre {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-weight: 400;
  margin-bottom: 18px;
}
/* Fond doré pâle : la leçon reste dans la lumière de la page, le doré la
   désigne sans l'arracher au reste.

   `--fond-lecon`, posé sur le bloc dans l'article, reprend la couleur de fond
   de l'illustration qu'il contient : l'image ne flotte plus sur un aplat
   étranger, les deux forment une seule bande. */
.encadre--lecon {
  background: var(--fond-lecon,
                  color-mix(in srgb, var(--c-gold) 12%, transparent));
}
.encadre--lecon .encadre__titre { color: var(--c-ink); }
/* Image et parole côte à côte : pleine largeur, l'illustration finale, très
   colorée, prenait le pas sur la phrase qu'elle accompagne. */
.encadre--lecon__corps {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  align-items: center;
}
.encadre--lecon img {
  width: 100%;
  margin-block: 0;
  border-radius: 2px;
}
.encadre--lecon blockquote {
  border-left: 0;
  padding: 0;
  margin-block: 0;
  font-size: 1.1875rem;
}
/* Fond vert : les questions s'adressent au lecteur, elles changent de voix
   comme les sections sombres de l'accueil. */
.encadre--questions {
  background: var(--c-green-dark);
  color: var(--c-light);
}
.encadre--questions .encadre__titre { color: var(--c-gold); }
.encadre--questions ul { padding-left: 1.2em; margin-top: 1.3em; }
.encadre--questions li { list-style: disc; margin-bottom: .7em; }
.encadre--questions li::marker { color: var(--c-gold); }
.encadre--questions li:last-child { margin-bottom: 0; }

/* Le mot de la fin, centré et en serif : c'est la phrase qu'on emporte. */
.chute {
  font-family: var(--font-serif);
  font-size: 1.3125rem;
  line-height: 1.5;
  text-align: center;
  color: var(--c-ink);
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  padding-block: 28px;
  margin-block: 2.5em;
}

@media (max-width: 600px) {
  /* Sous cette largeur, deux colonnes ne laissent plus à l'image que la
     taille d'une vignette : elle repasse au-dessus du texte. */
  .etape { grid-template-columns: 1fr; gap: 18px; }
  .encadre--lecon__corps { grid-template-columns: 1fr; gap: 20px; }
  .encadre { padding-block: 32px; }
}

/* Article précédent / suivant */
.pagination {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--line-dark);
}
.pagination__lien {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid var(--line-dark);
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.35;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.pagination__lien:hover {
  border-color: var(--c-green-deep);
  background: color-mix(in srgb, var(--c-green-deep) 4%, transparent);
}
.pagination__lien span {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-moss);
}
/* Seul le suivant : il se place à droite plutôt que de s'étirer. */
.pagination__lien--suiv:only-child { grid-column: 2; text-align: right; }

.lies {
  margin-top: 72px;
  padding-top: 40px;
  border-top: 1px solid var(--line-dark);
}
.lies__titre {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 32px;
}
.lies .posts { grid-template-columns: repeat(2, 1fr); }

/* Bandeau d'appel, en fin d'article ----------------------------------------
   Le bouton centré sous un filet se confondait avec la fin du texte. Le
   bandeau ferme la lecture : un aplat vert pâle — celui des témoignages —
   qui se détache du crème sans casser la page, la question à gauche, l'action
   à droite.

   Le fond est composé de formes géométriques posées en couches de fond, pas
   d'une image : quatre aplats à peine plus soutenus que le vert pâle, plus
   l'arc concentrique qui court déjà sur les vignettes du carnet, les cartes
   d'outils et les jaquettes. Toutes les teintes dérivent des jetons, aucune
   n'est écrite en dur.

   L'ordre des couches va du premier plan au fond : le demi-disque devant, le
   dégradé de base derrière. */
.appel {
  --forme:      color-mix(in srgb, var(--c-green-deep) 9%, transparent);
  --forme-pale: color-mix(in srgb, var(--c-green-deep) 5%, transparent);

  margin-top: 72px;
  /* Le bandeau déborde des gouttières de la section pour occuper les 780 px
     de la colonne d'article : à 636 px, la question et le bouton se serraient
     l'un contre l'autre. C'est aussi ce qui en fait un objet à part, posé
     sous le texte plutôt qu'aligné dedans. */
  margin-inline: calc(-1 * var(--pad-x));
  padding: 44px 48px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 48px;

  background:
    /* Demi-disque, côté plat vers le texte */
    radial-gradient(circle farthest-side at 0 50%,
                    var(--forme) 99.5%, transparent 100%)
      58% 50% / 78px 156px no-repeat,
    /* Arc concentrique, le motif de la maison */
    radial-gradient(circle farthest-side at 100% 0,
                    transparent 0 76%, var(--forme) 76.5% 78.5%, transparent 79%)
      100% 0 / 210px 210px no-repeat,
    /* Quart de disque dans l'angle */
    radial-gradient(circle farthest-side at 100% 0,
                    var(--forme-pale) 99.5%, transparent 100%)
      100% 0 / 112px 112px no-repeat,
    /* Biseau du bas, qui reprend la diagonale du bloc */
    linear-gradient(to bottom left, transparent 0 49.8%, var(--forme-pale) 50%)
      0 100% / 230px 120px no-repeat,
    /* Bloc vertical qui cale le titre */
    linear-gradient(var(--forme-pale), var(--forme-pale))
      0 0 / 116px 64% no-repeat,
    linear-gradient(118deg,
                    color-mix(in srgb, var(--c-mint) 55%, var(--c-paper)),
                    var(--c-mint));
}

.appel__texte { flex: 1 1 auto; min-width: 0; }

.appel__titre {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--c-ink);
  max-width: 13em;
  text-wrap: balance;
}
/* La ligne s'arrête avant le demi-disque : au-delà, elle venait mourir
   contre son bord droit et le motif passait pour une colonne de texte. */
.appel__sous {
  margin-top: 12px;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--c-moss);
  max-width: 22em;
}

.appel__actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.appel__actions .btn--solid { padding: 16px 28px; white-space: nowrap; }

/* Le doré ne tient pas le contraste sur le vert pâle (2,1:1) : la seconde
   action est un lien souligné en moss, pas un bouton cerclé. */
.appel__lien {
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--c-moss);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--c-moss) 40%, transparent);
  transition: color .2s var(--ease);
}
.appel__lien:hover { color: var(--c-ink); text-decoration-color: currentColor; }

/* Cartes d'articles devenues cliquables ------------------------------------- */

.post__thumb--image { padding: 0; container-type: inline-size; }
.post__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Étiquette posée sur la vignette, à l'emplacement qu'elle occupait jadis
   gravée dans l'image. Les proportions suivent la largeur de la carte
   (`cqw`), pour que le repère tienne quelle que soit la taille d'affichage,
   avec un plancher en pixels sous lequel il cesserait d'être lisible. */
/* L'étiquette posée sur la vignette : c'est le seul texte du visuel, il doit se
   lire d'un coup d'œil dans une grille de cartes.
   L'interlettrage très large est ce qui lui donne son allure, mais il pousse le
   mot vers le bord : à .5em, le corps ne peut pas dépasser 6cqw sans que
   « RECONVERSION », douze caractères, sorte du cadre — et un mot seul ne se
   coupe pas, il déborderait sous le rognage de la vignette. C'est donc le mot le
   plus long qui fixe la taille. Au-delà de douze caractères, `label:` dans
   l'en-tête de l'article permet de poser un mot plus court sans toucher à la
   catégorie.
   Le corps est en `cqw` pur, sans plancher en pixels : figer une taille minimale
   sur les cartes les plus étroites ferait justement ressortir le mot du cadre.
   Proportionnel de bout en bout, il ne peut plus déborder. La contrepartie est
   qu'une carte étroite donne une étiquette petite — 18 px à 300 px de carte,
   la plus étroite que produise la mise en page, contre 14 px avant. */
.post__label {
  position: absolute;
  left: 7.5%;
  right: 7.5%;
  top: 17%;
  padding-top: 20px;
  color: var(--c-gold);
  font-size: 6cqw;
  font-weight: 600;
  letter-spacing: .5em;
  text-transform: uppercase;
  line-height: 1.35;
  /* Le fond échantillonné sous le texte ne rend que 2,9:1 au doré : ce qui
     passait à 14 px devient franchement mou à 22. L'ombre détache la lettre du
     dégradé sans l'assombrir. */
  text-shadow: 0 1px 8px color-mix(in srgb, var(--c-grad-night) 70%, transparent);
}
.post__label::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: max(34px, 7cqw);
  height: 3px;
  background: var(--c-gold);
  box-shadow: 0 1px 8px color-mix(in srgb, var(--c-grad-night) 70%, transparent);
}

/* 5.15 Page d'erreur -------------------------------------------------------- */

/* Pas d'align-items: center ici — en colonne, il réduirait chaque bloc à sa
   largeur minimale et casserait les titres mot par mot. Le centrage passe
   par text-align, et par align-self sur les seuls éléments concernés. */
.error-page {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.error-page .section-title { margin-bottom: 20px; }
.error-page .lede { margin-bottom: 40px; }

.error-page__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
}
.error-page__links a {
  padding: 9px 18px;
  border: 1px solid var(--line-dark);
  border-radius: 100px;
  font-size: var(--fs-xs);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.error-page__links a:hover {
  border-color: var(--c-green-deep);
  background: color-mix(in srgb, var(--c-green-deep) 6%, transparent);
}

.error-page .btn--solid { display: inline-block; align-self: center; padding: 16px 32px; }

/* 6. RESPONSIVE ============================================================ */

/* Les offres lâchent avant le reste de la page : sous cette largeur, les
   colonnes deviennent trop étroites pour qu'une question tienne sur une
   ligne, et la liste redevient le pavé qu'on cherchait à défaire. Elles
   s'empilent donc plus tôt, et l'alignement d'une colonne à l'autre n'a
   plus d'objet. */
@media (max-width: 1300px) {
  .services__list {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 48px;
  }
  /* Empilées, les cartes n'ont plus de lignes à partager : `block` suffit,
     mais le fond et le cadre restent — c'est eux qui portent la mise en
     valeur, à toutes les largeurs. */
  .service { display: block; grid-row: auto; padding: 34px 30px 38px; }

  /* Cinq outils de front deviennent cinq colonnes trop étroites, où les
     titres se coupent en deux. */
  .tools__grid { grid-template-columns: repeat(3, 1fr); }
  .service__lede { max-width: 620px; }
}

@media (max-width: 900px) {
  .nav { padding: 18px var(--pad-inline); }

  .nav__toggle { display: flex; }
  .no-js .nav__toggle { display: none; }
  .nav__links {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 8px var(--pad-inline) 20px;
    background: var(--c-paper);
    border-bottom: 1px solid var(--line-dark-soft);
    box-shadow: 0 12px 24px -20px color-mix(in srgb, var(--c-shadow) 80%, transparent);
  }
  .nav__links.is-open { display: flex; }
  .nav__link {
    padding: 14px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--c-ink) 8%, transparent);
    font-size: 0.9375rem;
  }
  .nav__link::after { display: none; }
  .nav__cta { margin-top: 16px; text-align: center; padding: 14px 18px; }

  /* Sans JavaScript, le bouton d'ouverture ne sert à rien : on retombe sur
     les liens en flux, comme dans le prototype d'origine. */
  .no-js .nav__links {
    display: flex;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    column-gap: 18px;
    padding: 0;
    background: none;
    border-bottom: 0;
    box-shadow: none;
  }
  .no-js .nav__link { padding: 4px 0; border-bottom: 0; font-size: var(--fs-xs); }
  .no-js .nav__cta { margin-top: 0; padding: 9px 18px; }

  .hero { height: 600px; }
  .hero__layer { padding-bottom: 32px; }
  .hero__intro { gap: 26px; }
  /* En dessous de 900px, le texte est trop long pour tenir en deux lignes
     malgré le saut manuel : on le retire et on laisse `text-wrap: balance`
     répartir les mots plutôt que de forcer une ligne du milieu trop courte. */
  .hero__tagline-break { display: none; }

  .about       { grid-template-columns: 1fr; gap: 40px; }
  /* Empilés, le filet vertical qui séparait les deux colonnes de la page de
     contact devient un filet horizontal au-dessus des coordonnées. */
  .contact-page__grille { grid-template-columns: 1fr; gap: 48px; }
  .contact-page__cote {
    padding-left: 0;
    padding-top: 40px;
    border-left: 0;
    border-top: 1px solid var(--line-dark);
  }
  .contact-page__entete { margin-bottom: 44px; }
  .principles  { grid-template-columns: 1fr; gap: 40px; }
  /* Empilés, les principes n'ont plus de trait commun à souligner : la
     hauteur réservée aux titres ne creuserait qu'un vide. */
  .principles::before { display: none; }
  .principle h3 { height: auto; margin-bottom: 12px; }
  .tools__grid { grid-template-columns: repeat(2, 1fr); }

  .testimonial { padding: 0 56px; }
  .carousel-arrow { width: 36px; height: 36px; font-size: 1rem; }
  .carousel-arrow--prev { left: 8px; }
  .carousel-arrow--next { right: 8px; }

  .livres { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .posts  { grid-template-columns: 1fr; gap: 40px; }
  .lies .posts { grid-template-columns: 1fr; }
  .pagination { grid-template-columns: 1fr; }
  .pagination__lien--suiv:only-child { grid-column: 1; text-align: left; }

  /* Côte à côte, le bouton et la question se disputent la largeur : le
     titre tombe sur trois lignes pendant que « Réserver un appel
     découverte », insécable, tient la moitié du bandeau. Ils s'empilent.
     Le débordement s'arrête là : sous 900 px la colonne d'article touche
     déjà les bords, le bandeau n'a plus de gouttière à rattraper. */
  .appel {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    margin-inline: 0;
    padding: 36px 32px;
  }
  .appel__titre { max-width: none; }
  /* Le bouton garde la largeur de son texte : étiré sur 700 px, l'aplat doré
     pesait plus lourd que la question qu'il accompagne. */
  .appel__actions { align-self: flex-start; }
  .footer { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .footer__legal { grid-template-columns: 1fr; gap: 12px; }
  /* Empilée, la signature s'intercalait entre les droits et les liens
     légaux. Elle passe en dernier : c'est le mot de la fin, il doit fermer
     la page et non couper la navigation. */
  .footer__signature { order: 1; }
  .footer__signature,
  .footer__liens { text-align: left; }
}

@media (max-width: 600px) {
  .nav { padding: 16px var(--pad-inline); }
  .nav .marque { --marque-corps: 1.1875rem; }

  .hero { height: 540px; }
  .hero__layer { padding-top: 36px; }
  .hero__intro { gap: 22px; }
  .hero__title { gap: 12px; }
  /* Le voile latéral, taillé pour une image large, ne couvrirait qu'un bord
     sur un écran étroit : sur mobile il devient un voile plein, plus léger.
     Moins léger qu'avant, cependant : sur un cadre vertical, `cover` ne montre
     plus que la bande centrale de la photographie — la crête enneigée, ce
     qu'elle a de plus clair — quand l'écran large en gardait les bords
     sombres. Le voile s'y raffermit de quatorze points pour rendre au titre
     l'écart que la composition lui retire. */
  .hero__scrim {
    background:
      linear-gradient(90deg,
        color-mix(in srgb, var(--c-scrim) 60%, transparent) 0%,
        color-mix(in srgb, var(--c-scrim) 44%, transparent) 100%),
      linear-gradient(0deg,
        color-mix(in srgb, var(--c-scrim) 78%, transparent) 0%,
        color-mix(in srgb, var(--c-scrim) 18%, transparent) 45%,
        transparent 65%);
  }
  .hero__content { flex-direction: column; align-items: flex-start; gap: 10px; }
  /* Le filet et le texte suivent la citation quand elle repasse à gauche,
     empilée sous le bloc de marque. */
  .hero__quote {
    text-align: left;
    border-right: 0;
    padding-right: 0;
    border-left: 2px solid var(--c-gold);
    padding-left: clamp(18px, 2vw, 26px);
  }

  .tools__grid { grid-template-columns: 1fr; }

  /* Sur mobile, une fenêtre fixe imposerait du vide sous les témoignages
     courts sans rien apporter : un seul tient à l'écran à la fois. */
  .testimonial { padding: 0 24px; min-height: 0; }
  .testimonials { padding-top: 52px; }

  /* Sur les écrans étroits, les flèches posées sur les côtés recouvraient la
     citation : il ne reste pas assez de largeur pour les deux. Elles
     descendent sur la ligne des points, aux extrémités.
     44 px = padding bas (40) + demi-écart pour centrer sur les points. */
  .carousel-arrow {
    top: auto;
    bottom: 44px;
    transform: none;
  }
  .carousel-arrow--prev { left: 12px; }
  .carousel-arrow--next { right: 12px; }

  .livres { gap: 24px; }

  .contact__card { padding: 32px 22px; }

  /* Les formes du fond sont taillées pour un bandeau large : sur un écran
     étroit, le demi-disque passait derrière le titre et le bloc de gauche
     mangeait la première ligne. Elles rapetissent et se rangent aux bords. */
  .appel {
    padding: 30px 24px;
    background:
      radial-gradient(circle farthest-side at 0 50%,
                      var(--forme) 99.5%, transparent 100%)
        100% 82% / 44px 88px no-repeat,
      radial-gradient(circle farthest-side at 100% 0,
                      transparent 0 76%, var(--forme) 76.5% 78.5%, transparent 79%)
        100% 0 / 130px 130px no-repeat,
      radial-gradient(circle farthest-side at 100% 0,
                      var(--forme-pale) 99.5%, transparent 100%)
        100% 0 / 72px 72px no-repeat,
      linear-gradient(to bottom left, transparent 0 49.8%, var(--forme-pale) 50%)
        0 100% / 140px 74px no-repeat,
      linear-gradient(118deg,
                      color-mix(in srgb, var(--c-mint) 55%, var(--c-paper)),
                      var(--c-mint));
  }
  .appel__titre { font-size: 1.3125rem; }
  /* Sur un téléphone, en revanche, le bouton reprend toute la largeur : c'est
     la cible la plus facile à atteindre au pouce. */
  .appel__actions { align-self: stretch; }

  .footer { grid-template-columns: 1fr; }
  .footer__legal { flex-direction: column; gap: 8px; }
}

/* Respect de la préférence système « animations réduites ». */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Impression : on retire les fonds sombres et le superflu. */
@media print {
  .nav, .carousel-arrow, .carousel-dots, .hero__grain, .skip-link { display: none; }
  .section--dark, .contact, .footer { background: #fff; color: #000; }
  .testimonials__track { display: block; overflow: visible; }
  .testimonial { padding: 0 0 24px; }
}