/* =========================================================
   Plombax — plombier Amiens
   « Laiton doré, marine profond » — DA dérivée du logo
   ========================================================= */

:root {
  /* Palette — échantillonnée sur le logo (robinet laiton, goutte marine,
     fond crème). Contrastes WCAG vérifiés, indiqués en commentaire. */
  --navy:       #0F1E35;  /* marine profond — héro, header, footer, titres */
  --navy-2:     #16304D;  /* marine médian — surfaces sombres alternées */

  /* Doré laiton. Un doré assez sombre pour porter du texte BLANC vire au
     bronze : les CTA sont donc dorés clairs avec du texte MARINE dessus.
     Le doré clair est décoratif sur crème (2.14:1) — jamais de texte. */
  --gold:        #C79A4B;  /* laiton du logo — traits, hachures, icônes sur sombre */
  --gold-hi:     #F3D9A4;  /* reflet — texte/icônes sur marine (12.15:1) */
  --gold-mid:    #E8C070;  /* doré lisible sur marine (9.71:1) */
  --gold-cta:    #D9A441;  /* fond CTA — MARINE dessus 7.43:1 */
  --gold-cta-dk: #C68B2C;  /* hover CTA — marine dessus 5.67:1 */
  /* Calibré sur --tint (le fond clair le plus foncé), pas sur --paper :
     un doré qui passe sur la crème peut échouer sur la section teintée. */
  --gold-ink:    #7A5114;  /* texte doré — tint 5.07:1, crème 5.79:1, blanc 6.97:1 */

  --paper:      #EFE9E6;  /* crème — fond principal */

  /* Neutres dérivés (fond clair) */
  --white:      #FFFFFF;
  --tint:       #E4DAD6;  /* section teintée */
  --line:       #CBB9B1;  /* filets/bordures */
  --body:       #4A3F3A;  /* corps de texte chaud sur crème (8.47:1) */

  /* Typo */
  --font-title: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body:  "Barlow", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Rythme 8px */
  --sp-1: .5rem;  --sp-2: 1rem;   --sp-3: 1.5rem;  --sp-4: 2rem;
  --sp-5: 3rem;   --sp-6: 4rem;   --sp-7: 6rem;    --sp-8: 8rem;

  --wrap: 1180px;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 18px 40px -22px rgba(15, 30, 53, .38);
  --shadow-lg: 0 30px 60px -30px rgba(15, 30, 53, .5);

  /* Z-index sémantique */
  --z-sticky: 100;
  --z-header: 200;
  --z-drop:   300;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Reset léger ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.65;
  color: var(--navy);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--gold-ink); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 {
  font-family: var(--font-title);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; }
em { font-style: normal; color: var(--gold-ink); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 50%; translate: -50% -140%; top: .5rem;
  z-index: 999; background: var(--gold-cta); color: var(--navy);
  padding: .6rem 1rem; border-radius: 8px; font-weight: 700; text-decoration: none;
  transition: translate .2s var(--ease-out);
}
.skip-link:focus { translate: -50% 0; }

.ico { width: 1.15em; height: 1.15em; flex: none; }

/* Chiffres tabulaires pour téléphone/prix */
.num, .btn__num, .process__num, .rating strong { font-variant-numeric: tabular-nums; }

/* =========================================================
   Boutons
   ========================================================= */
.btn {
  --btn-pad: .8rem 1.35rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: var(--btn-pad);
  font-family: var(--font-title);
  font-weight: 700; font-size: 1.08rem; letter-spacing: .01em;
  text-decoration: none; border-radius: var(--radius-sm);
  border: 2px solid transparent; cursor: pointer;
  transition: transform .18s var(--ease-out), background-color .18s, box-shadow .18s, border-color .18s;
}
/* Texte MARINE et non blanc : sur doré clair le blanc ne fait que 2.25:1,
   le marine 7.43:1. Le survol assombrit le doré (marine dessus = 5.67:1). */
.btn--primary { background: var(--gold-cta); color: var(--navy); box-shadow: 0 10px 22px -12px rgba(198,139,44,.85); }
.btn--primary:hover { background: var(--gold-cta-dk); transform: translateY(-2px); box-shadow: 0 16px 28px -12px rgba(166,113,30,.9); }
.btn--ghost { background: transparent; color: var(--gold-ink); border-color: color-mix(in srgb, var(--gold-ink) 45%, transparent); }
.btn--ghost:hover { border-color: var(--gold-ink); background: color-mix(in srgb, var(--gold) 10%, transparent); transform: translateY(-2px); }
.btn--lg { --btn-pad: 1.05rem 1.7rem; font-size: 1.18rem; }
.btn__stack { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; }
.btn__hint { font-size: .72rem; font-family: var(--font-body); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; opacity: .8; }
.btn__num { font-size: 1.15em; }

/* On dark surfaces the ghost button flips to light ink */
.section--dark .btn--ghost, .cta-final .btn--ghost, .hero .btn--ghost {
  color: var(--paper); border-color: color-mix(in srgb, var(--gold) 55%, transparent);
}
.section--dark .btn--ghost:hover, .cta-final .btn--ghost:hover, .hero .btn--ghost:hover {
  border-color: var(--gold); background: color-mix(in srgb, var(--gold) 16%, transparent);
}

/* =========================================================
   Goutte (marqueur de section) — remplace les puces
   ========================================================= */
.drop {
  display: inline-block; width: 12px; height: 12px; flex: none;
  background: var(--gold);
  border-radius: 0 50% 50% 50%;
  rotate: 45deg;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 18%, transparent);
}

.kicker {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--font-title); font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; font-size: .82rem;
  color: var(--gold-ink); margin-bottom: .9rem;
}
.kicker .drop { rotate: 45deg; }
/* Sur marine, le doré brut manque de contraste → déclinaison lisible */
.kicker--light { color: var(--gold-mid); }

/* =========================================================
   Bandeau urgence (sticky)
   ========================================================= */
.urgence-bar {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: linear-gradient(90deg, var(--navy-2), var(--navy));
  color: var(--paper);
  font-family: var(--font-title); font-weight: 600;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
}
.urgence-bar__inner {
  display: flex; align-items: center; justify-content: center; gap: 1rem 1.4rem;
  flex-wrap: wrap; padding: .5rem 0; font-size: .98rem;
}
.urgence-bar__label { display: inline-flex; align-items: center; gap: .5rem; color: var(--gold-hi); }
.urgence-bar__phone {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--white); text-decoration: none; font-size: 1.15rem; font-weight: 700;
}
.urgence-bar__phone .ico { color: var(--gold); }
.urgence-bar__phone:hover .num { text-decoration: underline; text-decoration-color: var(--gold); }
.urgence-bar__hours { color: color-mix(in srgb, var(--paper) 80%, transparent); font-size: .9rem; }

