/* ==========================================================================
   loic-martin.fr — Feuille de style unique
   Design system extrait de la maquette « Loic Martin - Site (autonome) ».
   Ordre : polices · tokens · reset · typographie · layout · composants ·
   utilitaires. Convention : classes préfixées par leur composant
   (bloc__element).
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. POLICES
   Auto-hébergées, sous-ensemblées par tools/polices.mjs (jeu latin réduit au
   nécessaire). Déclarées ici plutôt que dans un fichier séparé : une feuille
   de style de moins à télécharger avant le premier affichage.
   Aucun appel à fonts.googleapis.com (perf + RGPD).
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/caveat-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  /* Fichier latin figé sur la graisse 600 (la seule employée) par
     tools/polices.mjs : déclarer 400–700 ici ferait synthétiser un faux gras.
     Le fichier latin-ext, lui, reste variable. */
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/caveat-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Couleurs — reprises telles quelles de la maquette */
  --creme:          #F7F2E7;   /* fond principal */
  --blanc-carte:    #FAFAF8;   /* fond des cartes : un blanc à peine grisé */
  --creme-2:        #EDE6D6;   /* fond de placeholder */
  --creme-3:        #E2D9C4;   /* hachures de placeholder */
  --encre:          #111110;   /* texte principal, fonds sombres */
  --encre-clair:    #2C2A24;   /* survol des boutons sombres */
  --jaune:          #F2C230;   /* accent */
  --jaune-clair:    #FFDC63;   /* survol des boutons jaunes */
  --texte:          #26241F;   /* corps de texte sur crème */
  --gris-moyen:     #57534A;
  /* Assombri de #7A756A à #6F6A5F : la nuance d'origine tombait à 4,11:1 sur
     le crème, sous le seuil de 4,5:1 exigé pour du petit texte (légendes mono,
     mentions du pied de page, métier des avis). Ici 4,82:1. */
  --gris-doux:      #6F6A5F;
  --gris-clair:     #A8A296;   /* bordures pointillées */
  --sur-sombre:     #CFC9BC;   /* corps de texte sur encre */
  --ligne-sombre:   #3A382F;   /* filets sur fond encre */
  --erreur:         #A32E1F;
  /* Rouge annotation — usage unique : annotations manuscrites et tampons
     portés sur les pièces à conviction. Jamais un bouton, un fond, un titre. */
  --rouge-annotation: #B3401F;

  /* Typographie */
  --font-titre:  'Anton', 'Arial Narrow', sans-serif;
  --font-texte:  'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:   'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-manuscrite: 'Caveat', 'Bradley Hand', 'Segoe Print', cursive;

  /* Échelle fluide */
  /* Plafond abaissé de 62 à 54 px : à 62 px la ligne surlignée du hero
     (« qui veulent des clients ») passait sur deux lignes et repoussait le
     bouton sous la ligne de flottaison des portables 13". */
  --t-h1:      clamp(32px, 4.3vw, 54px);
  --t-h1-page: clamp(30px, 4.4vw, 54px);
  --t-h2:      clamp(25px, 3.5vw, 34px);
  --t-h2-fort: clamp(28px, 3.9vw, 50px);
  --t-h3:      clamp(22px, 2.4vw, 28px);
  --t-chiffre: clamp(32px, 3.6vw, 44px);
  --t-corps:   clamp(16px, 1.9vw, 18px);

  /* Structure */
  --largeur-max:  1280px;
  --gouttiere:    clamp(18px, 4vw, 40px);
  --section-y:    clamp(56px, 9vw, 96px);
  --bloc-y:       clamp(28px, 5vw, 56px);
  --trait:        1.5px solid var(--encre);
  --trait-sombre: 1px solid var(--ligne-sombre);
  --ombre-flottant: 0 14px 34px rgba(17, 17, 16, 0.28);
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  background: var(--creme);
  color: var(--encre);
  font-family: var(--font-texte);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; }
strong, b { font-weight: 700; }

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

/* Lien d'évitement — obligatoire pour la navigation au clavier */
.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--encre);
  color: var(--creme);
  padding: 12px 18px;
  font-family: var(--font-mono);
  font-size: 13px;
}
.saut-contenu:focus { left: 0; }

/* --------------------------------------------------------------------------
   3. TYPOGRAPHIE
   -------------------------------------------------------------------------- */
/* Anton (capitales) est réservée aux H1 et aux H2 de section : c'est elle qui
   donne le caractère affiche. Les H3 parlent calmement, en Archivo 800 et en
   casse de phrase normale. */
