/* =========================================================================
   Dépan Express Habitat — landing Google Ads
   Feuille de style unique, mobile-first, point de rupture unique : 760px
   ========================================================================= */

/* --- Tokens ------------------------------------------------------------ */
:root {
  --navy-deep: #16293c;
  --navy: #22405f;
  --navy-footer: #0f1e2d;
  --terracotta: #c25b54;
  --terracotta-dark: #a8483f;
  --terracotta-light: #e08a80;
  --terracotta-pale: #f4d3cf;
  --paper: #faf8f6;
  --card: #ffffff;
  --placeholder: #e7e1db;
  --ink: #1b2430;
  --text: #46525f;
  --text-soft: #5b6875;
  --text-mute: #8b939c;
  --on-dark: #f4f1ee;
  --green: #7ce0b0;
  --green-solid: #1f9d68;
  --green-text: #a8ecc9;

  --border-light: rgba(22, 41, 60, .09);
  --border-dark: rgba(244, 241, 238, .16);

  --font-display: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  --font-body: 'Barlow', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --shadow-cta: 0 14px 34px rgba(194, 91, 84, .35);
  --shadow-card: 0 18px 40px rgba(22, 41, 60, .12);
  --shadow-float: 0 18px 40px rgba(0, 0, 0, .35);
  --shadow-proof: 0 10px 30px rgba(22, 41, 60, .06);

  --container: 1180px;
  --container-narrow: 820px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

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

html {
  scroll-behavior: smooth;
  /* Neutralisé dès que le défilement par inertie prend la main : les deux
     lissages se battraient, et un scrollTo() atterrirait n'importe où. Les
     ancres restent douces, c'est l'inertie qui les anime alors. */
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 76px;
}
html.js-inertie { scroll-behavior: auto; }


body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  padding-bottom: 86px; /* barre d'action fixe mobile */
}

img { max-width: 100%; display: block; }
/* Le navigateur applique « margin: 1em 40px » aux <figure> : sans ça, la figure du
   hero perd 80px de large et 32px de haut, et ne remplit plus sa colonne. */
figure, figcaption, blockquote { margin: 0; }
/* <picture> ne doit pas créer de boîte : l'<img> se comporte comme l'enfant direct */
picture { display: contents; }
a { color: var(--terracotta); text-decoration: none; }
a:hover { color: var(--navy); }
input, textarea, select, button { font: inherit; color: inherit; }
p { text-wrap: pretty; }

:focus-visible {
  outline: 3px solid var(--terracotta-light);
  outline-offset: 3px;
  border-radius: 6px;
}

.container { max-width: var(--container); margin: 0 auto; }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; }
.section { padding: 44px 16px; }
.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: 8px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 0 0 10px 10px;
  background: var(--terracotta); color: #fff; font-weight: 600;
  transition: top .2s;
}
.skip-link:focus { top: 0; color: #fff; }

.kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--terracotta);
}
.kicker--light { color: var(--terracotta-light); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; margin: 0; }

h1 {
  font-size: clamp(38px, 11vw, 76px);
  line-height: .95;
  letter-spacing: -.015em;
  text-wrap: balance;
}
h2 {
  font-size: clamp(30px, 8.5vw, 52px);
  line-height: 1.02;
  color: var(--navy-deep);
}
.section-head { margin-bottom: 32px; }
.section-head h2 { margin-top: 18px; }
.section-head p { margin: 20px 0 0; max-width: 54ch; color: var(--text); line-height: 1.65; }
.on-dark h2, .on-dark h3 { color: var(--on-dark); }