/* =========================================================
   Header
   ========================================================= */
/* Le fond marine doit être porté par .header (pleine largeur) et non par
   .header__inner, qui est aussi le conteneur .wrap : sinon le marine
   s'arrête à la largeur du contenu et laisse deux bandes blanches sur les
   côtés. Les bandeaux urgence/réassurance suivent déjà ce principe. */
.header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--navy); color: var(--paper);
}
.header__inner {
  display: flex; align-items: center; gap: 1.2rem;
  padding: .85rem 0;
}

.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--paper); }
.brand__mark { width: 40px; height: 40px; flex: none; }
.brand__name {
  font-family: var(--font-title); font-weight: 800; font-size: 1.7rem;
  letter-spacing: .02em; color: var(--white);
}

.nav { margin-inline-start: auto; }
.nav__list { display: flex; align-items: center; gap: 1.5rem; }
.nav__list a {
  color: color-mix(in srgb, var(--paper) 90%, transparent); text-decoration: none;
  font-family: var(--font-title); font-weight: 600; font-size: 1.08rem; letter-spacing: .01em;
  padding: .3rem 0; position: relative;
}
.nav__list a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
  background: var(--gold); transition: right .25s var(--ease-out);
}
.nav__list a:hover { color: var(--white); }
.nav__list a:hover::after,
.nav__list a:focus-visible::after { right: 0; }
.nav__toggle {
  display: none; background: none; border: 0; color: var(--paper); cursor: pointer;
  padding: .4rem; font-size: 1.6rem;
  min-width: 44px; min-height: 44px; align-items: center; justify-content: center;
}
.header__cta { display: flex; align-items: center; gap: .7rem; }
.header__cta .btn { padding: .6rem 1.05rem; font-size: 1rem; }
.header__cta .btn--ghost { color: var(--paper); border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
.header__cta .btn--ghost:hover { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 15%, transparent); }

/* Bandeau réassurance */
.reassurance { background: var(--navy-2); border-top: 1px solid color-mix(in srgb, var(--gold) 18%, transparent); }
.reassurance__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .6rem 2rem; padding: .6rem 0; font-size: .92rem;
}
.reassurance__item {
  display: inline-flex; align-items: center; gap: .5rem;
  color: color-mix(in srgb, var(--paper) 88%, transparent); font-weight: 500;
}
.reassurance__item .ico { color: var(--gold); }

/* =========================================================
   Héro
   ========================================================= */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1100px 500px at 82% -10%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 60%),
    linear-gradient(160deg, var(--navy) 40%, var(--navy-2));
  color: var(--paper);
}
.hero__inner {
  display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 2rem;
  padding-block: clamp(3rem, 6vw, 5.5rem);
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--font-title); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; font-size: .9rem; color: var(--gold-hi); margin-bottom: 1rem;
}
.hero h1 {
  font-size: clamp(2.6rem, 1.6rem + 4.4vw, 5rem);
  font-weight: 800; letter-spacing: -0.02em; margin-bottom: 1.1rem;
}
.hero h1 .hl { color: var(--gold); }
.hero__lead {
  font-size: clamp(1.08rem, 1rem + .5vw, 1.3rem);
  color: color-mix(in srgb, var(--paper) 90%, transparent);
  max-width: 34ch; line-height: 1.6; margin-bottom: 1.8rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 1.1rem; }
.hero__micro {
  display: inline-flex; align-items: center; gap: .55rem;
  color: color-mix(in srgb, var(--paper) 82%, transparent); font-size: .95rem; font-weight: 500;
}
.hero__micro .ico { color: var(--gold); }

.hero__visual { display: flex; justify-content: center; align-items: flex-start; }

/* =========================================================
   Photos — traitement « gravure » commun
   Filet doré décalé + léger réchauffement, pour que les
   photos appartiennent à la charte au lieu de flotter dessus.
   ========================================================= */
.hero__photo, .photo {
  position: relative; margin: 0;
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.hero__photo img, .photo img {
  width: 100%; height: 100%; object-fit: cover;
  /* réchauffement discret : aligne les blancs froids sur le crème de la charte */
  filter: saturate(.92) sepia(.10) contrast(1.03);
}
/* Filet doré intérieur, façon trait gravé */
.hero__photo::after, .photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold-hi) 55%, transparent);
}
/* Cadre décalé : reprend l'anneau du logo */
.hero__photo { isolation: isolate; }
.hero__photo::before {
  content: ""; position: absolute; inset: 14px -14px -14px 14px; z-index: -1;
  border: 2px solid color-mix(in srgb, var(--gold) 55%, transparent);
  border-radius: var(--radius);
}
@media (max-width: 960px) { .hero__photo::before { inset: 10px -10px -10px 10px; } }
.faucet { width: min(100%, 340px); height: auto; filter: drop-shadow(0 24px 30px rgba(0,0,0,.35)); }

/* Filet d'eau : animations retirées (DA v2). Le tracé reste visible, statique. */
.stream { stroke-dasharray: none; stroke-dashoffset: 0; }
.drop-fall { opacity: 1; }

/* =========================================================
   Sections + fil d'eau conducteur (le trait vertical)
   ========================================================= */
.sections { position: relative; }
.sections::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
  translate: -50% 0;
  background: linear-gradient(var(--gold), color-mix(in srgb, var(--gold) 0%, transparent));
  opacity: .0; /* discret : activé seulement en desktop large */
}
@media (min-width: 1360px) {
  .sections::before {
    left: calc(50% - var(--wrap)/2 - 1.5rem);
    opacity: .25; translate: 0 0;
    background: repeating-linear-gradient(var(--gold) 0 8px, transparent 8px 20px);
  }
}

.section { padding-block: clamp(3.5rem, 6vw, 6rem); position: relative; }
.section--tint { background: var(--tint); }
.section--dark { background: linear-gradient(160deg, var(--navy-2), var(--navy)); color: var(--paper); }

.section__head { max-width: 42rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section__head--light { color: var(--paper); }
.section__head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; max-width: none; }
.section h2 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem); font-weight: 700; }
.section__intro { margin-top: .9rem; font-size: 1.12rem; color: var(--body); max-width: 60ch; }
.section--dark .section__intro { color: color-mix(in srgb, var(--paper) 85%, transparent); }

/* =========================================================
   Services
   ========================================================= */