h1, h2, .titre {
  font-family: var(--font-titre);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.004em;
  text-transform: uppercase;
  text-wrap: balance;
}
h1  { font-size: var(--t-h1); line-height: 1.1; }
h2  { font-size: var(--t-h2); }
h3 {
  font-family: var(--font-texte);
  font-weight: 800;
  font-size: clamp(19px, 2.1vw, 23px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-transform: none;
  text-wrap: balance;
}

p { text-wrap: pretty; }

/* Surlignage jaune d'un fragment de titre (clone sur chaque ligne) */
.surlignage {
  background: var(--jaune);
  color: var(--encre);
  padding: 0 10px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* Ligne de titre surlignée, avec la respiration verticale de la maquette */
.ligne-surlignee {
  display: block;
  line-height: 1.5;
  margin-top: 0.03em;
}

/* Étiquette monospace en petites capitales */
.mono {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris-doux);
}
.mono--clair { color: var(--sur-sombre); }
.mono--normal { font-weight: 400; letter-spacing: 0.05em; text-transform: none; font-size: 12.5px; }

/* Badge incliné jaune (sur-titre du hero) */
.badge {
  display: inline-block;
  background: var(--jaune);
  padding: 7px 13px;
  font-family: var(--font-mono);
  font-size: clamp(10.5px, 1.3vw, 12.5px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-wrap: balance;
  --inclinaison: -1.2deg;
  transform: rotate(var(--inclinaison));
}
.badge--sombre { background: var(--encre); color: var(--creme); --inclinaison: -3deg; }

.intro {
  font-size: var(--t-corps);
  line-height: 1.55;
  color: var(--texte);
  max-width: 62ch;
}
.intro--large { font-size: clamp(17px, 2vw, 20px); line-height: 1.6; max-width: 800px; }

.texte-sombre { color: var(--sur-sombre); }
.sur-fond-sombre { color: var(--creme); }

/* Chiffre mis en avant */
.chiffre {
  font-family: var(--font-titre);
  font-size: var(--t-chiffre);
  line-height: 1.05;
  display: block;
}
.chiffre__legende {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--gris-moyen);
  display: block;
  margin-top: 6px;
}
.chiffre__legende--clair { color: var(--sur-sombre); }

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.conteneur {
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.section { padding-top: var(--section-y); }
.section--sombre {
  background: var(--encre);
  color: var(--creme);
  padding-block: var(--section-y);
  margin-top: var(--section-y);
}
.section--sombre h1, .section--sombre h2, .section--sombre h3 { color: var(--creme); }
.section--filet > .conteneur > *:first-child,
.section--filet > *:first-child { border-top: var(--trait); padding-top: 48px; }

/* En-tête de section : titre + filet */
.entete-section {
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
  border-bottom: var(--trait);
  padding-bottom: 14px;
}
.entete-section--sombre { border-bottom: var(--trait-sombre); }

/* Grilles auto-adaptatives — le point d'arrêt vient du contenu, pas du device */
.grille        { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.grille--large { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px; }
.grille--trois { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 32px 40px; }
.grille--deux  { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 32px 56px; }
/* Marge haute élargie : le trophée et sa légende débordent de la première carte
   vers le haut. Le plancher est calé sur les écrans étroits, où la légende passe
   sur cinq lignes et devient plus haute que le trophée lui-même. */
.grille--preuve { margin-top: clamp(190px, 16vw, 200px); }

/* --------------------------------------------------------------------------
   5. BOUTONS ET LIENS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--encre);
  color: var(--creme);
  font-weight: 800;
  font-size: 16px;
  padding: 16px clamp(20px, 3vw, 30px);
  border: 1.5px solid var(--encre);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn:hover { background: var(--encre-clair); }
.btn .fleche { color: var(--jaune); }

.btn--jaune { background: var(--jaune); color: var(--encre); border-color: var(--jaune); }
.btn--jaune:hover { background: var(--jaune-clair); border-color: var(--jaune-clair); }
.btn--jaune .fleche { color: var(--encre); }

.btn--petit { font-size: 12.5px; font-weight: 700; padding: 11px 16px; gap: 9px; }

.btn--fantome {
  background: transparent;
  color: var(--encre);
  border: var(--trait);
}
.btn--fantome:hover { background: var(--encre); color: var(--creme); }

/* Lien souligné (CTA secondaire) */
.lien-souligne {
  font-size: 15.5px;
  color: var(--texte);
  border-bottom: var(--trait);
  padding-bottom: 2px;
  transition: border-color .15s ease;
}
.lien-souligne:hover { border-bottom-color: var(--jaune); }
.lien-souligne--clair { color: var(--creme); border-bottom-color: var(--gris-doux); }
.lien-souligne--clair:hover { border-bottom-color: var(--jaune); }

/* Lien fort à soulignement jaune */
.lien-fort {
  font-weight: 800;
  font-size: 16px;
  border-bottom: 2px solid var(--jaune);
  padding-bottom: 1px;
}
.lien-fort:hover { background: var(--jaune); }

/* Groupe de CTA hero / fin de section */
.groupe-cta {
  display: flex;
  align-items: center;
  gap: 20px 26px;
  flex-wrap: wrap;
  margin-top: 32px;
}

/* Lien en pied de carte, séparé par un filet */
.lien-carte {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: var(--trait);
  padding-top: 18px;
  margin-top: auto;
  font-weight: 800;
  font-size: 15px;
}
.lien-carte span { transition: transform .15s ease; }
.lien-carte:hover span { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   6. EN-TÊTE
   -------------------------------------------------------------------------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--creme);
  border-bottom: var(--trait);
}
.entete__interieur {
  max-width: var(--largeur-max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  padding: 14px var(--gouttiere);
}
.logo { display: flex; align-items: center; gap: 10px; }
.logo__carre { width: 13px; height: 13px; border: var(--trait); background: var(--jaune); flex: 0 0 auto; }
.logo__texte { font-weight: 900; font-size: 17px; letter-spacing: -0.02em; }

.nav-principale {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 330px;
  justify-content: center;
  gap: 7px 13px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav-principale a { padding-bottom: 2px; border-bottom: 1.5px solid transparent; }
.nav-principale a:hover { border-bottom-color: var(--encre); }
.nav-principale a[aria-current="page"] { border-bottom-color: var(--jaune); font-weight: 700; }
/* Le CTA du menu ne sert qu'au panneau mobile : en desktop c'est .entete__cta qui l'affiche. */
.nav-principale .btn { display: none; }

/* Bouton hamburger — masqué au-dessus de 900px */
.entete__bascule {
  display: none;
  background: none;
  border: var(--trait);
  padding: 9px 11px;
  cursor: pointer;
  line-height: 0;
}
.entete__bascule svg { width: 20px; height: 14px; }

@media (max-width: 900px) {
  .entete__interieur { flex-wrap: nowrap; }
  .entete__bascule { display: block; }
  .entete__cta { display: none; }
  .nav-principale {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    background: var(--creme);
    border-bottom: var(--trait);
    padding: 8px var(--gouttiere) 22px;
    gap: 0;
    font-size: 13px;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
  }
  .nav-principale[data-ouvert="true"] { display: flex; }
  .nav-principale a { padding: 15px 0; border-bottom: 1px solid var(--gris-clair); }
  .nav-principale .btn { display: flex; justify-content: center; margin-top: 18px; font-size: 15px; border-bottom: none; }
}

/* --------------------------------------------------------------------------
   7. FIL D'ARIANE
   -------------------------------------------------------------------------- */
.fil-ariane {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gris-doux);
  padding-top: 22px;
}
.fil-ariane ol { display: flex; flex-wrap: wrap; gap: 8px; }
.fil-ariane li:not(:last-child)::after { content: "/"; margin-left: 8px; color: var(--gris-clair); }
.fil-ariane a:hover { color: var(--encre); }
.fil-ariane [aria-current="page"] { color: var(--encre); }

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 20px 32px;
  padding-top: var(--bloc-y);
  align-items: end;
}
.hero__texte { padding-bottom: clamp(28px, 4vw, 48px); }
.hero__texte h1 { margin-top: 22px; }
.hero__texte .intro { margin-top: 26px; max-width: 498px; }

.hero__visuel {
  position: relative;
  height: clamp(340px, 52vw, 560px);
  min-width: 260px;
}
/* Le disque jaune sous portrait détouré a été supprimé partout : c'est le
   cliché n° 1 des sites de freelance. */
.hero__photo {
  position: absolute;
  right: 9%;
  bottom: 0;
  height: 100%;
  max-height: 560px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .22));
}
.hero__note {
  position: absolute;
  left: 0;
  bottom: 14%;
  /* `max-content` garde chaque ligne d'un seul tenant (228 px nécessaires en
     desktop) ; le pourcentage reprend la main quand la colonne devient étroite. */
  width: max-content;
  max-width: min(64%, 240px);
  background: var(--encre);
  color: var(--creme);
  padding: 10px 13px;
  --inclinaison: -3deg;
  transform: rotate(var(--inclinaison));
  font-family: var(--font-mono);
  font-size: clamp(10px, 1.25vw, 12px);
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.hero__note span { color: var(--jaune); }

/* Variante « objet » du visuel de hero (page boutique en ligne).
   Le sujet n'est pas un portrait détouré mais le trophée Shopify. Trois écarts
   avec le hero de l'accueil :
   — pas de disque, le trophée porte seul, tenu par son ombre portée ;
   — le flux normal remplace le positionnement absolu, pour que la légende se
     pose sous le visuel au lieu de le recouvrir ;
   — la légende réutilise `.trophee__legende`, déjà écrite pour cet objet dans
     la section preuve de l'accueil. */
.hero__visuel--objet {
  height: auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2.2vw, 24px);
  padding-bottom: clamp(12px, 2vw, 28px);
}
.hero__visuel--objet .hero__photo {
  position: static;
  height: auto;
  max-height: none;
  /* Plafonné à la largeur native de la source détourée (478 px) : au-delà,
     la gravure du trophée deviendrait floue. */
  width: min(100%, 400px);
  filter: drop-shadow(0 20px 34px rgba(17, 17, 16, .3));
}
/* La marge basse alignait la légende sur un visuel en débord de carte. */
.hero__visuel--objet .trophee__legende { margin-bottom: 0; }

