/* =============================================================================
   France Traitement Punaise de Lit Marseille — design system « Profondeur »
   Jetons en tête de fichier ; documentation : docs/DESIGN-SYSTEM.md
   Mobile d'abord. Animations : transform et opacity uniquement.
   ========================================================================== */

@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-latin-wght.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
/* Repli aux métriques ajustées : limite le décalage pendant le chargement de Manrope */
@font-face {
  font-family: "Manrope Repli";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 104%;
  ascent-override: 98%;
  descent-override: 28%;
  line-gap-override: 0%;
}

:root {
  /* Couleurs — noir profond, blancs, gris neutres */
  --noir: #0b0b0c;
  --noir-2: #141416;
  --noir-3: #1e1e21;
  --noir-4: #2a2a2e;
  --craie: #f5f5f3;
  --brume: #ebebe8;
  --blanc: #ffffff;
  --encre: #111113;
  --ardoise: #55555b;     /* secondaire sur clair : 7,4:1 sur blanc, 6,6:1 sur craie */
  --acier: #808087;       /* contours de champs (3,9:1 sur blanc, WCAG 1.4.11) */
  --filet-clair: #dcdcd8;
  --os: #ededea;          /* texte sur sombre : 16:1 sur noir */
  --cendre: #a4a4a9;      /* secondaire sur sombre : 7,9:1 sur noir */
  --filet-sombre: rgba(255, 255, 255, .1);

  /* Accents de la marque : le bleu fait agir, le rouge signale (points uniquement) */
  --accent: #1f49d6;            /* blanc dessus 7:1 */
  --accent-survol: #193bb0;
  --accent-lumiere: #5b84ff;    /* focus et lumières sur sombre (5,7:1 sur noir) */
  --accent-lien-sombre: #a3b6ff;/* liens sur sombre : 9,6:1 */
  --accent-doux: rgba(31, 73, 214, .1);
  --signal: #e0313f;
  --erreur: #c0282d;            /* 5,9:1 sur blanc */
  --succes: #1d7a46;            /* 5,6:1 sur blanc */

  /* Typographie */
  --police: "Manrope", "Manrope Repli", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-geant: clamp(2.625rem, 1.5rem + 4.2vw, 5.5rem);
  --t-h1: clamp(2.375rem, 1.6rem + 3.6vw, 4.75rem);
  --t-h2: clamp(1.875rem, 1.4rem + 2vw, 3.25rem);
  --t-h3: clamp(1.25rem, 1.12rem + .55vw, 1.625rem);
  --t-chapo: clamp(1.125rem, 1.04rem + .4vw, 1.375rem);
  --t-corps: clamp(1.0625rem, 1.04rem + .1vw, 1.125rem);
  --t-petit: .9375rem;
  --t-micro: .8125rem;

  /* Espacements */
  --section: clamp(3.75rem, 2.6rem + 4.6vw, 7.25rem);
  --marge: clamp(1rem, .4rem + 2.6vw, 3rem);
  --gouttiere: clamp(1rem, .6rem + 1.4vw, 2rem);
  --conteneur: 76rem;
  --conteneur-large: 88rem;
  --conteneur-etroit: 46rem;

  /* Formes */
  --rayon: 20px;
  --rayon-s: 14px;
  --rayon-xs: 10px;
  --pilule: 999px;

  /* Profondeur maîtrisée */
  --ombre-1: 0 1px 2px rgba(17, 17, 19, .06), 0 2px 8px rgba(17, 17, 19, .04);
  --ombre-2: 0 2px 6px rgba(17, 17, 19, .06), 0 18px 48px -12px rgba(17, 17, 19, .18);
  --ombre-sombre: 0 30px 80px -20px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .08);
  --verre-sombre: rgba(20, 20, 22, .62);
  --verre-clair: rgba(255, 255, 255, .72);

  /* Mouvement */
  --micro: 180ms;
  --standard: 380ms;
  --revelation: 900ms;
  --ease: cubic-bezier(.22, 1, .36, 1);

  --entete: 64px;
  color-scheme: light;
}

/* --- Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--entete) + 16px); }
body {
  margin: 0;
  font-family: var(--police);
  font-size: var(--t-corps);
  line-height: 1.6;
  font-weight: 450;
  color: var(--encre);
  background: var(--craie);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
picture img { width: 100%; }
a { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 750; line-height: 1.08; letter-spacing: -.032em; text-wrap: balance; }
h1 { font-size: var(--t-h1); font-weight: 780; letter-spacing: -.04em; line-height: 1.02; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -.02em; line-height: 1.2; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
strong, b { font-weight: 700; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.section--sombre :focus-visible, .hero-accueil :focus-visible, .hero-page :focus-visible, .pied :focus-visible, .final :focus-visible { outline-color: var(--accent-lumiere); }
::selection { background: var(--accent); color: #fff; }
.icone { width: 1.25em; height: 1.25em; flex: none; }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.evitement { position: absolute; left: 1rem; top: -100px; z-index: 200; padding: .75rem 1rem; background: var(--blanc); color: var(--encre); border-radius: var(--rayon-xs); font-weight: 700; }
.evitement:focus { top: 1rem; }
main:focus { outline: none; }

/* --- Mise en page ---------------------------------------------------------- */
.conteneur, .conteneur-large { width: 100%; max-width: calc(var(--conteneur) + 2 * var(--marge)); margin-inline: auto; padding-inline: var(--marge); }
.conteneur-large { max-width: calc(var(--conteneur-large) + 2 * var(--marge)); }
.conteneur--etroit { max-width: calc(var(--conteneur-etroit) + 2 * var(--marge)); }
.section { padding-block: var(--section); position: relative; }
.section--claire { background: var(--craie); }
.section--blanche { background: var(--blanc); }
.section--brume { background: var(--brume); }
.section--sombre { background: var(--noir); color: var(--os); }
.section--sombre-2 { background: var(--noir-2); color: var(--os); }
.section--sombre a:not(.bouton), .section--sombre-2 a:not(.bouton) { color: var(--accent-lien-sombre); }
.section__tete { max-width: 52rem; margin-bottom: clamp(2rem, 1.4rem + 2.4vw, 3.75rem); }
.section__tete--centre { margin-inline: auto; text-align: center; }
.chapo { font-size: var(--t-chapo); line-height: 1.5; color: var(--ardoise); font-weight: 450; max-width: 44rem; }
.section--sombre .chapo, .section--sombre-2 .chapo { color: var(--cendre); }
.section__tete--centre .chapo { margin-inline: auto; }
.grille { display: grid; gap: var(--gouttiere); }
@media (min-width: 640px) { .grille--2 { grid-template-columns: repeat(2, 1fr); } .grille--3, .grille--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grille--3 { grid-template-columns: repeat(3, 1fr); } .grille--4 { grid-template-columns: repeat(4, 1fr); } }

.etiquette { display: inline-flex; align-items: center; gap: .6em; margin: 0 0 1.1rem; font-size: var(--t-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ardoise); }
.etiquette::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--signal); flex: none; }
.etiquette--sombre, .section--sombre .etiquette, .section--sombre-2 .etiquette { color: var(--cendre); }

