/* ============================================================
   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 {
  /* ---- Backgrounds (noir charbon — base de marque Provençal) ---- */
  --bg:          #131211;   /* ADAPT — noir charbon tiède, base de page */
  --bg-2:        #191817;   /* derived: +1 (bandes alternées) */
  --bg-3:        #201e1d;   /* derived: +2 */
  --ink:         #0a0908;   /* derived: le plus sombre (stats / footer) */

  /* ---- Text ---- */
  --fg:          #f4f1ec;   /* ADAPT — blanc cassé tiède */
  --fg-soft:     #cbc6bf;   /* derived: texte secondaire */
  --muted:       #888278;   /* derived: labels, légal, captions */

  /* ---- Accent + lines ---- */
  --accent:      #b21f33;   /* ADAPT — rouge Provençal (bordeaux logo #82162b, légèrement relevé pour lisibilité sur fond sombre — accent UNIQUE) */
  --line:        rgba(244, 241, 236, 0.13); /* derived from --fg @ ~13% — filets */

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

  /* ---- Motion + type ---- */
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --serif:       "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif; /* ADAPT — display grotesque architectural (titres) */
  --sans:        "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;  /* ADAPT — corps neutre lisible */
}

/* ============================================================
   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: normal; } /* Bricolage Grotesque n'a pas d'italique : accents = couleur, pas oblique synthétique */

/* ---- 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;
  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);
}
/* Voile sombre en haut de page : garantit la lisibilité de la nav (liens, téléphone,
   bouton) par-dessus les héros à ciel clair. Il s'efface dès que la barre pleine
   (is-scrolled) prend le relais au scroll. */
.nav::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 150px;
  background: linear-gradient(to bottom, rgba(8,8,10,0.6) 0%, rgba(8,8,10,0.28) 45%, rgba(8,8,10,0) 100%);
  pointer-events: none; z-index: -1; transition: opacity .5s var(--ease);
}
.nav.is-scrolled::before { opacity: 0; }
.nav__brand--logo img { filter: drop-shadow(0 1px 6px rgba(0,0,0,0.45)); }
.nav__brand {
  font-family: var(--sans); font-weight: 500;
  font-size: 16px; letter-spacing: 0.42em; padding-left: 0.42em;
  color: var(--fg);
}
/* Logo détouré monochrome crème (logo-light.png) — posé directement sur
   l'anthracite, sans cartouche blanc, pour un rendu premium « renversé ». */
.nav__brand--logo { padding: 0; display: inline-flex; align-items: center; }
.nav__brand--logo img { height: 34px; width: auto; display: block; }
.footer__logo { display: inline-flex; }
.footer__logo img { height: 64px; width: auto; display: block; opacity: 0.92; }
.nav__links { display: flex; gap: 24px; }
.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;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.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.6);
  padding: 11px 22px; border-radius: 999px; text-shadow: 0 1px 8px rgba(0,0,0,0.5);
  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); }

/* ---- Hamburger (mobile uniquement) ---- */
.nav__toggle {
  display: none; /* affiché ≤980px */
  flex-direction: column; justify-content: center; gap: 6px;
  width: 44px; height: 44px; margin-left: 14px; padding: 0;
  background: none; border: 0; cursor: pointer; z-index: 210;
}
.nav__toggle-bar {
  display: block; width: 24px; height: 2px; margin: 0 auto;
  background: var(--fg); border-radius: 2px;
  transition: transform .4s var(--ease), opacity .3s var(--ease);
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* ---- Overlay plein écran ---- */
.nav-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10,10,11,0.96); backdrop-filter: blur(18px) saturate(115%);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s var(--ease);
}
.nav-overlay.is-open { opacity: 1; visibility: visible; }
.nav-overlay__menu { display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 3.4vh, 30px); text-align: center; padding: var(--pad); }
.nav-overlay__link {
  font-family: var(--serif); font-size: clamp(30px, 8vw, 46px); line-height: 1; color: var(--fg);
  opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease), color .3s var(--ease);
}
.nav-overlay.is-open .nav-overlay__link { opacity: 1; transform: none; }
.nav-overlay.is-open .nav-overlay__link:nth-child(1) { transition-delay: .08s; }
.nav-overlay.is-open .nav-overlay__link:nth-child(2) { transition-delay: .14s; }
.nav-overlay.is-open .nav-overlay__link:nth-child(3) { transition-delay: .20s; }
.nav-overlay.is-open .nav-overlay__link:nth-child(4) { transition-delay: .26s; }
.nav-overlay.is-open .nav-overlay__link:nth-child(5) { transition-delay: .32s; }
.nav-overlay__link:hover { color: var(--accent); }
.nav-overlay__cta {
  margin-top: 14px; font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink);
  background: var(--accent); padding: 15px 30px; border-radius: 999px;
  opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease) .38s, transform .5s var(--ease) .38s, filter .3s var(--ease);
}
.nav-overlay.is-open .nav-overlay__cta { opacity: 1; transform: none; }
.nav-overlay__cta:hover { filter: brightness(1.08); }
.nav-overlay__foot {
  margin-top: clamp(18px, 4vh, 34px); display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  font-size: 13px; letter-spacing: 0.02em; color: var(--muted);
  opacity: 0; transition: opacity .5s var(--ease) .46s;
}
.nav-overlay.is-open .nav-overlay__foot { opacity: 1; }
.nav-overlay__foot a { color: var(--fg-soft); }
.nav-overlay__foot a:hover { color: var(--accent); }
body.nav-open { overflow: hidden; }

