/* ═══════════════════════════════════════════════════════════════
   St Roch Services — Design system v4 « Emerald Ink / Champagne »
   Épuré · liquid glass · aucune ombre portée · radius boutons seuls
   Fonts : Intro (titres & corps) + Roboto Mono italic (accents)
═══════════════════════════════════════════════════════════════ */

/* ─── Fonts ────────────────────────────────────────────────────
   Intro (Fontfabric) est une police commerciale, non fournie ici.
   Montserrat (chargé via Google Fonts dans le <head>) sert de
   doublure géométrique proche.

   POUR ACTIVER INTRO : déposer Intro-Regular.woff2, Intro-Medium.woff2
   et Intro-Bold.woff2 dans /fonts, puis décommenter le bloc ci-dessous.
   Il reste commenté tant que les fichiers sont absents, sinon le
   navigateur émet trois requêtes 404 à chaque chargement de page.

@font-face {
  font-family: 'Intro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Intro-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Intro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Intro-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Intro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Intro-Bold.woff2') format('woff2');
}
*/

/* ─── Polices auto-hébergées ─────────────────────────────────
   Montserrat et Roboto Mono, sous-ensemble latin, servies depuis /fonts.
   Ce sont des polices VARIABLES : un seul fichier par famille et style
   couvre toutes les graisses (Google en servait quatre copies identiques).
   Avant : une feuille Google Fonts bloquante, deux origines de plus sur
   le chemin critique, et une exposition RGPD. Les url() sont relatives à
   style.css, donc valables depuis toutes les pages. */
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url('fonts/montserrat.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: 'Roboto Mono'; font-style: normal; font-weight: 400 500;
  font-display: swap; src: url('fonts/roboto-mono.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: 'Roboto Mono'; font-style: italic; font-weight: 400 500;
  font-display: swap; src: url('fonts/roboto-mono-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;
}

/* ─── Tokens ─────────────────────────────────────────────────── */
:root {
  color-scheme: only light;
  /* Palette — les canaux RVB sont la source unique : toutes les variantes
     translucides en dérivent, donc changer une couleur les met toutes à jour. */
  --ink-rgb:        6, 78, 59;      /* Emerald Ink */
  --ink-deep-rgb:   4, 55, 42;
  --champagne-rgb:  248, 231, 201;  /* Champagne */
  /* Halo des sections — gris sidéral, froid et neutre. Il remplace le
     champagne, qui reste réservé aux cartes. */
  --halo-rgb:       104, 116, 126;
  --paper-rgb:      255, 255, 255;   /* blanc professionnel */
  --white-rgb:      255, 255, 255;
  --wa-rgb:         37, 211, 102;   /* WhatsApp */
  --wa-deep-rgb:    29, 175, 84;
  /* Voile du hero : gris ardoise à peine teinté de vert, plutôt que
     l'Emerald pur qui verdissait toute la photo. */
  --veil-rgb:       44, 52, 49;

  --ink:        rgb(var(--ink-rgb));
  --champagne:  rgb(var(--champagne-rgb));
  --paper:      rgb(var(--paper-rgb));
  --white:      rgb(var(--white-rgb));
  --wa:         rgb(var(--wa-rgb));
  --wa-deep:    rgb(var(--wa-deep-rgb));
  --danger:     #B23A3A;
  /* Émeraude clair, même teinte que --ink mais éclairci pour ressortir
     sur le voile sombre du hero (contraste 6,8). */
  --emerald-bright: #3EE0B2;
  /* Émeraude intermédiaire : plus lumineux que --ink sur fond clair.
     C'est la teinte la plus claire qui garde le texte blanc au-dessus
     du seuil AA (contraste 4,6 ; le minimum est 4,5). */
  --emerald-mid:    #0D8564;
  /* Blanc cassé des titres de hero : un blanc pur sur photo « vibre »
     et fatigue la lecture ; ce gris très clair pose le texte sans
     perdre de contraste. */
  --off-white:      #F2F5F3;

  /* Fonds de section : uniquement ces deux-là.
     --paper  = blanc pur
     --mist   = emerald très dilué, tire vers le blanc
     Le champagne ne sert plus qu'aux cartes. */
  --mist:       #F1F6F3;
  /* Équivalent opaque de rgba(--ink, 0.09) posé sur --mist. Opaque parce
     que l'étiquette « optionnel » chevauche le bord de la carte : elle
     couvre deux fonds différents et doit garder la même teinte. */
  --chip:       #DCE7E2;
  --card-bg:    var(--champagne);

  /* Texte — strictement noir sur fond clair, blanc sur fond sombre.
     Les variantes « muted » restent du noir/blanc, seule l'opacité varie,
     ce qui préserve la hiérarchie sans introduire de couleur. */
  --black:      #000000;
  --black-rgb:  0, 0, 0;
  --text:       var(--black);
  --text-muted: rgba(0, 0, 0, 0.62);
  --text-faint: rgba(0, 0, 0, 0.16);   /* numéros de carte, repère discret */
  --on-ink:     var(--white);
  --on-ink-muted: rgba(var(--white-rgb), 0.76);

  /* Traits */
  --line:       rgba(var(--ink-rgb), 0.14);
  --line-strong:rgba(var(--ink-rgb), 0.28);
  --line-on-ink:rgba(var(--champagne-rgb), 0.22);

  /* Verre */
  --glass-bg:        rgba(var(--white-rgb), 0.42);
  --glass-blur:      22px;

  /* Verre des boutons — assez opaque pour rester lisible et cliquable */
  --btn-blur:            14px;
  --ink-glass:           rgba(var(--ink-rgb), 0.82);
  --ink-glass-hover:     rgba(var(--ink-deep-rgb), 0.92);
  --champagne-glass:     rgba(var(--champagne-rgb), 0.82);
  --champagne-glass-hv:  rgba(var(--white-rgb), 0.92);
  --ghost-glass:         rgba(var(--white-rgb), 0.30);
  --ghost-glass-hover:   rgba(var(--white-rgb), 0.48);
  --ghost-glass-ink:     rgba(var(--champagne-rgb), 0.12);
  --ghost-glass-ink-hv:  rgba(var(--champagne-rgb), 0.22);

  /* Typo */
  --sans:  'Intro', 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono:  'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs:  0.8125rem;
  --text-sm:  0.9rem;
  --text-base:1rem;
  --text-md:  1.125rem;
  --text-lg:  clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  --text-xl:  clamp(1.9rem, 1.4rem + 2vw, 2.75rem);
  --text-2xl: clamp(1.85rem, 1rem + 3.1vw, 3.5rem);

  /* Rythme */
  --radius-btn: 4px;       /* boutons */
  --radius-field: 14px;    /* champs de formulaire — registre Revolut */
  --radius-card: 8px;      /* panneaux et cartes — arrondi très subtil */
  /* La barre d'audience a disparu avec le recentrage sur les punaises de
     lit ; --header-h ne compte donc plus qu'un étage. Le token est conservé
     pour les styles de .audience-bar, encore utilisés par les pages pro
     mises de côté dans _pro/. */
  --audience-h: 40px;
  --header-main-h: 72px;
  --header-h: var(--header-main-h);
  --container: 1200px;
  --gutter: clamp(20px, 4vw, 48px);
  --section-y: clamp(72px, 9vw, 128px);

  --tl-gap: clamp(16px, 2vw, 28px);  /* gouttière de la timeline */
  --tl-cols: 4;                      /* nombre d'étapes de la timeline */

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
/* Échelle globale. Tout le système typographique est en rem, donc cette
   seule valeur dézoome l'ensemble du site. Exprimée en pourcentage et non
   en pixels : elle reste ainsi relative à la taille de police choisie par
   l'utilisateur dans son navigateur. 94,5 % = 15,12px pour un défaut à 16. */
html {
  font-size: 94.5%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
/* Une classe qui pose display: bat la règle [hidden] du navigateur.
   Sans ce garde-fou, masquer un bloc via l'attribut hidden n'a aucun effet. */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
sup { font-size: 0.6em; line-height: 0; vertical-align: super; }
strong { font-weight: 700; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
::selection { background: var(--ink); color: var(--on-ink); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ─── Typo ───────────────────────────────────────────────────── */
h1, h2, h3 {
  font-family: var(--sans);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.08;
}
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); letter-spacing: -0.01em; }

/* Mot surligné dans un titre : même police, seule la couleur change.
   Réservé aux fonds sombres, illisible sur fond clair. */
.hero h1 .hl, .hero--page h1 .hl { color: var(--emerald-bright); }

/* Mot accentué — Roboto Mono italic.
   Une monospace est nettement plus large qu'une serif à taille égale :
   on réduit le corps et on resserre l'interlettrage pour compenser. */
.accent, em.accent {
  font-family: var(--mono);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.03em;
  font-size: 0.88em;
  line-height: 1;
}

.eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 18px;
}
.lead { font-size: var(--text-md); color: var(--text-muted); line-height: 1.65; max-width: 62ch; }
.muted { color: var(--text-muted); }

/* ─── Layout ─────────────────────────────────────────────────── */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
/* Conteneur élargi — utilisé par le bloc des trois principes. */
.container--wide { max-width: 1440px; }
.section { position: relative; padding: var(--section-y) 0; }
/* Une URL ouverte directement sur une ancre atterrissait sous le header fixe :
   le défilement doux du JS ne s'applique qu'aux clics internes. */
/* Décalage des ancres sous le header fixe. La liste est explicite : un
   sélecteur [id] nu, non scopé, avait déjà cassé la mise en page. Elle doit
   couvrir TOUS les éléments réellement ciblés par une ancre — le panneau
   devis est un div, les trois sujets de la page info sont des article. */
main section[id], main article[id], main div[id],
main h2[id], main h3[id] { scroll-margin-top: calc(var(--header-h) + 24px); }
/* Deux fonds de section : --paper (blanc, appliqué par le body) et --mist
   (emerald très dilué). Le texte y est noir dans les deux cas. */
.section--mist { background: var(--mist); }
.section--tight { padding: clamp(48px, 6vw, 80px) 0; }

.section-head { max-width: 780px; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head .lead { margin-top: 18px; }
.section-head--center .lead { margin-left: auto; margin-right: auto; }

/* Halos « liquides » : donnent au verre quelque chose à réfracter */
.section--liquid { overflow: hidden; overflow: clip; }  /* clip : pas de conteneur de défilement, un lien profond ne fait plus défiler la section elle-même */
/* Halos larges et très diffus : la lumière traverse la section
   au lieu de marquer les coins. */
.section--liquid::before,
.section--liquid::after {
  content: '';
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(90px);
  z-index: 0;
}
.section--liquid::before {
  width: 76vw; height: 76vw; max-width: 1080px; max-height: 1080px;
  top: -30%; right: -22%;
  background: radial-gradient(circle, rgba(var(--ink-rgb), 0.14), transparent 72%);
}
.section--liquid::after {
  width: 62vw; height: 62vw; max-width: 880px; max-height: 880px;
  bottom: -34%; left: -18%;
  background: radial-gradient(circle, rgba(var(--halo-rgb), 0.34), transparent 74%);
}
.section--liquid > .container { position: relative; z-index: 1; }

/* ─── Bandeau ────────────────────────────────────────────────── */
.band {
  background: var(--mist);
  border-top: 1px solid rgba(var(--ink-rgb), 0.10);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.10);
}
.band-inner {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  padding: 16px 0;
}
.band-cert-text { line-height: 1.3; }
.band-cert-name {
  display: block;
  font-size: var(--text-sm); font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--text);
}
.band-cert-sub { display: block; font-size: var(--text-xs); color: var(--text-muted); }
/* Sceau d'agrément carré (1000x1000) : on le dimensionne par la hauteur,
   la largeur suit le ratio 1:1. */
.band-logo { flex: none; line-height: 0; }
.band-logo img { width: auto; height: clamp(68px, 7vw, 92px); }

/* ─── Verre ──────────────────────────────────────────────────── */
.glass {
  position: relative;
  background: var(--card-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border-radius: var(--radius-card);
}

/* ─── Boutons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 46px;
  padding: 0 22px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.005em;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  -webkit-backdrop-filter: blur(var(--btn-blur)) saturate(180%);
  backdrop-filter: blur(var(--btn-blur)) saturate(180%);
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-lg { height: 54px; padding: 0 30px; font-size: 1rem; }

/* Bordure transparente : de la même couleur translucide que le fond, elle
   se superposait à lui et dessinait un contour plus foncé. */
.btn-primary { background: var(--ink-glass); color: var(--on-ink); border-color: transparent; }
.btn-primary:hover { background: var(--ink-glass-hover); border-color: transparent; }

.btn-light { background: var(--champagne-glass); color: var(--text); border-color: var(--champagne-glass); }
.btn-light:hover { background: var(--champagne-glass-hv); border-color: var(--champagne-glass-hv); }

.btn-ghost { background: var(--ghost-glass); color: var(--text); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--ghost-glass-hover); border-color: var(--ink); }
.btn-ghost--on-ink { background: var(--ghost-glass-ink); color: var(--on-ink); border-color: var(--line-on-ink); }
.btn-ghost--on-ink:hover { background: var(--ghost-glass-ink-hv); border-color: var(--champagne); }

/* WhatsApp reste plein, sans dégradé. Texte NOIR : le blanc sur ces verts
   tombait à 2,87 de contraste (1,98 au survol), sous le seuil AA de 4,5.
   Le noir donne 7,31 sur le vert foncé et 10,59 sur le vert vif. */
.btn-wa { background: var(--wa-deep); color: var(--white); border-color: var(--wa-deep); }  /* blanc : choix du client, contraste 2,87 en connaissance de cause */
.btn-wa:hover { background: var(--wa); border-color: var(--wa); }

.btn[disabled] { opacity: .6; cursor: default; }

/* ─── Barre d'audience ───────────────────────────────────────── */
.audience-bar {
  height: var(--audience-h);
  background: var(--ink);
  color: var(--on-ink);
}
.audience-inner { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
.audience-phone {
  font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.03em;
  color: var(--on-ink);
}
.audience-phone:hover { text-decoration: underline; text-underline-offset: 3px; }
.audience-switch { grid-column: 2; display: flex; height: 100%; justify-self: center; }
.audience-tab {
  display: flex; align-items: center;
  padding: 0 22px;
  font-size: var(--text-sm); font-weight: 600;
  color: var(--on-ink-muted);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.audience-tab:hover { color: var(--on-ink); }
.audience-tab.is-active { background: var(--paper); color: var(--text); }

/* ─── Header ─────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  /* Plus opaque et moins saturé : le vert du hero traversait trop la barre */
  background: rgba(var(--paper-rgb), 0.72);
  -webkit-backdrop-filter: blur(24px) saturate(120%);
  backdrop-filter: blur(24px) saturate(120%);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.10);
  transition: background-color .3s var(--ease);
}
.site-header.scrolled { background: rgba(var(--paper-rgb), 0.92); }
.header-main { height: var(--header-main-h); }
.header-inner { height: 100%; display: flex; align-items: center; gap: 32px; }

.logo { display: inline-flex; align-items: center; color: var(--text); }

/* Lockup de marque : « SAINT ROCH » très espacé, souligné d'un filet
   de la largeur exacte du mot. Le filet porte sur le conteneur, dont
   la largeur s'ajuste au texte ; la marge négative sur le mot annule
   le blanc que l'interlettrage ajoute après le dernier caractère,
   sinon le filet dépasserait du H. */
.logo-lockup {
  display: inline-block; line-height: 1;
  padding-bottom: 5px;
  border-bottom: 2px solid currentColor;
}
.logo-top {
  display: block;
  font-weight: 600; font-size: 1.1rem;
  letter-spacing: 0.2em; margin-right: -0.2em;
  white-space: nowrap;
}

.main-nav { display: flex; gap: 28px; margin-left: 12px; }
.main-nav a {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--ink); }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.header-actions .btn { height: 42px; gap: 0.28em; }  /* « Devis » + « gratuit » sont deux items flex : le gap de .btn (10 px) faisait un double espace */
.header-actions .link-espace { font-size: var(--text-sm); font-weight: 500; color: var(--text); }
.header-actions .link-espace:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Le numéro était porté par la barre d'audience ; il remonte ici pour
   rester visible sans scroller, comme l'exige la charte du projet. */
.header-phone {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--text-sm); font-weight: 700;
  letter-spacing: 0.04em; color: var(--text);
  white-space: nowrap;
}
.header-phone svg { width: 17px; height: 17px; flex: none; }
.header-phone:hover .header-phone-txt { text-decoration: underline; text-underline-offset: 4px; }