/* --- Boutons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px; border: 0; border-radius: 14px;
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
  letter-spacing: .04em; cursor: pointer; text-align: center;
  transition: transform .25s var(--ease), background .25s, box-shadow .25s, border-color .25s;
}
.btn:active { transform: translateY(1px); }
.btn--call {
  background: var(--terracotta); color: #fff; min-height: 60px;
  font-size: clamp(20px, 5.2vw, 26px); box-shadow: var(--shadow-cta);
}
.btn--call:hover { background: var(--terracotta-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 20px 44px rgba(194, 91, 84, .45); }
.btn--navy { background: var(--navy-deep); color: var(--on-dark); font-size: 20px; border-radius: 12px; }
.btn--navy:hover { background: var(--navy); color: var(--on-dark); }
.btn--terracotta { background: var(--terracotta); color: #fff; font-size: 20px; border-radius: 12px; }
.btn--terracotta:hover { background: var(--terracotta-dark); color: #fff; }
.btn--ghost-light {
  background: transparent; border: 1px solid rgba(244, 241, 238, .35);
  color: var(--on-dark); font-family: var(--font-body); font-weight: 600;
  font-size: 17px; min-height: 56px;
}
.btn--ghost-light:hover { background: rgba(244, 241, 238, .08); border-color: var(--on-dark); color: var(--on-dark); }
.btn--dark-on-terracotta { background: var(--navy-deep); color: #fff; min-height: 60px; font-size: clamp(20px, 5.2vw, 25px); box-shadow: 0 14px 34px rgba(15, 30, 45, .28); }
.btn--dark-on-terracotta:hover { background: #0f1e2d; color: #fff; transform: translateY(-2px); }
.btn--glass {
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .55);
  color: #fff; font-family: var(--font-body); font-weight: 600; font-size: 17px; min-height: 56px;
}
.btn--glass:hover { background: rgba(255, 255, 255, .24); color: #fff; }

/* --- Header ------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(22, 41, 60, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.site-header__inner {
  max-width: var(--container); margin: 0 auto;
  padding: 10px 16px; display: flex; align-items: center; gap: 12px;
}
.site-header__logo { height: 46px; width: auto; }
.site-header__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.header-quote {
  display: none; padding: 10px 16px; border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px; color: var(--on-dark); font-weight: 600; font-size: 14px; letter-spacing: .02em;
}
.header-quote:hover { border-color: #fff; background: rgba(255, 255, 255, .08); color: var(--on-dark); }
.pill-whatsapp {
  display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px;
  border-radius: 999px; background: rgba(31, 157, 104, .18); border: 1px solid rgba(31, 157, 104, .6);
  color: var(--green-text); font-weight: 600; font-size: 14px;
}
.pill-whatsapp:hover { background: rgba(31, 157, 104, .32); color: var(--green-text); }
.pill-call {
  display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-radius: 999px;
  background: var(--terracotta); color: #fff; font-family: var(--font-display);
  font-weight: 700; font-size: clamp(16px, 4.4vw, 19px); letter-spacing: .04em; white-space: nowrap;
  animation: deh-pulse 2.6s ease-out infinite;
}
.pill-call:hover { background: var(--terracotta-dark); color: #fff; }
.dot-live {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 3px rgba(124, 224, 176, .3); flex: 0 0 auto;
}

/* --- Hero -------------------------------------------------------------- */
.hero {
  position: relative; background: var(--navy-deep); color: var(--on-dark);
  overflow: hidden; padding: 48px 16px 64px;
}
.hero__glow, .hero__glow--2 { position: absolute; pointer-events: none; }
.hero__glow {
  inset: -20% -30% auto; height: 70vh;
  background: radial-gradient(closest-side, rgba(194, 91, 84, .5), transparent 70%);
  filter: blur(30px); animation: deh-glowdrift 16s ease-in-out infinite;
}
.hero__glow--2 {
  right: -18%; bottom: -12%; width: 70vw; height: 70vw; max-width: 620px; max-height: 620px;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(52, 90, 130, .75), transparent 72%);
  filter: blur(20px); animation: deh-glowdrift 22s ease-in-out infinite reverse;
}
.hero__inner {
  position: relative; max-width: var(--container); margin: 0 auto;
  display: grid; gap: 40px; grid-template-columns: 1fr; align-items: start;
}
.hero__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.badge-rating {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px;
  background: #fff; color: var(--navy-deep); font-weight: 700; font-size: 14px;
}
.badge-rating .stars { color: var(--terracotta); letter-spacing: .1em; font-size: 12px; }
.badge-rating .muted { font-weight: 500; color: var(--text-soft); }
.badge-outline {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px;
  border: 1px solid rgba(244, 241, 238, .28); background: rgba(244, 241, 238, .06); font-size: 13px;
}
.badge-outline .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.hero h1 { margin-top: 26px; }
.hero h1 .accent { color: var(--terracotta-light); }
.hero__lead {
  margin: 24px 0 0; max-width: 48ch;
  font-size: clamp(16px, 4.4vw, 19px); line-height: 1.6; color: rgba(244, 241, 238, .82);
}
.artisan-card {
  margin-top: 20px; display: flex; align-items: center; gap: 11px; padding: 10px 12px;
  border-radius: 14px; background: rgba(244, 241, 238, .08); border: 1px solid var(--border-dark);
}
.artisan-card__img {
  flex: 0 0 50px; width: 50px; height: 50px; border-radius: 50%; object-fit: cover;
  object-position: 57% 30%; background: #2b4a6b;
}
.artisan-card__title { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: .01em; line-height: 1.15; }
.artisan-card__text { margin-top: 2px; font-size: 12.5px; color: rgba(244, 241, 238, .72); line-height: 1.4; }
.hero__ctas { margin-top: 22px; display: grid; gap: 12px; grid-template-columns: 1fr; }
.intent-cards { margin-top: 18px; display: grid; gap: 10px; }
.intent-card {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px;
  background: rgba(244, 241, 238, .06); border: 1px solid var(--border-dark); color: var(--on-dark);
  transition: background .25s, transform .25s var(--ease);
}
.intent-card:hover { background: rgba(244, 241, 238, .12); transform: translateX(3px); color: var(--on-dark); }
.intent-card:hover .intent-card__num {
  color: rgba(224, 138, 128, .17);
  transform: translateY(-50%) scale(1.07);
}
/* Le numéro d'ordre passe en filigrane derrière la carte : il chiffre encore
   l'ordre de lecture, sans disputer sa place au titre. Il se loge dans le vide
   entre la fin du texte et la flèche — le déborder à droite le faisait tronquer
   par le bord et le posait pile sous la flèche, qui devenait illisible. */