/* ============================================================
   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: 400vh; 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; }
.scrub__video { display: none; }
.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__logo { padding: 0; }
.loader__logo img { width: clamp(200px, 28vw, 320px); height: auto; display: block; opacity: 0.95; }
.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(58px, 10vw, 132px); line-height: 0.92; color: var(--fg);
  text-shadow: 0 2px 50px rgba(0,0,0,0.45);
}
.scrub__title em, .scrub__beat-title em { color: var(--fg); }
.scrub__tagline {
  font-family: var(--sans); font-weight: 300; font-size: clamp(17px, 2vw, 25px);
  color: var(--fg-soft); margin: 22px 0 0; max-width: 30ch; letter-spacing: 0.01em;
}
.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__video { 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; }

/* ============================================================
   GALLERY (réalisations) — grid of real finished projects
   ============================================================ */
.gallery { background: var(--bg-2); padding: clamp(90px, 13vh, 180px) var(--pad); }
.gallery__inner { max-width: var(--maxw); margin: 0 auto; }
.gallery__head { margin-bottom: clamp(34px, 5vw, 60px); max-width: 640px; }
.gallery__title { font-size: clamp(34px, 4.4vw, 64px); color: var(--fg); }
.gallery__title em { color: var(--accent); }
.gallery__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 26px); }
@media (max-width: 1024px) { .gallery__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .gallery__grid { grid-template-columns: 1fr; } }
.gallery__fig { margin: 0; position: relative; overflow: hidden; border-radius: 4px; aspect-ratio: 4 / 3;
  background: var(--bg-3); box-shadow: 0 30px 70px -40px rgba(0,0,0,0.7); }
.gallery__fig img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.gallery__fig:hover img { transform: scale(1.05); }
.gallery__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 28px 20px 16px; display: flex; flex-direction: column; gap: 2px;
  font-size: 12px; letter-spacing: 0.04em; color: var(--fg);
  background: linear-gradient(to top, rgba(8,8,10,0.82), rgba(8,8,10,0)); }
.gallery__cap-k { font-family: var(--serif); font-size: clamp(16px, 1.5vw, 19px); }
.gallery__cap-v { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-soft); }

/* ============================================================
   BEFORE / AFTER comparator (rénovation)
   ============================================================ */
.ba-section { background: var(--bg); padding: clamp(90px, 13vh, 180px) var(--pad); }
.ba-section__inner { max-width: var(--maxw); margin: 0 auto; }
.ba-section__head { margin-bottom: clamp(34px, 5vw, 60px); max-width: 640px; }
.ba-section__title { font-size: clamp(34px, 4.4vw, 64px); color: var(--fg); }
.ba-section__title em { color: var(--accent); }
.ba { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px;
  user-select: none; touch-action: none; cursor: ew-resize;
  box-shadow: 0 40px 90px -44px rgba(0,0,0,0.75); }
.ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba__overlay { clip-path: inset(0 50% 0 0); }
.ba__handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px;
  background: var(--fg); z-index: 3; pointer-events: none; }
.ba__grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 999px; background: var(--fg); color: var(--ink);
  display: flex; align-items: center; justify-content: center; font-size: 14px; letter-spacing: -0.05em;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5); }
