/* ==========================================================================
   HP Couverture · site vitrine (couvreur-dordogne.fr)

   Registre : « atelier d'artisan » traité comme un site de studio.
   Base papier chaude (jamais 100 % sombre pour un artisan), mais vocabulaire
   premium : hero cinématique en carte incrustée, navbar pill en verre,
   typographie display à entrée mot à mot, grain argentique, marquee de
   chantiers, ombres multi-paliers sur les boutons.

   Charte partagée avec les pages de publicité : pierre blonde du Périgord,
   encre brou de noix, ocre de Sarlat. Newsreader (italiques) + Karla.
   ========================================================================== */

:root {
  /* Direction artistique de la maquette client : fond noir intégral, rouge vif
     comme unique accent, tout en sans-serif. Plus de papier, plus de serif. */
  --paper:      #0E0F12;   /* la « base » est désormais sombre */
  --paper-2:    #16181C;   /* surface de carte */
  --paper-3:    #1E2127;   /* surface haute, champs de formulaire */
  --white:      #16181C;
  --ink:        #08090B;   /* plus sombre encore : bandeaux, pied de page */
  --ink-2:      #14161A;
  --ink-soft:   #C3C8D0;   /* texte courant sur fond noir */
  --muted:      #9AA1AC;
  --on-dark:    #F1F3F6;   /* texte franc sur les surfaces noires */   /* texte secondaire : 5.9:1 sur la base */

  --zinc:       #6E7C86;
  --zinc-dark:  #2A2F36;
  --zinc-light: #AEB8C0;

  /* Rouge de la maquette, décliné par usage :
     --rouge      accent, barres, icônes           : 4.9:1 sur la base
     --rouge-btn  fond de bouton, texte blanc      : 4.6:1
     --rouge-deep identique (plus de fond clair)
     --rouge-soft texte rouge lisible sur le noir  : 6.3:1 */
  --rouge:      #E01B24;
  --rouge-btn:  #E01B24;
  --rouge-deep: #F2454C;
  --rouge-soft: #FF6B6F;

  --ardoise:    #2A2F36;
  --brique:     #B01218;
  --vert:       #3F6B52;
  --line:       rgba(255, 255, 255, .11);
  --line-soft:  rgba(255, 255, 255, .06);
  --line-light: rgba(255, 255, 255, .16);

  --serif: "Montserrat", "Helvetica Neue", Arial, sans-serif;   /* plus de serif */
  --titre: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --sans:  "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --script: "Caveat", "Segoe Script", cursive;

  --wrap: 1240px;
  --gut: clamp(18px, 4vw, 44px);
  --r-lg: 18px;
  --r-md: 12px;
  --r-sm: 8px;

  --lift: 0 1px 2px rgba(0,0,0,.5), 0 10px 30px -12px rgba(0,0,0,.8);
  --lift-soft: 0 0 0 1px rgba(255,255,255,.06), 0 8px 30px rgba(0,0,0,.5);
  --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 18px 44px -24px rgba(0,0,0,.9);
  --shadow-deep: 0 2px 6px rgba(0,0,0,.5), 0 40px 80px -40px rgba(0,0,0,1);

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.22, 1, .36, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
svg { flex: none; }
:focus-visible { outline: 2px solid var(--rouge); outline-offset: 3px; border-radius: 3px; }

.wrap { width: min(100% - 2 * var(--gut), var(--wrap)); margin-inline: auto; }
.wrap-wide { width: min(100% - 2 * var(--gut), 1520px); margin-inline: auto; }

/* grain argentique, posé sur les surfaces sombres et les photos */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .45;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ titres */

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.03em; line-height: 1.08; text-wrap: balance; }
.lead, .manifesto { text-wrap: pretty; }

.h-hero { font-size: clamp(2.7rem, 6.1vw, 5.9rem); font-weight: 800; letter-spacing: -.052em; line-height: .93; }
.h-xl { font-size: clamp(2.3rem, 5vw, 4rem); letter-spacing: -.042em; line-height: .98; }
.h-lg { font-size: clamp(1.95rem, 3.6vw, 3.15rem); letter-spacing: -.038em; line-height: 1.04; }
.h-md { font-size: clamp(1.5rem, 2.3vw, 2.1rem); letter-spacing: -.03em; }
.h-sm { font-size: clamp(1.12rem, 1.5vw, 1.3rem); letter-spacing: -.024em; }

em, .it { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.012em; }

.lead { font-size: clamp(1.06rem, 1.4vw, 1.26rem); color: var(--ink-soft); max-width: 58ch; margin: 22px 0 0; }
.lead-light { color: rgba(237,239,241,.82); }

p { margin: 0 0 1.05em; }
/* un titre ne colle jamais au paragraphe qui le suit : les intertitres n'ont
   pas de marge basse, et un <p> nu n'a pas de marge haute. */
h1 + p, h2 + p, h3 + p, h4 + p { margin-top: 20px; }
p:last-child { margin-bottom: 0; }

.kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .75rem; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 700; color: var(--rouge-deep);
}
.kicker::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .6; }
.kicker-light { color: var(--rouge-soft); }

.chapno {
  display: block; font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(2.8rem, 5vw, 4.6rem); line-height: .8;
  color: var(--rouge); margin-bottom: 18px;
}
.chapno-light { color: var(--rouge-soft); }

/* filet de faîtage : la signature graphique du site */
.roofline {
  /* un trait de faîtage, dans l'esprit du trait rouge du logo — le feston
     en dents de scie faisait décoratif là où la marque est nette */
  display: block; width: 100%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg,
    transparent 0%, var(--rouge) 14%, var(--rouge) 86%, transparent 100%);
  opacity: .55;
}

/* ------------------------------------------------------------------ boutons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px; border: 1px solid transparent; border-radius: 999px;
  font-family: var(--sans); font-size: .98rem; font-weight: 700; letter-spacing: -.012em;
  text-decoration: none; cursor: pointer;
  transition: transform .25s var(--ease), background-color .25s var(--ease),
              color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn svg { width: 18px; height: 18px; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-lg { padding: 17px 30px; font-size: 1.04rem; }
.btn-sm { padding: 11px 18px; font-size: .89rem; }
.btn-block { width: 100%; }

.btn-gold { background: var(--rouge-btn); color: #fff; box-shadow: var(--lift); }
.btn-gold:hover { background: #A81C16; }
.btn-ink { background: var(--on-dark); color: #0E0F12; box-shadow: var(--lift); }
.btn-ink:hover { background: #fff; }
.btn-cream { background: var(--paper-3); color: var(--on-dark); box-shadow: var(--lift); }
.btn-cream:hover { background: #262A31; }
.btn-line { border-color: var(--line-light); color: var(--on-dark); background: rgba(255,255,255,.06); box-shadow: var(--lift-soft); }
.btn-line:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.3); }
.btn-glass {
  color: #fff; background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.28);
  backdrop-filter: blur(14px) saturate(170%); -webkit-backdrop-filter: blur(14px) saturate(170%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.18);
}
.btn-glass:hover { background: rgba(255,255,255,.18); }

/* pastille CTA à pointe circulaire */
.btn-pill { padding: 7px 8px 7px 26px; gap: 16px; font-size: 1.02rem; }
.btn-pill .dot {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--on-dark); color: #0E0F12;
  transition: transform .35s var(--ease), background-color .3s var(--ease);
}
.btn-pill .dot svg { width: 17px; height: 17px; }
.btn-pill:hover .dot { transform: translateX(3px); }
.btn-pill.on-ink .dot { background: var(--rouge); color: #fff; }

.arrow-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; text-decoration: none; color: var(--on-dark);
  border-bottom: 1px solid var(--rouge); padding: 13px 0 8px;
}
.arrow-link svg { width: 16px; height: 16px; color: var(--rouge-deep); transition: transform .3s var(--ease); }
.arrow-link:hover svg { transform: translateX(5px); }
.arrow-link-light { color: var(--on-dark); border-color: var(--rouge-soft); }
.arrow-link-light svg { color: var(--rouge-soft); }

/* ------------------------------------------------------------------ en-tête pill */

.site-header { position: fixed; top: 14px; left: 0; right: 0; z-index: 90; pointer-events: none; }
.header-inner {
  pointer-events: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
  padding: 8px 8px 8px 20px; border-radius: 999px;
  background: rgba(14,17,20,.42);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.14), 0 16px 40px -26px rgba(0,0,0,.7);
  transition: background-color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}

.brand { display: inline-flex; align-items: center; gap: 12px; padding: 8px 0; text-decoration: none; color: #fff; transition: color .35s var(--ease); }
.brand-mark { width: 65px; height: 44px; flex: none; }
.brand-mark svg { width: 100%; height: 100%; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.1; }
.brand-txt b { font-size: 1.16rem; font-weight: 700; letter-spacing: -.03em; white-space: nowrap; }
.brand-txt span { font-size: .75rem; letter-spacing: .07em; opacity: .74; white-space: nowrap; }

.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  color: rgba(255,255,255,.82); text-decoration: none; font-size: .92rem; font-weight: 600;
  letter-spacing: -.012em; padding: 10px 14px; border-radius: 999px; white-space: nowrap;
  transition: color .3s var(--ease), background-color .3s var(--ease);
}
.nav a:hover { color: #fff; background: rgba(255,255,255,.1); }
.nav a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.13); }

.header-cta { display: flex; align-items: center; gap: 9px; }
.header-cta .btn { white-space: nowrap; }

/* état posé : la pastille passe au papier */
.site-header.is-stuck .header-inner, body.light-header .header-inner {
  background: rgba(20, 22, 26, .88);
  border-color: var(--line-light);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.08), 0 14px 34px -22px rgba(0,0,0,.9);
}
.site-header.is-stuck .brand, body.light-header .brand { color: var(--on-dark); }
.site-header.is-stuck .nav a, body.light-header .nav a { color: var(--ink-soft); }
.site-header.is-stuck .nav a:hover, body.light-header .nav a:hover { color: #fff; background: rgba(255,255,255,.1); }
.site-header.is-stuck .nav a[aria-current="page"], body.light-header .nav a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.13); }
.site-header.is-stuck .btn-glass, body.light-header .btn-glass {
  color: #fff; background: rgba(255,255,255,.1); border-color: var(--line-light); box-shadow: var(--lift-soft);
}
.site-header.is-stuck .btn-glass:hover, body.light-header .btn-glass:hover { background: rgba(255,255,255,.2); }