/* Hero de page intérieure — pas de visuel, titre + intro */
.hero-page { padding-top: clamp(26px, 4vw, 44px); padding-bottom: var(--bloc-y); }
.hero-page h1 { font-size: var(--t-h1-page); margin-top: 20px; }
.hero-page .intro { margin-top: 24px; }

/* --------------------------------------------------------------------------
   9. BARRE DE CRÉDIBILITÉ
   -------------------------------------------------------------------------- */
.barre-credibilite { background: var(--encre); }
.barre-credibilite__interieur {
  max-width: var(--largeur-max);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 1px;
  padding-inline: var(--gouttiere);
}
.barre-credibilite__item {
  flex: 1 1 210px;
  padding: 16px 24px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: var(--creme);
}
.barre-credibilite__item b { color: var(--jaune); font-weight: 700; }

/* Barre de preuve claire (accueil, réalisations) : chiffres en Anton,
   légendes en mono, tampon de relevé à droite. */
.barre-preuve { background: var(--blanc-carte); border-top: var(--trait); border-bottom: var(--trait); }
.barre-preuve__interieur {
  max-width: var(--largeur-max);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px 44px;
  padding: 26px var(--gouttiere);
}
.barre-preuve__item { flex: 1 1 190px; }
.barre-preuve__item .chiffre { font-size: clamp(26px, 3vw, 38px); }
.barre-preuve__tampon { flex: 0 1 auto; margin-left: auto; }
@media (max-width: 760px) {
  .barre-preuve__tampon { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   10. CARTES
   -------------------------------------------------------------------------- */
.carte {
  background: var(--creme);
  border: var(--trait);
  padding: clamp(22px, 3vw, 32px);
  display: flex;
  flex-direction: column;
}
.carte--sans-bord { border: none; padding: 0; }
.carte--sombre { background: var(--encre); color: var(--sur-sombre); border-color: var(--ligne-sombre); }
.carte--sombre h3 { color: var(--creme); }

/* Carte de segmentation (accueil) */
.carte-segment {
  position: relative;
  background: var(--blanc-carte);
  border: var(--trait);
  padding: clamp(24px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background .15s ease, transform .15s ease;
}
/* Pastille jaune posée sur l'angle d'une carte (« ma spécialité ») */
.carte-segment__pastille {
  position: absolute;
  top: -12px;
  right: 14px;
  background: var(--jaune);
  border: var(--trait);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  --inclinaison: -2deg;
  transform: rotate(var(--inclinaison));
}
.carte-segment:hover { background: var(--jaune); transform: translateY(-3px); }
.carte-segment h3 { font-size: clamp(20px, 2.3vw, 25px); }
.carte-segment p { color: var(--texte); font-size: 16.5px; }
.carte-segment .lien-carte { margin-top: 20px; }
/* Sur le jaune du survol, les gris perdent leur contraste : on repasse à l'encre. */
.carte-segment:hover .mono { color: var(--gris-moyen); }

/* Prix plancher, poussé en bas de carte pour aligner les deux cartes entre elles. */
.carte-segment__prix {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: var(--gris-moyen);
  border-top: 1.5px solid rgba(17, 17, 16, .18);
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.carte-segment__prix b {
  font-family: var(--font-titre);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1;
  color: var(--encre);
}

/* Carte de preuve (boutique) — fond crème posé sur la section sombre */
.carte-preuve {
  position: relative;
  background: var(--creme);
  color: var(--encre);
  display: flex;
  flex-direction: column;
  padding: 26px clamp(20px, 2.6vw, 30px) 30px;
}
.carte-preuve h3 { font-size: clamp(22px, 2.5vw, 28px); margin-top: 12px; color: var(--encre); }
.carte-preuve p { font-size: 16px; line-height: 1.6; color: var(--texte); margin-top: 22px; }
.carte-preuve .lien-carte { margin-top: 24px; }

/* Capture de boutique dans un cadre « fenêtre de navigateur » */
.capture { border: var(--trait); background: #fff; }
.capture__barre {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--encre);
  border-bottom: var(--trait);
}
.capture__point { width: 8px; height: 8px; border-radius: 50%; background: var(--gris-doux); flex: 0 0 auto; }
.capture__point:first-child { background: var(--jaune); }
.capture__url {
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--sur-sombre);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.capture__image {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
}

/* --------------------------------------------------------------------------
   10 bis. LA « PIÈCE » — composant signature du site
   Un cadre à filet noir contenant une capture ou une photo réelle :
   — en haut, une étiquette mono (PIÈCE N° 3 · ADMIN SHOPIFY · RELEVÉ LE …) ;
   — par-dessus l'image, une ou deux annotations manuscrites rouges (texte
     Caveat incliné, cercles et flèches tracés en SVG dans le HTML) ;
   — en bas quand c'est possible, un lien mono « vérifier par vous-même → ».
   Le composant remplace toutes les illustrations : uniquement des artefacts
   réels, jamais d'image de banque ni d'icône décorative.
   -------------------------------------------------------------------------- */
.piece {
  border: var(--trait);
  background: var(--blanc-carte);
  display: flex;
  flex-direction: column;
  margin: 0;
}
.piece__etiquette {
  font-family: var(--font-mono);
  font-size: clamp(10px, 1.2vw, 11.5px);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--encre);
  padding: 10px 14px;
  border-bottom: var(--trait);
  background: var(--blanc-carte);
}
.piece__visuel { position: relative; }
.piece__visuel img { width: 100%; height: auto; display: block; }
/* Variante « capture » : cadre les visuels au même format 16/10, pour que deux
   pièces posées côte à côte gardent des images de même hauteur (accueil). */
.piece__visuel--capture img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
}
/* Annotation manuscrite : posée en absolu sur le visuel, positionnée en
   pourcentages par des styles de placement dans le HTML (chaque pièce a les
   siens). L'inclinaison passe par --inclinaison pour rester compatible avec
   les apparitions au défilement. */
.piece__annotation {
  position: absolute;
  z-index: 2;
  font-family: var(--font-manuscrite);
  font-weight: 600;
  font-size: clamp(17px, 2.3vw, 24px);
  line-height: 1.1;
  color: var(--rouge-annotation);
  --inclinaison: -4deg;
  transform: rotate(var(--inclinaison));
  pointer-events: none;
  text-shadow: 0 0 6px rgba(250, 250, 248, 0.65);
}
/* Tracés au stylo (cercle, flèche) : un SVG inline posé sur le visuel.
   Le SVG déclare son propre viewBox et ses traits en currentColor. */
.piece__trace {
  position: absolute;
  z-index: 1;
  color: var(--rouge-annotation);
  pointer-events: none;
}
.piece__verifier {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 10px 14px;
  border-top: var(--trait);
  color: var(--gris-moyen);
}
.piece__verifier:hover { color: var(--encre); }
/* Pièce posée sur une section encre : le cadre passe en filet clair. */
.section--sombre .piece { border-color: var(--creme); }
.section--sombre .piece__etiquette,
.section--sombre .piece__verifier { border-color: rgba(17, 17, 16, .25); }

/* Annotation manuscrite posée dans le flux (hors pièce) : relie deux chiffres,
   souligne une date sur une frise. Décorative, toujours doublée par le texte. */
.annotation-libre {
  display: inline-block;
  font-family: var(--font-manuscrite);
  font-weight: 600;
  font-size: clamp(18px, 2.4vw, 25px);
  line-height: 1.1;
  color: var(--rouge-annotation);
  --inclinaison: -3deg;
  transform: rotate(var(--inclinaison));
}

/* Tampon de relevé : la date que porte chaque chiffre affiché.
   Rouge annotation autorisé ici — c'est un tampon porté sur une pièce. */
.tampon {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--rouge-annotation);
  border: 1.5px solid currentColor;
  padding: 4px 9px;
  --inclinaison: -2deg;
  transform: rotate(var(--inclinaison));
}

/* Sommaire mono cliquable sous le hero des pages longues :
   `Ce que ça coûte · Comment ça se passe · Questions` */
.sommaire {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gris-doux);
  border-top: var(--trait);
  border-bottom: var(--trait);
  padding: 12px 0;
}
.sommaire a { padding-bottom: 1px; border-bottom: 1.5px solid transparent; color: var(--gris-moyen); }
.sommaire a:hover { color: var(--encre); border-bottom-color: var(--jaune); }
.sommaire__separateur { color: var(--gris-clair); }