.ba__tag { position: absolute; top: 16px; z-index: 2; padding: 7px 13px; border-radius: 999px;
  background: rgba(8,8,10,0.55); backdrop-filter: blur(6px);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg); }
.ba__tag--l { left: 16px; } .ba__tag--r { right: 16px; }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 4; }

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto { background: var(--bg); padding: clamp(110px, 18vh, 220px) var(--pad); }
.manifesto__grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 0.82fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.manifesto__portrait { position: relative; margin: 0; }
.manifesto__portrait img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 72%; display: block; border-radius: 4px; filter: grayscale(0.12) contrast(1.03); }
.manifesto__cap { margin-top: 22px; display: flex; flex-direction: column; gap: 5px; }
.manifesto__name { font-family: var(--serif); font-size: clamp(20px, 2vw, 26px); color: var(--fg); }
.manifesto__role { font-family: var(--sans); font-size: 13px; letter-spacing: 0.04em; color: var(--muted); text-transform: uppercase; }
.manifesto__inner { max-width: 620px; }
.manifesto__title { font-size: clamp(40px, 5vw, 84px); color: var(--fg); line-height: 1.02; }
.manifesto__title em { color: var(--accent); }
.manifesto__copy { font-family: var(--sans); font-weight: 300; font-size: clamp(17px, 1.5vw, 21px); color: var(--fg-soft); margin: 30px 0 0; max-width: 56ch; line-height: 1.65; }
.manifesto__sign { font-family: var(--serif); font-weight: 600; font-size: clamp(20px, 2vw, 28px); color: var(--accent); margin-top: 26px; }
.manifesto__role--inline { margin-top: 7px; }
@media (max-width: 860px) {
  .manifesto__grid { grid-template-columns: 1fr; gap: 40px; }
  .manifesto__portrait { max-width: 420px; margin: 0 auto; }
  .manifesto__inner { max-width: none; }
}

/* ============================================================
   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: start;
}
.contact__inner > * { min-width: 0; } /* évite le grid-blowout : la colonne peut rétrécir sous mobile */
.contact__details { margin-top: clamp(32px, 4vw, 48px); }
.contact__value { overflow-wrap: anywhere; } /* l'email (token insécable) wrappe au lieu de déborder */

/* ---- Soumission form ---- */
.cform { display: flex; flex-direction: column; gap: 18px; }
.cform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cform__field { display: flex; flex-direction: column; gap: 8px; }
.cform__label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.cform input, .cform select, .cform textarea {
  font-family: var(--sans); font-size: 15px; color: var(--fg);
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 6px;
  padding: 13px 14px; width: 100%; transition: border-color .3s var(--ease), background .3s var(--ease);
}
.cform input:focus, .cform select:focus, .cform textarea:focus {
  outline: none; border-color: var(--accent); background: var(--ink);
}
.cform textarea { resize: vertical; min-height: 110px; }
.cform select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 14px) center; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.cform__submit { align-self: flex-start; margin-top: 6px; border: none; cursor: pointer; }
.cform__reassure { font-size: 13px; color: var(--muted); margin: 2px 0 0; letter-spacing: 0.01em; }
.cform__status { font-size: 14px; color: var(--accent); margin: 0; min-height: 1.2em; }
.cform__status.is-error { color: #d98a6a; }
.contact__form-wrap.is-sent .cform { display: none; }
.contact__form-wrap .cform__sent { display: none; }
.contact__form-wrap.is-sent .cform__sent { display: block; }
.cform__sent { font-family: var(--serif); font-size: clamp(20px, 2.2vw, 28px); color: var(--fg); line-height: 1.4; }
.cform__sent em { color: var(--accent); }
.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-weight: 500; 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);
}

/* ============================================================
   PREUVE — avis clients
   ============================================================ */