.intent-card__num {
  position: absolute; right: 44px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-display); font-weight: 700; font-size: 72px;
  line-height: 1; letter-spacing: -.04em; color: rgba(244, 241, 238, .07);
  pointer-events: none; user-select: none;
  transition: color .3s var(--ease), transform .3s var(--ease);
}
.intent-card__body { flex: 1; position: relative; }
.intent-card__body strong { font-family: var(--font-display); font-size: 20px; letter-spacing: .01em; font-weight: 700; }
.intent-card__body span { font-size: 13px; color: rgba(244, 241, 238, .7); }
.intent-card__arrow { position: relative; color: var(--terracotta-light); font-size: 20px; }
.hero__checks {
  margin-top: 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px; font-size: 14px; color: rgba(244, 241, 238, .8);
}
.hero__checks div { display: flex; gap: 9px; align-items: flex-start; }
.check { color: var(--green); font-weight: 700; }

.hero__aside { display: none; position: relative; }
.hero__figure {
  position: relative; border-radius: 22px; overflow: hidden; background: #1e3550;
  border: 1px solid rgba(244, 241, 238, .14); aspect-ratio: 4 / 5;
}
.hero__figure img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 34%; }
}
.hero__sheen {
  position: absolute; top: 0; left: 0; width: 40%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .13), transparent);
  animation: deh-sheen 5.5s ease-in-out infinite; pointer-events: none;
}
.hero__quote {
  position: absolute; inset: auto 0 0; padding: 46px 18px 18px;
  background: linear-gradient(transparent, rgba(15, 30, 45, .92));
}
.hero__quote q { font-family: var(--font-display); font-size: 24px; font-weight: 700; quotes: '«\00a0' '\00a0»'; }
.hero__quote cite { display: block; margin-top: 6px; font-size: 13px; font-style: normal; color: rgba(244, 241, 238, .72); }
.hero__floating {
  position: absolute; left: -8px; bottom: -20px; display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 14px; background: var(--paper); color: var(--navy-deep);
  box-shadow: var(--shadow-float); animation: deh-float 7s ease-in-out infinite;
}
.hero__floating .score { font-family: var(--font-display); font-size: 38px; font-weight: 700; line-height: 1; color: var(--terracotta); }
.hero__floating .meta { font-size: 12px; line-height: 1.35; }
.hero__scroll {
  position: relative; margin: 46px auto 0; width: 22px; height: 34px;
  border: 1px solid rgba(244, 241, 238, .3); border-radius: 12px;
}
.hero__scroll span {
  display: block; width: 3px; height: 8px; border-radius: 2px;
  background: rgba(244, 241, 238, .7); margin: 6px auto 0; animation: deh-bob 1.8s ease-in-out infinite;
}

/* --- Marquee ----------------------------------------------------------- */
/* Le bandeau était un aplat terracotta où le texte se coupait net contre les
   bords. Il prolonge maintenant le marine du hero, et un masque en dégradé fait
   entrer et sortir les mots en fondu — le défilement paraît continu au lieu de
   buter sur les côtés. Le filet du haut est un dégradé, pas un trait. */
.marquee {
  position: relative; background: var(--navy-footer); color: rgba(244, 241, 238, .9);
  overflow: hidden; padding: 15px 0;
}
.marquee::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(194, 91, 84, .85) 30%, rgba(194, 91, 84, .85) 70%, transparent);
}
.marquee__track {
  display: flex; width: max-content; animation: deh-marquee 46s linear infinite;
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__group { display: flex; align-items: center; gap: 40px; padding-right: 40px; }
/* Les séparateurs sont les <span>·</span> du HTML, donc les enfants de rang
   pair. On masque le caractère et on dessine un point à la place : un « · »
   de police est minuscule et se perd, un rond dessiné tient sa taille. */
.marquee__group > span:nth-child(even) {
  font-size: 0; width: 5px; height: 5px; border-radius: 50%;
  background: var(--terracotta-light); flex: none;
}
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* --- Bandeau de preuve ------------------------------------------------- */
.proof { padding: 34px 16px 8px; }
.proof__card {
  max-width: var(--container); margin: 0 auto; display: grid; gap: 18px;
  grid-template-columns: 1fr; align-items: center; padding: 20px; border-radius: 18px;
  background: var(--card); border: 1px solid var(--border-light); box-shadow: var(--shadow-proof);
}
.proof__score { display: flex; align-items: center; gap: 16px; }
.proof__score .big { font-family: var(--font-display); font-size: 62px; font-weight: 700; line-height: .9; color: var(--terracotta); }
.proof__score .stars { color: var(--terracotta); letter-spacing: .18em; font-size: 15px; }
.proof__score .count { margin-top: 4px; font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--navy-deep); line-height: 1; }
.proof__score a { font-size: 13px; text-decoration: underline; }
/* Mise en scène de la carte de preuve. L'état « éteint » n'existe que si le
   JavaScript a posé « js-prete » : sans script, ou en mouvement réduit, la
   carte s'affiche d'emblée complète. Rien ne dépend d'un observateur pour
   être lisible. */
