/* ==========================================================================
   T.M.S Multiservice — « Béton & signal »
   Béton clair + encre + orange signal du logo (utilisé avec parcimonie).
   Geste signature : le passage du jet haute pression dans le hero.
   ========================================================================== */
:root {
  /* --- Marque --- */
  --signal:      #F26A1B;   /* orange du logo : boutons (texte encre), triangle */
  --signal-dark: #D4560D;
  --signal-ink:  #A8410A;   /* orange en texte sur fond clair (AA) */

  /* --- Fonds --- */
  --beton:   #E6E3DC;       /* fond de page : béton propre */
  --beton-2: #D9D5CB;       /* sections alternées */
  --grime:   #77766A;       /* béton encrassé (hero) */
  --line:    rgba(22,22,20,.16);

  /* --- Texte --- */
  --ink:      #161614;
  --ink-2:    #4B4944;
  --on-dark:  #EEEBE4;
  --on-dark-2:#A9A59B;

  /* --- Typo --- */
  --font-display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --font-body:    "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r: 4px;
  --r-pill: 999px;
  --sh-2: 0 14px 34px rgba(22,22,20,.18);
  --ease: cubic-bezier(.2,.7,.2,1);
  --nav-h: 64px;
  --gut: 16px;

  /* Textures (SVG turbulence, tuilées) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .09 0 0 0 0 .09 0 0 0 0 .08 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --moss: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .012' numOctaves='5' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .13 0 0 0 0 .16 0 0 0 0 .09 3.2 0 0 0 -1.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  --lichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='380' height='380'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.09' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .78 0 0 0 0 .77 0 0 0 0 .64 10 0 0 0 -7.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23l)'/%3E%3C/svg%3E");
}
@media (min-width: 768px) { :root { --gut: 32px; --nav-h: 72px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--beton) var(--grain); color: var(--ink);
  font: 400 17px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }
.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gut); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: var(--on-dark); padding: 10px 14px; }
.skip:focus { left: 8px; }

.display {
  font-family: var(--font-display); font-stretch: 72%; font-weight: 800;
  text-transform: uppercase; line-height: .9; letter-spacing: -.005em;
}
.h2 { font-size: clamp(40px, 8vw, 92px); }
.ico { width: 18px; height: 18px; flex: none; }
.mark { width: 34px; height: 31px; flex: none; }
.mark--sm { width: 22px; height: 20px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; justify-content: center;
  min-height: 46px; padding: 0 20px; border-radius: var(--r);
  font: 600 16px/1 var(--font-body); text-decoration: none; white-space: nowrap;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.btn--signal { background: var(--signal); color: var(--ink); }
.btn--signal:hover { background: #ff7a2a; }
.btn--signal:active { transform: translateY(1px); }
.btn--lg { min-height: 56px; padding: 0 26px; font-size: 17px; }
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none;
  border-bottom: 2px solid currentColor; padding-bottom: 2px;
}
.link-arrow::after { content: "→"; transition: transform .2s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------- Header ---------- */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h);
  background: var(--ink); color: var(--on-dark);
  transition: box-shadow .3s var(--ease);
}
.hdr.is-solid { box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.hdr__in { height: 100%; display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand__txt { font: 800 21px/1 var(--font-display); font-stretch: 75%; text-transform: uppercase; letter-spacing: .02em; }
.brand__txt em { font-style: normal; color: var(--signal); }
.nav { display: none; gap: 28px; }
.nav a { text-decoration: none; font-weight: 500; font-size: 15px; color: var(--on-dark-2); transition: color .2s; }
.nav a:hover { color: var(--on-dark); }
.hdr__call { display: none; }
.burger {
  width: 44px; height: 44px; display: grid; place-content: center; gap: 7px;
  background: none; border: 0; cursor: pointer; padding: 0;
}
.burger span { display: block; width: 24px; height: 2px; background: var(--on-dark); transition: transform .3s var(--ease); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
@media (min-width: 960px) {
  .nav, .hdr__call { display: flex; }
  .burger { display: none; }
}

.msheet {
  position: fixed; inset: var(--nav-h) 0 0; z-index: 49; background: var(--ink); color: var(--on-dark);
  display: flex; flex-direction: column; justify-content: space-between; padding: 28px var(--gut) calc(28px + env(safe-area-inset-bottom));
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path .45s var(--ease), visibility 0s linear .45s;
}
.msheet.is-open { clip-path: inset(0); visibility: visible; transition: clip-path .45s var(--ease); }
.msheet nav { display: flex; flex-direction: column; }
.msheet nav a {
  font: 800 44px/1.15 var(--font-display); font-stretch: 72%; text-transform: uppercase;
  text-decoration: none; border-bottom: 1px solid rgba(238,235,228,.12); padding: 10px 0;
}
@media (min-width: 960px) { .msheet { display: none; } }

/* ==========================================================================
   HERO — un passage de nettoyeur haute pression
   Fond : surface encrassée (mousse). Un jet balaie tout le hero de gauche à
   droite et révèle le béton propre ; le titre apparaît ligne par ligne au
   passage du jet.
   Photos : remplacer --surface-dirty / --surface-clean par les 2 photos
   (même cadrage, sale / propre). Tant qu'elles ne sont pas là : textures SVG.
   ========================================================================== */
@property --p { syntax: "<percentage>"; inherits: false; initial-value: -8%; }

.hero {
  --surface-dirty: var(--lichen), var(--moss), var(--grain);
  --surface-dirty-color: var(--grime);
  --surface-clean: var(--grain);
  --surface-clean-color: var(--beton);
  --foot-h: 72px;
  --clean-bottom: 0px;   /* le béton propre descend jusqu'en bas du hero (plus de bande verte) */
  --pass: 1.7s;
  position: relative; overflow: clip;
  min-height: min(100svh, 940px);
  display: flex; flex-direction: column;
  padding-top: var(--nav-h);
  background-color: var(--surface-dirty-color);
  background-image: var(--surface-dirty);
  background-size: auto; background-position: center;
  color: var(--ink);
}
/* Photos du hero : même cadrage, version sale / version propre */
.hero {
  --surface-dirty: url("img/hero-sale.webp");
  /* voile béton clair sur la photo propre : plus fort à gauche, derrière le texte (lisibilité AA) */
  --surface-clean: linear-gradient(90deg, rgba(230,227,220,.66) 0%, rgba(230,227,220,.5) 45%, rgba(230,227,220,.18) 100%), url("img/hero-propre.webp");
}
/* Mobile : même paire pivotée de 90° (9:16, alignement parfait, aucune couture) */
@media (max-width: 767px) {
  .hero {
    --surface-dirty: url("img/hero-sale-m.webp");
    --surface-clean: linear-gradient(90deg, rgba(230,227,220,.62), rgba(230,227,220,.5)), url("img/hero-propre-m.webp");
  }
}
.hero, .lane__clean { background-size: cover !important; background-position: center !important; }
.hero__surface { position: absolute; left: 0; right: 0; top: var(--nav-h); bottom: var(--clean-bottom); }
.lane__clean {
  position: absolute; inset: calc(-1 * var(--nav-h)) 0 calc(-1 * var(--clean-bottom)); /* même repère que .hero : photos alignées au pixel */
  background-color: var(--surface-clean-color);
  background-image: var(--surface-clean);
  --band: linear-gradient(180deg,
    transparent calc(var(--nav-h) + (100% - var(--nav-h) - var(--clean-bottom)) * var(--t) / 100 - 6px),
    #000       calc(var(--nav-h) + (100% - var(--nav-h) - var(--clean-bottom)) * var(--t) / 100 + 6px),
    #000       calc(var(--nav-h) + (100% - var(--nav-h) - var(--clean-bottom)) * var(--b) / 100 - 6px),
    transparent calc(var(--nav-h) + (100% - var(--nav-h) - var(--clean-bottom)) * var(--b) / 100 + 6px));
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--p) - 5%), transparent calc(var(--p) + 1%)), var(--band);
          mask-image: linear-gradient(90deg, #000 calc(var(--p) - 5%), transparent calc(var(--p) + 1%)), var(--band);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  animation: pass var(--pass) cubic-bezier(.55,.08,.4,.95) var(--d) both;
}
.lane--rtl .lane__clean {
  -webkit-mask-image: linear-gradient(270deg, #000 calc(var(--p) - 5%), transparent calc(var(--p) + 1%)), var(--band);
          mask-image: linear-gradient(270deg, #000 calc(var(--p) - 5%), transparent calc(var(--p) + 1%)), var(--band);
}
@keyframes pass { from { --p: -8%; } to { --p: 108%; } }

/* Le jet : ligne d'eau + brume devant + trace mouillée derrière */
.lane__jet {
  position: absolute; z-index: 1; width: 3px; margin-left: -1.5px;
  top: calc(var(--t) * 1%); height: calc((var(--b) - var(--t)) * 1%);
  left: var(--p);
  background: linear-gradient(180deg, rgba(255,255,255,0), #fff 14%, #fff 86%, rgba(255,255,255,0));
  box-shadow: 0 0 16px 5px rgba(255,255,255,.55), 0 0 50px 14px rgba(255,255,255,.16);
  pointer-events: none;
  animation: pass var(--pass) cubic-bezier(.55,.08,.4,.95) var(--d) both, jet-out .25s linear calc(var(--d) + var(--pass) - .1s) forwards;
}
.lane--rtl .lane__jet { left: calc(100% - var(--p)); }
.lane__jet::before { /* trace mouillée (côté propre) */
  content: ""; position: absolute; top: 0; bottom: 0; right: 2px; width: 260px;
  background: linear-gradient(270deg, rgba(40,38,30,.22), rgba(40,38,30,0));
}
.lane__jet::after { /* brume (côté sale) */
  content: ""; position: absolute; top: -4%; bottom: -4%; left: 1px; width: 70px;
  background: linear-gradient(90deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  filter: blur(7px);
}
.lane--rtl .lane__jet::before { right: auto; left: 2px; transform: scaleX(-1); }
.lane--rtl .lane__jet::after { left: auto; right: 1px; transform: scaleX(-1); }
@keyframes jet-out { to { opacity: 0; } }

/* Contenu */
.hero__in { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: clamp(36px, 7vh, 80px); padding-bottom: clamp(44px, 8vh, 96px); }
.hero__loc {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 15px; color: var(--ink); margin-bottom: clamp(18px, 3vh, 30px);
  animation: rise .5s var(--ease) .2s both;
}
.hero__title { font-size: clamp(40px, 11.4vw, 128px); }
.hl { display: block; white-space: nowrap; animation: rise .55s var(--ease) both; }
.hl--1 { animation-delay: .85s; }
.hl--2 { animation-delay: 1.02s; }
.hl--3 { animation-delay: 1.2s; }
.hero__last { position: relative; }
.hero__last::after { content: ""; position: absolute; left: 0; right: .12em; bottom: -.06em; height: .075em; background: var(--signal); transform-origin: left; animation: underline .5s var(--ease) 1.85s both; }
.hero__lead { max-width: 33rem; margin-top: clamp(22px, 4vh, 36px); font-size: clamp(17px, 2.1vw, 20px); color: var(--ink); font-weight: 500; animation: rise .55s var(--ease) 1.45s both; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; margin-top: clamp(26px, 4vh, 40px); animation: rise .55s var(--ease) 1.6s both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes underline { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.badge {
  position: absolute; z-index: 3; right: var(--gut); bottom: calc(var(--foot-h) - 20px);
  width: 104px; height: 104px; transform: rotate(-9deg);
  animation: stamp .45s cubic-bezier(.3,1.6,.5,1) 2.1s both;
}
@keyframes stamp { from { opacity: 0; transform: rotate(-9deg) scale(1.35); } to { opacity: 1; transform: rotate(-9deg) scale(1); } }
@media (min-width: 768px) { .badge { width: 164px; height: 164px; right: calc(var(--gut) + 3vw); bottom: calc(var(--foot-h) - 46px); } }
@media (min-width: 1100px) { .badge { width: 190px; height: 190px; right: max(var(--gut), calc((100vw - 1240px) / 2 + 40px)); bottom: calc(var(--foot-h) - 56px); } }

.hero__foot { position: relative; z-index: 2; height: var(--foot-h); display: flex; align-items: center; color: var(--ink-2); font-size: 15px; font-weight: 500; }
.hero__foot p { max-width: 68%; line-height: 1.35; }
.hero__foot strong { color: var(--ink); }
@media (min-width: 768px) { .hero__foot p { max-width: none; } }

/* ---------- Hero : le béton se termine en bord cassé au-dessus de la section suivante ----------
   Petit morceau de « section beige » posé en bas du hero, avec un bord cassé (aucun masque sur le hero :
   rien à recomposer pendant le passage du jet). Une fine ombre suit la cassure. */
.hero-wrap { position: relative; z-index: 1; }
.hero { padding-bottom: 34px; }
.hero__cut {
  --cut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 48' preserveAspectRatio='none'%3E%3Cpath d='M0 22.0 L14 22.6 L46 24.4 L78 23.7 L81 19.4 L92 17.7 L105 18.3 L117 22.9 L131 21.2 L141 21.5 L155 24.7 L173 22.5 L205 23.1 L219 24.4 L233 22.8 L243 21.6 L267 20.9 L285 22.2 L303 23.2 L317 24.5 L341 19.7 L359 21.3 L364 18.6 L374 16.3 L388 17.8 L401 22.0 L408 19.4 L417 17.7 L434 18.2 L448 21.2 L466 21.4 L490 24.6 L493 18.5 L502 16.1 L514 17.8 L524 21.6 L548 23.3 L566 24.9 L580 21.3 L594 20.4 L600 18.6 L606 16.4 L617 18.0 L627 22.1 L641 20.1 L659 20.8 L683 19.3 L720 22.0 L720 48 L0 48 Z'/%3E%3C/svg%3E");
  --slab: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 48' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L720 0 L720 22.0 L683 19.3 L659 20.8 L641 20.1 L627 22.1 L617 18.0 L606 16.4 L600 18.6 L594 20.4 L580 21.3 L566 24.9 L548 23.3 L524 21.6 L514 17.8 L502 16.1 L493 18.5 L490 24.6 L466 21.4 L448 21.2 L434 18.2 L417 17.7 L408 19.4 L401 22.0 L388 17.8 L374 16.3 L364 18.6 L359 21.3 L341 19.7 L317 24.5 L303 23.2 L285 22.2 L267 20.9 L243 21.6 L233 22.8 L219 24.4 L205 23.1 L173 22.5 L155 24.7 L141 21.5 L131 21.2 L117 22.9 L105 18.3 L92 17.7 L81 19.4 L78 23.7 L46 24.4 L14 22.6 L0 22.0 Z'/%3E%3C/svg%3E");
  position: absolute; left: 0; right: 0; bottom: -1px; height: 49px; z-index: 2; pointer-events: none;
  background: var(--beton) var(--grain);
  -webkit-mask: var(--cut) left top / 720px 48px repeat-x;
          mask: var(--cut) left top / 720px 48px repeat-x;
}
/* ombre douce qui suit la cassure : la forme du béton, décalée de 3 px et floutée, visible seulement sur le beige
   (même rendu que la version précédente, mais statique : rien à recalculer pendant le passage du jet) */
.hero__cut-shadow { position: absolute; left: 0; right: 0; top: 3px; height: 48px; filter: blur(7px); }
.hero__cut-shadow::before {
  content: ""; position: absolute; inset: 0; background: rgba(22,22,20,.14);
  -webkit-mask: var(--slab) left top / 720px 48px repeat-x;
          mask: var(--slab) left top / 720px 48px repeat-x;
}

/* ---------- Jet (éléments créés par script.js) : déplacés uniquement en transform ---------- */
.wash-win { position: absolute; top: 0; bottom: 0; left: 0; z-index: 1; overflow: hidden; pointer-events: none; will-change: transform; transition: opacity .35s ease; }
.wash-img {
  position: absolute; left: 0; will-change: transform;
  background-color: var(--surface-clean-color); background-image: var(--surface-clean);
  background-size: cover; background-position: center;
}
.wash-wet { position: absolute; top: 0; bottom: 0; width: 300px; background: linear-gradient(90deg, rgba(26,28,20,0), rgba(26,28,20,.22) 65%, rgba(26,28,20,.26) 85%, rgba(26,28,20,0)); }
.wash-mist {
  position: absolute; top: 0; bottom: 0; left: 0; width: 170px; z-index: 1; pointer-events: none; will-change: transform;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(250,250,248,.32) 18%, rgba(250,250,248,.12) 50%, rgba(255,255,255,0));
  transition: opacity .35s ease;
}

/* ---------- Hero piloté par JS : chaque lettre est révélée au passage du jet ---------- */
.hero.js-wash .lane__clean, .hero.js-wash .lane__jet { animation: none; }
.hero.js-wash .lane__jet { display: none; }
.wash-cv { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; transition: opacity .35s ease; }
.hero.js-wash .hero__loc, .hero.js-wash .hl, .hero.js-wash .hero__lead, .hero.js-wash .hero__cta { animation: none; }
/* Lettres et icônes : simple fondu d'opacité (aucun flou animé : c'était le plus coûteux sur iPhone).
   La brume du jet passe par-dessus au même moment, l'effet « sorti de l'eau » est conservé. */
.hero.js-wash .ch, .hero.js-wash .blk { opacity: 0; transition: opacity .4s ease-out; }
.hero.js-wash .ch.on, .hero.js-wash .blk.on { opacity: 1; }
.hero__last { display: inline-block; }   /* boîte propre pour « en état » + son trait orange */
.hero.js-wash .wipe { clip-path: inset(-14px 100% -14px -14px); }   /* boutons : révélés par le jet (script.js) */
.hero.js-wash .hero__last::after { animation: none; transform: scaleX(0); transition: transform .5s var(--ease); }
.hero.js-wash.washed .hero__last::after { transform: scaleX(1); }
.hero.js-wash .badge { animation: none; opacity: 0; }
.hero.js-wash.washed .badge { animation: stamp .45s cubic-bezier(.3,1.6,.5,1) .15s both; }

/* ---------- Apparition au défilement (classes posées par script.js) ---------- */
.rv {
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--rd, 0ms);
}
.rv.in { opacity: 1; transform: none; }

/* ---------- Sections ---------- */
.sec { padding: clamp(72px, 12vw, 150px) 0; position: relative; }
.dark { background: var(--ink); color: var(--on-dark); }
.sec__head { display: grid; gap: 18px; margin-bottom: clamp(36px, 6vw, 72px); }
.sec__note { color: var(--ink-2); max-width: 30rem; }
.dark .sec__note { color: var(--on-dark-2); }
@media (min-width: 900px) {
  .sec__head { grid-template-columns: 1fr auto; align-items: end; gap: 40px; }
  .sec__note { text-align: right; }
}

/* ==========================================================================
   SERVICES — trois familles (les 3 verbes du titre), services en accordéon « + »
   ========================================================================== */
.services { padding-top: clamp(96px, 14vw, 170px); }
.fams { display: grid; gap: 56px; }
.fam__h {
  display: flex; align-items: flex-start; gap: .32em;
  font-family: var(--font-display); font-stretch: 72%; font-weight: 800; text-transform: uppercase;
  font-size: clamp(34px, 4.2vw, 52px); line-height: .95;
}
.fam__tri { flex: none; width: .5em; height: .44em; background: var(--signal); clip-path: polygon(50% 0, 100% 100%, 0 100%); margin-top: .22em; }
.fam__p { margin: 14px 0 22px; color: var(--ink-2); max-width: 26rem; }
.fam__list { border-bottom: 1px solid var(--line); }
.svc { border-top: 1px solid var(--line); }
.svc summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 24px; align-items: center; gap: 12px;
  padding: 16px 0;
}
.svc summary::-webkit-details-marker { display: none; }
.svc__t {
  font-family: var(--font-display); font-stretch: 80%; font-weight: 700; text-transform: uppercase;
  font-size: 19px; line-height: 1.15; letter-spacing: .01em; transition: color .2s, transform .3s var(--ease);
}
.svc summary:hover .svc__t { transform: translateX(4px); }
.svc__i { position: relative; width: 18px; height: 18px; justify-self: end; transition: transform .3s var(--ease); }
.svc__i::before, .svc__i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--ink); transition: background .2s; }
.svc__i::after { transform: rotate(90deg); }
.svc[open] .svc__i { transform: rotate(45deg); }
.svc[open] .svc__i::before, .svc[open] .svc__i::after { background: var(--signal-ink); }
.svc[open] .svc__t { color: var(--signal-ink); }
.svc__b { padding: 0 32px 18px 0; }
.svc__b p { font-size: 16px; color: var(--ink-2); }
.svc[open] .svc__b { animation: svc-open .35s var(--ease); }
@keyframes svc-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (min-width: 900px) {
  /* titres alignés par le haut : les 3 triangles sur la même ligne */
  .fams { grid-template-columns: repeat(3, 1fr); gap: 48px; align-items: start; }
  .fam__h { font-size: clamp(32px, 3.5vw, 48px); }
}

/* ---------- Particuliers / Pros ---------- */
.who__grid { display: grid; gap: 48px; margin-top: clamp(40px, 6vw, 72px); }
.who__col { border-top: 2px solid var(--signal); padding-top: 26px; }
.who__h { font: 800 30px/1 var(--font-display); font-stretch: 72%; text-transform: uppercase; color: var(--signal); }
.who__p { margin: 14px 0 22px; font-size: 19px; color: var(--on-dark); max-width: 26rem; }
.ticks li { position: relative; padding: 11px 0 11px 30px; border-bottom: 1px solid rgba(238,235,228,.1); color: var(--on-dark-2); }
.ticks li::before {
  content: ""; position: absolute; left: 2px; top: 19px; width: 12px; height: 11px;
  background: var(--signal); clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
@media (min-width: 900px) { .who__grid { grid-template-columns: 1fr 1fr; gap: 72px; } }

/* ---------- Chantiers ---------- */
.works__grid {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 8px; scrollbar-width: none; scroll-padding-inline: var(--gut);
}
.works__grid::-webkit-scrollbar { display: none; }
.shot {
  position: relative; flex: 0 0 78%; aspect-ratio: 3 / 4; scroll-snap-align: start;
  overflow: hidden; border-radius: var(--r); background: var(--beton-2); cursor: zoom-in;
}
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.shot:hover img { transform: scale(1.03); }
.shot figcaption {
  position: absolute; left: 10px; bottom: 10px; padding: 6px 10px; border-radius: var(--r);
  background: rgba(22,22,20,.82); color: var(--on-dark); font-size: 14px; font-weight: 500;
}
@media (min-width: 768px) {
  .works__grid {
    display: grid; overflow: visible; gap: 16px;
    grid-template-columns: repeat(3, 1fr); grid-auto-rows: clamp(170px, 20vw, 250px);
  }
  .shot { aspect-ratio: auto; }
  .w-allee    { grid-column: 1; grid-row: 1 / span 2; }
  .w-escalier { grid-column: 2; grid-row: 1 / span 2; }
  .w-toiture  { grid-column: 3; grid-row: 1 / span 3; }
  .w-haie     { grid-column: 1 / span 2; grid-row: 3; }
}

/* ---------- Méthode ---------- */
.how { background: var(--beton-2) var(--grain); }
.how__list { display: grid; gap: 34px; margin-top: clamp(40px, 6vw, 72px); counter-reset: how; }
.how__list li { position: relative; padding-left: 34px; }
.how__list li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 14px;
  background: var(--signal); clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.how__h { font: 800 clamp(26px, 3.4vw, 36px)/1 var(--font-display); font-stretch: 72%; text-transform: uppercase; margin-bottom: 12px; }
.how__list p { color: var(--ink-2); max-width: 22rem; }
@media (min-width: 900px) {
  .how__list { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .how__list li { padding: 0 32px 0 34px; border-left: 1px solid var(--line); margin-left: -1px; }
  .how__list li:first-child { border-left: 0; }
  .how__list li:not(:first-child) { padding-left: 66px; }
  .how__list li:not(:first-child)::before { left: 32px; }
}

/* ---------- Avis : carrousel ---------- */
.caro { overflow: hidden; touch-action: pan-y; }
.caro__track { display: flex; gap: 16px; transition: transform .6s var(--ease); will-change: transform; }
.qcard {
  flex: 0 0 86%; display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
  padding: 26px 0 0; border-top: 2px solid var(--signal); user-select: none;
}
.qcard blockquote { font: 700 clamp(24px, 3vw, 32px)/1.12 var(--font-display); font-stretch: 85%; color: var(--on-dark); }
.qcard figcaption { font-size: 15px; color: var(--on-dark-2); }
.qcard figcaption::before { content: "— "; color: var(--signal); }
.caro__ctrl { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 32px; }
.caro__dots { display: flex; gap: 6px; }
.caro__dots button { width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.caro__dots button::after { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 3px; margin-top: -1.5px; background: rgba(238,235,228,.25); transition: background .25s; }
.caro__dots button[aria-current="true"]::after { background: var(--signal); }
.caro__arrows { display: flex; gap: 10px; }
.caro__btn { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid rgba(238,235,228,.3); background: none; color: var(--on-dark); font-size: 18px; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.caro__btn:hover { background: var(--signal); border-color: var(--signal); color: var(--ink); }
@media (min-width: 900px) {
  .caro__track { gap: 40px; }
  .qcard { flex-basis: calc((100% - 80px) / 3); min-height: 300px; }
}
.avis .link-arrow { margin-top: 40px; color: var(--on-dark); }

/* ---------- Zone : schéma ---------- */
.zone__grid { display: grid; gap: 48px; align-items: center; }
.towns { display: flex; flex-wrap: wrap; gap: 6px 0; }
.towns li { font: 700 16px/1.3 var(--font-display); font-stretch: 80%; text-transform: uppercase; color: var(--ink-2); }
.towns li:not(:last-child)::after { content: "·"; margin: 0 .45em; color: var(--signal); }
@media (min-width: 900px) {
  .towns { display: block; columns: 2; column-gap: 24px; }
  .towns li { padding: 8px 0; border-bottom: 1px solid var(--line); break-inside: avoid; font-size: 17px; }
  .towns li:not(:last-child)::after { content: none; }
}
.towns .is-home { color: var(--ink); }
.towns .is-home::before { content: ""; display: inline-block; width: 11px; height: 10px; margin-right: 8px; background: var(--signal); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.zone__more { margin-top: 28px; font-size: 17px; max-width: 34rem; }
.zmap { width: 100%; max-width: 580px; margin-inline: auto; overflow: visible; }
.zmap text { font: 500 12.5px var(--font-body); fill: var(--ink); }
.z-ring { fill: none; stroke: var(--ink); stroke-opacity: .25; stroke-dasharray: 3 6; }
.z-rl { font-size: 11px !important; fill: var(--ink-2) !important; }
.z-dot { fill: var(--ink); }
.z-home { fill: var(--signal); stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.z-home-l { font: 800 15px var(--font-display) !important; font-stretch: 80%; text-transform: uppercase; }
.z-pulse { fill: none; stroke: var(--signal); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: zpulse 2.8s var(--ease) infinite; }
@keyframes zpulse { from { transform: scale(1); opacity: .9; } to { transform: scale(5.5); opacity: 0; } }
.zone__head { margin-bottom: 0; }
@media (min-width: 900px) {
  .zone__grid { grid-template-columns: 1fr 1.05fr; grid-template-rows: auto 1fr; column-gap: 72px; row-gap: 36px; }
  .zone__head { grid-column: 1; grid-row: 1; }
  .zone__list { grid-column: 1; grid-row: 2; align-self: start; }
  .zmap { grid-column: 2; grid-row: 1 / span 2; }
  .zone__head .sec__note { text-align: left; }
  .zone__head { grid-template-columns: 1fr; }
}

/* ---------- Contact ---------- */
.contact { background: var(--beton-2) var(--grain); }
.contact__grid { display: grid; gap: 56px; }
.bigtel {
  display: inline-block; margin-top: clamp(26px, 4vw, 40px);
  font: 800 clamp(46px, 10vw, 112px)/1 var(--font-display); font-stretch: 72%;
  text-decoration: none; color: var(--ink); border-bottom: .07em solid var(--signal);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bigtel:hover { color: var(--signal-ink); }
.coords { margin-top: 40px; display: grid; gap: 0; max-width: 34rem; }
.coords li { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.coords__l { font-size: 14px; color: var(--ink-2); padding-top: 2px; }
.coords a { font-weight: 600; word-break: break-all; }
.side__h { font: 800 30px/1 var(--font-display); font-stretch: 72%; text-transform: uppercase; margin-bottom: 18px; }
.hours li { display: flex; justify-content: space-between; padding: 10px 12px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.hours li.is-today { background: var(--ink); color: var(--on-dark); border-radius: var(--r); font-weight: 600; }
.hours li.is-today + li { border-top-color: transparent; }
.map { margin-top: 28px; border: 1px dashed rgba(22,22,20,.35); border-radius: var(--r); padding: 22px; display: grid; gap: 10px; justify-items: start; min-height: 150px; align-content: center; }
.map__btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: var(--ink); color: var(--on-dark); border: 0; border-radius: var(--r);
  font: 600 15px/1 var(--font-body); padding: 13px 18px;
}
.map__note { font-size: 13px; color: var(--ink-2); }
.map.is-loaded { padding: 0; border: 0; display: block; }
.map iframe { display: block; width: 100%; height: 300px; border: 0; border-radius: var(--r); filter: grayscale(.4) contrast(1.05); }
@media (min-width: 900px) {
  .contact__grid { grid-template-columns: 1.35fr 1fr; gap: 80px; align-items: start; }
}

/* ---------- Footer : 3 colonnes ---------- */
.ftr { background: var(--ink); color: var(--on-dark-2); padding: 64px 0 calc(20px + env(safe-area-inset-bottom)); font-size: 15px; }
.ftr__grid { display: grid; gap: 40px; }
.ftr__badge { width: 84px; height: 84px; margin-bottom: 16px; }
.ftr__name { font: 800 26px/1 var(--font-display); font-stretch: 75%; text-transform: uppercase; color: var(--on-dark); margin-bottom: 10px; }
.ftr__brand p:last-child { max-width: 22rem; }
.ftr__h { font: 600 13px/1 var(--font-body); letter-spacing: .04em; color: var(--signal); margin-bottom: 16px; }
.ftr__list li { padding: 5px 0; }
.ftr a { text-decoration: none; transition: color .2s; }
.ftr a:hover { color: var(--on-dark); }
.ftr__tel { font: 800 26px/1 var(--font-display); font-stretch: 75%; color: var(--on-dark); }
.ftr__legal { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(238,235,228,.12); font-size: 13px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; }
@media (min-width: 900px) {
  .ftr { padding-bottom: 40px; }
  .ftr__grid { grid-template-columns: 1.4fr 1fr 1.2fr; gap: 56px; }
}

/* ---------- Bouton d'appel flottant (mobile) ---------- */
.fab {
  position: fixed; z-index: 45; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
  height: 60px; min-width: 60px; padding: 0 20px; border-radius: 30px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--signal); color: var(--ink); text-decoration: none;
  font: 700 16px/1 var(--font-body); white-space: nowrap;
  box-shadow: 0 10px 26px rgba(0,0,0,.3), 0 2px 6px rgba(0,0,0,.2);
  transform: translateY(calc(100% + 40px)); transition: transform .4s var(--ease), padding .45s var(--ease), gap .45s var(--ease);
}
.fab .ico { width: 22px; height: 22px; }
.fab__txt { display: inline-block; max-width: 150px; overflow: hidden; transition: max-width .45s var(--ease), opacity .3s; }
.fab.is-on { transform: none; }
.fab.is-small { padding: 0; gap: 0; width: 60px; }
.fab.is-small .fab__txt { max-width: 0; opacity: 0; }
.fab.is-small::after { /* une seule onde quand il se rétracte */
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--signal);
  animation: fab-ring 1.2s var(--ease) .3s 2 both;
}
@keyframes fab-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
.fab:active { transform: scale(.95); }
@media (min-width: 960px) { .fab { display: none; } }

/* ---------- Indicateur de progression ---------- */
.rail {
  --prog: 0;
  position: fixed; z-index: 44; right: 0; top: var(--nav-h); bottom: 0; width: 4px; pointer-events: none;
}
.rail__track { position: absolute; inset: 0; background: rgba(128,126,118,.22); overflow: hidden; }
.rail__fill { position: absolute; inset: 0; background: var(--signal); transform-origin: top; transform: scaleY(var(--prog)); }
.rail__head, .rail__tick { display: none; }
@media (min-width: 960px) {
  .rail { right: 22px; top: calc(var(--nav-h) + 28px); bottom: 28px; width: 2px; pointer-events: auto; }
  .rail__track { border-radius: 2px; }
  .rail__head {
    display: block; position: absolute; left: 50%; top: calc(var(--prog) * 100%);
    width: 14px; height: 12px; margin: -6px 0 0 -7px; background: var(--signal);
    clip-path: polygon(0 0, 100% 0, 50% 100%); /* triangle du logo, pointe vers le bas */
  }
  .rail__tick {
    display: block; position: absolute; right: -5px; width: 12px; height: 12px; margin-top: -6px;
    top: calc(var(--at, 0) * 100%); text-decoration: none;
  }
  .rail__tick::before {
    content: ""; position: absolute; right: 3px; top: 5px; width: 8px; height: 2px;
    background: rgba(128,126,118,.6); transition: background .3s, width .3s var(--ease);
  }
  .rail__tick.is-passed::before { background: var(--signal); }
  .rail__tick:hover::before { width: 14px; }
  .rail__tick span {
    position: absolute; right: 22px; top: 50%; transform: translate(6px, -50%); opacity: 0;
    padding: 5px 9px; border-radius: var(--r); background: var(--ink); color: var(--on-dark);
    font: 600 12.5px/1 var(--font-body); white-space: nowrap; pointer-events: none;
    transition: opacity .2s, transform .25s var(--ease);
  }
  .rail__tick:hover span, .rail__tick.is-current span { opacity: 1; transform: translate(0, -50%); }
  .rail__tick.is-current span { background: var(--signal); color: var(--ink); }
  .rail:not(:hover) .rail__tick.is-current span { opacity: .0; }
  .rail.is-moving .rail__tick.is-current span { opacity: 1; }
}

/* ---------- Lightbox ---------- */
.lb {
  position: fixed; inset: 0; z-index: 90; background: rgba(12,12,11,.94);
  display: grid; place-items: center; padding: 60px 12px;
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s linear .25s;
}
.lb.is-open { opacity: 1; visibility: visible; transition: opacity .25s; }
.lb__stage img { max-width: min(92vw, 900px); max-height: 82vh; width: auto; border-radius: var(--r); }
.lb__btn {
  position: absolute; width: 48px; height: 48px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(238,235,228,.12); color: var(--on-dark); font-size: 20px;
}
.lb__btn:hover { background: var(--signal); color: var(--ink); }
.lb__close { top: 14px; right: 14px; }
.lb__prev { left: 12px; top: 50%; margin-top: -24px; }
.lb__next { right: 12px; top: 50%; margin-top: -24px; }

/* ---------- Mouvement réduit : pas de jet, tout est propre d'office ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .lane__jet { display: none; }
  .lane__clean { --p: 108%; }
}