.proof { background: var(--bg-2); padding: clamp(90px, 14vh, 180px) var(--pad); }
.proof__inner { max-width: var(--maxw); margin: 0 auto; }
.proof__head { max-width: 720px; margin-bottom: clamp(40px, 6vw, 70px); }
.proof__title { font-size: clamp(34px, 4.6vw, 68px); color: var(--fg); line-height: 1.02; margin-top: 6px; }
.proof__title em { color: var(--accent); }
.proof__rating { display: flex; align-items: center; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.proof__stars { color: var(--accent); font-size: 20px; letter-spacing: 2px; }
.proof__rating-txt { font-size: 15px; color: var(--fg-soft); }
.proof__rating-txt strong { color: var(--fg); font-weight: 600; }
.proof__rating-sub { color: var(--muted); }
.proof__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(18px, 2vw, 28px); }
.proof__card {
  margin: 0; padding: clamp(26px, 2.4vw, 36px); border-radius: 6px;
  background: var(--bg-3); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 22px;
}
.proof__card blockquote {
  margin: 0; font-family: var(--sans); font-weight: 300; font-size: clamp(15px, 1.1vw, 18px); line-height: 1.6; color: var(--fg-soft);
}
.proof__card blockquote::before { content: "\201C"; color: var(--accent); font-size: 1.4em; line-height: 0; vertical-align: -0.25em; margin-right: 2px; }
.proof__card figcaption { display: flex; flex-direction: column; gap: 3px; margin-top: auto; }
.proof__name { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--fg); letter-spacing: 0.02em; }
.proof__src { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

/* ============================================================
   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; }
  .nav__toggle { display: flex; }
}
/* 🔴 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) {
  /* mobile : on garde le VRAI scroll-scrub (le scroll pilote le zoom), hauteur réduite
     pour un défilement plus court qu'au desktop. La vidéo ne sert que de repli
     reduced-motion (voir bloc prefers-reduced-motion). */
  .scrub { height: 300vh; }
  /* mobile : en portrait le texte du hero tombe sur la partie claire de l'image.
     On assombrit davantage le bas et on ajoute des ombres pour garder la lisibilité
     (surtout l'accroche rouge sur fond métallique clair). */
  .scrub__scrim {
    background:
      linear-gradient(to top, rgba(8,8,10,0.92) 0%, rgba(8,8,10,0.74) 32%, rgba(8,8,10,0.42) 55%, rgba(8,8,10,0.1) 76%, rgba(8,8,10,0) 90%),
      linear-gradient(to bottom, rgba(8,8,10,0.55) 0%, rgba(8,8,10,0) 30%);
  }
  .scrub__eyebrow { text-shadow: 0 1px 18px rgba(0,0,0,0.9), 0 0 3px rgba(0,0,0,0.7); }
  .scrub__title { text-shadow: 0 2px 28px rgba(0,0,0,0.8); }
  .scrub__tagline { text-shadow: 0 1px 14px rgba(0,0,0,0.65); }
  .scrub__beat-title { text-shadow: 0 2px 26px rgba(0,0,0,0.8); }
  .scrub__beat-copy { text-shadow: 0 1px 18px rgba(0,0,0,0.7); }
}
@media (max-width: 700px) {
  /* formulaire : empiler nom/téléphone */
  .cform__row { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .stats__inner { grid-template-columns: 1fr; }
  .footer__base { flex-direction: column; text-align: center; align-items: center; }
  .bleed__specs { gap: 22px; }
  /* garder l'action principale accessible sur mobile (version compacte) */
  .nav__cta { display: inline-flex; font-size: 10px; letter-spacing: 0.12em; padding: 9px 14px; }
  .nav { padding-left: 16px; padding-right: 16px; }
  .nav__brand--logo img { height: 28px; }
  /* avant/après : un peu plus haut sur mobile pour la lisibilité */
  .ba { aspect-ratio: 3 / 4; }
  .ba__grip { width: 38px; height: 38px; }
  /* typo hero : éviter que les longs mots (« Constructions ») débordent */
  .scrub__title { font-size: clamp(34px, 11vw, 54px); }
  .scrub__beat-title { font-size: clamp(28px, 8vw, 42px); }
  /* laisser de la place sous le texte pour l'indice de scroll */
  .scrub__beat { max-width: none; right: var(--pad); bottom: clamp(96px, 17vh, 160px); }
  .scrub__tagline { font-size: clamp(16px, 4.6vw, 20px); }
  /* indice de scroll centré tout en bas, sous le texte (plus de chevauchement) */
  .scrub__cue {
    left: 50%; right: auto; transform: translateX(-50%);
    bottom: max(18px, env(safe-area-inset-bottom)); gap: 8px;
  }
  .scrub__cue-line { height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
  html { scroll-behavior: auto; }
  /* reduced-motion : hero figé sur 1 écran (pas de long scroll sur une image fixe) */
  .scrub { height: 100vh !important; }
  .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; }
}

/* ============================================================
   MULTI-PAGES — nav active, heros de pages intérieures, cartes
   expertises, filtres galerie, lightbox, bandeau CTA, footer enrichi
   ============================================================ */

/* Nav : 6 entrées + CTA — resserrer, puis passer au burger plus tôt */
@media (max-width: 1280px) { .nav__links { gap: 24px; } }
@media (max-width: 1120px) { .nav__links { display: none; } .nav__toggle { display: flex; } }

/* État actif de la page courante */
.nav__links a.is-active { color: var(--fg); }
.nav__links a.is-active::after { width: 100%; }
.nav-overlay__link.is-active { color: var(--accent); }
.nav-overlay.is-open .nav-overlay__link:nth-child(6) { transition-delay: .38s; }

/* Hero de page intérieure (image full-bleed, pas de scrub)
   padding-top = dégagement sous la nav fixe (le titre ne colle plus au logo / à la barre) */
.bleed--page { min-height: 92vh; padding-top: clamp(104px, 13vh, 150px); }
.bleed--page .bleed__title { font-size: clamp(34px, 4.8vw, 66px); }
@media (max-width: 560px) { .bleed--page { padding-top: 96px; } }

/* Cartes expertises (accueil) — cliquables vers les pages dédiées */
.xp { background: var(--bg-2); padding: clamp(90px, 13vh, 180px) var(--pad); }
.xp__inner { max-width: var(--maxw); margin: 0 auto; }
.xp__head { max-width: 640px; margin-bottom: clamp(34px, 5vw, 60px); }
.xp__title { font-size: clamp(34px, 4.4vw, 64px); color: var(--fg); }
.xp__title em { color: var(--accent); }
.xp__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px); }
.xp-card {
  position: relative; display: block; overflow: hidden; border-radius: 4px; aspect-ratio: 4 / 5;
  background: var(--bg-3); box-shadow: 0 30px 70px -40px rgba(0,0,0,0.7);
}
.xp-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.xp-card:hover img, .xp-card:focus-visible img { transform: scale(1.05); }
.xp-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.xp-card__body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 44px 22px 20px;
  display: flex; flex-direction: column; gap: 4px;
  background: linear-gradient(to top, rgba(8,8,10,0.85), rgba(8,8,10,0));
}
.xp-card__k { font-family: var(--serif); font-size: clamp(19px, 1.9vw, 26px); color: var(--fg); }
.xp-card__v { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-soft); }
.xp-card__go {
  margin-top: 12px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent); transition: transform .4s var(--ease);
}
.xp-card:hover .xp-card__go { transform: translateX(6px); }
@media (max-width: 900px) { .xp__grid { grid-template-columns: 1fr; } .xp-card { aspect-ratio: 16 / 10; } }