/* La note ne compte pas : deux compteurs se suivent déjà juste en dessous.
   Elle se dévoile par le bas et se précise — un mouvement court, une seule
   fois, qui attire l'œil sans répéter le chiffre qui monte. */
.proof__card.js-prete .big {
  clip-path: inset(100% 0 0 0); filter: blur(7px); transform: translateY(10px);
  transition: clip-path .75s var(--ease), filter .6s var(--ease), transform .75s var(--ease);
}
.proof__card.js-prete.is-anime .big {
  clip-path: inset(0 0 0 0); filter: blur(0); transform: none;
}
.proof__card.js-prete .stars span {
  display: inline-block; opacity: .16; transform: scale(.6);
  transition: opacity .32s var(--ease), transform .32s var(--ease);
}
.proof__card.js-prete.is-anime .stars span { opacity: 1; transform: none; }
.proof__card.js-prete .proof__list div {
  opacity: 0; transform: translateY(6px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.proof__card.js-prete.is-anime .proof__list div { opacity: 1; transform: none; }
.proof__card.js-prete .proof__list div:nth-child(2) { transition-delay: .12s; }
.proof__card.js-prete .proof__list div:nth-child(3) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .proof__card.js-prete .big { clip-path: none; filter: none; transform: none; transition: none; }
  .proof__card.js-prete .stars span,
  .proof__card.js-prete .proof__list div { opacity: 1; transform: none; transition: none; }
}

.proof__list { display: grid; gap: 10px; }
.proof__list div { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--text); }
.check--solid { color: var(--green-solid); font-weight: 700; }

/* --- Compteurs --------------------------------------------------------- */
.counters { padding: 52px 16px; }
.counters__grid { max-width: var(--container); margin: 0 auto; display: grid; gap: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.counter {
  text-align: center; padding: 22px 10px; border-radius: 16px;
  background: var(--card); border: 1px solid rgba(22, 41, 60, .08);
}
.counter__value {
  font-family: var(--font-display); font-size: clamp(38px, 11vw, 58px);
  font-weight: 700; line-height: 1; color: var(--navy);
}
.counter__value .unit { font-size: .5em; }
.counter__label { margin-top: 6px; font-size: 13px; color: var(--text-soft); }

/* --- Sections d'intention ---------------------------------------------- */
.intent-section { padding: 44px 16px 0; }
.tri-grid { margin-top: 22px; display: grid; gap: 12px; grid-template-columns: 1fr; }
.mini-card { padding: 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--border-light); }
.mini-card strong { font-family: var(--font-display); font-size: 20px; color: var(--navy-deep); font-weight: 700; }
.mini-card p { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--text-soft); }
.intent-section .btn { margin-top: 16px; }

/* --- Tarifs ------------------------------------------------------------ */
.tarifs { padding: 52px 16px 60px; }
.tarifs__head { max-width: 40ch; }
.tarifs__head p { margin: 20px 0 0; font-size: 15px; color: var(--text-soft); }
.tarifs__paiement {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 14px !important;
  padding: 12px 14px; border-radius: 12px; background: #fff;
  border: 1px solid var(--border-light); color: var(--text) !important; font-size: 14px !important;
}
.tarifs__grid { margin-top: 28px; display: grid; gap: 12px; grid-template-columns: 1fr; }
.price-row {
  display: flex; align-items: baseline; gap: 16px; padding: 18px 20px;
  background: var(--card); border-radius: 14px; border: 1px solid var(--border-light);
}
.price-row__label { flex: 1; }
.price-row__label strong { font-weight: 600; font-size: 16px; }
.price-row__label span { display: block; font-size: 13px; color: var(--text-soft); }
.price-row__price { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--navy); white-space: nowrap; }
.price-row--invert { background: var(--navy); color: var(--on-dark); border-color: transparent; }
.price-row--invert .price-row__label span { color: rgba(244, 241, 238, .72); }
.price-row--invert .price-row__price { color: var(--on-dark); font-size: 26px; }