/* Hamburger */
/* Pas de margin-left:auto ici : seul .header-actions pousse vers la droite,
   sinon l'espace libre se répartit entre les deux et le bouton flotte au milieu. */
.hamburger {
  display: none;
  width: 44px; height: 44px;
  flex: none;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
}
.hamburger span { display: block; width: 22px; height: 0; border-top: 1.5px solid var(--ink);  /* une bordure survit au mode couleurs forcées, un fond non */ transition: transform .25s var(--ease), opacity .2s; }
.hamburger.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Tiroir mobile */
.mobile-nav-overlay {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(var(--ink-deep-rgb), 0.35);
  opacity: 0; pointer-events: none;
  transition: opacity .25s var(--ease);
}
.mobile-nav-overlay.open { opacity: 1; pointer-events: auto; }
.mobile-nav {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 120;
  width: min(360px, 88vw);
  padding: 24px 28px 32px;
  display: flex; flex-direction: column; gap: 4px;
  background: rgba(var(--paper-rgb), 0.86);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  backdrop-filter: blur(28px) saturate(170%);
  transform: translateX(100%);
  /* visibility, et pas seulement translateX : un simple décalage laisse le
     tiroir dans l'ordre de tabulation, donc cinq arrêts invisibles hors
     écran, sous un aria-hidden que le navigateur refuse alors d'honorer.
     La transition sur visibility est différée pour ne pas couper le repli. */
  visibility: hidden;
  transition: transform .32s var(--ease), visibility 0s linear .32s;
}
.mobile-nav.open {
  transform: none;
  visibility: visible;
  transition: transform .32s var(--ease), visibility 0s;
}
.mobile-nav-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.mobile-nav-brand { font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
.mobile-nav-close { width: 40px; height: 40px; display: grid; place-items: center; font-size: 1.4rem; color: var(--text); }
.mobile-nav-link {
  padding: 14px 0;
  font-size: 1.1rem; font-weight: 500; color: var(--text);
  border-bottom: 1px solid var(--line);
}
.mobile-nav-actions { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.mobile-nav-actions .btn { width: 100%; }

/* ─── Hero (accueil) ─────────────────────────────────────────── */
.hero {
  position: relative;
  /* Contenu centré verticalement dans la partie visible de la photo, sous le
     header : marges haute et basse égales une fois le header déduit. Hauteur
     réduite (86 svh) pour que le contenu ne flotte pas dans un grand vide. */
  min-height: clamp(560px, 86vh, 820px);
  min-height: clamp(560px, 86svh, 820px);
  display: flex; align-items: center;
  padding: calc(var(--header-h) + 32px) 0 32px;
  color: var(--on-ink);
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
}
.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; container-type: size; }
.hero-img {
  /* La tête du technicien ne doit jamais apparaître en entier : le haut de
     la photo (21 % de sa hauteur, soit jusqu'aux yeux) est TOUJOURS coupé,
     quel que soit le format d'écran. object-fit ne le permet pas — il rogne
     plus ou moins selon le ratio — d'où ce calcul explicite en unités de
     conteneur. La photo fait 3:2 ; elle est assez grande pour couvrir le hero
     une fois son haut retiré, et centrée à 60 % horizontalement. */
  /* La coupe se fait sous le header fixe, qui recouvre le haut du hero :
     c'est là que commence la partie réellement visible de la photo. */
  --img-w: max(100cqw, (100cqh - var(--header-h)) / 0.79 * 1.5);
  position: absolute;
  width: var(--img-w); max-width: none;
  height: auto; aspect-ratio: 3 / 2;
  top: calc(var(--header-h) - var(--img-w) / 1.5 * 0.21);
  left: calc((100cqw - var(--img-w)) * 0.6);
}
/* Deux copies superposées : la nette dessous, la floue dessus, masquée en
   dégradé. Le flou couvre la zone de texte à gauche et s'efface vers la
   droite, où la photo reste lisible. */
.hero-img--blur {
  filter: blur(9px) saturate(0.45);
  transform: scale(1.06);
  -webkit-mask-image: linear-gradient(to right, var(--black) 0%, var(--black) 30%, rgba(var(--black-rgb), 0.55) 48%, transparent 68%);
          mask-image: linear-gradient(to right, var(--black) 0%, var(--black) 30%, rgba(var(--black-rgb), 0.55) 48%, transparent 68%);
}
/* Voile Emerald Ink léger — la photo reste lisible sous la teinte */
.hero-overlay {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(var(--veil-rgb), 0.82) 0%, rgba(var(--veil-rgb), 0.64) 38%, rgba(var(--veil-rgb), 0.24) 72%, rgba(var(--veil-rgb), 0.12) 100%),
    linear-gradient(180deg, rgba(var(--veil-rgb), 0.34), transparent 32%);
}
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(340px, 0.85fr);
  gap: clamp(32px, 4.5vw, 72px);
  align-items: center;
}
/* Le hero prend la largeur « wide » (1440 px) en continu, comme la section
   des principes qui le suit : un palier à 1400 px faisait sauter le titre
   de 99 px et désalignait les deux sections entre 1296 et 1399 px. */