/* Trophée Shopify en débord de carte, à gauche.
   Ancré par le bas : quelle que soit sa largeur, exactement 84 px du trophée
   recouvrent la carte, le reste ressort sur le fond sombre de la section.
   Assez grand pour que la plaque gravée reste lisible. */
/* Bloc trophée : ancré sur le bord haut de la carte. Le visuel descend de 84 px
   dans la carte (marge négative), la légende reste alignée juste au-dessus du
   bord, sur le fond sombre de la section. */
.trophee-bloc {
  position: absolute;
  bottom: 100%;
  left: -16px;
  right: 0;
  z-index: 2;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  gap: clamp(10px, 1.6vw, 18px);
}
.trophee {
  flex: 0 0 auto;
  width: clamp(150px, 17vw, 205px);
  margin-bottom: -84px;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .5));
}

/* Trophée posé dans le flux (cas Numette) : photo simple, sans cadre. */
.trophee-libre {
  width: min(100%, 300px);
  margin-inline: auto;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .5));
}

/* Légende du trophée, à côté du visuel */
.trophee__legende {
  background: var(--jaune);
  color: var(--encre);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.45;
  padding: 7px 10px;
  margin-bottom: 14px;
  --inclinaison: -1.5deg;
  transform: rotate(var(--inclinaison));
}
.trophee__legende span {
  display: block;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 11px;
  margin-top: 2px;
}