/* --- Avis -------------------------------------------------------------- */
.avis { padding: 60px 16px; background: var(--card); }
.avis__head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 28px; }
.avis__score { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: var(--paper); }
.avis__score .big { font-family: var(--font-display); font-size: 40px; font-weight: 700; line-height: 1; color: var(--terracotta); }
.avis__score .meta { font-size: 12px; line-height: 1.4; color: var(--text-soft); }
.avis__grid { margin-top: 26px; display: grid; gap: 14px; grid-template-columns: 1fr; }
.avis__grid blockquote {
  margin: 0; padding: 22px; border-radius: 16px; background: var(--paper);
  border: 1px solid rgba(22, 41, 60, .08);
}
.avis__grid .stars { color: var(--terracotta); font-size: 13px; letter-spacing: .2em; }
.avis__grid p { margin: 12px 0 14px; font-size: 16px; line-height: 1.65; color: var(--ink); }
.avis__grid footer { font-size: 13px; color: var(--text-soft); }

/* --- Bandeau CTA ------------------------------------------------------- */
.cta-band { position: relative; padding: 46px 16px; background: var(--terracotta); color: #fff; overflow: hidden; }
.cta-band__glow {
  position: absolute; inset: -40% -20% auto; height: 60vh; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .22), transparent 70%);
  filter: blur(30px); animation: deh-glowdrift 17s ease-in-out infinite;
}
.cta-band__inner { position: relative; max-width: 900px; margin: 0 auto; text-align: center; }
.cta-band h2 { color: #fff; font-size: clamp(30px, 8.5vw, 48px); }
.cta-band p { margin: 12px auto 0; max-width: 46ch; font-size: 16px; color: rgba(255, 255, 255, .9); }
.cta-band__buttons {
  margin: 22px auto 0; display: grid; gap: 12px; grid-template-columns: 1fr; max-width: 460px;
}
.cta-band__note { margin-top: 16px; font-size: 13px; color: rgba(255, 255, 255, .85); }

/* --- Services ---------------------------------------------------------- */
.services { padding: 60px 16px 64px; }
.services__head { max-width: 34ch; }
.services__grid { margin-top: 30px; display: grid; gap: 14px; grid-template-columns: 1fr; }
.service {
  position: relative; padding: 22px; border-radius: 18px; background: var(--card);
  border: 1px solid var(--border-light); overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;
}
.service:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: rgba(194, 91, 84, .4); }
.service__num { font-family: var(--font-mono); font-size: 12px; color: var(--terracotta); }
.service h3 { margin: 10px 0 8px; font-size: 25px; color: var(--navy-deep); }
.service p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-soft); }
.service--dark { background: var(--navy-deep); color: var(--on-dark); border-color: rgba(244, 241, 238, .12); }
.service--navy { background: var(--navy); color: var(--on-dark); border-color: rgba(244, 241, 238, .12); }
.service--dark:hover, .service--navy:hover { border-color: rgba(244, 241, 238, .3); box-shadow: 0 18px 40px rgba(22, 41, 60, .3); }
.service--dark .service__num, .service--navy .service__num { color: var(--terracotta-light); }
.service--dark h3, .service--navy h3 { color: var(--on-dark); }
.service--dark p, .service--navy p { color: rgba(244, 241, 238, .8); margin-bottom: 14px; }
.pill-cta {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border-radius: 999px; background: var(--terracotta); color: #fff; font-weight: 600; font-size: 15px;
}
.pill-cta:hover { background: var(--terracotta-dark); color: #fff; }
.pill-cta--ghost { background: transparent; border: 1px solid rgba(244, 241, 238, .4); color: var(--on-dark); }
.pill-cta--ghost:hover { background: rgba(244, 241, 238, .1); color: var(--on-dark); }

/* --- Méthode ----------------------------------------------------------- */
.method { padding: 60px 16px; background: var(--navy-deep); color: var(--on-dark); }
.method__steps { margin-top: 34px; }
.step {
  display: flex; gap: 16px; align-items: flex-start; padding-bottom: 26px;
  border-left: 1px solid rgba(244, 241, 238, .18); margin-left: 26px; padding-left: 47px;
}
.step:last-child { border-left-color: transparent; padding-bottom: 0; }
.step__num {
  flex: 0 0 auto; width: 40px; height: 40px; margin-left: -67px; border-radius: 50%;
  background: var(--terracotta); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
}
.step__num--done { background: var(--green); color: var(--navy-deep); }
.step h3 { margin: 6px 0; font-size: 24px; }
.step p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(244, 241, 238, .76); }

/* Variante claire : évite deux blocs sombres consécutifs sur les pages service. */
.method--clair { background: var(--paper); color: var(--ink); }
.method--clair .step { border-left-color: rgba(22, 41, 60, .14); }
.method--clair .step:last-child { border-left-color: transparent; }
.method--clair .step h3 { color: var(--navy-deep); }
.method--clair .step p { color: var(--text); }

