/* ============================================================
   CINEMATIC SITE STARTER — structural + motion CSS
   ------------------------------------------------------------
   The :root block below is your BRAND CHARTER. These are the only
   values you (or Claude) should change to reskin the whole site —
   colours, fonts, spacing, accent. They start NEUTRAL on purpose.
   Everything under "STRUCTURAL CSS" drives the scrub engine,
   sections, and motion. You normally never touch it.
   ============================================================ */

:root {
  /* ---- Fonds sombres (du noir profond du logo CK) ---- */
  --bg:          #121110;   /* fond principal */
  --bg-2:        #1B1917;   /* bandes alternées / surfaces */
  --bg-3:        #232020;   /* cartes / élévation */
  --ink:         #0E0D0C;   /* le plus profond (stats / footer) */

  /* ---- Textes (crème chaud — jamais blanc pur) ---- */
  --fg:          #F6EFE2;   /* titres / texte fort */
  --fg-soft:     #ECE3D0;   /* texte courant */
  --muted:       #A89E8C;   /* labels, légal, captions */

  /* ---- Accent orange (prélevé du logo CK) ---- */
  --accent:        #F47C20; /* base — l'orange de la marque */
  --accent-bright: #FF8C42; /* hover / halo / grands titres */
  --accent-deep:   #C05B10; /* pressé / soulignés */
  --accent-ink:    #1A0E06; /* texte posé sur fond orange */
  --line:        rgba(236, 227, 208, 0.14); /* filets depuis le crème */

  /* ---- Layout ---- */
  --maxw:        1240px;
  --pad:         clamp(22px, 5vw, 80px);

  /* ---- Motion + typo ---- */
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --serif:       "Cormorant Garamond", Georgia, "Times New Roman", serif; /* titres */
  --sans:        "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif; /* corps / UI */
}

/* ============================================================
   STRUCTURAL CSS — drives the engine. Rarely needs editing.
   ============================================================ */

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 500; line-height: 1.04; letter-spacing: -0.01em; }
em { font-style: italic; }

/* ---- Shared bits ---------------------------------------------------- */
.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 22px;
}
.eyebrow--light { color: var(--fg-soft); }
.eyebrow--center { text-align: center; }

.lede   { font-size: clamp(16px, 1.4vw, 19px); color: var(--fg-soft); max-width: 46ch; margin: 26px 0 0; line-height: 1.75; }
.meta   { font-size: 14px; color: var(--muted); letter-spacing: 0.02em; margin: 20px 0 0; }

.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  padding: 16px 30px; border-radius: 999px;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn--light { color: var(--fg); border: 1px solid rgba(245,244,242,0.45); }
.btn--light:hover { background: var(--fg); color: var(--ink); transform: translateY(-2px); }
.btn--solid { color: var(--ink); background: var(--fg); margin-top: 8px; }
.btn--solid:hover { background: var(--accent); color: var(--ink); transform: translateY(-2px); }

/* ---- Scroll progress ------------------------------------------------ */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: var(--accent); z-index: 200; transition: width .1s linear;
}

/* ---- Nav ------------------------------------------------------------ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 150;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(20px, 3vw, 48px);
  padding: 22px var(--pad);
  transition: background .5s var(--ease), padding .5s var(--ease), backdrop-filter .5s var(--ease);
}
.nav.is-scrolled {
  background: rgba(10, 10, 11, 0.72);
  backdrop-filter: blur(14px) saturate(120%);
  padding-top: 16px; padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.nav__brand {
  font-family: var(--sans); font-weight: 500;
  font-size: 16px; letter-spacing: 0.42em; padding-left: 0.42em;
  color: var(--fg);
}
.nav__links { display: flex; gap: clamp(20px, 2.2vw, 38px); }
.nav__links a {
  font-size: 12px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-soft); position: relative; padding: 4px 0;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--accent); transition: width .4s var(--ease);
}
.nav__links a:hover { color: var(--fg); }
.nav__links a:hover::after { width: 100%; }
.nav__cta {
  font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg); border: 1px solid rgba(245,244,242,0.4);
  padding: 11px 22px; border-radius: 999px;
  transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.nav__cta:hover { background: var(--fg); color: var(--ink); transform: translateY(-1px); }

/* ============================================================
   SCRUB HERO
   The .scrub height controls fly-through speed. Rule of thumb:
   height_vh  ≈  frames × 4.6   (a STARTING point, then judge by eye —
   too fast → raise toward ×6, too slow → lower toward ×3).

   DEFAULT = 160vh, on purpose: out of the box the starter ships with a
   SINGLE demo frame (assets/frames/frame-001.jpg, data-frames="1"), so a
   tall hero would be 5+ screens of one static gradient = confusing. Once
   you drop your real frames and bump data-frames to N, raise this to
   ~N × 4.6vh (e.g. 121 frames → 560vh) and tune by eye.
   ============================================================ */
.scrub { position: relative; height: 220vh; background: var(--bg); }
.scrub__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.scrub__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.scrub__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(8,8,10,0.78) 0%, rgba(8,8,10,0.12) 42%, rgba(8,8,10,0) 65%),
    linear-gradient(to bottom, rgba(8,8,10,0.5) 0%, rgba(8,8,10,0) 28%);
}

/* Loader */
.loader {
  position: absolute; inset: 0; z-index: 20;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: var(--bg); transition: opacity .8s var(--ease), visibility .8s;
}
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__brand { font-family: var(--sans); font-size: 14px; letter-spacing: 0.5em; padding-left: 0.5em; color: var(--fg); }
.loader__track { width: 180px; height: 1px; background: var(--line); overflow: hidden; }
.loader__bar { display: block; height: 100%; width: 0; background: var(--accent); transition: width .25s var(--ease); }
.loader__pct { font-family: var(--sans); font-size: 11px; letter-spacing: 0.2em; color: var(--muted); }

/* Caption beats — fade in/out over the moving footage (bottom-left) */
.scrub__beat {
  position: absolute; left: var(--pad); bottom: clamp(64px, 13vh, 140px); z-index: 10;
  max-width: 720px; opacity: 0; will-change: opacity, transform;
}
.scrub__eyebrow {
  font-size: 12px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 18px;
}
.scrub__title {
  font-size: clamp(38px, 6.2vw, 82px); line-height: 0.99; color: var(--fg);
  text-shadow: 0 2px 50px rgba(0,0,0,0.5);
}
.scrub__title em, .scrub__beat-title em { color: var(--accent); font-style: italic; }
.scrub__tagline {
  font-family: var(--serif); font-style: italic; font-size: clamp(18px, 2.2vw, 28px);
  color: var(--fg-soft); margin: 22px 0 0; max-width: 30ch;
}
.scrub__beat-title {
  font-family: var(--serif); font-weight: 500; line-height: 1.02; letter-spacing: -0.01em;
  font-size: clamp(40px, 6.4vw, 92px); color: var(--fg); text-shadow: 0 2px 50px rgba(0,0,0,0.45);
}
.scrub__beat-copy {
  font-size: clamp(16px, 1.45vw, 20px); color: var(--fg-soft);
  margin: 22px 0 0; max-width: 42ch; line-height: 1.7; text-shadow: 0 1px 20px rgba(0,0,0,0.4);
}
.scrub__beat .btn { margin-top: 30px; }

.scrub__cue {
  position: absolute; right: var(--pad); bottom: clamp(48px, 10vh, 96px); z-index: 10;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-soft);
}
.scrub__cue-line { width: 1px; height: 54px; background: linear-gradient(var(--fg-soft), transparent); animation: cuePulse 2.4s var(--ease) infinite; }
@keyframes cuePulse { 0%,100% { opacity: .35; transform: scaleY(.7); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }

/* ============================================================
   EDITORIAL (image + text)
   ============================================================ */
.editorial { padding: clamp(90px, 13vh, 180px) var(--pad); background: var(--bg); }
.editorial--reverse { background: var(--bg-2); }
.editorial__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(36px, 6vw, 90px); align-items: center;
}
.editorial--reverse .editorial__media { order: 2; }
.editorial--reverse .editorial__text { order: 1; }
.editorial__text { max-width: 480px; }
.editorial__title { font-size: clamp(38px, 5.2vw, 76px); }
.editorial__title em { color: var(--accent); }

/* .frame ships with a visual fallback so an un-replaced placeholder never reads as a
   bare black rectangle. Replace the editorial images at GUIDE step 4 bis. */
.frame {
  margin: 0; overflow: hidden; border-radius: 4px; box-shadow: 0 40px 90px -40px rgba(0,0,0,0.7);
  position: relative; aspect-ratio: 16 / 9; background: var(--bg-3);
  background-image: repeating-linear-gradient(45deg, rgba(245,244,242,0.018) 0 14px, transparent 14px 28px);
}
.frame::after {
  content: "Image à venir"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); opacity: 0.5; pointer-events: none;
}
.frame img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.editorial__media:hover .frame img { transform: scale(1.04); }

/* ============================================================
   FULL-BLEED IMAGE SECTIONS
   ============================================================ */
.bleed { position: relative; min-height: 92vh; display: flex; align-items: center; overflow: hidden; }
.bleed--tall { min-height: 100vh; }
.bleed__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bleed__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(8,8,10,0.88) 0%, rgba(8,8,10,0.32) 38%, rgba(8,8,10,0) 60%),
    linear-gradient(to right, rgba(8,8,10,0.55) 0%, rgba(8,8,10,0.12) 50%, rgba(8,8,10,0) 80%);
}
.bleed__content { position: relative; z-index: 2; max-width: 640px; padding: 0 var(--pad); }
.bleed__content--low { align-self: flex-end; padding-bottom: clamp(60px, 12vh, 120px); }
.bleed__title { font-size: clamp(40px, 6vw, 92px); color: var(--fg); text-shadow: 0 2px 40px rgba(0,0,0,0.5); }
.bleed__title em { color: var(--fg); }
.bleed__copy { font-size: clamp(16px, 1.4vw, 19px); color: var(--fg); max-width: 46ch; margin: 24px 0 36px; line-height: 1.75; text-shadow: 0 1px 24px rgba(0,0,0,0.85), 0 1px 4px rgba(0,0,0,0.6); }
.bleed__specs { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(28px, 4vw, 56px); flex-wrap: wrap; }
.bleed__specs li { display: flex; flex-direction: column; gap: 6px; padding-top: 18px; border-top: 1px solid rgba(245,244,242,0.22); min-width: 150px; }
.bleed__spec-k { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.bleed__spec-v { font-family: var(--serif); font-size: clamp(18px, 1.7vw, 22px); color: var(--fg); }

/* ============================================================
   AMENITIES / FEATURE LIST
   ============================================================ */
.amenities { background: var(--bg-2); padding: clamp(90px, 14vh, 180px) var(--pad); }
.amenities__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(40px, 6vw, 96px); align-items: start;
}
.amenities__head { position: sticky; top: 120px; }
.amenities__title { font-size: clamp(34px, 4.4vw, 64px); color: var(--fg); }
.amenities__title em { color: var(--accent); }
.amenities__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(28px, 4vw, 56px);
}
.amenity {
  display: flex; gap: 20px; align-items: baseline;
  padding: 24px 0; border-bottom: 1px solid var(--line);
}
.amenity__index { font-family: var(--serif); font-size: 15px; color: var(--accent); letter-spacing: 0.04em; flex: 0 0 auto; min-width: 26px; }
.amenity__text { font-size: clamp(15px, 1.15vw, 17px); color: var(--fg-soft); line-height: 1.5; }

/* ============================================================
   STATS
   ============================================================ */