.nav-toggle { display: none; }

/* ------------------------------------------------------------------ hero cinématique */

.hero { padding: 10px; }
.hero-frame {
  position: relative; min-height: min(96vh, 940px);
  border-radius: var(--r-lg); overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  color: #fff; isolation: isolate; background: var(--ink);
}
.hero-frame > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center center; z-index: -2;
  transform: scale(1.05); animation: heroDrift 28s var(--ease-soft) forwards;
}
@keyframes heroDrift { to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .hero-frame > img { animation: none; transform: none; } }

/* dégradé bas + vignette : le sujet n'est jamais assombri par un voile global */
/* Le voile assombrissait le ciel sur toute sa surface : l'embrasement du
   couchant se retrouvait gris-brun. Il tient maintenant là où il sert, sous
   le logo à gauche et sous les métiers à droite, et laisse la partie haute
   garder sa couleur. */
.hero-frame::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(9,11,14,.80) 0%, rgba(9,11,14,.42) 34%,
                    rgba(9,11,14,.24) 52%, rgba(9,11,14,.74) 100%),
    linear-gradient(180deg, rgba(9,11,14,.34) 0%, rgba(9,11,14,0) 30%,
                    rgba(9,11,14,.30) 70%, rgba(9,11,14,.86) 100%);
}

.hero-in { margin-top: auto; padding: 132px 0 clamp(26px, 3vw, 44px); width: 100%; }
.hero-copy { max-width: 900px; }
.hero-tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.24);
  backdrop-filter: blur(12px) saturate(170%); -webkit-backdrop-filter: blur(12px) saturate(170%);
  padding: 9px 17px; border-radius: 999px; margin-bottom: 26px;
}
.hero-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--rouge-soft); }
.hero h1 { text-shadow: 0 2px 40px rgba(9,11,14,.4); }
.hero .lead { color: rgba(255,255,255,.88); max-width: 46ch; margin-top: 26px; text-shadow: 0 1px 24px rgba(9,11,14,.5); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; align-items: center; }

.hero-proof {
  position: relative; border-top: 1px solid rgba(255,255,255,.16);
  background: rgba(9,11,14,.34);
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
}
.hero-proof-in { display: grid; grid-template-columns: repeat(4, 1fr); }
.hero-proof-item { padding: 18px 24px 20px 24px; border-right: 1px solid rgba(255,255,255,.14); }
.hero-proof-item:first-child { padding-left: 0; }
.hero-proof-item:last-child { padding-right: 0; }
.hero-proof-item:last-child { border-right: 0; }
.hero-proof-item b { display: block; font-size: .96rem; font-weight: 700; color: #fff; letter-spacing: -.02em; }
.hero-proof-item span { display: block; font-size: .82rem; color: rgba(255,255,255,.68); margin-top: 3px; line-height: 1.4; }

/* hero des pages intérieures */
.page-hero { padding: calc(96px + clamp(34px, 5vw, 70px)) 0 clamp(30px, 4vw, 52px); position: relative; }
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(90% 130% at 12% 0%, rgba(206,43,36,.13), transparent 62%),
              linear-gradient(180deg, var(--paper-2), var(--paper) 72%);
}
.page-hero .breadcrumb { margin-bottom: 22px; }
.page-hero .lead { margin-top: 20px; }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(30px, 4vw, 64px); align-items: end; }
.page-hero-visual img { border-radius: var(--r-md); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; box-shadow: var(--shadow-card); }

.breadcrumb { font-size: .82rem; color: var(--muted); }
.breadcrumb a { text-decoration: none; border-bottom: 1px solid var(--line); }
.breadcrumb a:hover { border-color: var(--rouge); }
.breadcrumb span { margin: 0 8px; opacity: .5; }

/* ------------------------------------------------------------------ sections */

.section { padding: clamp(70px, 8.5vw, 130px) 0; }
.section-tight { padding: clamp(46px, 5vw, 76px) 0; }
.section-tint { background: var(--paper-2); }
.section-dark { background: var(--ink); color: var(--ink-soft); position: relative; overflow: hidden; }
.section-dark .lead { color: rgba(237,239,241,.78); }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(34px, 5vw, 86px); align-items: start; }
.split-55 { grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); }
.split-45 { grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr); }
.figure img { width: 100%; border-radius: var(--r-md); object-fit: cover; box-shadow: var(--shadow-card); }
.figure figcaption { margin-top: 13px; font-size: .8rem; color: var(--muted); }
.section-dark .figure figcaption { color: rgba(237,239,241,.5); }
.ratio-45 img { aspect-ratio: 4 / 5; }
.ratio-11 img { aspect-ratio: 1 / 1; }
.ratio-43 img { aspect-ratio: 4 / 3; }
.ratio-169 img { aspect-ratio: 16 / 9; }

.sec-head { max-width: 62ch; }
.sec-head .kicker { margin-bottom: 16px; }

.pull {
  margin: 36px 0 0; padding-left: 26px; border-left: 2px solid var(--rouge);
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.26rem, 2vw, 1.7rem); line-height: 1.4; color: var(--on-dark);
}
.section-dark .pull { color: var(--on-dark); border-color: var(--rouge-soft); }

/* manifeste : révélation caractère par caractère au défilement */
.manifesto {
  font-size: clamp(1.5rem, 3.2vw, 2.85rem); line-height: 1.24; letter-spacing: -.032em;
  font-weight: 500; max-width: 22ch;
}
.charwave span { transition: opacity .18s linear; }
.js .charwave span { opacity: .16; }

/* ------------------------------------------------------------------ repères chiffrés */

.facts { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.fact { padding: 30px 26px; border-right: 1px solid var(--line); }
.fact:first-child { padding-left: 0; }
.fact:last-child { padding-right: 0; }
.fact:last-child { border-right: 0; }
.fact b { display: block; font-family: var(--serif); font-size: clamp(2.1rem, 3.4vw, 3rem); font-weight: 400; letter-spacing: -.03em; line-height: 1; }
.fact span { display: block; margin-top: 11px; font-size: .92rem; color: var(--ink-soft); }

/* ------------------------------------------------------------------ prestations */

.services-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(30px, 4vw, 74px); align-items: start; }
.services-list { border-top: 1px solid var(--line); }
.service-row {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) 26px; gap: 14px; align-items: baseline;
  padding: 24px 6px 24px 0; border-bottom: 1px solid var(--line);
  text-decoration: none; position: relative; isolation: isolate;
  transition: padding-left .4s var(--ease);
}
.service-row::before {
  content: ""; position: absolute; inset: 0 -18px; border-radius: var(--r-sm);
  background: linear-gradient(90deg, rgba(206,43,36,.11), rgba(206,43,36,0) 72%);
  opacity: 0; transition: opacity .4s var(--ease); z-index: -1;
}
.service-row:hover { padding-left: 16px; }
.service-row:hover::before { opacity: 1; }
.service-row .n { font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--rouge-deep); }
.service-row h3 { font-size: clamp(1.2rem, 1.8vw, 1.55rem); font-weight: 700; letter-spacing: -.032em; }
.service-row p { margin: 7px 0 0; font-size: .95rem; color: var(--ink-soft); max-width: 52ch; }
.service-row .go { width: 24px; height: 24px; color: var(--rouge-deep); opacity: 0; transform: translateX(-8px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.service-row:hover .go { opacity: 1; transform: translateX(0); }

.services-preview { position: sticky; top: 124px; }
.services-preview .frame { position: relative; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 3 / 4; background: var(--paper-3); box-shadow: var(--shadow-deep); }
.services-preview img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.05);
  transition: opacity .45s var(--ease), transform .9s var(--ease);
}
.services-preview img.is-on { opacity: 1; transform: scale(1); }
.services-preview .cap { margin-top: 14px; font-size: .84rem; color: var(--muted); min-height: 2.6em; }

/* ------------------------------------------------------------------ marquee */

.marquee { position: relative; overflow: hidden; padding: clamp(28px, 4vw, 52px) 0; }
.marquee::before, .marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: clamp(40px, 8vw, 150px); z-index: 2; pointer-events: none; }
.marquee::before { left: 0; background: linear-gradient(90deg, var(--paper), transparent); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--paper), transparent); }
.marquee-tint::before { background: linear-gradient(90deg, var(--paper-2), transparent); }
.marquee-tint::after { background: linear-gradient(270deg, var(--paper-2), transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 52s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee figure { margin: 0 8px; position: relative; }
.marquee img { height: clamp(180px, 24vw, 320px); width: auto; border-radius: var(--r-md); object-fit: cover; box-shadow: var(--shadow-card); }
.marquee figcaption {
  position: absolute; left: 14px; bottom: 14px;
  font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; background: rgba(9,11,14,.55); border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: 6px 13px; border-radius: 999px;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ------------------------------------------------------------------ étapes */

.steps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); margin-top: 46px; }
.section-dark .steps { border-color: var(--line-light); }
.step { padding: 30px 26px 32px; border-right: 1px solid var(--line); }
.step:first-child { padding-left: 0; }
.step:last-child { padding-right: 0; }
.section-dark .step { border-color: var(--line-light); }
.step:last-child { border-right: 0; }
.step .n { font-family: var(--serif); font-style: italic; font-size: 2.2rem; line-height: 1; color: var(--rouge); margin-bottom: 16px; }
.section-dark .step .n { color: var(--rouge-soft); }
.step h3 { font-size: 1.06rem; letter-spacing: -.026em; }
.step p { margin: 9px 0 0; font-size: .94rem; color: var(--ink-soft); }
.section-dark .step p { color: rgba(237,239,241,.7); }

/* ------------------------------------------------------------------ listes */

.tick { list-style: none; margin: 0; padding: 0; }
.tick li { position: relative; padding: 11px 0 11px 27px; font-size: .97rem; color: var(--ink-soft); border-bottom: 1px solid var(--line-soft); }
.tick li:last-child { border-bottom: 0; }
.tick li::before { content: ""; position: absolute; left: 1px; top: 18px; width: 11px; height: 6px; border-left: 2px solid var(--rouge); border-bottom: 2px solid var(--rouge); transform: rotate(-45deg); }
.cols-2 { columns: 2; column-gap: 40px; }
.cols-2 li { break-inside: avoid; }

/* ------------------------------------------------------------------ comparateur */

.compare {
  position: relative; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 16 / 10;
  background: var(--ink); cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  box-shadow: var(--shadow-deep);
}
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare .after-clip { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); will-change: clip-path; }
.compare .tag {
  position: absolute; top: 16px; font-size: .7rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; padding: 7px 13px; border-radius: 999px; color: #fff;
  background: rgba(9,11,14,.6); border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.compare .tag-before { right: 16px; }
.compare .tag-after { left: 16px; background: rgba(74,106,72,.82); }
.compare .handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: rgba(255,255,255,.95); transform: translateX(-1px); pointer-events: none; }
.compare .handle::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 50px; height: 50px;
  transform: translate(-50%, -50%); border-radius: 50%; background: var(--white);
  box-shadow: 0 8px 26px rgba(15,12,10,.45), inset 0 2px 6px rgba(255,255,255,.6);
}
.compare .handle::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 11px; z-index: 2;
  transform: translate(-50%, -50%); background: var(--ink);
  clip-path: polygon(0 50%, 34% 0, 34% 100%, 66% 0, 66% 100%, 100% 50%);
}
.ba-note { margin: 15px 0 0; font-size: .82rem; color: var(--muted); }