/* --- Garanties --------------------------------------------------------- */
.warranties { padding: 56px 16px; background: var(--navy); color: var(--on-dark); }
.warranties__head { max-width: 42ch; }
.warranties__head h2 { font-size: clamp(30px, 8vw, 46px); }
.warranties__grid { margin-top: 26px; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.warranty { padding: 18px; border-radius: 14px; background: rgba(244, 241, 238, .07); border: 1px solid rgba(244, 241, 238, .14); }
.warranty strong { font-family: var(--font-display); font-size: 19px; letter-spacing: .02em; font-weight: 700; }
.warranty p { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: rgba(244, 241, 238, .76); }

/* --- Zone d'intervention ----------------------------------------------- */
.zone { padding: 60px 16px; }
.zone__head { max-width: 40ch; }
.zone__head p { margin: 20px 0 0; font-size: 15px; color: var(--text-soft); }
.map {
  position: relative; margin-top: 24px; border-radius: 18px; overflow: hidden;
  background: var(--placeholder); aspect-ratio: 4 / 3; border: 1px solid var(--border-light);
}
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; }
.map__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.map__address {
  position: absolute; left: 12px; top: 12px; padding: 9px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .94); color: var(--navy-deep);
  font-size: 14px; font-weight: 600; box-shadow: 0 6px 18px rgba(22, 41, 60, .18);
}
.map__open {
  position: absolute; left: 12px; bottom: 12px; min-height: 44px; padding: 0 18px;
  border: 0; border-radius: 999px; background: var(--navy-deep); color: var(--on-dark);
  font-weight: 600; font-size: 14px; cursor: pointer; box-shadow: 0 6px 18px rgba(22, 41, 60, .28);
  transition: background .25s, transform .25s var(--ease);
}
.map__open:hover { background: var(--terracotta); transform: translateY(-2px); }
.map--live .map__img, .map--live .map__address { display: none; }
.communes { margin-top: 20px; overflow: hidden; }
.communes__track { display: flex; width: max-content; gap: 10px; animation: deh-marquee 40s linear infinite; }
.communes__group { display: flex; gap: 10px; padding-right: 10px; }
.commune {
  padding: 8px 14px; border-radius: 999px; background: var(--card);
  border: 1px solid rgba(22, 41, 60, .1); font-size: 14px; white-space: nowrap;
}

/* --- Réalisations ------------------------------------------------------ */
.works { padding: 60px 16px 20px; }
.works__grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.work {
  position: relative; border-radius: 16px; overflow: hidden;
  background: var(--placeholder); aspect-ratio: 1;
  background-image: repeating-linear-gradient(135deg, rgba(22, 41, 60, .06) 0 10px, transparent 10px 20px);
}
.work--wide { grid-column: span 2; aspect-ratio: 3 / 4; }
.work img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.work__caption {
  position: absolute; inset: auto 0 0; padding: 12px;
  background: linear-gradient(transparent, rgba(22, 41, 60, .75)); color: #fff;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
}
.works__note { margin: 14px 0 0; font-family: var(--font-mono); font-size: 11px; color: var(--text-mute); }

/* --- À propos ---------------------------------------------------------- */
.about { padding: 8px 16px 60px; }
.about__inner { max-width: var(--container); margin: 0 auto; display: grid; gap: 26px; grid-template-columns: 1fr; }
.about__figure { position: relative; border-radius: 18px; overflow: hidden; background: var(--placeholder); aspect-ratio: 4 / 5; }
.about__figure img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 28%; }
.about__figure figcaption {
  position: absolute; inset: auto 0 0; padding: 40px 16px 16px;
  background: linear-gradient(transparent, rgba(15, 30, 45, .85)); color: #fff; font-size: 13px;
}
.about p { margin: 16px 0 0; font-size: 16px; line-height: 1.7; color: var(--text); }
.about__tags { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }
.tag { padding: 9px 15px; border-radius: 999px; background: var(--card); border: 1px solid rgba(22, 41, 60, .12); font-size: 14px; }
.tag--dark { background: var(--navy-deep); color: var(--on-dark); border-color: transparent; }

/* --- FAQ --------------------------------------------------------------- */
.faq { padding: 60px 16px; background: var(--card); }
.faq h2 { margin-bottom: 24px; }
.faq__list { display: grid; gap: 10px; }
.faq__item { border-radius: 14px; border: 1px solid rgba(22, 41, 60, .1); background: var(--paper); overflow: hidden; }
.faq__item summary {
  width: 100%; min-height: 60px; display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  cursor: pointer; font-family: var(--font-display); font-size: 21px; font-weight: 600;
  color: var(--navy-deep); list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: '+'; flex: 0 0 auto; font-size: 24px; color: var(--terracotta); }