/* Bandeau d'en-tête d'un cas d'étude */
.bandeau-cas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 1px;
  background: var(--ligne-sombre);
  border: 1.5px solid var(--ligne-sombre);
  margin-top: 32px;
}
.bandeau-cas__item { background: var(--encre); padding: 20px 22px; }

/* Placeholder visible pour un visuel non fourni */
.placeholder {
  border: 1.5px dashed var(--gris-clair);
  background-color: var(--creme-2);
  background-image: repeating-linear-gradient(135deg, var(--creme-3) 0 9px, var(--creme-2) 9px 18px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: #6B6559;
  aspect-ratio: 16 / 10;
}

/* Marqueur de contenu manquant, dans le corps du texte */
.a-fournir {
  background: repeating-linear-gradient(135deg, var(--creme-3) 0 6px, var(--creme-2) 6px 12px);
  border-bottom: 1.5px dashed var(--gris-clair);
  font-family: var(--font-mono);
  font-size: .85em;
  padding: 1px 5px;
  color: var(--gris-moyen);
  white-space: nowrap;
}
.section--sombre .a-fournir {
  background: rgba(207, 201, 188, .12);
  color: var(--sur-sombre);
  border-bottom-color: var(--gris-doux);
}

/* Avis client : carte blanche, guillemet ouvrant en accent, citation, puis
   initiale en pastille et identité.
   Volontairement sans photo (rarement disponible chez les clients TPE) :
   l'initiale tient le rôle de repère visuel sans créer de trou dans la grille.
   Sous 760px, les cartes deviennent un carrousel (§ 17). */
.avis {
  background: var(--blanc-carte);
  border: var(--trait);
  padding: clamp(20px, 2.6vw, 28px);
  display: flex;
  flex-direction: column;
}
/* Guillemet ouvrant en gros, dans la police de texte : celle du titre (Anton,
   très étroite) le rend méconnaissable à cette taille. */
.avis__guillemet {
  font-family: var(--font-texte);
  font-weight: 900;
  font-size: 54px;
  line-height: .62;
  color: var(--jaune);
}
.avis blockquote {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--texte);
  margin: 14px 0 22px;
}
.avis figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1.5px solid rgba(17, 17, 16, .18);
}
.avis__initiale {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: var(--jaune);
  border: var(--trait);
  font-family: var(--font-titre);
  font-size: 19px;
  line-height: 1;
}
.avis__qui { display: flex; flex-direction: column; gap: 2px; }
.avis__qui b { font-size: 15.5px; font-weight: 900; }
.avis__metier {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--gris-doux);
}

/* --------------------------------------------------------------------------
   11. LISTES ET MÉTHODE
   -------------------------------------------------------------------------- */
/* Bloc « comment je travaille » (maquette) : séparateur vertical, gros numéro
   jaune contourré d'encre, puis titre et texte. */
.methode__item { border-left: var(--trait); padding: 0 0 0 22px; }
/* Sélecteur redoublé : `.methode__item p` ci-dessous est plus spécifique qu'une
   classe seule et écraserait la taille et la couleur du numéro. */