.stats { background: var(--ink); padding: clamp(70px, 11vh, 130px) var(--pad); }
.stats__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 4vw, 60px);
}
.stat { text-align: left; border-left: 1px solid var(--line); padding-left: 26px; }
.stat__num { display: block; font-family: var(--serif); font-weight: 500; font-size: clamp(46px, 5.5vw, 76px); line-height: 1; color: var(--fg); }
.stat__unit { font-size: 0.42em; color: var(--accent); letter-spacing: 0.02em; }
.stat__label { display: block; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 16px; }

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto { background: var(--bg); padding: clamp(110px, 18vh, 220px) var(--pad); }
.manifesto__inner { max-width: 940px; margin: 0 auto; text-align: center; }
.manifesto__title { font-size: clamp(40px, 6.5vw, 104px); color: var(--fg); }
.manifesto__title em { color: var(--accent); }
.manifesto__copy { font-family: var(--serif); font-style: italic; font-size: clamp(19px, 2.2vw, 30px); color: var(--fg-soft); margin: 34px auto 0; max-width: 56ch; line-height: 1.5; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact { background: var(--bg-2); padding: clamp(90px, 14vh, 180px) var(--pad); }
.contact__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 110px); align-items: center;
}
.contact__title { font-size: clamp(34px, 4.6vw, 64px); color: var(--fg); margin-top: 8px; }
.contact__copy { color: var(--fg-soft); max-width: 42ch; margin: 26px 0 0; }
.contact__details { display: flex; flex-direction: column; gap: 4px; }
.contact__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 20px 0; border-bottom: 1px solid var(--line);
  transition: padding-left .35s var(--ease);
}
.contact__row:not(.contact__row--static):hover { padding-left: 10px; }
.contact__label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.contact__value { font-family: var(--serif); font-size: clamp(18px, 1.8vw, 24px); color: var(--fg); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--ink); padding: clamp(60px, 9vh, 110px) var(--pad) 40px; }
.footer__inner { max-width: var(--maxw); margin: 0 auto; text-align: center; padding-bottom: 50px; border-bottom: 1px solid var(--line); }
.footer__brand { font-family: var(--serif); font-size: clamp(32px, 4vw, 52px); color: var(--fg); }
.footer__tagline { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--muted); margin: 14px 0 0; }
.footer__base { max-width: var(--maxw); margin: 32px auto 0; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer__legal { font-size: 12px; letter-spacing: 0.04em; color: var(--muted); }

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ============================================================
   MOTION LAYER (subtle, premium micro-interactions)
   All disabled under prefers-reduced-motion (media query at end).
   ============================================================ */

/* Masked line-by-line reveal for section titles (built in JS) */
.ml-reveal .ml-line {
  overflow: hidden;
  padding-bottom: 0.04em;
  margin-bottom: -0.04em;
}
.ml-reveal .ml-line__inner {
  display: block;
  transform: translateY(110%);
  transition: transform 0.9s var(--ease);
  transition-delay: var(--ml-delay, 0s);
  will-change: transform;
}
.ml-reveal.is-shown .ml-line__inner { transform: translateY(0); }

/* Eyebrows above masked titles: gentle clip-up + fade */
.ml-eyebrow {
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  transition: clip-path 0.7s var(--ease), opacity 0.7s var(--ease);
}
.ml-eyebrow.is-shown { clip-path: inset(0 0 0 0); opacity: 1; }

/* Animated counters (stats) */
.stat__num.is-counting { font-variant-numeric: tabular-nums; }

/* Parallax media (full-bleed images). JS sets --py (px). */
.bleed__img {
  will-change: transform;
  transform: translate3d(0, var(--py, 0px), 0) scale(1.12);
}

/* CTA / button press feedback */
.btn:active { transform: translateY(0) scale(0.98); transition-duration: 0.12s; }
.nav__cta:active { transform: translateY(0) scale(0.98); transition-duration: 0.12s; }
.btn--light:active { transform: scale(0.98); }

/* Intro load reveal (nav) */
body.intro-ready .nav { opacity: 0; transform: translateY(-12px); }
body.intro-ready.is-loaded .nav {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .editorial__inner, .contact__inner { grid-template-columns: 1fr; gap: 40px; }
  .editorial--reverse .editorial__media { order: 1; }
  .editorial--reverse .editorial__text { order: 2; }
  .stats__inner { grid-template-columns: repeat(2, 1fr); gap: 40px 30px; }
  .amenities__inner { grid-template-columns: 1fr; gap: 44px; }
  .amenities__head { position: static; }
  .amenities__list { grid-template-columns: 1fr; }
  .nav__links { display: none; }
}
/* 🔴 820px = le breakpoint JS isSmall : sous cette largeur le scrub passe en
   STATIQUE (1 frame fixe, voir script.js). On DOIT y ramener le hero à 100vh,
   sinon la section garde sa hauteur N×4.6vh et le viewer scrolle plusieurs
   écrans de vide sur une image figée. La coupure CSS suit le breakpoint JS. */
@media (max-width: 820px) {
  .scrub { height: 100vh; }
}
@media (max-width: 560px) {
  .stats__inner { grid-template-columns: 1fr; }
  .footer__base { flex-direction: column; text-align: center; align-items: center; }
  .nav__cta { display: none; }
  .scrub { height: 100vh; }
  .bleed__specs { gap: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .ml-reveal .ml-line { overflow: visible; padding-bottom: 0; margin-bottom: 0; }
  .ml-reveal .ml-line__inner { transform: none !important; transition: none !important; }
  .ml-eyebrow { clip-path: none !important; opacity: 1 !important; transition: none !important; }
  .bleed__img { transform: none !important; will-change: auto; }
  .btn:active, .nav__cta:active, .btn--light:active { transform: none !important; }
  body.intro-ready .nav { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================
   CK SERVICES COUVERTURE — COMPOSANTS (Phase 1)
   ============================================================ */

/* ---- Header : logo + actions ---- */
.nav__brand { display: inline-flex; align-items: center; gap: 0; padding-left: 0; letter-spacing: normal; }
.nav__logo { height: 54px; width: auto; display: block; transition: height .5s var(--ease); filter: drop-shadow(0 2px 10px rgba(0,0,0,0.4)); }
.nav.is-scrolled .nav__logo { height: 46px; }
.nav__actions { display: flex; align-items: center; gap: 20px; }
.nav__phone {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: 0.01em; color: var(--fg);
  transition: color .3s var(--ease);
}
.nav__phone svg { width: 16px; height: 16px; fill: var(--accent); flex: 0 0 auto; }
.nav__phone:hover { color: var(--accent-bright); }

/* ---- Bouton CTA orange ---- */
.btn--cta { color: var(--accent-ink); background: var(--accent); border: none; }
.btn--cta:hover { background: var(--accent-bright); color: var(--accent-ink); transform: translateY(-2px); box-shadow: 0 16px 34px -14px rgba(232,112,31,0.65); }
.nav__cta.btn--cta { color: var(--accent-ink); background: var(--accent); }
.nav__cta.btn--cta:hover { color: var(--accent-ink); background: var(--accent-bright); }

/* ---- HERO (Phase 1 : image fixe ; Phase 2 : scroll-scrub vidéo) ---- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background: var(--ink); }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 52% 34%; }
.hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(14,13,12,0.94) 0%, rgba(14,13,12,0.5) 34%, rgba(14,13,12,0.1) 64%, rgba(14,13,12,0.34) 100%),
    linear-gradient(to right, rgba(14,13,12,0.74) 0%, rgba(14,13,12,0.2) 50%, rgba(14,13,12,0) 80%);
}
.hero__content { position: relative; z-index: 3; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad) clamp(72px, 13vh, 140px); }
.hero__eyebrow {
  font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--accent-bright); margin: 0 0 24px; display: flex; align-items: center; gap: 14px;
}
.hero__eyebrow::before { content: ""; width: 40px; height: 1px; background: var(--accent); }
.hero__title { font-size: clamp(46px, 7.4vw, 110px); line-height: 0.97; color: var(--fg); margin: 0; max-width: 15ch; text-shadow: 0 6px 60px rgba(0,0,0,0.55); }
.hero__title em { color: var(--accent); font-style: italic; }
.hero__tagline { font-family: var(--serif); font-style: italic; font-size: clamp(19px, 2.2vw, 30px); color: var(--fg-soft); margin: 28px 0 0; max-width: 36ch; line-height: 1.4; text-shadow: 0 2px 24px rgba(0,0,0,0.5); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 42px; }
.hero__cue {
  position: absolute; right: var(--pad); bottom: clamp(40px, 9vh, 90px); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-soft);
}
.hero__cue-line { width: 1px; height: 52px; background: linear-gradient(var(--fg-soft), transparent); animation: cuePulse 2.4s var(--ease) infinite; }

/* ---- Bande de confiance ---- */
.trust { background: var(--ink); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 24px var(--pad);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px;
}
.trust__item { display: flex; align-items: center; gap: 12px; font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--fg-soft); letter-spacing: 0.01em; }
.trust__item svg { width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.trust__item strong { color: var(--fg); font-weight: 700; }

/* ---- Barre d'action fixe mobile ---- */
.mobilebar { display: none; }
.mobilebar__btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 10px; font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: 0.01em; transition: filter .2s var(--ease); }
.mobilebar__btn svg { width: 17px; height: 17px; flex: 0 0 auto; }
.mobilebar__btn--call { color: var(--fg); }
.mobilebar__btn--call svg { fill: var(--accent); }
.mobilebar__btn--devis { background: var(--accent); color: var(--accent-ink); }
.mobilebar__btn:active { filter: brightness(0.9); }

/* ---- Responsive header / hero / trust ---- */
@media (max-width: 600px) {
  .nav { padding-left: 18px; padding-right: 18px; }
  .nav__logo { height: 40px; }
  .nav__actions { display: none; }                   /* actions déplacées dans la barre fixe basse */
  .hero__content { padding-bottom: clamp(48px, 10vh, 90px); padding-left: 18px; padding-right: 18px; }
  .hero__title { font-size: clamp(26px, 7vw, 42px); max-width: 100%; overflow-wrap: break-word; line-height: 1.04; }
  .hero__tagline { font-size: 17px; }
  .hero__img { object-position: 56% 30%; }
  .hero__actions .btn { flex: 1 1 100%; justify-content: center; }
  .hero__cue { display: none; }
  .trust__item { width: 100%; font-size: 13.5px; }
  .mobilebar { display: grid; grid-template-columns: 1fr 1.25fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 160; background: rgba(14,13,12,0.96); backdrop-filter: blur(10px); border-top: 1px solid var(--line); }
  body { padding-bottom: 58px; }                      /* place pour la barre fixe */
}

/* ============================================================
   SERVICES — grille de cartes
   ============================================================ */
.services { background: var(--bg); padding: clamp(80px, 12vh, 160px) var(--pad); }
.services__inner { max-width: var(--maxw); margin: 0 auto; }
.services__head { max-width: 760px; margin: 0 0 clamp(40px, 6vh, 72px); }
.services__title { font-size: clamp(34px, 4.6vw, 64px); color: var(--fg); }
.services__title em { color: var(--accent); }
.services__intro { font-size: clamp(16px, 1.3vw, 18px); color: var(--fg-soft); margin: 22px 0 0; max-width: 60ch; line-height: 1.7; }
.services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.service-card {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: 30px 28px 26px; border-radius: 10px;
  background: var(--bg-2); border: 1px solid var(--line);
  transition: transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.service-card:hover { transform: translateY(-4px); border-color: rgba(232,112,31,0.5); background: var(--bg-3); box-shadow: 0 30px 60px -40px rgba(0,0,0,0.8); }
.service-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.service-card__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; background: rgba(232,112,31,0.12); transition: background .4s var(--ease); }
.service-card:hover .service-card__icon { background: rgba(232,112,31,0.2); }
.service-card__icon svg { width: 24px; height: 24px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.service-card__title { font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1.15; color: var(--fg); letter-spacing: -0.01em; }
.service-card__desc { font-size: 14.5px; color: var(--fg-soft); line-height: 1.6; margin: 0; flex: 1 1 auto; }
.service-card__more { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-top: 6px; }
.service-card__more svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease); }
.service-card:hover .service-card__more svg { transform: translateX(4px); }
.service-card--urgent { border-color: rgba(232,112,31,0.45); background: linear-gradient(180deg, rgba(232,112,31,0.06), var(--bg-2)); }
.service-card__tag { position: absolute; top: 18px; right: 18px; font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent); padding: 4px 9px; border-radius: 999px; }
@media (max-width: 920px) { .services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .services__grid { grid-template-columns: 1fr; } }

/* ============================================================
   SVC — Grille "Nos prestations" v2 (refonte photo)
   Branché sur les tokens du :root. Section isolée.
   ============================================================ */

/* Filtre chips */
.svc-filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 0;
}
.svc-chip {
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--fg-soft);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}
.svc-chip:hover { border-color: var(--accent); color: var(--fg); }
.svc-chip.is-active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.svc-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Accroche dynamique */
.svc-accroche {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 18px 0 32px;
  font-family: var(--sans);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.svc-accroche__cta {
  color: var(--accent);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.svc-accroche__cta::after { content: " →"; }
.svc-accroche__cta:hover { color: var(--accent-bright); }

/* Grille */
.svc-grid {
  display: grid;
  gap: clamp(16px, 2vw, 28px);
  grid-template-columns: repeat(3, 1fr);
  perspective: 1100px;
}

/* Tilt 3D au survol (cartes services uniquement) */
.ck-tilt { position: relative; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease; will-change: transform; }
.ck-tilt > *:not(.ck-tilt__glare) { transform: translateZ(14px); }
.ck-tilt__glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; mix-blend-mode: screen; transition: opacity .3s ease; transform: translateZ(20px); background: radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(255,228,170,.26), rgba(255,180,90,0) 60%); }
@media (hover: none), (pointer: coarse) { .ck-tilt { transform: none !important; } .ck-tilt__glare { display: none; } }
@media (prefers-reduced-motion: reduce) { .ck-tilt { transform: none !important; transition: none; } .ck-tilt__glare { display: none; } }

/* Cartes */
.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow 200ms var(--ease);
}

/* Photo */
.svc-card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  flex-shrink: 0;
}
.svc-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms var(--ease);
}

/* Badge urgent */
.svc-card__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  z-index: 1;
}

/* Corps */
.svc-card__body {
  padding: clamp(18px, 2vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.svc-card__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.15;
  color: var(--fg);
  letter-spacing: -0.01em;
  margin: 0;
}
.svc-card__desc {
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--fg-soft);
  line-height: 1.6;
  margin: 0;
}

/* Toggle "Ce que ça comprend" — visible tactile uniquement */
.svc-card__toggle {
  display: none;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0;
  text-align: left;
}
.svc-card__toggle::before { content: "+ "; color: var(--accent); }
.svc-card__toggle[aria-expanded="true"]::before { content: "— "; }

/* Liste "Ce que ça comprend" */
.svc-card__include {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 240ms var(--ease), opacity 240ms var(--ease);
}
.svc-card__include li {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--fg-soft);
  line-height: 1.6;
  padding: 2px 0;
}
.svc-card__include li::before {
  content: "— ";
  color: var(--accent);
  font-weight: 700;
}

/* Lien "En savoir plus" */
.svc-card__link {
  display: inline-flex;
  align-items: center;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  margin-top: auto;
  padding-top: 4px;
  transition: color 200ms var(--ease);
}
.svc-card__link::after { content: " →"; display: inline-block; transition: transform 200ms var(--ease); }
.svc-card__link:hover { color: var(--accent-bright); }
.svc-card__link:hover::after { transform: translateX(4px); }

/* ---- Hover desktop (pointer fin) ---- */
@media (hover: hover) and (pointer: fine) {
  .svc-card { transition: box-shadow 200ms var(--ease), border-color 200ms var(--ease); }
  .svc-card:hover { box-shadow: 0 24px 64px -24px rgba(0,0,0,.65); border-color: rgba(244,124,32,0.35); }

  /* Liste révélée au hover et focus-within */
  .svc-card:hover .svc-card__include,
  .svc-card:focus-within .svc-card__include {
    max-height: 200px;
    opacity: 1;
  }
  /* Toggle masqué sur pointer fin */
  .svc-card__toggle { display: none !important; }
}

/* ---- Tactile (hover:none) ---- */
@media (hover: none) {
  .svc-card__toggle { display: flex; }
  .svc-card__include[data-open="true"] {
    max-height: 200px;
    opacity: 1;
  }
}

/* Responsive grille */
@media (max-width: 1023px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px) {
  .svc-grid { grid-template-columns: 1fr; }
  .svc-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .svc-filter::-webkit-scrollbar { display: none; }
  .svc-chip { scroll-snap-align: start; flex-shrink: 0; }
}

/* Reduced-motion : tout à zéro */
@media (prefers-reduced-motion: reduce) {
  .svc-card,
  .svc-card__media img,
  .svc-card__include,
  .svc-chip,
  .svc-card__link::after,
  .svc-card__toggle { transition: none !important; animation: none !important; }
}

/* ============================================================
   CTA BAND (réutilisable)
   ============================================================ */
.cta-band { background: var(--bg-2); padding: clamp(64px,10vh,120px) var(--pad); }
.cta-band__inner { max-width: 880px; margin: 0 auto; text-align: center; }
.cta-band__title { font-size: clamp(30px,4.4vw,56px); color: var(--fg); }
.cta-band__title em { color: var(--accent); font-style: italic; }
.cta-band__copy { color: var(--fg-soft); font-size: clamp(16px,1.3vw,18px); margin: 18px auto 32px; max-width: 52ch; line-height: 1.7; }
.cta-band__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   FOOTER RÉEL (site)
   ============================================================ */