.faq__item[open] summary::after { content: '−'; }
.faq__item summary span { flex: 1; }
.faq__item p { margin: 0; padding: 0 18px 18px; font-size: 15px; line-height: 1.65; color: var(--text); }

/* --- Devis ------------------------------------------------------------- */
.devis { position: relative; padding: 60px 16px 80px; background: var(--navy-deep); color: var(--on-dark); overflow: hidden; }
.devis__glow {
  position: absolute; inset: auto -20% -30%; height: 60vh; pointer-events: none;
  background: radial-gradient(closest-side, rgba(194, 91, 84, .4), transparent 70%);
  filter: blur(30px); animation: deh-glowdrift 18s ease-in-out infinite;
}
.devis__inner { position: relative; max-width: var(--container-narrow); margin: 0 auto; }
.devis__head { max-width: 34ch; }
.devis__head h2 { color: var(--on-dark); }
.devis__head p { margin: 20px 0 0; font-size: 15px; color: rgba(244, 241, 238, .8); }
.devis__head a { color: var(--terracotta-pale); text-decoration: underline; }
.devis__contact {
  margin-top: 22px; display: grid; gap: 10px; grid-template-columns: 1fr;
  font-size: 14px; color: rgba(244, 241, 238, .82);
}
.devis__contact strong {
  display: block; font-family: var(--font-display); font-size: 15px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--terracotta-light);
}
.devis__contact a { color: var(--terracotta-pale); }
/* Les deux seuls canaux qui restent, en grand. Le formulaire a été retiré le
   03/09/2026 : voir le commentaire de devis() dans build/partials.js. */
.devis__ctas { margin-top: 26px; display: grid; gap: 12px; grid-template-columns: 1fr; }
.form__legal { margin: 22px 0 0; font-size: 12px; line-height: 1.5; color: rgba(244, 241, 238, .55); }
.form__legal a { color: var(--terracotta-pale); }

/* --- Footer ------------------------------------------------------------ */
.site-footer { background: var(--navy-footer); color: rgba(244, 241, 238, .75); padding: 44px 16px 44px; }
.site-footer__inner { max-width: var(--container); margin: 0 auto; display: grid; gap: 28px; grid-template-columns: 1fr; }
.site-footer__logo { height: 58px; width: auto; }
.site-footer p { margin: 14px 0 0; font-size: 14px; line-height: 1.6; max-width: 40ch; }
.site-footer__cols { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: 14px; }
.site-footer__col { display: grid; gap: 8px; align-content: start; }
.site-footer__col strong {
  font-family: var(--font-display); font-size: 17px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--on-dark);
}
.site-footer__col a { color: rgba(244, 241, 238, .75); }
.site-footer__col a:hover { color: #fff; }
.site-footer__col--contact a { color: var(--terracotta-pale); }
.site-footer__legal {
  padding-top: 18px; border-top: 1px solid rgba(244, 241, 238, .12); font-size: 12px;
  color: rgba(244, 241, 238, .45); display: flex; flex-wrap: wrap; gap: 8px 18px;
}
.site-footer__legal a { color: rgba(244, 241, 238, .45); }
.site-footer__legal a:hover { color: rgba(244, 241, 238, .8); }

/* --- Barre d'action fixe (mobile) -------------------------------------- */
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(15, 30, 45, .94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center;
  transition: transform .3s var(--ease), opacity .3s, visibility .3s;
}
/* Masquée tant que le bouton d'appel du hero est à l'écran : sinon deux boutons
   « Appeler » terracotta se retrouvent collés l'un à l'autre. */
.action-bar.is-hidden {
  transform: translateY(120%); opacity: 0; visibility: hidden; pointer-events: none;
}
.action-bar a {
  display: flex; align-items: center; justify-content: center; min-height: 56px;
  padding: 0 18px; border-radius: 12px; font-weight: 600; font-size: 15px; text-align: center;
}
.action-bar__call { background: var(--terracotta); color: #fff; font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: .04em; }
.action-bar__call:hover { color: #fff; }
.action-bar__wa { background: var(--green-solid); color: #fff; }
.action-bar__wa:hover { color: #fff; }

/* --- Révélations au scroll --------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transition: opacity 820ms var(--ease), transform 820ms var(--ease);
}
[data-reveal='up'] { transform: translate3d(0, 42px, 0); }
[data-reveal='left'] { transform: translate3d(-42px, 0, 0); }
[data-reveal='scale'] { transform: scale(.94); }
[data-reveal].is-revealed { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

/* --- Animations -------------------------------------------------------- */
@keyframes deh-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes deh-pulse {
  0% { box-shadow: 0 0 0 0 rgba(194, 91, 84, .55); }
  70% { box-shadow: 0 0 0 18px rgba(194, 91, 84, 0); }
  100% { box-shadow: 0 0 0 0 rgba(194, 91, 84, 0); }
}
@keyframes deh-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0, -14px, 0) rotate(3deg); }
}
@keyframes deh-sheen {
  0% { transform: translate3d(-120%, 0, 0) rotate(18deg); }
  100% { transform: translate3d(320%, 0, 0) rotate(18deg); }
}
@keyframes deh-bob { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, 9px, 0); } }
@keyframes deh-glowdrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(6%, -4%, 0) scale(1.14); }
}