.methode__item .methode__numero {
  font-family: var(--font-titre);
  font-size: clamp(46px, 5.5vw, 56px);
  line-height: 1;
  margin-top: 0;
  color: var(--jaune);
  -webkit-text-stroke: 1.5px var(--encre);
  paint-order: stroke fill;
}
.methode__item h3 {
  font-family: var(--font-texte);
  font-weight: 800;
  font-size: clamp(19px, 2vw, 21px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-transform: none;
  margin-top: 16px;
}
.methode__item p { margin-top: 12px; color: var(--texte); font-size: 16.5px; line-height: 1.6; }

/* Notes de la section tarifs : intitulé en mono, texte courant (maquette). */
.note-tarif + .note-tarif { border-left: var(--trait); padding-left: 28px; }
.note-tarif h3 {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris-doux);
}
.note-tarif p { margin-top: 12px; color: var(--texte); font-size: 16px; line-height: 1.7; }
@media (max-width: 760px) {
  .note-tarif + .note-tarif { border-left: none; padding-left: 0; }
}

/* Liste à puces carrées jaunes */
.liste-carree li {
  position: relative;
  padding-left: 26px;
  margin-top: 14px;
  color: var(--texte);
  font-size: 16.5px;
  line-height: 1.55;
}
.liste-carree li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 10px;
  height: 10px;
  background: var(--jaune);
  border: 1.5px solid var(--encre);
}
.section--sombre .liste-carree li { color: var(--sur-sombre); }
.section--sombre .liste-carree li::before { border-color: var(--jaune); }

/* Liste d'exclusions (« ce que je ne fais pas ») */
.liste-croix li {
  position: relative;
  padding-left: 26px;
  margin-top: 14px;
  color: var(--texte);
  font-size: 16.5px;
}
.liste-croix li::before {
  content: "×";
  position: absolute;
  left: 2px;
  top: -1px;
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--gris-doux);
}

/* Étapes de déroulement */
.etape { border-top: var(--trait); padding-top: 18px; }
.etape__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris-doux);
}
.etape__meta .duree { color: var(--encre); background: var(--jaune); padding: 2px 7px; }
/* Sur la carte tarif phare (fond jaune), la pastille s'inverse. */
.etape__meta .duree--inverse { background: var(--encre); color: var(--jaune); }
.etape h3 { font-size: clamp(19px, 2vw, 23px); margin-top: 14px; }
.etape p { margin-top: 10px; font-size: 15.5px; color: var(--texte); }

/* Parcours client (accueil, « ce que ça vous demande ») : des cartes reliées
   par une flèche, pour qu'on voie tout de suite que les étapes s'enchaînent.
   Volontairement plus « boîte » que le bloc « comment je travaille » juste
   au-dessus, qui n'est qu'une colonne de texte à filet.
   Trois colonnes fixes : la flèche de liaison doit savoir de quel côté
   pointer, ce qu'une grille auto-adaptative ne permet pas. */
.parcours {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
}
.parcours__etape {
  position: relative;
  background: var(--blanc-carte);
  border: var(--trait);
  display: flex;
  flex-direction: column;
}
/* Flèche de liaison, centrée dans la gouttière : -(gap/2 + largeur/2). */
.parcours__etape:not(:last-child)::after {
  content: "→";
  /* Même flèche, mais annoncée comme décorative : les lecteurs d'écran
     n'ont pas à lire « flèche vers la droite » entre deux étapes.
     La déclaration précédente sert de repli aux navigateurs anciens. */
  content: "→" / "";
  position: absolute;
  top: 44px;
  right: -35px;
  z-index: 1;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: var(--jaune);
  border: var(--trait);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1;
  color: var(--encre);
}
.parcours__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  flex-wrap: wrap;
  background: var(--encre);
  color: var(--creme);
  padding: 11px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.parcours__duree {
  background: var(--jaune);
  color: var(--encre);
  padding: 3px 8px;
  letter-spacing: 0.06em;
}
.parcours__corps { padding: 22px clamp(18px, 2.4vw, 26px) 26px; }
.parcours h3 { font-size: clamp(19px, 2vw, 23px); }
.parcours__corps p { margin-top: 12px; font-size: 15.5px; color: var(--texte); }

@media (max-width: 880px) {
  .parcours { grid-template-columns: 1fr; gap: 42px; }
  .parcours__etape:not(:last-child)::after {
    top: auto;
    right: auto;
    bottom: -34px;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
  }
}

/* Puces de zone d'intervention */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  font-family: var(--font-mono);
  font-size: 13px;
  border: var(--trait);
  padding: 9px 15px;
}
.chip--actif { background: var(--jaune); }
.chip--flou { border: 1.5px dashed var(--gris-clair); color: var(--gris-moyen); }

/* Encadré pointillé (relance vers l'automatisation) */
.encadre-pointille {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding: 18px 22px;
  border: 1.5px dashed var(--gris-clair);
}
.encadre-pointille > span { font-size: 16px; color: var(--texte); }

/* --------------------------------------------------------------------------
   12. TARIFS
   -------------------------------------------------------------------------- */
.carte-tarif {
  border: var(--trait);
  padding: clamp(22px, 2.6vw, 30px);
  display: flex;
  flex-direction: column;
  background: var(--creme);
}
.carte-tarif--phare { background: var(--jaune); }
/* Le titre reprend la couleur d'encre : .etape__meta grise ses propres enfants. */
.carte-tarif h3 { font-size: clamp(19px, 2.1vw, 23px); color: var(--encre); }
.carte-tarif__prix { margin-top: 18px; }
.carte-tarif__prix .a-partir {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris-moyen);
  display: block;
}
.carte-tarif__prix .montant {
  font-family: var(--font-titre);
  font-size: clamp(34px, 4vw, 46px);
  line-height: 1.05;
  display: block;
  margin-top: 6px;
}
.carte-tarif__delai {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--gris-moyen);
  border-top: 1.5px solid rgba(17, 17, 16, .2);
  margin-top: 20px;
  padding-top: 14px;
}
.carte-tarif ul { margin-top: 18px; }