.hero .container { max-width: 1440px; }
/* La colonne de gauche borne déjà la largeur du titre ; ce max-width
   n'est qu'un garde-fou sur très grand écran. Il doit rester large :
   les mots accentués sont en monospace, nettement plus encombrante,
   et une boîte trop étroite hache le titre. */
.hero h1 { color: var(--off-white); max-width: 26ch; line-height: 1.14; }
.hero h1 .accent { color: var(--on-ink); }
.hero-sub { margin-top: 26px; max-width: 46ch; font-size: var(--text-md); color: var(--on-ink-muted); line-height: 1.6; }
.hero-phone { margin-top: 30px; display: inline-flex; align-items: center; gap: 12px; font-size: var(--text-sm); color: var(--on-ink-muted); }
.hero-phone a { color: var(--on-ink); font-weight: 600; letter-spacing: 0.04em; transition: color .2s var(--ease); }
.hero-phone a:hover { color: var(--white); }

/* ─── Panneau devis (hero) ───────────────────────────────────── */
.devis-panel {
  padding: 30px 30px 28px;
  color: var(--text);
  background: rgba(var(--paper-rgb), 0.72);
}
.devis-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.devis-panel-head h2 { font-size: 1.45rem; }
.devis-panel-head .muted { font-size: var(--text-xs); letter-spacing: .02em; }