/* deux états côte à côte : on montre un toit négligé et un toit entretenu,
   sans faire croire que c'est le même. Le comparateur à curseur ci-dessus
   reviendra quand le client fournira de vraies paires avant/après. */
.states { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.states figure { margin: 0; }
.states img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); box-shadow: var(--shadow-card); }
.states figcaption { margin-top: 12px; font-size: .92rem; color: var(--ink-soft); display: flex; gap: 9px; align-items: baseline; }
.states figcaption i { width: 9px; height: 9px; border-radius: 50%; background: var(--brique); flex: none; transform: translateY(-1px); }
.states figure:last-child figcaption i { background: var(--vert); }
@media (max-width: 720px) { .states { grid-template-columns: 1fr; gap: 22px; } }

/* ------------------------------------------------------------------ zones */

/* align-items: start — sinon les quatre colonnes sont étirées à la hauteur de
   la plus longue et les filets verticaux courent 230 px sous le dernier nom
   des colonnes courtes. */
.zone-pays { display: grid; grid-template-columns: repeat(4, 1fr); align-items: start;
             border-top: 1px solid var(--line); margin-top: 44px; }
.pays { padding: 28px 26px 30px; border-right: 1px solid var(--line); }
.pays:first-child { padding-left: 0; }
.pays:last-child { padding-right: 0; }
.pays:last-child { border-right: 0; }
.pays h3 { font-size: 1.06rem; letter-spacing: -.026em; }
.pays .col { font-size: .93rem; color: var(--ink-soft); margin-top: 14px; }
.pays .col a { display: block; padding: 10px 0; text-decoration: none; color: var(--on-dark); font-weight: 600; border-bottom: 1px solid var(--line-soft); transition: color .25s var(--ease), padding-left .25s var(--ease); }
.pays .col a:hover { color: var(--rouge-deep); padding-left: 5px; }
.pays .col span { display: block; padding: 10px 0; color: var(--muted); border-bottom: 1px solid var(--line-soft); }

/* la liste exhaustive fait 17 écrans de haut sur un téléphone : on la replie,
   le contenu reste dans la page pour ceux qui cherchent leur commune */
.liste-communes { margin-top: 30px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.liste-communes > summary {
  list-style: none; cursor: pointer; padding: 20px 46px 20px 0; position: relative;
  font-size: 1.02rem; font-weight: 700; letter-spacing: -.02em; transition: color .25s var(--ease);
}
.liste-communes > summary::-webkit-details-marker { display: none; }
.liste-communes > summary:hover { color: var(--rouge-deep); }
.liste-communes > summary::after, .liste-communes > summary::before {
  content: ""; position: absolute; right: 8px; top: 50%; background: var(--rouge);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.liste-communes > summary::after { width: 15px; height: 2px; transform: translateY(-50%); }
.liste-communes > summary::before { width: 2px; height: 15px; transform: translate(-6.5px, -50%); }
.liste-communes[open] > summary::before { opacity: 0; transform: translate(-6.5px, -50%) rotate(90deg); }
.liste-communes .commune-index { margin-top: 6px; padding-bottom: 26px; }

.commune-index { columns: 4; column-gap: 34px; font-size: .92rem; margin-top: 32px; }
.commune-index a, .commune-index span { display: block; padding: 10px 0; border-bottom: 1px solid var(--line-soft); break-inside: avoid; text-decoration: none; color: var(--ink-soft); }
.commune-index a { color: var(--on-dark); font-weight: 600; transition: color .25s var(--ease), padding-left .25s var(--ease); }
.commune-index a:hover { color: var(--rouge-deep); padding-left: 5px; }

/* ------------------------------------------------------------------ galerie */

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
.gallery figure { margin: 0; overflow: hidden; border-radius: var(--r-md); }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); box-shadow: var(--shadow-card); transition: transform .7s var(--ease); }
.gallery figure:hover img { transform: scale(1.03); }
.gallery figcaption { margin-top: 12px; font-size: .87rem; color: var(--ink-soft); }