/* --------------------------------------------------------------------------
   13. FAQ
   -------------------------------------------------------------------------- */
.faq { border-top: var(--trait); margin-top: 34px; }
.faq__item { border-bottom: var(--trait); }
.faq__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  cursor: pointer;
  font-weight: 700;
  font-size: clamp(16px, 1.9vw, 18.5px);
  line-height: 1.45;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 22px;
  line-height: 1;
  flex: 0 0 auto;
  color: var(--gris-doux);
  transition: transform .15s ease;
}
.faq__item[open] summary::after { content: "−"; color: var(--encre); }
.faq__item summary:hover { color: var(--gris-moyen); }
.faq__reponse { padding: 0 0 24px; max-width: 74ch; color: var(--texte); font-size: 16.5px; }
.faq__reponse p + p { margin-top: 14px; }
.faq__reponse a { border-bottom: 2px solid var(--jaune); font-weight: 600; }

/* --------------------------------------------------------------------------
   14. FORMULAIRE
   -------------------------------------------------------------------------- */
.formulaire { display: flex; flex-direction: column; gap: 20px; }
.champ { display: flex; flex-direction: column; gap: 7px; }
.champ__label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.champ__label .option { color: var(--gris-doux); font-weight: 400; }
.champ input[type="text"],
.champ input[type="email"],
.champ input[type="tel"],
.champ textarea {
  border: var(--trait);
  background: var(--creme);
  padding: 13px 14px;
  font-size: 16px;
  width: 100%;
}
.champ textarea { min-height: 140px; resize: vertical; }
.champ input:focus, .champ textarea:focus { background: #FFFDF6; }

.choix { display: flex; flex-wrap: wrap; gap: 10px; }
.choix label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: var(--trait);
  padding: 10px 15px;
  font-family: var(--font-mono);
  font-size: 13px;
  cursor: pointer;
}
.choix input { accent-color: var(--encre); }
.choix label:has(input:checked) { background: var(--jaune); font-weight: 700; }

.consentement {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--texte);
}
.consentement input { margin-top: 3px; accent-color: var(--encre); flex: 0 0 auto; }
.consentement a { border-bottom: 2px solid var(--jaune); }

/* Piège à robots — jamais visible, jamais focusable */
.pot-de-miel { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.reassurance {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--gris-moyen);
}

/* Les trois façons de me joindre (/contact/) : la réservation domine,
   l'écrit au milieu, le téléphone en colonne étroite. Empilées sur mobile
   dans le même ordre. */
.contact-colonnes {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 0.7fr);
  gap: 24px;
  align-items: start;
}
@media (max-width: 980px) {
  .contact-colonnes { grid-template-columns: 1fr; }
}
.contact-colonnes .carte { position: relative; }

/* --------------------------------------------------------------------------
   15. CTA FINAL ET PIED DE PAGE
   -------------------------------------------------------------------------- */
.cta-final__coordonnees {
  border-left: var(--trait-sombre);
  padding-left: clamp(22px, 3vw, 44px);
  min-width: 250px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cta-final__tel {
  font-family: var(--font-titre);
  font-size: 26px;
  letter-spacing: 0.004em;
  color: var(--creme);
  margin-top: 8px;
}
.cta-final__tel:hover { color: var(--jaune); }
.cta-final__mail { font-family: var(--font-mono); font-size: 13.5px; color: var(--jaune); }
@media (max-width: 720px) {
  .cta-final__coordonnees { border-left: none; border-top: var(--trait-sombre); padding-left: 0; padding-top: 28px; }
}

.pied {
  background: var(--creme);
  padding: 44px 0 40px;
  margin-top: 0;
}
.pied__interieur {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px 40px;
  flex-wrap: wrap;
}
.pied__liens {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 40px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 2;
  color: var(--gris-moyen);
}
.pied__colonne { display: flex; flex-direction: column; }
.pied__colonne a:hover { color: var(--encre); }
.pied__legal {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.8;
  color: var(--gris-doux);
  text-align: right;
}
@media (max-width: 720px) { .pied__legal { text-align: left; } }

/* --------------------------------------------------------------------------
   16. BARRE D'ACTION MOBILE
   Apparaît après 40 % de défilement (classe posée par site.js).
   -------------------------------------------------------------------------- */
.barre-mobile {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: none;
  border-top: var(--trait);
  transform: translateY(100%);
  transition: transform .22s ease;
}
.barre-mobile[data-visible="true"] { transform: translateY(0); }
.barre-mobile a {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 10px;
  font-weight: 800;
  font-size: 15px;
  background: var(--encre);
  color: var(--creme);
}
.barre-mobile a + a { border-left: var(--trait); background: var(--jaune); color: var(--encre); }
@media (max-width: 760px) {
  .barre-mobile { display: flex; }
  body { padding-bottom: 0; }
}

/* --------------------------------------------------------------------------
   17. CARROUSEL (mobile uniquement)
   Au-dessus de 760px, la piste reste la grille d'origine : rien ne change.
   En dessous, elle défile horizontalement au doigt, avec accrochage sur les
   cartes. Les pastilles sont fabriquées par site.js.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .carrousel__piste {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(84%, 330px);
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gouttiere);
    /* Débord jusqu'aux bords de l'écran : on voit qu'il y a une suite. */
    margin-inline: calc(var(--gouttiere) * -1);
    padding-inline: var(--gouttiere);
    scrollbar-width: none;
  }
  .carrousel__piste::-webkit-scrollbar { display: none; }
  .carrousel__piste > * { scroll-snap-align: start; }
}