.services {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
}
.service { display: flex; }
.service a {
  display: flex; flex-direction: column; gap: .55rem; width: 100%;
  padding: 1.6rem 1.5rem 1.5rem; text-decoration: none; color: var(--navy);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform .2s var(--ease-out), box-shadow .2s, border-color .2s;
}
.service a:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); }
.service__ico { width: 40px; height: 40px; color: var(--gold-ink); margin-bottom: .3rem; }
.service h3 { font-family: var(--font-title); font-weight: 700; font-size: 1.42rem; }
.service p { color: var(--body); font-size: .98rem; line-height: 1.55; }
.service__link {
  margin-top: auto; padding-top: .5rem;
  display: inline-flex; align-items: center; gap: .35rem;
  color: var(--gold-ink); font-family: var(--font-title); font-weight: 700; font-size: 1rem;
}
.service a:hover .service__link .ico { transform: translateX(4px); }
.service__link .ico { transition: transform .2s var(--ease-out); }

/* Service phare */
.service--feature { grid-column: span 2; }
.service--feature a {
  background: linear-gradient(155deg, var(--navy), var(--navy-2));
  color: var(--paper); border-color: transparent; position: relative; overflow: hidden;
}
.service--feature a::after {
  content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px;
  background: radial-gradient(circle, color-mix(in srgb, var(--gold) 30%, transparent), transparent 70%);
}
.service--feature .service__ico { color: var(--gold); width: 46px; height: 46px; }
.service--feature h3 { font-size: 1.7rem; }
.service--feature p { color: color-mix(in srgb, var(--paper) 88%, transparent); font-size: 1.05rem; max-width: 46ch; }
.service--feature .service__link { color: var(--gold-hi); }
.service__tag {
  /* marine sur doré clair : 7.43:1 (le blanc n'y ferait que 2.25:1) */
  align-self: flex-start; background: var(--gold-cta); color: var(--navy);
  font-family: var(--font-title); font-weight: 700; font-size: .82rem;
  letter-spacing: .04em; text-transform: uppercase; padding: .25rem .7rem; border-radius: 999px;
}

/* =========================================================
   Pourquoi Plombax
   ========================================================= */
.pourquoi { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.pourquoi__head { position: sticky; top: 10rem; }
.pourquoi__list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 1.8rem; }
.pourquoi__list li { }
.pourquoi__list h3 { font-family: var(--font-title); font-weight: 700; font-size: 1.32rem; margin: .6rem 0 .3rem; }
.pourquoi__list p { color: var(--body); font-size: .98rem; line-height: 1.55; }
.feat__ico {
  width: 46px; height: 46px; color: var(--gold-ink);
  padding: 9px; border-radius: 12px;
  background: color-mix(in srgb, var(--gold) 12%, transparent);
}

/* =========================================================
   Processus
   ========================================================= */
.process { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; counter-reset: step; }
.process__step { position: relative; padding: 1.8rem 1.6rem; background: color-mix(in srgb, var(--paper) 6%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent); border-radius: var(--radius); }
.process__num {
  font-family: var(--font-title); font-weight: 800; font-size: 2.6rem;
  /* gold-mid et non gold-cta : sur marine, gold-mid monte à 9.71:1 */
  color: var(--gold-mid); line-height: 1; display: block; margin-bottom: .6rem;
}
.process__step h3 { font-family: var(--font-title); font-weight: 700; font-size: 1.45rem; color: var(--white); margin-bottom: .35rem; }
.process__step p { color: color-mix(in srgb, var(--paper) 84%, transparent); font-size: 1rem; line-height: 1.55; }

/* =========================================================
   Réalisations (galerie / placeholders)
   ========================================================= */
.gallery { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.shot { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--white); }
/* Vignette de la galerie d'accueil. Elle remplace le gabarit hachuré
   `.shot__ph` (« photo à venir »), dont plus rien ne se servait une fois les
   visuels posés. Même cadrage 4/3, et le réchauffement des autres photos du
   site — mais PAS le filet doré de `.photo` : la carte `.shot` porte déjà sa
   propre bordure, les deux traits se dédoubleraient sur 1 px. */
.shot__img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-bottom: 1px solid var(--line);
  filter: saturate(.92) sepia(.10) contrast(1.03);
}
.shot__cap { padding: .9rem 1.1rem; font-size: .96rem; color: var(--body); font-weight: 500; }
.badge {
  display: inline-block; background: color-mix(in srgb, var(--gold-cta) 18%, transparent);
  color: var(--gold-ink); font-family: var(--font-title); font-weight: 700;
  font-size: .74rem; letter-spacing: .05em; text-transform: uppercase;
  padding: .2rem .55rem; border-radius: 6px; margin-right: .5rem; vertical-align: 1px;
}

/* =========================================================
   Avis
   ========================================================= */
.rating { display: inline-flex; align-items: baseline; gap: .5rem; margin-top: .8rem; font-size: 1.1rem; }
.rating__stars { color: var(--gold-ink); letter-spacing: .08em; font-size: 1.25rem; }
.rating strong { font-family: var(--font-title); font-size: 1.4rem; }
.rating__count { color: var(--body); font-size: .98rem; }
.reviews { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.review { padding: 1.6rem 1.5rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.review__stars { color: var(--gold-ink); letter-spacing: .1em; font-size: 1.1rem; margin-bottom: .6rem; }
.review blockquote { margin: 0 0 .9rem; font-size: 1.05rem; line-height: 1.55; color: var(--navy); }
.review__author { font-family: var(--font-title); font-weight: 700; color: var(--body); font-size: 1rem; }

/* =========================================================
   Zone d'intervention
   ========================================================= */
.zone { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.zone__list { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.zone__list li {
  font-family: var(--font-title); font-weight: 600; font-size: 1.02rem;
  padding: .4rem .9rem; border-radius: 999px;
  background: var(--tint); border: 1px solid var(--line); color: var(--navy);
}
.zone__map svg { width: min(100%, 320px); margin-inline: auto; }

/* =========================================================
   FAQ
   ========================================================= */
.faq { max-width: 820px; }
.faq__list { display: grid; gap: .8rem; }
.faq__item {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .3rem 1.3rem; transition: border-color .2s, box-shadow .2s;
}
.faq__item[open] { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); box-shadow: var(--shadow); }
.faq__item summary {
  cursor: pointer; list-style: none; padding: 1rem 0;
  font-family: var(--font-title); font-weight: 700; font-size: 1.22rem; color: var(--navy);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; width: 12px; height: 12px; flex: none;
  border-right: 2.5px solid var(--gold-ink); border-bottom: 2.5px solid var(--gold-ink);
  rotate: 45deg; transition: rotate .25s var(--ease-out); margin-top: -4px;
}
.faq__item[open] summary::after { rotate: -135deg; margin-top: 2px; }
.faq__item p { padding: 0 0 1.1rem; color: var(--body); max-width: 68ch; }

/* =========================================================
   CTA final
   ========================================================= */
.cta-final {
  background:
    radial-gradient(700px 300px at 15% 120%, color-mix(in srgb, var(--gold-cta) 22%, transparent), transparent 60%),
    linear-gradient(150deg, var(--navy), var(--navy-2));
  color: var(--paper);
}
.cta-final__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
  padding-block: clamp(3rem, 5vw, 4.5rem);
}
.cta-final h2 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem); font-weight: 700; }
.cta-final p { margin-top: .6rem; color: color-mix(in srgb, var(--paper) 88%, transparent); font-size: 1.15rem; }
.cta-final__actions { display: flex; flex-wrap: wrap; gap: .9rem; }