/* Galerie : rangée d'action sous la grille (bouton « voir tout ») */
.gallery__actions { margin-top: clamp(30px, 4vw, 48px); display: flex; justify-content: center; }

/* Filtres réalisations */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(26px, 3vw, 40px); }
.filters__btn {
  font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-soft); background: none; border: 1px solid var(--line); border-radius: 999px;
  padding: 11px 20px; cursor: pointer;
  display: inline-flex; align-items: center; min-height: 44px;
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.filters__btn:hover { color: var(--fg); border-color: rgba(244,241,236,0.4); }
.filters__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.filters__btn.is-on { color: var(--fg); border-color: var(--accent); background: rgba(178,31,51,0.14); }
.gallery__fig.is-hidden { display: none; }
.gallery__cap { pointer-events: none; }

/* Zoom (déclencheur lightbox) */
.gallery__zoom { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.gallery__zoom:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Lightbox */
.lb {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(8,8,10,0.94); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 60px);
  opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s;
}
.lb.is-open { opacity: 1; visibility: visible; }
.lb__fig { margin: 0; max-width: min(1200px, 92vw); text-align: center; }
.lb__img { max-width: 100%; max-height: 78vh; width: auto; height: auto; margin: 0 auto; border-radius: 4px; box-shadow: 0 40px 120px rgba(0,0,0,0.6); }
.lb__cap { margin: 18px 0 0; font-size: 13px; letter-spacing: 0.06em; color: var(--fg-soft); }
.lb__btn {
  position: absolute; display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(19,18,17,0.7); color: var(--fg); font-size: 17px; cursor: pointer;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.lb__btn:hover { background: var(--accent); border-color: var(--accent); }
.lb__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lb__close { top: clamp(14px, 3vw, 28px); right: clamp(14px, 3vw, 28px); }
.lb__prev { left: clamp(10px, 2.5vw, 28px); top: 50%; transform: translateY(-50%); }
.lb__next { right: clamp(10px, 2.5vw, 28px); top: 50%; transform: translateY(-50%); }
body.lb-open { overflow: hidden; }

/* Bandeau CTA (fin de page) */
.cta { background: var(--ink); text-align: center; padding: clamp(100px, 15vh, 190px) var(--pad); }
.cta__inner { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.cta__title { font-size: clamp(36px, 5.2vw, 78px); color: var(--fg); }
.cta__title em { color: var(--accent); }
.cta__copy { color: var(--muted); font-size: 14px; letter-spacing: 0.04em; margin: 22px 0 34px; }
/* Variante compacte pour les pages intérieures (le gros bandeau ne vit que sur l'accueil) */
.cta--slim { padding: clamp(70px, 10vh, 120px) var(--pad); }
.cta--slim .cta__title { font-size: clamp(28px, 3.6vw, 52px); }
.cta--slim .cta__copy { margin: 16px 0 28px; }

/* Footer enrichi : mini-navigation + coordonnées */
.footer__nav { margin-top: 34px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 26px; }
.footer__nav a { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-soft); transition: color .3s var(--ease); }
.footer__nav a:hover { color: var(--accent); }
.footer__contact {
  margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px;
  font-size: 13px; color: var(--muted);
}
.footer__contact a { color: var(--fg-soft); transition: color .3s var(--ease); }
.footer__contact a:hover { color: var(--accent); }

/* Page contact (pas de hero) : dégager la nav fixe */
.contact--page { padding-top: clamp(150px, 20vh, 230px); }
.contact__visual { margin-top: clamp(32px, 4vw, 48px); }

/* ============================================================
   CONVERSION — téléphone dans le header (desktop) + barre fixe mobile
   ============================================================ */
/* Bloc menu poussé vers la droite → logo isolé à gauche (dégagé de l'onglet Accueil). */
.nav__links { margin-left: auto; margin-right: 0; }
.nav__phone {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: 0.02em;
  color: var(--fg); margin-left: 30px; margin-right: 26px;
  transition: color .3s var(--ease); text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.nav__phone svg { width: 15px; height: 15px; }
.nav__phone:hover { color: var(--accent); }

/* Barre d'action fixe : mobile / tablette uniquement (≤980px, là où le menu desktop disparaît) */
.callbar { display: none; }
@media (max-width: 980px) {
  .callbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 180;
    display: flex; gap: 1px; background: var(--line);
    box-shadow: 0 -6px 24px rgba(0,0,0,0.4);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .callbar__btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 9px;
    padding: 16px 10px; font-family: var(--sans); font-size: 13px; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
  }
  .callbar__btn svg { width: 17px; height: 17px; }
  .callbar__btn--call  { background: var(--ink); color: var(--fg); }
  .callbar__btn--quote { background: var(--accent); color: #fff; }
  .callbar__btn--call:active  { background: #000; }
  .callbar__btn--quote:active { filter: brightness(1.1); }
  /* laisser respirer le bas de page pour ne pas masquer le contenu sous la barre */
  body { padding-bottom: 56px; }
  .nav__phone { display: none; }
  .nav__links { margin-left: 0; margin-right: 0; }
}
/* la barre s'efface quand le menu plein écran est ouvert */
body.nav-open .callbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .lb { transition: none; }
  .xp-card img { transition: none; transform: none !important; }
  .xp-card__go { transition: none; transform: none !important; }
}

/* ============================================================
   WORDMARK — logo typographique (en attendant le logo vectoriel)
   ============================================================ */
.nav__brand { display: inline-flex; align-items: center; text-decoration: none; }
.wordmark {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.74rem;
  line-height: 1;
  color: var(--fg);
  white-space: nowrap;
}
.wordmark b { color: var(--accent); font-weight: 600; }
.wordmark--lg { font-size: 1.05rem; letter-spacing: 0.16em; }
.footer__logo .wordmark--lg { font-size: 1.1rem; }
.loader__logo { display: inline-flex; }
.loader__logo .wordmark--lg { font-size: 1.15rem; }
@media (max-width: 820px) {
  .wordmark { font-size: 0.66rem; letter-spacing: 0.16em; }
}