/* Toggle segmenté */
/* Volet WhatsApp (Punaise de lit) */
.devis-pane[hidden] { display: none; }
.wa-value { font-size: var(--text-md); font-weight: 700; letter-spacing: normal; color: var(--text); line-height: 1.4; margin-bottom: 18px; }
.wa-steps { display: grid; gap: 12px; margin-bottom: 24px; counter-reset: step; }
.wa-steps li {
  position: relative;
  padding-left: 40px;
  font-size: var(--text-sm); line-height: 1.5;
  color: var(--text);
  counter-increment: step;
}
.wa-steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  font-size: var(--text-xs); font-weight: 700;
  color: var(--white); background: var(--wa-deep);
  border-radius: 50%;
}
.wa-cta,
.devis-call { width: 100%; height: 52px; font-size: 1rem; letter-spacing: 0.02em; }
.devis-call { margin-top: 10px; }
.wa-cta svg { width: 20px; height: 20px; }

/* Formulaire — champs arrondis en verre, libellé flottant à l'intérieur
   du champ pour gagner de la hauteur et aérer le questionnaire. */
.form-grid { display: grid; gap: 12px; }

.field { position: relative; }
.field-input {
  width: 100%;
  height: 62px;
  padding: 26px 16px 8px;
  background: rgba(var(--white-rgb), 0.55);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  color: var(--text);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.field-input::placeholder { color: transparent; }
.field-input:focus {
  outline: none;
  border-color: var(--ink);
  background: rgba(var(--white-rgb), 0.78);
}
.field-label {
  position: absolute; left: 17px; top: 50%;
  transform: translateY(-50%);
  font-size: 1rem; color: var(--text-muted);
  pointer-events: none;
  transition: top .16s var(--ease), font-size .16s var(--ease),
              transform .16s var(--ease), letter-spacing .16s var(--ease);
}
input.field-input:focus ~ .field-label,
input.field-input:not(:placeholder-shown) ~ .field-label,
input[type="date"].field-input ~ .field-label,
select.field-input:focus ~ .field-label,
.field.is-filled .field-label {
  top: 11px; transform: none;
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
}
/* Select : chevron dessiné en CSS, pas d'apparence native */
select.field-input {
  appearance: none; -webkit-appearance: none;
  padding-right: 44px;
  cursor: pointer;
}
.field-chevron {
  position: absolute; right: 18px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted);
  transform: rotate(45deg);
  pointer-events: none;
}
.field-input.error { border-color: var(--danger); }
.field-error { min-height: 0; padding: 2px 4px 0; font-size: var(--text-xs); color: var(--danger); }
.field-error:empty { display: none; }