/* =========================================================
   Footer
   ========================================================= */
.footer { background: var(--navy); color: color-mix(in srgb, var(--paper) 82%, transparent); }
.footer__inner {
  display: grid; gap: 2.2rem 2rem;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  padding-block: clamp(3rem, 5vw, 4.5rem);
}
.brand--footer { margin-bottom: 1rem; }
.footer__tag { max-width: 34ch; line-height: 1.6; font-size: .98rem; }
.footer__col h3 {
  font-family: var(--font-title); font-weight: 700; font-size: 1.15rem;
  color: var(--white); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1rem;
}
.footer__contact, .footer__links { display: grid; gap: .7rem; }
.footer__contact a, .footer__links a, .footer__addr {
  display: inline-flex; align-items: center; gap: .55rem;
  color: color-mix(in srgb, var(--paper) 85%, transparent); text-decoration: none; font-size: .98rem;
}
.footer__contact a:hover, .footer__links a:hover { color: var(--gold); }
.footer__contact .ico, .footer__addr .ico { color: var(--gold); }
.footer__contact a .num { font-size: 1.15rem; font-weight: 700; color: var(--white); font-family: var(--font-title); }
.footer__hours { margin-bottom: 1rem; font-size: .98rem; line-height: 1.5; }
.footer__hours strong { color: var(--white); font-family: var(--font-title); letter-spacing: .02em; }
.footer__col .btn { margin-top: .4rem; }

/* Mention de démonstration — même parti que maroule.devak.fr : elle doit se
   LIRE. Un visiteur ne doit pas pouvoir prendre ce plombier fictif pour un
   vrai, ni tenter d'appeler. D'où le corps de texte plein (et non le .9rem des
   mentions du dessous), le fond distinct et le liseré : c'est un
   avertissement, pas une note de bas de page. Elle vit dans le pied, donc sur
   les 13 pages — l'accueil compris, où rien ne la portait. */
.demo-notice {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: .9rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--paper) 8%, transparent);
  font-size: .95rem; line-height: 1.55;
}
/* Le doré porte le libellé. --gold-hi et non --gold : sur marine, le doré
   décoratif ne passe pas en texte, le reflet oui (12,15:1). */
.demo-notice strong { color: var(--gold-hi); }
.demo-notice a { color: var(--gold-mid); }
/* La mention prend la marge haute : le bloc suivant ne la double pas. */
.demo-notice + .footer__bottom { margin-top: 1.2rem; }

.footer__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-block: 1.4rem; border-top: 1px solid color-mix(in srgb, var(--paper) 14%, transparent);
  font-size: .9rem;
}
.footer__legal { display: flex; gap: 1.3rem; }
.footer__legal a { color: color-mix(in srgb, var(--paper) 75%, transparent); text-decoration: none; }
.footer__legal a:hover { color: var(--gold); }

/* Crédit « Site créé par DevAK » — bloc entièrement cliquable vers devak.fr */
.credit-devak {
  display: inline-flex; align-items: center; gap: .45em;
  color: inherit; text-decoration: none;
  opacity: .7; transition: opacity .25s ease;
}
/* flex: none — sans ça le logo est écrasé (ratio faussé) quand la ligne est serrée */
.credit-devak img { display: block; height: 1.3em; width: auto; flex: none; }
/* Footer sur fond marine : le narval dégradé y serait illisible → monochrome blanc */
.credit-devak.sombre img { filter: brightness(0) invert(1); }
.credit-devak:hover, .credit-devak:focus-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .credit-devak { transition: none; } }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 960px) {
  .hero__inner { grid-template-columns: 1fr; }
  /* Copie + CTA d'abord ; le robinet décoratif passe après (P1) */
  .faucet { width: min(58%, 210px); }
  .pourquoi { grid-template-columns: 1fr; }
  .pourquoi__head { position: static; }
  .zone { grid-template-columns: 1fr; }
  .zone__map { order: -1; }
  .service--feature { grid-column: span 1; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  /* Ne garder QUE la barre-numéro épinglée ; le header défile (P2) */
  .header { position: static; }
  .reassurance__inner { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; gap: 1.4rem; scrollbar-width: none; }
  .reassurance__inner::-webkit-scrollbar { display: none; }
  .reassurance__item { flex: none; }
  .nav { margin-inline-start: auto; position: relative; }
  .nav__toggle { display: inline-flex; }
  .nav__list {
    position: absolute; right: 0; top: calc(100% + .8rem); z-index: var(--z-drop);
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--navy-2); border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
    border-radius: var(--radius-sm); padding: .5rem; min-width: 220px; box-shadow: var(--shadow-lg);
    display: none;
  }
  .nav__list.is-open { display: flex; }
  .nav__list li { width: 100%; }
  .nav__list a { display: block; padding: .7rem .8rem; width: 100%; }
  .nav__list a::after { display: none; }
  .header__cta .btn--ghost { display: none; }
  .process { grid-template-columns: 1fr; }
  .pourquoi__list { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; }
  .cta-final__inner { flex-direction: column; align-items: flex-start; }
  .section__head--row { align-items: flex-start; }
}

@media (max-width: 420px) {
  .brand__name { font-size: 1.45rem; }
  .btn { width: 100%; }
  .hero__actions .btn, .cta-final__actions .btn { width: 100%; }
}

/* =========================================================
   Pages service (gabarit)
   ========================================================= */