/* --- Boutons --------------------------------------------------------------- */
.bouton {
  --h: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: .65em;
  min-height: var(--h); padding: 0 1.4em; border-radius: var(--pilule); border: 1px solid transparent;
  font-size: .9375rem; font-weight: 700; letter-spacing: -.005em; line-height: 1.1; text-decoration: none; cursor: pointer;
  transition: background-color var(--micro) var(--ease), border-color var(--micro) var(--ease), color var(--micro) var(--ease), transform var(--micro) var(--ease), box-shadow var(--micro) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.bouton:active { transform: scale(.98); }
.bouton .icone { width: 1.1em; height: 1.1em; transition: transform var(--standard) var(--ease); }
.bouton:hover .icone use[href="#i-fleche"] { }
.bouton:hover > .icone:last-child { transform: translateX(3px); }
.bouton--primaire { background: var(--accent); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 20px -8px rgba(31,73,214,.7); }
.bouton--primaire:hover { background: var(--accent-survol); color: #fff; }
.bouton--fantome { background: transparent; color: currentColor; border-color: rgba(17,17,19,.22); }
.bouton--fantome:hover { border-color: currentColor; }
.section--sombre .bouton--fantome, .section--sombre-2 .bouton--fantome, .hero-accueil .bouton--fantome, .hero-page .bouton--fantome, .final .bouton--fantome, .nav .bouton--fantome { color: var(--os); border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.04); }
.bouton--blanc { background: var(--blanc); color: var(--encre); }
.bouton--noir { background: var(--noir); color: var(--os); }
.bouton--noir:hover { background: var(--noir-4); color: #fff; }
.bouton--s { --h: 42px; padding: 0 1.1em; font-size: .875rem; }
.bouton--l { --h: 58px; padding: 0 1.7em; font-size: 1rem; }
.bouton--plein { width: 100%; }
.lien-fleche { display: inline-flex; align-items: center; gap: .45em; font-weight: 700; text-decoration: none; }
.lien-fleche::after { content: "→"; transition: transform var(--micro) var(--ease); }
.lien-fleche:hover::after { transform: translateX(3px); }
.lien-bouton { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }

/* --- Maquette : repères de validation -------------------------------------- */
.bandeau-maquette { position: relative; z-index: 120; padding: .35rem var(--marge); background: #fff4cc; color: #4a3800; font-size: .75rem; font-weight: 700; text-align: center; letter-spacing: .02em; }
.a-confirmer { display: inline-block; margin-left: .45em; padding: .1em .55em; border: 1px dashed #b38600; border-radius: var(--pilule); background: #fff4cc; color: #4a3800; font-size: .6875rem; font-weight: 700; letter-spacing: .02em; line-height: 1.5; vertical-align: middle; white-space: nowrap; text-transform: none; }
.lien-a-venir { text-decoration-style: dashed !important; }

/* --- En-tête --------------------------------------------------------------- */
.entete { position: sticky; top: 0; z-index: 100; color: var(--os); background: rgba(11,11,12,.78); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid var(--filet-sombre); }
.entete__barre { display: flex; align-items: center; gap: 1rem; height: var(--entete); }
.entete__logo { display: flex; align-items: center; gap: .6rem; color: var(--os); text-decoration: none; flex: none; }
.entete__logo img { width: 166px; filter: brightness(0) invert(1); }
@media (min-width: 560px) { .entete__logo img { width: 210px; } }
@media (min-width: 1420px) { .entete .entete__logo img { width: 200px; } }
.entete__ville { font-size: .6875rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; color: var(--os); padding: .3em .6em; border: 1px solid rgba(255,255,255,.28); border-radius: var(--pilule); line-height: 1; }
.entete__actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.entete__tel { display: none; align-items: center; gap: .45rem; color: var(--os); font-weight: 700; font-size: .9375rem; text-decoration: none; padding: .5rem .6rem; border-radius: var(--pilule); white-space: nowrap; }
.entete__tel:hover { background: rgba(255,255,255,.08); }
.entete__actions .bouton--primaire { display: none; }
.entete__burger { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; background: transparent; color: var(--os); cursor: pointer; }
.entete__burger .icone--fermer { display: none; }
.entete__burger[aria-expanded="true"] .icone--ouvrir { display: none; }
.entete__burger[aria-expanded="true"] .icone--fermer { display: block; }
.entete .a-confirmer { display: none; }
/* En-tête transparent au-dessus des héros sombres (accueil, en-têtes de page et d'article), verre dès que l'on défile ou que le menu est ouvert.
   Sans :has() (anciens navigateurs), l'en-tête reste en verre : aucune perte de lisibilité. */
.entete { transition: background-color var(--standard, .38s) var(--ease), border-color var(--standard, .38s) var(--ease); }
body:has(#contenu > .hero-page:first-child, #contenu > .article:first-child > .hero-page:first-child) .entete:not(.entete--defile):not(:has([aria-expanded="true"])) {
  background-color: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

@media screen {
  #contenu > .hero-page:first-child, #contenu > .article:first-child > .hero-page:first-child { margin-top: calc(-1 * var(--entete)); padding-top: calc(var(--entete) + clamp(2rem, 1.2rem + 3vw, 4.5rem)); }
}

.nav { position: fixed; inset: var(--entete) 0 0 0; z-index: 99; background: var(--noir); padding: 1rem var(--marge) 2rem; overflow-y: auto; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity var(--standard) var(--ease), transform var(--standard) var(--ease), visibility 0s linear var(--standard); }
.nav.est-ouvert { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.nav__liste { list-style: none; margin: 0; padding: 0; }
.nav__liste > li { border-bottom: 1px solid var(--filet-sombre); }
.nav__lien { display: block; padding: 1rem 0; color: var(--os); font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; text-decoration: none; }
.nav__groupe { display: grid; grid-template-columns: 1fr auto; align-items: center; }
.nav__ouvrir { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; color: var(--cendre); cursor: pointer; }
.nav__ouvrir .icone { transition: transform var(--standard) var(--ease); }
.nav__ouvrir[aria-expanded="true"] .icone { transform: rotate(180deg); }
.nav__panneau { grid-column: 1 / -1; display: none; padding: 0 0 1rem; }
.nav__groupe.est-ouvert .nav__panneau { display: block; }
.nav__cartes, .nav__arr { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.nav__cartes a { display: block; padding: .65rem .8rem; border-radius: var(--rayon-xs); color: var(--os); text-decoration: none; }
.nav__cartes a:hover { background: var(--noir-3); }
.nav__cartes b { display: block; font-weight: 700; }
.nav__cartes span { display: block; font-size: .875rem; color: var(--cendre); }
.nav__arr { grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.nav__arr a { display: grid; padding: .55rem .5rem; border: 1px solid var(--filet-sombre); border-radius: var(--rayon-xs); color: var(--os); text-decoration: none; text-align: center; }
.nav__arr a:hover { border-color: var(--accent-lumiere); background: var(--noir-3); }
.nav__arr b { font-weight: 750; }
.nav__arr span { font-size: .75rem; color: var(--cendre); }
.nav__titre { margin: 0 0 .6rem; font-size: var(--t-micro); font-weight: 700; color: var(--cendre); letter-spacing: .08em; text-transform: uppercase; }
.nav__pied { margin: .9rem 0 0; font-size: .9375rem; }
.nav__pied a { color: var(--accent-lien-sombre); }
.nav__mobile-actions { display: grid; gap: .6rem; margin-top: 1.5rem; }
body.menu-ouvert { overflow: hidden; }
/* Menu ouvert : pas de backdrop-filter sur l'en-tête, sinon il devient le bloc conteneur du menu fixe et le rogne */
body.menu-ouvert .entete { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: var(--noir); }

@media (min-width: 560px) { .entete__actions .bouton--primaire { display: inline-flex; } }
@media (min-width: 1180px) {
  .entete__logo img { width: 176px; }
  .entete__burger { display: none; }
  .entete__tel { display: inline-flex; }
  .nav { position: static; inset: auto; background: none; padding: 0; overflow: visible; transform: none; opacity: 1; visibility: visible; transition: none; margin-left: 1.5rem; }
  .nav__liste { display: flex; align-items: center; gap: .15rem; }
  .nav__liste > li { border: 0; position: relative; }
  .nav__lien { font-size: .9375rem; font-weight: 600; padding: .55rem .7rem; border-radius: var(--pilule); color: var(--os); letter-spacing: -.005em; }
  .nav__lien:hover { background: rgba(255,255,255,.08); }
  .nav__groupe { display: flex; }
  .nav__groupe .nav__lien { padding-right: .2rem; }
  .nav__ouvrir { width: 28px; height: 36px; }
  .nav__ouvrir .icone { width: 1rem; height: 1rem; }
  .nav__panneau { position: absolute; top: calc(100% + 10px); left: -1rem; display: block; min-width: 25rem; padding: 1rem; border-radius: var(--rayon); background: rgba(20,20,22,.96); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid var(--filet-sombre); box-shadow: var(--ombre-sombre); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--micro) var(--ease), transform var(--micro) var(--ease), visibility 0s linear var(--micro); }
  .nav__groupe:hover .nav__panneau, .nav__groupe:focus-within .nav__panneau, .nav__groupe.est-ouvert .nav__panneau { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  #menu-marseille { min-width: 30rem; }
  .nav__mobile-actions { display: none; }
}

/* --- Héros d'accueil --------------------------------------------------------- */
.hero-accueil { position: relative; overflow: hidden; background: var(--noir); color: var(--os); isolation: isolate; }
.hero-accueil__fond { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(60% 50% at 78% 30%, rgba(91,132,255,.16), transparent 70%),
  radial-gradient(70% 60% at 10% 100%, rgba(255,255,255,.06), transparent 70%), var(--noir); }
.hero-accueil__grille { display: grid; gap: 2.25rem; padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) clamp(3rem, 2rem + 4vw, 6rem); align-items: center; }
.hero-accueil__eyebrow { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1.25rem; padding: .4rem .85rem .4rem .55rem; border: 1px solid var(--filet-sombre); border-radius: var(--pilule); background: rgba(255,255,255,.04); font-size: .8125rem; font-weight: 650; color: var(--os); }
.hero-accueil__eyebrow .point { width: .55rem; height: .55rem; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px rgba(224,49,63,.18); }
.hero-accueil h1 { font-size: var(--t-geant); line-height: .98; letter-spacing: -.045em; margin-bottom: 1.25rem; }
.hero-accueil h1 em { font-style: normal; color: transparent; background: linear-gradient(100deg, #fff 0%, #b9c8ff 55%, #7f9dff 100%); -webkit-background-clip: text; background-clip: text; }
.hero-accueil__accroche { font-size: var(--t-chapo); line-height: 1.5; color: var(--cendre); max-width: 34rem; margin-bottom: 2rem; }
.hero-accueil__accroche strong { color: var(--os); font-weight: 650; }
.hero-accueil__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero-accueil__actions .bouton { flex: 1 1 15rem; }
@media (min-width: 640px) { .hero-accueil__actions .bouton { flex: 0 0 auto; } }
.hero-accueil__preuves { list-style: none; margin: 2.25rem 0 0; padding: 0; display: grid; gap: .75rem; }
.hero-accueil__preuves li { display: flex; gap: .65rem; align-items: flex-start; font-size: .9375rem; color: var(--cendre); }
.hero-accueil__preuves .icone { color: var(--accent-lumiere); margin-top: .15em; }
.hero-accueil__preuves strong { color: var(--os); font-weight: 650; }
@media (min-width: 640px) { .hero-accueil__preuves { grid-template-columns: repeat(3, 1fr); } }
.hero-accueil__media { position: relative; border-radius: var(--rayon); overflow: hidden; aspect-ratio: 4 / 5; max-height: 72vh; box-shadow: var(--ombre-sombre); background: var(--noir-3); }
.hero-accueil__media picture, .hero-accueil__media img { width: 100%; height: 100%; object-fit: cover; }
.hero-accueil__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(11,11,12,.85) 100%); pointer-events: none; }
.hero-accueil__carte { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; z-index: 2; display: flex; gap: .9rem; align-items: center; padding: .9rem 1rem; border-radius: var(--rayon-s); background: var(--verre-sombre); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border: 1px solid rgba(255,255,255,.12); }
.hero-accueil__carte .icone { width: 2.25rem; height: 2.25rem; padding: .45rem; border-radius: 50%; background: rgba(91,132,255,.18); color: #cdd8ff; }
.hero-accueil__carte p { margin: 0; font-size: .875rem; line-height: 1.4; color: var(--cendre); }
.hero-accueil__carte strong { display: block; color: var(--os); font-size: .9375rem; }
@media (min-width: 1024px) {
  .hero-accueil__grille { grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 4vw, 5rem); min-height: min(calc(100svh - var(--entete)), 860px); }
  .hero-accueil__media { aspect-ratio: auto; height: min(74vh, 720px); max-height: none; }
}
.mention-visuel { position: absolute; top: .75rem; right: .75rem; z-index: 2; padding: .2rem .55rem; border-radius: var(--pilule); background: rgba(11,11,12,.6); color: var(--cendre); font-size: .6875rem; font-weight: 600; letter-spacing: .02em; }

/* Profondeur : légère inclinaison au pointeur (desktop, mouvement autorisé) */
.profondeur { transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 600ms var(--ease); will-change: transform; }

/* --- Héros de page ------------------------------------------------------------ */
.hero-page { position: relative; background: var(--noir); color: var(--os); padding-block: clamp(2rem, 1.2rem + 3vw, 4.5rem) clamp(3rem, 2rem + 4vw, 6rem); overflow: hidden; isolation: isolate; }
.hero-page::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(55% 60% at 85% 10%, rgba(91,132,255,.14), transparent 70%); }
.hero-page__grille { display: grid; gap: 2rem; align-items: center; }
.hero-page h1 { max-width: 20ch; }
.hero-page--article h1 { max-width: none; font-size: clamp(2.125rem, 1.5rem + 2.8vw, 3.75rem); }
.hero-page__chapo { font-size: var(--t-chapo); line-height: 1.5; color: var(--cendre); max-width: 40rem; margin-bottom: 1.75rem; }
.hero-page__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero-page__media { position: relative; border-radius: var(--rayon); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--ombre-sombre); }
.hero-page__media picture, .hero-page__media img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) { .hero-page--image .hero-page__grille { grid-template-columns: 1.2fr .8fr; gap: 4rem; } .hero-page__media { aspect-ratio: 4 / 5; } }
.article__meta { margin: 0; font-size: var(--t-petit); color: var(--cendre); }

/* Fil d'Ariane */
.fil { margin-bottom: 1.5rem; font-size: .875rem; }
.fil ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .5rem; color: var(--cendre); }
.fil li + li::before { content: "/"; margin-right: .5rem; opacity: .5; }
.fil a { color: var(--cendre); text-decoration: none; }
.fil a:hover { color: var(--os); text-decoration: underline; }
.fil [aria-current] { color: var(--os); }

/* --- Cartes ------------------------------------------------------------------ */
.carte { position: relative; display: flex; flex-direction: column; padding: clamp(1.4rem, 1.1rem + 1vw, 2rem); border-radius: var(--rayon); background: var(--blanc); box-shadow: var(--ombre-1); border: 1px solid rgba(17,17,19,.05); transition: transform var(--standard) var(--ease), box-shadow var(--standard) var(--ease); }
.section--blanche .carte { background: var(--craie); box-shadow: none; }
.section--sombre .carte, .section--sombre-2 .carte { background: var(--noir-3); border-color: var(--filet-sombre); box-shadow: none; color: var(--os); }
a.carte, .carte--lien { color: inherit; text-decoration: none; }
a.carte:hover, .carte--lien:hover { transform: translateY(-3px); box-shadow: var(--ombre-2); }
.section--sombre a.carte:hover { box-shadow: var(--ombre-sombre); border-color: rgba(255,255,255,.18); }
.carte h3 { margin-bottom: .45rem; }
.carte p { color: var(--ardoise); margin-bottom: 0; }
.section--sombre .carte p, .section--sombre-2 .carte p { color: var(--cendre); }
.carte__icone { width: 3rem; height: 3rem; padding: .7rem; margin-bottom: 1.25rem; border-radius: var(--rayon-s); background: var(--accent-doux); color: var(--accent); }
.section--sombre .carte__icone, .section--sombre-2 .carte__icone { background: rgba(91,132,255,.14); color: #c3d0ff; }
.carte__pied { margin-top: auto; padding-top: 1.25rem; font-weight: 700; color: var(--accent); display: inline-flex; gap: .4rem; align-items: center; }
.section--sombre .carte__pied, .section--sombre-2 .carte__pied { color: var(--accent-lien-sombre); }
.carte__media { margin: calc(-1 * clamp(1.4rem, 1.1rem + 1vw, 2rem)); margin-bottom: 1.4rem; border-radius: var(--rayon) var(--rayon) 0 0; overflow: hidden; aspect-ratio: 16 / 10; }
.carte__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
a.carte:hover .carte__media img { transform: scale(1.04); }

/* --- Signes d'infestation ------------------------------------------------------ */
.signes { display: grid; gap: var(--gouttiere); }
@media (min-width: 640px) { .signes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .signes { grid-template-columns: repeat(3, 1fr); } }
.signe { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; padding: 1.5rem; border-radius: var(--rayon); background: var(--blanc); border: 1px solid rgba(17,17,19,.06); }
.signe .carte__icone { margin: 0; }
.signe h3 { font-size: 1.125rem; margin-bottom: .3rem; }
.signe p { margin: 0; color: var(--ardoise); font-size: var(--t-petit); }
.signe--alerte { grid-column: 1 / -1; background: var(--noir); color: var(--os); border-color: transparent; }
.signe--alerte p { color: var(--cendre); }
.signe--alerte .carte__icone { background: rgba(224,49,63,.16); color: #ff9aa2; }

/* --- Méthodes --------------------------------------------------------------- */
.methodes { display: grid; gap: var(--gouttiere); }
@media (min-width: 768px) { .methodes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .methodes { grid-template-columns: repeat(4, 1fr); } }
.methode { position: relative; overflow: hidden; display: flex; flex-direction: column; border-radius: var(--rayon); background: var(--noir-3); border: 1px solid var(--filet-sombre); color: var(--os); text-decoration: none; transition: transform var(--standard) var(--ease), border-color var(--standard) var(--ease); }
.methode:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.22); }
.methode__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--noir-2); }
.methode__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.methode:hover .methode__media img { transform: scale(1.05); }
.methode__corps { padding: 1.4rem 1.4rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.methode__num { font-size: var(--t-micro); font-weight: 700; color: var(--cendre); letter-spacing: .08em; margin-bottom: .5rem; }
.methode h3 { margin-bottom: .5rem; }
.methode p { color: var(--cendre); font-size: var(--t-petit); margin-bottom: 1rem; }
.methode .carte__pied { color: var(--accent-lien-sombre); }

/* --- Étapes ----------------------------------------------------------------- */
.etapes { list-style: none; margin: 0; padding: 0; counter-reset: etape; display: grid; gap: 1rem; }
@media (min-width: 900px) { .etapes { grid-template-columns: repeat(5, 1fr); gap: 1.25rem; } }
.etape { counter-increment: etape; position: relative; padding: 1.5rem 1.4rem; border-radius: var(--rayon); background: var(--blanc); border: 1px solid rgba(17,17,19,.06); }
.etape::before { content: counter(etape, decimal-leading-zero); display: block; margin-bottom: 1.4rem; font-size: 2.5rem; font-weight: 300; letter-spacing: -.05em; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.etape h3 { font-size: 1.125rem; margin-bottom: .4rem; }
.etape p { margin: 0; font-size: var(--t-petit); color: var(--ardoise); }
@media (min-width: 900px) { .etape:not(:last-child)::after { content: ""; position: absolute; top: 2.9rem; right: -1.25rem; width: 1.25rem; height: 1px; background: var(--filet-clair); } }

/* --- Expertise (liste de preuves) ------------------------------------------------- */
.expertise { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
@media (min-width: 1024px) { .expertise { grid-template-columns: .9fr 1.1fr; } }
.expertise__media { position: relative; border-radius: var(--rayon); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--ombre-sombre); }
.expertise__media img { width: 100%; height: 100%; object-fit: cover; }
.preuves { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.preuves li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1.25rem 0; border-top: 1px solid var(--filet-sombre); }
.preuves li:last-child { border-bottom: 1px solid var(--filet-sombre); }
.preuves .icone { width: 1.5rem; height: 1.5rem; color: var(--accent-lumiere); margin-top: .15rem; }
.preuves h3 { font-size: 1.125rem; margin-bottom: .25rem; }
.preuves p { margin: 0; color: var(--cendre); font-size: var(--t-petit); }
.certifs { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.75rem; }
.certifs li { list-style: none; display: flex; align-items: center; gap: .75rem; padding: .25rem 0; background: transparent; color: inherit; font-size: .875rem; font-weight: 600; }
.certifs img { height: 44px; width: auto; }

/* --- Module « Trouvez votre secteur » -------------------------------------------- */
.secteur { position: relative; max-width: 40rem; }
.secteur__champ { position: relative; display: flex; align-items: center; }
.secteur__champ .icone { position: absolute; left: 1.1rem; color: var(--ardoise); pointer-events: none; }
.secteur input { width: 100%; height: 60px; padding: 0 1.2rem 0 3.1rem; border-radius: var(--pilule); border: 1px solid var(--acier); background: var(--blanc); font-size: 1.0625rem; font-weight: 550; color: var(--encre); box-shadow: var(--ombre-1); }
.secteur input::placeholder { color: #77777e; font-weight: 450; }
.secteur input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-doux), var(--ombre-1); }
.secteur__liste { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + .5rem); margin: 0; padding: .4rem; list-style: none; border-radius: var(--rayon-s); background: var(--blanc); box-shadow: var(--ombre-2); border: 1px solid rgba(17,17,19,.08); max-height: 22rem; overflow-y: auto; }
.secteur__option { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem .85rem; border-radius: var(--rayon-xs); cursor: pointer; color: var(--encre); }
.secteur__option[aria-selected="true"], .secteur__option:hover { background: var(--accent-doux); }
.secteur__option b { font-weight: 700; }
.secteur__option small { font-size: .8125rem; color: var(--ardoise); white-space: nowrap; }
.secteur__vide { padding: .8rem .85rem; color: var(--ardoise); font-size: var(--t-petit); }
.secteur__resultat { margin-top: 1rem; padding: 1.1rem 1.25rem; border-radius: var(--rayon-s); background: var(--blanc); border: 1px solid rgba(17,17,19,.08); }
.secteur__resultat p { margin: 0 0 .75rem; }
.secteur__resultat .boutons { display: flex; flex-wrap: wrap; gap: .6rem; }
.secteur__aide { margin: .75rem 0 0 .25rem; font-size: .875rem; color: var(--ardoise); }

.arrondissements { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
@media (min-width: 640px) { .arrondissements { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1180px) { .arrondissements { grid-template-columns: repeat(8, 1fr); } }
.arrondissements a, .arrondissements span.arr { display: flex; flex-direction: column; gap: .15rem; height: 100%; padding: 1rem; border-radius: var(--rayon-s); background: var(--blanc); border: 1px solid rgba(17,17,19,.07); color: var(--encre); text-decoration: none; transition: border-color var(--micro) var(--ease), transform var(--micro) var(--ease); }
.arrondissements a:hover { border-color: var(--accent); transform: translateY(-2px); }
.arrondissements b { font-size: 1.375rem; font-weight: 780; letter-spacing: -.03em; }
.arrondissements small { font-size: .8125rem; color: var(--ardoise); }
.arrondissements .q { font-size: .75rem; color: var(--ardoise); line-height: 1.35; margin-top: .3rem; }
.communes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.communes li a, .communes li span { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem .95rem; border-radius: var(--pilule); border: 1px solid rgba(17,17,19,.14); background: var(--blanc); color: var(--encre); text-decoration: none; font-weight: 600; font-size: .9375rem; }
.communes li a:hover { border-color: var(--accent); }
.communes small { color: var(--ardoise); font-weight: 500; }

/* --- Bloc à deux colonnes texte / média --------------------------------------------- */
.duo { display: grid; gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
@media (min-width: 1024px) { .duo { grid-template-columns: 1fr 1fr; } .duo--inverse > :first-child { order: 2; } }
.duo__media { border-radius: var(--rayon); overflow: hidden; aspect-ratio: 4 / 3; position: relative; }
.duo__media img { width: 100%; height: 100%; object-fit: cover; }

/* --- Réponse directe (GEO) --------------------------------------------------------- */
.reponse { margin: 0 0 2.5rem; padding: 1.4rem 1.5rem; border-radius: var(--rayon-s); background: var(--blanc); border: 1px solid rgba(17,17,19,.07); border-left: 4px solid var(--accent); }
.reponse__question { margin: 0 0 .5rem; font-size: var(--t-micro); font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--ardoise); }
.reponse__texte p:last-child { margin-bottom: 0; }
.reponse__texte { font-size: 1.0625rem; }

/* --- Contenu éditorial ------------------------------------------------------------- */
.prose { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.prose h2 { font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.375rem); margin-top: 2.5em; }
.prose h2:first-child, .prose .reponse + h2 { margin-top: 0; }
.prose h3 { margin-top: 1.8em; }
.prose p, .prose li { color: #26262a; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--accent); }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0 2rem; font-size: var(--t-petit); background: var(--blanc); border-radius: var(--rayon-s); overflow: hidden; }
.prose th, .prose td { padding: .85rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--filet-clair); }
.prose th { background: var(--brume); font-weight: 700; }
.prose .tableau { overflow-x: auto; }
.prose blockquote { margin: 2rem 0; padding-left: 1.25rem; border-left: 3px solid var(--signal); font-size: 1.125rem; }
.figure { margin: 2rem 0; }
.figure picture { border-radius: var(--rayon-s); overflow: hidden; }
.figure figcaption { margin-top: .6rem; font-size: .875rem; color: var(--ardoise); }
.encadre { margin: 2rem 0; padding: 1.4rem 1.5rem; border-radius: var(--rayon-s); background: var(--brume); }
.encadre--alerte { background: #fdecee; border: 1px solid #f3c1c6; }
.encadre__titre { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; font-weight: 750; }
.encadre > :last-child { margin-bottom: 0; }
.liste-check { list-style: none; padding: 0; }
.liste-check li { position: relative; padding-left: 1.9rem; }
.liste-check li::before { content: ""; position: absolute; left: 0; top: .35em; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--accent-doux) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 3.8L18 8' fill='none' stroke='%231f49d6' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 75% no-repeat; }
.liste-croix { list-style: none; padding: 0; }
.liste-croix li { position: relative; padding-left: 1.9rem; }
.liste-croix li::before { content: "×"; position: absolute; left: 0; top: 0; width: 1.15rem; text-align: center; font-weight: 800; color: var(--erreur); }
.encart-cta { margin: 3rem 0; padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem); border-radius: var(--rayon); background: var(--noir); color: var(--os); }
.encart-cta__titre { font-size: 1.375rem; font-weight: 750; letter-spacing: -.02em; margin-bottom: .4rem; }
.encart-cta p { color: var(--cendre); }
.encart-cta__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.encart-cta .bouton--fantome { color: var(--os); border-color: rgba(255,255,255,.28); }
.sources { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--filet-clair); font-size: .875rem; color: var(--ardoise); }
.sources__titre { font-size: 1rem; margin-bottom: .75rem; letter-spacing: 0; }
.sources ol { padding-left: 1.2em; }
.sources li { margin-bottom: .35em; color: var(--ardoise); }
.lies { margin-top: 3rem; }
.lies__titre { font-size: 1.25rem; }
.lies ul { list-style: none; padding: 0; display: grid; gap: .6rem; }
.lies a { display: block; padding: 1rem 1.2rem; border-radius: var(--rayon-s); background: var(--blanc); border: 1px solid rgba(17,17,19,.07); text-decoration: none; color: var(--encre); }
.lies a:hover { border-color: var(--accent); }
.lies b { display: block; }
.lies span { font-size: .875rem; color: var(--ardoise); }

/* --- FAQ -------------------------------------------------------------------- */
.faq__liste { margin-top: 2rem; border-top: 1px solid var(--filet-clair); }
.faq__item { border-bottom: 1px solid var(--filet-clair); }
.faq__item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.3rem 0; cursor: pointer; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary h3 { margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.35; }
.faq__item summary .icone { color: var(--ardoise); transition: transform var(--standard) var(--ease); }
.faq__item[open] summary .icone { transform: rotate(180deg); }
.faq__reponse { padding: 0 0 1.4rem; color: #2b2b30; max-width: 40rem; }
.faq__reponse p:last-child { margin-bottom: 0; }

/* --- Appel final --------------------------------------------------------------- */
.final { position: relative; overflow: hidden; isolation: isolate; }
.final::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 80% at 90% 50%, rgba(91,132,255,.18), transparent 70%); }
.final__grille { display: grid; gap: 2rem; align-items: end; }
@media (min-width: 1024px) { .final__grille { grid-template-columns: 1.3fr .7fr; gap: 4rem; } }
.final__titre { font-size: var(--t-h2); max-width: 22ch; }
.final__texte { color: var(--cendre); font-size: var(--t-chapo); max-width: 36rem; }
.final__actions { display: grid; gap: .75rem; }
.final__lien { color: var(--accent-lien-sombre) !important; font-weight: 600; text-align: center; padding: .5rem; }

/* --- Formulaires ------------------------------------------------------------- */
.champ { display: grid; gap: .4rem; margin-bottom: 1.1rem; }
.champ label, .champ legend { font-weight: 700; font-size: .9375rem; }
.champ .aide { font-size: .8125rem; color: var(--ardoise); font-weight: 500; }
.champ input, .champ select, .champ textarea { width: 100%; min-height: 52px; padding: .8rem 1rem; border-radius: var(--rayon-xs); border: 1px solid var(--acier); background: var(--blanc); font-size: 1.0625rem; }
.champ textarea { min-height: 120px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-doux); }
.champ [aria-invalid="true"] { border-color: var(--erreur); box-shadow: 0 0 0 3px rgba(192,40,45,.12); }
.erreur-champ { color: var(--erreur); font-size: .875rem; font-weight: 650; }
.diagnostic__precision { margin: 1.25rem 0 0; }
.diagnostic__precision input { max-width: 12rem; }
.case { display: flex; gap: .7rem; align-items: flex-start; font-size: .9375rem; }
.case input { width: 1.25rem; height: 1.25rem; margin-top: .2rem; accent-color: var(--accent); flex: none; }
.pot-de-miel { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire { padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem); border-radius: var(--rayon); background: var(--blanc); box-shadow: var(--ombre-2); color: var(--encre); }
.formulaire__ligne { display: grid; gap: 0 1rem; }
@media (min-width: 640px) { .formulaire__ligne { grid-template-columns: 1fr 1fr; } }
.message { padding: 1rem 1.2rem; border-radius: var(--rayon-xs); font-weight: 600; margin-bottom: 1rem; }
.message--erreur { background: #fdecee; color: #7a1419; }
.message--succes { background: #e7f5ec; color: #11502c; }
.mention-form { font-size: .8125rem; color: var(--ardoise); margin-top: 1rem; }

/* --- Diagnostic interactif ---------------------------------------------------------- */
.diagnostic { position: relative; border-radius: calc(var(--rayon) + 4px); background: var(--blanc); color: var(--encre); box-shadow: var(--ombre-2); overflow: hidden; }
.section--sombre .diagnostic { box-shadow: var(--ombre-sombre); }
.diagnostic__tete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem clamp(1.25rem, 1rem + 1.5vw, 2.25rem); border-bottom: 1px solid var(--filet-clair); }
.diagnostic__etape-num { font-size: var(--t-micro); font-weight: 750; color: var(--ardoise); letter-spacing: .06em; text-transform: uppercase; }
.diagnostic__progression { position: relative; flex: 1; max-width: 14rem; height: 6px; border-radius: var(--pilule); background: var(--brume); overflow: hidden; }
.diagnostic__progression span { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p, .125)); background: var(--accent); border-radius: inherit; transition: transform var(--standard) var(--ease); }
.diagnostic__corps { padding: clamp(1.5rem, 1.1rem + 2vw, 2.75rem) clamp(1.25rem, 1rem + 1.5vw, 2.25rem); }
.diagnostic fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.diagnostic__question { display: block; margin: 0 0 .4rem; padding: 0; font-size: clamp(1.375rem, 1.15rem + 1vw, 2rem); font-weight: 760; letter-spacing: -.03em; line-height: 1.15; }
.diagnostic__aide { margin: 0 0 1.5rem; color: var(--ardoise); font-size: var(--t-petit); }
.choix { display: grid; gap: .6rem; }
@media (min-width: 640px) { .choix--2 { grid-template-columns: repeat(2, 1fr); } .choix--3 { grid-template-columns: repeat(3, 1fr); } }
.choix__option { position: relative; }
.choix__option input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.choix__carte { display: flex; align-items: center; gap: .85rem; min-height: 60px; padding: .85rem 1rem; border-radius: var(--rayon-s); border: 1px solid var(--acier); background: var(--blanc); font-weight: 650; line-height: 1.3; transition: border-color var(--micro) var(--ease), background-color var(--micro) var(--ease), box-shadow var(--micro) var(--ease); }
.choix__carte .icone { width: 1.5rem; height: 1.5rem; color: var(--ardoise); }
.choix__carte small { display: block; font-weight: 500; font-size: .8125rem; color: var(--ardoise); margin-top: .15rem; }
.choix__option input:hover + .choix__carte { border-color: var(--encre); }
.choix__option input:focus-visible + .choix__carte { outline: 3px solid var(--accent); outline-offset: 2px; }
.choix__option input:checked + .choix__carte { border-color: var(--accent); background: var(--accent-doux); box-shadow: inset 0 0 0 1px var(--accent); }
.choix__option input:checked + .choix__carte .icone { color: var(--accent); }
.diagnostic__nav { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-top: 2rem; }
.diagnostic__nav .bouton--fantome { border-color: transparent; padding-left: .6rem; }
/* Carte blanche du diagnostic posée sur un fond sombre : liens et bouton « Retour » gardent les couleurs du clair */
.diagnostic a:not(.bouton) { color: var(--accent); }
.diagnostic .diagnostic__nav .bouton--fantome { color: var(--encre); background: transparent; }
.diagnostic__panneau { animation: entree var(--standard) var(--ease); }
@keyframes entree { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.diagnostic__resultat h3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); }
.niveau { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem; border-radius: var(--pilule); font-weight: 750; font-size: .875rem; margin-bottom: 1rem; }
.niveau::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
.niveau--eleve { background: #fdecee; color: #8f1d24; }
.niveau--moyen { background: #fff4d6; color: #6b4b00; }
.niveau--faible { background: #e9eefc; color: #1a3aa8; }
.synthese { display: grid; gap: .5rem; margin: 1.5rem 0; padding: 1.1rem 1.25rem; border-radius: var(--rayon-s); background: var(--craie); font-size: var(--t-petit); }
.synthese div { display: grid; grid-template-columns: 9rem 1fr; gap: .75rem; }
.synthese dt { color: var(--ardoise); font-weight: 600; }
.synthese dd { margin: 0; font-weight: 650; }
.diagnostic__mention { font-size: .8125rem; color: var(--ardoise); margin-top: 1.25rem; }
.diagnostic__passer { background: none; border: 0; padding: 0; color: var(--ardoise); text-decoration: underline; text-underline-offset: .18em; font-size: .875rem; cursor: pointer; margin-top: 1rem; }
.diag-intro { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
@media (min-width: 1024px) { .diag-intro { grid-template-columns: .8fr 1.2fr; } .diag-intro__texte { position: sticky; top: calc(var(--entete) + 2rem); } }
.diag-atouts { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .9rem; }
.diag-atouts li { display: flex; gap: .7rem; align-items: flex-start; color: var(--cendre); }
.diag-atouts .icone { color: var(--accent-lumiere); margin-top: .15rem; }
.diag-atouts strong { color: var(--os); }

/* --- Pied de page ------------------------------------------------------------ */
.pied { background: var(--noir-2); color: var(--cendre); padding-block: clamp(3.5rem, 2.5rem + 3vw, 5.5rem) 6.5rem; font-size: var(--t-petit); }
.pied a { color: var(--os); text-decoration: none; }
.pied a:hover { text-decoration: underline; }
.pied__haut { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .pied__haut { grid-template-columns: 1fr 1.6fr; gap: 4rem; } }
.pied__logo { width: 210px; filter: brightness(0) invert(1); }
.pied__ville { margin: .6rem 0 1rem; font-size: .75rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; color: var(--os); }
.pied__texte { max-width: 26rem; }
.pied__nap { font-style: normal; line-height: 1.7; }
.pied__nap strong { color: var(--os); }
.pied__nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
@media (min-width: 640px) { .pied__nav { grid-template-columns: repeat(3, 1fr); } }
.pied__titre { margin: 0 0 .75rem; color: var(--os); font-weight: 750; font-size: .875rem; }
.pied__nav ul { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .5rem; }
.pied__nav a { color: var(--cendre); }
.pied__nav a:hover { color: var(--os); }
.pied__certifs { list-style: none; margin: 3rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid var(--filet-sombre); display: flex; flex-wrap: wrap; gap: 1rem 2rem; }
.pied__certifs li { display: flex; align-items: center; gap: .75rem; }
.pied__certifs img { height: 44px; width: auto; }
.pied__bas { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--filet-sombre); display: grid; gap: .75rem; font-size: .8125rem; }
.pied__bas p { margin: 0; }
.pied__bas ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0; padding: 0; }
.pied__bas .lien-bouton { color: var(--os); font-size: .8125rem; text-decoration: none; }
@media (min-width: 900px) { .pied__bas { grid-template-columns: 1fr auto; } .pied { padding-bottom: 3rem; } }

/* --- Barre d'action mobile ------------------------------------------------------------ */
.barre-mobile { position: fixed; left: .6rem; right: .6rem; bottom: calc(.6rem + env(safe-area-inset-bottom)); z-index: 90; display: grid; grid-template-columns: auto 1fr; gap: .5rem; padding: .45rem; border-radius: var(--pilule); background: rgba(11,11,12,.88); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 12px 40px -10px rgba(0,0,0,.6); transform: translateY(0); transition: transform var(--standard) var(--ease), opacity var(--standard) var(--ease); }
.barre-mobile.est-cachee { transform: translateY(140%); opacity: 0; }
.barre-mobile a { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; border-radius: var(--pilule); font-weight: 700; font-size: .9375rem; text-decoration: none; }
.barre-mobile__tel { padding: 0 1.1rem; color: var(--os); background: rgba(255,255,255,.08); }
.barre-mobile__diag { background: var(--accent); color: #fff; padding: 0 1rem; }
@media (min-width: 900px) { .barre-mobile { display: none; } }

/* --- Consentement ------------------------------------------------------------------ */
.consentement { position: fixed; z-index: 150; left: .75rem; right: .75rem; bottom: calc(5.2rem + env(safe-area-inset-bottom)); max-width: 26rem; padding: 1.25rem; border-radius: var(--rayon); background: var(--noir-2); color: var(--cendre); border: 1px solid var(--filet-sombre); box-shadow: var(--ombre-sombre); font-size: .875rem; }
.consentement a { color: var(--accent-lien-sombre); }
.consentement__titre { color: var(--os); font-weight: 750; font-size: 1rem; margin-bottom: .4rem; }
.consentement__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: 1rem; }
.consentement .bouton--fantome { color: var(--os); border-color: rgba(255,255,255,.28); }
@media (min-width: 900px) { .consentement { left: 1.5rem; bottom: 1.5rem; } }

/* --- Bandeau de chiffres / repères -------------------------------------------------------- */
.reperes { display: grid; gap: 1px; background: var(--filet-sombre); border-radius: var(--rayon); overflow: hidden; }
@media (min-width: 768px) { .reperes { grid-template-columns: repeat(3, 1fr); } }
.repere { padding: 1.75rem 1.5rem; background: var(--noir-2); }
.repere b { display: block; font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); font-weight: 760; letter-spacing: -.04em; color: var(--os); line-height: 1.05; margin-bottom: .4rem; }
.repere span { color: var(--cendre); font-size: var(--t-petit); }

/* --- Pages locales ------------------------------------------------------------------ */
.faits { display: grid; gap: .75rem; margin: 0; }
@media (min-width: 640px) { .faits { grid-template-columns: repeat(3, 1fr); } }
.fait { padding: 1.25rem; border-radius: var(--rayon-s); background: var(--blanc); border: 1px solid rgba(17,17,19,.07); }
.fait dt { font-size: .8125rem; color: var(--ardoise); font-weight: 650; }
.fait dd { margin: .2rem 0 0; font-size: 1.375rem; font-weight: 760; letter-spacing: -.03em; }
.fait .source-fait { display: block; font-size: .75rem; color: var(--ardoise); font-weight: 500; letter-spacing: 0; margin-top: .25rem; }
.quartiers-liste { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.quartiers-liste li { padding: .45rem .85rem; border-radius: var(--pilule); background: var(--blanc); border: 1px solid rgba(17,17,19,.1); font-size: .9375rem; font-weight: 600; }
.quartiers-liste a { color: var(--encre); text-decoration: none; }
.quartiers-liste a:hover { color: var(--accent); }
.voisins { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; }
.voisins a { display: inline-flex; padding: .55rem .95rem; border-radius: var(--pilule); background: var(--noir-3); color: var(--os) !important; text-decoration: none; font-weight: 650; border: 1px solid var(--filet-sombre); }
.voisins a:hover { border-color: var(--accent-lumiere); }

/* --- Révélations au défilement -------------------------------------------------------------- */
.js [data-reveler] { opacity: 0; transform: translateY(28px); transition: opacity var(--revelation) var(--ease), transform var(--revelation) var(--ease); transition-delay: var(--delai, 0ms); }
.js [data-reveler].est-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js [data-reveler] { opacity: 1; transform: none; }
  .profondeur { transform: none !important; }
}

@media print {
  .entete, .barre-mobile, .consentement, .pied__nav, .final, .bandeau-maquette { display: none !important; }
  body { background: #fff; }
}

/* Diagnostic sans JavaScript : formulaire complet sur une page, envoi classique */
.diagnostic:not(.diagnostic--actif) [data-resultat],
.diagnostic:not(.diagnostic--actif) [data-action="suivant"],
.diagnostic:not(.diagnostic--actif) [data-action="precedent"],
.diagnostic:not(.diagnostic--actif) .diagnostic__passer,
.diagnostic:not(.diagnostic--actif) .diagnostic__tete { display: none; }
.diagnostic:not(.diagnostic--actif) fieldset + fieldset { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--filet-clair); }
[hidden] { display: none !important; }

/* --- Carte stylisée des arrondissements --- */
.carte-arr { margin: 0; }
.carte-arr svg { width: 100%; height: auto; max-height: 560px; }
.carte-arr__zone path { fill: var(--blanc); stroke: var(--brume); stroke-width: 2.5; stroke-linejoin: round; transition: fill var(--micro) var(--ease); }
.carte-arr__zone text { font: 750 26px/1 var(--police); fill: var(--ardoise); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
a.carte-arr__zone:hover path, a.carte-arr__zone:focus-visible path { fill: var(--accent); }
a.carte-arr__zone:hover text, a.carte-arr__zone:focus-visible text { fill: #fff; }
a.carte-arr__zone:focus-visible { outline: none; }
.carte-arr__zone--siege path { fill: #dfe6fb; }
.carte-arr figcaption { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; font-size: .8125rem; color: var(--ardoise); }
.carte-arr__point { width: .6rem; height: .6rem; border-radius: 50%; background: #dfe6fb; box-shadow: 0 0 0 1px var(--accent); }
.marseille-grille { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
@media (min-width: 1024px) { .marseille-grille { grid-template-columns: 1fr 1fr; } }

/* Téléphone dans le texte courant */
.lien-tel { display: inline-flex; align-items: center; gap: .35em; font-weight: 700; color: var(--accent); text-decoration: none; white-space: nowrap; }
.lien-tel .icone { width: 1em; height: 1em; }
.lien-tel:hover { text-decoration: underline; }
.section--sombre .lien-tel, .section--sombre-2 .lien-tel { color: var(--accent-lien-sombre); }

/* Étapes à 3 ou 4 colonnes */
@media (min-width: 900px) { .etapes--3 { grid-template-columns: repeat(3, 1fr); } .etapes--4 { grid-template-columns: repeat(4, 1fr); } }
/* Les images remplissent toujours leur cadre */
.methode__media picture, .duo__media picture, .carte__media picture, .expertise__media picture, .hero-page__media picture, .hero-accueil__media picture { display: block; width: 100%; height: 100%; }
.methode__media img, .duo__media img, .carte__media img, .expertise__media img { width: 100%; height: 100%; object-fit: cover; }

/* Guides : image d'illustration, étapes verticales, galerie, impression */
.article__image { display: block; margin: 0 0 2rem; border-radius: var(--rayon); overflow: hidden; aspect-ratio: 16 / 9; }
.article__image img { width: 100%; height: 100%; object-fit: cover; }
.article__imprimer { margin: -1rem 0 2rem; }
.prose .etapes { grid-template-columns: 1fr; gap: .75rem; margin: 1.5rem 0 2rem; }
.prose .etape { display: grid; grid-template-columns: auto 1fr; gap: 0 1rem; align-items: start; }
.prose .etape::before { grid-row: span 2; margin: 0; font-size: 1.75rem; }
.prose .etape::after { display: none; }
.galerie-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin: 1.5rem 0 2rem; }
.galerie-3 figure { margin: 0; }
.galerie-3 picture { border-radius: var(--rayon-s); overflow: hidden; background: var(--blanc); }
.galerie-3 figcaption { margin-top: .4rem; font-size: .8125rem; color: var(--ardoise); text-align: center; }
@media print {
  .hero-page { background: #fff; color: #000; padding: 0 0 1rem; }
  .hero-page__chapo, .article__meta, .fil a, .fil li { color: #333; }
  .encart-cta, .lies, .article__imprimer, .article__image, .mention-visuel { display: none !important; }
  .prose { padding: 0; }
  .prose a { color: #000; text-decoration: none; }
  .liste-check li::before { background: none; border: 1.5px solid #000; border-radius: 3px; }
  .reponse { border: 1px solid #999; }
  h2, h3 { break-after: avoid; }
  li, tr { break-inside: avoid; }
}

/* Maquette : pastille masquée dans les boutons sur petit écran */
@media (max-width: 480px) { .bouton .a-confirmer { display: none; } }

/* Liens dans les composants sombres hors sections sombres */
.signe--alerte a, .encart-cta a:not(.bouton), .hero-page a:not(.bouton):not(.fil a), .final a:not(.bouton), .consentement a { color: var(--accent-lien-sombre); }

/* --- Protocoles (sans prix) --- */
.protocoles { display: grid; gap: var(--gouttiere); }
@media (min-width: 768px) { .protocoles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .protocoles { grid-template-columns: repeat(4, 1fr); } }
.protocole { position: relative; display: flex; flex-direction: column; padding: 1.6rem 1.4rem; border-radius: var(--rayon); background: var(--blanc); border: 1px solid rgba(17,17,19,.07); }
.protocole--vedette { background: var(--noir); color: var(--os); border-color: transparent; box-shadow: var(--ombre-sombre); }
.protocole h3 { font-size: 1.25rem; margin-bottom: .35rem; }
.protocole__badge { position: absolute; top: 1.1rem; right: 1.1rem; margin: 0; display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .65rem; border-radius: var(--pilule); background: rgba(91,132,255,.16); color: #c9d5ff; font-size: .75rem; font-weight: 750; }
.protocole__badge::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--signal); }
.protocole__accroche { color: var(--ardoise); font-weight: 600; }
.protocole--vedette .protocole__accroche { color: var(--cendre); }
.protocole__details { margin: .5rem 0 1rem; display: grid; gap: .7rem; font-size: var(--t-petit); }
.protocole__details dt { font-size: .75rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--ardoise); }
.protocole--vedette .protocole__details dt { color: var(--cendre); }
.protocole__details dd { margin: .15rem 0 0; }
.protocole__techniques { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.protocole__techniques li { padding: .25rem .6rem; border-radius: var(--pilule); background: var(--accent-doux); color: var(--accent); font-size: .75rem; font-weight: 700; }
.protocole--vedette .protocole__techniques li { background: rgba(91,132,255,.16); color: #c9d5ff; }
.protocoles__communs { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: .75rem; }
@media (min-width: 1024px) { .protocoles__communs { grid-template-columns: repeat(3, 1fr); } }
.protocoles__communs li { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--t-petit); color: #2b2b30; }
.protocoles__communs .icone { color: var(--accent); margin-top: .15rem; }

.protocole__badge { position: static; align-self: flex-start; margin: 0 0 .75rem; }
/* Forfaits au format du site lyonnais (cartes « offre »), sans prix */
.protocole { padding: 1.6rem 1.4rem 1.4rem; gap: .2rem; }
.protocole__tete { margin-bottom: .6rem; }
.protocole__type { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: 0 0 .5rem; font-size: .75rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--ardoise); min-height: 1.6rem; }
.protocole--vedette .protocole__type { color: var(--cendre); }
.protocole__type .protocole__badge { margin: 0; letter-spacing: .02em; text-transform: none; }
.protocole__nom { font-size: clamp(1.35rem, 1.2rem + .5vw, 1.6rem); letter-spacing: -.02em; margin: 0 0 .4rem; }
.protocole__techniques { margin: 0 0 1.1rem; }
.protocole__pied { margin-top: auto; padding-top: 1.1rem; border-top: 1px solid var(--filet-clair); display: grid; gap: .9rem; }
.protocole--vedette .protocole__pied { border-top-color: var(--filet-sombre); }
.protocole__devis { margin: 0; display: grid; gap: .1rem; }
.protocole__devis b { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.protocole__devis small { font-size: .8125rem; color: var(--ardoise); }
.protocole--vedette .protocole__devis small { color: var(--cendre); }
.protocoles__hesitation { margin: 1.5rem 0 0; font-size: var(--t-petit); }

/* Certifications (À propos) */
.certifs-liste { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1rem; }
.certifs-liste li { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1.25rem; align-items: center; padding: 1.25rem 0; border-bottom: 1px solid var(--filet-clair); background: transparent; }
.certifs-liste li:last-child { border-bottom: 0; }
/* Bloc certifications sur fond sombre : les logos (PNG transparents, conçus pour le sombre) restent lisibles sans cartouche */
.certifs-bloc .certifs-liste li { border-bottom-color: var(--filet-sombre); }
.certifs-bloc h2, .certifs-bloc .certifs-liste h3 { color: var(--os); }
.certifs-bloc .certifs-liste p { color: var(--cendre); }
.certifs-liste img { width: 100%; height: 64px; object-fit: contain; }
.certifs-liste h3 { font-size: 1.0625rem; margin: 0 0 .25rem; }
.certifs-liste p { margin: 0; font-size: var(--t-petit); color: var(--ardoise); }

.prose .etiquette + h2 { margin-top: 0; }
.barre-mobile a { white-space: nowrap; }
@media (max-width: 360px) { .barre-mobile__tel { padding: 0 .85rem; } .barre-mobile a { font-size: .875rem; } }

/* =============================================================================
   Direction « Affiche » (v2, 13/10/2026) — inspirée des références du client :
   mot géant derrière le sujet, atmosphères bleues, verre dépoli, icônes cerclées,
   titres en deux graisses, annotations sur image, anneau de progression, panneau courbe.
   ========================================================================== */
:root {
  --nuit: #060b1f;
  --marine: #0b1b52;
  --roi: #1f49d6;
  --ciel: #5b84ff;
  --brume-bleue: #c9d4ff;
  --degrade-affiche: radial-gradient(110% 85% at 78% 18%, #2c5dff 0%, #1638bd 26%, #0c1f62 55%, #060b1f 100%);
  --degrade-doux: linear-gradient(160deg, #eef2ff 0%, #f5f5f3 55%, #eaf0ff 100%);
  --verre: rgba(255,255,255,.1);
  --verre-bord: rgba(255,255,255,.22);
  --verre-clair-fond: rgba(255,255,255,.66);
}

/* Mot géant : décor CSS, jamais lu (aria-hidden) */
.a-mot { position: relative; isolation: isolate; overflow: hidden; }
.mot-geant { position: absolute; z-index: -1; left: 50%; top: var(--mot-top, 6%); transform: translateX(-50%); margin: 0; white-space: nowrap; pointer-events: none; user-select: none;
  font-size: clamp(5rem, 1rem + 17vw, 17rem); font-weight: 800; letter-spacing: -.06em; line-height: .8; text-transform: uppercase;
  color: transparent; background: linear-gradient(180deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.03) 85%); -webkit-background-clip: text; background-clip: text; }
.mot-geant--clair { background: linear-gradient(180deg, rgba(31,73,214,.14) 0%, rgba(31,73,214,0) 85%); -webkit-background-clip: text; background-clip: text; }

/* Verre dépoli */
.verre { background: var(--verre); border: 1px solid var(--verre-bord); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); border-radius: 18px; color: #fff; box-shadow: 0 20px 50px -20px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18); }
.verre--clair { background: var(--verre-clair-fond); border-color: rgba(255,255,255,.8); color: var(--encre); box-shadow: 0 20px 50px -24px rgba(17,17,19,.35); }

/* Icône cerclée (au trait, comme les références) */
.puce-icone { flex: none; display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1.5px solid currentColor; }
.puce-icone .icone { width: 1.25rem; height: 1.25rem; }
.liste-icones { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.liste-icones li { display: flex; gap: .9rem; align-items: center; }
.liste-icones strong { display: block; font-weight: 700; }
.liste-icones small { display: block; font-size: .875rem; opacity: .78; }
.liste-icones.discretion { gap: 1.4rem; }
.liste-icones.discretion li { align-items: flex-start; }
.liste-icones.discretion .puce-icone { color: var(--accent); background: var(--accent-doux); border-color: transparent; }
.liste-icones.discretion small { color: var(--ardoise); opacity: 1; font-size: .9375rem; margin-top: .15rem; }

/* Titre en deux graisses */
.titre-duo { font-weight: 400; letter-spacing: -.035em; }
.titre-duo b, .titre-duo strong { font-weight: 800; }

/* --- Héros d'accueil v2 --- */
.hero-v2 { background: var(--nuit); }
.hero-v2 .hero-accueil__fond { background: var(--degrade-affiche); }
.hero-v2 .hero-accueil__fond::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(115deg, transparent 30%, rgba(255,255,255,.07) 42%, transparent 52%),
  linear-gradient(115deg, transparent 58%, rgba(255,255,255,.05) 64%, transparent 72%); }
.hero-v2 .mot-geant { top: auto; bottom: -.08em; font-size: clamp(4.5rem, 1rem + 16vw, 16rem); }
.hero-v2 h1 em { background: linear-gradient(100deg, #ffffff 0%, #c9d4ff 60%, #8fa9ff 100%); -webkit-background-clip: text; background-clip: text; }
.hero-v2 .hero-accueil__accroche { color: var(--brume-bleue); }
.hero-v2 .hero-accueil__eyebrow { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.hero-v2 .hero-accueil__preuves li { color: var(--brume-bleue); align-items: center; }
.hero-v2 .hero-accueil__preuves .puce-icone { color: #fff; border-color: rgba(255,255,255,.45); }
.hero-v2 .hero-accueil__preuves .icone { color: #fff; margin: 0; }
.hero-v2__scene { position: relative; }
.hero-v2 .hero-accueil__media { box-shadow: 0 40px 90px -30px rgba(3,8,30,.9), 0 0 0 1px rgba(255,255,255,.08); }
.hero-v2 .hero-accueil__media::after { background: linear-gradient(180deg, transparent 50%, rgba(6,11,31,.75) 100%); }
.flottant { position: absolute; z-index: 3; display: flex; align-items: center; gap: .7rem; padding: .7rem .95rem .7rem .7rem; font-size: .875rem; line-height: 1.3; }
.flottant .puce-icone { width: 2.25rem; height: 2.25rem; color: #fff; border-color: rgba(255,255,255,.5); }
.flottant .puce-icone .icone { width: 1.05rem; height: 1.05rem; }
.flottant strong { display: block; font-size: .9375rem; }
.flottant small { display: block; color: var(--brume-bleue); font-size: .8125rem; }
.flottant--haut { top: 8%; left: -6%; }
.flottant--droite { top: 34%; right: -7%; }
.hero-v2__reperes { position: absolute; z-index: 3; left: -4%; right: 6%; bottom: 5%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: .9rem 0; }
.hero-v2__reperes div { padding: 0 1rem; border-left: 1px solid rgba(255,255,255,.18); }
.hero-v2__reperes div:first-child { border-left: 0; }
.hero-v2__reperes b { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.hero-v2__reperes span { font-size: .75rem; color: var(--brume-bleue); }
@media (max-width: 1023px) {
  .flottant--haut { left: .75rem; top: .75rem; }
  .flottant--droite { display: none; }
  .hero-v2__reperes { left: .75rem; right: .75rem; bottom: .75rem; }
}
@media (max-width: 420px) { .hero-v2__reperes b { font-size: 1.2rem; } .hero-v2__reperes div { padding: 0 .6rem; } }

/* --- Héros de page v2 : atmosphère bleue + mot géant --- */
.hero-page { background: var(--nuit); }
.hero-page::before { background: var(--degrade-affiche); opacity: .92; }
.hero-page .mot-geant { top: auto; bottom: -.1em; font-size: clamp(4rem, 1rem + 13vw, 13rem); }
.hero-page__chapo { color: var(--brume-bleue); }
.hero-page .fil a, .hero-page .fil ol { color: var(--brume-bleue); }

/* --- Diagnostic : anneau de progression --- */
.diagnostic__anneau { width: 46px; height: 46px; flex: none; transform: rotate(-90deg); }
.diagnostic__anneau circle { fill: none; stroke-width: 3.2; }
.diagnostic__anneau .fond { stroke: var(--brume); }
.diagnostic__anneau .valeur { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, .125) * 100); transition: stroke-dashoffset var(--standard) var(--ease); }
.diagnostic__tete-gauche { display: flex; align-items: center; gap: .8rem; }
.diagnostic__tete .diagnostic__progression { display: none; }
.section--sombre .diagnostic, .section--sombre-2 .diagnostic, .section--affiche .diagnostic { box-shadow: 0 40px 90px -30px rgba(3,8,30,.85), 0 0 0 1px rgba(255,255,255,.06), 0 0 80px -20px rgba(91,132,255,.35); }
.section--affiche { background: var(--degrade-affiche); color: #fff; }
.section--affiche .chapo, .section--affiche .etiquette { color: var(--brume-bleue); }
.section--affiche a:not(.bouton) { color: #dfe6ff; }
.diag-atouts.liste-icones li { color: var(--brume-bleue); }
.diag-atouts.liste-icones .puce-icone { color: #fff; border-color: rgba(255,255,255,.45); }
.diag-atouts.liste-icones strong { color: #fff; }

/* --- Signes : visuel annoté (façon « Aqua ») --- */
.signes-v2 { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
@media (min-width: 1024px) { .signes-v2 { grid-template-columns: .95fr 1.05fr; } }
.visuel-annote { position: relative; border-radius: 22px; overflow: visible; }
.visuel-annote picture { display: block; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 30px 70px -30px rgba(17,17,19,.45); }
.visuel-annote picture img { width: 100%; height: 100%; object-fit: cover; }
.annotation { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .75rem; border-radius: 10px; font-size: .8125rem; font-weight: 650; line-height: 1.25; }
.annotation::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px rgba(224,49,63,.2); flex: none; }
.annotation--a { top: 12%; left: -4%; }
.annotation--b { top: 46%; right: -5%; }
.annotation--c { bottom: 10%; left: 8%; }
@media (max-width: 767px) { .annotation--a { left: .6rem; } .annotation--b { right: .6rem; } }
.signes-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.signes-liste li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; padding: 1rem 0; border-bottom: 1px solid var(--filet-clair); }
.signes-liste .puce-icone { color: var(--accent); border-color: rgba(31,73,214,.35); }
.signes-liste h3 { font-size: 1.0625rem; margin: .1rem 0 .2rem; }
.signes-liste p { margin: 0; font-size: var(--t-petit); color: var(--ardoise); }

/* --- Traitements : cartes-affiches --- */
.methode { min-height: 30rem; justify-content: flex-end; isolation: isolate; border: 0; }
.methode__media { position: absolute; inset: 0; z-index: -2; aspect-ratio: auto; }
.methode::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6,11,31,.05) 20%, rgba(6,11,31,.55) 55%, rgba(6,11,31,.94) 100%); transition: background var(--standard) var(--ease); }
.methode:hover::after { background: linear-gradient(180deg, rgba(12,31,98,.1) 15%, rgba(12,31,98,.6) 52%, rgba(6,11,31,.96) 100%); }
.methode__corps { position: static; padding: 1.5rem; flex: 0; }
.methode__num { position: absolute; top: 1.25rem; left: 1.25rem; display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.55); color: #fff; background: rgba(255,255,255,.08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: .875rem; }
.methode h3 { font-size: 1.5rem; }
.methode p { color: #d6ddf5; }
.methode:hover { box-shadow: 0 30px 70px -25px rgba(31,73,214,.6); }

/* --- Étapes : numéros cerclés --- */
.etape::before { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; border: 1.5px solid rgba(31,73,214,.35); font-size: 1rem; font-weight: 750; letter-spacing: 0; margin-bottom: 1.1rem; }

/* --- Expertise : annotations sur l'image --- */
.expertise__media { overflow: visible; }
.expertise__media picture { display: block; border-radius: var(--rayon); overflow: hidden; height: 100%; }
.expertise__media .annotation { color: #fff; }

/* --- Marseille : atmosphère douce + mot géant « 13 » --- */
.section--douce { background: var(--degrade-doux); }
.section--douce .mot-geant { top: -.05em; left: auto; right: -.04em; transform: none; font-size: clamp(10rem, 4rem + 28vw, 30rem); }
.carte-arr.verre--clair { padding: 1.25rem; border-radius: 22px; }

/* --- Professionnels : bandeau bleu, cartes en verre --- */
.section--affiche .carte { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
.section--affiche .carte p { color: var(--brume-bleue); }
.section--affiche .carte__icone { background: transparent; border: 1.5px solid rgba(255,255,255,.45); border-radius: 50%; color: #fff; }
.section--affiche .carte__pied, .section--affiche .carte__pied a { color: #fff; }
.section--affiche a.carte:hover { background: rgba(255,255,255,.14); box-shadow: 0 30px 60px -25px rgba(3,8,30,.7); }

/* --- Appel final : affiche à panneau courbe (façon « Aqua ») --- */
.final-v2 { padding-block: var(--section); background: var(--craie); }
.final-v2__affiche { position: relative; display: grid; border-radius: 28px; overflow: hidden; background: var(--degrade-affiche); color: #fff; min-height: 34rem; isolation: isolate; }
.final-v2__affiche picture { position: absolute; inset: 0; z-index: -2; }
.final-v2__affiche picture img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; }
.final-v2__affiche::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(6,11,31,.25) 0%, rgba(12,31,98,.15) 50%, rgba(6,11,31,.1) 100%); }
.final-v2__panneau { align-self: end; margin: 0; padding: clamp(1.6rem, 1.2rem + 2vw, 2.75rem); background: #fff; color: var(--encre); border-radius: 0 64px 0 0; max-width: 40rem; }
.final-v2__panneau .etiquette { color: var(--ardoise); }
.final-v2__titre { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.25rem); line-height: 1.05; margin-bottom: .6rem; color: #0c1f62; }
.final-v2__titre b { color: var(--accent); }
.final-v2__texte { color: var(--ardoise); }
.final-v2__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.final-v2__actions .bouton--fantome { color: var(--encre); border-color: rgba(17,17,19,.22); background: transparent; }
.final-v2__marque { position: absolute; top: 1.4rem; right: 1.6rem; font-size: .8125rem; letter-spacing: .04em; color: #fff; }
.final-v2 .mention-visuel { top: 1.2rem; left: 1.2rem; right: auto; }
@media (max-width: 767px) { .final-v2__affiche { min-height: 30rem; } .final-v2__panneau { border-radius: 0 40px 0 0; } }

@media (prefers-reduced-motion: reduce) { .methode::after { transition: none; } }

/* v2 — corrections après recette visuelle */
.verre { background: rgba(10,22,72,.42); border-color: rgba(255,255,255,.2); }
.hero-v2 .mot-geant { top: 12%; bottom: auto; left: 64%; font-size: clamp(4.5rem, 1rem + 15vw, 15rem); background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.04) 80%); -webkit-background-clip: text; background-clip: text; }
@media (max-width: 1023px) { .hero-v2 .mot-geant { left: 50%; top: auto; bottom: 30%; } }
a.methode, a.methode h3, a.methode .carte__pied { color: #fff !important; }
.methode::after { background: linear-gradient(180deg, rgba(6,11,31,.05) 0%, rgba(6,11,31,.45) 32%, rgba(6,11,31,.9) 58%, rgba(6,11,31,.97) 100%); }
.methode:hover::after { background: linear-gradient(180deg, rgba(12,31,98,.08) 0%, rgba(12,31,98,.5) 30%, rgba(6,11,31,.93) 58%, rgba(6,11,31,.98) 100%); }

/* =============================================================================
   Héros d'accueil v3 — direction « Stronger Together » (référence du client, 13/10/2026)
   Titre géant centré, visuel détouré devant la seconde ligne, pastille à gauche,
   accroche + action à droite, trois cartes (verre / blanche / verre) en bas.
   ========================================================================== */

/* Fond photo : Vieux-Port et Notre-Dame-de-la-Garde (photo libre CC0), couleurs naturelles + dégradé noir neutre pour la lisibilité (pas de teinte bleue, demande du client) */

/* Photo au naturel : ombres douces pour garder les textes lisibles sur le ciel et les façades claires */

/* v3 — ajustements après recette visuelle */

.nav__lien, .entete__actions .bouton, .barre-mobile__diag { white-space: nowrap; }
/* 1180–1439 px : place pour le bouton principal — téléphone en icône (numéro conservé pour les lecteurs d'écran), liens resserrés */
@media (min-width: 1180px) and (max-width: 1439px) {
  .nav { margin-left: .75rem; }
  .nav__lien { padding-inline: .5rem; }
  .nav__groupe .nav__lien { padding-right: .15rem; }
  .entete__tel { font-size: 0; gap: 0; padding: .6rem; }
  .entete__tel .icone { width: 1.15rem; height: 1.15rem; }
  .entete__logo img { width: 178px; }
  .nav__liste > li:last-child { display: none; } /* « À propos » : aussi dans le pied de page ; le lien « Diagnostic » reste visible */
}

/* Bloc de droite lisible sur la photo : panneau vitré sombre (comme sur mobile) */

/* Ordinateur : bloc de droite ancré au-dessus des cartes (plus de chevauchement), hauteur minimale du héros garantie */

.annotation--a { left: .75rem; } .annotation--b { right: .75rem; }
@media (min-width: 1180px) { .annotation--a { left: -4%; } .annotation--b { right: -5%; } }

/* --- Section 2 : affiche photo sombre à icônes (référence « Performance Starts with Every Sip », 13/10/2026) --- */
.section--diag { background: radial-gradient(70% 60% at 85% 40%, rgba(31,73,214,.22), transparent 70%), #0b0b0c; }
.diag-affiche { position: relative; display: flex; flex-direction: column; min-height: 38rem; padding: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem); border-radius: 24px; overflow: hidden; isolation: isolate; color: #fff; background: #121214; box-shadow: 0 40px 80px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06); }
.diag-affiche picture { position: absolute; inset: 0; z-index: -2; }
.diag-affiche picture img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 55%; filter: saturate(.85); }
.diag-affiche::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(180deg, rgba(10,10,12,.95) 0%, rgba(10,10,12,.78) 34%, rgba(10,10,12,.35) 60%, rgba(10,10,12,.88) 100%),
  linear-gradient(90deg, rgba(10,10,12,.75) 0%, rgba(10,10,12,.2) 55%, transparent 80%); }
.diag-affiche .mention-visuel { top: 1rem; right: 1rem; }
.diag-affiche__marque { margin: 0 0 1.75rem; font-size: .9375rem; letter-spacing: .02em; color: #fff; }
.diag-affiche .etiquette { color: #c4c4c9; margin-bottom: .6rem; }
.diag-affiche h2 { font-size: clamp(1.9rem, 1.35rem + 1.7vw, 2.75rem); line-height: 1.08; margin-bottom: .9rem; max-width: 15ch; }
.diag-affiche__texte { max-width: 23rem; font-size: .9375rem; line-height: 1.55; color: #cfcfd4; }
.diag-affiche__icones { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .95rem; }
.diag-affiche__icones li { display: flex; align-items: center; gap: .85rem; font-size: .6875rem; font-weight: 750; letter-spacing: .09em; line-height: 1.3; text-transform: uppercase; color: #ececee; }
.diag-affiche__icones .puce-icone { width: 2.5rem; height: 2.5rem; color: #fff; border-color: rgba(255,255,255,.55); background: rgba(10,10,12,.35); }
.diag-affiche__icones .puce-icone .icone { width: 1.1rem; height: 1.1rem; }
.diag-affiche__url { margin: auto 0 0; padding-top: 1.5rem; text-align: center; font-size: .75rem; letter-spacing: .08em; color: #a9a9ae; }
@media (max-width: 1023px) { .diag-affiche { min-height: 32rem; } }
.diag-affiche picture img { object-position: 72% 62%; filter: saturate(.9) contrast(1.05); }
.diag-affiche::before { background:
  linear-gradient(180deg, rgba(10,10,12,.94) 0%, rgba(10,10,12,.72) 30%, rgba(10,10,12,.18) 52%, rgba(10,10,12,.08) 78%, rgba(10,10,12,.62) 100%),
  linear-gradient(90deg, rgba(10,10,12,.72) 0%, rgba(10,10,12,.25) 40%, transparent 65%); }
.diag-affiche__icones li span:last-child { text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.diag-affiche::before { background:
  linear-gradient(180deg, rgba(10,10,12,.95) 0%, rgba(10,10,12,.8) 40%, rgba(10,10,12,.22) 60%, rgba(10,10,12,.08) 80%, rgba(10,10,12,.62) 100%),
  linear-gradient(90deg, rgba(10,10,12,.72) 0%, rgba(10,10,12,.25) 40%, transparent 65%); }

/* 16/10/2026 — bouton principal « Réaliser mon diagnostic », complémentaire « Demander un devis 24h/24 » */
.entete__actions .libelle-long { display: none; }
@media (min-width: 1600px) { .entete__actions .libelle-long { display: inline; } .entete__actions .libelle-court { display: none; } }

.lien-tel { display: inline-flex; align-items: center; gap: .45rem; font-weight: 650; font-size: .9375rem; text-decoration: none; color: inherit; }
.lien-tel:hover { text-decoration: underline; }
.lien-tel .icone { width: 1rem; height: 1rem; }
.final-v2__tel { margin: .9rem 0 0; color: var(--encre); }

/* =============================================================================
   HÉROS DE L'ACCUEIL — reproduction du hero de francepunaisedelit.fr (15/10/2026, demande du client)
   Chambre provençale (photo unique, ordinateur et téléphone) posée dans une « scène » au ratio de l'image,
   dimensionnée en CSS comme un object-fit: cover (unités de conteneur) : les zones du balayage, en % de la photo,
   restent sur les vrais éléments quel que soit l'écran. Paysage : texte court centré au-dessus du lit, actions
   dessous. Portrait : la même photo, élargie pour montrer le lit, entre le texte (haut) et les actions (bas, à portée
   de pouce), fondue dans le ton du mur. Script : assets/js/hero-scan.js. Valeurs reprises de la feuille lyonnaise.
   ============================================================================= */
.hero-scan {
  --ratio: 2.0181;   /* 1782 / 883 */
  --sw: max(100cqw, 100cqh * var(--ratio));
  --sh: calc(var(--sw) / var(--ratio));
  --st: calc((100cqh - var(--sh)) / 2);
  --legende-y: 68%;
  --hs-fond: #ecdfcf;      /* ton du mur de la photo */
  --hs-encre: #121214;
  --hs-ardoise: #5e5d62;
  --hs-rouge: #e0313f;
  --hs-rouge-texte: #c0282d;
  --hs-lumiere: 79, 124, 255;
  --hs-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --hs-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --hs-grain-clair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --hs-toucher-noir: radial-gradient(120% 160% at 50% 0%, #35373f 0%, #25262d 50%, #191a1f 100%);
  --hs-toucher-blanc: linear-gradient(180deg, #fbfaf8 0%, #f0eeea 100%);
  position: relative; isolation: isolate; overflow: hidden;
  height: max(36rem, 94svh, 52.6vw); container-type: size;
  background: var(--hs-fond); color: var(--hs-encre);
}
.hero-scan__scene { position: absolute; z-index: 0; left: calc((100cqw - var(--sw)) / 2); top: var(--st); width: var(--sw); height: var(--sh); overflow: hidden; }
.hero-scan__scene picture { display: block; width: 100%; height: 100%; max-width: none; }
.hero-scan__photo { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
/* Voile très léger derrière le texte (lisibilité AA sur le mur et le tableau) */
.hero-scan__voile {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 46% 32% at 50% 27%, rgba(246, 240, 232, 0.8) 0%, rgba(246, 240, 232, 0.56) 48%, rgba(246, 240, 232, 0) 100%),
    linear-gradient(to bottom, rgba(246, 240, 232, 0.36) 0%, rgba(246, 240, 232, 0) 14%);
}
.hero-scan__contenu {
  position: relative; z-index: 3; height: 100%; width: min(100% - 2 * var(--marge), 64rem); margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(0.75rem, 1.8svh, 1.35rem);
  padding: calc(var(--entete) + clamp(0.6rem, 3svh, 2.25rem)) 0 1.5rem; pointer-events: none;
}
.hero-scan__tete, .hero-scan__actions { pointer-events: auto; display: grid; justify-items: center; }
.hero-scan__tete { gap: clamp(0.4rem, 0.9svh, 0.75rem); }
.hero-scan .hero-scan__etiquette { margin: 0; color: var(--hs-encre); letter-spacing: .12em; }
.hero-scan__titre { margin: 0; font-size: clamp(2.125rem, min(4.2vw, 6.4svh), 4.25rem); line-height: 1.04; letter-spacing: -0.045em; font-weight: 600; max-width: 14em; text-wrap: balance; color: var(--hs-encre); }
.hero-scan__piliers { margin: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hs-encre); }
.hero-scan__piliers span { color: var(--hs-rouge); font-weight: 800; }
.hero-scan__texte { margin: 0; font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); color: var(--hs-ardoise); max-width: 34rem; text-wrap: balance; }
.hero-scan__actions { gap: clamp(0.6rem, 1.1svh, 0.9rem); }
.hero-scan__confiance {
  list-style: none; margin: 0; padding: 0.4rem 1.1rem; display: flex; flex-wrap: wrap; justify-content: center; row-gap: 0.25rem;
  font-size: 0.8125rem; font-weight: 600; color: var(--hs-encre); border-radius: 999px;
  background: rgba(250, 248, 244, 0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 0 1px rgba(18, 18, 20, 0.06);
}
.hero-scan__confiance li { display: inline-flex; align-items: center; gap: 0.35rem; }
.hero-scan__confiance li + li::before { content: ""; width: 3px; height: 3px; margin: 0 0.75rem; border-radius: 50%; background: currentColor; opacity: 0.45; }

/* Deux boutons = un interrupteur (style lyonnais du 04/10/2026) : piste en creux ; « Demander une intervention » est
   la partie allumée (blanc soft touch, lumière bleue qui déborde), « Diagnostic en ligne » la partie éteinte (noir
   soft touch en creux, lumière bleue intérieure). Téléphone : deux boutons séparés, sans piste. */
.hero-scan__boutons {
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 0; width: fit-content; max-width: 100%; padding: 5px; border-radius: 34px;
  background: linear-gradient(180deg, #ccc3b3 0%, #ddd5c9 50%, #e9e3d9 100%);
  box-shadow: inset 0 2px 7px rgba(60, 40, 15, 0.4), inset 0 1px 1px rgba(60, 40, 15, 0.24), inset 0 -1px 1px rgba(255, 255, 255, 0.9),
              0 1px 0 rgba(255, 255, 255, 0.95), 0 0 0 1px rgba(120, 95, 60, 0.14);
}
.hero-scan__btn {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; flex: 1 1 auto;
  min-height: 3.5rem; margin: 0; padding: 0 2rem; border-radius: 999px; border: 1px solid transparent;
  font-size: 1rem; font-weight: 650; letter-spacing: -0.005em; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: box-shadow 360ms var(--hs-ease), border-color 360ms var(--hs-ease), color 180ms, background-color 180ms, transform 180ms var(--hs-ease);
  -webkit-tap-highlight-color: transparent;
}
.hero-scan__btn:active { transform: scale(0.98); }
.hero-scan__btn:focus-visible { outline: 2px solid #1f49d6; outline-offset: 3px; }
.hero-scan__btn--allume {
  z-index: 1; color: var(--hs-encre);
  background: var(--hs-grain-clair), var(--hs-toucher-blanc);
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 4px rgba(var(--hs-lumiere), 0.22),
              0 3px 4px -1px rgba(var(--hs-lumiere), 1), 0 0 20px 2px rgba(var(--hs-lumiere), 0.48),
              0 7px 14px -6px rgba(40, 25, 5, 0.5);
}
.hero-scan__btn--allume:hover {
  color: var(--hs-encre); border-color: #fff;
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 5px rgba(var(--hs-lumiere), 0.3),
              0 3px 5px -1px rgba(var(--hs-lumiere), 1), 0 0 28px 4px rgba(var(--hs-lumiere), 0.6),
              0 7px 14px -6px rgba(40, 25, 5, 0.5);
}
.hero-scan__btn--eteint {
  color: #d9dae1;
  background: var(--hs-grain), linear-gradient(180deg, #141519 0%, #1f2026 60%, #25262d 100%);
  border-color: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.6), inset 0 -4px 10px -5px rgba(var(--hs-lumiere), 0.6), inset 0 -1px 0 rgba(255, 255, 255, 0.07);
}
.hero-scan__btn--eteint:hover {
  color: #fff;
  background: var(--hs-grain), linear-gradient(180deg, #191a1f 0%, #25262d 60%, #2c2d35 100%);
  border-color: rgba(var(--hs-lumiere), 0.3);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.55), inset 0 -5px 12px -4px rgba(var(--hs-lumiere), 0.8), inset 0 -1px 0 rgba(255, 255, 255, 0.09);
}
@media (max-width: 767px) {
  .hero-scan__boutons { gap: 0.625rem; width: 100%; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .hero-scan__btn--eteint { background: var(--hs-grain), var(--hs-toucher-noir); border-color: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 -3px 8px -4px rgba(var(--hs-lumiere), 0.45), 0 8px 18px -10px rgba(0, 0, 0, 0.55); }
  .hero-scan__btn--eteint:hover { background: var(--hs-grain), var(--hs-toucher-noir); border-color: rgba(var(--hs-lumiere), 0.3); }
}

/* Balayage de gauche à droite : ligne verticale fine, bleutée, à halo diffus ; dans son sillage, la vue d'analyse
   (copie de la photo désaturée, bleutée, tramée, fondue vers la gauche) ; derrière elle, les zones restent révélées.
   Positions posées par hero-scan.js, par transformations seulement. */
.hero-scan__analyse, .hero-scan__revele { position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; pointer-events: none; will-change: transform; }
.hero-scan__analyse { z-index: 1; width: 30%; visibility: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 46%); mask-image: linear-gradient(90deg, transparent, #000 46%); }
.hero-scan__analyse.est-actif { visibility: visible; }
.hero-scan__revele { z-index: 2; width: 100%; }
.hero-scan__analyse-int, .hero-scan__revele-int { position: absolute; top: 0; left: 0; width: 100%; height: 100%; will-change: transform; }
.hero-scan__analyse-int { width: var(--sw); }
.hero-scan__analyse-int .hero-scan__photo { filter: grayscale(1) sepia(0.45) hue-rotate(188deg) saturate(2.2) brightness(0.9) contrast(1.08); }
.hero-scan__analyse-int::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(79, 124, 255, 0.17) 1px, transparent 1px), linear-gradient(90deg, rgba(79, 124, 255, 0.17) 1px, transparent 1px); background-size: 2rem 2rem; }
.hero-scan__balayage { position: absolute; top: 0; bottom: 0; left: 0; width: 0; z-index: 3; opacity: 0; transition: opacity 0.6s var(--hs-ease); pointer-events: none; will-change: transform; }
.hero-scan__balayage.est-actif { opacity: 1; }
.hero-scan__balayage::before {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: max(3rem, 5vw);
  background: linear-gradient(90deg, rgba(79, 124, 255, 0), rgba(79, 124, 255, 0.14));
  -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
}
.hero-scan__balayage::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -0.5px; width: 1px;
  background: linear-gradient(rgba(120, 155, 255, 0), rgba(120, 155, 255, 0.95) 12%, #f2f5ff 50%, rgba(120, 155, 255, 0.95) 88%, rgba(120, 155, 255, 0));
  filter: drop-shadow(0 0 3px rgba(79, 124, 255, 0.9)) drop-shadow(0 0 12px rgba(79, 124, 255, 0.4));
}

/* Zones à risque : voile rouge très translucide, contour fin, halo ; repère de détection (ondes rouges) ; étiquettes */
.hero-scan__zones { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; filter: drop-shadow(0 0 5px rgba(224, 49, 63, 0.3)); }
.zone__forme { fill: rgba(224, 49, 63, 0.075); stroke: rgba(224, 49, 63, 0.62); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity 0.8s var(--hs-ease); }
.zone__forme.est-visible { opacity: 1; }
.zone__forme.est-attenuee { opacity: 0.32; }
.zone__cible { fill: transparent; stroke: none; pointer-events: all; cursor: help; }
.zone__trait { stroke: rgba(18, 18, 20, 0.38); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity 0.6s var(--hs-ease); }
.zone__trait.est-visible { opacity: 1; }
.zone__point {
  position: absolute; z-index: 4; width: 0.5rem; height: 0.5rem; margin: -0.25rem 0 0 -0.25rem; border-radius: 50%;
  background: #ff3443; box-shadow: 0 0 6px 2px rgba(224, 49, 63, 0.95), 0 0 18px 6px rgba(224, 49, 63, 0.4);
  opacity: 0; transform: scale(0.3); transition: opacity 0.5s var(--hs-ease), transform 0.5s var(--hs-ease);
}
.zone__point::before { content: ""; position: absolute; inset: -1rem; border-radius: 50%; } /* cible tactile (44 px) */
.zone__point.est-visible { opacity: 1; transform: none; }
.zone__point.est-actif { box-shadow: 0 0 8px 3px #e0313f, 0 0 26px 9px rgba(224, 49, 63, 0.5); }
.zone__point.est-hors-champ, .zone__etiquette.est-hors-champ, .zone__trait.est-hors-champ { display: none; }
.zone__onde {
  position: absolute; left: 50%; top: 50%; width: 0.875rem; height: 0.875rem; margin: -0.4375rem 0 0 -0.4375rem; border-radius: 50%;
  border: 1.5px solid rgba(240, 40, 56, 0.95); background: radial-gradient(circle, rgba(224, 49, 63, 0.3), rgba(224, 49, 63, 0) 70%);
  box-shadow: 0 0 8px rgba(224, 49, 63, 0.6), inset 0 0 5px rgba(224, 49, 63, 0.45); opacity: 0; pointer-events: none;
}
.zone__point.est-visible .zone__onde { animation: zone-onde 2.1s cubic-bezier(0.22, 0.61, 0.36, 1) infinite; }
.zone__point.est-visible .zone__onde:nth-child(2) { animation-delay: 0.7s; }
.zone__point.est-visible .zone__onde:nth-child(3) { animation-delay: 1.4s; }
.zone__point.est-actif .zone__onde { border-width: 2px; }
@keyframes zone-onde { 0% { transform: scale(0.5); opacity: 1; } 65% { opacity: 0.35; } 100% { transform: scale(5); opacity: 0; } }
.zone__etiquette, .hero-scan__legende, .hero-scan__message {
  position: absolute; z-index: 5; border-radius: 0.65rem; color: var(--hs-encre);
  background: rgba(250, 248, 244, 0.74); -webkit-backdrop-filter: blur(12px) saturate(1.15); backdrop-filter: blur(12px) saturate(1.15);
  box-shadow: 0 0 0 1px rgba(18, 18, 20, 0.07), 0 12px 32px -14px rgba(18, 18, 20, 0.28);
  opacity: 0; pointer-events: none; transition: opacity 0.6s var(--hs-ease), transform 0.6s var(--hs-ease);
}
.zone__etiquette { --tx: 0%; --ty: -50%; width: max-content; max-width: 12.5rem; padding: 0.55rem 0.75rem 0.6rem; text-align: left; transform: translate(var(--tx), var(--ty)) translateY(0.4rem); }
.zone__etiquette--gauche { --tx: -100%; }
.zone__etiquette--bas { --tx: -50%; --ty: 0%; }
.zone__etiquette.est-visible { opacity: 1; transform: translate(var(--tx), var(--ty)); }
.zone__etiquette > *, .hero-scan__legende > *, .hero-scan__phrase { transition: filter 0.6s var(--hs-ease); }
.zone__etiquette:not(.est-visible) > *, .hero-scan__legende:not(.est-visible) > * { filter: blur(3px); }
.zone__risque { display: block; font-size: 0.625rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hs-rouge-texte); }
.zone__titre { display: block; margin-top: 0.15rem; font-size: 0.875rem; font-weight: 700; letter-spacing: -0.01em; }
.zone__court { display: block; margin-top: 0.1rem; font-size: 0.75rem; line-height: 1.35; color: var(--hs-ardoise); }
.zone__detail { display: block; max-height: 0; overflow: hidden; opacity: 0; font-size: 0.75rem; line-height: 1.4; transition: max-height 0.4s var(--hs-ease), opacity 0.4s var(--hs-ease), margin 0.4s var(--hs-ease); }
.est-survolee .zone__detail, .hero-scan__legende .zone__detail { max-height: 6rem; opacity: 1; margin-top: 0.35rem; }
/* Annotation unique (téléphone, tablette) et message : au centre du lit */
.hero-scan__legende, .hero-scan__message { left: 50%; top: var(--legende-y); text-align: center; transform: translate(-50%, -50%) translateY(0.4rem); }
.hero-scan__legende { width: max-content; max-width: min(18rem, 84%); padding: 0.55rem 0.9rem 0.6rem; }
.hero-scan__legende.est-visible, .hero-scan__message.est-visible { opacity: 1; transform: translate(-50%, -50%); }
.hero-scan__message { display: grid; padding: 0.7rem 1.15rem; width: max-content; max-width: min(30rem, 88%); }
.hero-scan__phrase { grid-area: 1 / 1; align-self: center; font-size: clamp(0.9375rem, 0.85rem + 0.35vw, 1.125rem); font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; opacity: 0; filter: blur(4px); transition: opacity 0.7s var(--hs-ease), filter 0.7s var(--hs-ease); }
.hero-scan__phrase + .hero-scan__phrase { font-weight: 700; }
.hero-scan__phrase.est-visible { opacity: 1; filter: none; }
/* Pause (WCAG 2.2.2) : discrète, en bas à droite */
.hero-scan__pause { position: absolute; z-index: 4; right: var(--marge); bottom: 1.25rem; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.62); color: var(--hs-encre); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer; transition: background-color 180ms; }
.hero-scan__pause[hidden] { display: none; }
.hero-scan__pause:hover { background: rgba(255, 255, 255, 0.85); }
.hero-scan__pause .icone { width: 1.05rem; height: 1.05rem; }
.hero-scan__pause .icone-lecture, .hero-scan.est-en-pause .hero-scan__pause .icone-pause { display: none; }
.hero-scan.est-en-pause .hero-scan__pause .icone-lecture { display: block; }

/* Portrait : la même photo, élargie pour montrer le lit entier (60 % de sa largeur à l'écran), entre le texte et les
   actions ; ses bords haut et bas se fondent dans le ton du mur. */
@media (orientation: portrait) {
  .hero-scan { --sw: max(100cqw / 0.6, 40cqh * var(--ratio)); --st: calc((100cqh - var(--sh)) * 0.6); height: max(34rem, 100svh); }
  .hero-scan__scene { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 86%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 86%, transparent 100%); }
  .hero-scan__confiance .hero-scan__confiance-option { display: none; }
  .hero-scan__voile { background: none; }
  .hero-scan__contenu { justify-content: space-between; gap: 1rem; padding-bottom: max(1.25rem, env(safe-area-inset-bottom)); }
  .hero-scan__titre { font-size: clamp(1.875rem, 7.4vw + 0.2rem, 3.25rem); }
  .hero-scan__piliers { font-size: 0.75rem; letter-spacing: 0.14em; }
  .hero-scan__texte { font-size: 0.9375rem; line-height: 1.5; }
  .hero-scan__actions { width: 100%; }
  .hero-scan__confiance { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; }
  .hero-scan__boutons { width: min(100%, 34rem); }
  .hero-scan__pause { right: 1rem; bottom: auto; top: calc(var(--st) + var(--sh) * 0.3); width: 2rem; height: 2rem; }
  .zone__point { width: 0.4375rem; height: 0.4375rem; margin: -0.21875rem 0 0 -0.21875rem; }
}
/* Écrans peu hauts en paysage : la réassurance passe en bas du hero, sous le lit */
@media (orientation: landscape) and (max-height: 880px) {
  .hero-scan__confiance { position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); width: max-content; max-width: calc(100% - 7rem); }
}
@media (max-width: 1199px) {
  .hero-scan__confiance .hero-scan__confiance-option { display: none; }
}
@media (orientation: portrait) and (min-width: 560px) {
  .hero-scan__boutons { flex-wrap: nowrap; width: auto; }
}
@media (orientation: portrait) and (max-width: 559px) {
  .hero-scan__confiance .hero-scan__confiance-large { display: none; }
  .hero-scan__boutons { display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
  .hero-scan__btn { width: 100%; }
  .hero-scan__confiance { font-size: 0.75rem; }
  .hero-scan__confiance li + li::before { margin: 0 0.5rem; }
}
@media (max-width: 559px) { .hero-scan__btn { flex-basis: 100%; } }
@media (orientation: portrait) and (max-height: 740px) {
  .hero-scan__btn { min-height: 2.875rem; }
}
@supports not (width: 1cqw) {
  .hero-scan { --sw: max(100vw, max(36rem, 94svh, 52.6vw) * var(--ratio)); --st: calc((max(36rem, 94svh, 52.6vw) - var(--sh)) / 2); }
  @media (orientation: portrait) { .hero-scan { --sw: max(100vw / 0.6, max(34rem, 100svh) * 0.4 * var(--ratio)); --st: calc((max(34rem, 100svh) - var(--sh)) * 0.6); } }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scan__balayage, .hero-scan__analyse, .hero-scan__message { display: none; }
  .zone__point .zone__onde { animation: none !important; opacity: 0.55; transform: scale(2); }
  .zone__point .zone__onde:nth-child(2) { opacity: 0.25; transform: scale(3.2); }
  .zone__point .zone__onde:nth-child(3) { display: none; }
}

/* En-tête au-dessus du hero clair : transparent, texte et logo foncés (comme à Lyon) ; verre sombre dès que l'on
   défile ou que le menu est ouvert (règles générales ci-dessus). */
@media screen { #contenu > .hero-scan:first-child { margin-top: calc(-1 * var(--entete)); } }
body:has(#contenu > .hero-scan:first-child) .entete:not(.entete--defile):not(:has([aria-expanded="true"])) {
  background-color: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--hs-encre, #121214); }
body:has(#contenu > .hero-scan:first-child):not(.menu-ouvert) .entete:not(.entete--defile) :is(.entete__logo, .entete__tel, .entete__burger) { color: #121214; }
body:has(#contenu > .hero-scan:first-child):not(.menu-ouvert) .entete:not(.entete--defile) .entete__logo img { filter: none; }
body:has(#contenu > .hero-scan:first-child):not(.menu-ouvert) .entete:not(.entete--defile) .entete__ville { color: #121214; border-color: rgba(18, 18, 20, 0.3); }
body:has(#contenu > .hero-scan:first-child):not(.menu-ouvert) .entete:not(.entete--defile) .entete__burger { border-color: rgba(18, 18, 20, 0.25); }
body:has(#contenu > .hero-scan:first-child):not(.menu-ouvert) .entete:not(.entete--defile) .entete__tel:hover { background: rgba(18, 18, 20, 0.06); }
@media (min-width: 1180px) {
  body:has(#contenu > .hero-scan:first-child) .entete:not(.entete--defile) .nav__liste > li > .nav__lien { color: #121214; }
  body:has(#contenu > .hero-scan:first-child) .entete:not(.entete--defile) .nav__liste > li > .nav__lien:hover { background: rgba(18, 18, 20, 0.06); }
  body:has(#contenu > .hero-scan:first-child) .entete:not(.entete--defile) .nav__groupe > .nav__ouvrir { color: #3c3c42; }
}

/* Badge du hero (15/10/2026, demande du client « ajoute ce type de badge ») : note Google réelle (source, nombre d'avis
   et date de relevé dans config/site.yml → avis) et agrément Certibiocide, dans une pilule sombre vitrée. Il prend la
   place de la bande de réassurance lyonnaise (sous les boutons ; en bas du hero sur les écrans peu hauts). */
.hero-scan__badge {
  display: inline-flex; align-items: center; gap: clamp(0.75rem, 1.4vw, 1.1rem); max-width: 100%;
  padding: 0.6rem clamp(0.95rem, 1.6vw, 1.35rem); border-radius: 999px; color: #f4f4f6;
  background: rgba(14, 14, 16, 0.76); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 30px -16px rgba(18, 18, 20, 0.55);
}
.badge-confiance__note { display: inline-flex; align-items: center; gap: 0.6rem; color: inherit; text-decoration: none; border-radius: 999px; }
.badge-confiance__note:hover .badge-confiance__valeur { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.badge-confiance__note:focus-visible { outline: 2px solid #8fa8ff; outline-offset: 4px; }
.badge-confiance__google { flex: none; width: 1.5rem; height: 1.5rem; }
.badge-confiance__etoiles { display: inline-flex; gap: 0.12rem; }
.badge-confiance__etoiles svg { width: 1.15rem; height: 1.15rem; fill: #f6b81a; }
.badge-confiance__valeur { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1; font-variant-numeric: tabular-nums; }
.badge-confiance__nombre { font-size: 0.75rem; font-weight: 600; color: #b9b9c0; line-height: 1; white-space: nowrap; }
.badge-confiance__filet { flex: none; width: 1px; height: 1.9rem; background: rgba(255, 255, 255, 0.22); }
.badge-confiance__certibiocide { flex: none; display: block; width: auto; height: 1.85rem; }
@media (orientation: landscape) and (max-height: 880px) {
  .hero-scan__badge { position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); width: max-content; max-width: calc(100% - 7rem); }
}
@media (max-width: 559px) {
  .hero-scan__badge { gap: 0.6rem; padding: 0.5rem 0.85rem; }
  .badge-confiance__note { gap: 0.4rem; }
  .badge-confiance__google { width: 1.25rem; height: 1.25rem; }
  .badge-confiance__etoiles svg { width: 0.9rem; height: 0.9rem; }
  .badge-confiance__valeur { font-size: 1.0625rem; }
  .badge-confiance__certibiocide { height: 1.45rem; }
}
@media (max-width: 389px) { .badge-confiance__nombre { display: none; } }
/* Portrait : voile clair en haut (comme le portrait lyonnais) ; téléphones peu hauts (barres du navigateur) : photo
   un peu moins large pour laisser le sous-titre sur le ton du mur */
@media (orientation: portrait) {
  .hero-scan__voile { background: linear-gradient(to bottom, rgba(236, 223, 207, 0.9) 0%, rgba(236, 223, 207, 0.78) 30%, rgba(236, 223, 207, 0) 46%); }
}
@media (orientation: portrait) and (max-height: 760px) {
  .hero-scan { --sw: max(100cqw / 0.74, 34cqh * var(--ratio)); --st: calc((100cqh - var(--sh)) * 0.64); }
}

/* Photo verticale dédiée au téléphone (15/10/2026, demande du client « fond hero mobile ») : toute la largeur ; calée
   pour que le tableau commence sous le texte (≈ 35 % de la hauteur) et que le lit se termine au-dessus du bouton ; le
   plafond se fond en haut dans le ton du mur, le sol en bas. Tablette en portrait : cadrage paysage (la photo
   verticale y serait trop haute, le lit passerait sous les boutons). Active seulement si la photo est déclarée. */
@media (orientation: portrait) and (max-width: 699px) {
  .hero-scan.hero-scan--photo-portrait { --ratio: var(--ratio-portrait, 0.5631); --sw: 100cqw; --st: calc(35cqh - var(--sh) * 0.25); --legende-y: 61%; }
  .hero-scan--photo-portrait .hero-scan__scene { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10%); mask-image: linear-gradient(to bottom, transparent 0, #000 10%); }
  .hero-scan--photo-portrait .hero-scan__scene::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 13%; background: linear-gradient(to bottom, rgba(236, 223, 207, 0), var(--hs-fond)); pointer-events: none; }
  .hero-scan--photo-portrait .hero-scan__pause { top: calc(var(--st) + var(--sh) * 0.405); }
  .hero-scan--photo-portrait .hero-scan__voile { background: linear-gradient(to bottom, rgba(236, 223, 207, 0.85) 0%, rgba(236, 223, 207, 0.6) 24%, rgba(236, 223, 207, 0) 34%); }
}
@supports not (width: 1cqw) {
  @media (orientation: portrait) and (max-width: 699px) { .hero-scan.hero-scan--photo-portrait { --sw: 100vw; --st: calc(max(34rem, 100svh) * 0.35 - var(--sh) * 0.25); } }
}

/* 15/10/2026 (soir), demande du client : un seul bouton dans le hero, « Demander une intervention », sur le bleu de
   la marque (comme « Devis gratuit » de la barre mobile) ; « Diagnostic en ligne » retiré. Plus de piste en creux. */
.hero-scan__boutons { padding: 0; background: none; box-shadow: none; border-radius: 0; }
.hero-scan__btn--allume, .hero-scan__btn--allume:hover {
  color: #fff; border-color: rgba(255, 255, 255, 0.18);
  background: var(--hs-grain), linear-gradient(180deg, #3a63ec 0%, var(--accent, #1f49d6) 55%, #1a3fc4 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -2px 6px rgba(8, 20, 90, 0.35),
              0 0 0 5px rgba(255, 255, 255, 0.4), 0 10px 26px -10px rgba(20, 50, 190, 0.75);
}
.hero-scan__btn--allume:hover {
  background: var(--hs-grain), linear-gradient(180deg, #3159e0 0%, var(--accent-survol, #193bb0) 60%, #16349f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(8, 20, 90, 0.4),
              0 0 0 6px rgba(255, 255, 255, 0.5), 0 12px 30px -10px rgba(20, 50, 190, 0.85);
}
.hero-scan__btn--allume:focus-visible { outline-color: #fff; box-shadow: 0 0 0 4px #1f49d6; }
@media (min-width: 560px) { .hero-scan__btn { padding: 0 2.6rem; } }
@media (orientation: portrait) and (max-width: 699px) and (max-height: 760px) {
  .hero-scan--photo-portrait .hero-scan__voile { background: linear-gradient(to bottom, rgba(236, 223, 207, 0.88) 0%, rgba(236, 223, 207, 0.72) 32%, rgba(236, 223, 207, 0) 46%); }
}

/* 15/10/2026 (soir), demande du client : logo de l'en-tête agrandi (≈ +15 à +20 %), borné pour ne jamais déborder */
.entete__logo img { width: clamp(160px, calc(100vw - 196px), 205px); }
@media (min-width: 560px) { .entete__logo img { width: 245px; } }
@media (min-width: 1180px) { .entete .entete__logo img { width: 205px; } }
@media (min-width: 1440px) { .entete .entete__logo img { width: 236px; } }

/* Contrôle UI/UX du 16/10/2026 : cibles tactiles d'au moins 24 px (WCAG 2.5.8), numéros de la carte cliquables,
   libellé « Marseille » de l'en-tête à 12 px, tableaux défilants visibles au focus clavier */
.entete__logo { min-height: 44px; }
.entete__ville { font-size: .75rem; }
.badge-confiance__note { padding-block: .45rem; margin-block: -.45rem; }
.pied a[href^="tel:"], .pied .lien-bouton { display: inline-block; padding-block: .25rem; }
a.carte-arr__zone text { pointer-events: auto; cursor: pointer; }
.tableau[tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* 16/10/2026, signalement du client (« non lisible ») : sous-titre du hero plus foncé, un peu plus gras, halo clair
   derrière les lettres pour rester lisible sur le rideau, le mur et le tableau */
.hero-scan .hero-scan__texte {
  color: #26252a; font-weight: 550;
  text-shadow: 0 0 2px rgba(250, 246, 240, .95), 0 0 12px rgba(250, 246, 240, .95), 0 0 26px rgba(250, 246, 240, .85);
}
.hero-scan .hero-scan__piliers, .hero-scan .hero-scan__etiquette { text-shadow: 0 0 2px rgba(250, 246, 240, .9), 0 0 14px rgba(250, 246, 240, .9); }

/* 16/10/2026, contrôle UI/UX (accord du client) : accueil resserré sur téléphone, sans rien retirer — carte des
   arrondissements masquée (trop petite ; la liste juste dessous donne les mêmes liens), arrondissements en grille
   compacte, forfaits et cartes « Professionnels » en défilement horizontal (la carte suivante dépasse à droite) */
@media (max-width: 767px) {
  .accueil .marseille-grille .carte-arr { display: none; }
  .accueil .arrondissements { grid-template-columns: repeat(4, 1fr); gap: .45rem; margin-top: 1.5rem !important; }
  .accueil .arrondissements a { padding: .6rem .35rem; align-items: center; text-align: center; gap: .05rem; }
  .accueil .arrondissements b { font-size: 1.0625rem; }
  .accueil .arrondissements small { font-size: .75rem; }
  .accueil .arrondissements .q { display: none; }
  .accueil .protocoles, .accueil .section--affiche .grille--3, .accueil .methodes, .accueil .etapes {
    display: flex; gap: .85rem; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--marge)); padding: .25rem var(--marge) .9rem; scroll-padding-inline: var(--marge); scrollbar-width: thin;
  }
  .accueil .protocoles > .protocole, .accueil .section--affiche .grille--3 > .carte, .accueil .methodes > .methode { flex: 0 0 84%; scroll-snap-align: start; }
  .accueil .etapes > .etape { flex: 0 0 72%; scroll-snap-align: start; }
  /* Cartes des défilements toujours visibles : la carte suivante qui dépasse signale le défilement */
  .js .accueil :is(.protocoles, .methodes, .etapes, .section--affiche .grille--3) > [data-reveler] { opacity: 1; transform: none; }
  .accueil .methodes > .methode { min-height: 26rem; }
}
.diag-affiche__icones li { font-size: .75rem; }

/* Expertise terrain (kit du 17/10/2026) : encadré « Observations de terrain » et photos d'interventions réelles,
   filigranées « FRANCE PUNAISE DE LIT ». Protection dissuasive des photos (pages qui en contiennent, classe
   images-protegees sur <body>) : appui long, glisser et clic droit neutralisés sur les images seulement. */
.terrain { margin: 2rem 0; padding: 1.25rem 1.4rem 1.1rem; border-radius: var(--rayon-s); background: #f4f6fd; border-left: 4px solid var(--accent); }
.terrain__etiquette { display: inline-flex; align-items: center; gap: .5em; margin: 0 0 .4rem; font-size: var(--t-micro); font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.terrain__etiquette::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--signal); }
.prose .terrain__titre, .terrain__titre { margin: 0 0 .6rem; font-size: 1.1875rem; line-height: 1.3; }
.terrain p { margin: 0 0 .7rem; }
.terrain__note { font-size: .875rem; color: var(--ardoise); }
.terrain__signature { margin: .4rem 0 0 !important; font-size: .875rem; font-weight: 650; color: var(--ardoise); }
.photos-terrain { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.75rem 0 2rem; }
.photo-terrain { margin: 0; }
.photo-terrain picture { display: block; border-radius: var(--rayon-xs); overflow: hidden; background: var(--brume); }
.photo-terrain img { display: block; width: 100%; height: auto; }
.photos-terrain { align-items: start; }
.photo-terrain figcaption { margin-top: .5rem; font-size: .8125rem; line-height: 1.45; color: var(--ardoise); }
@media (max-width: 767px) {
  .photos-terrain { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .8rem; margin-inline: calc(-1 * var(--marge)); padding: 0 var(--marge) .6rem; scroll-padding-inline: var(--marge); }
  .photo-terrain { flex: 0 0 82%; scroll-snap-align: start; }
}
.images-protegees img, .images-protegees picture { -webkit-touch-callout: none; -webkit-user-drag: none; -webkit-user-select: none; user-select: none; }
.images-protegees .sans-protection, .images-protegees .sans-protection img, .images-protegees img.sans-protection { -webkit-touch-callout: default; -webkit-user-drag: auto; -webkit-user-select: auto; user-select: auto; }

/* --- Formulaires et boutons façon application (19/10/2026, demande du client « plus sexy, type application ») ---------
   Champs plus hauts et arrondis, contour conservé à 3,9:1 (WCAG 1.4.11), anneau de focus doux, pastilles à choisir
   (boutons radio natifs, accessibles au clavier), étapes numérotées, bouton principal en dégradé avec retour au toucher. */
.formulaire { border-radius: 28px; border: 1px solid rgba(17,17,19,.06); box-shadow: 0 1px 2px rgba(17,17,19,.04), 0 28px 64px -24px rgba(17,17,19,.26); }
.formulaire h2 { letter-spacing: -.025em; }
.champ { gap: .45rem; margin-bottom: 1.15rem; }
.champ label, .champ legend { font-size: .875rem; font-weight: 700; color: var(--encre); letter-spacing: -.005em; }
.champ input, .champ select, .champ textarea {
  min-height: 56px; padding: 1rem 1.05rem; border-radius: 14px; border: 1px solid var(--acier); background: #fbfbfc; color: var(--encre);
  font-size: 1.0625rem; -webkit-appearance: none; appearance: none;
  transition: border-color var(--micro, .18s) var(--ease), box-shadow var(--micro, .18s) var(--ease), background-color var(--micro, .18s) var(--ease);
}
.champ textarea { min-height: 128px; line-height: 1.5; }
.champ input::placeholder, .champ textarea::placeholder { color: #6b6b73; opacity: 1; }
.champ input:hover, .champ select:hover, .champ textarea:hover { background: #fff; border-color: #5f5f66; }
.champ input:focus, .champ select:focus, .champ textarea:focus { background: #fff; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 0 5px rgba(31,73,214,.14); }
.champ [aria-invalid="true"] { border-color: var(--erreur); background: #fff8f8; box-shadow: 0 0 0 1px var(--erreur); }
.champ select { padding-right: 2.9rem; background-repeat: no-repeat; background-position: right 1rem center; background-size: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23111113' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); }
.erreur-champ { display: flex; align-items: center; gap: .35rem; font-size: .8125rem; }

/* Étapes numérotées du formulaire de devis */
.etape-form { display: flex; align-items: center; gap: .7rem; margin: 1.9rem 0 1.1rem; padding-top: 1.6rem; border-top: 1px solid rgba(17,17,19,.08); }
.formulaire > .mention-form + .etape-form { margin-top: 1.4rem; padding-top: 0; border-top: 0; }
.etape-form__num { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-size: .875rem; font-weight: 800; box-shadow: 0 6px 14px -6px rgba(31,73,214,.7); }
.etape-form h3 { margin: 0; font-size: 1.0625rem; font-weight: 750; letter-spacing: -.015em; }

/* Pastilles à choisir (boutons radio) */
.pastilles { border: 0; padding: 0; margin: 0 0 1.15rem; min-width: 0; }
.pastilles legend { padding: 0; margin-bottom: .6rem; }
.pastilles__liste { display: flex; flex-wrap: wrap; gap: .5rem; }
.pastille { position: relative; display: inline-flex; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pastille input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pastille span {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .55rem 1rem; border-radius: var(--pilule);
  border: 1px solid var(--acier); background: #fff; color: var(--encre); font-size: .9375rem; font-weight: 650; line-height: 1.2;
  transition: background-color var(--micro, .18s) var(--ease), border-color var(--micro, .18s) var(--ease), color var(--micro, .18s) var(--ease), transform var(--micro, .18s) var(--ease), box-shadow var(--micro, .18s) var(--ease);
}
.pastille:hover span { border-color: var(--encre); }
.pastille input:active + span { transform: scale(.97); }
.pastille input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 8px 18px -10px rgba(31,73,214,.8); }
.pastille input:checked + span::before { content: ""; width: .5rem; height: .85rem; margin: -.15rem .1rem 0 0; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.pastille input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Boutons : dégradé, relief au survol, retour au toucher, indicateur d'envoi */
.bouton { --h: 54px; font-weight: 750; }
.bouton--s { --h: 42px; }
.bouton--l { --h: 60px; }
.bouton--primaire { background: linear-gradient(180deg, #3a63f2 0%, var(--accent) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(17,17,19,.12), 0 12px 26px -12px rgba(31,73,214,.85); }
.bouton--primaire:hover { background: linear-gradient(180deg, #2f58e6 0%, var(--accent-survol) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 2px 4px rgba(17,17,19,.14), 0 16px 32px -12px rgba(31,73,214,.9); }
@media (hover: hover) { .bouton:hover { transform: translateY(-1px); } }
.bouton:active, .bouton:hover:active { transform: translateY(0) scale(.97); }
.bouton--fantome:hover { background: rgba(17,17,19,.04); }
.bouton[aria-busy="true"] { pointer-events: none; opacity: .92; }
.bouton[aria-busy="true"] > .icone:last-child { display: none; }
.bouton[aria-busy="true"]::after { content: ""; width: 1.1em; height: 1.1em; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; animation: fpdl-envoi .8s linear infinite; }
@keyframes fpdl-envoi { to { transform: rotate(360deg); } }
.formulaire button[type="submit"] { --h: 60px; margin-top: .5rem; font-size: 1.0625rem; }
@media (prefers-reduced-motion: reduce) { .bouton:hover, .bouton:active, .pastille input:active + span { transform: none; } .bouton[aria-busy="true"]::after { animation-duration: 2.4s; } }

/* --- En-tête mobile « goutte d'eau » (19/10/2026, demandes du client : clair, puis « plus transparent façon goutte
   d'eau ») ------------------------------------------------------------------------------------------------------
   Sous 1180 px : l'en-tête devient une capsule de verre clair flottante (flou, saturation, reflets intérieurs) posée
   dans une bande transparente de même hauteur (--entete) : aucune mise en page ne bouge. Logo et textes foncés,
   menu déroulant clair. Menu ouvert : capsule et bande opaques, sans backdrop-filter (sinon la capsule deviendrait le
   bloc conteneur du menu fixe). L'ordinateur garde l'en-tête transparent puis vitré. */
@media (max-width: 1179.98px) {
  .entete, body .entete:not(.entete--defile), body .entete.entete--defile {
    background: transparent !important; border-bottom-color: transparent !important; box-shadow: none !important; color: var(--encre) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .entete .entete__barre {
    width: auto; height: calc(var(--entete) - 12px); margin: 6px 8px; padding: 0 .375rem 0 1rem; gap: .75rem; border-radius: var(--pilule);
    background: linear-gradient(180deg, rgba(255,255,255,.74) 0%, rgba(255,255,255,.52) 100%);
    -webkit-backdrop-filter: blur(22px) saturate(190%) brightness(1.08); backdrop-filter: blur(22px) saturate(190%) brightness(1.08);
    border: 1px solid rgba(255,255,255,.7);
    box-shadow: inset 0 1px 1px rgba(255,255,255,.95), inset 0 -1px 1px rgba(255,255,255,.35), 0 0 0 .5px rgba(17,17,19,.07),
      0 2px 6px -2px rgba(17,17,19,.1), 0 14px 32px -14px rgba(17,17,19,.32);
    transition: background-color var(--standard, .38s) var(--ease), box-shadow var(--standard, .38s) var(--ease); }
  .entete.entete--defile .entete__barre { background: linear-gradient(180deg, rgba(255,255,255,.8) 0%, rgba(255,255,255,.6) 100%); }
  body.menu-ouvert .entete:not(.entete--defile), body.menu-ouvert .entete.entete--defile { background: #fff !important; }
  body.menu-ouvert .entete .entete__barre { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 0 0 1px rgba(17,17,19,.08); }
  .entete__logo img, .entete .entete__logo img { width: clamp(150px, calc(100vw - 218px), 205px); }
  .entete :is(.entete__logo, .entete__tel, .entete__burger) { color: #121214 !important; }
  .entete .entete__logo img { filter: none !important; }
  .entete .entete__ville { color: #121214 !important; border-color: rgba(18,18,20,.3) !important; }
  .entete .entete__burger { width: 42px; height: 42px; border-color: rgba(255,255,255,.75) !important; background: rgba(255,255,255,.6);
    box-shadow: inset 0 1px 1px rgba(255,255,255,.9), 0 1px 3px rgba(17,17,19,.12); }
  .entete .entete__tel:hover { background: rgba(18,18,20,.06); }
  .nav { background: #fff; border-top: 1px solid rgba(17,17,19,.06); }
  .nav__liste > li { border-bottom-color: rgba(17,17,19,.08); }
  .nav .nav__lien { color: var(--encre); }
  .nav__ouvrir { color: var(--ardoise); }
  .nav__cartes a { color: var(--encre); }
  .nav__cartes a:hover { background: #f3f4f7; }
  .nav__cartes span, .nav__titre, .nav__arr span { color: var(--ardoise); }
  .nav__arr a { border-color: rgba(17,17,19,.14); color: var(--encre); }
  .nav__arr a:hover { background: #f3f4f7; border-color: var(--accent); }
  .nav__pied a { color: var(--accent); }
  .nav .bouton--fantome { color: var(--encre); border-color: rgba(17,17,19,.22); background: transparent; }
  .nav :focus-visible { outline-color: var(--accent); }
}
@media (max-width: 1179.98px) and (min-width: 560px) { .entete__logo img, .entete .entete__logo img { width: 230px; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (max-width: 1179.98px) { .entete .entete__barre { background: rgba(255,255,255,.96); } }
}

/* --- Barre d'action mobile : dock clair façon application (19/10/2026, demande du client) ------------------------
   Verre clair flottant, ombre douce ; « Appeler » avec pastille d'icône blanche, « Devis gratuit » en dégradé avec
   flèche dans une pastille ; retour au toucher. */
.barre-mobile { left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); gap: .4rem; padding: .375rem;
  background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(17,17,19,.08); box-shadow: 0 1px 2px rgba(17,17,19,.06), 0 20px 44px -16px rgba(17,17,19,.38); }
.barre-mobile a { min-height: 52px; font-weight: 750; letter-spacing: -.01em; transition: transform var(--micro, .18s) var(--ease), box-shadow var(--micro, .18s) var(--ease), background-color var(--micro, .18s) var(--ease); }
.barre-mobile a:active { transform: scale(.97); }
.barre-mobile__ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; }
.barre-mobile__ic .icone { width: 18px; height: 18px; }
.barre-mobile__tel { gap: .55rem; padding: 0 1.1rem 0 .375rem; color: var(--encre); background: #eef1f7; }
.barre-mobile__tel .barre-mobile__ic { background: #fff; color: var(--accent); box-shadow: 0 1px 2px rgba(17,17,19,.08), 0 6px 14px -6px rgba(31,73,214,.45); }
.barre-mobile__diag { justify-content: space-between; gap: .5rem; padding: 0 .375rem 0 1.3rem; color: #fff;
  background: linear-gradient(180deg, #3a63f2 0%, var(--accent) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 10px 22px -10px rgba(31,73,214,.9); }
.barre-mobile__diag .barre-mobile__ic { background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.barre-mobile a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (max-width: 360px) { .barre-mobile__tel { padding-right: .8rem; } .barre-mobile__diag { padding-left: 1rem; } .barre-mobile__ic { width: 36px; height: 36px; } }
@media (prefers-reduced-motion: reduce) { .barre-mobile a:active { transform: none; } }

/* --- Menu mobile compact et premium (19/10/2026, demande du client « beaucoup plus petit et premium ») -------------
   Carte flottante sous la capsule (au lieu du plein écran), coins arrondis, ombre profonde, apparition depuis le
   bouton ; liens compacts en rangées arrondies ; actions en bas (devis pleine largeur, auto-évaluation et téléphone
   côte à côte) ; fond de page voilé (appui hors du menu = fermeture, voir app.js). */
@media (max-width: 1179.98px) {
  .nav { inset: auto; left: 8px; right: 8px; margin-top: 4px; max-height: calc(100svh - var(--entete) - 20px - env(safe-area-inset-bottom));
    padding: .45rem .45rem .6rem; border: 1px solid rgba(17,17,19,.06); border-top: 1px solid rgba(17,17,19,.06); border-radius: 26px;
    background: rgba(255,255,255,.97); box-shadow: 0 2px 6px rgba(17,17,19,.06), 0 30px 70px -20px rgba(17,17,19,.45);
    transform-origin: top right; transform: translateY(-6px) scale(.96); overscroll-behavior: contain; }
  .nav.est-ouvert { transform: none; }
  .nav__liste > li { border-bottom: 0; }
  .nav .nav__lien { padding: .7rem .85rem; border-radius: 14px; font-size: 1rem; font-weight: 650; letter-spacing: -.01em; }
  .nav .nav__lien:active, .nav .nav__lien:hover { background: #f3f4f7; }
  .nav__ouvrir { width: 40px; height: 40px; border-radius: 12px; }
  .nav__ouvrir .icone { width: 16px; height: 16px; }
  .nav__panneau { padding: 0 .3rem .45rem; }
  .nav__cartes { gap: .1rem; }
  .nav__cartes a { padding: .5rem .7rem; border-radius: 12px; }
  .nav__cartes b { font-size: .9375rem; font-weight: 650; }
  .nav__cartes span { font-size: .8125rem; }
  .nav__titre { margin: .2rem .4rem .5rem; font-size: .6875rem; }
  .nav__arr { gap: .3rem; }
  .nav__arr a { padding: .4rem .25rem; border-radius: 10px; }
  .nav__arr b { font-size: .875rem; }
  .nav__arr span { font-size: .6875rem; }
  .nav__pied { margin: .6rem .4rem 0; font-size: .8125rem; }
  .nav__mobile-actions { grid-template-columns: 1fr 1fr; gap: .4rem; margin-top: .45rem; padding: .6rem .25rem 0; border-top: 1px solid rgba(17,17,19,.07); }
  .nav__mobile-actions > :first-child { grid-column: 1 / -1; }
  .nav__mobile-actions .bouton { --h: 46px; padding: 0 .9rem; font-size: .875rem; }
  .nav__mobile-actions .bouton--fantome { background: #f3f4f7; border-color: transparent; }
  .nav__mobile-actions .bouton--fantome > .icone:last-child:not(:first-child) { display: none; }
  body.menu-ouvert::before { content: ""; position: fixed; inset: 0; z-index: 98; background: rgba(17,17,19,.32);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: fpdl-voile var(--standard, .38s) var(--ease) both; }
  body.menu-ouvert .entete:not(.entete--defile), body.menu-ouvert .entete.entete--defile { background: transparent !important; }
}
@keyframes fpdl-voile { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .nav, .nav.est-ouvert { transform: none; } body.menu-ouvert::before { animation: none; } }

/* --- Choix en liste avec case ronde à cocher (19/10/2026, demande du client : forfait du devis) ---------------------
   Rangées pleine largeur, bouton radio natif invisible mais focalisable ; case ronde qui se remplit, rangée surlignée. */
.choix-liste { border: 0; padding: 0; margin: 0 0 1.15rem; min-width: 0; }
.choix-liste legend { padding: 0; margin-bottom: .6rem; }
.choix-liste__options { display: grid; gap: .5rem; }
.choix-ligne { position: relative; display: flex; align-items: center; gap: .85rem; min-height: 60px; padding: .75rem 1rem; border: 1px solid var(--acier);
  border-radius: 16px; background: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color var(--micro, .18s) var(--ease), background-color var(--micro, .18s) var(--ease), box-shadow var(--micro, .18s) var(--ease), transform var(--micro, .18s) var(--ease); }
.choix-ligne input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choix-ligne:hover { border-color: var(--encre); }
.choix-ligne:active { transform: scale(.99); }
.choix-ligne__rond { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #808087; background: #fff;
  transition: border-color var(--micro, .18s) var(--ease), box-shadow var(--micro, .18s) var(--ease), background-color var(--micro, .18s) var(--ease); }
.choix-ligne__texte { display: grid; gap: .1rem; line-height: 1.25; }
.choix-ligne__texte b { font-size: .9375rem; font-weight: 700; color: var(--encre); }
.choix-ligne__texte small { font-size: .8125rem; color: var(--ardoise); }
.choix-ligne input:checked ~ .choix-ligne__rond { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 4px #fff; }
.choix-ligne:has(input:checked) { border-color: var(--accent); background: rgba(31,73,214,.05); box-shadow: 0 0 0 1px var(--accent), 0 8px 20px -14px rgba(31,73,214,.7); }
.choix-ligne:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (min-width: 640px) { .choix-liste__options { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .choix-ligne:active { transform: none; } }
.choix-liste--compact .choix-liste__options { grid-template-columns: 1fr 1fr; gap: .45rem; }
.choix-liste--compact .choix-ligne { min-height: 50px; padding: .6rem .7rem; gap: .6rem; border-radius: 14px; }
.choix-liste--compact .choix-ligne__rond { width: 20px; height: 20px; }
.choix-liste--compact .choix-ligne__texte b { font-size: .875rem; font-weight: 650; }
@media (min-width: 640px) { .choix-liste--compact .choix-liste__options { grid-template-columns: repeat(4, 1fr); } }

/* --- H2 plus petits (19/10/2026, demande du client) : environ -20 % sur téléphone, -25 % sur grand écran ------------ */
:root { --t-h2: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem); }
.prose h2 { font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem); }
.diag-affiche h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem); }
.final-v2__titre { font-size: clamp(1.5rem, 1.15rem + 1.8vw, 2.5rem); }

/* --- Logo de l'en-tête plus grand (19/10/2026, demande du client) ---------------------------------------------------
   Téléphone : logo élargi, pastille « Marseille » resserrée pour garder la place du bouton menu. */
@media (max-width: 1179.98px) {
  .entete__logo img, .entete .entete__logo img { width: clamp(140px, calc(100vw - 176px), 240px); }
  .entete .entete__ville { font-size: .625rem; letter-spacing: .1em; padding: .3em .5em; }
  .entete .entete__logo { gap: .45rem; }
  .entete .entete__barre { padding-left: .85rem; gap: .5rem; }
}
@media (max-width: 1179.98px) and (min-width: 560px) { .entete__logo img, .entete .entete__logo img { width: 270px; } .entete .entete__ville { font-size: .75rem; } }
@media (min-width: 1180px) { .entete .entete__logo img { width: 225px; } }
@media (min-width: 1440px) { .entete .entete__logo img { width: 265px; } }
@media (min-width: 1600px) { .entete .entete__logo img { width: 285px; } }
/* Listes à cases rondes : colonnes compressibles ; une seule colonne sur les très petits écrans (≤ 359 px) */
.choix-liste__options { grid-template-columns: minmax(0, 1fr); }
.choix-liste--compact .choix-liste__options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choix-ligne__texte { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
@media (min-width: 640px) { .choix-liste__options { grid-template-columns: repeat(2, minmax(0, 1fr)); } .choix-liste--compact .choix-liste__options { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 359.98px) { .choix-liste--compact .choix-liste__options { grid-template-columns: minmax(0, 1fr); } }

/* Logos de certification (bloc « Un seul métier ») : sur petit écran, le texte passe sous le logo (évitait un
   débordement horizontal de l'accueil à 320 px, 20/10/2026) */
.certifs li { min-width: 0; max-width: 100%; }
.certifs li span { min-width: 0; }
@media (max-width: 420px) { .certifs li { flex-direction: column; align-items: flex-start; gap: .4rem; } }

/* --- Time-line interactive « Ce qui se passe ensuite » (20/10/2026, demande du client) --------------------------------
   Rail vertical qui se remplit au défilement (--prog, app.js), points numérotés qui s'allument, cartes ; l'étape au
   centre de l'écran est mise en avant. Sans JavaScript : tout est visible, rail plein. */
.timeline { --prog: 1; position: relative; list-style: none; margin: 1.75rem 0 1.5rem; padding: 0; }
.js .timeline { --prog: 0; }
.timeline::before, .timeline::after { content: ""; position: absolute; left: 19px; top: 22px; bottom: 30px; width: 2px; border-radius: 2px; }
.timeline::before { background: rgba(17,17,19,.1); }
.timeline::after { background: linear-gradient(180deg, #3a63f2, var(--accent)); transform-origin: top; transform: scaleY(var(--prog)); transition: transform .25s linear; }
.timeline__etape { position: relative; padding: 0 0 .9rem 58px; }
.timeline__etape:last-child { padding-bottom: 0; }
.timeline__point { position: absolute; left: 0; top: .85rem; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: #fff; border: 2px solid rgba(17,17,19,.14); color: var(--ardoise); font-size: .9375rem; font-weight: 800;
  transition: background-color var(--standard, .38s) var(--ease), border-color var(--standard, .38s) var(--ease), color var(--standard, .38s) var(--ease), box-shadow var(--standard, .38s) var(--ease), transform var(--standard, .38s) var(--ease); }
.timeline__etape.est-atteinte .timeline__point, html:not(.js) .timeline__point { background: var(--accent); border-color: var(--accent); color: #fff; }
.timeline__etape.est-active .timeline__point { box-shadow: 0 0 0 7px rgba(31,73,214,.14); transform: scale(1.06); }
.timeline__carte { padding: 1rem 1.15rem 1.05rem; border: 1px solid rgba(17,17,19,.07); border-radius: 18px; background: #fff;
  box-shadow: 0 1px 2px rgba(17,17,19,.04), 0 16px 34px -24px rgba(17,17,19,.3); cursor: default;
  transition: border-color var(--standard, .38s) var(--ease), box-shadow var(--standard, .38s) var(--ease), transform var(--standard, .38s) var(--ease); }
.timeline__etape.est-active .timeline__carte { border-color: rgba(31,73,214,.35); box-shadow: 0 0 0 1px rgba(31,73,214,.18), 0 22px 40px -24px rgba(31,73,214,.55); transform: translateX(3px); }
.timeline__num { margin: 0 0 .2rem; font-size: .75rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.timeline__titre { margin: 0 0 .35rem; font-size: 1.0625rem; font-weight: 750; letter-spacing: -.015em; line-height: 1.25; }
.timeline__carte p:last-child { margin: 0; color: var(--ardoise); font-size: .9375rem; line-height: 1.55; }
@media (prefers-reduced-motion: reduce) { .timeline::after, .timeline__point, .timeline__carte { transition: none; } .timeline__etape.est-active .timeline__point, .timeline__etape.est-active .timeline__carte { transform: none; } }

/* Pastille « Marseille » : 12 px minimum (contrôle UI/UX du 16/10/2026), logo ajusté pour garder la place du menu */
@media (max-width: 1179.98px) {
  .entete .entete__ville { font-size: .75rem; letter-spacing: .06em; padding: .25em .45em; }
  .entete__logo img, .entete .entete__logo img { width: clamp(132px, calc(100vw - 188px), 240px); }
}
@media (max-width: 1179.98px) and (min-width: 560px) { .entete__logo img, .entete .entete__logo img { width: 270px; } .entete .entete__ville { letter-spacing: .12em; } }

/* Logo du pied de page cliquable vers l'accueil (20/10/2026, demande du client) */
.pied__logo-lien { display: inline-flex; align-items: center; min-height: 44px; border-radius: 8px; transition: opacity var(--micro, .18s) var(--ease); }
.pied__logo-lien:hover { opacity: .8; }

/* --- Badge de confiance « goutte d'eau » sur tous les héros (20/10/2026, demande du client) ---------------------------
   Verre teinté sombre (le logo Certibiocide et les textes clairs restent lisibles sur les héros clairs comme sombres),
   flou et saturation de l'arrière-plan, reflets intérieurs. Positionnement propre à l'accueil conservé (.hero-scan__badge). */
.badge-confiance {
  display: inline-flex; align-items: center; gap: clamp(.75rem, 1.4vw, 1.1rem); max-width: 100%;
  padding: .6rem clamp(.95rem, 1.6vw, 1.35rem); border-radius: 999px; color: #f4f4f6;
  background: linear-gradient(180deg, rgba(44,44,52,.5) 0%, rgba(12,12,16,.66) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.38), inset 0 -1px 1px rgba(255,255,255,.1), inset 0 0 22px rgba(255,255,255,.05),
    0 18px 36px -18px rgba(0,0,0,.6); }
.hero-page__badge { margin-top: 1.4rem; }
.hero-page__actions + .hero-page__badge { margin-top: 1.25rem; }
@media (max-width: 559px) { .badge-confiance { gap: .6rem; padding: .5rem .85rem; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .badge-confiance { background: rgba(14,14,16,.82); } }

/* Page contact : formulaire 2/3, coordonnées 1/3 alignées en haut (20/10/2026, demande du client) */
@media (min-width: 1024px) {
  .duo--contact { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; gap: clamp(1.75rem, 3vw, 3rem); }
}

/* --- Héros des pages intérieures : plus compacts, modernes et premium (20/10/2026, demande du client) -----------------
   Hauteur réduite (marges, titre, image), étiquette en pastille de verre, coins inférieurs arrondis, lueur douce ;
   sur téléphone : 2 boutons (le téléphone reste dans la barre d'action mobile) et image en bandeau 16/9. */
@media screen {
  #contenu > .hero-page:first-child, #contenu > .article:first-child > .hero-page:first-child {
    padding-top: calc(var(--entete) + clamp(1rem, .6rem + 1.8vw, 2.75rem)); }
}
.hero-page { padding-bottom: clamp(1.75rem, 1.2rem + 2.4vw, 3.5rem); border-radius: 0 0 clamp(22px, 2.4vw, 36px) clamp(22px, 2.4vw, 36px); }
.hero-page::after { content: ""; position: absolute; z-index: -1; left: 50%; bottom: -30%; width: 70%; height: 60%; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(91,132,255,.22), transparent 70%); pointer-events: none; }
.hero-page h1, .hero-page--article h1 { font-size: clamp(1.875rem, 1.25rem + 2.5vw, 3.25rem); line-height: 1.06; letter-spacing: -.035em; max-width: 18ch; margin-bottom: .45em; }
.hero-page--article h1 { max-width: 22ch; }
.hero-page .etiquette { display: inline-flex; margin-bottom: .9rem; padding: .38rem .75rem .38rem .65rem; border-radius: var(--pilule); font-size: .6875rem;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hero-page__chapo { font-size: clamp(1rem, .95rem + .3vw, 1.1875rem); max-width: 36rem; margin-bottom: 1.25rem; }
.hero-page__actions { gap: .6rem; }
.hero-page__actions .bouton { --h: 50px; }
.hero-page__grille { gap: clamp(1.25rem, 3vw, 3.5rem); }
.hero-page .mot-geant { font-size: clamp(3rem, 1rem + 9vw, 9.5rem); opacity: .7; }
.hero-page__badge, .hero-page__actions + .hero-page__badge { margin-top: 1rem; }
.hero-page .article__meta { margin: .25rem 0 0; font-size: .875rem; }
.hero-page__media { border-radius: clamp(18px, 2vw, 26px); }
@media (min-width: 1024px) { .hero-page--image .hero-page__grille { grid-template-columns: 1.3fr .7fr; } .hero-page__media { aspect-ratio: 1 / 1; max-height: 420px; } }
@media (max-width: 1023.98px) { .hero-page__media { aspect-ratio: 16 / 9; } }
@media (max-width: 639.98px) {
  .hero-page__actions { display: grid; grid-template-columns: 1fr; }
  .hero-page__actions .bouton { width: 100%; --h: 48px; }
  .hero-page__actions a[href^="tel:"] { display: none; }
}
.hero-page .fil { margin-bottom: 1rem; font-size: .8125rem; }

/* --- Photos du devis (20/10/2026) : zone d'ajout façon application, vignettes avec retrait ---------------------------- */
.photos-devis__libelle { font-weight: 700; font-size: .875rem; color: var(--encre); }
.photos-devis__zone { display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem; border: 1.5px dashed #9a9aa2; border-radius: 16px;
  background: #fbfbfc; cursor: pointer; transition: border-color var(--micro, .18s) var(--ease), background-color var(--micro, .18s) var(--ease); }
.photos-devis__zone:hover { border-color: var(--accent); background: rgba(31,73,214,.04); }
.photos-devis__fichier { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.photos-devis__fichier:focus-visible + .photos-devis__liste, .photos-devis:focus-within .photos-devis__zone { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(31,73,214,.14); }
.photos-devis__icone { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #fff; color: var(--accent);
  box-shadow: 0 1px 2px rgba(17,17,19,.08), 0 6px 14px -8px rgba(31,73,214,.5); }
.photos-devis__icone svg { width: 22px; height: 22px; }
.photos-devis__texte { display: grid; gap: .15rem; line-height: 1.3; }
.photos-devis__texte b { font-size: .9375rem; color: var(--encre); }
.photos-devis__texte small { font-size: .8125rem; color: var(--ardoise); }
.photos-devis--pleine .photos-devis__zone { opacity: .5; pointer-events: none; }
.photos-devis__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.photos-devis__liste:empty { display: none; }
.photos-devis__vignette { position: relative; width: 84px; height: 84px; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px rgba(17,17,19,.1); }
.photos-devis__vignette img { width: 100%; height: 100%; object-fit: cover; }
.photos-devis__vignette button { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: rgba(17,17,19,.72); color: #fff; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.photos-devis__info { margin: 0; font-size: .8125rem; color: var(--ardoise); }
/* Correctifs (20/10/2026) : champ de fichier réellement masqué (la règle .champ input l'élargissait) ; étiquette des héros à 12 px minimum */
.photos-devis { position: relative; }
.champ .photos-devis__fichier { position: absolute; left: 0; top: 0; width: 1px; height: 1px; min-height: 0; padding: 0; margin: 0; border: 0; opacity: 0; overflow: hidden; clip-path: inset(50%); }
.hero-page .etiquette { font-size: .75rem; }

/* --- Encarts « Notre retour d'expérience » (20/10/2026) : chiffres « N sur 100 rapports » en tuiles ------------------- */
.retour-xp { margin: 2rem 0; padding: clamp(1.15rem, .9rem + 1.2vw, 1.75rem); border-radius: 24px; background: #fff; color: var(--encre);
  border: 1px solid rgba(17,17,19,.07); box-shadow: 0 1px 2px rgba(17,17,19,.04), 0 22px 48px -28px rgba(17,17,19,.35); }
.prose .retour-xp { margin: 2.25rem 0; }
.retour-xp__etiquette { display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 .6rem; font-size: .75rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.retour-xp__etiquette::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(31,73,214,.14); }
.retour-xp__titre, .prose .retour-xp__titre { margin: 0 0 .35rem; font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); font-weight: 750; letter-spacing: -.02em; line-height: 1.25; }
.retour-xp__echantillon, .prose .retour-xp__echantillon { margin: 0 0 1rem; font-size: .9375rem; color: var(--ardoise); }
.retour-xp__perimetre, .prose .retour-xp__perimetre { margin: .9rem 0 .55rem; font-size: .8125rem; font-weight: 700; color: var(--encre); }
.retour-xp__chiffres, .prose .retour-xp__chiffres { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.retour-xp__chiffre, .prose .retour-xp__chiffre { display: grid; gap: .35rem; align-content: start; margin: 0; padding: .9rem 1rem; border-radius: 16px; background: #f5f7fc; border: 1px solid rgba(31,73,214,.1); }
.prose .retour-xp__chiffre::before { content: none; display: none; }
.retour-xp__valeur { display: flex; align-items: baseline; gap: .35rem; font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); font-weight: 800; letter-spacing: -.035em; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.retour-xp__valeur small { font-size: .8125rem; font-weight: 700; letter-spacing: 0; color: var(--ardoise); }
.retour-xp__texte { font-size: .875rem; line-height: 1.45; color: var(--encre); }
.retour-xp__texte b { font-weight: 700; }
.retour-xp__note, .prose .retour-xp__note { margin: 1rem 0 0; font-size: .75rem; line-height: 1.5; color: var(--ardoise); }
.section--sombre .retour-xp, .section--sombre-2 .retour-xp { color: var(--encre); }

/* --- Logo « France Traitement Punaise de Lit® » (21/10/2026, demande du client : même taille que l'ancien) -----------
   Le nouveau logo est plus long (956 × 46 contre 990 × 67) : largeurs relevées pour garder la hauteur des lettres de
   l'ancien logo là où la place le permet (téléphone : largeur disponible maximale, comme avant). */
@media (max-width: 1179.98px) and (min-width: 560px) { .entete__logo img, .entete .entete__logo img { width: 360px; } }
@media (min-width: 1180px) { .entete .entete__logo img { width: 250px; } }
@media (min-width: 1440px) { .entete .entete__logo img { width: 280px; } }
@media (min-width: 1600px) { .entete .entete__logo img { width: 300px; } }
@media (min-width: 1800px) { .entete .entete__logo img { width: 340px; } }
@media (min-width: 1920px) { .entete .entete__logo img { width: 380px; } }
.pied__logo { width: 290px; max-width: 100%; }

/* Téléphone : pastille « Marseille » resserrée pour agrandir le logo (21/10/2026, demande du client) — texte gardé à 12 px */
@media (max-width: 559.98px) {
  .entete .entete__ville { font-size: .75rem; letter-spacing: .01em; padding: .16em .38em; border-width: 1px; }
  .entete .entete__logo { gap: .3rem; }
  .entete .entete__barre { padding-left: .7rem; gap: .4rem; }
  .entete__logo img, .entete .entete__logo img { width: clamp(150px, calc(100vw - 166px), 300px); }
}