/* ------------------------------------------------------------------ FAQ */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 48px 22px 0; font-size: 1.06rem; font-weight: 600; letter-spacing: -.022em; position: relative; transition: color .25s var(--ease); }
.faq summary:hover { color: var(--rouge-deep); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after, .faq summary::before { content: ""; position: absolute; right: 8px; top: 50%; background: var(--rouge); transition: transform .3s var(--ease), opacity .3s var(--ease); }
.faq summary::after { width: 15px; height: 2px; transform: translateY(-50%); }
.faq summary::before { width: 2px; height: 15px; transform: translate(-6.5px, -50%); }
.faq details[open] summary::before { opacity: 0; transform: translate(-6.5px, -50%) rotate(90deg); }
.faq .ans { padding: 0 44px 24px 0; font-size: .98rem; color: var(--ink-soft); }

/* ------------------------------------------------------------------ formulaire */

.form-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-deep); padding: 32px; position: relative; overflow: hidden;
  color: var(--ink-soft);
}
.form-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--rouge), var(--rouge-soft) 55%, var(--rouge-deep)); }
.form-card h2, .form-card h3 { font-size: 1.44rem; letter-spacing: -.034em; }
.form-card > p { margin: 10px 0 22px; font-size: .93rem; color: var(--muted); }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: .83rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 7px; }
.req { color: var(--rouge-deep); }
.opt { color: var(--muted); font-weight: 400; }
input[type="text"], input[type="tel"], input[type="email"], select, textarea {
  width: 100%; font-family: var(--sans); font-size: 1rem; color: var(--on-dark);
  background: var(--paper-3); border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px;
  appearance: none; -webkit-appearance: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
input::placeholder, textarea::placeholder { color: #8A929C; }
input:focus, select:focus, textarea:focus { outline: none; background: var(--white); border-color: var(--rouge); box-shadow: 0 0 0 3px rgba(206,43,36,.16); }
textarea { resize: vertical; min-height: 80px; }
.select-wrap { position: relative; }
.select-wrap::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
select { padding-right: 38px; }
.consent { display: flex; gap: 11px; align-items: flex-start; margin: 16px 0 18px; font-size: .82rem; color: var(--muted); line-height: 1.45; }
.consent input { margin: 2px 0 0; accent-color: var(--rouge); width: 16px; height: 16px; flex: none; }
.form-note { margin: 14px 0 0; text-align: center; font-size: .8rem; color: var(--muted); }
.form-success, .form-error { display: none; margin-top: 15px; padding: 14px 16px; border-radius: 12px; font-size: .92rem; }
.form-success { background: rgba(74,106,72,.1); border: 1px solid rgba(74,106,72,.32); color: #33502F; }
.form-error { background: rgba(163,63,34,.09); border: 1px solid rgba(163,63,34,.3); color: #8B3319; }
form.is-sent .field, form.is-sent .consent, form.is-sent button { display: none; }

/* ------------------------------------------------------------------ contact */

.contact-lines { border-top: 1px solid var(--line); margin-top: 30px; }
.section-dark .contact-lines { border-color: var(--line-light); }
.cl { display: flex; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); text-decoration: none; transition: padding-left .3s var(--ease); }
.section-dark .cl { border-color: var(--line-light); }
.cl:hover { padding-left: 6px; }
.cl .ic { width: 22px; height: 22px; color: var(--rouge-deep); flex: none; }
.section-dark .cl .ic { color: var(--rouge-soft); }
.cl .ic svg { width: 100%; height: 100%; }
.cl .l { display: block; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.section-dark .cl .l { color: rgba(237,239,241,.55); }
.cl .v { display: block; font-size: 1.16rem; font-weight: 700; letter-spacing: -.028em; }
.cl .v.sm { font-size: .98rem; font-weight: 500; letter-spacing: -.012em; }

/* ------------------------------------------------------------------ maillage */

.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.related a {
  padding: 26px; border-radius: var(--r-md); text-decoration: none; display: block;
  background: var(--white); border: 1px solid var(--line); box-shadow: var(--lift-soft);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.related a:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.related b { display: block; font-size: 1.06rem; letter-spacing: -.026em; }
.related span { display: block; margin-top: 7px; font-size: .9rem; color: var(--ink-soft); }

/* ------------------------------------------------------------------ pied de page */

.site-footer { background: var(--ink); color: rgba(237,239,241,.72); padding: clamp(56px, 6vw, 88px) 0 34px; font-size: .93rem; position: relative; overflow: hidden; }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 38px; padding-bottom: 42px; border-bottom: 1px solid var(--line-light); }
.footer-top h3 { font-size: .79rem; letter-spacing: .18em; text-transform: uppercase; color: var(--rouge-soft); margin-bottom: 18px; font-weight: 700; }
.footer-top ul { list-style: none; margin: 0; padding: 0; }
.footer-top li { margin-bottom: 2px; }
.footer-top a { display: inline-block; padding: 10px 0; text-decoration: none; transition: color .25s var(--ease); }
.footer-top a:hover { color: #fff; }
.footer-brand b { display: block; color: var(--on-dark); font-size: 1.2rem; letter-spacing: -.03em; margin-bottom: 14px; }
.footer-brand p { max-width: 42ch; line-height: 1.6; }
.footer-legal { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 9px 30px; font-size: .8rem; color: rgba(237,239,241,.5); }
.footer-legal a { color: rgba(237,239,241,.62); text-decoration: none; border-bottom: 1px solid rgba(237,239,241,.2); }

/* ------------------------------------------------------------------ barre d'appel mobile */

.callbar { display: none; }

/* ------------------------------------------------------------------ animations d'entrée */

.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

.wpu span { display: inline-block; }
.js .wpu span { opacity: 0; transform: translateY(28px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i) * 45ms); }
.js .wpu.is-in span, .js .is-in .wpu span { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .wpu span { opacity: 1; transform: none; transition: none; }
  .js .charwave span { opacity: 1; }
  .service-row, .btn, .arrow-link svg, .related a, .cl, .gallery img { transition: none; }
}

/* ------------------------------------------------------------------ responsive */

@media (max-width: 1080px) {
  .split, .split-55, .split-45, .services-grid, .page-hero-grid { grid-template-columns: 1fr; }
  .services-preview { display: none; }
  .facts, .steps, .hero-proof-in { grid-template-columns: repeat(2, 1fr); }
  .fact:nth-child(2n), .step:nth-child(2n), .hero-proof-item:nth-child(2n) { border-right: 0; padding-right: 0; }
  .fact:nth-child(2n+1), .step:nth-child(2n+1), .hero-proof-item:nth-child(2n+1) { padding-left: 0; }
  .pays:nth-child(2n+1) { padding-left: 0; }
  .pays:nth-child(2n) { padding-right: 0; }
  .fact:nth-child(-n+2), .step:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .section-dark .step:nth-child(-n+2) { border-bottom-color: var(--line-light); }
  .zone-pays { grid-template-columns: repeat(2, 1fr); }
  .pays:nth-child(2n) { border-right: 0; }
  .pays:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .commune-index { columns: 3; }
  /* une fois les colonnes empilées, un portrait 4/5 pleine largeur devient un mur
     d'image : on le remet en paysage */
  .ratio-45 img, .ratio-11 img { aspect-ratio: 16 / 10; }
  .page-hero-visual img { aspect-ratio: 16 / 9; }
  .related { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .manifesto { max-width: none; }
}

/* la pastille d'en-tête doit tenir sur une seule ligne : en dessous de 1180 px
   on retire l'accroche de marque puis le bouton téléphone (la barre d'appel
   mobile et le pied de page les portent toujours) */
@media (max-width: 1180px) {
  .brand-txt span { display: none; }
  .header-cta .btn-glass { display: none; }
  .nav a { padding: 9px 11px; font-size: .89rem; }
}

@media (max-width: 900px) {
  .site-header { top: 10px; }
  .header-inner { position: relative; padding: 7px 7px 7px 16px; }
  .nav {
    display: none; position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    /* fond plein : en translucide, le titre du hero transparaissait derrière les liens */
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
    padding: 10px; box-shadow: var(--shadow-deep);
  }
  .nav.is-open { display: flex; }
  .nav a, .site-header.is-stuck .nav a, body.light-header .nav a { color: var(--on-dark); padding: 14px 16px; font-size: 1.02rem; border-radius: 12px; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 999px;
    border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.1); color: #fff; cursor: pointer;
  }
  .site-header.is-stuck .nav-toggle, body.light-header .nav-toggle { color: var(--on-dark); border-color: var(--line-light); background: rgba(255,255,255,.08); }
  .nav-toggle svg { width: 20px; height: 20px; }
  .header-cta .btn-glass { display: none; }
  .header-cta .btn { white-space: nowrap; }
}

@media (max-width: 560px) { .brand-txt span { display: none; } }

/* très petits écrans : la pastille ne peut plus porter marque + bouton + menu.
   Le bouton devis disparaît de l'en-tête, la barre d'appel fixe en bas le porte
   déjà en permanence. */
@media (max-width: 365px) {
  .header-cta .btn-gold { display: none; }
  .header-inner { padding: 6px 8px 6px 12px; }
}

@media (max-width: 430px) {
  .header-inner { padding: 6px 6px 6px 12px; gap: 10px; }
  .brand { gap: 9px; }
  .brand-mark { width: 53px; height: 36px; }
  .brand-txt b { font-size: 1.05rem; }
  .header-cta { gap: 7px; }
  .header-cta .btn-gold { padding: 10px 14px; font-size: .85rem; }
  .nav-toggle { width: 44px; height: 44px; }
}


@media (max-width: 720px) {
  body { font-size: 16px; }
  main { padding-bottom: 78px; }
  .hero { padding: 6px; }
  .hero-frame { min-height: 88vh; border-radius: 22px; }
  /* Sur téléphone la hauteur de l'image est affichée en entier : le ciel pâle
     tombe toujours derrière le logo, dont le toit argenté s'y noyait et que la
     ligne de faîte traversait. On décale le cadrage vers la partie sombre de
     la photo et on pose un voile sur la bande du logo. */
  .hero-frame > img, .hero-video { object-position: 80% center; }
  .hero-frame::before {
    background:
      linear-gradient(180deg, rgba(9,11,14,.72) 0%, rgba(9,11,14,.66) 30%,
                      rgba(9,11,14,.30) 52%, rgba(9,11,14,.46) 70%,
                      rgba(9,11,14,.93) 100%);
  }
  .hero-in { padding-top: 110px; }
  .h-hero { font-size: clamp(2.1rem, 9.4vw, 3.1rem); letter-spacing: -.045em; }
  .hero-copy { max-width: 100%; }
  .hero-proof-in { grid-template-columns: 1fr 1fr; }
  .hero-proof-item { padding: 14px 14px 14px 0; }
  .hero-proof-item:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.14); }
  .hero-proof-item span { font-size: .76rem; }
  .facts, .steps { grid-template-columns: 1fr; }
  .fact, .step { border-right: 0; padding-left: 0; padding-right: 0; border-bottom: 1px solid var(--line); }
  .hero-proof-item { padding-left: 0; }
  .hero-proof-item:nth-child(2n) { padding-left: 14px; }
  .section-dark .step { border-bottom-color: var(--line-light); }
  .zone-pays { grid-template-columns: 1fr; }
  .pays { border-right: 0; padding-left: 0; padding-right: 0; border-bottom: 1px solid var(--line); }
  .commune-index { columns: 2; column-gap: 20px; }
  .cols-2 { columns: 1; }
  .gallery { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 28px; }
  .compare { aspect-ratio: 4 / 3; }
  .service-row { grid-template-columns: 42px minmax(0, 1fr); }
  .service-row .go { display: none; }
  .hero-cta .btn { flex: 1 1 100%; }
  .btn-pill { justify-content: space-between; }
  .form-card { padding: 24px; }

  .callbar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(237,239,241,.94);
    backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-top: 1px solid var(--line);
  }
  .callbar a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 10px; border-radius: 999px; font-weight: 700; font-size: .98rem; text-decoration: none; }
  .callbar svg { width: 18px; height: 18px; }
  .callbar .call { background: var(--on-dark); color: #0E0F12; box-shadow: var(--lift); }
  .callbar .quote { background: var(--rouge-btn); color: #fff; box-shadow: var(--lift); }
}

@media print { .site-header, .callbar, .marquee, .hero-proof { display: none; } }

/* ---- signe de marque : encre pilotée par currentColor, accent propre ---- */
.brand { --mark-accent: #E8574E; }              /* en-tête transparent, sur photo */
.brand-mark .mi { stroke: currentColor; fill: none; stroke-linejoin: miter; }
.brand-mark .mif { fill: currentColor; }
.brand-mark .ma { stroke: var(--mark-accent); fill: none; stroke-linejoin: miter; }
.brand-mark .maf { fill: var(--mark-accent); }
.brand-txt b i { font-style: normal; color: var(--mark-accent); }
.site-header.is-stuck .brand, body.light-header .brand { --mark-accent: #F2454C; }
.footer-brand b i { font-style: normal; color: #E8574E; }
.footer-brand b { font-family: Roboto, "Helvetica Neue", Arial, sans-serif; }

/* ---- logo ToitSûr & CO : mot-marque en Roboto, comme le fichier d'origine ---- */
.brand-txt b { font-family: Roboto, "Helvetica Neue", Arial, sans-serif; letter-spacing: -.012em; }
.brand-txt b i { font-style: normal; color: var(--mark-accent); }
.brand-txt > span, .brand-txt .bd { font-family: Roboto, "Helvetica Neue", Arial, sans-serif; }

/* ==================================================================
   PASSE MOBILE — 95 % du trafic est sur téléphone : ce qui suit n'est
   pas une adaptation du grand écran, c'est la version de référence.
   ================================================================== */

/* ---- 1. La vignette n'existe que sur mobile ---- */
.service-row .thumb { display: none; }
.carousel-bar { display: none; }   /* n'existe qu'en carrousel, sinon elle occupe une cellule de la grille */

/* ---- 2. Retour tactile : répondre au doigt, pas au relâchement ---- */
@media (hover: none) {
  a, button, summary, label { -webkit-tap-highlight-color: transparent; }
  .btn, .callbar a, .service-row, .cl, .pays .col a, .nav a,
  .nav-toggle, .faq details > summary, .liste-communes > summary, .arrow-link {
    touch-action: manipulation;
  }
  .btn, .callbar a, .service-row, .cl, .pays .col a, .nav a, .nav-toggle {
    transition: transform .13s cubic-bezier(.32,.72,0,1), background-color .2s, color .2s;
  }
  .btn:active, .callbar a:active, .nav-toggle:active { transform: scale(.965); }
  .service-row:active, .cl:active { transform: scale(.985); }
  .pays .col a:active, .nav a:active { transform: scale(.96); }
  /* le survol n'existe pas : on annule les décalages prévus pour la souris */
  .service-row:hover { padding-left: 0; }
  .service-row:hover::before { opacity: 0; }
  .pays .col a:hover { padding-left: 0; }
  .cl:hover { padding-left: 0; }
}

/* ---- 3. Menu : une feuille qui naît du bouton, avec voile et verrou de défilement ---- */
@media (max-width: 900px) {
  /* fermé : opacité nulle ET pointer-events none. Transitionner `visibility`
     laissait un menu invisible capter les taps en haut de page. L'inertie pour
     le clavier et les lecteurs d'écran est posée en JS (`inert`). */
  .nav {
    display: flex; opacity: 0; pointer-events: none; z-index: 120;
    transform: translateY(-10px) scale(.97); transform-origin: top right;
    padding: 12px; gap: 2px;
    transition: transform .34s cubic-bezier(.32,.72,0,1), opacity .22s ease-out;
  }
  .nav.is-open { opacity: 1; pointer-events: auto; transform: none; }
  .nav a {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 54px; padding: 14px 16px; font-size: 1.04rem; font-weight: 600;
  }
  .nav a[aria-current="page"] { background: rgba(14,17,20,.06); }
  .nav a::after {
    content: ""; width: 7px; height: 7px; margin-right: 4px;
    border-right: 2px solid var(--rouge-deep); border-top: 2px solid var(--rouge-deep);
    transform: rotate(45deg); opacity: .55;
  }
  .nav-scrim {
    position: fixed; inset: 0; z-index: 110;
    background: rgba(9,11,14,.42);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; pointer-events: none; transition: opacity .28s ease-out;
  }
  .nav-scrim.is-on { opacity: 1; pointer-events: auto; }
  /* l'en-tête vit à z-index 90 : sans ce relèvement, le voile (110) passe
     par-dessus le menu et avale les taps */
  body.nav-lock .site-header { z-index: 130; }
  .nav-lock { overflow: hidden; }
}
.nav-scrim[hidden] { display: none; }

@media (max-width: 720px) {

  /* ---- 4. Le premier écran tient dans l'écran ----
     Le hero faisait 88vh et la barre d'appel fixe recouvrait sa bande de
     preuves : « sous 24 h » et « bâchage : 8 h – 19 h 30 » étaient coupés. */
  main { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  .hero-frame { min-height: calc(100vh - 104px); }
  @supports (height: 100dvh) { .hero-frame { min-height: calc(100dvh - 104px); } }
  .hero-in { padding-top: 96px; padding-bottom: 0; }
  .hero .lead { margin-top: 18px; }
  .hero-cta { margin-top: 24px; gap: 10px; }
  .hero-proof-item { padding: 13px 14px 13px 0; }

  /* une seule action principale : le bouton téléphone passe en second plan,
     « Appeler » est de toute façon fixé en bas de l'écran */
  .hero-cta .btn-glass {
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.34);
    color: rgba(255,255,255,.94); box-shadow: none; font-weight: 600;
  }
  /* le bouton devis de l'en-tête doublait celui de la barre d'appel,
     visible en permanence : un seul suffit */
  .header-cta .btn-gold { display: none; }
  .header-inner { padding: 6px 6px 6px 12px; }

  /* ---- 5. Prestations : le carrousel remplace le survol ----
     Sur grand écran, survoler une ligne change une grande image. Sur mobile il
     ne restait que 2,5 écrans de texte gris : les cartes portent la photo et se
     font défiler au pouce. */
  .services-grid > .services-list {
    display: flex; gap: 14px; border-top: 0;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-left: var(--gut, 20px);
    padding: 2px var(--gut, 20px) 6px; margin: 0 calc(-1 * var(--gut, 20px));
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .services-grid > .services-list::-webkit-scrollbar { display: none; }
  .services-grid > .services-list .service-row {
    flex: 0 0 76%; scroll-snap-align: start;
    display: block; padding: 0 0 18px; border: 1px solid var(--line); border-bottom: 1px solid var(--line);
    border-radius: 20px; overflow: hidden; background: var(--paper-2); box-shadow: var(--shadow-card);
  }
  .services-grid > .services-list .service-row::before { content: none; }
  .services-grid > .services-list .thumb { display: block; }
  .services-grid > .services-list .thumb img {
    display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  }
  .services-grid > .services-list .n {
    display: block; padding: 15px 18px 0; font-size: 1.05rem;
  }
  .services-grid > .services-list .service-row > span:not(.thumb):not(.n):not(.go) { display: block; padding: 2px 18px 0; }
  .services-grid > .services-list h3 { font-size: 1.18rem; }
  .services-grid > .services-list p { margin-top: 6px; font-size: .92rem; }
  /* la barre d'avancement dit qu'il y a autre chose à droite */
  .carousel-bar { display: block; height: 3px; border-radius: 3px; background: var(--line); margin: 16px 0 0; overflow: hidden; }
  .carousel-bar i { display: block; height: 100%; border-radius: 3px; background: var(--rouge-btn); transform-origin: left; }

  /* ---- 6. Chiffres et étapes : le nombre à gauche, pas au-dessus ----
     Empilés, les quatre chiffres mangeaient un écran entier pour quatre lignes. */
  .fact {
    display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px;
    align-items: baseline; padding: 17px 0;
  }
  .fact b { font-size: 2.1rem; }
  .fact span { margin-top: 0; }
  /* l'étape a trois enfants (numéro, titre, texte) : sans placement explicite,
     le texte retombe dans la colonne du numéro, à un mot par ligne */
  .step {
    display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px;
    align-items: start; padding: 18px 0;
  }
  .step .n { grid-row: 1 / span 2; font-size: 1.55rem; }
  .step h3 { grid-column: 2; }
  .step p { grid-column: 2; margin-top: 6px; }

  /* ---- 7. Communes : des pastilles qui défilent, pas un annuaire vertical ----
     Quatre Périgords en liste faisaient trois écrans de noms. */
  .pays { padding: 22px 0 20px; }
  /* Les pastilles reviennent à la ligne au lieu de défiler : la rangée
     cachait de 836 à 1 419 px sans le moindre indice, et se coupait net au
     bord de l'écran — ce qui se lit comme un défaut, pas comme « faites
     défiler ». Neuf à quatorze communes tiennent en deux ou trois lignes. */
  .pays .col {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 14px 0 0; padding: 0; overflow: visible;
  }
  .pays .col a, .pays .col span {
    flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px;
    padding: 0 16px; border: 1px solid var(--line); border-radius: 999px;
    white-space: nowrap; font-size: .92rem; background: rgba(255,255,255,.05);
  }
  .pays .col span { color: var(--muted); background: transparent; }

  /* ---- 8. Confort de lecture et de saisie ---- */
  .form-card input, .form-card select, .form-card textarea { font-size: 16px; }  /* pas de zoom iOS */
  .callbar a { min-height: 50px; }
  .gallery img { border-radius: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav { transition: opacity .18s ease; transform: none !important; }
  .nav-scrim { transition: none; }
  .btn:active, .callbar a:active, .service-row:active, .cl:active,
  .pays .col a:active, .nav a:active, .nav-toggle:active { transform: none; }
  .carousel-bar i { transition: none; }
}

/* ---- 9. Corrections d'audit mobile ---- */
/* Un conteneur à défilement horizontal dans une cellule de grille fait gonfler
   la piste : `min-width: auto` la dimensionne sur le max-content de l'enfant.
   Sans ça, la page mesurait 1772 px de large pour un écran de 390. */
.pays, .services-grid > .services-list, .zone-pays > * { min-width: 0; }

@media (max-width: 720px) {
  /* la case à cocher faisait 16 px : on donne à la ligne entière la cible */
  .consent { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 6px 0; cursor: pointer; }
  .consent input[type="checkbox"] { width: 22px; height: 22px; flex: none; margin-top: 1px; }
  /* liens légaux du pied de page : cliquables au pouce */
  .footer-legal { gap: 4px 26px; }
  .footer-legal a, .footer-legal span > a { display: inline-block; padding: 12px 0; }
  /* les intitulés de colonnes du pied de page tombaient à 11,8 px */
  .footer-top h3 { font-size: .78rem; }
  /* fil d'Ariane : c'est la sortie de secours de la page, il doit se viser */
  .breadcrumb a { display: inline-block; padding: 13px 0; }
  .page-hero .breadcrumb { margin: -10px 0 12px; }
}

/* ---- 10. Bandeau citation : ses valeurs quittent le gabarit pour être
   redéfinissables en mobile (un style en ligne ne se surcharge pas) ---- */
.hero-band .hero-frame { min-height: min(66vh, 640px); }
.hero-band .hero-in { padding-top: clamp(70px, 10vw, 150px); }

@media (max-width: 720px) {
  /* le bloc était plaqué contre le bas du cadre : 30 px sous les boutons pour
     300 px de ciel vide au-dessus. On laisse la photo respirer et le texte
     s'installer, au lieu de remplir une hauteur imposée. */
  .hero-band .hero-frame { min-height: 58vh; }
  @supports (height: 100dvh) { .hero-band .hero-frame { min-height: 58dvh; } }
  .hero-band .hero-in { padding-top: 52px; padding-bottom: 40px; }
  .hero-band .h-xl { font-size: clamp(1.5rem, 6.4vw, 2rem); line-height: 1.16; max-width: 17ch; }
  .hero-band .lead { margin-top: 16px; }
  .hero-band .hero-cta { margin-top: 24px; }
  /* le bouton téléphone y était le troisième de l'écran : la barre fixe le porte */
  .hero-band .btn-glass { display: none; }
}

/* ==================================================================
   PASSE « PLUS MODERNE » — même écriture, composants remis à niveau.
   Tout est en amélioration progressive : si le navigateur ne connaît
   pas la fonctionnalité, le site reste exactement ce qu'il était.
   ================================================================== */

/* ---- 1. Transitions de page natives ----
   Un site en pages séparées qui se comporte comme une application :
   le contenu se croise au lieu de clignoter en blanc. */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: vt-sortie .26s cubic-bezier(.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: vt-entree .38s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes vt-sortie { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-entree { from { opacity: 0; transform: translateY(12px); } }

/* l'en-tête et la barre d'appel ne bougent pas d'une page à l'autre :
   ils sont donc exclus de la transition et restent fixes à l'écran */
.site-header { view-transition-name: entete; }
.callbar     { view-transition-name: barre-appel; }
::view-transition-group(entete),
::view-transition-group(barre-appel) { animation-duration: 0s; }

/* ---- 2. Apparitions pilotées par le défilement ----
   Natif quand le navigateur sait faire : l'animation suit la position
   réelle de l'élément au lieu de se déclencher une fois au passage.
   L'observateur JS reste le filet de sécurité partout ailleurs. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .reveal {
      opacity: 1; transform: none; transition: none;
      animation: apparition linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 26%;
    }
    @keyframes apparition {
      from { opacity: 0; transform: translateY(22px); }
      to   { opacity: 1; transform: none; }
    }
    /* la photo du hero descend un peu moins vite que la page */
    .hero-frame > img {
      animation: parallaxe linear both;
      animation-timeline: view();
      animation-range: cover;
      will-change: transform;
    }
    @keyframes parallaxe {
      from { transform: scale(1.08) translateY(-2.2%); }
      to   { transform: scale(1.08) translateY(2.2%); }
    }
  }
}

/* ---- 3. Matériau : une arête lumineuse sur les surfaces en verre ----
   Ce qui distingue une carte translucide réussie d'un simple fond
   semi-transparent, c'est le liseré qui capte la lumière sur les bords. */
/* .callbar est volontairement absente : elle est en position:fixed plus haut,
   et la réécrire en relative la faisait retomber en bas du document. Un
   élément fixed est déjà positionné, son ::after n'a besoin de rien de plus. */
.header-inner, .btn-glass, .hero-tag {
  position: relative;
}
.header-inner::after, .callbar::after, .hero-tag::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg,
    rgba(255,255,255,.55) 0%, rgba(255,255,255,.14) 26%,
    rgba(255,255,255,0) 52%, rgba(255,255,255,.10) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.site-header.is-stuck .header-inner::after,
body.light-header .header-inner::after {
  background: linear-gradient(180deg,
    rgba(255,255,255,.9) 0%, rgba(255,255,255,.3) 30%,
    rgba(14,17,20,.04) 100%);
}

/* ---- 4. Profondeur : réservée à ce qui est réellement une carte ----
   Appliquée aux lignes de liste (.service-row en colonne, .cl), l'ombre les
   faisait flotter les unes sur les autres : ce sont des rangs séparés par un
   filet, pas des cartes. */
.form-card, .gallery figure {
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.7);
}

/* ---- 5. Le bouton répond au pointeur ----
   Une lueur suit le curseur sur les boutons pleins : c'est discret,
   et c'est ce qui fait qu'un bouton semble « vivant » plutôt qu'imprimé. */
@media (hover: hover) {
  .btn-gold, .btn-ink { position: relative; overflow: hidden; isolation: isolate; }
  .btn-gold::after, .btn-ink::after {
    content: ""; position: absolute; inset: -40%; z-index: -1;
    background: radial-gradient(120px 120px at var(--mx, 50%) var(--my, 50%),
                                rgba(255,255,255,.22), transparent 70%);
    opacity: 0; transition: opacity .3s var(--ease);
  }
  .btn-gold:hover::after, .btn-ink:hover::after { opacity: 1; }
}

/* ---- 6. Typographie : le navigateur équilibre les fins de ligne ---- */
h1, h2, h3, .h-hero, .h-xl, .h-lg, .h-md { text-wrap: balance; }
p, .lead, figcaption { text-wrap: pretty; }
.h-hero, .h-xl { font-optical-sizing: auto; }

/* ---- 7. Les grands chiffres se posent en chiffres tabulaires ----
   Sans cela, le compteur fait sauter la mise en page à chaque incrément. */
.fact b { font-variant-numeric: tabular-nums; }

/* ---- 8. Défilement : la page reprend où il faut sous l'en-tête fixe ---- */
html { scroll-padding-top: 104px; }
@media (max-width: 720px) { html { scroll-padding-top: 88px; } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .hero-frame > img { animation: none; }
}

/* ---- Pied de page : colonnes repliables sur téléphone ----
   Les trois listes de liens pesaient 1,7 écran sur mobile. Elles restent
   ouvertes et sans marqueur sur grand écran. */
.fcol > summary { list-style: none; cursor: default; }
.fcol > summary::-webkit-details-marker { display: none; }
.fcol > summary h3 { display: block; }

@media (min-width: 721px) {
  /* le clic n'est neutralisé que si le script a ouvert les colonnes :
     sans JS, elles restent dépliables à la main plutôt qu'inaccessibles */
  html.js-footer .fcol > summary { pointer-events: none; }
}

@media (max-width: 720px) {
  .footer-top { gap: 0; }
  .fcol { border-top: 1px solid rgba(237,239,241,.14); }
  .fcol > summary {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 52px; cursor: pointer; position: relative; padding-right: 8px;
  }
  .fcol > summary h3 { margin: 0; }
  .fcol > summary::after {
    content: ""; width: 9px; height: 9px; margin-right: 4px;
    border-right: 2px solid var(--rouge-soft); border-bottom: 2px solid var(--rouge-soft);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .28s var(--ease);
  }
  .fcol[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
  .fcol > ul { padding-bottom: 10px; }
  .fcol:last-of-type { border-bottom: 1px solid rgba(237,239,241,.14); }
  .footer-brand { padding-bottom: 18px; }
  .footer-legal { margin-top: 18px; }
}

/* ---- Vidéo du hero : elle prend la place de l'affiche une fois prête ---- */
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
  z-index: -3; opacity: 0; transition: opacity .9s var(--ease);
  pointer-events: none;
}
.hero-frame.has-video .hero-video { opacity: 1; }
.hero-frame.has-video > img { opacity: 0; transition: opacity .9s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .hero-frame.has-video > img { opacity: 1; }
}

/* ==================================================================
   BANDE MÉTIERS — reprise du bandeau de son véhicule : fond noir,
   pictogrammes au trait dans un cercle rouge, intitulés en capitales.
   ================================================================== */
.metiers {
  background: var(--ink); color: #fff;
  padding: clamp(30px, 4vw, 46px) 0 clamp(32px, 4vw, 50px);
  position: relative; isolation: isolate;
}
.metiers::before {
  /* une lueur chaude en haut, comme le ciel de crépuscule du bandeau */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 90% at 50% -20%, rgba(206,43,36,.16), transparent 62%);
}
.metiers-t {
  margin: 0 0 clamp(22px, 3vw, 32px);
  font-size: clamp(1.15rem, 2.1vw, 1.6rem); font-weight: 700;
  letter-spacing: -.03em; text-transform: none;
}
.metiers-t em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--rouge-soft); }

.metiers-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(10px, 1.6vw, 26px); }
.metier {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 14px 6px; border-radius: var(--r-md); text-decoration: none; color: #fff;
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}
.metier-ic {
  display: grid; place-items: center;
  width: clamp(54px, 5.4vw, 74px); aspect-ratio: 1; border-radius: 50%;
  border: 2px solid var(--rouge); color: var(--rouge-soft);
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.metier-ic svg { width: 52%; height: 52%; }
.metier > span:last-child {
  font-size: clamp(.72rem, 1vw, .82rem); font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; text-align: center;
}
.metier:hover { background: rgba(255,255,255,.05); }
.metier:hover .metier-ic { background: var(--rouge); border-color: var(--rouge); color: #fff; }

@media (max-width: 720px) {
  .metiers { padding: 26px 0 30px; }
  .metiers-t { margin-bottom: 20px; }
  /* cinq métiers ne tiennent pas de front : on les fait défiler au pouce */
  .metiers-row {
    display: flex; gap: 10px;
    margin: 0 calc(-1 * var(--gut)); padding: 2px var(--gut) 6px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scrollbar-width: none;
  }
  .metiers-row::-webkit-scrollbar { display: none; }
  .metier { flex: 0 0 104px; scroll-snap-align: start; padding: 10px 4px; }
  .metier-ic { width: 58px; }
  .metier > span:last-child { font-size: .76rem; letter-spacing: .08em; }
}

/* ==================================================================
   Réglages mobile demandés sur capture : respiration du hero, bande
   de métiers en grille plutôt qu'en rangée coupée, et un bloc sombre
   continu sous le hero pour tenir la direction artistique.
   ================================================================== */

/* ---- 1. Les repères prolongent la bande noire ---- */
.repere-dark {
  background: var(--ink); color: #fff;
  margin-top: -1px;                      /* pas de filet clair entre les deux */
  padding-top: clamp(10px, 2vw, 22px);
}
.repere-dark .facts { border-top: 1px solid rgba(255,255,255,.14); }
.repere-dark .fact { border-right-color: rgba(255,255,255,.12); }
.repere-dark .fact b { color: #fff; }
.repere-dark .fact span { color: rgba(255,255,255,.72); }
.metiers { padding-bottom: clamp(24px, 3vw, 38px); }

@media (max-width: 1080px) {
  .repere-dark .fact:nth-child(-n+2) { border-bottom-color: rgba(255,255,255,.12); }
}
@media (max-width: 720px) {
  .repere-dark .fact { border-bottom-color: rgba(255,255,255,.12); }
  .repere-dark .fact:last-child { border-bottom: 0; }
}

/* ---- 2. Hero : de l'air entre le texte, les boutons et la bande ---- */
@media (max-width: 720px) {
  .hero .lead { margin-top: 20px; }
  .hero-cta { margin-top: 32px; gap: 12px; }
  .hero-cta .btn { padding-top: 17px; padding-bottom: 17px; }
  .hero-in { padding-bottom: 26px; }     /* le bouton ne touche plus la bande de preuves */
  .hero-proof { margin-top: 4px; }
}

/* ---- 3. Bande de métiers : une grille, pas une rangée qui se coupe ----
   Une rangée tronquée au bord droit se lit comme un défaut, pas comme
   une invitation à faire défiler. */
@media (max-width: 720px) {
  .metiers-row {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 14px 10px; margin: 0; padding: 0; overflow: visible;
  }
  .metier {
    flex: 0 0 calc(33.333% - 7px); scroll-snap-align: none;
    gap: 10px; padding: 12px 4px;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  }
  .metier-ic { width: 52px; border-width: 1.8px; }
  .metier > span:last-child { font-size: .78rem; letter-spacing: .05em; }
}
@media (max-width: 380px) {
  .metier { flex: 0 0 calc(50% - 5px); }
  .metiers-t { font-size: 1.08rem; }
}

/* ---- 4. Le hero et la bande noire ne font qu'un bloc ----
   Un filet clair entre deux surfaces sombres se lit comme un défaut. */
.hero:not(.hero-band) { padding-bottom: 0; }
.hero:not(.hero-band) .hero-frame { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* Communes desservies sans page dédiée : une ligne de texte, pas des
   pastilles. Une pastille qui ne mène nulle part promet un geste qui
   n'existe pas, et fabrique une cible tactile qui ne répond pas. */
.pays-autres { margin: 12px 0 0; font-size: .88rem; color: var(--muted); line-height: 1.55; }

/* Sur la page contact, le bouton « Devis gratuit » de la barre fixe pointait
   vers la page en cours et doublait le bouton rouge du formulaire, à quelques
   centimètres. Un appel à l'action qui ne mène nulle part n'en est pas un :
   il ne reste que « Appeler », sur toute la largeur. */
body[data-page="contact"] .callbar { grid-template-columns: 1fr; }
body[data-page="contact"] .callbar .quote { display: none; }

/* ==================================================================
   DIRECTION ARTISTIQUE CLIENT — fond noir, rouge vif, sans-serif.
   Ce bloc redéfinit ce que l'ancien habillage clair posait.
   ================================================================== */

body { background: var(--paper); color: #fff; }
h1, h2, h3, h4, .h-hero, .h-xl, .h-lg, .h-md, .h-sm {
  font-family: var(--titre); font-weight: 800; letter-spacing: -.02em; color: #fff;
}
em, .h-lg em, .h-xl em, .h-hero em { font-style: normal; color: var(--rouge-deep); font-weight: 700; }
p, li { color: var(--ink-soft); }
.lead, .lead-light { color: var(--ink-soft); }
.section { background: transparent; }
.section-tint { background: var(--ink-2); }
.section-dark { background: var(--ink); }
.section-dark .lead, .section-dark p { color: var(--ink-soft); }

/* la barre rouge oblique qui précède chaque titre de section */
.barre { position: relative; padding-left: 26px; }
.barre::before {
  content: ""; position: absolute; left: 0; top: .18em;
  width: 7px; height: .78em; background: var(--rouge);
  transform: skewX(-12deg); border-radius: 1px;
}
.sous { margin: 10px 0 0 26px; color: var(--muted); font-size: 1rem; }
.sec-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.9fr); gap: clamp(20px,3vw,60px); align-items: end; }
.sec-intro { margin: 0; color: var(--muted); max-width: 52ch; }
.apres-cartes { margin-top: 30px; }

/* ---- Hero ---- */
.hero { padding: 0; }
.hero-frame { border-radius: 0; min-height: min(92vh, 860px); }
.hero-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); gap: clamp(24px,4vw,70px); align-items: end; }
.hero-script { font-family: var(--script); font-size: clamp(1.6rem,3.4vw,2.6rem); color: #fff; margin: 6px 0 0; line-height: 1.1; }
.hero-metiers { padding-bottom: 6px; }
.hero-metiers-t { font-family: var(--titre); font-weight: 800; font-size: clamp(1.15rem,1.9vw,1.6rem); color: #fff; margin: 0 0 18px; line-height: 1.2; }
.hero-metiers-t em { font-style: normal; color: var(--rouge-deep); }
.hero-metiers ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hero-metiers li { position: relative; padding-left: 20px; color: #fff; font-weight: 600; font-size: 1.02rem; }
.hero-metiers li::before {
  content: ""; position: absolute; left: 0; top: .34em;
  width: 5px; height: .82em; background: var(--rouge); transform: skewX(-12deg);
}

/* ---- Barre de confiance ---- */
.confiance { background: var(--ink); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.confiance-row { display: grid; grid-template-columns: repeat(4, 1fr); }
/* align-items: start — centré, l'item dont la description tient sur une seule
   ligne posait son titre 9 px plus bas que les trois autres. */
.conf { display: flex; align-items: start; gap: 14px; padding: 24px 26px; border-right: 1px solid var(--line); }
.conf:last-child { border-right: 0; }
.conf-ic {
  display: grid; place-items: center; flex: none; width: 46px; aspect-ratio: 1;
  border-radius: 50%; border: 2px solid var(--rouge); color: var(--rouge-deep);
}
.conf-ic svg { width: 21px; height: 21px; }
.conf b { display: block; font-family: var(--titre); font-weight: 700; font-size: .98rem; color: #fff; }
.conf span span { display: block; font-size: .84rem; color: var(--muted); margin-top: 2px; line-height: 1.4; }

/* ---- Cartes de métier ---- */
.cartes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 38px; }
.carte {
  display: block; text-decoration: none; border-radius: var(--r-md); overflow: hidden;
  background: var(--paper-2); border: 1px solid var(--line);
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.carte-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.carte-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.carte-corps { display: block; padding: 16px 16px 20px; position: relative; }
.carte-corps b { display: block; font-family: var(--titre); font-weight: 700; font-size: 1rem; color: #fff; }
.carte-corps span { display: block; margin-top: 7px; font-size: .86rem; color: var(--muted); line-height: 1.5; }
.carte:hover { transform: translateY(-4px); border-color: rgba(224,27,36,.5); }
.carte:hover .carte-img img { transform: scale(1.06); }

/* ---- Réalisations ---- */
.real-split { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(24px,4vw,64px); align-items: center; }
.real-gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.real-gal figure { margin: 0; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); }
.real-gal img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

/* ---- Bloc contact : fond photo sombre ---- */
.contact-bloc { position: relative; isolation: isolate; overflow: hidden; }
/* La photo était à 30 % d'opacité SOUS un voile noir à 72-95 % : il n'en
   restait que 4 %, soit du bruit gris sur du noir, pas une image. On la laisse
   respirer à droite, où il n'y a que trois lignes courtes, et on garde le
   voile dense à gauche, sous le titre et le paragraphe. */
.fond-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: -2; opacity: .72;
}
.contact-bloc::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(8,9,11,.96) 26%, rgba(8,9,11,.62) 100%);
}

.contact-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.9fr); gap: clamp(26px,4vw,64px); align-items: start; }
.form-sub { margin: 6px 0 20px; color: var(--muted); font-size: .9rem; }

@media (max-width: 1080px) {
  .cartes { grid-template-columns: repeat(3, 1fr); }
  .confiance-row { grid-template-columns: repeat(2, 1fr); }
  .conf:nth-child(2n) { border-right: 0; }
  .conf:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .hero-grid, .real-split, .contact-grid, .sec-split { grid-template-columns: 1fr; }
  .hero-metiers { padding-top: 24px; border-top: 1px solid var(--line-light); }
  .hero-metiers ul { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .cartes { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .confiance-row { grid-template-columns: 1fr; }
  .conf { border-right: 0; border-bottom: 1px solid var(--line); padding: 18px 0; }
  .conf:last-child { border-bottom: 0; }
  .hero-metiers ul { grid-template-columns: repeat(2, 1fr); }
  /* trois photos sur deux colonnes laissaient la troisième seule avec un trou
     de 171 px à côté. La première prend la largeur, les deux autres se
     partagent la ligne du dessous : une composition, plus un reste. */
  .real-gal { grid-template-columns: repeat(2, 1fr); }
  .real-gal figure:first-child { grid-column: 1 / -1; }
  .real-gal figure:first-child img { aspect-ratio: 16 / 10; }
  .sous { margin-left: 26px; }
}

/* ---- Plus aucune italique héritée du registre éditorial ----
   La maquette client est entièrement en sans-serif droit. Seule la ligne
   manuscrite du logo garde une écriture cursive. */
em, .it, .h-hero em, .h-xl em, .h-lg em, .h-md em,
.step .n, .service-row .n, .chapno, .metiers-t em, .quote, blockquote {
  font-family: var(--titre) !important;
  font-style: normal !important;
  font-weight: 800;
  letter-spacing: -.02em;
}
.step .n, .service-row .n { color: var(--rouge-deep); }
.hero-script { font-family: var(--script) !important; font-style: normal !important; font-weight: 600; letter-spacing: 0; }

/* ---- Les photos entrent dans la gamme sombre de la charte ----
   Prises brutes, elles sont bien plus claires que le reste et cassent le bloc. */
.carte-img img, .real-gal img {
  filter: brightness(.82) saturate(.92) contrast(1.06);
  transition: transform .5s var(--ease), filter .4s var(--ease);
}
.carte:hover .carte-img img, .real-gal figure:hover img { filter: brightness(.96) saturate(1) contrast(1.04); }

/* ---- Liens fléchés lisibles sur fond noir ---- */
.arrow-link { color: #fff; border-bottom-color: var(--rouge); }
.arrow-link:hover { color: var(--rouge-deep); }
.arrow-link svg { color: var(--rouge); }

/* ---- Champs de formulaire sur fond sombre ---- */
.form-card { background: var(--paper-2); border: 1px solid var(--line); color: #fff; }
.form-card input, .form-card select, .form-card textarea {
  background: var(--paper-3); border: 1px solid var(--line); color: #fff;
}
.form-card input::placeholder, .form-card textarea::placeholder { color: #7C848F; }
.form-card label { color: var(--ink-soft); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { color: #fff; }

/* ==========================================================================
   MAQUETTE CLIENT — les quatre signatures qui manquaient
   En-tête en barre pleine largeur, hero au logo, section services claire,
   pied de page en bandeau. Ce bloc passe après tout le reste : il corrige
   l'habillage hérité plutôt que de le dupliquer.
   ========================================================================== */

/* ---- 0. Le logo du client remplace le tracé vectoriel : c'est une image,
   plus un SVG piloté par currentColor. Elle est déjà détourée sur le noir du
   site, donc aucun fond à gérer. ---- */
.brand { padding: 8px 0; }
.brand img { display: block; height: 50px; width: auto; }
.footer-bar img { height: 52px; width: auto; }
@media (max-width: 900px) { .brand img { height: 42px; } }
@media (max-width: 420px) { .brand img { height: 36px; } }

/* ---- 1. En-tête : une barre, plus une pastille flottante ---- */
.site-header { padding: 0; }
.site-header .wrap-wide { max-width: none; padding: 0; margin: 0; width: 100%; }
.site-header .nav { gap: clamp(14px, 2vw, 30px); }
.site-header .header-inner,
.site-header.is-stuck .header-inner,
body.light-header .header-inner {
  border-radius: 0; border: 0; border-bottom: 1px solid var(--line);
  background: rgba(14, 16, 20, .92);
  backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%);
  box-shadow: none;
  padding: 0 clamp(16px, 3.4vw, 40px) 0 clamp(14px, 2.4vw, 28px);
  gap: clamp(16px, 3vw, 46px);
}
.site-header .brand { padding: 13px 0; }

/* l'onglet courant est souligné de rouge, pas surligné */
.nav a, .site-header.is-stuck .nav a, body.light-header .nav a {
  border-radius: 0; background: none; position: relative; padding: 10px 2px;
  font-size: .95rem; font-weight: 600; color: var(--ink-soft);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--rouge); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav a:hover, .site-header.is-stuck .nav a:hover, body.light-header .nav a:hover { background: none; color: #fff; }
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current="page"],
.site-header.is-stuck .nav a[aria-current="page"],
body.light-header .nav a[aria-current="page"] { background: none; color: #fff; }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

/* le bloc rouge de droite : numéro en gros, mention dessous */
.cta-bloc {
  display: inline-flex; align-items: center; gap: 12px; text-decoration: none;
  background: var(--rouge-btn); color: #fff; padding: 11px 22px 11px 18px;
  border-radius: 999px; box-shadow: var(--lift);
  transition: background-color .25s var(--ease), transform .25s var(--ease);
}
.cta-bloc:hover { background: #C2161E; transform: translateY(-1px); }
.cta-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
          background: rgba(255,255,255,.18); flex: none; }
.cta-ic svg { width: 16px; height: 16px; }
.cta-txt { display: flex; flex-direction: column; line-height: 1.15; }
.cta-txt b { font-size: 1.04rem; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.cta-txt > span { font-size: .76rem; font-weight: 600; opacity: .9; white-space: nowrap; }

/* ---- 2. Hero : le logo tient la gauche, les métiers la droite ---- */
.hero { padding: 0; }
.hero-frame { border-radius: 0; min-height: min(72vh, 620px); }
.hero-grid { align-items: center; }
.hero-logo img { display: block; width: auto; height: clamp(104px, 11.5vw, 166px);
                 filter: drop-shadow(0 8px 34px rgba(0,0,0,.6)); }
.hero-logo .hero-script {
  font-family: var(--script); font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  color: #fff; margin: 6px 0 0 8px; position: relative; display: inline-block;
  text-shadow: 0 2px 18px rgba(0,0,0,.6);
}
/* le trait rouge tracé à la main sous la signature, comme sur la maquette */
.hero-logo .hero-script::after {
  content: ""; position: absolute; left: 2%; right: -4%; bottom: -.18em; height: .26em;
  background: var(--rouge); clip-path: polygon(0 62%, 100% 0, 100% 42%, 0 100%);
}
.hero-h1 { font-size: clamp(1.5rem, 2.5vw, 2.05rem); line-height: 1.16; color: #fff; }
.hero-h1 .sur {
  display: block; font-size: .79rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--rouge-soft); font-weight: 700; margin-bottom: 12px;
}
.hero-metiers ul { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 9px; }
.hero-metiers li {
  position: relative; padding-left: 16px; color: #fff; font-weight: 600; font-size: 1.02rem;
}
.hero-metiers li::before {
  content: ""; position: absolute; left: 0; top: .34em; width: 4px; height: .82em;
  background: var(--rouge); transform: skewX(-12deg);
}
/* l'éclat rouge en biais du bord droit */
.hero-frame::after {
  content: ""; position: absolute; right: -4%; top: 8%; bottom: 8%; width: 12px;
  background: var(--rouge); transform: skewX(-12deg); opacity: .9; pointer-events: none;
}

/* ---- 3. Services : la seule section claire de la page ---- */
.section-light {
  background: #F1F2F4; color: #14171C;
  border-top: 1px solid rgba(0,0,0,.06); border-bottom: 1px solid rgba(0,0,0,.06);
}
.section-light .h-lg, .section-light h2, .section-light h3, .section-light b { color: #12151A; }
.section-light .sous, .section-light .sec-intro, .section-light p { color: #4A525C; }
.section-light .arrow-link { color: #12151A; }
.section-light .carte {
  background: #fff; border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 1px 2px rgba(16,20,26,.06), 0 16px 34px -26px rgba(16,20,26,.42);
}
.section-light .carte:hover { box-shadow: 0 2px 6px rgba(16,20,26,.08), 0 26px 50px -28px rgba(16,20,26,.5); }
.section-light .carte b { color: #12151A; }
.section-light .carte-corps > span { color: #59616B; }

/* six cartes sur une rangée, comme la maquette */
.cartes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: 38px; }
.carte { border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; }
.carte-img { position: relative; display: block; overflow: visible; }
.carte-img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.carte-ic {
  position: absolute; left: 50%; bottom: -21px; transform: translateX(-50%);
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: #14171C; border: 1px solid rgba(255,255,255,.14); color: var(--rouge-deep);
  box-shadow: 0 6px 18px -8px rgba(0,0,0,.8);
}
.carte-ic svg { width: 21px; height: 21px; }
/* colonne flex + filet poussé en bas : « Entretien & réparation » tient sur
   deux lignes, son filet rouge se retrouvait 26 px plus haut que les cinq
   autres. Les six s'alignent maintenant sur le bas de carte. */
.carte-corps { display: flex; flex-direction: column; flex: 1;
               padding: 32px 16px 20px; text-align: center; }
.carte-corps b { display: block; font-size: 1.02rem; letter-spacing: -.02em; }
.carte-corps > span { display: block; margin-top: 7px; font-size: .86rem; line-height: 1.5; }
.carte-filet { display: block; width: 28px; height: 3px; border-radius: 2px;
               background: var(--rouge); margin: 16px auto 0; flex: none; }
.carte-corps > span { flex: 1; }
.apres-cartes { margin-top: 34px; }

/* ---- 4. Pied de page : bandeau logo + liens, puis la ligne des métiers ---- */
.footer-bar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 18px 30px; padding-bottom: 30px; margin-bottom: 30px;
  border-bottom: 1px solid var(--line);
}
.footer-bar > a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-bar img { display: block; height: 44px; width: auto; }
.footer-bar nav { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.footer-bar nav a { display: inline-flex; align-items: center; min-height: 44px;
                    text-decoration: none; font-weight: 600; font-size: .93rem; color: var(--ink-soft); }
.footer-bar nav a:hover { color: #fff; }
/* pas de filet haut ici : .footer-top en pose déjà un en bas, les deux
   traçaient deux lignes à 30 px l'une de l'autre avec du vide entre. */
.footer-metiers {
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap;
  gap: 12px 26px; padding-top: 26px;
  font-size: .87rem; color: var(--muted);
}
.footer-metiers .fm-liste b { color: var(--on-dark); font-weight: 700; }
.footer-metiers .fm-script { font-family: var(--script); font-size: 1.32rem; color: var(--ink-soft); }

/* ---- Tablette et téléphone ---- */
@media (max-width: 1100px) {
  .cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* ------------------------------------------------------------------
   Barre d'en-tête sous 400 px : le bouton menu sortait de l'écran.
   La marque (139), la pastille rouge (162) et le bouton (44) plus les
   écarts demandaient 396 px. Comme body a overflow-x: hidden, rien ne
   débordait visiblement : le bouton était simplement rogné, donc
   inatteignable. 7 px coupés à 375, 22 à 360, et à 320 la pastille y
   passait aussi.
   ------------------------------------------------------------------ */
@media (max-width: 420px) {
  .site-header .header-inner { padding: 0 10px; gap: 10px; }
  .cta-bloc { padding: 8px 14px 8px 10px; gap: 9px; }
  .cta-ic { width: 26px; height: 26px; }
  .cta-ic svg { width: 14px; height: 14px; }
  .cta-txt b { font-size: .92rem; }
  .nav-toggle { width: 44px; }
  .brand-txt b { font-size: .88rem; }
}

@media (max-width: 900px) {
  .hero-frame { min-height: auto; }
  .hero-grid { display: grid; grid-template-columns: 1fr; gap: 26px; text-align: left; }
  .hero-logo img { width: auto; height: 104px; }
  .hero-frame::after { display: none; }
  .site-header .header-inner { padding: 0 14px; }
  .cta-txt > span { display: none; }
  .cta-bloc { padding: 9px 16px; gap: 9px; }
  .cta-txt b { font-size: .96rem; }
}
@media (max-width: 560px) {
  .cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .carte-corps { padding: 28px 11px 17px; }
  .carte-corps b { font-size: .95rem; }
  .carte-corps > span { font-size: .8rem; }
  .hero-metiers ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-txt b { font-size: .9rem; }
}

/* La barre d'appel fixe recouvrait la dernière ligne du pied de page :
   main réservait sa hauteur, le pied de page non. Et elle restait claire
   sur un site devenu noir. */
@media (max-width: 720px) {
  .site-footer { padding-bottom: calc(34px + 78px + env(safe-area-inset-bottom)); }
  .callbar {
    background: rgba(13, 15, 19, .94);
    border-top: 1px solid var(--line-light);
  }
}