/* Fil d'ariane */
.breadcrumb { background: var(--navy); }
.breadcrumb__inner { display: flex; align-items: center; gap: .5rem; padding: .7rem 0; font-size: .9rem; flex-wrap: wrap; }
.breadcrumb a, .breadcrumb span { color: color-mix(in srgb, var(--paper) 70%, transparent); text-decoration: none; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb [aria-current] { color: var(--paper); font-weight: 600; }
.breadcrumb__sep { color: color-mix(in srgb, var(--gold) 60%, transparent); }

/* Héro service : copy + panneau d'urgence */
.hero--service .hero__inner { grid-template-columns: 1.1fr .9fr; align-items: stretch; }
.hero--service .hero h1 { font-size: clamp(2.3rem, 1.5rem + 3.6vw, 4rem); }

.hero__panel {
  align-self: center; width: 100%;
  background: color-mix(in srgb, var(--navy-2) 82%, #000 8%);
  border: 1px solid color-mix(in srgb, var(--gold) 42%, transparent);
  border-radius: var(--radius); padding: 1.6rem 1.6rem 1.7rem;
  box-shadow: var(--shadow-lg);
}
.hero__panel-label {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-title); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; font-size: .82rem; color: var(--gold-hi); margin-bottom: .6rem;
}
/* Point d'urgence : halo statique (l'animation en boucle a été retirée — DA v2). */
.hero__panel-label .pulse {
  width: 10px; height: 10px; border-radius: 50%; background: var(--gold); flex: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 25%, transparent);
}
.hero__panel-phone {
  display: flex; flex-direction: column; text-decoration: none; color: var(--white);
  margin-bottom: .3rem;
}
.hero__panel-phone .num { font-family: var(--font-title); font-weight: 800; font-size: clamp(1.9rem, 4.5vw, 2.6rem); letter-spacing: .01em; line-height: 1.05; }
.hero__panel-phone:hover .num { color: var(--gold); }
.hero__panel-hours { color: color-mix(in srgb, var(--paper) 80%, transparent); font-size: .95rem; margin-bottom: 1.1rem; }
.hero__panel-list { display: grid; gap: .5rem; margin-bottom: 1.3rem; }
.hero__panel-list li { display: flex; align-items: center; gap: .55rem; font-size: .96rem; color: color-mix(in srgb, var(--paper) 90%, transparent); }
.hero__panel-list .ico { color: var(--gold); }
/* La même liste est réutilisée dans une .aside-card à fond blanc : le texte
   clair y était illisible (1.18:1). On repasse en encre chaude sur fond clair. */
.aside-card:not(.aside-card--urgence) .hero__panel-list li { color: var(--body); }
.aside-card:not(.aside-card--urgence) .hero__panel-list .ico { color: var(--gold-ink); }
.hero__panel .btn { width: 100%; }

/* Grille de symptômes / interventions couvertes */
.symptoms { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.symptom {
  display: flex; gap: .9rem; align-items: flex-start;
  padding: 1.1rem 1.2rem; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color .2s, box-shadow .2s;
}
.symptom:hover { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); box-shadow: var(--shadow); }
.symptom__ico {
  width: 42px; height: 42px; flex: none; color: var(--gold-ink);
  padding: 8px; border-radius: 11px; background: color-mix(in srgb, var(--gold) 12%, transparent);
}
.symptom h3 { font-family: var(--font-title); font-weight: 700; font-size: 1.2rem; margin-bottom: .15rem; }
.symptom p { color: var(--body); font-size: .94rem; line-height: 1.5; }

/* Bloc réassurance tarifs (pas de faux prix) */
.assurance { display: grid; gap: 1.4rem; grid-template-columns: repeat(3, 1fr); }
.assurance__item { text-align: left; }
.assurance__item h3 { font-family: var(--font-title); font-weight: 700; font-size: 1.3rem; margin: .7rem 0 .3rem; }
.assurance__item p { color: var(--body); font-size: .98rem; line-height: 1.55; }
.assurance__note {
  margin-top: 1.8rem; padding: 1.1rem 1.3rem; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--gold-cta) 12%, var(--white));
  border: 1px solid color-mix(in srgb, var(--gold-cta) 35%, transparent);
  color: var(--navy); font-size: 1rem; display: flex; gap: .7rem; align-items: flex-start;
}
.assurance__note .ico { color: var(--gold-ink); width: 1.4em; height: 1.4em; flex: none; margin-top: .1rem; }

@media (max-width: 960px) {
  .hero--service .hero__inner { grid-template-columns: 1fr; }
  .hero--service .hero__panel { order: 0; }
  .hero--service .hero__visual { order: -1; }
  .assurance { grid-template-columns: 1fr; }
}

/* =========================================================
   Page devis (formulaire)
   ========================================================= */
.hero--devis .wrap { padding-block: clamp(2.5rem, 5vw, 4rem); }
.hero--devis h1 { font-size: clamp(2.1rem, 1.5rem + 3vw, 3.6rem); max-width: 20ch; margin-bottom: 1rem; }
.hero--devis .hero__lead { max-width: 54ch; }

.devis { display: grid; grid-template-columns: 1.45fr .85fr; gap: clamp(1.8rem, 4vw, 3.2rem); align-items: start; }

/* Carte formulaire */
.form {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2.2rem); box-shadow: var(--shadow);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: grid; gap: .4rem; margin-bottom: 1.15rem; }
.field > label { font-family: var(--font-title); font-weight: 600; font-size: 1.05rem; color: var(--navy); }
.req { color: var(--gold-ink); }
.optional { font-family: var(--font-body); font-weight: 400; font-size: .85rem; color: var(--body); }