.site-footer { background: var(--ink); border-top: 1px solid var(--line); padding: clamp(56px,8vh,90px) var(--pad) 32px; }
.site-footer__inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: clamp(32px,5vw,72px); }
.site-footer__brand img { height: 60px; width: auto; margin-bottom: 18px; }
.site-footer__tagline { color: var(--fg-soft); font-size: 14.5px; line-height: 1.7; max-width: 36ch; margin: 0; }
.site-footer__col h4 { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin: 0 0 18px; }
.site-footer__col a, .site-footer__col p { display: block; color: var(--fg-soft); font-size: 14px; line-height: 1.5; margin: 0 0 11px; transition: color .25s var(--ease); }
.site-footer__col a:hover { color: var(--accent-bright); }
.site-footer__base { max-width: var(--maxw); margin: clamp(40px,6vh,64px) auto 0; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.site-footer__base span, .site-footer__base a { font-size: 12.5px; color: var(--muted); }
.site-footer__base a:hover { color: var(--fg-soft); }
@media (max-width: 760px){ .site-footer__inner { grid-template-columns: 1fr; gap: 36px; } }

/* ============================================================
   PAGES SERVICE (détail)
   ============================================================ */
.breadcrumb { max-width: var(--maxw); margin: 0 auto; padding: 108px var(--pad) 0; font-size: 12.5px; color: var(--muted); letter-spacing: 0.02em; }
.breadcrumb a { color: var(--fg-soft); } .breadcrumb a:hover { color: var(--accent); }
.svc-hero { padding: clamp(36px,5vh,60px) var(--pad) clamp(46px,6vh,72px); }
.svc-hero__inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(36px,5vw,72px); align-items: center; }
.svc-hero__eyebrow { color: var(--accent); font-size: 12px; font-weight:600; letter-spacing:0.24em; text-transform:uppercase; margin:0 0 18px; }
.svc-hero__title { font-size: clamp(34px,5vw,68px); color: var(--fg); line-height:1.03; margin:0; }
.svc-hero__title em { color: var(--accent); font-style: italic; }
.svc-hero__lead { color: var(--fg-soft); font-size: clamp(16px,1.4vw,19px); line-height:1.7; margin: 22px 0 30px; max-width: 50ch; }
.svc-hero__media img { width:100%; border-radius:12px; aspect-ratio: 4/3; object-fit:cover; box-shadow: 0 40px 90px -45px rgba(0,0,0,0.85); }
.svc-body { max-width: var(--maxw); margin: 0 auto; padding: clamp(16px,3vh,32px) var(--pad) clamp(56px,8vh,100px); display:grid; grid-template-columns: 1.3fr 0.7fr; gap: clamp(40px,6vw,84px); align-items:start; }
.svc-main h2 { font-family: var(--serif); font-weight:500; font-size: clamp(25px,3vw,38px); color: var(--fg); margin: 0 0 18px; letter-spacing:-0.01em; }
.svc-main h2:not(:first-child){ margin-top: 42px; }
.svc-main p { color: var(--fg-soft); font-size: 16.5px; line-height:1.8; margin:0 0 18px; }
.svc-includes { list-style:none; margin: 6px 0 0; padding:0; display:grid; gap:14px; }
.svc-includes li { display:flex; gap:13px; align-items:flex-start; color: var(--fg-soft); font-size:16px; line-height:1.55; }
.svc-includes svg { flex:0 0 auto; width:22px; height:22px; margin-top:1px; fill:none; stroke: var(--accent); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.svc-aside { position: sticky; top: 104px; background: var(--bg-2); border:1px solid var(--line); border-radius:14px; padding: 28px 26px; }
.svc-aside h3 { font-family: var(--serif); font-size: 22px; color: var(--fg); margin:0 0 8px; }
.svc-aside p { color: var(--fg-soft); font-size:14.5px; line-height:1.6; margin:0 0 20px; }
.svc-aside .btn { width:100%; justify-content:center; margin-bottom:12px; }
.svc-aside__phone { display:block; text-align:center; color: var(--fg); font-weight:600; font-size:19px; font-family:var(--serif); }
.svc-aside__hours { display:block; text-align:center; color: var(--muted); font-size:12.5px; margin-top:6px; }
.related { background: var(--bg-2); padding: clamp(56px,8vh,100px) var(--pad); }
.related__inner { max-width: var(--maxw); margin:0 auto; }
.related__title { font-family: var(--serif); font-weight:500; font-size: clamp(22px,2.4vw,32px); color: var(--fg); margin:0 0 28px; }
.related__grid { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
.related__card { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 24px; border-radius:10px; background: var(--bg-3); border:1px solid var(--line); color:var(--fg); font-family:var(--serif); font-size:18px; transition: border-color .35s var(--ease), transform .35s var(--ease); }
.related__card:hover { border-color: rgba(232,112,31,0.5); transform: translateY(-3px); }
.related__card svg { width:18px;height:18px;flex:0 0 auto; fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width: 860px){ .svc-hero__inner { grid-template-columns:1fr; } .svc-body { grid-template-columns:1fr; } .svc-aside{ position:static; } .related__grid{ grid-template-columns:1fr; } }

/* ============================================================
   POURQUOI CK
   ============================================================ */
.why { background: var(--bg-2); padding: clamp(80px,12vh,160px) var(--pad); }
.why__inner { max-width: var(--maxw); margin:0 auto; }
.why__head { max-width: 760px; margin:0 0 clamp(40px,6vh,64px); }
.why__title { font-size: clamp(32px,4.4vw,60px); color:var(--fg); }
.why__title em { color: var(--accent); font-style:italic; }
.why__intro { color:var(--fg-soft); font-size:clamp(16px,1.3vw,18px); margin:20px 0 0; max-width:58ch; line-height:1.7; }
.why__grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.why-card { padding: 30px 28px; border-radius:10px; background: var(--bg); border:1px solid var(--line); }
.why-card__icon { width:46px;height:46px; display:grid;place-items:center;border-radius:10px;background:rgba(232,112,31,0.12); margin-bottom:18px; }
.why-card__icon svg { width:24px;height:24px;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round; }
.why-card h3 { font-family:var(--serif); font-weight:500; font-size:20px; color:var(--fg); margin:0 0 10px; }
.why-card p { color:var(--fg-soft); font-size:14.5px; line-height:1.6; margin:0; }
@media(max-width:920px){ .why__grid{ grid-template-columns: repeat(2,1fr);} }
@media(max-width:560px){ .why__grid{ grid-template-columns: 1fr;} }

/* ============================================================
   POURQUOI CK — REFONTE PREUVES CHIFFRÉES + BANDEAU FULL-BLEED
   Section isolée. Branché sur les tokens du :root.
   Aucun hex en dur, aucune couleur inventée.
   ============================================================ */

/* Bandeau full-bleed (100vw centré — body a overflow-x:clip) */
.why-banner {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: clamp(360px, 50vh, 560px);
  overflow: hidden;
  border-radius: 12px;
  margin: clamp(40px, 6vh, 72px) 0;
  /* Fade-in au scroll (sans translateY pour ne pas casser le positionnement) */
  opacity: 0;
  transition: opacity 1s var(--ease);
}
.why-banner.is-visible { opacity: 1; }

/* Image : réserve de scale pour la parallaxe — JS pose --why-py */
.why-banner__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.why-banner__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
  transform: translate3d(0, var(--why-py, 0px), 0) scale(1.12);
}

/* Scrim — dégradé sombre, contraste AA garanti sur les chiffres */
.why-banner__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.70) 100%);
  pointer-events: none;
}

/* Liste de stats en overlay */
.why-stats {
  position: relative;
  z-index: 2;
  list-style: none;
  margin: 0;
  padding: clamp(24px, 5vw, 56px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 56px);
  height: 100%;
  box-sizing: border-box;
}

/* Chaque stat : num + suffix sur une ligne, label en dessous */
.why-stat { flex: 0 1 auto; }

.why-stat__num {
  font-family: var(--serif);
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1;
  color: var(--fg);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  display: inline;
}

/* Suffixe (+, /5) : exposant coloré accolé au chiffre */
.why-stat__suffix {
  font-family: var(--serif);
  font-size: clamp(20px, 3vw, 38px);
  line-height: 1;
  color: var(--accent);
  display: inline;
  vertical-align: top;
  padding-top: 0.06em;
  font-variant-numeric: tabular-nums;
}

.why-stat__label {
  font-family: var(--sans);
  font-size: clamp(12px, 1.4vw, 15px);
  color: var(--fg-soft);
  display: block;
  margin-top: 6px;
  max-width: 12ch;
  line-height: 1.3;
}

/* Lien "386 avis Google" */
.why-stat--google .why-stat__label a {
  color: var(--fg-soft);
  text-decoration: underline;
  text-decoration-color: rgba(236, 227, 208, 0.35);
  text-underline-offset: 3px;
  transition: color .3s var(--ease), text-decoration-color .3s var(--ease);
}
.why-stat--google .why-stat__label a:hover { color: var(--fg); text-decoration-color: var(--accent); }
.why-stat--google .why-stat__label a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
  color: var(--fg);
}

/* 6 raisons — grille éditoriale 2 colonnes */
.why-reasons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(32px, 5vw, 72px);
  row-gap: 0;
}

.why-reason {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding-block: clamp(20px, 3vh, 30px);
  border-top: 1px solid var(--line);
}
/* Pas de séparateur sur le premier item de chaque colonne (2 colonnes) */
.why-reason:nth-child(1),
.why-reason:nth-child(2) { border-top: none; }

.why-reason__icon {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3px;
}
.why-reason__icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .2s var(--ease), transform .2s var(--ease);
}

.why-reason__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(17px, 1.4vw, 20px);
  color: var(--fg);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.why-reason__desc {
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--fg-soft);
  line-height: 1.6;
  margin: 0;
}

/* Hover discret icône — desktop pointer fin uniquement */
@media (hover: hover) and (pointer: fine) {
  .why-reason:hover .why-reason__icon svg {
    stroke: var(--accent-bright);
    transform: translateX(2px);
  }
}

/* Responsive — bandeau + raisons */
@media (max-width: 820px) {
  .why-banner {
    height: clamp(240px, 42vw, 360px);
    border-radius: 8px;
    margin: clamp(28px, 4vh, 44px) 0;
  }
  /* Pas de parallaxe sous 820px — image fixe */
  .why-banner__media img { transform: scale(1.12); }
  /* 1 colonne */
  .why-reasons { grid-template-columns: 1fr; }
  /* Rétablir le séparateur sur item 2 (1ère colonne disparue) */
  .why-reason:nth-child(2) { border-top: 1px solid var(--line); }
  .why-stat__num  { font-size: clamp(32px, 8vw, 52px); }
  .why-stat__suffix { font-size: clamp(16px, 4vw, 26px); }
}

@media (max-width: 460px) {
  .why-stats {
    gap: 14px 20px;
    padding: clamp(16px, 4vw, 24px);
    justify-content: flex-start;
  }
  .why-stat__label { font-size: 11px; max-width: 10ch; }
}

/* Reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .why-banner,
  .why-banner.is-visible { opacity: 1 !important; transition: none !important; }
  .why-banner__media img { transform: none !important; will-change: auto; }
}

/* ============================================================
   GALERIE
   ============================================================ */
.gallery { background: var(--bg); padding: clamp(80px,12vh,160px) var(--pad); }
.gallery__inner { max-width: var(--maxw); margin:0 auto; }
.gallery__head { max-width: 760px; margin:0 0 clamp(36px,5vh,56px); }
.gallery__title { font-size: clamp(32px,4.4vw,60px); color:var(--fg);}
.gallery__title em { color: var(--accent); font-style:italic;}
.gallery__intro { color:var(--fg-soft); font-size:clamp(16px,1.3vw,18px); margin:20px 0 0; max-width:56ch; line-height:1.7;}
.gallery__grid { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
.gallery__item { position:relative; margin:0; overflow:hidden; border-radius:10px; aspect-ratio: 4/3; background: var(--bg-3); }
/* Case portrait : occupe 2 rangées pour afficher une photo verticale sans la couper */
.gallery__item--tall { aspect-ratio: auto; grid-row: span 2; }
.gallery__item img { width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease); }
.gallery__item:hover img { transform: scale(1.05); }
.gallery__cap { position:absolute; left:0; right:0; bottom:0; padding:34px 18px 14px; font-size:13px; font-weight:600; letter-spacing:0.02em; color:var(--fg); background:linear-gradient(to top, rgba(14,13,12,0.9), transparent); }
.gallery__cap span { color: var(--accent-bright); }
.gallery__badge { position:absolute; top:14px; left:14px; z-index:2; padding:5px 11px; border-radius:999px; background:var(--accent); color:var(--accent-ink); font-size:10px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; }
@media(max-width:760px){ .gallery__grid{ grid-template-columns: repeat(2,1fr);} }
@media(max-width:460px){ .gallery__grid{ grid-template-columns: 1fr;} }

/* ============================================================
   CONTACT (réel)
   ============================================================ */
.contact-real { background: var(--bg-2); padding: clamp(80px,12vh,160px) var(--pad); }
.contact-real__inner { max-width: var(--maxw); margin:0 auto; display:grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,6vw,90px); align-items:center; }
.contact-real__title { font-size: clamp(32px,4.4vw,58px); color:var(--fg);}
.contact-real__title em { color:var(--accent); font-style:italic;}
.contact-real__copy { color:var(--fg-soft); font-size:clamp(16px,1.3vw,18px); margin:22px 0 30px; max-width:46ch; line-height:1.7;}
.contact-real__actions { display:flex; gap:14px; flex-wrap:wrap; }
.contact-row { display:flex; gap:16px; align-items:flex-start; padding:20px 0; border-bottom:1px solid var(--line); }
.contact-row svg { width:22px;height:22px;flex:0 0 auto;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-top:2px;}
.contact-row__k { font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted); display:block; margin-bottom:4px;}
.contact-row__v { font-family:var(--serif); font-size:clamp(17px,1.6vw,20px); color:var(--fg); }
a.contact-row__v:hover { color:var(--accent-bright);}
@media(max-width:860px){ .contact-real__inner{ grid-template-columns:1fr; gap:40px;} }

/* ============================================================
   FORMULAIRE DEVIS
   ============================================================ */