/* Étape 1 : trois portes d'entrée */
.devis-choices { display: grid; gap: 10px; }
.devis-choices-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.devis-choices .btn { width: 100%; height: 50px; }
.btn-mail { font-weight: 600; }
/* Le rayon des champs ne vaut que pour le formulaire de rappel, qui ne vit
   plus que dans _pro/. Ailleurs, les boutons gardent --radius-btn (4 px). */
.devis-form .btn { border-radius: var(--radius-field); }
.devis-back {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: 14px;
  font-size: var(--text-sm); font-weight: 600; color: var(--text-muted);
}
.devis-back::before { content: '\2190'; }
.devis-back:hover { color: var(--text); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.form-submit { width: 100%; height: 54px; margin-top: 6px; }
.form-mention { text-align: center; font-size: var(--text-xs); color: var(--text-muted); margin-top: 10px; }

.devis-success { text-align: center; padding: 28px 8px; }
.devis-success-mark { width: 44px; height: 44px; margin: 0 auto 18px; border: 1px solid var(--ink); border-radius: 50%; display: grid; place-items: center; color: var(--text); font-size: 1.2rem; }
.devis-success h3 { margin-bottom: 8px; }

/* ─── Principes (3 cartes) ───────────────────────────────────── */
/* Trois cartes en verre posées sur le dégradé de la section : le flou
   laisse passer les halos, ce qui donne la profondeur du liquid glass. */
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.principle {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 264px;
  padding: clamp(28px, 2.6vw, 38px) clamp(24px, 2.2vw, 34px) clamp(32px, 2.8vw, 40px);
  border-radius: var(--radius-card);
  background: rgba(var(--ink-rgb), 0.045);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
}
/* Numéro de carte : même registre typographique que les mots accentués
   du site (Roboto Mono italic), en grand et en noir très dilué pour
   rester un repère visuel sans concurrencer le titre. */
.principle-index {
  /* Montserrat et non Roboto Mono : le zéro de Roboto Mono est barré. */
  font-family: var(--sans); font-style: normal; font-weight: 500;
  font-size: clamp(2.4rem, 1.7rem + 1.9vw, 3.4rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text-faint);
  margin-bottom: clamp(16px, 1.6vw, 22px);
}
.principle h3 { font-size: 1.32rem; margin-bottom: 14px; letter-spacing: -0.015em; }
.principle p { color: var(--text-muted); line-height: 1.6; font-size: var(--text-base); }
.principle p strong { color: var(--text); font-weight: 600; }

/* ─── Blocs audience (2 colonnes) ────────────────────────────── */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.split--reverse > :first-child { order: 2; }
.split h2 { max-width: 16ch; }
.split .lead { margin-top: 18px; }
.split .btn { margin-top: 28px; }

.checks { display: grid; gap: 0; border-top: 1px solid var(--line); }
.checks li {
  position: relative;
  padding: 18px 0 18px 30px;
  border-bottom: 1px solid var(--line);
  font-weight: 500; color: var(--text);
  line-height: 1.45;
}
.checks li::before {
  content: '';
  position: absolute; left: 0; top: 27px;
  width: 14px; height: 1.5px; background: var(--ink);
}

/* ─── Mantra ─────────────────────────────────────────────────── */
.mantra { text-align: center; padding: clamp(72px, 9vw, 120px) 0; background: var(--mist); }
.mantra-text {
  font-family: var(--mono); font-style: italic; font-weight: 400;
  font-size: clamp(1.7rem, 1.2rem + 2.4vw, 3rem);
  line-height: 1.25; color: var(--text);
  max-width: 24ch; margin: 0 auto;
}
.mantra-text::before { content: '« '; }
.mantra-text::after  { content: ' »'; }

/* ─── FAQ ────────────────────────────────────────────────────── */
.faq-list { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-question {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px 0;
  text-align: left;
  font-weight: 600; font-size: 1.02rem; color: var(--text);
  line-height: 1.4;
}
.faq-question::after {
  content: '+';
  flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  font-weight: 400; font-size: 1.3rem; line-height: 1;
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: transform .25s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.faq-question[aria-expanded="true"]::after { content: '−'; background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.faq-answer { padding: 0 48px 0 0; color: var(--text-muted); line-height: 1.7; }
/* Le padding vit sur l'enfant : l'élément animé en hauteur doit rester
   à 0 px quand height vaut 0, sinon box-sizing lui laisse 24 px. */
.faq-answer > p:last-child { padding-bottom: 24px; }
.faq-answer p + p { margin-top: 10px; }
.faq-answer a { color: var(--text); border-bottom: 1px solid var(--line-strong); }
.faq-extra { display: none; }
.faq-extra.faq-expanded { display: block; }
.faq-more { display: flex; justify-content: center; margin-top: 28px; }

/* ─── Zones strip ────────────────────────────────────────────── */
.zones { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; }
.zones-label { font-size: var(--text-sm); color: var(--text-muted); }
.zones a { font-weight: 600; color: var(--text); border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; }
.zones a:hover { border-color: var(--ink); }

/* ─── CTA band (sous-pages) ──────────────────────────────────── */
.cta-band { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 48px; align-items: center; padding: clamp(32px, 4vw, 48px); }
.cta-band h2 { font-size: var(--text-lg); }
.cta-band p { margin-top: 8px; color: var(--text-muted); }
.cta-band-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ─── Footer ─────────────────────────────────────────────────── */
.site-footer { background: var(--ink); color: var(--on-ink); padding: clamp(56px, 7vw, 88px) 0 32px; }
.footer-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.footer-logo { color: var(--on-ink); }
.footer-tagline { margin-top: 12px; font-size: var(--text-sm); color: var(--on-ink-muted); line-height: 1.6; }
.footer-col-title { font-size: var(--text-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--on-ink-muted); margin-bottom: 18px; }
.footer-col a, .footer-col p { display: block; font-size: var(--text-sm); color: var(--on-ink); margin-bottom: 10px; line-height: 1.5; }
.footer-col a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-bottom { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line-on-ink); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: var(--text-xs); color: var(--on-ink-muted); }
.footer-bottom a { color: var(--on-ink); }

/* ═══════════════════════════════════════════════════════════════
   SOUS-PAGES — arrondissements & engagement
═══════════════════════════════════════════════════════════════ */

/* Hero de sous-page : bande ink, pas de photo */
.hero--page {
  min-height: 0;
  padding: calc(var(--header-h) + 88px) 0 72px;
  background: var(--ink);
  color: var(--on-ink);
}
.hero--page::after {
  content: '';
  position: absolute; z-index: -1; pointer-events: none;
  width: 56vw; height: 56vw; max-width: 760px; max-height: 760px;
  right: -16%; top: -30%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--white-rgb), 0.11), transparent 62%);
  filter: blur(40px);
}
.hero--page .eyebrow { color: var(--on-ink-muted); }
.hero--page h1 { color: var(--white); max-width: 16ch; }
.hero--page h1 .accent { color: var(--on-ink); }
.hero-subtitle { margin-top: 22px; max-width: 56ch; color: var(--on-ink-muted); font-size: var(--text-md); line-height: 1.6; }
.hero-subtitle p + p { margin-top: 6px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* Ligne d'engagements (remplace la trust bar) */
.trust-line { border-bottom: 1px solid var(--line); }
.trust-line ul { display: flex; flex-wrap: wrap; gap: 10px 0; padding: 18px 0; }
.trust-line li { font-size: var(--text-sm); font-weight: 500; color: var(--text); }
.trust-line li + li::before { content: '·'; margin: 0 16px; color: var(--text-muted); }

/* En-têtes de section hérités */
.section-header { max-width: 780px; margin-bottom: clamp(36px, 5vw, 56px); }
.section-header h2 { max-width: 24ch; }
.eyebrow-small { display: inline-block; font-size: var(--text-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 18px; }
.section-lead { margin-top: 18px; font-size: var(--text-md); color: var(--text-muted); max-width: 62ch; line-height: 1.65; }

/* Contexte local */
.arr-context { max-width: 820px; }
.arr-context-body { font-size: var(--text-md); line-height: 1.75; color: var(--text); }
.arr-context-body strong { color: var(--text); font-weight: 600; }

/* Grilles de cartes héritées → verre uniforme */
.pest-grid, .produits-grid, .regl-grid, .concrete-grid { display: grid; gap: 20px; }
.pest-grid { grid-template-columns: repeat(3, 1fr); }
.produits-grid, .regl-grid, .concrete-grid { grid-template-columns: repeat(3, 1fr); }
.protocol-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.pest-card, .produit-card, .regl-card, .protocol-card, .concrete-card {
  position: relative;
  padding: 30px 28px 32px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border-radius: var(--radius-card);
  display: flex; flex-direction: column; gap: 10px;
}

.pest-card-tag, .protocol-card-label { font-size: var(--text-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.pest-card-title, .produit-card-title, .regl-card-title, .protocol-card-title, .concrete-card-title {
  font-weight: 700; font-size: 1.2rem; color: var(--text); letter-spacing: -0.01em; line-height: 1.2;
}
.pest-card-body, .produit-card-body, .regl-card-body, .concrete-card-text { color: var(--text-muted); line-height: 1.65; font-size: var(--text-sm); }
.regl-card-ref { font-family: var(--mono); font-style: italic; font-size: 1.05rem; color: var(--text-muted); }

.protocol-list { display: grid; gap: 0; margin-top: 8px; border-top: 1px solid var(--line); }
.protocol-list li { position: relative; padding: 12px 0 12px 24px; border-bottom: 1px solid var(--line); font-size: var(--text-sm); line-height: 1.5; }
.protocol-list li::before { content: ''; position: absolute; left: 0; top: 20px; width: 12px; height: 1.5px; background: var(--ink); }

/* Tableau tarifs */
.pricing-wrapper { max-width: 900px; overflow-x: auto; }
.pricing-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.pricing-table th { text-align: left; padding: 0 16px 14px 0; font-size: var(--text-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--ink); }
.pricing-table td { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--text-muted); }
.pricing-table th:last-child, .pricing-table td:last-child { text-align: right; padding-right: 0; white-space: nowrap; }
.pricing-pest-name { font-weight: 600; color: var(--text); }
.pricing-range-val { font-family: var(--mono); font-style: italic; font-size: 1.1rem; color: var(--text); }
.pricing-disclaimer { margin-top: 20px; font-size: var(--text-xs); color: var(--text-muted); max-width: 70ch; line-height: 1.6; }

/* Maillage */

/* Flottement lent pour attirer l'œil sans distraire.
   Neutralisé par la règle prefers-reduced-motion plus haut. */
@keyframes flottement {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
.btn-float { animation: flottement 2.4s ease-in-out 2;  /* 4,8 s au total : sous les 5 s de WCAG 2.2.2 */ will-change: transform; }
.section-cta { display: flex; justify-content: center; margin-top: clamp(40px, 5vw, 64px); }

/* ─── Page info : articles « answer first » ───────────────────
   Chaque article ouvre sur une réponse courte et mise en avant, puis
   déroule le détail. Le reset met toutes les marges de titres et de
   paragraphes à zéro : c'est ici qu'on redonne son rythme au texte. */
.article {
  max-width: 760px;
  margin: 0 auto;
  padding-bottom: clamp(44px, 5vw, 72px);
}
.article + .article {
  padding-top: clamp(44px, 5vw, 72px);
  border-top: 1px solid var(--line);
}
.article h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.1rem);
  margin-bottom: 20px;
}
/* La réponse d'ouverture : plus grande que le corps, c'est elle que le
   lecteur — et les moteurs — doivent retenir. */
.article .answer {
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.55;
  padding-left: clamp(16px, 1.6vw, 22px);
  border-left: 3px solid var(--emerald-mid);
}
.article-body { margin-top: clamp(28px, 3vw, 40px); }
.article-body h3 {
  font-size: 1.1rem;
  margin-top: clamp(26px, 2.6vw, 34px);
  margin-bottom: 10px;
}
.article-body > h3:first-child { margin-top: 0; }
.article-body p {
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 14px;
}
.article-body p strong, .article-body li strong { color: var(--text); font-weight: 600; }
.article-body ul {
  margin: 0 0 14px;
  display: grid; gap: 10px;
}
.article-body li {
  position: relative;
  padding-left: 22px;
  color: var(--text-muted);
  line-height: 1.7;
}
.article-body li::before {
  content: '';
  position: absolute; left: 4px; top: 0.72em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--emerald-mid);
}
/* Photos d'illustration de la page info, avec crédit obligatoire :
   les images Wikimedia sous licence CC exigent l'auteur et la licence. */
.article-figure { margin: 6px 0 clamp(22px, 2.4vw, 30px); }
.article-figure img {
  width: 100%; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radius-card);
  background: var(--mist);
}
.article-figure figcaption {
  margin-top: 10px;
  font-size: var(--text-sm); line-height: 1.5; color: var(--text-muted);
}
.figure-credit { display: block; margin-top: 2px; font-size: var(--text-xs); }
.figure-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Aparté de fin de section : même registre que les cartes en verre */
.article-note {
  margin-top: clamp(22px, 2.2vw, 30px);
  padding: clamp(16px, 1.8vw, 22px);
  border-radius: var(--radius-card);
  background: var(--card-bg);
  color: var(--text) !important;
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* ─── Timeline d'intervention ─────────────────────────────────── */
/* Le trait de liaison s'arrête au centre des pastilles extrêmes. Une colonne mesure (100% - gouttières) / nombre d'étapes,
   son milieu est donc à la moitié de ça. Un pourcentage fixe ne
   marcherait pas : il ignore les gouttières. */
#intervention .container {
  --tl-inset: calc((100% - (var(--tl-cols) - 1) * var(--tl-gap)) / (var(--tl-cols) * 2));
}
/* Promesse de fin de section */
.timeline-outcome {
  margin: clamp(32px, 3.4vw, 46px) auto 0;
  max-width: 640px;
  text-align: center;
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.45;
}
.timeline-steps {
  position: relative;
  display: grid; grid-template-columns: repeat(var(--tl-cols), 1fr);
  gap: var(--tl-gap);
}
/* Trait de liaison entre les pastilles, calé sur leurs centres. */
.timeline-steps::before {
  content: '';
  position: absolute; z-index: 0;
  top: 23px;
  left: var(--tl-inset);
  right: var(--tl-inset);
  height: 2px;
  background: var(--line);
}
.timeline-step { position: relative; z-index: 1; display: flex; flex-direction: column; text-align: center; }
.timeline-dot {
  width: 46px; height: 46px;
  margin: 0 auto 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ink); color: var(--on-ink);
  font-family: var(--mono); font-weight: 500; font-size: var(--text-sm);
}
.timeline-card {
  position: relative;
  flex: 1;
  padding: clamp(22px, 2.2vw, 30px) clamp(18px, 1.8vw, 26px) clamp(26px, 2.4vw, 32px);
  border-radius: var(--radius-card);
  background: rgba(var(--white-rgb), 0.55);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  backdrop-filter: blur(26px) saturate(180%);
}
.timeline-card-t { font-weight: 700; font-size: 1.08rem; line-height: 1.3; margin-bottom: 10px; }
/* Étiquette « optionnel » : à cheval sur le bord haut de la carte, moitié
   sur la carte, moitié sur le fond de section. Elle est hors flux, donc le
   titre reste exactement à la même hauteur que dans les autres cartes. */