.field input,
.field select,
.field textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--navy); width: 100%;
  padding: .78rem .9rem; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--white); transition: border-color .15s, box-shadow .15s;
}
.field input::placeholder,
.field textarea::placeholder { color: #6E625C; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none; border-color: var(--gold-ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent);
}
.field textarea { min-height: 130px; resize: vertical; }
.field select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6E7B' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; background-size: 18px; padding-right: 2.6rem;
}
.field__error { color: #B3261E; font-size: .9rem; font-weight: 500; display: none; align-items: center; gap: .35rem; }
.field--invalid input,
.field--invalid select,
.field--invalid textarea { border-color: #B3261E; }
.field--invalid input:focus,
.field--invalid select:focus,
.field--invalid textarea:focus { box-shadow: 0 0 0 3px color-mix(in srgb, #B3261E 20%, transparent); }
.field--invalid .field__error { display: flex; }

/* Groupe urgence (radios en cartes) */
.radio-group { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; border: 0; padding: 0; margin: 0; }
.radio-group legend { font-family: var(--font-title); font-weight: 600; font-size: 1.05rem; color: var(--navy); margin-bottom: .5rem; padding: 0; }
.radio-card { position: relative; }
.radio-card input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.radio-card label {
  display: flex; align-items: center; gap: .55rem; min-height: 52px; padding: .6rem .9rem;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); cursor: pointer;
  font-family: var(--font-title); font-weight: 600; color: var(--navy); transition: border-color .15s, background-color .15s;
}
.radio-card input:checked + label { border-color: var(--gold-ink); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.radio-card input:focus-visible + label { outline: 3px solid var(--gold); outline-offset: 2px; }
.radio-card .ico { color: var(--gold-ink); }

/* Consentement RGPD */
.consent { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: 1.3rem; }
.consent input { width: 20px; height: 20px; margin-top: .2rem; flex: none; accent-color: var(--gold-ink); }
.consent label { font-size: .95rem; color: var(--body); line-height: 1.5; }
.consent a { color: var(--gold-ink); }

.form__actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.form__note { font-size: .9rem; color: var(--body); margin-top: 1rem; display: flex; gap: .45rem; align-items: flex-start; }
.form__note .ico { color: var(--gold-ink); flex: none; margin-top: .1rem; }
.form .btn--lg { font-size: 1.12rem; }

/* Message de succès */
.form__success { display: none; text-align: center; padding: 1.5rem .5rem; }
.form.is-sent .form__fields { display: none; }
.form.is-sent .form__success { display: block; }
.form__success-ico {
  width: 64px; height: 64px; margin: 0 auto 1rem; color: var(--gold-ink);
  background: color-mix(in srgb, var(--gold) 14%, transparent); border-radius: 50%; padding: 14px;
}
.form__success h2 { font-family: var(--font-title); font-weight: 700; font-size: 1.8rem; color: var(--navy); margin-bottom: .5rem; }
.form__success p { color: var(--body); max-width: 44ch; margin: 0 auto 1.2rem; }

/* Colonne latérale */
.devis-aside { display: grid; gap: 1.1rem; align-content: start; }
.aside-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.4rem; }
.aside-card h2, .aside-card h3 { font-family: var(--font-title); font-weight: 700; font-size: 1.3rem; color: var(--navy); margin-bottom: .9rem; }
.aside-steps { display: grid; gap: 1rem; counter-reset: astep; }
.aside-steps li { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; }
.aside-steps li::before {
  counter-increment: astep; content: counter(astep);
  font-family: var(--font-title); font-weight: 800; color: var(--gold-ink);
  width: 32px; height: 32px; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--gold-cta) 12%, transparent); border-radius: 50%; font-size: 1.05rem;
}
.aside-steps strong { display: block; font-family: var(--font-title); color: var(--navy); font-size: 1.08rem; }
.aside-steps span { color: var(--body); font-size: .94rem; }

.aside-card--urgence {
  background: linear-gradient(155deg, var(--navy), var(--navy-2)); color: var(--paper); border-color: transparent;
}
.aside-card--urgence h3 { color: var(--white); }
.aside-card--urgence p { color: color-mix(in srgb, var(--paper) 86%, transparent); font-size: .96rem; margin-bottom: 1.1rem; }
.aside-card--urgence .btn { width: 100%; }
.aside-card--urgence .label {
  display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-title); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; font-size: .8rem; color: var(--gold-hi); margin-bottom: .5rem;
}
.aside-card--urgence .label .pulse {
  width: 10px; height: 10px; border-radius: 50%; background: var(--gold); flex: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 25%, transparent);
}

@media (max-width: 860px) {
  .devis { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .form__row { grid-template-columns: 1fr; }
  .radio-group { grid-template-columns: 1fr; }
}

/* =========================================================
   Page réalisations (galerie avant / après)
   ========================================================= */
.filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2rem; }
.filter {
  font-family: var(--font-title); font-weight: 600; font-size: .98rem;
  padding: .5rem 1.1rem; border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--white); color: var(--navy); cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s;
}
.filter:hover { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
.filter[aria-pressed="true"] { background: var(--navy); color: var(--paper); border-color: var(--navy); }

.projets { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.projet {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.projet__meta { padding: 1.2rem 1.35rem 1.4rem; }
.projet__meta h2 { font-family: var(--font-title); font-weight: 700; font-size: 1.4rem; color: var(--navy); margin-bottom: .35rem; }
.projet__meta p { color: var(--body); font-size: .96rem; line-height: 1.55; }
.projet__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.projet__tag {
  font-family: var(--font-title); font-weight: 600; font-size: .82rem; letter-spacing: .02em;
  padding: .25rem .7rem; border-radius: 999px;
  background: var(--tint); border: 1px solid var(--line); color: var(--body);
}
.projet__tag--time { display: inline-flex; align-items: center; gap: .35rem; color: var(--gold-ink); background: color-mix(in srgb, var(--gold) 10%, transparent); border-color: color-mix(in srgb, var(--gold) 30%, transparent); }

/* Slider avant / après */
.ba { position: relative; aspect-ratio: 4 / 3; overflow: hidden; user-select: none; touch-action: pan-y; background: var(--navy); }
.ba__layer { position: absolute; inset: 0; display: grid; place-items: center; color: color-mix(in srgb, var(--paper) 80%, transparent); }
.ba__layer .ico { width: 46px; height: 46px; opacity: .8; }
/* placeholders : "avant" gris/hachuré, "après" teinté marque (à remplacer par <img>) */
/* "après" = net & lumineux (fond clair, texte foncé) */
.ba__after {
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--gold) 12%, transparent) 0 18px, transparent 18px 36px),
    linear-gradient(160deg, #FFFDFC, #E8DED8);
  color: var(--body);
}
.ba__after .ico { color: var(--gold-ink); opacity: .9; }
/* "avant" = terne & sombre (fond grisâtre vétuste, texte clair) */
.ba__before {
  clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); z-index: 2;
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,.10) 0 18px, transparent 18px 36px),
    /* assombri : sur l'ancien gris clair, la légende blanche tombait à 3.69:1 */
    linear-gradient(160deg, #635C55, #3E3833);
  color: color-mix(in srgb, #fff 82%, transparent);
}
/* opacity retirée : sur le calque « avant » (gris vétuste) elle tombait à 3.69:1 */
.ba__cap { display: block; font-family: var(--font-body); font-size: .85rem; margin-top: .5rem; }

/* Les calques avant/après portent désormais de vraies images */
.ba__layer img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* « avant » : désaturé et assombri pour lire l'écart avec l'« après » */
.ba__before img { filter: saturate(.55) brightness(.72) contrast(1.05); }

/* Bande photo de respiration en milieu de page service */
.photo-bande { padding-block: 0; }
.photo-bande .photo { aspect-ratio: 3 / 1; }
@media (max-width: 760px) { .photo-bande .photo { aspect-ratio: 3 / 2; } }

/* Bandeau « ceci est une démonstration ».
   Un seul traitement pour les trois cas du site : photos d'illustration
   (réalisations), avis d'exemple, mentions légales non renseignées. Les deux
   derniers portaient auparavant le même dessin en style inline, avec un
   #7A4028 codé en dur — une couleur absente de la charte v3, que le
   basculement cuivre → doré n'avait donc pas pu atteindre.
   Le liseré tiré (dashed) est le signal : rien de ce qu'il encadre n'est réel. */
.notice-demo {
  display: flex; align-items: center; gap: .6rem;
  color: var(--gold-ink); font-weight: 600; font-size: .95rem;
  /* Fond OPAQUE (mélange sur --paper), et non un doré translucide sur
     `transparent`. Avec la version translucide, la couleur finale dépendait de
     la section : sur `section--tint` — le fond clair le plus foncé du site, et
     celui de la page devis — le bandeau tombait à 196,188,184 et le texte doré
     n'y faisait plus que 3,72:1, sous le seuil AA. Figé sur --paper, il vaut
     4,98:1 partout, quelle que soit la section qui l'accueille. */
  background: color-mix(in srgb, var(--gold) 14%, var(--paper));
  border: 1px dashed color-mix(in srgb, var(--gold-cta) 55%, transparent);
  padding: .75rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1.6rem;
}
/* L'icône ne doit pas se laisser écraser par un texte long. */
.notice-demo .ico { flex: 0 0 auto; }
.ba__tag {
  position: absolute; top: .8rem; z-index: 3;
  font-family: var(--font-title); font-weight: 700; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase;
  padding: .25rem .6rem; border-radius: 6px; color: var(--white);
  background: color-mix(in srgb, var(--navy) 70%, transparent); backdrop-filter: blur(2px);
}
.ba__tag--before { left: .8rem; }
.ba__tag--after { right: .8rem; }
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; background: var(--paper); z-index: 3; translate: -50% 0; pointer-events: none; box-shadow: 0 0 0 1px rgba(15,30,53,.25); }
.ba__handle::after {
  content: ""; position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: 40px; height: 40px; border-radius: 50%; background: var(--paper);
  box-shadow: var(--shadow), inset 0 0 0 2px var(--gold);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='%230A2540' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 7-4 5 4 5M15 7l4 5-4 5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 4; }