.devis { background: var(--bg); padding: clamp(80px,12vh,160px) var(--pad); }
.devis__inner { max-width: var(--maxw); margin:0 auto; display:grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(40px,5vw,80px); align-items:start; }
.devis__intro { position: sticky; top: 104px; }
.devis__title { font-size: clamp(30px,4vw,52px); color:var(--fg); }
.devis__title em { color:var(--accent); font-style:italic; }
.devis__copy { color:var(--fg-soft); font-size:16.5px; line-height:1.7; margin:20px 0 26px; max-width:42ch; }
.devis__points { list-style:none; padding:0; margin:0 0 26px; display:grid; gap:12px; }
.devis__points li { display:flex; gap:11px; align-items:center; color:var(--fg-soft); font-size:15px; }
.devis__points svg { width:20px;height:20px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;}
.devis__phone { font-family:var(--serif); font-size:20px; color:var(--fg-soft); }
.devis__phone a { color:var(--accent-bright); font-weight:600; }
.devis__form { background: var(--bg-2); border:1px solid var(--line); border-radius:16px; padding: clamp(24px,3vw,38px); }
.field { margin-bottom:18px; }
.field > label { display:block; font-size:12px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--fg-soft); margin-bottom:9px; }
.field input, .field select, .field textarea { width:100%; background: var(--bg); border:1px solid var(--line); border-radius:9px; padding:13px 15px; color:var(--fg); font-family:var(--sans); font-size:15px; transition: border-color .25s var(--ease); }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color: var(--accent); }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field textarea { resize:vertical; min-height:110px; }
.field--row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:18px; }
.devis__inner > *, .field, .field--row, .field--row > div { min-width: 0; }
.field--row > div input, .field--row > div select { width: 100%; }
.field--row > div > label { display:block; font-size:12px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--fg-soft); margin-bottom:9px; }
.chips { display:flex; flex-wrap:wrap; gap:9px; }
.chip { position:relative; display:inline-block; }
.chip input { position:absolute; width:1px; height:1px; margin:0; opacity:0; pointer-events:none; }
.chip span { display:inline-block; padding:9px 14px; border-radius:999px; border:1px solid var(--line); background:var(--bg); color:var(--fg-soft); font-size:13px; font-weight:500; cursor:pointer; transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.chip span:hover { border-color: rgba(232,112,31,0.5); }
.chip input:checked + span { background: rgba(232,112,31,0.16); border-color: var(--accent); color: var(--fg); }
.chip input:focus-visible + span { outline:2px solid var(--accent); outline-offset:2px; }
.hp { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.devis__submit { width:100%; justify-content:center; margin-top:6px; font-size:13px; }
.devis__status { margin-top:16px; font-size:14.5px; line-height:1.55; padding:14px 16px; border-radius:9px; display:none; }
.devis__status.is-error { display:block; background:rgba(217,96,58,0.12); border:1px solid rgba(217,96,58,0.5); color:#f4b9a3; }
.devis__status.is-ok { display:block; background:rgba(232,112,31,0.12); border:1px solid var(--accent); color:var(--fg); }
.field--error input, .field--error select, .field--error textarea { border-color:#d9603a; }
@media(max-width:860px){ .devis__inner{ grid-template-columns:1fr; gap:34px;} .devis__intro{ position:static;} .field--row{ grid-template-columns:1fr;} }

/* ============================================================
   PAGES LÉGALES (prose)
   ============================================================ */
.legal { max-width: 820px; margin: 0 auto; padding: 120px var(--pad) clamp(70px,10vh,120px); }
.legal h1 { font-size: clamp(34px,5vw,56px); color: var(--fg); margin: 0 0 8px; }
.legal__updated { color: var(--muted); font-size: 13px; margin: 0 0 40px; }
.legal h2 { font-family: var(--serif); font-weight:500; font-size: clamp(22px,2.6vw,30px); color: var(--fg); margin: 42px 0 14px; letter-spacing:-0.01em; }
.legal p, .legal li { color: var(--fg-soft); font-size: 16px; line-height: 1.8; }
.legal ul { padding-left: 20px; margin: 10px 0; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--accent-bright); }
.legal strong { color: var(--fg); }

/* ============================================================
   SLIDER AVANT / APRÈS (signature)
   ============================================================ */
.ba-section { background: var(--bg-2); padding: clamp(80px,12vh,160px) var(--pad); }
.ba-section__inner { max-width: 1140px; margin: 0 auto; }
.ba-section__head { max-width: 720px; margin: 0 0 clamp(34px,5vh,52px); }
.ba-section__title { font-size: clamp(32px,4.4vw,58px); color: var(--fg); }
.ba-section__title em { color: var(--accent); font-style: italic; }
.ba-section__intro { color: var(--fg-soft); font-size: clamp(16px,1.3vw,18px); margin: 18px 0 0; max-width: 54ch; line-height: 1.7; }
.ba { position: relative; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; --pos: 50%; user-select: none; border: 1px solid var(--line); box-shadow: 0 40px 90px -50px rgba(0,0,0,0.9); }
.ba__img, .ba__before img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ba__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: var(--accent); transform: translateX(-1px); pointer-events: none; box-shadow: 0 0 24px rgba(232,112,31,0.7); }
.ba__knob { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 50px; height: 50px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0,0,0,0.45); }
.ba__knob svg { width: 24px; height: 24px; fill: none; stroke: var(--accent-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ba__tag { position: absolute; bottom: 16px; padding: 6px 13px; border-radius: 999px; background: rgba(14,13,12,0.72); color: var(--fg); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; backdrop-filter: blur(6px); pointer-events: none; }
.ba__tag--before { left: 16px; }
.ba__tag--after { right: 16px; color: var(--accent-bright); }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba__range:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ============================================================
   ZONE D'INTERVENTION (Loiret)
   ============================================================ */
.zone { background: var(--bg); padding: clamp(80px,12vh,160px) var(--pad); scroll-margin-top: 80px; }
.zone__inner { max-width: var(--maxw); margin:0 auto; display:grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,6vw,90px); align-items:center; }
.zone__title { font-size: clamp(32px,4.4vw,58px); color:var(--fg); }
.zone__title em { color:var(--accent); font-style:italic; }
.zone__intro { color:var(--fg-soft); font-size:clamp(16px,1.3vw,18px); margin:20px 0 0; max-width:46ch; line-height:1.7; }

/* Autocomplete commune */
.zone__search { margin-top:28px; }
.zone__search-field { position:relative; }
.zone__search-label { display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:9px; font-family:var(--sans); }
.zone__input-wrap { position:relative; }
.zone__input-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; stroke:var(--fg-soft); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.zone__input { width:100%; padding:13px 40px 13px 36px; background:var(--bg-2); border:1px solid var(--line); color:var(--fg); border-radius:10px; font-size:15px; font-family:var(--sans); transition:border-color .2s, box-shadow .2s; box-sizing:border-box; }
.zone__input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(244,124,32,.12); }
.zone__input::placeholder { color:var(--muted); }
.zone__input-clear { position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:none; padding:5px; cursor:pointer; color:var(--fg-soft); display:flex; align-items:center; }
.zone__input-clear svg { width:14px; height:14px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; }
.zone__suggestions { position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:30; background:var(--bg-2); border:1px solid var(--line); border-radius:10px; overflow:hidden; list-style:none; margin:0; padding:4px 0; max-height:220px; overflow-y:auto; box-shadow:0 8px 32px rgba(0,0,0,.55); display:none; }
.zone__suggestions:not(:empty) { display:block; }
.zone__suggestions li { padding:9px 16px; font-size:14px; color:var(--fg-soft); cursor:pointer; transition:background .1s; font-family:var(--sans); }
.zone__suggestions li:hover, .zone__suggestions li[aria-selected="true"] { background:rgba(244,124,32,.1); color:var(--fg); }
.zone__search-result { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px; padding:13px 15px; background:rgba(244,124,32,.06); border:1px solid rgba(244,124,32,.22); border-radius:10px; }
.zone__result-check { width:18px; height:18px; flex-shrink:0; fill:none; stroke:var(--accent); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.zone__result-text { font-size:14px; color:var(--fg); flex:1 1 auto; font-family:var(--sans); }
.btn--sm { padding:8px 16px !important; font-size:13px !important; }
.zone__search-miss { font-size:13px; color:var(--muted); margin-top:10px; font-family:var(--sans); }
.zone__search-miss a { color:var(--accent); text-decoration:none; }
.zone__badge { margin-top:22px; font-size:12px; color:var(--muted); letter-spacing:.05em; }
.zone__badge strong { color:var(--fg-soft); }
@media(max-width:860px){ .zone__inner{ grid-template-columns:1fr; gap:32px; } }

/* Visuel hero service animé (Ken Burns) */
.svc-hero__media--anim { overflow: hidden; }
.svc-hero__media--anim img { animation: kenburns 20s ease-in-out infinite alternate; will-change: transform; }
@keyframes kenburns { from { transform: scale(1.02) translate(0,0); } to { transform: scale(1.14) translate(-2.5%,-2%); } }

/* Bloc engagements (pages service) */
.engage { max-width: var(--maxw); margin:0 auto; padding: clamp(8px,2vh,24px) var(--pad) clamp(46px,7vh,80px); }
.engage__title { font-family:var(--serif); font-weight:500; font-size:clamp(22px,2.6vw,32px); color:var(--fg); margin:0 0 24px; letter-spacing:-0.01em; }
.engage__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.engage__item { display:flex; gap:15px; padding:24px 24px; background:var(--bg-2); border:1px solid var(--line); border-radius:12px; }
.engage__item svg { width:28px; height:28px; flex:0 0 auto; fill:none; stroke:var(--accent); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.engage__item h3 { font-family:var(--sans); font-size:16px; font-weight:700; color:var(--fg); margin:0 0 6px; }
.engage__item p { color:var(--fg-soft); font-size:14.5px; line-height:1.6; margin:0; }
@media(max-width:680px){ .engage__grid{ grid-template-columns:1fr; } }

/* ============================================================
   AVIS (branchable Google, zéro faux avis)
   ============================================================ */
.reviews { background: var(--bg-2); padding: clamp(80px,12vh,160px) var(--pad); }
.reviews__inner { max-width: 980px; margin:0 auto; text-align:center; }
.reviews__title { font-size: clamp(32px,4.4vw,56px); color:var(--fg); }
.reviews__title em { color:var(--accent); font-style:italic; }
.reviews__card { margin: clamp(34px,5vh,52px) auto 0; max-width:640px; background:var(--bg); border:1px solid var(--line); border-radius:16px; padding: clamp(30px,4vw,46px); }
.reviews__g { display:inline-flex; align-items:center; gap:10px; font-family:var(--sans); font-weight:700; font-size:14px; letter-spacing:0.04em; color:var(--fg-soft); margin-bottom:18px; }
.reviews__g svg { width:22px; height:22px; fill:none; stroke:var(--accent); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.reviews__stars { display:flex; justify-content:center; gap:6px; margin-bottom:20px; }
.reviews__stars svg { width:28px; height:28px; fill:var(--accent); }
.reviews__card > p { color:var(--fg-soft); font-size:17px; line-height:1.7; margin:0 0 28px; }
.reviews__note { color:var(--muted) !important; font-size:12.5px !important; margin:20px 0 0 !important; }

/* ============================================================
   3D TEMPS RÉEL (Three.js)
   ============================================================ */
.three-section {
  background: var(--bg);
  padding: clamp(80px,12vh,160px) var(--pad);
  position: relative;
  overflow: hidden;
}
.three-section::before {
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(ellipse 70% 50% at 70% 60%, rgba(232,112,31,0.06), transparent 70%);
  pointer-events:none;
}
.three-section__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px,6vw,90px);
  align-items: center;
  position: relative;
}
.three-section__title { font-size: clamp(30px,4vw,52px); color:var(--fg); }
.three-section__title em { color:var(--accent); font-style:italic; }
.three-section__intro { color:var(--fg-soft); font-size:clamp(16px,1.3vw,18px); margin:18px 0 0; max-width:46ch; line-height:1.7; }
.three-section__hint {
  color: var(--muted);
  font-size: 13px;
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  animation: hint-bob 2.6s ease-in-out infinite;
}
.three-section__hint svg { width:18px; height:18px; flex-shrink:0; }
@keyframes hint-bob {
  0%,100% { opacity:0.55; transform:scale(1); }
  50%      { opacity:0.9;  transform:scale(1.14); }
}

/* Configurateur de toiture — cadre photo */
.roof3d {
  position: relative;
  aspect-ratio: 4 / 3;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid rgba(232,112,31,0.22);
  box-shadow:
    0 0 0 1px rgba(232,112,31,0.08),
    0 24px 64px rgba(0,0,0,0.55),
    0 0 80px rgba(232,112,31,0.07);
  transition: transform 0.12s ease, box-shadow 0.4s var(--ease);
  will-change: transform;
}
.roof3d:hover {
  box-shadow:
    0 0 0 1px rgba(232,112,31,0.18),
    0 28px 72px rgba(0,0,0,0.60),
    0 0 100px rgba(232,112,31,0.12);
}

/* Images empilées — swap crossfade */
.roof3d-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.roof3d-img.is-active {
  opacity: 1;
  pointer-events: auto;
  animation: img-enter 0.45s ease forwards;
}
@keyframes img-enter {
  from { transform: scale(1.03); }
  to   { transform: scale(1); }
}

/* Label matière sous l'image */
.roof3d-label {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg);
  opacity: 0.82;
  text-shadow: 0 2px 10px rgba(0,0,0,0.75);
  pointer-events: none;
  margin: 0;
  z-index: 2;
}

@media (max-width: 860px) {
  .three-section__inner { grid-template-columns: 1fr; gap: 36px; }
  .roof3d { max-width: 480px; aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
  .three-section__hint { animation: none; }
  .roof3d-img { transition: none; }
  .roof3d-img.is-active { animation: none; }
  .roof3d { transition: box-shadow 0.4s var(--ease); }
}

/* ============================================================
   BLOC ÉDITORIAL (lien À propos)
   ============================================================ */
.editorial-cta { background: var(--bg); padding: clamp(70px,10vh,130px) var(--pad); border-top:1px solid var(--line); }
.editorial-cta__inner { max-width: 820px; margin:0 auto; text-align:center; }
.editorial-cta__title { font-size: clamp(30px,4vw,52px); color:var(--fg); }
.editorial-cta__title em { color:var(--accent); font-style:italic; }
.editorial-cta__copy { color:var(--fg-soft); font-size:clamp(16px,1.3vw,18px); margin:20px auto 28px; max-width:56ch; line-height:1.7; }
.link-arrow { display:inline-flex; align-items:center; gap:9px; color:var(--accent); font-family:var(--sans); font-weight:600; font-size:14px; letter-spacing:0.04em; }
.link-arrow svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s var(--ease); }
.link-arrow:hover { color:var(--accent-bright); }
.link-arrow:hover svg { transform:translateX(4px); }

/* ============================================================
   MENU MOBILE (hamburger)
   ============================================================ */
.nav__burger { display:none; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; background:none; border:none; cursor:pointer; padding:10px; }
.nav__burger span { display:block; height:2px; width:100%; background:var(--fg); border-radius:2px; transition:transform .3s var(--ease), opacity .25s var(--ease); }
.nav__burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2){ opacity:0; }
.nav__burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.mobilemenu { position:fixed; inset:0; z-index:200; background:rgba(14,13,12,0.98); backdrop-filter:blur(10px); display:flex; flex-direction:column; justify-content:center; padding:90px var(--pad) 44px; opacity:0; visibility:hidden; transform:translateY(-10px); transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s; }
.mobilemenu.is-open { opacity:1; visibility:visible; transform:none; }
.mobilemenu__nav { display:flex; flex-direction:column; }
.mobilemenu__nav a { font-family:var(--serif); font-size:clamp(26px,7vw,38px); color:var(--fg); padding:11px 0; border-bottom:1px solid var(--line); }
.mobilemenu__nav a:active { color:var(--accent); }
.mobilemenu__foot { margin-top:30px; display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.mobilemenu__phone { font-family:var(--serif); font-size:24px; color:var(--accent-bright); font-weight:600; }
.mobilemenu .btn { justify-content:center; align-self:stretch; }
body.menu-open { overflow:hidden; }
@media (max-width: 980px) { .nav__burger { display:inline-flex; } }

/* ============================================================
   CK CLOCK — COMPTEUR D'URGENCE PREMIUM
   Horloge Paris · Marteau photo-réaliste · Widget flottant
   ============================================================ */

/* ─── Ancre hero (remplace .urgency__visual SVG) ─── */
#ck-hero-anchor {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-top: 36px; /* espace pour le marteau au-dessus */
  aspect-ratio: auto !important; /* override le ratio 9/8 de .urgency__visual */
  max-width: 300px;
  overflow: visible; /* le marteau dépasse légèrement vers le haut */
}