.step-tag {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -50%);
  margin: 0; padding: 3px 9px;
  border-radius: 999px;
  background: var(--chip);
  color: var(--text-muted);
  font-family: var(--mono); font-weight: 400;
  font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap;
}
.timeline-card p:last-child { color: var(--text-muted); font-size: var(--text-sm); line-height: 1.6; }

.protocole-note {
  max-width: 820px;
  margin: clamp(40px, 4.5vw, 60px) auto 0;
  padding: clamp(24px, 2.4vw, 32px);
  background: var(--card-bg);
  border-radius: var(--radius-card);
}
.protocole-note-title { font-weight: 700; font-size: 1.05rem; margin-bottom: 16px; }
.protocole-note .checks { border-top: 0; }
.protocole-note .checks li:last-child { border-bottom: 0; padding-bottom: 0; }

/* ─── WhatsApp flottant ──────────────────────────────────────── */
.wa-float {
  position: fixed;
  isolation: isolate;
  right: clamp(16px, 2.5vw, 32px);
  bottom: clamp(16px, 2.5vw, 32px);
  z-index: 90;
  display: flex;
  align-items: center;
}
/* Positionnée en absolu : sortie du flux, elle n'élargit plus la zone
   cliquable du lien. Dans le flux, cette étiquette invisible captait les
   taps sur 199 px — 53 % d'un écran de 375 px — et détournait vers WhatsApp
   les clics destinés à la FAQ ou au pied de page. */