.ba__range:focus-visible + .ba__handle::after { outline: 3px solid var(--gold); outline-offset: 3px; }

/* =========================================================
   Page avis
   ========================================================= */
.avis-summary {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  background: linear-gradient(155deg, var(--navy), var(--navy-2)); color: var(--paper);
  border-radius: var(--radius); padding: clamp(1.6rem, 4vw, 2.6rem); box-shadow: var(--shadow);
}
.avis-score { text-align: center; }
.avis-score__num { font-family: var(--font-title); font-weight: 800; font-size: clamp(3rem, 8vw, 4.5rem); line-height: 1; color: var(--white); font-variant-numeric: tabular-nums; }
.avis-score__stars { color: var(--gold-mid); font-size: 1.4rem; letter-spacing: .1em; margin: .3rem 0; }
.avis-score__count { color: color-mix(in srgb, var(--paper) 82%, transparent); font-size: .95rem; }
.avis-bars { display: grid; gap: .5rem; }
.avis-bar { display: grid; grid-template-columns: 3.2rem 1fr 2.6rem; gap: .8rem; align-items: center; font-size: .92rem; color: color-mix(in srgb, var(--paper) 88%, transparent); }
.avis-bar__label { display: inline-flex; align-items: center; gap: .25rem; }
/* Étoiles sur fond marine : le doré CTA y est réservé au décor → doré moyen */
.avis-bar__label .star { color: var(--gold-hi); }
.avis-bar__track { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--paper) 16%, transparent); overflow: hidden; }
.avis-bar__fill { height: 100%; border-radius: 999px; background: var(--gold); }
.avis-bar__val { text-align: right; font-variant-numeric: tabular-nums; }

.avis-cta { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; justify-content: space-between; margin-top: 2.5rem; padding: 1.5rem 1.6rem; background: var(--tint); border: 1px solid var(--line); border-radius: var(--radius); }
.avis-cta p { font-family: var(--font-title); font-weight: 600; font-size: 1.15rem; color: var(--navy); }

@media (max-width: 620px) {
  .avis-summary { grid-template-columns: 1fr; text-align: center; }
  .avis-bar { grid-template-columns: 3rem 1fr 2.4rem; }
  .avis-cta { flex-direction: column; align-items: stretch; text-align: center; }
}

/* =========================================================
   Page à propos
   ========================================================= */
.about { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.about__portrait {
  aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow);
  display: grid; place-items: center; text-align: center;
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--gold) 8%, transparent) 0 16px, transparent 16px 32px),
    linear-gradient(160deg, var(--navy-2), var(--navy));
  color: color-mix(in srgb, var(--paper) 78%, transparent);
}
.about__portrait .ico { width: 64px; height: 64px; opacity: .8; margin: 0 auto .5rem; }
.about__portrait .ba__cap { font-size: .88rem; }
.about__lead { font-size: 1.18rem; color: var(--navy); font-weight: 500; margin-bottom: 1.1rem; }
.about p + p { margin-top: 1rem; }
.about__sign {
  margin-top: 1.4rem; font-family: var(--font-title); font-weight: 700; font-size: 1.3rem; color: var(--navy);
  display: flex; align-items: center; gap: .6rem;
}
.about__sign::before { content: ""; width: 30px; height: 2px; background: var(--gold-cta); }
@media (max-width: 760px) { .about { grid-template-columns: 1fr; } .about__portrait { max-width: 320px; } }

/* =========================================================
   Page mentions légales (texte légal)
   ========================================================= */
.legal { max-width: 760px; }
.legal h2 {
  font-family: var(--font-title); font-weight: 700; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem);
  color: var(--navy); margin: 2.2rem 0 .7rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
}
.legal h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
/* `:not(.notice-demo)` : sans lui, `.legal p` (0-1-1) écrase la couleur de
   `.notice-demo` (0-1-0) et le bandeau de démonstration s'affichait ici en
   couleur de corps, alors qu'il est doré sur les trois autres pages. */
.legal p:not(.notice-demo), .legal li { color: var(--body); line-height: 1.7; }
.legal p + p { margin-top: .8rem; }
.legal ul { list-style: disc; padding-left: 1.35rem; display: grid; gap: .35rem; margin: .7rem 0; }
.legal dl { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.2rem; margin: .6rem 0; }
.legal dt { font-family: var(--font-title); font-weight: 600; color: var(--navy); }
.legal dd { margin: 0; color: var(--body); }
.legal a { color: var(--gold-ink); }
.legal .todo {
  color: var(--gold-ink); font-weight: 700;
  background: color-mix(in srgb, var(--gold-cta) 14%, transparent);
  padding: .05rem .4rem; border-radius: 5px; border: 1px dashed color-mix(in srgb, var(--gold-cta) 55%, transparent);
}
@media (max-width: 620px) { .legal dl { grid-template-columns: 1fr; gap: .1rem 0; } .legal dd { margin-bottom: .5rem; } }