/* --- ≥ 760px ------------------------------------------------------------ */
@media (min-width: 760px) {
  body { padding-bottom: 0; }
  .section { padding: 60px 16px; }
  .header-quote { display: inline-flex; }
  .hero { padding: 64px 16px 80px; }
  .hero__inner { grid-template-columns: 1.05fr .95fr; }
  .hero__aside { display: block; }
  .hero__ctas { grid-template-columns: auto auto; justify-content: start; }
  .proof__card { grid-template-columns: auto 1fr; gap: 34px; padding: 24px 28px; }
  .counters__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tri-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tarifs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .avis__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cta-band__buttons { grid-template-columns: auto auto; justify-content: center; max-width: none; }
  .services__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .warranties__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .works__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .work--wide { grid-column: span 1; aspect-ratio: 1; }
  .about__inner { grid-template-columns: 1fr 1fr; align-items: center; }
  .devis__contact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .devis__ctas { grid-template-columns: auto auto; justify-content: start; }
  .site-footer { padding-bottom: 44px; }
  .site-footer__inner { grid-template-columns: 1.2fr 1fr; }
  .action-bar { display: none; }
}

/* --- Mouvement réduit --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* --- Pages légales ------------------------------------------------------ */
.legal { padding: 40px 16px 72px; }
.legal .container-narrow { max-width: 760px; }
.legal h1 { font-size: clamp(32px, 8vw, 52px); color: var(--navy-deep); }
.legal h2 { font-size: clamp(22px, 5vw, 30px); margin: 34px 0 10px; }
.legal p, .legal li { font-size: 16px; line-height: 1.7; color: var(--text); }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.legal .updated { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute); }
.legal .todo { background: #fff4e5; border: 1px solid #f0c896; border-radius: 10px; padding: 12px 14px; font-size: 14px; color: #7a5320; }
.legal .back { display: inline-flex; align-items: center; gap: 8px; margin-top: 34px; font-weight: 600; }

/* --- Assureurs ---------------------------------------------------------- */
.assureurs { padding: 8px 16px 60px; }
.assureurs__inner {
  max-width: var(--container); margin: 0 auto; padding: 26px 20px; text-align: center;
  background: var(--card); border: 1px solid var(--border-light); border-radius: 18px;
}
.assureurs__label { margin: 0 0 20px; font-size: 15px; line-height: 1.6; color: var(--text-soft); }
.assureurs__logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 26px; }
.assureurs__logos img { height: 32px; width: auto; }
.assureurs__note { margin: 20px 0 0; font-size: 13px; line-height: 1.6; color: var(--text-mute); }
@media (min-width: 760px) {
  .assureurs__inner { padding: 30px 28px; }
  .assureurs__logos { gap: 22px 40px; }
  .assureurs__logos img { height: 42px; }
}

/* --- Corps rédactionnel (bloc éditorial, présentation locale) ------------ */
.prose { max-width: 68ch; }
.prose > p { margin: 0 0 20px; font-size: 16.5px; line-height: 1.75; color: var(--text); }
.prose > p:last-child { margin-bottom: 0; }
.prose h3 { margin: 44px 0 16px; font-size: clamp(22px, 5.6vw, 28px); color: var(--navy-deep); }
.prose ul { margin: 0 0 20px; padding-left: 20px; }
.prose li { margin-bottom: 8px; font-size: 16.5px; line-height: 1.7; color: var(--text); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose--center { margin-inline: auto; }

/* --- ≥ 1400px : conteneur élargi ----------------------------------------
   Le site n'avait qu'un seul point de rupture, à 760px : au-delà, la même mise
   en page s'étirait jusqu'à 2560px avec un conteneur figé à 1180px. Le hero le
   montrait crûment — colonne de texte de 1070px de haut contre 677px à l'image.
   Élargir le conteneur donne de l'air au texte — il tient sur moins de lignes,
   donc la colonne perd ~70px de haut — et agrandit l'image d'autant : le vide
   sous la photo tombe de 37% à 18%.                                         */
@media (min-width: 1400px) {
  :root { --container: 1340px; }
  .hero { padding-top: 72px; }
  /* 3/4 au lieu de 4/5 : l'image gagne encore ~50px de haut. L'original est en
     4/5 (1000x1241), le recadrage reste sous les 7% et ne coupe rien d'utile. */
  .hero__figure { aspect-ratio: 3 / 4; }
}