/* ─── Canvas horloge ─── */
.ck-canvas {
  display: block;
  border-radius: 50%;
}
.ck-canvas--hero {
  width: 260px;
  height: 260px;
  filter: drop-shadow(0 0 2px rgba(232,112,31,0.15))
          drop-shadow(0 24px 48px rgba(0,0,0,0.8));
}
.ck-canvas--corner {
  width: 110px;
  height: 110px;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.6));
}

/* Secousse au coup de marteau */
.ck-canvas.ck-shake {
  animation: ck-shake 0.28s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes ck-shake {
  0%   { transform: translate(0,0) rotate(0); }
  22%  { transform: translate(-2px,-3px) rotate(-0.4deg); }
  44%  { transform: translate(2px,3px) rotate(0.4deg); }
  66%  { transform: translate(-1px,1px) rotate(-0.2deg); }
  88%  { transform: translate(1px,-1px) rotate(0.2deg); }
  100% { transform: translate(0,0) rotate(0); }
}

/* ─── Marteau photo-réaliste ─── */
.ck-hammer {
  pointer-events: none;
  user-select: none;
  display: block;
}
/* Version hero : centré au-dessus du 12h */
.ck-hammer--hero {
  position: absolute;
  width: 100px;
  top: -28px;
  left: calc(50% - 50px);   /* centré sur l'horloge */
  transform-origin: 52% 6%;
  transform: rotate(-38deg);
  filter: drop-shadow(0 8px 22px rgba(0,0,0,0.8));
  z-index: 2;
}
/* Version coin : dans .ck-clock-wrap */
.ck-hammer--corner {
  position: absolute;
  width: 40px;
  top: 2px;
  left: calc(50% - 10px);
  transform-origin: 52% 6%;
  transform: rotate(-38deg);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.75));
  z-index: 2;
}

/* Frappe : descend sur le cadran, impact net, remonte */
.ck-hammer.ck-strike {
  animation: ck-hammer-strike 0.45s cubic-bezier(0.22, 0, 0.2, 1.3);
}
@keyframes ck-hammer-strike {
  0%   { transform: rotate(-38deg); }
  35%  { transform: rotate(12deg); }
  52%  { transform: rotate(6deg); }
  68%  { transform: rotate(10deg); }
  100% { transform: rotate(-38deg); }
}