/* =========================================================
   Motion v2 — révélation au défilement + survol gravé
   ---------------------------------------------------------
   L'état masqué n'est appliqué que si <html> porte .has-reveal,
   classe posée par reveal.js. Sans JS, rien ne se cache :
   le contenu reste intégralement lisible.
   ========================================================= */
.has-reveal [data-reveal] {
  opacity: 0;
  translate: 0 22px;
  transition:
    opacity .6s var(--ease-out) var(--reveal-delay, 0ms),
    translate .6s var(--ease-out) var(--reveal-delay, 0ms);
}
.has-reveal [data-reveal].is-in { opacity: 1; translate: 0 0; }

/* Titres de section : le filet doré se trace sous le titre à la révélation */
.has-reveal [data-reveal-rule]::after {
  content: ""; display: block; height: 2px; margin-top: .7rem;
  background: linear-gradient(90deg, var(--gold-cta), color-mix(in srgb, var(--gold) 30%, transparent));
  transform: scaleX(0); transform-origin: left;
  transition: transform .75s var(--ease-out) calc(var(--reveal-delay, 0ms) + 180ms);
}
.has-reveal [data-reveal-rule].is-in::after { transform: scaleX(1); }

/* -------- Cartes : survol gravé --------
   Le motif de hachures reprend le trait du logo ; il n'apparaît qu'au survol,
   en pseudo-élément, pour ne rien coûter au repos. */
.service, .symptom, .review, .projet, .aside-card, .process__step {
  position: relative; isolation: isolate;
  transition:
    transform .32s var(--ease-out),
    box-shadow .32s var(--ease-out),
    border-color .32s var(--ease-out);
}
.service::after, .symptom::after, .review::after, .projet::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none;
  background: repeating-linear-gradient(
    135deg,
    color-mix(in srgb, var(--gold) 13%, transparent) 0 2px,
    transparent 2px 7px
  );
  opacity: 0; transition: opacity .32s var(--ease-out);
}
.service:hover, .symptom:hover, .review:hover, .projet:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--gold-cta) 55%, transparent);
  box-shadow: var(--shadow-lg);
}
.service:hover::after, .symptom:hover::after,
.review:hover::after, .projet:hover::after { opacity: 1; }

/* L'icône de carte se teinte et se décale légèrement */
.service .ico, .symptom .ico { transition: color .32s var(--ease-out), translate .32s var(--ease-out); }
.service:hover .ico, .symptom:hover .ico { color: var(--gold-ink); translate: 0 -2px; }

/* Le survol clavier doit produire le même effet que la souris */
.service:focus-within, .symptom:focus-within,
.review:focus-within, .projet:focus-within {
  transform: translateY(-5px); box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--gold-cta) 55%, transparent);
}

/* -------- Titres : entrée en trois temps --------
   data-reveal-titre couvre les titres de section ET les titres de page ;
   le filet doré (data-reveal-rule, plus haut) reste réservé aux sections.
   La surtitre glisse depuis la gauche, puis le titre se dévoile par
   balayage. Enfants ciblés en descendants pour couvrir .section__head--row
   (div intermédiaire) et les deux gabarits de héro. */
.has-reveal [data-reveal-titre] .kicker,
.has-reveal [data-reveal-titre] .hero__eyebrow {
  opacity: 0; translate: -14px 0;
  transition:
    opacity .5s var(--ease-out) calc(var(--reveal-delay, 0ms) + 60ms),
    translate .5s var(--ease-out) calc(var(--reveal-delay, 0ms) + 60ms);
}
.has-reveal [data-reveal-titre].is-in .kicker,
.has-reveal [data-reveal-titre].is-in .hero__eyebrow { opacity: 1; translate: 0 0; }

.has-reveal [data-reveal-titre] h1,
.has-reveal [data-reveal-titre] h2 {
  clip-path: inset(0 100% -.25em 0);
  transition: clip-path .85s var(--ease-out) calc(var(--reveal-delay, 0ms) + 120ms);
}
.has-reveal [data-reveal-titre].is-in h1,
.has-reveal [data-reveal-titre].is-in h2 { clip-path: inset(0 0 -.25em 0); }

/* -------- Cadres des chantiers --------
   Un cadre doré se pose sur le visuel après la carte, puis s'intensifie au
   survol pendant que la photo respire. z-index 4 : au-dessus du curseur
   avant/après (z-index 3), pour que le cadre reste continu. */
.projet .ba::after {
  content: ""; position: absolute; inset: 10px; z-index: 4; pointer-events: none;
  border: 2px solid color-mix(in srgb, var(--gold-hi) 65%, transparent);
  border-radius: var(--radius-sm);
  opacity: 0; scale: 1.035;
  transition:
    opacity .55s var(--ease-out),
    scale .55s var(--ease-out),
    border-color .32s var(--ease-out);
}
.has-reveal .projet.is-in .ba::after {
  opacity: 1; scale: 1;
  transition-delay: calc(var(--reveal-delay, 0ms) + 240ms);
}
/* Sans JS, aucune animation ne se déclenche : le cadre doit être là d'emblée. */
html:not(.has-reveal) .projet .ba::after { opacity: 1; scale: 1; }

.projet:hover .ba::after,
.projet:focus-within .ba::after { border-color: var(--gold-cta); }

/* La photo respire au survol. Les deux calques bougent ensemble : le
   comparateur avant/après reste aligné. */
.ba__layer img { transition: scale .5s var(--ease-out); }
.projet:hover .ba__layer img,
.projet:focus-within .ba__layer img { scale: 1.04; }

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .stream { stroke-dashoffset: 0; }
  .drop-fall { opacity: 1; }
  /* Le contenu s'affiche d'emblée, sans déplacement ni tracé */
  .has-reveal [data-reveal] { opacity: 1 !important; translate: none !important; }
  .has-reveal [data-reveal-rule]::after { transform: scaleX(1) !important; }
  .has-reveal [data-reveal-titre] .kicker,
  .has-reveal [data-reveal-titre] .hero__eyebrow { opacity: 1 !important; translate: none !important; }
  .has-reveal [data-reveal-titre] h1,
  .has-reveal [data-reveal-titre] h2 { clip-path: none !important; }
  .projet .ba::after { opacity: 1 !important; scale: none !important; }
  .projet:hover .ba__layer img, .projet:focus-within .ba__layer img { scale: none; }
  .service:hover, .symptom:hover, .review:hover, .projet:hover { transform: none; }
}