.wa-float-label {
  position: absolute;
  right: 100%;
  /* L'écart de 10 px est une bordure transparente, pas une marge : la zone de
     survol reste continue entre la pastille et l'étiquette (WCAG 1.4.13). */
  border-right: 10px solid transparent;
  background-clip: padding-box;
  padding: 9px 14px;
  background: var(--ink);
  color: var(--on-ink);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  border-radius: var(--radius-btn);
  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.wa-float-icon {
  flex: none;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: var(--wa-deep);
  color: var(--white);
  border-radius: 50%;
  transition: background-color .2s var(--ease);
}
.wa-float-icon svg { width: 28px; height: 28px; }
.wa-float:hover .wa-float-icon,
.wa-float:focus-visible .wa-float-icon { background: var(--wa); }
.wa-float:hover .wa-float-label,
.wa-float:focus-visible .wa-float-label { opacity: 1; transform: none; pointer-events: auto; }

/* ─── Révélation au scroll (discrète) ────────────────────────── */
.reveal { opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: var(--reveal-delay, 0ms); }
/* Les cartes des principes montent de plus loin et s'enchaînent, pour que
   l'apparition une à une se remarque au scroll. */
.principle.reveal { transform: translateY(28px) scale(0.985); transition-duration: .72s; }
.principle.reveal.revealed { transform: none; }
.reveal.revealed { opacity: 1; transform: none; }

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .main-nav { gap: 20px; }
  .header-actions { gap: 16px; }
  .principles { grid-template-columns: 1fr 1fr; }
  .pest-grid, .produits-grid, .regl-grid, .concrete-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* Entre 921 et 1100 px, quatre cartes deviennent trop étroites : on
   passe en 2x2 et l'accolade, qui ne relie plus une seule rangée,
   redevient un simple badge. */
@media (min-width: 921px) and (max-width: 1100px) {
  .timeline-steps { --tl-cols: 2; }
  .timeline-steps::before { display: none; }
}

@media (max-width: 920px) {
  .band-inner { grid-template-columns: 1fr; gap: 18px; }
  .timeline-steps { --tl-cols: 1; gap: 0; }
  .timeline-steps::before { top: 23px; bottom: 23px; left: 23px; right: auto; width: 2px; height: auto; }
  .timeline-step { flex-direction: row; gap: 18px; text-align: left; padding-bottom: 20px; }
  .timeline-dot { margin: 0; flex: none; }
  .band-sep { display: none; }
  .main-nav, .header-actions .link-espace { display: none; }
  /* Le numéro ne doit jamais passer derrière le burger : faute de place
     pour les dix chiffres, il devient une pastille d'appel. */
  .header-phone {
    width: 42px; height: 42px; gap: 0;
    justify-content: center;
    border-radius: 50%;
    background: var(--ghost-glass-ink);
  }
  .header-phone-txt { display: none; }
  .header-phone { transition: background-color .2s var(--ease), color .2s var(--ease); }
  /* Survol et focus : la pastille passe en vert de marque, icône blanche. */
  .header-phone:hover, .header-phone:focus-visible { background: var(--ink); color: var(--on-ink); }
  .hamburger { display: flex; }
  .header-inner { gap: 14px; }
  .header-actions { margin-left: auto; gap: 12px; }
  .logo { flex: none; }
  .hero { min-height: 0; padding: calc(var(--header-h) + 40px) 0 56px; }
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero h1 { max-width: 20ch; }
  /* Hero en une colonne : plus de gouttière où déborder, et il est en
     overflow:hidden. Filet de sécurité pour les mots très longs. */
  h1, h2, h3 { overflow-wrap: break-word; }
  .split { grid-template-columns: 1fr; gap: 28px; }
  .split--reverse > :first-child { order: 0; }
  .protocol-grid { grid-template-columns: 1fr; }
  .cta-band { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  :root { --header-main-h: 60px; }
  .principles, .pest-grid, .produits-grid, .regl-grid, .concrete-grid { grid-template-columns: 1fr; }
  .audience-phone { display: none; }
  .audience-switch { margin-left: 0; width: 100%; }
  .audience-tab { flex: 1; justify-content: center; padding: 0 12px; }
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
  .devis-panel { padding: 22px 20px 22px; }
  .devis-panel-head { flex-direction: column; gap: 4px; }
  .header-actions .btn { height: 38px; padding: 0 14px; font-size: var(--text-sm); }
  .faq-answer { padding-right: 0; }
  .trust-line li + li::before { margin: 0 10px; }
  .hero-cta .btn { width: 100%; }
  .cta-band .btn { width: 100%; }
  .band-rule { width: 16px; }
  .band-inner { gap: 12px; }
  .wa-float-icon { width: 50px; height: 50px; }
  .wa-float-icon svg { width: 25px; height: 25px; }
}

/* Petits téléphones : le trio logo + Devis gratuit + burger doit tenir sur une ligne */
@media (max-width: 420px) {
  :root { --gutter: 14px; }
  .logo-top { font-size: 0.9rem; letter-spacing: 0.16em; margin-right: -0.16em; }
  .logo-lockup { padding-bottom: 4px; }
  .header-inner { gap: 8px; }
  .header-actions { gap: 8px; }
  .header-actions .btn { height: 36px; padding: 0 11px; font-size: 0.82rem; }
}

/* En dessous de 380 px, le header débordait : logo + pastille d'appel +
   « Devis gratuit » + burger dépassaient de 28 px et le burger était coupé.
   On resserre, et le bouton se réduit à « Devis » — il reste présent et
   ancré sur #devis, comme l'exige la charte. */
@media (max-width: 380px) {
  .logo-top { font-size: 0.8rem; }
  .header-inner { gap: 6px; }
  .header-actions { gap: 6px; }
  .header-phone { width: 34px; height: 34px; }
  .header-phone svg { width: 15px; height: 15px; }
  .btn-long { display: none; }
}

/* ─── Impression ──────────────────────────────────────────────
   Sans ça, la page sort sur une photo pleine page, avec le header fixe
   et la bulle WhatsApp imprimés par-dessus le texte. */
@media print {
  .site-header, .wa-float, .mobile-nav, .mobile-nav-overlay,
  .hero-media, .section-cta { display: none !important; }
  .hero {
    min-height: 0;
    padding: 0 0 24px;
    color: var(--black);
  }
  .hero h1, .hero h1 .hl, .hero-sub { color: var(--black) !important; }
  .faq-answer[hidden] { display: block !important; }
  .faq-question::after { display: none; }
  body { background: var(--white); }
  .timeline-card, .principle, .devis-panel, .article-note {
    background: none !important;
    border: 1px solid rgba(var(--black-rgb), 0.4);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
  .section { padding: 18px 0; }
}

/* Champs légaux encore vides : visibles, impossibles à rater avant mise
   en ligne. À retirer du CSS une fois les pages complétées. */
.a-completer {
  background: var(--champagne);
  color: var(--text);
  font-weight: 700;
  padding: 0 4px;
}

/* Liens dans le corps des articles : soulignés, sinon ils se fondent
   dans le texte atténué (pages légales, page info). */
.article-body a, .article .answer a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.article-body a:hover, .article .answer a:hover { text-decoration-thickness: 2px; }

@media (forced-colors: active) {
  .article-body li::before { background: CanvasText; }
  .timeline-dot, .wa-steps li::before { border: 1px solid CanvasText; }
}