/* ─── Affichage digital ─── */
.ck-digital {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
}
.ck-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: ck-pulse 1s steps(2, jump-none) infinite;
}
@keyframes ck-pulse { 50% { opacity: 0.12; } }
.ck-time {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--fg);
}
.ck-digital:not(.ck-digital--sm) .ck-time { font-size: 20px; }
.ck-digital--sm .ck-time { font-size: 12px; }
.ck-lbl {
  display: block;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Version coin : slogan urgence 2 lignes */
.ck-lbl--tag {
  font-size: 8px;
  letter-spacing: 0.13em;
  line-height: 1.5;
  text-align: center;
  color: var(--accent-bright);
}

/* ─── Widget coin (fixed, persistant) ─── */
.ck-corner {
  position: fixed;
  bottom: 24px;
  right: 18px;
  z-index: 890;
  width: 158px;
  background: rgba(14,13,12,0.96);
  border: 1px solid rgba(232,112,31,0.26);
  border-radius: 18px;
  padding: 28px 12px 14px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.35),
    0 20px 50px rgba(0,0,0,0.7),
    0 0 40px rgba(232,112,31,0.06);
  backdrop-filter: blur(16px) saturate(120%);

  /* Caché par défaut */
  opacity: 0;
  transform: translateY(16px) scale(0.92);
  pointer-events: none;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.ck-corner.ck-corner--visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Bouton minimiser */
.ck-min-btn {
  position: absolute;
  top: 8px; right: 8px;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(232,112,31,0.12);
  border: 1px solid rgba(232,112,31,0.25);
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.ck-min-btn:hover { background: var(--accent); color: var(--accent-ink); }
.ck-min-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Wrapper horloge (hammer absolu + canvas) */
.ck-clock-wrap {
  position: relative;
  width: 110px;
  height: 128px;   /* 110px canvas + 18px pour le marteau au-dessus */
  flex-shrink: 0;
}
.ck-clock-wrap .ck-canvas--corner {
  position: absolute;
  bottom: 0;
  left: 0;
}

/* Corps du widget */
.ck-corner__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* Texte "Les dégâts qui s'aggravent..." */
.ck-corner__hint {
  font-family: var(--sans);
  font-size: 8.5px;
  color: var(--muted);
  text-align: center;
  margin: 0;
  line-height: 1.45;
  letter-spacing: 0.01em;
  max-width: 130px;
  opacity: 0.85;
}
.ck-corner__cost {
  font-family: var(--serif);
  font-size: 12px;
  color: var(--accent-bright);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.ck-corner__cost-val { font-weight: 600; }
.ck-corner__cta {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 9px 10px;
  border-radius: 999px;
  margin-top: 2px;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.ck-corner__cta:hover {
  background: var(--accent-bright);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -6px rgba(232,112,31,0.6);
}
.ck-corner__cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Mode minimisé */
.ck-corner--mini .ck-corner__body { display: none; }
.ck-corner--mini {
  width: auto;
  padding: 8px;
  border-radius: 50%;
}
.ck-corner--mini .ck-min-btn {
  position: static;
  width: 40px; height: 40px;
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.ck-corner--mini .ck-min-btn svg { width: 16px; height: 16px; }

/* Desktop ≥821px : hover révèle le widget complet depuis la mini-pill */
@media (min-width: 821px) {
  .ck-corner.ck-corner--mini:hover {
    width: 158px;
    padding: 28px 12px 14px;
    border-radius: 18px;
  }
  .ck-corner.ck-corner--mini:hover .ck-corner__body { display: flex; }
  .ck-corner.ck-corner--mini:hover .ck-min-btn {
    position: absolute;
    top: 8px; right: 8px;
    width: 22px; height: 22px;
    background: rgba(232,112,31,0.12);
    border-color: rgba(232,112,31,0.25);
    color: var(--muted);
  }
  .ck-corner.ck-corner--mini:hover .ck-min-btn svg { width: 12px; height: 12px; }
}

/* Mobile : au-dessus de la barre d'appel fixe */
@media (max-width: 600px) {
  .ck-corner {
    bottom: 72px;
    right: 10px;
    width: 134px;
    padding: 26px 10px 12px;
    border-radius: 14px;
  }
  .ck-clock-wrap { width: 90px; height: 106px; }
  .ck-canvas--corner { width: 90px !important; height: 90px !important; }
  .ck-hammer--corner { width: 32px; }
  .ck-hammer--hero   { width: 80px; left: calc(50% - 40px); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ck-hammer        { animation: none !important; transform: rotate(-38deg) !important; }
  .ck-canvas        { animation: none !important; }
  .ck-corner        { transition: opacity 0.01s !important; transform: none !important; }
  .ck-dot           { animation: none !important; }
}

/* ============================================================
   URGENCE (horloge live + couvreur au marteau)
   ============================================================ */
.urgency { background: var(--ink); padding: clamp(70px,11vh,150px) var(--pad); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.urgency__inner { max-width: var(--maxw); margin:0 auto; display:grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(40px,6vw,80px); align-items:center; }
.urgency__eyebrow { color:var(--accent-bright); font-size:12px; font-weight:600; letter-spacing:0.24em; text-transform:uppercase; margin:0 0 18px; display:inline-flex; align-items:center; gap:9px; }
.urgency__eyebrow::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--accent); animation: ucBlink 1s steps(2,jump-none) infinite; }
@keyframes ucBlink { 50%{ opacity:.2; } }
.urgency__title { font-size: clamp(32px,4.4vw,56px); color:var(--fg); }
.urgency__title em { color:var(--accent); font-style:italic; }
.urgency__copy { color:var(--fg-soft); font-size:clamp(16px,1.3vw,18px); margin:20px 0 22px; max-width:46ch; line-height:1.7; }
.urgency__cost { font-family:var(--sans); font-size:15px; color:var(--muted); margin:0 0 28px; line-height:1.7; }
.urgency__cost b { font-family:var(--serif); font-size:26px; color:var(--accent-bright); font-variant-numeric:tabular-nums; }
.urgency__actions { display:flex; gap:14px; flex-wrap:wrap; }
.urgency__visual { position:relative; width:100%; max-width:360px; margin:0 auto; aspect-ratio:9/8; }
.urgency__svg { width:100%; height:100%; overflow:visible; }
.urgency__readout { position:absolute; left:0; right:0; bottom:2px; text-align:center; font-family:var(--sans); font-weight:700; font-size:27px; color:var(--fg); font-variant-numeric:tabular-nums; letter-spacing:0.03em; }
.urgency__readout small { display:block; color:var(--accent); font-size:11px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase; margin-top:3px; }
.uc-hammer { transform-box: fill-box; transform-origin: 90% 14%; transform: rotate(-46deg); }
.uc-hammer.strike { animation: ucStrike .5s cubic-bezier(.5,0,.3,1.35); }
@keyframes ucStrike { 0%{ transform:rotate(-46deg);} 40%{ transform:rotate(9deg);} 64%{ transform:rotate(2deg);} 100%{ transform:rotate(-46deg);} }
.uc-spark { opacity:0; transform-box:fill-box; transform-origin:center; }
.uc-spark.flash { animation: ucSpark .5s ease; }
@keyframes ucSpark { 0%,32%{opacity:0; transform:scale(.3);} 44%{opacity:1; transform:scale(1.1);} 100%{opacity:0; transform:scale(1.6);} }
@media(max-width:860px){ .urgency__inner{ grid-template-columns:1fr; gap:40px;} .urgency__visual{ max-width:280px;} }

/* ============================================================
   LÉO FRAPPE L'HORLOGE (personnage cliquable → ouvre le chat)
   Additif : posé par-dessus #ck-hero-anchor (position:relative déjà OK)
   ============================================================ */
.leo-frappe{
  position:absolute; right:-82px; bottom:2px;
  width:clamp(120px,14vw,176px);
  z-index:5; cursor:pointer; background:transparent; border:0; padding:0;
}
/* La vidéo et l'image de repli : seul le bras bouge (animé DANS la vidéo),
   aucune rotation/bascule du corps en CSS. */
.leo-frappe__media,
.leo-frappe__fallback{
  display:block; width:100%; height:auto; pointer-events:none;
  filter:drop-shadow(0 16px 22px rgba(0,0,0,.55));
}
.leo-frappe__fallback[hidden]{ display:none; }
/* La secousse de l'horloge à l'impact est assurée par CKClock.strike()
   (shake du canvas), comme le moteur d'origine. */
.leo-frappe__hint{
  position:absolute; top:6px; left:50%;
  transform:translate(-50%,-100%);
  background:var(--accent,#F47C20); color:#1a120a;
  font:600 12px/1 'Work Sans',sans-serif;
  padding:7px 11px; border-radius:8px; white-space:nowrap;
  opacity:0; transition:opacity .25s; pointer-events:none; z-index:6;
}
.leo-frappe:hover .leo-frappe__hint,
.leo-frappe:focus-visible .leo-frappe__hint{ opacity:1; }
.leo-frappe:focus-visible{ outline:2px solid var(--accent-bright,#FFAE65); outline-offset:6px; border-radius:12px; }

/* Étincelle au point d'impact (insérée dans #ck-hero-anchor) */
.leo-spark{
  position:absolute; width:34px; height:34px; border-radius:50%;
  opacity:0; pointer-events:none; z-index:6;
  background:radial-gradient(circle,rgba(255,228,170,.95),rgba(255,180,90,0) 70%);
}
.leo-spark.on{ animation:leoSparkPop .45s ease; }
@keyframes leoSparkPop{
  0%{opacity:1; transform:scale(.5)}
  100%{opacity:0; transform:scale(1.7)}
}

/* Petit sursaut du compteur quand il monte */
#ucCost.leo-bump{ display:inline-block; animation:leoBump .4s ease; }
@keyframes leoBump{ 0%,100%{transform:none} 40%{transform:scale(1.13)} }

@media (max-width:860px){
  .leo-frappe{ width:clamp(96px,26vw,128px); right:-30px; bottom:10px; }
}
@media (max-width:480px){
  /* Sur petit mobile, Léo entrerait en conflit avec le chat flottant et la
     barre d'action du bas : on le masque pour garder l'horloge parfaitement
     lisible. Le compteur reprend son moteur auto, le FAB assure le chat. */
  .leo-frappe{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .leo-clock-shake,.leo-spark.on,#ucCost.leo-bump{ animation:none!important; }
}

/* ============================================================
   CONFIGURATEUR 3D — chips matière
   ============================================================ */
.three-section__text .roof3d-chips { display:flex; flex-wrap:wrap; gap:10px; margin:28px 0 22px; }
.roof3d-chip {
  padding:10px 20px; border-radius:999px;
  border:1px solid var(--line); background:var(--bg);
  color:var(--fg-soft); font-family:var(--sans); font-size:13px; font-weight:500;
  cursor:pointer; transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.roof3d-chip:hover { border-color:rgba(232,112,31,.5); color:var(--fg); }
.roof3d-chip:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.roof3d-chip.is-active { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.roof3d-chip.is-active:hover { background:var(--accent-bright); border-color:var(--accent-bright); }

/* ============================================================
   MÉTÉO-TOITURE
   ============================================================ */
.meteo {
  background:var(--ink); padding:clamp(40px,7vh,80px) var(--pad);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  position:relative; overflow:hidden;
  transition:background .6s var(--ease);
}
.meteo--alert { background:rgba(232,112,31,0.08); border-color:rgba(232,112,31,.3); }
.meteo__inner {
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns: auto 1fr auto; gap:clamp(20px,4vw,56px);
  align-items:center;
}
.meteo__state { display:flex; align-items:center; gap:18px; flex-shrink:0; }
.meteo__icon { width:52px; height:52px; flex:0 0 52px; }
.meteo__icon svg { width:100%; height:100%; }
.meteo__temp {
  font-family:var(--serif); font-size:clamp(28px,3.5vw,46px);
  font-weight:500; color:var(--fg); line-height:1; font-variant-numeric:tabular-nums;
}
.meteo__cond {
  font-size:12px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--muted); margin-top:5px;
}
.meteo__msg p {
  font-family:var(--serif); font-style:italic;
  font-size:clamp(17px,1.7vw,22px); color:var(--fg-soft);
  line-height:1.55; margin:0; max-width:54ch;
}
.meteo--alert .meteo__msg p { color:var(--fg); }
.meteo__cta { flex-shrink:0; }

/* Pluie : filets animés en fond */
.meteo--rain::before {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:repeating-linear-gradient(
    170deg,
    transparent 0, transparent 18px,
    rgba(120,160,200,0.06) 18px, rgba(120,160,200,0.06) 19px
  );
  animation:rainFall 1.4s linear infinite;
}
@keyframes rainFall { from{background-position:0 0} to{background-position:0 40px} }
.meteo__inner { position:relative; z-index:1; }

@media(max-width:760px){
  .meteo__inner { grid-template-columns:1fr; gap:20px; }
  .meteo__cta { margin-top:4px; }
}

/* ============================================================
   DIAGNOSTIC TOITURE — hotspots anatomie
   ============================================================ */
.diagnostic {
  background:var(--bg-2); padding:clamp(80px,12vh,160px) var(--pad);
}
.diagnostic__inner { max-width:var(--maxw); margin:0 auto; }
.diagnostic__head { max-width:760px; margin:0 0 clamp(36px,5vh,56px); }
.diagnostic__title { font-size:clamp(32px,4.4vw,60px); color:var(--fg); }
.diagnostic__title em { color:var(--accent); font-style:italic; }
.diagnostic__intro { color:var(--fg-soft); font-size:clamp(16px,1.3vw,18px); margin:20px 0 0; max-width:58ch; line-height:1.7; }

.diagnostic__scene {
  /* PAS overflow:hidden ici — les panels doivent pouvoir déborder */
  position:relative; width:100%;
  box-shadow:0 40px 90px -50px rgba(0,0,0,0.9);
}
.diagnostic__scene img {
  display:block; width:100%; height:auto; object-fit:cover;
  border-radius:16px; border:1px solid var(--line);
  filter:brightness(0.78) saturate(0.85);
  transition:filter .4s var(--ease);
  pointer-events:none;
}
.diagnostic__scene:hover img { filter:brightness(0.85) saturate(0.9); }

/* Hotspot buttons */
.diag-hotspot {
  position:absolute; width:38px; height:38px; border-radius:50%;
  background:rgba(232,112,31,0.22); border:2px solid var(--accent);
  transform:translate(-50%,-50%);
  cursor:pointer; padding:0;
  display:grid; place-items:center;
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.diag-hotspot::after {
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1.5px solid rgba(232,112,31,.35);
  animation:hotPulse 2.2s ease-out infinite;
}
@keyframes hotPulse { 0%{transform:scale(1); opacity:.7} 100%{transform:scale(2.2); opacity:0} }
.diag-hotspot:hover, .diag-hotspot.is-active {
  background:var(--accent); transform:translate(-50%,-50%) scale(1.15);
}
.diag-hotspot:focus-visible { outline:2px solid var(--accent-bright); outline-offset:4px; }
.diag-hotspot svg { width:16px; height:16px; fill:none; stroke:var(--fg); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* Info panels */
.diag-panel {
  position:absolute; z-index:20;
  background:var(--bg); border:1px solid rgba(232,112,31,.35);
  border-radius:12px; padding:18px 20px 16px;
  width:clamp(200px, 260px, 90%);
  box-shadow:0 20px 50px -18px rgba(0,0,0,0.85);
  opacity:0; transform:translateY(8px) scale(0.96);
  transition:opacity .28s var(--ease), transform .28s var(--ease);
  pointer-events:none;
  /* Empêche les panels de sortir du conteneur */
  max-width:calc(100% - 40px);
}
.diag-panel[aria-hidden="false"].is-open {
  opacity:1; transform:none; pointer-events:auto;
}
/* Les panels sont dans .diagnostic__scene (overflow:visible) donc ils débordent librement */
.diag-panel__zone {
  font-size:10px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--accent); margin:0 0 6px;
}
.diag-panel__name { font-family:var(--serif); font-size:20px; color:var(--fg); margin:0 0 10px; }
.diag-panel__risk {
  font-size:13px; color:var(--fg-soft); line-height:1.55; margin:0 0 14px;
}
.diag-panel__risk strong { color:var(--fg); }
.diag-panel__foot { display:flex; gap:10px; align-items:center; }
.diag-panel__link {
  font-size:12px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--accent); display:inline-flex; align-items:center; gap:6px;
  transition:color .2s var(--ease);
}
.diag-panel__link svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s var(--ease); }
.diag-panel__link:hover { color:var(--accent-bright); }
.diag-panel__link:hover svg { transform:translateX(3px); }
.diag-panel__close {
  margin-left:auto; width:28px; height:28px; border-radius:50%;
  background:none; border:1px solid var(--line); cursor:pointer;
  display:grid; place-items:center; color:var(--muted);
  transition:background .2s var(--ease), color .2s var(--ease);
}
.diag-panel__close:hover { background:var(--bg-2); color:var(--fg); }
.diag-panel__close svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }

@media(max-width:680px){
  .diag-hotspot { width:30px; height:30px; }
  .diag-panel { position:fixed; bottom:80px; left:50%; transform:translateX(-50%) translateY(10px) scale(0.96); top:auto; }
  .diag-panel[aria-hidden="false"].is-open { transform:translateX(-50%); }
}

/* ============================================================
   ANATOMIE DU TOIT — Nouveau système ancres + flèches + cartes
   ============================================================ */
.anat-stage{position:relative;width:100%}
.anat-img{display:block;width:100%;height:auto}
.anat-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.anat-overlay{position:absolute;inset:0;pointer-events:none}
.anat-line{stroke:var(--accent,#F47C20);stroke-width:2;fill:none;opacity:.92;stroke-linecap:round}
.anat-anchor{position:absolute;transform:translate(-50%,-50%);width:11px;height:11px;border-radius:50%;background:#fff;border:2px solid var(--accent,#F47C20);pointer-events:none}
.anat-bubble{position:absolute;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:var(--accent,#F47C20);border:2px solid rgba(255,255,255,.9);color:var(--bg,#121110);display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;padding:0;box-shadow:0 3px 12px rgba(0,0,0,.4)}
.anat-bubble svg{width:21px;height:21px}
.anat-bubble:focus-visible{outline:3px solid #fff;outline-offset:2px}
.anat-card{position:absolute;z-index:6;width:248px;max-width:calc(100vw - 28px);background:var(--bg-3,#232020);border:1px solid rgba(244,124,32,.3);border-radius:12px;padding:14px 15px;pointer-events:auto;display:none;box-shadow:0 14px 40px rgba(0,0,0,.5)}
.anat-card.open{display:block}
.anat-eyebrow{color:var(--accent,#F47C20);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-family:var(--sans,inherit)}
.anat-card h4{color:var(--fg-soft,#ECE3D0);font-family:var(--serif,Georgia,serif);font-size:18px;margin:4px 0 7px}
.anat-card p{color:#c8bfae;font-size:13px;line-height:1.55;margin:0 0 11px;font-family:var(--sans,inherit)}
.anat-card a{display:inline-flex;align-items:center;gap:6px;color:var(--accent,#F47C20);font-size:13px;text-decoration:none;font-weight:500;font-family:var(--sans,inherit)}
.anat-cardx{position:absolute;top:8px;right:8px;background:transparent;border:none;color:#7d7668;cursor:pointer;line-height:0}
@media (prefers-reduced-motion: no-preference){.anat-bubble{animation:anatPulse 2.4s infinite}}
@keyframes anatPulse{0%{box-shadow:0 0 0 0 rgba(244,124,32,.5)}70%{box-shadow:0 0 0 13px rgba(244,124,32,0)}100%{box-shadow:0 0 0 0 rgba(244,124,32,0)}}
@media (max-width:768px){
  .anat-bubble{width:34px;height:34px}
  .anat-bubble svg{width:17px;height:17px}
  .anat-card{position:fixed;left:12px;right:12px;bottom:12px;top:auto;width:auto;max-width:none;z-index:99980}
}

/* ============================================================
   TIMELINE — Parcours client
   ============================================================ */
.timeline {
  background:var(--ink); padding:clamp(80px,12vh,160px) var(--pad);
}
.timeline__inner { max-width:var(--maxw); margin:0 auto; }
.timeline__head { max-width:660px; margin:0 0 clamp(44px,7vh,72px); }
.timeline__title { font-size:clamp(32px,4.4vw,60px); color:var(--fg); }
.timeline__title em { color:var(--accent); font-style:italic; }
.timeline__intro { color:var(--fg-soft); font-size:clamp(16px,1.3vw,18px); margin:20px 0 0; max-width:54ch; line-height:1.7; }

.timeline__steps {
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:0; position:relative;
}
.timeline__steps::before {
  content:""; position:absolute; top:28px; left:calc(10% + 18px); right:calc(10% + 18px);
  height:1px; background:linear-gradient(to right, var(--accent) 0%, rgba(232,112,31,.15) 100%);
  pointer-events:none;
}
.timeline__step {
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:0 12px;
}
.timeline__step-num {
  width:56px; height:56px; border-radius:50%;
  background:var(--bg-2); border:1px solid rgba(232,112,31,.35);
  display:grid; place-items:center; position:relative; z-index:1;
  margin-bottom:20px; flex-shrink:0;
  transition:background .35s var(--ease), border-color .35s var(--ease);
}
.timeline__step.is-visible .timeline__step-num {
  background:rgba(232,112,31,0.14); border-color:var(--accent);
}
.timeline__step-num svg { width:22px; height:22px; fill:none; stroke:var(--accent); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.timeline__step-label {
  font-size:11px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--accent); margin:0 0 8px;
}
.timeline__step-desc {
  font-size:14px; color:var(--fg-soft); line-height:1.55; margin:0;
}

@media(max-width:860px){
  .timeline__steps { grid-template-columns:1fr; gap:0; }
  .timeline__steps::before { display:none; }
  .timeline__step { flex-direction:row; text-align:left; align-items:flex-start; gap:20px; padding:20px 0; border-bottom:1px solid var(--line); }
  .timeline__step:last-child { border-bottom:none; }
  .timeline__step-num { flex-shrink:0; margin-bottom:0; }
  .timeline__step-content { flex:1; }
}

/* ============================================================
   FAQ ACCORDÉON
   ============================================================ */
.faq { background:var(--bg); padding:clamp(80px,12vh,160px) var(--pad); }
.faq__inner { max-width:900px; margin:0 auto; }
.faq__head { max-width:660px; margin:0 0 clamp(40px,6vh,64px); }
.faq__title { font-size:clamp(32px,4.4vw,60px); color:var(--fg); }
.faq__title em { color:var(--accent); font-style:italic; }
.faq__intro { color:var(--fg-soft); font-size:clamp(16px,1.3vw,18px); margin:20px 0 0; max-width:54ch; line-height:1.7; }

.faq-list { list-style:none; padding:0; margin:0; }

.faq-item { border-bottom:1px solid var(--line); }
.faq-item:first-child { border-top:1px solid var(--line); }

.faq-item__btn {
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:22px 0; background:none; border:none; cursor:pointer; text-align:left;
  font-family:var(--serif); font-size:clamp(17px,1.6vw,21px); font-weight:500;
  color:var(--fg); line-height:1.3;
  transition:color .25s var(--ease);
}
.faq-item__btn:hover { color:var(--accent); }
.faq-item__btn:focus-visible { outline:2px solid var(--accent); outline-offset:4px; border-radius:2px; }
.faq-item__icon {
  flex-shrink:0; width:28px; height:28px; border-radius:50%;
  border:1px solid var(--line); display:grid; place-items:center;
  transition:border-color .25s var(--ease), background .25s var(--ease), transform .35s var(--ease);
}
.faq-item__icon svg { width:14px; height:14px; fill:none; stroke:var(--fg-soft); stroke-width:2; stroke-linecap:round; transition:stroke .25s var(--ease); }
.faq-item.is-open .faq-item__icon { background:var(--accent); border-color:var(--accent); transform:rotate(45deg); }
.faq-item.is-open .faq-item__icon svg { stroke:var(--accent-ink); }

.faq-item__panel {
  max-height:0; overflow:hidden;
  transition:max-height .45s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-item__panel p {
  padding:0 0 24px; margin:0;
  font-size:clamp(15px,1.25vw,17px); color:var(--fg-soft); line-height:1.75;
  max-width:66ch;
}
.faq-item__panel a { color:var(--accent-bright); text-decoration:underline; text-underline-offset:3px; }

/* ============================================================
   CARTE LOIRET SVG (signature)
   ============================================================ */
.zone__map { position:relative; width:100%; max-width:480px; margin:0 auto; filter:drop-shadow(0 24px 52px rgba(0,0,0,.7)); }
.zone__map svg { width:100%; height:auto; display:block; overflow:visible; }

/* Surfaces — pointer-events: none sur tout le fond, seuls les .map-city restent cliquables */
#loiretSvg { pointer-events: none; }
#loiretSvg .map-city, #loiretSvg .map-hq { pointer-events: all; cursor: pointer; }
.dept-fill { fill:url(#mapBgGrad); pointer-events:none; }
.dept-grid line { stroke:rgba(255,255,255,.03); stroke-width:.6; pointer-events:none; }
.map-loire { fill:none; stroke:rgba(100,145,185,.3); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.dept-glow { fill:none; stroke:rgba(244,124,32,.12); stroke-width:8; filter:url(#mapGlowF); pointer-events:none; }
.dept-border { fill:none; stroke:#F47C20; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }

/* Draw-in du contour au scroll */
@media (prefers-reduced-motion: no-preference) {
  .dept-border { stroke-dasharray:2000; stroke-dashoffset:2000; transition:stroke-dashoffset 2.2s ease; }
  #loiretMap.loiret-visible .dept-border { stroke-dashoffset:0; }
}

/* Dots communes */
.map-dot { fill:rgba(236,227,208,.72); stroke:rgba(236,227,208,.18); stroke-width:1; transition:fill .2s; }
.map-dot--agglo { fill:rgba(236,227,208,.5); }
.map-dot-ring { fill:none; stroke:rgba(236,227,208,.1); stroke-width:1; transition:stroke .2s; }
.map-city { cursor:pointer; }
.map-city:hover .map-dot, .map-city:focus .map-dot, .map-city.is-active .map-dot { fill:#F47C20; }
.map-city:hover .map-dot-ring, .map-city:focus .map-dot-ring, .map-city.is-active .map-dot-ring { stroke:rgba(244,124,32,.45); }
.map-city:hover .map-label, .map-city:focus .map-label, .map-city.is-active .map-label { fill:rgba(236,227,208,.95); }
.map-city:focus { outline:none; }
.map-city:focus-visible .map-dot { outline:2px solid #F47C20; }

/* Labels + leader lines */
.map-label { font-family:var(--sans); font-size:9px; fill:rgba(168,158,140,.6); letter-spacing:.03em; transition:fill .2s; pointer-events:none; }
.map-leader { stroke:rgba(168,158,140,.2); stroke-width:.8; pointer-events:none; }

/* Agglo encart */
.map-agglo-leader { stroke:rgba(244,124,32,.28); stroke-width:.9; stroke-dasharray:3 3; }
.map-agglo-bg { fill:rgba(15,14,12,.92); stroke:rgba(244,124,32,.22); stroke-width:.8; }
.map-agglo-title { font-family:var(--serif); font-size:9px; fill:#F47C20; letter-spacing:.04em; }
.map-agglo-item { font-family:var(--sans); font-size:8px; fill:rgba(168,158,140,.8); }
@media(max-width:640px){ .map-hide-mobile { display:none; } }

/* HQ Saint-Pryvé — 3 ondes concentriques */
.hq-ring { fill:none; stroke:rgba(244,124,32,.55); stroke-width:1; }
@media (prefers-reduced-motion: no-preference) {
  .hq-ring1 { animation:hqPulse 3s ease-out 0s infinite; }
  .hq-ring2 { animation:hqPulse 3s ease-out 1s infinite; }
  .hq-ring3 { animation:hqPulse 3s ease-out 2s infinite; }
}
@keyframes hqPulse { 0%{r:6;opacity:.75;stroke-width:1.2} 100%{r:26;opacity:0;stroke-width:.3} }

/* Pin dynamique autocomplete */
.map-dynamic-dot { fill:#F47C20; }
.map-dynamic-ping1, .map-dynamic-ping2 { fill:none; stroke:#F47C20; stroke-width:1.2; }
@media (prefers-reduced-motion: no-preference) {
  .map-dynamic-ping1 { animation:dynPing 1.6s ease-out infinite; }
  .map-dynamic-ping2 { animation:dynPing 1.6s ease-out .6s infinite; }
}
@keyframes dynPing { 0%{r:6;opacity:.85} 100%{r:20;opacity:0} }

/* Label département */
.map-dept-label { font-size:8px; fill:rgba(168,158,140,.35); letter-spacing:.22em; font-family:var(--sans); }

/* Carte commune flottante */
.map-commune-card { position:absolute; z-index:20; background:var(--bg-2); border:1px solid rgba(244,124,32,.35); border-radius:10px; padding:12px 16px; min-width:164px; box-shadow:0 8px 32px rgba(0,0,0,.65); pointer-events:auto; transform:translateX(-50%); }
.map-commune-card__title { font-size:13px; color:var(--fg-soft); margin:0 0 10px; line-height:1.4; font-family:var(--sans); white-space:nowrap; }
.map-commune-card__title strong { color:var(--fg); }
.map-commune-card .btn--sm { text-transform:none; letter-spacing:.02em; }

/* Fix: display:flex écrase [hidden] — on force la priorité */
.zone__input-clear[hidden],
.zone__search-result[hidden],
.zone__search-miss[hidden],
.map-commune-card[hidden] { display:none !important; }

/* ============================================================
   ROOF DIVIDERS — silhouette de toit entre sections
   ============================================================ */
.roof-divider {
  position:relative; height:32px; overflow:visible;
  pointer-events:none; user-select:none;
}
.roof-divider svg {
  width:100%; height:32px; display:block; overflow:visible;
}
.roof-divider path {
  stroke:rgba(232,112,31,0.15); stroke-width:1; fill:none;
  stroke-dasharray:800; stroke-dashoffset:800;
  transition:stroke-dashoffset 1.4s var(--ease);
}
.roof-divider.is-visible path { stroke-dashoffset:0; }

/* ============================================================
   AVIS GOOGLE — encart premium
   ============================================================ */
.reviews__card {
  position:relative; overflow:hidden;
}
.reviews__card::before {
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(to right, var(--accent), transparent 70%);
}
.reviews__google-badge {
  display:inline-flex; align-items:center; gap:12px;
  padding:12px 20px; border-radius:10px;
  background:rgba(232,112,31,0.07); border:1px solid rgba(232,112,31,.2);
  margin-bottom:24px;
}
.reviews__google-logo {
  width:20px; height:20px; flex-shrink:0;
}
.reviews__badge-text {
  font-family:var(--sans); font-size:13px; font-weight:600;
  color:var(--fg-soft); letter-spacing:0.04em;
}
.reviews__rating-row {
  display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:18px;
}
.reviews__score {
  font-family:var(--serif); font-size:clamp(40px,5vw,56px); font-weight:500;
  color:var(--fg); line-height:1;
}
.reviews__score-right { text-align:left; }
.reviews__out-of {
  font-size:13px; color:var(--muted); margin-top:2px;
}
.reviews__body {
  color:var(--fg-soft); font-size:clamp(15px,1.3vw,17px); line-height:1.7;
  margin:0 0 26px; font-style:italic;
}

/* ============================================================
   MICRO-DÉTAILS PREMIUM
   ============================================================ */
.why-card, .service-card { transform-style:preserve-3d; will-change:transform; }

/* Override du hover CSS quand le tilt JS est actif */
.why-card:hover { transform:none; } /* le JS gère le transform */

/* Outline focus visible plus propre */
a:focus-visible, button:focus-visible {
  outline:2px solid var(--accent); outline-offset:4px; border-radius:3px;
}

/* ============================================================
   REDUCED MOTION — neutralise toutes les nouvelles animations
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .meteo--rain::before { animation:none !important; }
  .diag-hotspot::after { animation:none !important; }
  .hq-ring1, .hq-ring2, .hq-ring3 { animation:none !important; }
  .map-dynamic-ping1, .map-dynamic-ping2 { animation:none !important; }
  .dept-border { stroke-dasharray:none !important; stroke-dashoffset:0 !important; transition:none !important; }
  .roof-divider path { stroke-dashoffset:0 !important; transition:none !important; }
  @keyframes rainFall, hotPulse, hqPulse, dynPing { from{} to{} }
  .timeline__step-num { transition:none !important; }
  .faq-item__panel { transition:none !important; }
}

/* ============================================================
   HERO PREMIUM — grain, vignette, rail, divider, curseur
   Ajouts pour le clip heure dorée (canvas+frames) — juin 2026
   ============================================================ */

/* Grain filmique discret sur le canvas */
.scrub__grain {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.68' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 300px 300px;
  mix-blend-mode: overlay;
}

/* Vignettage doux — renforce la lisibilité centre/bords */
.scrub__vignette {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: radial-gradient(ellipse 85% 80% at 50% 50%, transparent 45%, rgba(0,0,0,0.42) 100%);
}

/* Fallback poster si canvas désactivé */
.scrub__poster { object-fit: cover; }

/* Rail éditorial vertical — rééquilibre la composition côté droit */
.scrub__rail {
  position: absolute; right: var(--pad); top: 50%; transform: translateY(-50%);
  z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.scrub__rail-sep {
  display: block; width: 1px; height: 56px;
  background: linear-gradient(to bottom, transparent, rgba(246,239,226,0.35));
}
.scrub__rail-tel {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.1em;
  color: rgba(246,239,226,0.65); text-shadow: 0 1px 14px rgba(0,0,0,0.6);
  transition: color .3s var(--ease);
}
.scrub__rail-tel:hover { color: var(--accent); }
.scrub__rail-avail {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--sans); font-size: 9.5px; font-weight: 500; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(246,239,226,0.35);
  text-shadow: 0 1px 10px rgba(0,0,0,0.5);
}
@media (max-width: 820px) { .scrub__rail { display: none; } }

/* Divider "ligne de toit" en bas de section */
.scrub__divider {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 15; height: 1px;
  background: linear-gradient(to right, transparent 0%, var(--line) 18%, var(--line) 82%, transparent 100%);
}

/* ============================================================
   CURSEUR CUSTOM — point + halo (desktop / pointer: fine)
   ============================================================ */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none;
  width: 0; height: 0;
  display: none; opacity: 1;
  will-change: transform;
  transition: opacity .3s var(--ease);
}
.has-cursor .cursor { display: block; }

.cursor::before {
  content: ''; display: block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--fg);
  position: absolute; top: 0; left: 0;
  transform: translate(-50%, -50%);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.cursor.is-hover::before { opacity: 0; transform: translate(-50%, -50%) scale(0); }

.cursor__halo {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(246, 239, 226, 0.28);
  position: absolute; top: 0; left: 0;
  transform: translate(-50%, -50%);
  transition: width .35s var(--ease), height .35s var(--ease), border-color .35s var(--ease);
}
.cursor.is-hover .cursor__halo {
  width: 54px; height: 54px;
  border-color: rgba(244, 124, 32, 0.55);
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  .cursor { display: none !important; }
  .has-cursor .cursor { display: none !important; }
}

/* ============ TUILE SIGNATURE 3D (#signature) ============ */
.ck-signature{background:radial-gradient(120% 100% at 70% 30%, #1c1814 0%, #121110 60%);padding:clamp(64px,9vw,120px) 0;overflow:hidden}
.ck-signature__inner{max-width:1180px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.ck-signature__eyebrow{font-family:var(--sans);font-size:13px;letter-spacing:4px;text-transform:uppercase;color:#cba274;margin:0 0 14px}
.ck-signature__title{font-family:var(--serif);font-weight:600;font-size:clamp(32px,5vw,52px);line-height:1.05;color:#f4ecda;margin:0 0 18px}
.ck-signature__lead{font-family:var(--sans);font-size:clamp(15px,1.4vw,18px);line-height:1.7;color:#c9bca8;max-width:46ch;margin:0}
.ck-signature__stage{position:relative;width:100%;height:clamp(340px,42vw,520px);border-radius:18px;overflow:hidden;cursor:grab;background:#161210;touch-action:pan-y}
.ck-signature__stage.grabbing{cursor:grabbing}
.ck-signature__stage canvas{display:block;width:100%;height:100%;position:relative;z-index:1}
.ck-signature__stage.tuile-fallback{background-image:var(--poster);background-size:cover;background-position:center}
@media (max-width:860px){.ck-signature__inner{grid-template-columns:1fr;gap:28px}.ck-signature__text{text-align:center}.ck-signature__lead{margin-left:auto;margin-right:auto}}
@media (prefers-reduced-motion: reduce){.ck-signature__stage{cursor:default}}

/* ============ GUIDE DES TUILES (guide-des-tuiles.html) ============
   Reprend la charte du site via les variables --serif / --sans / --accent. */
.gt-intro{background:radial-gradient(120% 100% at 70% 20%,#1c1814,#121110 60%);padding:clamp(56px,8vw,110px) 0;color:var(--fg-soft);text-align:center}
.gt-intro .gt-wrap{max-width:760px;margin:0 auto;padding:0 24px}
.gt-intro h1{font-family:var(--serif);font-weight:600;font-size:clamp(34px,6vw,60px);line-height:1.04;margin:0 0 16px;color:#f4ecda}
.gt-intro p{font-family:var(--sans);font-size:clamp(15px,1.4vw,18px);line-height:1.7;color:#c9bca8;margin:0}
.gt-stage{position:relative;width:100%;max-width:760px;height:clamp(300px,40vw,460px);margin:28px auto 0;border-radius:18px;overflow:hidden;cursor:grab;background:#161210}
.gt-stage.grabbing{cursor:grabbing}
.gt-stage canvas{display:block;width:100%;height:100%;position:relative;z-index:1}
.gt-stage.tuile-fallback{background-image:var(--poster);background-size:cover;background-position:center}
.gt-stage-cap{font-family:var(--sans);font-size:13px;letter-spacing:2px;text-transform:uppercase;color:#cba274;text-align:center;margin:12px 0 0}
.gt-section{background:#121110;padding:clamp(40px,6vw,80px) 0}
.gt-filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:1180px;margin:0 auto clamp(28px,4vw,48px);padding:0 24px}
.gt-filters button{font-family:var(--sans);font-size:13px;letter-spacing:1px;color:#cdbfa8;background:transparent;border:1px solid rgba(243,234,215,.22);padding:8px 16px;border-radius:999px;cursor:pointer}
.gt-filters button.is-active{background:var(--accent);border-color:var(--accent);color:#1a120a}
.gt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;max-width:1180px;margin:0 auto;padding:0 24px}
.gt-card{background:#191512;border:0.5px solid rgba(243,234,215,.12);border-radius:16px;overflow:hidden}
.gt-card[hidden]{display:none}
.gt-card__head{display:grid;width:100%;text-align:left;background:transparent;border:0;cursor:pointer;padding:0;color:inherit}
.gt-card__img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#221b15}
.gt-card__chip{font-family:var(--sans);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#cba274;margin:14px 18px 0}
.gt-card__name{font-family:var(--serif);font-size:24px;color:#f4ecda;margin:4px 18px 0;line-height:1.1}
.gt-card__atout{font-family:var(--sans);font-size:14px;line-height:1.6;color:#c2b6a3;margin:8px 18px 0}
.gt-card__more{font-family:var(--sans);font-size:13px;color:var(--accent);margin:12px 18px 18px}
.gt-card__head[aria-expanded="true"] .gt-card__more{opacity:.5}
.gt-card__detail{padding:0 18px 18px}
.gt-card__detail p{font-family:var(--sans);font-size:14px;line-height:1.65;color:#c2b6a3;margin:0 0 10px}
.gt-card__detail strong{color:#e6dcc8;font-weight:600}
.gt-card__cta{display:inline-block;font-family:var(--sans);font-size:13px;color:#1a120a;background:var(--accent);padding:9px 16px;border-radius:8px;text-decoration:none;margin-top:4px}
.gt-cta-band{background:radial-gradient(120% 100% at 50% 0%,#1c1814,#121110);text-align:center;padding:clamp(48px,7vw,90px) 24px}
.gt-cta-band h2{font-family:var(--serif);font-size:clamp(28px,4vw,44px);color:#f4ecda;margin:0 0 18px}
.gt-cta-band a{display:inline-block;font-family:var(--sans);background:var(--accent);color:#1a120a;padding:13px 26px;border-radius:10px;text-decoration:none;font-size:15px}
@media (prefers-reduced-motion: reduce){.gt-stage{cursor:default}}

/* ============================================================
   MESURONS VOTRE TOITURE — reconstruction 3D IGN (#ck-toit-3d)
   Variables :root réelles (fallbacks hex). Section autonome.
   ============================================================ */
#ck-toit-3d .ck3d-search{display:flex;gap:8px;align-items:center;max-width:620px;margin:4px 0 0}
#ck-toit-3d .ck3d-field{flex:1;display:flex;background:#1d1a16;border:1px solid #2c2822;border-radius:10px;height:46px}
#ck-toit-3d .ck3d-field input{flex:1;background:none;border:0;color:var(--fg-soft,#ECE3D0);font:inherit;font-size:14px;padding:0 14px;outline:none}
#ck-toit-3d .ck3d-field input:focus-visible{outline:2px solid var(--accent,#F47C20);outline-offset:2px;border-radius:8px}
#ck-toit-3d #ck3d-go{background:var(--accent,#F47C20);color:var(--bg,#121110);border:0;border-radius:10px;height:46px;padding:0 18px;font-weight:600;cursor:pointer}
#ck-toit-3d #ck3d-go:focus-visible{outline:2px solid var(--fg-soft,#ECE3D0);outline-offset:2px}
#ck-toit-3d .ck3d-stage{position:relative;height:470px;border-radius:14px;overflow:hidden;border:1px solid #2c2822;background:#e7d4bd}
#ck-toit-3d .ck3d-status{position:absolute;top:10px;left:10px;z-index:4;display:flex;align-items:center;gap:7px;background:rgba(18,17,16,.72);border:1px solid #322d26;border-radius:8px;padding:6px 10px;font-size:11px;color:var(--fg-soft,#ECE3D0)}
#ck-toit-3d #ck3d-dot{width:7px;height:7px;border-radius:50%;background:var(--accent,#F47C20)}
#ck-toit-3d .ck3d-load{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;opacity:0;transition:opacity .3s;background:rgba(18,17,16,.86);border:1px solid #3a332a;border-radius:12px;padding:16px 18px;width:240px;text-align:center;color:var(--fg-soft,#ECE3D0)}
#ck-toit-3d .ck3d-load-t{font-family:var(--serif,'Cormorant Garamond',serif);font-size:17px}
#ck-toit-3d #ck3d-loadtxt{font-size:11.5px;color:#bcae9c;min-height:16px;margin-top:3px}
#ck-toit-3d .ck3d-bar{margin-top:11px;height:5px;background:#2a2620;border-radius:3px;overflow:hidden}
#ck-toit-3d #ck3d-bar{height:100%;width:0;background:var(--accent,#F47C20)}
#ck-toit-3d #ck3d-pct{font-size:11px;color:var(--accent,#F47C20);margin-top:6px}
#ck-toit-3d .ck3d-panel{position:absolute;left:10px;bottom:10px;z-index:4;opacity:0;transition:opacity .5s;background:rgba(18,17,16,.84);border:1px solid #322d26;border-radius:12px;padding:13px 14px;min-width:250px;max-width:300px;color:var(--fg-soft,#ECE3D0)}
#ck-toit-3d .ck3d-panel-k{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#9a9082;margin:0 0 6px}
#ck-toit-3d .ck3d-badge{display:inline-block;font-size:10px;color:var(--accent,#F47C20);border:1px solid #5a3a18;background:#241a10;border-radius:20px;padding:2px 9px;margin-bottom:8px}
#ck-toit-3d .ck3d-main{display:flex;align-items:baseline;gap:6px;font-size:13px;color:#bcae9c}
#ck-toit-3d .ck3d-main strong{font-family:var(--serif,'Cormorant Garamond',serif);font-size:30px;color:var(--fg-soft,#ECE3D0);font-weight:500}
#ck-toit-3d .ck3d-grid{display:flex;gap:10px;margin-top:12px}
#ck-toit-3d .ck3d-grid div{flex:1;background:#1d1a16;border-radius:9px;padding:8px 9px}
#ck-toit-3d .ck3d-grid span{display:block;font-size:11px;color:#9a9082}
#ck-toit-3d .ck3d-grid b{font-size:15px;font-weight:500;color:var(--fg-soft,#ECE3D0)}
#ck-toit-3d .ck3d-grid div:last-child b{color:var(--accent,#F47C20)}
#ck-toit-3d .ck3d-note{font-size:11px;color:#9a9082;line-height:1.5;margin:10px 0 0}
#ck-toit-3d .ck3d-cta{display:inline-flex;align-items:center;gap:6px;margin-top:11px;background:var(--accent,#F47C20);color:var(--bg,#121110);font-weight:600;font-size:13px;border-radius:9px;padding:9px 12px;text-decoration:none}
#ck-toit-3d .ck3d-cta:focus-visible{outline:2px solid var(--fg-soft,#ECE3D0);outline-offset:2px}
#ck-toit-3d .ck3d-err{display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;background:rgba(18,17,16,.9);border:1px solid #322d26;border-radius:12px;padding:14px 16px;max-width:300px;text-align:center;color:var(--fg-soft,#ECE3D0);font-size:13px}
#ck-toit-3d .ck3d-credit{font-size:11px;color:#9a9082;margin-top:10px}
#ck-toit-3d .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media(max-width:600px){#ck-toit-3d .ck3d-stage{height:380px}#ck-toit-3d .ck3d-search{flex-wrap:wrap}#ck-toit-3d #ck3d-go{width:100%}#ck-toit-3d .ck3d-panel{left:8px;right:8px;min-width:0;max-width:none}}
@media(prefers-reduced-motion:reduce){#ck-toit-3d .ck3d-panel,#ck-toit-3d .ck3d-load{transition:none}}

/* ============================================================
   LÉO CINÉMATIQUE (#leo-cine) — scène plein cadre, vidéo opaque
   Variables réelles du :root (--accent, --fg-soft, --bg, --serif, --sans).
   ============================================================ */
#leo-cine{position:relative;width:100%;min-height:82vh;display:flex;align-items:center;overflow:hidden;background:var(--bg,#121110);}
#leo-cine .leo-cine-media{position:absolute;inset:0;z-index:0;}
#leo-cine .leo-cine-media img,#leo-cine .leo-cine-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}
#leo-cine .leo-cine-scrim{position:absolute;inset:0;background:linear-gradient(90deg, rgba(12,11,9,.88) 0%, rgba(12,11,9,.62) 38%, rgba(12,11,9,.18) 66%, rgba(12,11,9,0) 100%);}
#leo-cine .leo-cine-content{position:relative;z-index:2;max-width:560px;padding:6vw clamp(20px,6vw,90px);opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease,ease),transform .8s var(--ease,ease);}
#leo-cine.in .leo-cine-content{opacity:1;transform:none;}
#leo-cine .leo-cine-eyebrow{font-family:var(--sans,'Work Sans',sans-serif);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent,#F47C20);margin:0 0 14px;}
#leo-cine h2{font-family:var(--serif,'Cormorant Garamond',serif);font-weight:500;font-size:clamp(34px,5vw,58px);line-height:1.06;color:var(--fg,#F6EFE2);margin:0 0 18px;}
#leo-cine .leo-cine-leo{font-family:var(--serif,'Cormorant Garamond',serif);font-style:italic;font-size:clamp(18px,2.2vw,24px);line-height:1.5;color:var(--fg-soft,#ECE3D0);max-width:46ch;margin:0 0 26px;}
#leo-cine .leo-cine-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
#leo-cine #leo-cine-talk{background:var(--accent,#F47C20);color:var(--accent-ink,#1A0E06);border:0;border-radius:12px;font-family:var(--sans,'Work Sans',sans-serif);font-weight:600;font-size:15px;padding:14px 26px;cursor:pointer;transition:transform .15s,filter .15s;}
#leo-cine #leo-cine-talk:hover{transform:translateY(-1px);filter:brightness(1.05);}
#leo-cine #leo-cine-talk:focus-visible{outline:2px solid var(--accent-bright,#FF8C42);outline-offset:3px;}
#leo-cine .leo-cine-secondary{color:var(--fg-soft,#ECE3D0);font-family:var(--sans,'Work Sans',sans-serif);font-size:14px;text-decoration:underline;text-underline-offset:3px;}
@media(max-width:600px){
  #leo-cine{min-height:88vh;align-items:flex-end;}
  #leo-cine .leo-cine-scrim{background:linear-gradient(0deg, rgba(12,11,9,.92) 0%, rgba(12,11,9,.55) 34%, rgba(12,11,9,.08) 64%, rgba(12,11,9,0) 100%);}
  #leo-cine .leo-cine-content{max-width:none;padding:0 22px 48px;text-align:left;}
}
@media(prefers-reduced-motion:reduce){#leo-cine .leo-cine-content{opacity:1;transform:none;transition:none;}}

/* ====== FX CHIFFRES — rendu signature (bande A : .stats) ====== */
.stats__inner .stat{position:relative}
.stats__inner .stat__num{
  background:linear-gradient(100deg,#ECE3D0 0%,#ECE3D0 40%,#F47C20 50%,#ECE3D0 60%,#ECE3D0 100%);
  background-size:300% 100%;background-position:120% 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:ckSweep 5.5s ease-in-out infinite, ckGlow 3s ease-in-out infinite, ckBreathe 5s ease-in-out infinite;
}
.stats__inner .stat__unit{
  -webkit-text-fill-color:#F47C20;color:#F47C20;
  animation:ckSufGlow 3s ease-in-out infinite;
}
.stats__inner .stat::after{content:"";position:absolute;left:0;bottom:-2px;height:1.5px;width:54px;
  background:linear-gradient(90deg,transparent,#F47C20,transparent);transform:scaleX(0);transform-origin:left;
  animation:ckBar 5.5s ease-in-out infinite}
@keyframes ckSweep{0%,100%{background-position:120% 0}50%{background-position:-20% 0}}
@keyframes ckGlow{0%,100%{filter:drop-shadow(0 0 9px rgba(244,124,32,.16))}50%{filter:drop-shadow(0 0 22px rgba(244,124,32,.5))}}
@keyframes ckSufGlow{0%,100%{text-shadow:0 0 10px rgba(244,124,32,.3)}50%{text-shadow:0 0 20px rgba(244,124,32,.7)}}
@keyframes ckBreathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.014)}}
@keyframes ckBar{0%{transform:scaleX(0);opacity:0}28%{opacity:1}50%{transform:scaleX(1)}80%{opacity:1}100%{transform:scaleX(1);opacity:0}}

/* ====== FX CHIFFRES — rendu signature (bande B : .why-stats, hero "pourquoi") ====== */
.why-stats .why-stat{position:relative}
.why-stats .why-stat__num{
  display:inline-block;
  background:linear-gradient(100deg,#ECE3D0 0%,#ECE3D0 40%,#F47C20 50%,#ECE3D0 60%,#ECE3D0 100%);
  background-size:300% 100%;background-position:120% 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:ckSweep 5.5s ease-in-out infinite, ckGlow 3s ease-in-out infinite, ckBreathe 5s ease-in-out infinite;
}
.why-stats .why-stat__suffix{
  -webkit-text-fill-color:#F47C20;color:#F47C20;
  animation:ckSufGlow 3s ease-in-out infinite;
}
.why-stats .why-stat::after{content:"";position:absolute;left:0;bottom:-4px;height:1.5px;width:54px;
  background:linear-gradient(90deg,transparent,#F47C20,transparent);transform:scaleX(0);transform-origin:left;
  animation:ckBar 5.5s ease-in-out infinite}
/* apparition cinématique — jouée quand la bande entre à l'écran (classe is-revealed posée en JS) */
.stats__inner.is-revealed .stat,
.why-stats.is-revealed .why-stat{animation:ckReveal .95s cubic-bezier(.16,.8,.3,1) both}
.stats__inner.is-revealed .stat:nth-child(2),
.why-stats.is-revealed .why-stat:nth-child(2){animation-delay:.13s}
.stats__inner.is-revealed .stat:nth-child(3),
.why-stats.is-revealed .why-stat:nth-child(3){animation-delay:.26s}
.stats__inner.is-revealed .stat:nth-child(4),
.why-stats.is-revealed .why-stat:nth-child(4){animation-delay:.39s}
.stats__inner.is-revealed .stat:nth-child(5),
.why-stats.is-revealed .why-stat:nth-child(5){animation-delay:.52s}
@keyframes ckReveal{0%{opacity:0;filter:blur(12px);transform:translateY(18px) scale(.93)}55%{filter:blur(0)}100%{opacity:1;transform:translateY(0) scale(1)}}
/* --- Chips matière configurateur (.roof3d-chip) --- */
.roof3d-chip{position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
.roof3d-chip:not(.is-active){animation:ckChipHalo 3.6s ease-in-out infinite}
.roof3d-chip:nth-of-type(2){animation-delay:.4s}
.roof3d-chip:nth-of-type(3){animation-delay:.8s}
.roof3d-chip:nth-of-type(4){animation-delay:1.2s}
@keyframes ckChipHalo{
  0%,100%{box-shadow:0 0 0 0 rgba(244,124,32,0)}
  50%    {box-shadow:0 0 14px 1px rgba(244,124,32,.28)}
}
.roof3d-chip::before{
  content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-18deg);pointer-events:none;
  animation:ckChipShine 4.2s ease-in-out infinite;
}
.roof3d-chip:nth-of-type(2)::before{animation-delay:.5s}
.roof3d-chip:nth-of-type(3)::before{animation-delay:1s}
.roof3d-chip:nth-of-type(4)::before{animation-delay:1.5s}
@keyframes ckChipShine{0%{left:-120%}45%,100%{left:140%}}
/* le bouton actif reste ORANGE PLEIN (sélection lisible) */
.roof3d-chip.is-active{
  background:#F47C20;border-color:#F47C20;color:#121110;
  box-shadow:0 0 16px rgba(244,124,32,.45);animation:none;
}
.roof3d-chip.is-active::before{display:none}
.roof3d-chip:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(244,124,32,.30)}
/* --- accessibilité : chiffres (2 bandes) + chips --- */
@media (prefers-reduced-motion: reduce){
  .stats__inner .stat__num,.stats__inner .stat__unit,.stats__inner .stat,.stats__inner .stat::after,
  .stats__inner.is-revealed .stat,.why-stats.is-revealed .why-stat,
  .why-stats .why-stat__num,.why-stats .why-stat__suffix,.why-stats .why-stat,.why-stats .why-stat::after,
  .roof3d-chip,.roof3d-chip::before{animation:none !important}
  .stats__inner .stat__num,.why-stats .why-stat__num{-webkit-text-fill-color:#ECE3D0;background:none}
  .stats__inner .stat::after,.why-stats .why-stat::after{transform:scaleX(1);opacity:.5}
}