.carrousel__points { display: none; }
@media (max-width: 760px) {
  .carrousel__points { display: flex; justify-content: center; gap: 4px; margin-top: 18px; }
}
.carrousel__point {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  cursor: pointer;
}
.carrousel__point::before {
  content: "";
  width: 11px;
  height: 11px;
  border: var(--trait);
  transition: background .15s ease;
}
.carrousel__point[aria-current="true"]::before { background: var(--jaune); }

/* --------------------------------------------------------------------------
   18. PAGES LÉGALES
   -------------------------------------------------------------------------- */
/* Fiche d'identité légale : une liste de définitions en deux colonnes,
   étiquette monospace à gauche, valeur à droite. Un tableau serait plus lourd
   à lire au lecteur d'écran pour ce qui reste une suite de paires. */
.fiche-legale { border-top: var(--trait); }
.fiche-legale__ligne {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr;
  gap: 4px 32px;
  padding: 15px 0;
  border-bottom: var(--trait);
}
.fiche-legale dt {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris-doux);
  padding-top: 0.35em;
}
.fiche-legale dd { color: var(--texte); font-size: 16.5px; line-height: 1.55; }
.fiche-legale dd a { border-bottom: 2px solid var(--jaune); font-weight: 600; }
.fiche-legale dd .precision { display: block; color: var(--gris-moyen); font-size: 15px; margin-top: 4px; }
/* Sous 620 px, les deux colonnes ne tiennent plus : l'étiquette passe au-dessus. */
@media (max-width: 620px) {
  .fiche-legale__ligne { grid-template-columns: 1fr; gap: 5px; }
}

/* Corps de texte des pages légales : paragraphes qui se suivent, largeur de
   lecture bornée, liens soulignés de jaune comme dans les réponses de FAQ. */
.texte-legal { max-width: 74ch; color: var(--texte); font-size: 16.5px; line-height: 1.7; }
.texte-legal > * + * { margin-top: 16px; }
.texte-legal h3 { color: var(--encre); font-size: clamp(17px, 1.9vw, 19px); margin-top: 28px; }
.texte-legal a { border-bottom: 2px solid var(--jaune); font-weight: 600; }

/* --------------------------------------------------------------------------
   19. AGENDA DE RÉSERVATION (Cal.com)
   Conteneur de l'agenda embarqué sur /contact. Il est monté par site.js (§ 6),
   qui pose `data-etat` au fil du chargement. Les couleurs de l'iframe sont
   passées à Cal.com côté JavaScript : elles ne peuvent pas venir d'ici.
   -------------------------------------------------------------------------- */
/* La hauteur réservée pendant le chargement approche celle de l'agenda rendu
   (environ 465 px en vue colonne) : le bloc ne saute pas quand l'iframe arrive.
   Une fois prête, elle mesure elle-même sa hauteur, et la contrainte tombe. */
.agenda {
  position: relative;
  border: var(--trait);
  background: var(--blanc-carte);
  min-height: 460px;
}

/* Trois états sans iframe à afficher : aucun `data-etat` du tout, donc pas de
   JavaScript ; l'échec de chargement ; et l'agenda prêt, qui se mesure seul. */
.agenda:not([data-etat]),
.agenda[data-etat="erreur"],
.agenda[data-etat="pret"] { min-height: 0; }

.agenda__repli {
  padding: 26px 24px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--texte);
}
.agenda[data-etat] .agenda__repli { display: none; }
.agenda[data-etat="erreur"] .agenda__repli { display: block; }

.agenda[data-etat="chargement"]::after {
  content: "Chargement de l’agenda…";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--gris-doux);
}

/* --------------------------------------------------------------------------
   20. UTILITAIRES
   -------------------------------------------------------------------------- */
.mt-0   { margin-top: 0; }
.mt-8   { margin-top: 8px; }
.mt-12  { margin-top: 12px; }
.mt-20  { margin-top: 20px; }
.mt-26  { margin-top: 26px; }
.mt-32  { margin-top: 32px; }
.mt-44  { margin-top: 44px; }
.mt-72  { margin-top: 72px; }
.mb-0   { margin-bottom: 0; }
.pb-section { padding-bottom: var(--section-y); }
.centre { text-align: center; }
.nowrap { white-space: nowrap; }

/* Classes remplaçant les anciens styles inline (hygiène du design system). */
.grille--centre { align-items: center; }
.grille--une { grid-template-columns: 1fr; gap: 32px; }
.bord-haut { border-top: var(--trait); padding-top: 48px; }
.bord-haut-sombre { border-top: 1px solid var(--ligne-sombre); }
.titre-cta { font-size: var(--t-h2-fort); }
.intro--cta { font-size: 18px; max-width: 620px; }
.max-74ch { max-width: 74ch; }
.chiffre--jaune { color: var(--jaune); }
.chiffre--clair { color: var(--creme); }
.h3-titre { font-size: var(--t-h3); }
.h3-grand { font-size: clamp(24px, 2.8vw, 32px); }
.cadre-photo {
  border: var(--trait);
  background: var(--blanc-carte);
  padding: 10px;
  margin: 0;
}
.cadre-photo img { display: block; width: 100%; height: auto; }
.visuellement-cache {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media print {
  .entete, .barre-mobile, .btn { display: none !important; }
  body { background: #fff; color: #000; }
}