/*
Theme Name:  Chalets Blanc Child
Theme URI:   https://chaletsblanc.fr
Description: Thème enfant pour Chalets Blanc — parent Hello Elementor. Construit depuis la maquette Accueil.html avec champs ACF.
Author:      Escobar Medias
Template:    hello-elementor
Version:     1.0.0
Text Domain: chalets-blanc-child
*/

/* ============================================================
   Note : le style du thème parent est chargé via functions.php
   (wp_enqueue_style), pas via @import.
   ============================================================ */

/* ============================================================
   Variables & reset global
   ============================================================ */
:root {
  --noir:       #020203;
  --or:         #d0a742;
  --or-soft:    #b9912e;
  --blanc:      #ffffff;
  --creme:      #f5f1ea;
  --creme-2:    #ece6db;
  --gris:       #7a7770;
  --gris-clair: #cbc6bd;
  --max:        1440px;
  --pad:        clamp(20px, 4.5vw, 72px);
  --serif:      "Cormorant Garamond", "Times New Roman", serif;
  --sans:       "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--blanc);
  color: var(--noir);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ── Image de remplacement des placeholders .ph ─────────────── */
.cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   Placeholders de maquette (.ph) — visibles tant qu'aucune
   image n'est uploadée dans ACF
   ============================================================ */
.ph {
  position: relative;
  background:
    linear-gradient(135deg, #2a2722 0%, #3d362d 25%, #4a4239 50%, #352f28 75%, #1f1c18 100%);
  overflow: hidden;
  color: #cbc6bd;
}
.ph::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg,  rgba(255,255,255,.03) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.08)       0 1px, transparent 1px 22px);
  pointer-events: none;
}
.ph::after {
  content: attr(data-label);
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(208,167,66,.55);
  padding: 8px 14px;
  border: 1px solid rgba(208,167,66,.25);
  white-space: nowrap;
}
.ph-light { background: linear-gradient(135deg, #e6dfd2 0%, #d8cebd 50%, #c8baa3 100%); color: #7a7770; }
.ph-light::after { color: rgba(2,2,3,.45); border-color: rgba(2,2,3,.18); }

/* ============================================================
   Neutralisation des éléments GeneratePress sur la homepage
   (fallback CSS en plus des filtres PHP dans functions.php)
   ============================================================ */
.home .site-header,
.home .main-navigation,
.home .site-footer,
.home .page-header,
.home .breadcrumb-trail { display: none !important; }

.home #page,
.home .site-content,
.home .content-area { padding: 0 !important; max-width: none !important; }

.home .inside-article,
.home .entry-header,
.home .entry-content,
.home article.page { padding: 0 !important; max-width: none !important; margin: 0 !important; }

/* ============================================================
   HEADER
   ============================================================ */
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 48px var(--pad) 28px;
  display: flex; align-items: center; justify-content: space-between;
  transition: background .35s ease, padding .35s ease, border-color .35s ease;
  border-bottom: 1px solid transparent;
  color: var(--blanc);
}
/* Header sticky — glass design noir */
.hdr.scrolled {
  background: rgba(10,10,12,.55);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  padding: 40px var(--pad) 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),       /* ligne lumineuse interne */
    0 8px 32px rgba(0,0,0,.18);                /* ombre douce sous le header */
}
/* Fallback sans backdrop-filter (vieux navigateurs) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hdr.scrolled { background: rgba(2,2,3,.92); }
}
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand-logo {
  height: 44px;
  width: auto;
  display: block;
  transition: height .35s ease;
}
.hdr.scrolled .brand-logo { height: 34px; }

.nav { display: flex; align-items: center; gap: 6px; }
.nav-item { position: relative; }
.nav-link {
  padding: 10px 16px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 500; color: #fff;
  transition: color .2s ease;
}
.nav-link:hover { color: var(--or); }
.nav-link .caret {
  width: 8px; height: 8px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg); margin-top: -3px; opacity: .7;
}

/* Bouton chevron (séparé du nav-link) — caché en desktop, visible en mobile */
.nav-caret { display: none; }

.dropdown {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 260px;
  background: rgba(2,2,3,.97);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(208,167,66,.2);
  padding: 10px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
  transition-delay: .15s; /* léger délai avant fermeture pour atteindre le contenu */
}
/* Pont invisible — couvre l'espace entre le lien et le dropdown,
   permet au curseur de transiter sans perdre le hover */
.dropdown::before {
  content: "";
  position: absolute;
  top: -14px; left: 0; right: 0; height: 14px;
}
.nav-item:hover > .dropdown,
.nav-item:focus-within > .dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s; /* apparition immédiate */
}
.dropdown a {
  display: block; padding: 11px 14px;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: #cbc6bd;
  border-left: 1px solid transparent;
  transition: all .2s ease;
}
.dropdown a:hover { color: var(--or); border-left-color: var(--or); background: rgba(208,167,66,.05); }
.dropdown .sublabel {
  font-size: 9px; letter-spacing: .32em; color: var(--or);
  padding: 14px 14px 6px; text-transform: uppercase;
  border-bottom: 1px solid rgba(208,167,66,.12); margin-bottom: 6px;
}

.hdr-cta {
  margin-left: 14px; padding: 11px 22px;
  border: 1px solid rgba(208,167,66,.55);
  color: var(--or);
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase; font-weight: 500;
  transition: all .25s ease;
}
.hdr-cta:hover { background: var(--or); color: var(--noir); border-color: var(--or); }

.burger {
  display: none;
  -webkit-tap-highlight-color: transparent;
}
.burger:focus,
.burger:focus-visible,
.burger:active {
  outline: none;
  box-shadow: none;
  background: transparent;
  color: #fff;
}

/* ============================================================
   01 HERO
   ============================================================ */
.hero {
  position: relative;
  height: 100vh; min-height: 720px;
  color: var(--blanc);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center;
  overflow: hidden;
}
.hero .ph,
.hero .hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: rgba(2,2,3,.42);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(2,2,3,.55) 0%, rgba(2,2,3,.25) 35%,
    rgba(2,2,3,.3) 60%, rgba(2,2,3,.75) 100%);
}
.hero-inner { position: relative; z-index: 2; padding: 0 var(--pad); max-width: 1100px; }
.hero-eyebrow {
  font-size: 10px; letter-spacing: .5em; text-transform: uppercase;
  color: var(--or); font-weight: 500; margin-bottom: 32px;
}
.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(46px, 7vw, 108px);
  line-height: 1.02; letter-spacing: -.005em;
}
.hero h1 em { font-style: italic; color: var(--or); font-weight: 300; }
.hero-rule { width: 80px; height: 1px; background: var(--or); margin: 42px auto 36px; }
.hero-links {
  display: flex; justify-content: center; gap: 64px; flex-wrap: wrap;
}
.hero-links a {
  font-size: 12px; letter-spacing: .34em; text-transform: uppercase;
  padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.4);
  transition: all .25s ease;
}
.hero-links a:hover { color: var(--or); border-color: var(--or); }
.hero-scroll {
  position: absolute; bottom: 38px; left: 50%; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  font-size: 10px; letter-spacing: .4em; text-transform: uppercase; color: #fff;
  text-decoration: none;
  transition: color .25s ease, gap .25s ease;
}
.hero-scroll:hover { color: var(--or); gap: 22px; }

/* Indicateur scroll
   ─ Desktop : barre verticale épaisse, sans chevron
   ─ Mobile  : chevron animé, sans barre */
.hero-scroll .line {
  width: 32px;
  height: 80px;
  background: transparent;
  position: relative;
  overflow: visible;
}
/* Ligne verticale épaisse et longue (desktop) */
.hero-scroll .line::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 2px; height: 80px;
  background: linear-gradient(to bottom, rgba(255,255,255,.55) 0%, var(--or) 100%);
  transform: translateX(-50%);
  animation: scrollLineGlow 2.4s ease-in-out infinite;
  border-radius: 2px;
}
/* Chevron (masqué par défaut, n'apparaît qu'en mobile) */
.hero-scroll .line::after {
  content: "";
  position: absolute;
  bottom: 0; left: 50%;
  width: 16px; height: 16px;
  border-right: 2px solid var(--or);
  border-bottom: 2px solid var(--or);
  transform: translateX(-50%) rotate(45deg);
  animation: scrollChevron 2.4s ease-in-out infinite;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.35));
  display: none;
}

@keyframes scrollLineGlow {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}
@keyframes scrollChevron {
  0%, 100% { transform: translateX(-50%) translateY(0)   rotate(45deg); opacity: .65; }
  50%      { transform: translateX(-50%) translateY(8px) rotate(45deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll .line::before,
  .hero-scroll .line::after { animation: none; }
}

/* ============================================================
   02 MANIFESTE
   ============================================================ */
.manifesto {
  background: var(--noir); color: var(--blanc);
  padding: clamp(100px, 14vw, 180px) var(--pad);
  text-align: center;
}
.manifesto-eyebrow {
  font-size: 10px; letter-spacing: .5em; text-transform: uppercase;
  color: var(--or); font-weight: 500; margin-bottom: 48px;
}
.manifesto-quote {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(28px, 4.2vw, 58px);
  line-height: 1.18; max-width: 1100px; margin: 0 auto;
  letter-spacing: -.005em;
}
.manifesto-quote em { font-style: italic; color: var(--or); }
.manifesto-rule { width: 60px; height: 1px; background: var(--or); margin: 56px auto; }
.manifesto-body {
  max-width: 760px; margin: 0 auto;
  font-size: 15px; line-height: 1.85; color: #cbc6bd;
  display: flex; flex-direction: column; gap: 22px;
}
.manifesto-body strong { color: var(--blanc); font-weight: 500; }

/* ============================================================
   03 CAROUSEL
   ============================================================ */
.carousel {
  position: relative; height: 100vh; min-height: 640px;
  overflow: hidden; background: var(--noir);
}
.car-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
.car-slide.active { opacity: 1; }
.car-slide .ph { position: absolute; inset: 0; }
.car-cap {
  position: absolute; left: var(--pad); bottom: 64px; z-index: 2;
  color: #fff; max-width: 520px;
}
.car-cap .num {
  font-family: var(--serif); font-size: 14px; letter-spacing: .4em;
  color: var(--or); margin-bottom: 14px; display: block;
}
.car-cap h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1;
}
.car-cap p { margin-top: 12px; font-size: 13px; letter-spacing: .06em; color: #cbc6bd; }
.car-dots {
  position: absolute; right: var(--pad); bottom: 64px; z-index: 3;
  display: flex; flex-direction: column; gap: 18px;
}
.car-dot {
  width: 38px; height: 1px; background: rgba(255,255,255,.35);
  border: none; padding: 0;
  transition: background .25s ease, width .25s ease; cursor: pointer;
}
.car-dot.active { background: var(--or); width: 60px; }
.car-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.55));
  pointer-events: none;
}

/* ── Flèches de navigation ─────────────────────────────────── */
.car-prev,
.car-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3; width: 52px; height: 52px;
  display: grid; place-items: center;
  color: rgba(255,255,255,.65);
  border: 1px solid rgba(255,255,255,.22);
  transition: color .22s ease, border-color .22s ease, background .22s ease;
  -webkit-tap-highlight-color: transparent;
}
.car-prev { left: var(--pad); }
.car-next { right: var(--pad); }
.car-prev:hover, .car-next:hover {
  color: var(--or); border-color: var(--or);
  background: rgba(2,2,3,.4);
}
.car-prev svg, .car-next svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.5; }

/* ── Bouton Back to top ────────────────────────────────────── */
.btt {
  position: fixed; bottom: 36px; right: var(--pad);
  z-index: 200; width: 46px; height: 46px;
  display: grid; place-items: center;
  background: rgba(2,2,3,.82);
  border: 1px solid rgba(208,167,66,.38);
  color: var(--or);
  opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: opacity .28s ease, visibility .28s ease, transform .28s ease, border-color .22s ease;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btt.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.btt:hover { border-color: var(--or); background: rgba(2,2,3,.96); }
.btt svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; }

/* ============================================================
   04 SAVOIR-FAIRE
   ============================================================ */
.savoir {
  background: var(--blanc);
  padding: clamp(100px, 14vw, 180px) var(--pad);
}
.savoir-head { text-align: center; max-width: 760px; margin: 0 auto 80px; }
.eyebrow {
  font-size: 10px; letter-spacing: .5em; text-transform: uppercase;
  color: var(--or-soft); font-weight: 600; margin-bottom: 24px; display: block;
}
h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(38px, 5.5vw, 72px);
  line-height: 1.05; letter-spacing: -.01em;
}
h2 em { font-style: italic; color: var(--or-soft); }
.savoir-intro {
  margin-top: 28px; color: var(--gris); font-size: 16px; line-height: 1.75;
  max-width: 580px; margin-inline: auto;
}
.savoir-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px;
  max-width: var(--max); margin: 0 auto;
}
.savoir-card { display: flex; flex-direction: column; gap: 24px; }
.savoir-card .img { aspect-ratio: 4/5; position: relative; overflow: hidden; }
.savoir-card .img .ph { position: absolute; inset: 0; }
.savoir-card .num {
  font-family: var(--serif); font-size: 14px; color: var(--or-soft); letter-spacing: .2em;
}
.savoir-card h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: 32px; letter-spacing: -.005em; line-height: 1.15;
}
.savoir-card p { color: var(--gris); font-size: 14.5px; line-height: 1.75; text-wrap: pretty; }
.savoir-card .more {
  margin-top: 8px; display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--noir); border-bottom: 1px solid var(--noir);
  align-self: flex-start; padding-bottom: 4px;
  transition: all .25s ease;
}
.savoir-card .more:hover { color: var(--or-soft); border-color: var(--or-soft); gap: 14px; }

/* ============================================================
   05 ENGAGEMENTS
   ============================================================ */
.engagements {
  background: var(--creme);
  padding: clamp(80px, 12vw, 160px) 0;
}
.eng-inner {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--pad);
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(48px, 8vw, 120px); align-items: center;
}
.eng-text h2 { margin-bottom: 24px; }
.eng-text p { color: #4a4842; font-size: 16px; line-height: 1.85; margin-bottom: 20px; max-width: 520px; }
.eng-list {
  margin: 40px 0; display: flex; flex-direction: column; gap: 0;
  border-top: 1px solid rgba(2,2,3,.12);
}
.eng-list li {
  list-style: none;
  padding: 22px 0; border-bottom: 1px solid rgba(2,2,3,.12);
  display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center;
}
.eng-list .n { font-family: var(--serif); font-size: 13px; letter-spacing: .3em; color: var(--or-soft); }
.eng-list .t { font-family: var(--serif); font-size: 22px; font-weight: 400; color: var(--noir); }
.eng-list .arr { width: 24px; height: 1px; background: var(--noir); position: relative; }
.eng-list .arr::after {
  content: ""; position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid var(--noir); border-right: 1px solid var(--noir);
  transform: rotate(45deg);
}
.eng-cta {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 18px 36px; background: var(--noir); color: var(--blanc);
  font-size: 11px; letter-spacing: .32em; text-transform: uppercase;
  transition: all .25s ease;
}
.eng-cta:hover { background: var(--or-soft); color: var(--noir); }
.eng-images {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 240px 240px;
  gap: 16px; height: 560px;
}
.eng-images .img { position: relative; overflow: hidden; }
.eng-images .img:first-child { grid-row: span 2; height: 100%; }
.eng-images .img .ph { position: absolute; inset: 0; }

/* ============================================================
   06 AVIS
   ============================================================ */
.avis {
  background: var(--noir); color: var(--blanc);
  padding: clamp(100px, 14vw, 180px) var(--pad);
}
.avis-head {
  display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end;
  max-width: var(--max); margin: 0 auto 64px;
}
.avis-head h2 { color: var(--blanc); }
.avis-head h2 em { color: var(--or); }
.avis-rating { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.avis-rating .stars { display: flex; gap: 4px; color: var(--or); }
.avis-rating .stars svg { width: 18px; height: 18px; fill: var(--or); }
.avis-rating .meta { font-size: 11px; letter-spacing: .18em; color: #cbc6bd; text-transform: uppercase; }
.avis-rating .meta b { color: var(--blanc); font-weight: 600; margin-right: 4px; }

.avis-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px;
  max-width: var(--max); margin: 0 auto;
}
.avis-card {
  border: 1px solid rgba(208,167,66,.18);
  padding: 40px 36px;
  display: flex; flex-direction: column; gap: 18px;
  background: rgba(255,255,255,.015);
}
.avis-card .stars { display: flex; gap: 3px; }
.avis-card .stars svg { width: 14px; height: 14px; fill: var(--or); }
.avis-card blockquote {
  font-family: var(--serif); font-size: 22px; line-height: 1.45;
  color: var(--blanc); font-weight: 300; letter-spacing: -.005em;
}
.avis-card blockquote::before { content: "« "; color: var(--or); }
.avis-card blockquote::after  { content: " »"; color: var(--or); }
.avis-author {
  display: flex; align-items: center; gap: 14px; margin-top: 6px;
  padding-top: 18px; border-top: 1px solid rgba(208,167,66,.18);
}
.avis-author .ini {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(208,167,66,.12); border: 1px solid rgba(208,167,66,.4);
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 16px; color: var(--or);
  flex-shrink: 0;
}
.avis-author .name { font-size: 13.5px; font-weight: 500; letter-spacing: .04em; }
.avis-author .when { font-size: 11px; letter-spacing: .16em; color: var(--gris); text-transform: uppercase; margin-top: 2px; }
.avis-google {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: .18em; color: var(--gris); text-transform: uppercase;
  margin-left: auto; align-self: flex-start;
}
.avis-google svg { width: 14px; height: 14px; }
.avis-foot { text-align: center; margin-top: 56px; }
.avis-foot a {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--or); padding-bottom: 6px; border-bottom: 1px solid var(--or);
}

/* ============================================================
   07 HISTOIRE
   ============================================================ */
.histoire {
  background: var(--blanc);
  padding: clamp(100px, 14vw, 180px) var(--pad);
  overflow: hidden;
}
.hist-inner {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: .95fr 1.05fr;
  gap: clamp(48px, 8vw, 120px); align-items: center;
}
.hist-text .eyebrow { margin-bottom: 24px; }
.hist-text h2 { margin-bottom: 36px; }
.hist-text h2 em { color: var(--or-soft); }
.hist-text p { color: var(--gris); font-size: 16px; line-height: 1.85; margin-bottom: 20px; }
.hist-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px;
  padding-top: 36px; border-top: 1px solid rgba(2,2,3,.12);
}
.hist-stats .stat .n { font-family: var(--serif); font-size: 54px; line-height: 1; color: var(--or-soft); font-weight: 400; }
.hist-stats .stat .l { margin-top: 10px; font-size: 11px; letter-spacing: .22em; color: var(--noir); text-transform: uppercase; }
.hist-stats .stat .s { font-family: var(--serif); font-style: italic; font-size: 32px; color: var(--gris); }
.hist-cta {
  margin-top: 48px; display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; letter-spacing: .32em; text-transform: uppercase;
  border-bottom: 1px solid var(--noir); padding-bottom: 6px;
  transition: all .25s ease;
}
.hist-cta:hover { color: var(--or-soft); border-color: var(--or-soft); gap: 18px; }

.hist-img { position: relative; height: 680px; }
.hist-img .main { position: absolute; inset: 0; overflow: hidden; }
.hist-img .main .ph { position: absolute; inset: 0; }
.hist-img .acc {
  position: absolute; width: 42%; height: 32%; right: -30px; bottom: -30px;
  overflow: hidden; border: 6px solid var(--blanc);
}
.hist-img .acc .ph { position: absolute; inset: 0; }
.hist-img .stamp {
  position: absolute; left: -30px; top: -30px;
  width: 140px; height: 140px;
  background: var(--or); color: var(--noir);
  border-radius: 50%; display: grid; place-items: center; text-align: center;
  font-family: var(--serif); font-style: italic; font-size: 14px; line-height: 1.2; padding: 14px;
}
.hist-img .stamp b { display: block; font-size: 32px; font-style: normal; font-weight: 500; margin: 2px 0; }

/* ============================================================
   08 VISITES PRIVÉES
   ============================================================ */
.vip {
  position: relative; background: var(--noir); color: var(--blanc);
  padding: 0; display: grid; grid-template-columns: 1.1fr 1fr;
  min-height: 640px;
}
.vip-img { position: relative; overflow: hidden; }
.vip-img .ph { position: absolute; inset: 0; }
.vip-img .frame { position: absolute; inset: 32px; border: 1px solid rgba(208,167,66,.45); pointer-events: none; }
.vip-img .tag {
  position: absolute; left: 48px; top: 48px;
  font-size: 10px; letter-spacing: .4em; color: var(--or); text-transform: uppercase;
  background: var(--noir); padding: 6px 10px;
}
.vip-text {
  padding: clamp(56px, 8vw, 96px) var(--pad);
  display: flex; flex-direction: column; justify-content: center; max-width: 680px;
}
.vip-text .eyebrow { color: var(--or); }
.vip-text h2 { color: var(--blanc); margin-bottom: 28px; }
.vip-text h2 em { color: var(--or); }
.vip-text p { color: #cbc6bd; font-size: 16px; line-height: 1.85; margin-bottom: 18px; max-width: 520px; }
.vip-bullets { margin: 28px 0 40px; display: flex; flex-direction: column; gap: 14px; list-style: none; }
.vip-bullets li {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: baseline;
  font-size: 14.5px; color: #e6e2d8;
}
.vip-bullets li::before {
  content: ""; width: 6px; height: 6px; background: var(--or);
  border-radius: 50%; display: block; transform: translateY(-2px);
}
.vip-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
.btn-primary, .btn-ghost {
  padding: 18px 32px;
  font-size: 11px; letter-spacing: .32em; text-transform: uppercase; font-weight: 500;
  display: inline-flex; align-items: center; gap: 12px;
  transition: all .25s ease;
}
.btn-primary { background: var(--or); color: var(--noir); }
.btn-primary:hover { background: var(--blanc); }
.btn-ghost { border: 1px solid rgba(255,255,255,.4); color: var(--blanc); }
.btn-ghost:hover { border-color: var(--or); color: var(--or); }

/* ============================================================
   09 FOOTER
   ============================================================ */
.ftr {
  background: #000; color: #cbc6bd;
  padding: clamp(64px, 8vw, 96px) var(--pad) 0;
  border-top: 1px solid rgba(208,167,66,.18);
}
.ftr-top {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 1.4fr 2.2fr;
  gap: clamp(40px, 6vw, 96px);
  padding-bottom: 64px; border-bottom: 1px solid rgba(208,167,66,.15);
}
.ftr-brand .brand-text { color: #fff; }
.ftr-tag {
  margin-top: 28px; font-family: var(--serif);
  font-size: 22px; line-height: 1.4; color: #e6e2d8; font-weight: 300; max-width: 380px;
}
.ftr-tag em { color: var(--or); font-style: italic; }
.ftr-contact { margin-top: 28px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: #cbc6bd; }
.ftr-contact a:hover { color: var(--or); }

.ftr-nav { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; }
.ftr-col h4 {
  font-family: var(--sans); font-size: 10px; letter-spacing: .32em;
  color: var(--or); text-transform: uppercase; margin-bottom: 18px; font-weight: 600;
}
/* Titre de colonne footer cliquable : surligné en doré, devient blanc au hover */
.ftr-col h4 .ftr-col-link {
  color: inherit;
  font-size: inherit;
  display: inline-block;
  text-decoration: underline;
  text-decoration-color: rgba(208,167,66,.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: color .25s ease, text-decoration-color .25s ease;
}
.ftr-col h4 .ftr-col-link:hover {
  color: var(--blanc);
  text-decoration-color: var(--blanc);
}
.ftr-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.ftr-col a { font-size: 13.5px; color: #cbc6bd; transition: color .2s ease; }
.ftr-col a:hover { color: var(--or); }

.ftr-quote {
  max-width: var(--max); margin: 0 auto;
  padding: 56px 0; border-bottom: 1px solid rgba(208,167,66,.15);
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center;
}
.ftr-quote .devis-cta {
  padding: 24px 36px; border: 1px solid var(--or); color: var(--or);
  display: inline-flex; align-items: center; gap: 18px;
  font-size: 12px; letter-spacing: .32em; text-transform: uppercase; font-weight: 500;
  transition: all .25s ease; align-self: flex-start;
}
.ftr-quote .devis-cta:hover { background: var(--or); color: var(--noir); }
.ftr-quote .devis-cta .arr { width: 24px; height: 1px; background: currentColor; position: relative; }
.ftr-quote .devis-cta .arr::after {
  content: ""; position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.ftr-quote p { font-family: var(--serif); font-size: 24px; line-height: 1.4; color: #fff; font-weight: 300; }
.ftr-quote p em { color: var(--or); font-style: italic; }

.ftr-cert {
  max-width: var(--max); margin: 0 auto;
  padding: 48px 0; display: flex; align-items: center; gap: 48px; flex-wrap: wrap;
  border-bottom: 1px solid rgba(208,167,66,.15);
}
.ftr-cert h4 { font-size: 10px; letter-spacing: .32em; color: var(--or); text-transform: uppercase; margin-right: 8px; }
.cert-row { display: flex; gap: 18px; flex-wrap: wrap; flex: 1; }
.cert-slot {
  width: 130px; height: 64px;
  border: 1px dashed rgba(208,167,66,.3);
  display: grid; place-items: center;
  font-family: ui-monospace, monospace; font-size: 10px;
  letter-spacing: .16em; color: rgba(208,167,66,.55); text-align: center;
}
.ftr-social { display: flex; gap: 14px; margin-left: auto; }
.ftr-social a {
  width: 44px; height: 44px;
  border: 1px solid rgba(208,167,66,.3);
  display: grid; place-items: center;
  transition: all .25s ease;
}
.ftr-social a:hover { border-color: var(--or); background: rgba(208,167,66,.06); }
.ftr-social svg { width: 16px; height: 16px; }
/* Les icônes monochromes (Instagram, Facebook…) prennent la couleur dorée.
   Les icônes multi-couleurs (Google) conservent leurs couleurs natives via
   l'attribut fill="..." sur chaque <path>. */
.ftr-social svg path:not([fill]) { fill: var(--or); }

.ftr-bot {
  max-width: var(--max); margin: 0 auto;
  padding: 32px 0 40px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 18px;
  font-size: 11.5px; color: #7a7770; letter-spacing: .06em;
}
.ftr-bot nav { display: flex; gap: 28px; flex-wrap: wrap; }
.ftr-bot a:hover { color: var(--or); }

/* ============================================================
   RESPONSIVE — breakpoint existant : 1100px
   ============================================================ */
@media (max-width: 1100px) {
  /* Marges du header : on annule les valeurs desktop renforcées
     et on remet le padding symétrique d'origine pour mobile/tablette */
  .hdr          { padding: 22px var(--pad); }
  .hdr.scrolled { padding: 14px var(--pad); }

  /* Nav — menu plein écran (z-index supérieur au .hdr pour qu'il ne soit
     plus tronqué par la barre du header en position fixed) */
  .nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    position: fixed;
    inset: 0;
    background: rgba(2,2,3,.98);
    backdrop-filter: blur(16px);
    padding: 96px var(--pad) 64px;
    z-index: 200; /* au-dessus du .hdr (z-index: 100) */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    pointer-events: none;
  }
  .hdr.menu-open .nav { opacity: 1; visibility: visible; pointer-events: auto; }
  /* Quand le menu est ouvert, la barre du header doit être transparente
     pour ne pas masquer la croix de fermeture */
  .hdr.menu-open { background: transparent !important; border-bottom-color: transparent !important; backdrop-filter: none; }

  /* Mobile : nav-item = ligne flex (lien + caret-btn), dropdown en dessous */
  .nav .nav-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  /* Le caret intégré au lien est masqué (remplacé par le bouton séparé) */
  .nav .nav-link .caret { display: none; }

  /* Bouton chevron — touch target dédié pour ouvrir le dropdown */
  .nav .nav-caret {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
  }
  .nav .nav-caret:focus,
  .nav .nav-caret:focus-visible,
  .nav .nav-caret:active { outline: none; background: transparent; color: #fff; }
  .nav .nav-caret svg {
    width: 14px; height: 10px;
    stroke: currentColor; fill: none; stroke-width: 1.5;
    stroke-linecap: round; stroke-linejoin: round;
    transition: transform .25s ease;
    opacity: .7;
  }
  .nav-item.open > .nav-caret svg {
    transform: rotate(180deg);
    opacity: 1;
    color: var(--or);
  }

  /* Le dropdown prend toute la largeur en dessous du lien + caret */
  .nav .dropdown { flex-basis: 100%; order: 99; }
  /* Désactive le hover-dropdown sur mobile */
  .nav-item:hover > .dropdown { opacity: 0; visibility: hidden; transform: none; pointer-events: none; }
  .nav .nav-item { width: 100%; max-width: 560px; border-bottom: 1px solid rgba(208,167,66,.12); }
  .nav .nav-link {
    flex: 1; min-width: 0;
    padding: 22px 0;
    font-size: 15px; letter-spacing: .18em;
    display: flex; align-items: center;
  }
  /* (legacy) — caret-inside-link gardé pour les items sans bouton chevron */
  .nav .nav-link .caret { flex-shrink: 0; transition: transform .25s ease; }
  .nav-item.open > .nav-link .caret { transform: rotate(180deg); }
  .nav .dropdown {
    position: static; transform: none;
    opacity: 0; visibility: hidden; pointer-events: none;
    max-height: 0; overflow: hidden;
    background: transparent; border: none; padding: 0;
    transition: max-height .32s ease, opacity .25s ease;
  }
  .nav-item.open > .dropdown {
    opacity: 1; visibility: visible; pointer-events: auto;
    max-height: 420px;
    padding: 0 0 20px 0;
  }
  .nav .dropdown .sublabel {
    font-size: 9px; letter-spacing: .32em; color: var(--or);
    padding: 6px 0 10px; text-transform: uppercase;
    border-bottom: 1px solid rgba(208,167,66,.18); margin-bottom: 8px;
  }
  .nav .dropdown a {
    color: rgba(203,198,189,.8); padding: 11px 0;
    font-size: 13px; letter-spacing: .16em;
    display: block; border-left: none;
  }
  .nav .dropdown a:hover { color: var(--or); background: none; border: none; padding-left: 0; }
  /* Bouton fermer à l'intérieur du menu plein écran */
  .nav-close {
    position: absolute; top: 24px; right: var(--pad);
    width: 48px; height: 48px;
    display: grid; place-items: center;
    color: #fff; cursor: pointer; border: none; background: none;
  }
  .nav-close span {
    position: absolute; width: 22px; height: 1px; background: currentColor;
  }
  .nav-close span:nth-child(1) { transform: rotate(45deg); }
  .nav-close span:nth-child(2) { transform: rotate(-45deg); }
  /* Burger — z-index explicite pour rester visible au-dessus du panneau */
  .burger {
    display: flex; flex-direction: column; gap: 5px; padding: 10px; color: #fff;
    position: relative; z-index: 100;
  }
  .burger span { width: 26px; height: 1px; background: currentColor; transition: transform .25s ease, opacity .25s ease; }
  .hdr.menu-open .burger { visibility: hidden; }
  .hdr-cta { display: none; }
  .eng-inner, .hist-inner, .ftr-top, .ftr-quote, .vip { grid-template-columns: 1fr; }
  .vip { display: block; }
  .vip-img { height: 420px; position: relative; }
  .savoir-grid { grid-template-columns: 1fr; gap: 48px; }
  .avis-grid { grid-template-columns: 1fr; }
  .ftr-nav { grid-template-columns: repeat(2, 1fr); gap: 36px; }
  .hist-img { height: 440px; }
  .hist-stats { gap: 18px; }
  .hist-stats .stat .n { font-size: 38px; }
  .eng-images { height: 420px; }
}

/* ============================================================
   RESPONSIVE — 768px (tablette / petit laptop)
   ============================================================ */
@media (max-width: 768px) {
  /* Hero */
  .hero { min-height: 600px; }
  .hero h1 { font-size: clamp(36px, 8vw, 64px); }
  .hero-eyebrow { letter-spacing: .3em; font-size: 9px; }
  .hero-links { gap: 32px; }

  /* Manifeste */
  .manifesto-quote { font-size: clamp(24px, 5vw, 44px); }

  /* Carousel */
  .car-cap h3 { font-size: clamp(22px, 4vw, 36px); }
  .car-cap { max-width: 80%; }

  /* Savoir-faire */
  .savoir-head { margin-bottom: 56px; }
  .savoir-card h3 { font-size: 28px; }

  /* Engagements */
  .eng-list li { gap: 12px; }
  .eng-list .t { font-size: 18px; }
  .eng-images { height: 360px; grid-template-rows: 172px 172px; }

  /* Avis */
  .avis-card { padding: 28px 24px; }
  .avis-card blockquote { font-size: 18px; }
  .avis-head { gap: 24px; }
  .avis-head .avis-rating { align-items: flex-start; }

  /* Histoire */
  .hist-stats { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .hist-stats .stat .n { font-size: 32px; }
  .hist-stats .stat .s { font-size: 24px; }
  .hist-img { height: 360px; }
  .hist-img .stamp { width: 110px; height: 110px; font-size: 12px; left: -16px; top: -16px; }
  .hist-img .stamp b { font-size: 26px; }

  /* VIP */
  .vip-text { padding: 48px var(--pad); }

  /* Footer */
  .ftr-nav { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .ftr-quote { padding: 40px 0; gap: 32px; }
  .ftr-cert { padding: 32px 0; gap: 24px; }
}

/* ============================================================
   RESPONSIVE — 640px — breakpoint existant
   ============================================================ */
@media (max-width: 640px) {
  .hero-links { gap: 28px; }
  .car-cap { left: 24px; right: 24px; bottom: 96px; max-width: none; }
  .car-dots { right: 24px; bottom: 32px; flex-direction: row; }
  .car-dot { width: 22px; }
  .car-dot.active { width: 36px; }
  .avis-head { grid-template-columns: 1fr; align-items: flex-start; }
  .ftr-bot { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   RESPONSIVE — 480px (petit mobile)
   ============================================================ */
@media (max-width: 480px) {
  :root { --pad: 16px; }

  /* Hero */
  .hero h1 { font-size: clamp(30px, 9vw, 48px); }
  .hero-links { flex-direction: column; align-items: center; gap: 16px; }
  .hero-rule { margin: 28px auto 24px; }
  /* Mobile : on inverse l'affichage — barre cachée, chevron visible, remonté */
  .hero-scroll { bottom: 56px; gap: 14px; }
  .hero-scroll .line {
    width: 22px;
    height: 22px;
  }
  .hero-scroll .line::before { display: none; }
  .hero-scroll .line::after {
    display: block;
    width: 20px;
    height: 20px;
    border-right-width: 2px;
    border-bottom-width: 2px;
  }
  .hero::before,
  .phero::before,
  .c-hero::before,
  .page-caz .caz-hero::before,
  .page-charpente .ch-hero::before { background: rgba(2,2,3,.58); }

  /* Manifeste */
  .manifesto { padding: 64px var(--pad); }
  .manifesto-quote { font-size: clamp(20px, 6.5vw, 32px); }
  .manifesto-rule { margin: 36px auto; }

  /* Carousel */
  .carousel { min-height: 520px; }
  .car-cap h3 { font-size: clamp(18px, 5vw, 26px); }
  .car-cap p { font-size: 12px; }

  /* Savoir-faire */
  .savoir-card h3 { font-size: 24px; }
  .savoir-head { margin-bottom: 40px; }

  /* Engagements */
  .eng-list .t { font-size: 16px; }
  .eng-list li { gap: 10px; padding: 16px 0; }
  .eng-cta { padding: 14px 24px; font-size: 10px; letter-spacing: .22em; }
  .eng-images { grid-template-columns: 1fr; height: auto; }
  .eng-images .img { height: 200px; }
  .eng-images .img:first-child { grid-row: auto; height: 240px; }

  /* Avis */
  .avis-card { padding: 24px 18px; }
  .avis-card blockquote { font-size: 16px; }

  /* Histoire */
  .hist-stats { grid-template-columns: 1fr; gap: 20px; }
  .hist-stats .stat { display: flex; align-items: baseline; gap: 12px; }
  .hist-stats .stat .l { font-size: 10px; }
  .hist-stats .stat .n { font-size: 36px; }
  .hist-img .acc { right: -8px; bottom: -8px; border-width: 4px; }
  .hist-img .stamp { width: 90px; height: 90px; font-size: 10px; left: -8px; top: -8px; }
  .hist-img .stamp b { font-size: 20px; }

  /* VIP */
  .vip-img { height: 300px; }
  .vip-img .tag { left: 24px; top: 24px; }
  .vip-img .frame { inset: 16px; }
  .vip-ctas { flex-direction: column; }
  .btn-primary, .btn-ghost { justify-content: center; width: 100%; }

  /* Footer */
  .ftr-nav { grid-template-columns: 1fr; gap: 24px; }
  .ftr-quote p { font-size: 20px; }
  .ftr-quote .devis-cta { padding: 18px 24px; font-size: 10px; }
  .ftr-cert { flex-direction: column; align-items: flex-start; }
  .ftr-social { margin-left: 0; margin-top: 12px; }
  .cert-slot { width: 100px; height: 54px; }
}


/* ============================================================
   PAGE — NOS SAVOIR-FAIRE
   ============================================================ */

/* ── Page Hero ──────────────────────────────────────────────── */
.phero {
  position: relative; color: var(--blanc);
  min-height: 84vh; display: flex; align-items: flex-end;
  overflow: hidden; padding-bottom: clamp(56px,7vw,96px);
}
.phero .cover-img,
.phero .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* Couche 1 : filtre noir uniforme */
.phero::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: rgba(2,2,3,.42);
  pointer-events: none;
}
/* Couche 2 : dégradé vertical pour la lisibilité */
.phero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(2,2,3,.55) 0%, rgba(2,2,3,.25) 35%,
    rgba(2,2,3,.3) 60%, rgba(2,2,3,.75) 100%);
  pointer-events: none;
}
.phero-inner {
  position: relative; z-index: 2; width: 100%;
  max-width: var(--max); margin: 0 auto; padding: 0 var(--pad);
  display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: end;
}
.crumb {
  font-size: 11px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--or); margin-bottom: 24px; display: flex; gap: 14px; align-items: center;
}
.crumb a { color: rgba(255,255,255,.7); transition: color .2s ease; }
.crumb a:hover { color: var(--or); }
.crumb .sep { color: rgba(255,255,255,.4); }
.phero h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(54px,8vw,120px); line-height: .96; letter-spacing: -.015em;
}
.phero h1 em { font-style: italic; color: var(--or); font-weight: 300; display: inline-block; }
.phero-meta {
  display: flex; flex-direction: column; gap: 14px;
  border-left: 1px solid rgba(208,167,66,.4);
  padding: 12px 0 12px 28px; font-size: 13.5px; color: #cbc6bd;
  max-width: 380px;
}
.phero-meta strong { color: #fff; font-weight: 500; letter-spacing: .04em; }

/* ── Intro équipe ───────────────────────────────────────────── */
.sf-intro {
  background: var(--blanc);
  /* padding équilibré haut/bas pour ne pas tasser le contenu en pied de section */
  padding: clamp(96px,12vw,160px) var(--pad) clamp(80px,10vw,130px);
}
.intro-grid {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(48px,8vw,120px); align-items: center;
}
.intro-text .eyebrow { margin-bottom: 26px; }
.intro-text h2 { margin-bottom: 32px; }
.intro-text p { color: #4a4842; font-size: 16.5px; line-height: 1.85; margin-bottom: 20px; max-width: 540px; text-wrap: pretty; }
.intro-text p strong { color: var(--noir); font-weight: 500; }
.intro-sign {
  margin-top: 36px; display: flex; align-items: center; gap: 22px;
  padding-top: 28px; border-top: 1px solid rgba(2,2,3,.12); max-width: 540px;
}
.intro-sign .ini {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--noir); color: var(--or);
  display: grid; place-items: center; font-family: var(--serif); font-size: 20px; flex-shrink: 0;
}
.intro-sign .who { font-size: 14px; color: var(--noir); font-weight: 500; letter-spacing: .04em; }
.intro-sign .role { font-size: 11.5px; color: var(--gris); letter-spacing: .16em; text-transform: uppercase; margin-top: 3px; }
.intro-img { position: relative; height: 680px; }
.intro-img .main { position: absolute; inset: 0; overflow: hidden; }
.intro-img .main .cover-img,
.intro-img .main .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.intro-img .badge {
  position: absolute; left: -32px; bottom: -32px;
  width: 170px; height: 170px; border-radius: 50%;
  background: var(--noir); color: var(--blanc);
  display: grid; place-items: center; text-align: center; padding: 18px;
}
.intro-img .badge .ring { position: absolute; inset: 8px; border: 1px solid rgba(208,167,66,.5); border-radius: 50%; }
.intro-img .badge .eyebrow { font-size: 9px; letter-spacing: .4em; color: var(--or); margin-bottom: 6px; }
.intro-img .badge .big { font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.15; font-weight: 300; }
.intro-img .badge .big b { font-style: normal; font-weight: 500; font-size: 30px; display: block; color: var(--or); margin: 3px 0; }

/* ── Index métiers ──────────────────────────────────────────── */
.sf-index { background: var(--noir); color: var(--blanc); padding: clamp(64px,7vw,96px) var(--pad); }
.index-inner {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: center;
}
.index-inner .eyebrow { color: var(--or); }
.index-title { font-family: var(--serif); font-size: clamp(28px,3vw,38px); font-weight: 400; line-height: 1.2; margin-top: 18px; color: var(--blanc); }
.index-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; }
.index-list li a {
  display: flex; align-items: baseline; gap: 14px;
  padding: 18px 0; border-bottom: 1px solid rgba(208,167,66,.22);
  transition: all .25s ease; color: var(--blanc);
}
.index-list li a:hover { color: var(--or); padding-left: 6px; }
.index-list .n { font-family: var(--serif); font-size: 13px; letter-spacing: .3em; color: var(--or); }
.index-list .t { font-family: var(--serif); font-size: 21px; font-weight: 400; letter-spacing: -.005em; }

/* ── Sections Métiers ───────────────────────────────────────── */
.trade { position: relative; padding: clamp(96px,12vw,160px) var(--pad); background: var(--blanc); }
.trade.alt { background: var(--creme); }
.trade-inner {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px,7vw,96px); align-items: center;
}
.trade.reverse .trade-inner > .trade-img { order: 2; }
.trade-num {
  font-family: var(--serif); font-size: 13px; letter-spacing: .4em; color: var(--or-soft);
  margin-bottom: 18px; display: flex; align-items: center; gap: 14px;
}
.trade-num .line { width: 48px; height: 1px; background: var(--or-soft); }
.trade-title {
  font-family: var(--serif); font-size: clamp(42px,5.5vw,72px);
  font-weight: 400; line-height: 1.02; letter-spacing: -.012em; margin-bottom: 28px;
}
.trade-title em { font-style: italic; color: var(--or-soft); }
.trade-lead {
  font-family: var(--serif); font-size: clamp(20px,1.8vw,26px);
  line-height: 1.45; color: var(--noir); font-weight: 400; letter-spacing: -.003em;
  margin-bottom: 28px; max-width: 540px;
}
.trade-body { color: #4a4842; font-size: 15.5px; line-height: 1.85; margin-bottom: 24px; max-width: 540px; text-wrap: pretty; }
.trade-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 36px; max-width: 540px; }
.trade-tools .chip {
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  padding: 8px 14px; border: 1px solid rgba(2,2,3,.18); color: #4a4842;
  background: rgba(255,255,255,.6);
}
.trade.alt .trade-tools .chip { background: rgba(255,255,255,.8); }
.trade-quote {
  border-top: 1px solid rgba(2,2,3,.15);
  padding-top: 32px; margin-top: 8px; display: flex; flex-direction: column; gap: 18px;
  max-width: 540px;
}
.trade-quote blockquote {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(22px,2.4vw,30px); line-height: 1.35; color: var(--noir);
  letter-spacing: -.005em;
}
.trade-quote blockquote::before { content: "« "; color: var(--or-soft); }
.trade-quote blockquote::after { content: " »"; color: var(--or-soft); }
.trade-quote .author { display: flex; align-items: center; gap: 16px; }
.trade-quote .author .ini {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--noir); color: var(--or);
  display: grid; place-items: center; font-family: var(--serif); font-size: 17px; flex-shrink: 0;
}
.trade-quote .author .name { font-size: 13.5px; font-weight: 500; letter-spacing: .04em; color: var(--noir); }
.trade-quote .author .role { font-size: 11px; color: var(--gris); letter-spacing: .18em; text-transform: uppercase; margin-top: 3px; }

/* Trade image composition */
.trade-img { position: relative; height: clamp(520px,62vw,720px); }
.trade-img .main { position: absolute; inset: 0; overflow: hidden; }
.trade-img .main .cover-img,
.trade-img .main .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.trade-img .detail {
  position: absolute; width: 46%; height: 36%;
  overflow: hidden; border: 8px solid var(--blanc);
}
.trade.alt .trade-img .detail { border-color: var(--creme); }
.trade-img .detail .cover-img,
.trade-img .detail .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.trade-img .detail.br { right: -28px; bottom: -28px; }
.trade-img .detail.bl { left: -28px; bottom: -28px; }
.trade-img .detail.tr { right: -28px; top: -28px; }
.trade-img .stamp {
  position: absolute; top: 24px; left: 24px;
  background: rgba(2,2,3,.85); color: var(--or);
  padding: 8px 14px;
  font-size: 10px; letter-spacing: .36em; text-transform: uppercase;
  border: 1px solid rgba(208,167,66,.4); backdrop-filter: blur(8px);
}

/* Dark trade variant */
.trade.dark { background: #0c0a08; color: var(--blanc); }
.trade.dark .trade-title em { color: var(--or); }
.trade.dark .trade-title { color: var(--blanc); }
.trade.dark .trade-lead { color: #e6e2d8; }
.trade.dark .trade-body { color: #cbc6bd; }
.trade.dark .trade-body strong { color: var(--blanc); }
.trade.dark .trade-tools .chip { background: rgba(255,255,255,.04); border-color: rgba(208,167,66,.3); color: #e6e2d8; }
.trade.dark .trade-quote { border-color: rgba(208,167,66,.22); }
.trade.dark .trade-quote blockquote { color: var(--blanc); }
.trade.dark .trade-quote .author .name { color: var(--blanc); }
.trade.dark .trade-quote .author .ini { background: rgba(208,167,66,.12); border: 1px solid rgba(208,167,66,.4); }
.trade.dark .trade-num { color: var(--or); }
.trade.dark .trade-num .line { background: var(--or); }
.trade.dark .trade-img .detail { border-color: #0c0a08; }

/* Signature trade */
.trade.signature { position: relative; }
.trade.signature::before {
  content: "Signature de la maison";
  position: absolute; top: 32px; left: 50%; transform: translateX(-50%);
  font-size: 10px; letter-spacing: .5em; color: var(--or); text-transform: uppercase;
}

/* ── Atelier en chiffres ────────────────────────────────────── */
.sf-atelier { background: var(--noir); color: var(--blanc); padding: clamp(96px,12vw,160px) var(--pad); }
.atelier-inner { max-width: var(--max); margin: 0 auto; text-align: center; }
.sf-atelier .eyebrow { color: var(--or); }
.atelier-inner h2 { max-width: 760px; margin: 18px auto 24px; color: var(--blanc); }
.atelier-inner h2 em { color: var(--or); }
.atelier-lead { max-width: 620px; margin: 0 auto 64px; color: #cbc6bd; font-size: 16px; line-height: 1.8; }
.atelier-stats {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 0;
  border-top: 1px solid rgba(208,167,66,.22);
  border-bottom: 1px solid rgba(208,167,66,.22);
}
.atelier-stats .s { padding: 48px 24px; border-right: 1px solid rgba(208,167,66,.22); }
.atelier-stats .s:last-child { border-right: 0; }
.atelier-stats .n { font-family: var(--serif); font-size: clamp(48px,5.5vw,72px); font-weight: 400; color: var(--or); line-height: 1; }
.atelier-stats .n .u { font-size: .45em; color: #cbc6bd; font-style: italic; margin-left: 6px; }
.atelier-stats .l { margin-top: 14px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--blanc); font-weight: 500; }
.atelier-foot {
  margin-top: 48px; display: flex; justify-content: center; gap: 24px; flex-wrap: wrap;
  color: #cbc6bd; font-size: 13.5px; letter-spacing: .06em;
}
.atelier-foot span::before {
  content: ""; display: inline-block; width: 6px; height: 6px; background: var(--or);
  border-radius: 50%; margin-right: 10px; vertical-align: middle; transform: translateY(-1px);
}

/* ── Périmètre ──────────────────────────────────────────────── */
.sf-scope { background: var(--noir); color: var(--blanc); padding: clamp(96px,12vw,160px) var(--pad); }
.scope-inner {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(48px,7vw,96px); align-items: start;
}
.scope-inner .eyebrow { color: var(--or); }
.scope-inner h2 { color: var(--blanc); margin: 18px 0 24px; }
.scope-inner h2 em { color: var(--or); }
.scope-intro { color: #cbc6bd; font-size: 15.5px; line-height: 1.85; max-width: 420px; }
.scope-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.scope-col h3 {
  font-family: var(--sans); font-size: 10px; letter-spacing: .4em;
  color: var(--or); text-transform: uppercase; font-weight: 600; margin-bottom: 24px;
  padding-bottom: 18px; border-bottom: 1px solid rgba(208,167,66,.3);
}
.scope-col.dont h3 { color: #7a7770; border-bottom-color: rgba(122,119,112,.4); }
.scope-col ul { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.scope-col li {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
  font-family: var(--serif); font-size: 22px; line-height: 1.3; font-weight: 400; color: var(--blanc);
}
.scope-col.dont li { color: #7a7770; }
.scope-col .mark {
  display: inline-grid; place-items: center; width: 24px; height: 24px;
  border: 1px solid var(--or); color: var(--or); font-size: 11px; flex-shrink: 0; margin-top: 6px;
}
.scope-col.dont .mark { border-color: #7a7770; color: #7a7770; position: relative; }
.scope-col.dont .mark::after { content: ""; position: absolute; width: 14px; height: 1px; background: currentColor; }

/* ============================================================
   CARROUSEL DES 5 MÉTIERS — Glass card, hauteur 100vh max
   ============================================================ */

/* Section globale = fond noir plein écran, contient la card glass */
.trades-carousel {
  position: relative;
  background: var(--noir);
  height: 100vh;
  height: 100dvh;
  min-height: 580px;
  padding: clamp(28px, 4vh, 56px) clamp(16px, 3.5vw, 60px);
  overflow: hidden;
}

/* Frame glass — la carte translucide qui tient le contenu */
.trades-frame {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 24px;

  /* Glass design noir + accent doré */
  background:
    radial-gradient(circle at 18% 22%, rgba(208,167,66,.10), transparent 55%),
    radial-gradient(circle at 85% 78%, rgba(208,167,66,.06), transparent 50%),
    linear-gradient(135deg, rgba(20,18,15,.92) 0%, rgba(8,7,6,.96) 100%);
  border: 1px solid rgba(208,167,66,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(208,167,66,.08),
    0 30px 80px rgba(0,0,0,.4),
    0 0 0 1px rgba(0,0,0,.4);
}

/* Viewport et track tiennent toute la hauteur disponible */
.trades-viewport { flex: 1; overflow: hidden; }
.trades-track {
  display: flex;
  height: 100%;
  width: 100%;
  transition: transform .9s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.trades-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow-y: auto;       /* permet de scroller dans une slide si jamais le contenu dépasse */
  -webkit-overflow-scrolling: touch;
  /* Scrollbar masquée visuellement (le scroll reste fonctionnel) */
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE/Edge legacy */
}
.trades-slide::-webkit-scrollbar { display: none; width: 0; height: 0; } /* Chrome / Safari / Webkit */

/* ─── Override des fonds dark/alt : tout devient transparent (glass) ─── */
.trades-carousel .trade,
.trades-carousel .trade.dark,
.trades-carousel .trade.alt {
  background: transparent;
  color: var(--blanc);
  /* Plus de marge verticale, moins de marge horizontale */
  padding: clamp(88px, 10vh, 130px) clamp(14px, 2.4vw, 40px) clamp(120px, 13vh, 160px);
  width: 100%;
  height: 100%;
  display: flex; align-items: center;  /* centrage vertical */
}
.trades-carousel .trade-inner {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  align-items: center;
  /* Gap réduit pour laisser plus de place au texte */
  gap: clamp(28px, 4vw, 64px);
}

/* Contenu texte — uniforme en mode glass */
.trades-carousel .trade-title              { color: var(--blanc); }
.trades-carousel .trade-title em           { color: var(--or); }
.trades-carousel .trade-lead               { color: #e6e2d8; }
.trades-carousel .trade-body               { color: #cbc6bd; }
.trades-carousel .trade-body strong        { color: var(--blanc); }
.trades-carousel .trade-num                { color: var(--or); }
.trades-carousel .trade-num .line          { background: var(--or); }

/* Chips */
.trades-carousel .trade-tools .chip,
.trades-carousel .trade.alt .trade-tools .chip {
  background: rgba(255,255,255,.04);
  border-color: rgba(208,167,66,.28);
  color: #e6e2d8;
}

/* Citation */
.trades-carousel .trade-quote                  { border-color: rgba(208,167,66,.22); }
.trades-carousel .trade-quote blockquote       { color: var(--blanc); }
.trades-carousel .trade-quote .author .name    { color: var(--blanc); }
.trades-carousel .trade-quote .author .ini     {
  background: rgba(208,167,66,.12);
  border: 1px solid rgba(208,167,66,.4);
  color: var(--or);
}

/* Image : hauteur ajustée pour tenir dans 100vh */
.trades-carousel .trade-img { height: clamp(260px, 44vh, 460px); }
.trades-carousel .trade.alt .trade-img .detail,
.trades-carousel .trade .trade-img .detail {
  border-color: rgba(14,12,10,.95);
}

/* Tag "Signature de la maison" */
.trades-carousel .trade.signature::before {
  color: var(--or);
  top: 22px;
}

/* ─── Flèches navigation (glass dorées) ─────────────────────────────── */
.trades-prev,
.trades-next {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 60px; height: 60px;
  display: grid; place-items: center;
  color: var(--blanc);
  background: rgba(2,2,3,.55);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(208,167,66,.4);
  border-radius: 50%;
  cursor: pointer;
  transition: color .25s ease, background .25s ease, border-color .25s ease, transform .35s ease, box-shadow .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.trades-prev { left: clamp(20px, 2.5vw, 36px); }
.trades-next { right: clamp(20px, 2.5vw, 36px); }
.trades-prev svg, .trades-next svg {
  width: 22px; height: 22px;
  stroke: currentColor; fill: none; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.trades-prev:hover, .trades-next:hover {
  color: var(--noir);
  background: var(--or);
  border-color: var(--or);
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 8px 24px rgba(208,167,66,.35);
  animation: none; /* coupe la pulsation au survol */
}

/* Fix flash rose / outline hérité (Hello Elementor, navigateur, plugins) */
.trades-prev:focus,         .trades-next:focus,
.trades-prev:focus-visible, .trades-next:focus-visible,
.trades-prev:active,        .trades-next:active {
  outline: none;
  box-shadow: 0 8px 24px rgba(208,167,66,.35);
  background: rgba(2,2,3,.55);
  color: var(--blanc);
}
.trades-prev:focus-visible, .trades-next:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 5px;
}
.trades-prev:active, .trades-next:active {
  background: var(--or);
  color: var(--noir);
  border-color: var(--or);
}

/* ─── Pulse doré sur la flèche droite (invite au clic) ──────────────── */
@keyframes trades-next-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(208,167,66,.55),
      0 0 16px rgba(208,167,66,.12);
    border-color: rgba(208,167,66,.45);
  }
  50% {
    box-shadow:
      0 0 0 14px rgba(208,167,66,0),
      0 0 26px rgba(208,167,66,.35);
    border-color: rgba(208,167,66,1);
  }
}
.trades-next {
  animation: trades-next-pulse 2.6s ease-in-out infinite;
}

/* ─── Compteur + barre de progression (glass) ───────────────────────── */
.trades-meta {
  position: absolute;
  left: 50%; bottom: clamp(20px, 3vh, 36px);
  transform: translateX(-50%);
  z-index: 5;
  display: flex; align-items: center; gap: 24px;
  padding: 14px 26px;
  background: rgba(2,2,3,.55);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.trades-counter {
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: .25em;
  color: rgba(255,255,255,.55);
  white-space: nowrap;
}
.trades-counter .trades-current {
  color: var(--or);
  font-weight: 500;
  font-size: 16px;
}
.trades-counter .trades-sep { margin: 0 6px; opacity: .5; }
.trades-progress {
  display: block;
  width: clamp(120px, 18vw, 220px);
  height: 1px;
  background: rgba(255,255,255,.18);
  position: relative;
  overflow: hidden;
}
.trades-progress-bar {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  width: 0%;
  background: var(--or);
  box-shadow: 0 0 6px rgba(208,167,66,.5);
}

/* État actif des liens d'index quand la slide correspondante est visible */
.index-list a.active        { color: var(--or); padding-left: 6px; }
.index-list a.active .n     { color: var(--or); }

/* ─── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .trades-carousel {
    padding: clamp(20px, 3vh, 40px) clamp(12px, 2.5vw, 32px);
    min-height: 560px;
  }
  .trades-frame { border-radius: 18px; }
  .trades-prev, .trades-next { width: 46px; height: 46px; }
  .trades-prev svg, .trades-next svg { width: 18px; height: 18px; }
  .trades-meta { gap: 16px; padding: 10px 20px; }
  .trades-counter { font-size: 12px; }
  .trades-counter .trades-current { font-size: 14px; }
  .trades-carousel .trade,
  .trades-carousel .trade.dark,
  .trades-carousel .trade.alt {
    padding: clamp(60px, 8vh, 96px) clamp(12px, 2vw, 28px) clamp(96px, 11vh, 130px);
  }
  .trades-carousel .trade-img { height: clamp(220px, 36vh, 360px); }
}

@media (max-width: 640px) {
  .trades-carousel {
    padding: 16px 10px;
    min-height: 520px;
  }
  .trades-frame { border-radius: 14px; }

  /* Flèches descendues au niveau du compteur, encadrant la meta bar */
  .trades-prev, .trades-next {
    top: auto;
    bottom: clamp(14px, 2.5vh, 22px);
    transform: none;
    width: 38px; height: 38px;
  }
  .trades-prev { left: clamp(14px, 4vw, 28px); }
  .trades-next { right: clamp(14px, 4vw, 28px); }
  .trades-prev:hover, .trades-next:hover { transform: scale(1.05); }
  .trades-next { animation-duration: 3.2s; }

  /* Reset hover/active sur tactile (évite résidu de flash) */
  .trades-prev:focus, .trades-next:focus,
  .trades-prev:active, .trades-next:active {
    transform: none;
  }

  /* Images masquées + texte centré sur mobile */
  .trades-carousel .trade-img { display: none; }
  .trades-carousel .trade-inner {
    grid-template-columns: 1fr;
    gap: 0;
    text-align: center;
    justify-items: center;
  }
  .trades-carousel .trade-num            { justify-content: center; }
  .trades-carousel .trade-lead,
  .trades-carousel .trade-body           { margin-left: auto; margin-right: auto; }
  .trades-carousel .trade-tools          { justify-content: center; }

  /* Pas d'auto-scroll → pas de barre de progression ; compteur seul */
  .trades-progress { display: none; }
  .trades-meta { padding: 8px 16px; bottom: clamp(14px, 2.5vh, 22px); }
}

/* Préférence "réduire les animations" */
@media (prefers-reduced-motion: reduce) {
  .trades-track,
  .trades-progress-bar { transition: none; }
  .trades-next { animation: none; }
}

/* ── Philosophie (CTA bas de page, fond crème) ──────────────── */
.sf-philo {
  background: var(--creme);          /* #f5f1ea */
  color: var(--noir);
  padding: clamp(96px,12vw,140px) var(--pad);
  position: relative;
  border-top: 1px solid rgba(2,2,3,.06);
}
.philo-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.sf-philo .eyebrow { color: var(--or-soft); margin-bottom: 24px; }
.sf-philo h2 {
  color: var(--noir);
  margin: 0 0 32px;
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1.05;
}
.sf-philo h2 em { color: var(--or-soft); font-style: italic; }
.sf-philo p {
  color: #4a4842;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.85;
  max-width: 640px;
  margin: 0 auto 48px;
  text-wrap: pretty;
}
.philo-ctas {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Bouton ghost réadapté pour fond clair (par défaut il est blanc sur fond sombre) */
.sf-philo .btn-ghost {
  border-color: rgba(2,2,3,.6);
  color: var(--noir);
}
.sf-philo .btn-ghost:hover {
  background: var(--noir);
  color: var(--blanc);
  border-color: var(--noir);
}

/* ── Responsive 1100px ──────────────────────────────────────── */
@media (max-width: 1100px) {
  .phero-inner { grid-template-columns: 1fr; }
  .phero-meta { max-width: 100%; border-left: none; border-top: 1px solid rgba(208,167,66,.4); padding: 18px 0 0; }
  .intro-grid,
  .scope-inner { grid-template-columns: 1fr; }
  .trade-inner { grid-template-columns: 1fr; }
  .trade.reverse .trade-inner > .trade-img { order: 0; }
  .trade-img { height: 440px; }
  .intro-img { height: 440px; }
  .intro-img .badge { left: auto; right: 16px; bottom: -24px; width: 140px; height: 140px; }
  .atelier-stats { grid-template-columns: repeat(2,1fr); }
  .atelier-stats .s:nth-child(2) { border-right: 0; }
  .atelier-stats .s:nth-child(1),
  .atelier-stats .s:nth-child(2) { border-bottom: 1px solid rgba(208,167,66,.22); }
  .scope-grid { grid-template-columns: 1fr; gap: 32px; }
  .index-list { grid-template-columns: 1fr 1fr; }
  .index-inner { grid-template-columns: 1fr; gap: 32px; }
}

/* ── Responsive 640px ───────────────────────────────────────── */
@media (max-width: 640px) {
  .index-list { grid-template-columns: 1fr; }
  .trade-img { height: 320px; }
  .trade-img .detail { display: none; }
  .intro-img { height: 340px; }
  .atelier-stats { grid-template-columns: 1fr 1fr; }
  .philo-ctas { flex-direction: column; align-items: stretch; }
  .philo-ctas .btn-primary,
  .philo-ctas .btn-ghost { justify-content: center; }
}


/* ============================================================
   PAGE — CONSTRUIRE
   Tous les sélecteurs sont scopés sous .page-construire pour
   éviter tout conflit avec les classes existantes (.hero, etc.)
   ============================================================ */

.page-construire {
  background: var(--noir);
  color: var(--blanc);
  --c-pad: clamp(24px, 4vw, 56px);
}

/* Placeholders photo (gradient zones) — fallback quand pas d'image ACF */
.page-construire .photo {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 68% 30%, rgba(208,167,66,.12) 0%, transparent 55%),
    radial-gradient(ellipse at 18% 80%, rgba(255,255,255,.04) 0%, transparent 50%),
    linear-gradient(155deg, #1c1c22 0%, #0a0a0c 55%, #020203 100%);
}
.page-construire .photo.cool {
  background:
    radial-gradient(ellipse at 35% 25%, rgba(255,255,255,.06) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(208,167,66,.06) 0%, transparent 50%),
    linear-gradient(170deg, #181a20 0%, #0c0e12 50%, #050608 100%);
}
.page-construire .photo.warm {
  background:
    radial-gradient(ellipse at 70% 35%, rgba(208,167,66,.18) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(208,167,66,.06) 0%, transparent 50%),
    linear-gradient(160deg, #221c14 0%, #110d08 55%, #060403 100%);
}
.page-construire .photo.forest {
  background:
    radial-gradient(ellipse at 30% 40%, rgba(140,180,140,.06) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(208,167,66,.08) 0%, transparent 50%),
    linear-gradient(180deg, #0c1410 0%, #08100a 50%, #020403 100%);
}
.page-construire .photo::after {
  content: attr(data-label);
  position: absolute; left: var(--c-pad); bottom: 28px;
  font-family: var(--sans);
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase; font-weight: 500;
  color: rgba(208,167,66,.62);
  padding: 8px 12px;
  border: 1px solid rgba(208,167,66,.28);
  background: rgba(2,2,3,.45);
  backdrop-filter: blur(4px);
}

/* Eyebrow réutilisable */
.page-construire .c-eyebrow {
  font-family: var(--sans);
  font-size: 10px; letter-spacing: .32em; text-transform: uppercase; font-weight: 600;
  color: var(--or);
}
.page-construire .c-eyebrow::before {
  content: ""; display: inline-block;
  width: 28px; height: 1px; background: var(--or);
  vertical-align: middle; margin-right: 14px;
}

/* ───────────── 01 HERO ───────────── */
.c-hero {
  position: relative;
  height: 100vh;
  height: 100dvh;          /* exactement la hauteur de l'écran */
  min-height: 0;
  overflow: hidden;
  color: var(--blanc);
}
.c-hero .cover-img,
.c-hero .photo { z-index: 0; }
/* Couche 1 : filtre noir uniforme (identique à .hero et .phero) */
.c-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgba(2,2,3,.42);
  pointer-events: none;
}
/* Couche 2 : dégradé vertical pour la lisibilité (identique à .hero et .phero) */
.c-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(2,2,3,.55) 0%, rgba(2,2,3,.25) 35%,
    rgba(2,2,3,.3) 60%, rgba(2,2,3,.75) 100%);
  pointer-events: none;
}
.c-hero-content {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 0 var(--c-pad) 96px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: end;
}
.c-crumb {
  display: flex; gap: 14px;
  font-family: var(--sans);
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase; font-weight: 500;
  color: rgba(255,255,255,.55);
  margin-bottom: 32px;
}
.c-crumb a { color: rgba(255,255,255,.7); transition: color .2s ease; }
.c-crumb a:hover { color: var(--or); }
.c-crumb .here { color: var(--or); }
.c-hero h1 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(56px, 9vw, 140px);
  line-height: .96; letter-spacing: -.014em;
  margin: 0;
}
.c-hero h1 em { font-style: italic; color: var(--or); }
.c-lede {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(17px, 1.3vw, 21px);
  line-height: 1.6;
  color: rgba(255,255,255,.86);
  max-width: 42ch;
}
.c-geo {
  margin-top: 24px;
  display: flex; gap: 18px; flex-wrap: wrap;
  font-family: var(--sans);
  font-size: 10px; letter-spacing: .26em; text-transform: uppercase; font-weight: 500;
  color: var(--or);
}
.c-geo span:not(:last-child)::after {
  content: "·"; margin-left: 18px; color: rgba(208,167,66,.5);
}
/* L'indicateur de scroll utilise la classe .hero-scroll partagée avec l'accueil
   (barre verticale desktop / chevron mobile) — voir CSS plus haut. */

/* ───────────── 02 DIPTYQUE ───────────── */
.c-diptyque {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  height: 100vh; min-height: 720px;
}
.c-porte {
  position: relative; overflow: hidden;
  display: block; cursor: pointer;
  color: var(--blanc);
}
/* Filtre noir épais par défaut — la photo est "endormie", peu visible */
.c-porte::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(2,2,3,.65) 0%, rgba(2,2,3,.78) 50%, rgba(2,2,3,.96) 100%);
  transition: background .45s ease;
}
/* Au survol : filtre s'éclaircit nettement → la zone "s'active" visuellement */
.c-porte:hover::after,
.c-porte:focus-visible::after {
  background: linear-gradient(180deg, rgba(2,2,3,.18) 0%, rgba(2,2,3,.4) 50%, rgba(2,2,3,.82) 100%);
}
/* Photo : zoom désactivé (pas de changement de couleur/cadrage au hover) */
.c-porte .photo,
.c-porte .cover-img { transition: none; }
.c-porte:hover .photo,
.c-porte:hover .cover-img { transform: none; }
/* Titres : couleur stable (aucun changement au hover) */
.c-porte h3, .c-porte:hover h3 { color: var(--blanc); }
.c-porte h3 em, .c-porte:hover h3 em { color: var(--or); }
.c-porte .num, .c-porte:hover .num { color: var(--or); }

.c-porte-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 0 56px 80px;
}
.c-porte .num {
  font-family: var(--sans);
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase; font-weight: 500;
  color: var(--or);
}
.c-porte h3 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(44px, 5vw, 84px);
  line-height: .98; letter-spacing: -.01em;
  margin: 20px 0 18px;
}
.c-porte h3 em { font-style: italic; color: var(--or); }
.c-porte .desc {
  font-size: 15px; line-height: 1.65;
  color: rgba(255,255,255,.85);
  max-width: 42ch;
  margin: 0 0 32px;
}
.c-porte .go {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--sans);
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase; font-weight: 500;
  color: var(--blanc);
  padding: 10px 0;
  border: 1px solid transparent;
  border-bottom-color: var(--or);
  background: transparent;
  transition: background .3s ease, color .3s ease, padding .3s ease, border-color .3s ease;
}
/* Au hover de la carte : le bouton « Découvrir » passe en plein doré */
.c-porte:hover .go,
.c-porte:focus-visible .go {
  background: var(--or);
  color: var(--noir);
  padding: 12px 22px;
  border-color: var(--or);
  border-bottom-color: var(--or);
}
.c-diptyque-meta {
  position: absolute; top: 40px; left: 56px; z-index: 3;
  font-family: var(--sans);
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase; font-weight: 500;
  color: rgba(255,255,255,.6);
}
.c-diptyque-meta::before {
  content: ""; display: inline-block;
  width: 24px; height: 1px; background: rgba(255,255,255,.6);
  vertical-align: middle; margin-right: 12px;
}

/* ───────────── 03 TRONC COMMUN ───────────── */
.c-tronc {
  position: relative;
  min-height: 100vh;
  padding: clamp(120px, 14vw, 180px) var(--c-pad);
  overflow: hidden;
}
.c-tronc::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(2,2,3,.6) 0%, rgba(2,2,3,.85) 100%);
}
.c-tronc .photo,
.c-tronc .cover-img { z-index: 0; }
.c-tronc .photo::after { display: none; }
.c-tronc-content {
  position: relative; z-index: 2;
  max-width: 1400px; margin: 0 auto;
}
.c-tronc-head {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 96px;
}
.c-tronc-head h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(44px, 5.4vw, 84px);
  line-height: 1.02; letter-spacing: -.01em;
  margin: 24px 0 0;
  color: var(--blanc);
}
.c-tronc-head h2 em { font-style: italic; color: var(--or); }
.c-tronc-head p {
  font-size: 15px; color: var(--gris-clair);
  max-width: 38ch; margin: 0; line-height: 1.7;
}
.c-etapes-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid rgba(255,255,255,.15);
}
.c-et {
  padding: 36px 24px 0;
  border-right: 1px solid rgba(255,255,255,.08);
  min-height: 240px;
}
.c-et:last-child { border-right: none; }
.c-et .n {
  font-family: var(--sans);
  font-size: 11px; letter-spacing: .28em; font-weight: 500;
  color: var(--or);
}
.c-et h4 {
  font-family: var(--serif); font-weight: 300;
  font-size: 30px; line-height: 1.05;
  margin: 28px 0 14px;
  color: var(--blanc);
}
.c-et h4 em { font-style: italic; color: #e3bf66; }
.c-et p {
  font-size: 13px; line-height: 1.6;
  color: var(--gris-clair); margin: 0;
}

/* ───────────── 04 TRANSPARENCE ───────────── */
.c-transparence {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}
.c-transparence .photo,
.c-transparence .cover-img { z-index: 0; }
.c-transparence::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  /* Plus dense côté droit pour rendre la liste numérotée parfaitement lisible */
  background: linear-gradient(110deg, rgba(2,2,3,.94) 0%, rgba(2,2,3,.82) 45%, rgba(2,2,3,.62) 100%);
}
.c-trans-content {
  position: relative; z-index: 2;
  padding: clamp(120px, 12vw, 160px) var(--c-pad);
  max-width: 1400px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 96px;
  align-items: center;
  min-height: 100vh;
}
.c-trans-content h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(44px, 5.6vw, 88px);
  line-height: 1.02; letter-spacing: -.01em;
  margin: 24px 0 28px;
  color: var(--blanc);
}
.c-trans-content h2 em { font-style: italic; color: var(--or); }
.c-trans-content .desc {
  font-size: 16px; line-height: 1.7;
  color: var(--gris-clair);
  max-width: 52ch; margin: 0 0 32px;
}
.c-trans-cta {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 16px 24px;
  border: 1px solid rgba(255,255,255,.25);
  font-family: var(--sans);
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase; font-weight: 500;
  color: var(--blanc);
  transition: border-color .25s ease, color .25s ease;
}
.c-trans-cta:hover { border-color: var(--or); color: var(--or); }
.c-trans-list {
  list-style: none; padding: 0; margin: 0;
  border-top: 1px solid rgba(255,255,255,.12);
}
.c-trans-list li {
  display: grid;
  grid-template-columns: 40px 1fr 24px;
  gap: 20px; align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: background .2s ease;
}
.c-trans-list li:hover { background: rgba(255,255,255,.02); }
.c-trans-list .ni {
  font-family: var(--sans);
  font-size: 10px; letter-spacing: .24em; font-weight: 500;
  color: var(--or);
}
.c-trans-list .lbl {
  font-family: var(--serif);
  font-size: clamp(20px, 1.7vw, 26px); line-height: 1.3;
  color: var(--blanc);
}
.c-trans-list .lbl em { font-style: italic; color: var(--or); }
.c-trans-list .arr { justify-self: end; color: var(--or); font-size: 18px; }

/* ───────────── 05 CTA FINAL ───────────── */
.c-final {
  position: relative;
  min-height: 90vh;
  overflow: hidden;
  display: grid; place-items: center;
}
.c-final::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(2,2,3,.6) 0%, rgba(2,2,3,.85) 100%);
}
.c-final .photo,
.c-final .cover-img { z-index: 0; }
.c-final-content {
  position: relative; z-index: 2;
  text-align: center;
  padding: 80px var(--c-pad);
}
.c-final h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(56px, 7vw, 120px);
  line-height: .98; letter-spacing: -.012em;
  margin: 0;
  color: var(--blanc);
}
.c-final h2 em { font-style: italic; color: var(--or); }
.c-final-actions {
  display: flex; gap: 16px; justify-content: center;
  margin-top: 56px; flex-wrap: wrap;
}
.c-btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 18px 28px;
  font-family: var(--sans);
  font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; font-weight: 500;
  border: 1px solid var(--or);
  color: var(--noir);
  background: var(--or);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.c-btn:hover { background: var(--blanc); color: var(--noir); border-color: var(--blanc); }
.c-btn.ghost {
  background: transparent; color: var(--blanc);
  border-color: rgba(255,255,255,.3);
}
.c-btn.ghost:hover { border-color: var(--or); color: var(--or); background: transparent; }

/* ───────────── Responsive ≤ 1100px ───────────── */
@media (max-width: 1100px) {
  .c-hero-content { grid-template-columns: 1fr; padding-bottom: 64px; gap: 36px; }
  .c-diptyque { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .c-diptyque .c-porte { min-height: 80vh; }
  .c-porte-body { padding: 0 36px 56px; }
  .c-tronc-head { grid-template-columns: 1fr; gap: 32px; margin-bottom: 64px; }
  .c-etapes-row { grid-template-columns: 1fr 1fr; }
  .c-et { border-bottom: 1px solid rgba(255,255,255,.08); }
  .c-et:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.08); }
  .c-et:nth-child(even) { border-right: none; }
  .c-trans-content { grid-template-columns: 1fr; gap: 56px; min-height: 0; }
}

/* ───────────── Responsive ≤ 640px ───────────── */
@media (max-width: 640px) {
  .c-hero h1 { font-size: clamp(44px, 11vw, 72px); }
  .c-etapes-row { grid-template-columns: 1fr; }
  .c-et { border-right: none !important; min-height: auto; padding: 32px 0; }
  .c-porte-body { padding: 0 24px 48px; }
  .c-final-actions { flex-direction: column; align-items: stretch; }
  .c-btn { justify-content: center; }
  .c-trans-list li { grid-template-columns: 36px 1fr 18px; gap: 14px; }
}

/* Préfère animations réduites */
@media (prefers-reduced-motion: reduce) {
  .c-porte::after { transition: none; }
  .c-porte .go    { transition: none; }
}


/* ============================================================
   PAGE — CONSTRUCTION CHALET NEUF (de A à Z)
   Tout est scopé sous .page-caz
   ============================================================ */

.page-caz {
  --caz-noir: var(--noir);
  --caz-noir-2: #14130f;
  --caz-or: var(--or);
  --caz-or-soft: #d8b977;
  --caz-or-deep: #8b6e30;
  --caz-blanc: var(--blanc);
  --caz-creme: var(--creme);
  --caz-papier: #f7f4ec;
  --caz-encre: #1a1814;
  --caz-gris: #6e6a62;
  --caz-gris-2: #9b958a;
  --caz-rule-dark: rgba(255,255,255,.10);
  --caz-rule-light: rgba(26,24,20,.12);
  --caz-creme-2: #e0d6bc;
  --caz-pad-x: clamp(24px, 4.5vw, 72px);
  --caz-max-w: 1480px;
  --r-card: 18px;

  background: var(--caz-noir);
  color: var(--caz-blanc);
  font-size: 15.5px;
  line-height: 1.62;
}
.page-caz a { color: inherit; text-decoration: none; }

/* Helpers communs */
.page-caz .caz-wrap { max-width: var(--caz-max-w); margin: 0 auto; padding: 0 var(--caz-pad-x); }
.page-caz .caz-br-num {
  font-family: var(--sans); font-weight: 600;
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--caz-or);
}

/* Placeholders photo (gradients) */
.page-caz .photo {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 70% 35%, rgba(201,163,90,.14) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(255,255,255,.04) 0%, transparent 50%),
    linear-gradient(155deg, #1c1c22 0%, #0a0a0c 55%, #050508 100%);
}
.page-caz .photo.cool   { background: radial-gradient(ellipse at 35% 25%, rgba(255,255,255,.07) 0%, transparent 60%), radial-gradient(ellipse at 80% 70%, rgba(201,163,90,.10) 0%, transparent 50%), linear-gradient(170deg, #1a1d22 0%, #0c0e12 55%, #050608 100%); }
.page-caz .photo.warm   { background: radial-gradient(ellipse at 70% 35%, rgba(201,163,90,.22) 0%, transparent 55%), radial-gradient(ellipse at 20% 80%, rgba(201,163,90,.07) 0%, transparent 50%), linear-gradient(160deg, #221c14 0%, #110d08 55%, #060403 100%); }
.page-caz .photo.forest { background: radial-gradient(ellipse at 30% 40%, rgba(140,170,140,.08) 0%, transparent 60%), radial-gradient(ellipse at 80% 70%, rgba(201,163,90,.10) 0%, transparent 50%), linear-gradient(180deg, #0c1410 0%, #08100a 50%, #020403 100%); }
.page-caz .photo.papier { background: radial-gradient(ellipse at 30% 30%, rgba(201,163,90,.12) 0%, transparent 60%), radial-gradient(ellipse at 80% 80%, rgba(26,24,20,.10) 0%, transparent 55%), linear-gradient(155deg, #e8dfc8 0%, #d8cfb4 100%); }

/* ─── HERO ─── */
.page-caz .caz-hero { position: relative; min-height: 100vh; overflow: hidden; }
.page-caz .caz-hero .cover-img,
.page-caz .caz-hero .photo { z-index: 0; }
/* Couche 1 — filtre noir uniforme (identique aux autres heros du site) */
.page-caz .caz-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgba(2,2,3,.42);
  pointer-events: none;
}
/* Couche 2 — dégradé vertical pour la lisibilité du titre et du CTA */
.page-caz .caz-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(2,2,3,.55) 0%, rgba(2,2,3,.25) 35%,
    rgba(2,2,3,.3) 60%, rgba(2,2,3,.75) 100%);
  pointer-events: none;
}
/* Grain texturé conservé en surimpression (z-index 2 entre filtres et contenu) */
.page-caz .caz-hero-grain {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: .25; mix-blend-mode: overlay;
  background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1.5px);
  background-size: 3px 3px;
}
.page-caz .caz-hero-stage {
  position: relative; z-index: 3;
  min-height: 100vh;
  padding: 180px var(--caz-pad-x) 56px;
  display: grid; grid-template-rows: auto 1fr auto; gap: 32px;
}
.page-caz .caz-hero-top {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--sans); font-weight: 500;
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.page-caz .caz-crumb span { color: rgba(255,255,255,.55); }
.page-caz .caz-crumb a { color: rgba(255,255,255,.7); transition: color .2s; }
.page-caz .caz-crumb a:hover { color: var(--caz-or); }
.page-caz .caz-crumb .here { color: var(--caz-or); }
.page-caz .caz-crumb span:not(:last-child)::after { content: " /"; margin: 0 6px; color: rgba(255,255,255,.3); }
.page-caz .caz-geo .ll { color: var(--caz-or); }

.page-caz .caz-hero-center { align-self: center; text-align: center; margin: 0 auto; max-width: 1320px; }
.page-caz .caz-hero-center h1 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(60px, 10vw, 168px);
  line-height: .92; letter-spacing: -.018em; margin: 0;
}
.page-caz .caz-hero-center h1 em { font-style: italic; color: var(--caz-or); }
.page-caz .caz-ornate {
  display: block; font-family: var(--serif); font-style: italic;
  font-size: clamp(20px, 1.5vw, 24px);
  color: rgba(255,255,255,.78); margin: 36px 0 0; letter-spacing: .01em;
}
.page-caz .caz-ornate em { color: var(--caz-or); font-style: italic; }

.page-caz .caz-hero-foot {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: end; gap: 32px;
}
.page-caz .caz-hero-meta {
  font-family: var(--sans); font-weight: 500;
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.page-caz .caz-hero-meta strong {
  display: block; font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 26px; letter-spacing: 0; color: var(--caz-blanc); margin-bottom: 6px;
  text-transform: none;
}
.page-caz .caz-hero-cta-wrap { justify-self: center; }
/* Bouton « Prendre contact » — glass design sur le hero photo */
.page-caz .caz-hero-pill {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 14px 14px 28px;
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 12px 32px rgba(0,0,0,.25);
  color: var(--caz-blanc);
  border-radius: 999px;
  font-family: var(--sans); font-weight: 500;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s ease;
}
.page-caz .caz-hero-pill .arr {
  width: 40px; height: 40px; border-radius: 999px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.25);
  color: var(--caz-blanc);
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 20px;
  transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
/* Hover : le verre s'éclaire + le rond intérieur devient plein doré */
.page-caz .caz-hero-pill:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(208,167,66,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 16px 40px rgba(208,167,66,.22);
  transform: translateY(-1px);
}
.page-caz .caz-hero-pill:hover .arr {
  background: var(--caz-or);
  border-color: var(--caz-or);
  color: var(--caz-encre);
  transform: translateX(4px);
}
/* Fallback sans backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .page-caz .caz-hero-pill { background: rgba(11,10,8,.5); }
}

.page-caz .caz-hero-right { text-align: right; }
.page-caz .caz-hero-right .ts {
  font-family: var(--sans); font-weight: 500;
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.page-caz .caz-hero-right .ts em { color: var(--caz-or); font-style: normal; }

/* ─── Sections génériques (papier / crème) ─── */
.page-caz .caz-sect { padding: clamp(96px, 12vw, 160px) 0; position: relative; }
.page-caz .caz-sect.papier { background: var(--caz-papier); color: var(--caz-encre); }
.page-caz .caz-sect.papier .caz-br-num { color: var(--caz-or-deep); }
.page-caz .caz-sect.creme  { background: var(--caz-creme);  color: var(--caz-encre); }
.page-caz .caz-sect.creme  .caz-br-num { color: var(--caz-or-deep); }
/* Variante noire (utilisée pour le périmètre, par ex.) */
.page-caz .caz-sect.noir   { background: var(--caz-noir);   color: var(--caz-blanc); }
.page-caz .caz-sect.noir   .caz-br-num { color: var(--caz-or); }

/* ─── Wordmark décoratif ─── */
.page-caz .caz-wordmark-band { padding: 80px 0 0; text-align: center; overflow: hidden; }
.page-caz .caz-wordmark-band .wm {
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: clamp(120px, 21vw, 360px);
  line-height: .85;
  color: transparent;
  -webkit-text-stroke: 1px rgba(201,163,90,.32);
  letter-spacing: -.02em;
  display: block; white-space: nowrap;
}

/* ─── [01] INTRO ─── */
.page-caz .caz-intro { padding: clamp(120px, 14vw, 180px) 0 clamp(96px, 12vw, 140px); background: var(--caz-noir); }
.page-caz .caz-intro-head {
  display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center;
  margin-bottom: 64px;
}
.page-caz .caz-intro-head .caz-br-num { color: var(--caz-or); }
.page-caz .caz-stamp {
  font-family: var(--sans); font-weight: 500;
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--caz-gris-2);
}
.page-caz .caz-intro h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(48px, 7.4vw, 132px);
  line-height: .95; letter-spacing: -.012em; margin: 0 0 64px; max-width: 18ch;
}
.page-caz .caz-intro h2 em { font-style: italic; color: var(--caz-or); }
.page-caz .caz-intro-cols {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(32px, 4vw, 64px);
  padding-top: 56px; border-top: 1px solid var(--caz-rule-dark);
}
.page-caz .caz-intro-cols .col p { font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.78); margin: 0; }
.page-caz .caz-intro-cols .col .lbl {
  font-family: var(--sans); font-weight: 600;
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--caz-or); margin-bottom: 16px;
}
.page-caz .caz-intro-cols .col .lbl::before { content: "● "; }

/* ─── Bandeau photo plein-écran ─── */
.page-caz .caz-photo-band { position: relative; width: 100%; height: 100vh; min-height: 720px; overflow: hidden; }
.page-caz .caz-photo-band.tall  { height: 110vh; min-height: 820px; }
.page-caz .caz-photo-band.short { height: 70vh;  min-height: 520px; }
.page-caz .caz-photo-band .photo,
.page-caz .caz-photo-band .cover-img { z-index: 0; }
.page-caz .caz-photo-band::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(11,10,8,.2) 0%, rgba(11,10,8,0) 40%, rgba(11,10,8,.55) 100%);
}
.page-caz .caz-photo-band .cap {
  position: absolute; left: var(--caz-pad-x); bottom: 48px; z-index: 2; max-width: 540px;
}
.page-caz .caz-photo-band .cap .caz-br-num { color: var(--caz-or); display: inline-block; margin-bottom: 14px; }
.page-caz .caz-photo-band .cap h3 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(32px, 3.6vw, 52px); line-height: 1.05;
  color: var(--caz-blanc); margin: 0; letter-spacing: -.008em;
}
.page-caz .caz-photo-band .cap h3 em { font-style: italic; color: var(--caz-or); }
.page-caz .caz-photo-band .tag {
  position: absolute; right: var(--caz-pad-x); bottom: 48px; z-index: 2;
  font-family: var(--sans); font-weight: 500;
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(255,255,255,.7);
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(11,10,8,.4);
  backdrop-filter: blur(6px);
}
.page-caz .caz-photo-band .tag em { color: var(--caz-or); font-style: normal; }

/* ─── [02] PROCESSUS ─── */
.page-caz .caz-process-head {
  display: grid; grid-template-columns: auto 1fr auto; gap: 32px;
  align-items: center; margin-bottom: 80px;
  border-bottom: 1px solid var(--caz-rule-light); padding-bottom: 32px;
}
.page-caz .caz-process-head h2 {
  text-align: center;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(48px, 6.4vw, 96px); line-height: .96; letter-spacing: -.012em;
  margin: 0;
}
.page-caz .caz-process-head h2 em { font-style: italic; color: var(--caz-or-deep); }
.page-caz .caz-process-head .meta {
  font-family: var(--sans); font-weight: 500;
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--caz-gris); text-align: right;
}
.page-caz .caz-process-head .meta em {
  font-style: italic; color: var(--caz-or-deep);
  font-family: var(--serif); font-size: 24px; letter-spacing: 0; display: block;
}

/* Grille de 6 cartes étapes */
.page-caz .caz-etapes {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(20px, 2.4vw, 40px);
  margin-bottom: clamp(56px, 7vw, 96px);
}
.page-caz .caz-etape {
  position: relative; border-radius: var(--r-card); overflow: hidden;
  isolation: isolate; background: var(--caz-noir);
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
  display: block;
}
.page-caz .caz-etape:hover { transform: translateY(-4px); }
.page-caz .caz-etape .photo,
.page-caz .caz-etape .cover-img { z-index: 0; }
.page-caz .caz-etape::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(11,10,8,0) 0%, rgba(11,10,8,.05) 40%, rgba(11,10,8,.78) 100%);
}
.page-caz .etape-body {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: space-between;
  height: 100%; padding: clamp(20px, 2.6vw, 32px);
  color: var(--caz-blanc);
}
.page-caz .etape-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.page-caz .etape-foot { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.page-caz .etape-foot .text { max-width: 30ch; }
.page-caz .etape-foot h3 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(26px, 2.4vw, 38px); line-height: 1.04;
  margin: 0 0 8px; letter-spacing: -.005em;
}
.page-caz .etape-foot h3 em { font-style: italic; color: var(--caz-or); }
.page-caz .etape-foot .lede {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(14px, 1.05vw, 17px); color: rgba(255,255,255,.82);
  margin: 0; line-height: 1.5;
}

.page-caz .pill-label {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  background: var(--caz-blanc); color: var(--caz-encre);
  font-family: var(--sans); font-weight: 500;
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  border-radius: 999px;
}
.page-caz .pill-label::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--caz-or-deep);
}
.page-caz .round-cta {
  width: 48px; height: 48px; border-radius: 999px;
  background: var(--caz-blanc); color: var(--caz-encre);
  display: grid; place-items: center;
  transition: transform .25s ease, background .25s ease, color .25s ease;
  flex-shrink: 0;
}
.page-caz .round-cta svg {
  width: 18px; height: 18px;
  stroke: currentColor; fill: none;
  stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.page-caz .caz-etape:hover .round-cta { background: var(--caz-or); transform: translate(3px, -3px); }

.page-caz .caz-etape.size-l { grid-column: span 7; aspect-ratio: 7/5; }
.page-caz .caz-etape.size-m { grid-column: span 5; aspect-ratio: 5/5; }
.page-caz .caz-etape.size-s { grid-column: span 4; aspect-ratio: 4/5; }
.page-caz .caz-etape.size-w { grid-column: span 8; aspect-ratio: 8/5; }
.page-caz .caz-etape.size-x { grid-column: span 6; aspect-ratio: 6/5; }
.page-caz .caz-etape.size-y { grid-column: span 6; aspect-ratio: 6/5; }

/* Détail des étapes (rows) */
.page-caz .caz-etapes-detail {
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--caz-rule-light);
}
.page-caz .caz-etapes-detail-head {
  display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end;
  margin-bottom: 40px;
}
.page-caz .caz-etapes-detail-head h3 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(28px, 2.4vw, 38px); line-height: 1.1;
  margin: 12px 0 0;
}
.page-caz .caz-etapes-detail-head h3 em { font-style: italic; color: var(--caz-or-deep); }
.page-caz .caz-etapes-rows { border-top: 1px solid var(--caz-rule-light); }
.page-caz .caz-etape-row {
  display: grid; grid-template-columns: 80px 1fr 2fr 48px;
  gap: clamp(20px, 3vw, 48px); align-items: baseline;
  padding: 28px 0; border-bottom: 1px solid var(--caz-rule-light);
}
.page-caz .caz-etape-row .n {
  font-family: var(--sans); font-weight: 500;
  font-size: 10px; letter-spacing: .28em; color: var(--caz-or-deep);
  text-transform: uppercase; padding-top: 6px;
}
.page-caz .caz-etape-row .t {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(22px, 1.8vw, 26px); line-height: 1.2;
}
.page-caz .caz-etape-row .t em { font-style: italic; color: var(--caz-or-deep); }
.page-caz .caz-etape-row .d { font-size: 15px; line-height: 1.65; color: var(--caz-gris); margin: 0; max-width: 60ch; }
/* Multi-paragraphes dans la cellule de droite des étape-rows */
.page-caz .caz-etape-row div.d > p { margin: 0 0 14px; font-size: 15px; line-height: 1.65; color: var(--caz-gris); }
.page-caz .caz-etape-row div.d > p:last-child { margin-bottom: 0; }

/* Section Notre planning (avant le CTA final) */
.page-caz .caz-planning {
  background: var(--caz-noir);
  color: var(--caz-blanc);
  padding: clamp(80px, 10vw, 140px) 0;
  border-top: 1px solid var(--caz-rule-dark);
}
.page-caz .caz-planning-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.page-caz .caz-planning .caz-br-num { color: var(--caz-or); margin-bottom: 18px; display: inline-block; }
.page-caz .caz-planning h3 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.05; letter-spacing: -.008em;
  margin: 0 0 28px; color: var(--caz-blanc);
}
.page-caz .caz-planning h3 em { font-style: italic; color: var(--caz-or); }
.page-caz .caz-planning p {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(17px, 1.3vw, 21px);
  line-height: 1.6; color: rgba(255,255,255,.82);
  max-width: 560px; margin: 0 auto;
}
.page-caz .caz-etape-row .arr-r {
  font-family: var(--serif); font-style: italic; font-size: 24px; color: var(--caz-or-deep);
  justify-self: end; padding-top: 4px;
}

/* ─── CITATION ─── */
.page-caz .caz-citation {
  position: relative;
  padding: clamp(140px, 16vw, 220px) var(--caz-pad-x);
  overflow: hidden;
  background: var(--caz-noir); color: var(--caz-blanc);
  text-align: center;
}
.page-caz .caz-citation .photo,
.page-caz .caz-citation .cover-img { z-index: 0; opacity: .55; }
.page-caz .caz-citation::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(11,10,8,0) 0%, rgba(11,10,8,.5) 70%),
    linear-gradient(180deg, rgba(11,10,8,.6) 0%, rgba(11,10,8,.92) 100%);
}
.page-caz .citation-body { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; }
.page-caz .citation-body .mark {
  font-family: var(--serif); font-style: italic;
  font-size: 88px; line-height: .6; color: var(--caz-or);
  display: block; margin-bottom: 20px;
}
.page-caz .citation-body blockquote {
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: clamp(40px, 5.2vw, 76px); line-height: 1.12;
  margin: 0; letter-spacing: -.008em;
}
.page-caz .citation-body blockquote em { color: var(--caz-or); font-style: italic; }
.page-caz .citation-body .att {
  margin-top: 40px;
  font-family: var(--sans); font-weight: 500;
  font-size: 10.5px; letter-spacing: .32em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.page-caz .citation-body .att::before { content: "— "; color: var(--caz-or); }

/* ─── [03] PÉRIMÈTRE ─── */
.page-caz .caz-scope-head {
  display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: end;
  margin-bottom: 72px;
}
.page-caz .caz-scope-head h2 {
  text-align: center;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(44px, 5.6vw, 80px); line-height: 1.02;
  margin: 0; letter-spacing: -.008em;
}
.page-caz .caz-scope-head h2 em { font-style: italic; color: var(--caz-or-deep); }
.page-caz .caz-scope-grid {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: clamp(32px, 4vw, 64px);
}
/* Variante mono-colonne : la liste se répartit elle-même en 2 sous-colonnes
   pour équilibrer l'espace visuel sans bloc « Hors périmètre » à droite. */
.page-caz .caz-scope-grid.single { grid-template-columns: 1fr; max-width: 1100px; margin: 0 auto; }
.page-caz .caz-scope-list-2col {
  column-count: 2;
  column-gap: clamp(32px, 5vw, 80px);
}
.page-caz .caz-scope-list-2col > li { break-inside: avoid; }
.page-caz .caz-scope-col { border-top: 1px solid var(--caz-encre); padding-top: 28px; }
.page-caz .caz-scope-col .lbl {
  font-family: var(--sans); font-weight: 600;
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--caz-or-deep); margin-bottom: 28px;
}
.page-caz .caz-scope-col ul { list-style: none; padding: 0; margin: 0; }
.page-caz .caz-scope-col li {
  display: grid; grid-template-columns: 28px 1fr; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--caz-rule-light);
  font-family: var(--serif); font-size: clamp(18px, 1.5vw, 23px);
  line-height: 1.42; align-items: baseline;
}
.page-caz .caz-scope-col li::before {
  content: "+"; font-family: var(--sans); font-weight: 600; font-size: 11px; color: var(--caz-or-deep);
}
.page-caz .caz-scope-col.exclude li::before { content: "—"; color: var(--caz-gris); }
.page-caz .caz-scope-col.exclude li { color: var(--caz-gris); }
.page-caz .caz-scope-col li small {
  display: block; font-family: var(--sans);
  font-size: 13px; line-height: 1.55; color: var(--caz-gris);
  margin-top: 6px; font-style: normal;
}

/* Périmètre quand la section parent est en noir : tout le contenu passe en clair */
.page-caz .caz-sect.noir .caz-scope-head h2 { color: var(--caz-blanc); }
.page-caz .caz-sect.noir .caz-scope-head h2 em { color: var(--caz-or); }
.page-caz .caz-sect.noir .caz-scope-col { border-top-color: var(--caz-rule-dark); }
.page-caz .caz-sect.noir .caz-scope-col .lbl { color: var(--caz-or); }
.page-caz .caz-sect.noir .caz-scope-col li {
  color: var(--caz-blanc);
  border-bottom-color: var(--caz-rule-dark);
}
.page-caz .caz-sect.noir .caz-scope-col li::before { color: var(--caz-or); }
.page-caz .caz-sect.noir .caz-scope-col li small { color: var(--caz-gris-2); }

/* ─── [04] CHIFFRES ─── */
.page-caz .caz-chiffres {
  position: relative;
  background: var(--caz-noir); color: var(--caz-blanc);
  padding: clamp(120px, 14vw, 180px) 0 clamp(96px, 12vw, 140px);
  overflow: hidden;
}
.page-caz .caz-chiffres .wm-bg {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: clamp(220px, 32vw, 540px); line-height: .85;
  color: rgba(255,255,255,.025);
  letter-spacing: -.02em;
  pointer-events: none; white-space: nowrap;
}
.page-caz .caz-chiffres-head {
  display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end;
  margin-bottom: 64px;
  border-bottom: 1px solid var(--caz-rule-dark); padding-bottom: 32px;
  position: relative; z-index: 2;
}
.page-caz .caz-chiffres-head h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(44px, 5.6vw, 80px); line-height: 1.02; letter-spacing: -.012em;
  margin: 0; max-width: 18ch;
}
.page-caz .caz-chiffres-head h2 em { font-style: italic; color: var(--caz-or); }
.page-caz .caz-chiffres-head .label {
  font-family: var(--sans); font-weight: 500;
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--caz-or);
}
.page-caz .caz-chiffres-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.page-caz .caz-chiffres-grid .ch {
  padding: 56px 28px 0;
  border-right: 1px solid var(--caz-rule-dark);
  min-height: 240px; text-align: left;
}
.page-caz .caz-chiffres-grid .ch:last-child { border-right: none; }
.page-caz .caz-chiffres-grid .ch .n {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(64px, 8.8vw, 132px); line-height: .9; letter-spacing: -.022em;
}
.page-caz .caz-chiffres-grid .ch .n em { font-style: italic; color: var(--caz-or); }
.page-caz .caz-chiffres-grid .ch .lbl {
  margin-top: 24px;
  font-family: var(--sans); font-weight: 500;
  font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(255,255,255,.7); line-height: 1.6;
}

/* ─── [05] CERTIFICATIONS ─── */
.page-caz .caz-certif-head { text-align: center; margin-bottom: 80px; }
.page-caz .caz-certif-head h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(44px, 5.6vw, 76px); line-height: 1.04;
  margin: 24px 0 16px; letter-spacing: -.008em;
}
.page-caz .caz-certif-head h2 em { font-style: italic; color: var(--caz-or-deep); }
.page-caz .caz-certif-head p { color: var(--caz-gris); max-width: 56ch; margin: 0 auto; font-size: 16px; }
.page-caz .caz-certif-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--caz-rule-light);
}
.page-caz .caz-certif-grid .cert {
  padding: 36px 28px;
  border-right: 1px solid var(--caz-rule-light);
}
.page-caz .caz-certif-grid .cert:last-child { border-right: none; }
.page-caz .caz-certif-grid .cert .seal {
  width: 72px; height: 72px;
  border: 1px solid var(--caz-or-deep);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--serif); font-style: italic;
  font-size: 22px; color: var(--caz-or-deep);
  margin-bottom: 28px;
  overflow: hidden;
  background: transparent;
  transition: transform .25s ease;
}
/* Variante avec logo PNG/SVG — fond blanc + image contenue dans le cercle */
.page-caz .caz-certif-grid .cert .seal.has-image {
  padding: 6px;
  background: var(--caz-blanc);
  box-shadow: 0 4px 16px rgba(26,24,20,.08);
}
.page-caz .caz-certif-grid .cert .seal.has-image img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.page-caz .caz-certif-grid .cert:hover .seal { transform: scale(1.04); }
.page-caz .caz-certif-grid .cert h4 {
  font-family: var(--serif); font-weight: 400;
  font-size: 24px; margin: 0 0 12px;
}
.page-caz .caz-certif-grid .cert p { font-size: 14px; line-height: 1.6; color: var(--caz-gris); margin: 0; }

/* ─── [06] RÉALISATIONS ─── */
.page-caz .caz-reals-head {
  display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: end;
  margin-bottom: 56px;
}
.page-caz .caz-reals-head h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(48px, 6.4vw, 96px); line-height: .96;
  margin: 24px 0 0; letter-spacing: -.012em;
}
.page-caz .caz-reals-head h2 em { font-style: italic; color: var(--caz-or-deep); }
.page-caz .caz-reals-head .reals-lede {
  font-family: var(--serif); font-style: italic;
  font-size: 22px; color: var(--caz-gris);
  max-width: 36ch; margin: 12px 0 0;
}
.page-caz .pill {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 8px 8px 8px 22px;
  background: var(--caz-blanc); color: var(--caz-encre);
  font-family: var(--sans); font-weight: 500;
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  border-radius: 999px;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.page-caz .pill .arr {
  width: 32px; height: 32px;
  background: var(--caz-encre); color: var(--caz-blanc);
  border-radius: 999px;
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 18px; font-style: normal;
  transition: background .25s ease, transform .25s ease;
}
.page-caz .pill:hover { background: var(--caz-or); }
.page-caz .pill:hover .arr { transform: translateX(3px); }
.page-caz .pill.dark { background: var(--caz-encre); color: var(--caz-blanc); border: 1px solid var(--caz-rule-dark); }
.page-caz .pill.dark .arr { background: var(--caz-or); color: var(--caz-encre); }
.page-caz .pill.dark:hover { background: var(--caz-or); color: var(--caz-encre); }
.page-caz .pill.dark:hover .arr { background: var(--caz-encre); color: var(--caz-blanc); }
.page-caz .pill.outline {
  background: transparent; color: var(--caz-blanc);
  border: 1px solid rgba(255,255,255,.28);
  padding: 7px 7px 7px 21px;
}
.page-caz .pill.outline .arr { background: rgba(255,255,255,.12); color: var(--caz-blanc); }
.page-caz .pill.outline:hover { border-color: var(--caz-or); color: var(--caz-or); }
.page-caz .pill.outline:hover .arr { background: var(--caz-or); color: var(--caz-encre); }

.page-caz .caz-reals-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 56px); }
.page-caz .caz-real .frame {
  position: relative; aspect-ratio: 3/4; overflow: hidden;
  border: 1px solid var(--caz-rule-light); margin-bottom: 22px;
}
.page-caz .caz-real .frame .label {
  position: absolute; left: 18px; top: 18px; z-index: 2;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(247,244,236,.95); color: var(--caz-encre);
  font-family: var(--sans); font-weight: 500;
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
}
.page-caz .caz-real .frame .open {
  position: absolute; right: 18px; bottom: 18px; z-index: 2;
  width: 44px; height: 44px; border-radius: 999px;
  background: var(--caz-encre); color: var(--caz-blanc);
  display: grid; place-items: center;
  transition: transform .25s ease, background .25s ease;
}
.page-caz .caz-real .frame .open svg {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none;
  stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.page-caz .caz-real:hover .frame .open { transform: translate(3px, -3px); background: var(--caz-or); color: var(--caz-encre); }
.page-caz .caz-real .meta {
  display: flex; justify-content: space-between;
  font-family: var(--sans); font-weight: 500;
  font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--caz-gris); margin-bottom: 8px;
}
.page-caz .caz-real .meta .dot::before { content: "● "; color: var(--caz-or-deep); }
.page-caz .caz-real h4 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(24px, 1.9vw, 30px); line-height: 1.1; margin: 0;
}
.page-caz .caz-real h4 em { font-style: italic; color: var(--caz-or-deep); }

/* ─── [07] FINAL ─── */
.page-caz .caz-final {
  background: var(--caz-noir); color: var(--caz-blanc);
  padding: clamp(120px, 14vw, 180px) 0 0;
  position: relative; overflow: hidden;
}
.page-caz .caz-final-head {
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: clamp(48px, 7vw, 120px); align-items: start;
  padding-bottom: clamp(80px, 10vw, 120px);
}
.page-caz .caz-final-head .left p { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.65); max-width: 28ch; margin: 0; }
.page-caz .caz-final-head .right h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(56px, 7vw, 116px); line-height: .96; letter-spacing: -.012em;
  margin: 0 0 40px; max-width: 18ch;
}
.page-caz .caz-final-head .right h2 em { font-style: italic; color: var(--caz-or); }
.page-caz .caz-final-head .right .lede {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(18px, 1.4vw, 22px); line-height: 1.55;
  color: rgba(255,255,255,.85); max-width: 52ch; margin: 0 0 40px;
}
.page-caz .caz-final-head .actions { display: flex; gap: 16px; flex-wrap: wrap; }
.page-caz .caz-final-wordmark { position: relative; text-align: center; padding: 40px 0 0; overflow: hidden; }
.page-caz .caz-final-wordmark .wm {
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: clamp(140px, 24vw, 420px); line-height: .85;
  background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.02) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: -.02em;
  display: block; white-space: nowrap;
}

/* ─── Responsive ─── */
@media (max-width: 1100px) {
  .page-caz .caz-hero-foot { grid-template-columns: 1fr; text-align: center; gap: 24px; }
  .page-caz .caz-hero-cta-wrap { justify-self: center; }
  .page-caz .caz-hero-right { text-align: center; }
  .page-caz .caz-intro-cols { grid-template-columns: 1fr; }
  .page-caz .caz-intro-head { grid-template-columns: 1fr; }
  .page-caz .caz-process-head { grid-template-columns: 1fr; gap: 16px; }
  .page-caz .caz-process-head h2 { text-align: left; }
  .page-caz .caz-process-head .meta { text-align: left; }
  .page-caz .caz-scope-head { grid-template-columns: 1fr; gap: 16px; }
  .page-caz .caz-scope-head h2 { text-align: left; }
  .page-caz .caz-reals-head { grid-template-columns: 1fr; gap: 24px; }
  .page-caz .caz-etape.size-l,
  .page-caz .caz-etape.size-m,
  .page-caz .caz-etape.size-s,
  .page-caz .caz-etape.size-w,
  .page-caz .caz-etape.size-x,
  .page-caz .caz-etape.size-y { grid-column: span 12; aspect-ratio: 16/10; }

  /* Etape-rows = accordéons cliquables sur mobile/tablette */
  .page-caz .caz-etape-row {
    display: block;
    position: relative;
    cursor: pointer;
    padding: 22px 40px 22px 0;
    user-select: none;
  }
  .page-caz .caz-etape-row::after {
    content: "";
    position: absolute;
    right: 8px; top: 30px;
    width: 10px; height: 10px;
    border-right: 1.5px solid var(--caz-or-deep);
    border-bottom: 1.5px solid var(--caz-or-deep);
    transform: rotate(45deg);
    transition: transform .3s ease;
  }
  .page-caz .caz-etape-row.is-open::after { transform: rotate(-135deg); }
  .page-caz .caz-etape-row .n,
  .page-caz .caz-etape-row .t { display: block; }
  .page-caz .caz-etape-row .n { margin-bottom: 6px; }
  .page-caz .caz-etape-row .d,
  .page-caz .caz-etape-row div.d {
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    transition: max-height .4s ease, margin .25s ease, opacity .25s ease;
    opacity: 0;
  }
  .page-caz .caz-etape-row.is-open .d,
  .page-caz .caz-etape-row.is-open div.d {
    max-height: 1200px;
    margin-top: 14px;
    opacity: 1;
  }
  .page-caz .caz-etape-row .arr-r { display: none; }

  .page-caz .caz-scope-grid { grid-template-columns: 1fr; }
  .page-caz .caz-scope-list-2col { column-count: 1; }
  .page-caz .caz-chiffres-grid { grid-template-columns: 1fr 1fr; }
  .page-caz .caz-chiffres-grid .ch { border-bottom: 1px solid var(--caz-rule-dark); }
  .page-caz .caz-chiffres-grid .ch:nth-child(2n) { border-right: none; }
  .page-caz .caz-certif-grid { grid-template-columns: 1fr 1fr; }
  .page-caz .caz-certif-grid .cert { border-bottom: 1px solid var(--caz-rule-light); }
  .page-caz .caz-certif-grid .cert:nth-child(2n) { border-right: none; }
  .page-caz .caz-reals-grid { grid-template-columns: 1fr; }
  .page-caz .caz-final-head { grid-template-columns: 1fr; }
  .page-caz .caz-etapes-detail-head { grid-template-columns: 1fr; gap: 16px; }

  /* Masque les wordmarks décoratifs sur mobile/tablette
     (ils dépassent du cadre noir avec le font-size énorme) */
  .page-caz .caz-wordmark-band,
  .page-caz .caz-final-wordmark { display: none; }
}
@media (max-width: 640px) {
  .page-caz .caz-hero-stage { padding: 140px var(--caz-pad-x) 32px; }
  .page-caz .caz-hero-center h1 { font-size: clamp(44px, 12vw, 76px); }

  /* Chiffres : 2 colonnes centrées (au lieu de 1 colonne) */
  .page-caz .caz-chiffres-grid { grid-template-columns: 1fr 1fr; }
  .page-caz .caz-chiffres-grid .ch {
    text-align: center;
    padding: 32px 8px;
    min-height: auto;
    border-right: 1px solid var(--caz-rule-dark);
    border-bottom: 1px solid var(--caz-rule-dark);
  }
  .page-caz .caz-chiffres-grid .ch:nth-child(2n) { border-right: none; }
  .page-caz .caz-chiffres-grid .ch:nth-last-child(-n+2) { border-bottom: none; }
  .page-caz .caz-chiffres-head { text-align: center; }
  .page-caz .caz-chiffres-head h2 { margin: 0 auto; }

  /* Labels : 2 colonnes centrées (au lieu de 1 colonne) */
  .page-caz .caz-certif-grid { grid-template-columns: 1fr 1fr; }
  .page-caz .caz-certif-grid .cert {
    text-align: center;
    padding: 28px 12px;
    border-right: 1px solid var(--caz-rule-light);
    border-bottom: 1px solid var(--caz-rule-light);
  }
  .page-caz .caz-certif-grid .cert:nth-child(2n) { border-right: none; }
  .page-caz .caz-certif-grid .cert:nth-last-child(-n+2) { border-bottom: none; }
  .page-caz .caz-certif-grid .cert .seal { margin-left: auto; margin-right: auto; }

  .page-caz .caz-final-head .actions { flex-direction: column; align-items: stretch; }
  .page-caz .pill, .page-caz .pill.outline { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .page-caz .caz-etape { transition: none; }
  .page-caz .caz-etape:hover { transform: none; }
  .page-caz .round-cta { transition: none; }
}


/* ============================================================
   SOMMAIRE FLOTTANT (page TOC) — glass design
   Desktop : pill verticale à droite, dots qui s'étendent au hover
   Mobile  : bulle compacte en bas-gauche → drawer glass au clic
   ============================================================ */

.page-toc {
  position: fixed;
  right: clamp(14px, 1.8vw, 28px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  font-family: var(--sans);
}

/* Le bouton trigger est caché en desktop (la liste est toujours visible) */
.page-toc-trigger { display: none; }

/* Liste — minimaliste, sans encadré */
.page-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: transparent;
  border: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.page-toc-list li { margin: 0; padding: 0; }

/* Chaque lien = zone de 200px de large alignée à droite.
   Le dot est visible à droite, le label invisible occupe l'espace à gauche.
   → hover sur n'importe quel point de la ligne fait apparaître le label. */
.page-toc-list a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 200px;
  padding: 8px 20px 8px 0; /* place réservée à droite pour le dot */
  color: rgba(255,255,255,.5);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
  text-align: right;
  transition: color .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.page-toc-list a .label {
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .3s ease, transform .3s ease;
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
/* Dot ancré au bord droit en absolu : la position X reste identique
   quel que soit le label, donc tous les dots s'alignent verticalement. */
.page-toc-list a .dot {
  position: absolute;
  right: 0;
  top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  transform: translateY(-50%);
  transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}

/* Hover sur toute la zone (200px) → label apparaît */
.page-toc-list a:hover { color: var(--blanc); }
.page-toc-list a:hover .label { opacity: 1; transform: translateX(0); }
.page-toc-list a:hover .dot   { background: var(--blanc); }

/* Section active : dot doré + label visible en permanence */
.page-toc-list a.is-active { color: var(--or); }
.page-toc-list a.is-active .label { opacity: 1; transform: translateX(0); }
.page-toc-list a.is-active .dot {
  background: var(--or);
  box-shadow: 0 0 10px rgba(208,167,66,.65);
  transform: translateY(-50%) scale(1.25);
}

/* Focus clavier (accessibilité) */
.page-toc-list a:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 3px;
}
.page-toc-list a:focus-visible .label { opacity: 1; transform: translateX(0); }

/* ── Variante .is-on-light : adaptation aux sections sur fond clair ── */
/* Déclenchée par JS quand la section active a un fond papier/crème.
   Inverse les contrastes : dots et texte foncés, accent or profond. */
.page-toc.is-on-light .page-toc-list a {
  color: rgba(26,24,20,.45);
}
.page-toc.is-on-light .page-toc-list a .dot {
  background: rgba(26,24,20,.40);
}
.page-toc.is-on-light .page-toc-list a .label {
  text-shadow: 0 1px 6px rgba(255,255,255,.55);
}
.page-toc.is-on-light .page-toc-list a:hover { color: #1a1814; }
.page-toc.is-on-light .page-toc-list a:hover .dot { background: #1a1814; }

.page-toc.is-on-light .page-toc-list a.is-active { color: #8b6e30; }
.page-toc.is-on-light .page-toc-list a.is-active .dot {
  background: #8b6e30;
  box-shadow: 0 0 10px rgba(139,110,48,.55);
}

/* ─── Mobile / Tablette ─── */
/* Même design minimaliste que desktop : dots à droite, sans encadré,
   labels à gauche du dot.
   ✗ Pas de drawer glass, pas de trigger bulle
   ✓ Le label apparaît pour la section ACTIVE (et pendant le tap)
   ✓ Le mode .is-on-light continue d'adapter les couleurs au fond */
@media (max-width: 1100px) {
  /* Position : à droite, centré verticalement (identique au desktop) */
  .page-toc {
    right: clamp(12px, 3vw, 20px);
    left: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }

  /* Trigger bubble entièrement caché — la liste est toujours visible */
  .page-toc-trigger { display: none; }

  /* Liste en flux normal, sans encadré ni glass */
  .page-toc-list {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: transparent;
    border: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    border-radius: 0;
  }

  /* Chaque lien : tap target rond autour du dot (44×44 accessible WCAG).
     Le label flotte HORS du lien (position absolute) → ne bloque pas
     l'interaction avec le contenu derrière. */
  .page-toc-list a {
    width: auto;
    padding: 10px;
    overflow: visible;
    position: relative;
    border-radius: 50%;
    justify-content: center;
    gap: 0;
  }
  .page-toc-list a .label {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    transition: opacity .25s ease, transform .25s ease;
  }

  /* Neutralise les effets :hover du desktop (qui restent collés après tap iOS) */
  .page-toc-list a:hover                       { color: rgba(255,255,255,.5); }
  .page-toc-list a:hover .label                { opacity: 0; transform: translateY(-50%) translateX(6px); }
  .page-toc-list a:hover .dot                  { background: rgba(255,255,255,.45); }
  .page-toc.is-on-light .page-toc-list a:hover { color: rgba(26,24,20,.45); }
  .page-toc.is-on-light .page-toc-list a:hover .dot { background: rgba(26,24,20,.40); }

  /* Sur mobile, le label de l'item actif est caché par défaut (n'écrase
     pas le contenu) — il n'apparaît que brièvement quand la section change
     ou au tap. Géré via la classe .show-active-label posée par le JS. */
  .page-toc-list a.is-active .label {
    opacity: 0;
    transform: translateY(-50%) translateX(6px);
  }
  /* Affichage temporaire (~4s) quand la section vient de changer */
  .page-toc.show-active-label .page-toc-list a.is-active .label {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
  /* Feedback au tap (pressed state) : label visible immédiatement */
  .page-toc-list a:active .label {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }

  /* ─── Scrubber tactile : preview sur l'item survolé pendant le geste ─── */
  /* Quand le doigt est posé sur le menu et glisse, le <li> sous le doigt
     reçoit .is-previewing → on affiche son label et on accentue son dot. */
  .page-toc-list li.is-previewing a {
    color: var(--blanc);
  }
  .page-toc-list li.is-previewing a .label {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
  .page-toc-list li.is-previewing a .dot {
    background: var(--or);
    box-shadow: 0 0 12px rgba(208,167,66,.6);
    transform: scale(1.35);
  }
  /* Thème clair : même preview mais en encre */
  .page-toc.is-on-light .page-toc-list li.is-previewing a {
    color: #1a1814;
  }
  .page-toc.is-on-light .page-toc-list li.is-previewing a .dot {
    background: var(--or);
    box-shadow: 0 0 10px rgba(208,167,66,.5);
  }

  /* Pendant le scrub : on grossit légèrement la zone de tap pour faciliter
     le glissé, et on désactive les transitions sur le dot pour un suivi
     instantané du doigt. */
  .page-toc.is-scrubbing .page-toc-list {
    /* Évite que le navigateur essaie d'intercepter le geste vertical */
    touch-action: none;
  }
  .page-toc.is-scrubbing .page-toc-list a {
    transition: color .12s ease;
  }
  .page-toc.is-scrubbing .page-toc-list a .dot {
    transition: background .12s ease, transform .12s ease, box-shadow .12s ease;
  }
}

/* Animations réduites */
@media (prefers-reduced-motion: reduce) {
  .page-toc-list a,
  .page-toc-list a .label,
  .page-toc-list a .dot,
  .page-toc-trigger,
  .page-toc-trigger svg,
  .page-toc-list { transition: none; }
}


/* ============================================================
   PAGE — CHARPENTE, COUVERTURE & CONSTRUCTION BOIS
   Tout est scopé sous .page-charpente
   ============================================================ */

.page-charpente {
  --ch-noir: var(--noir);
  --ch-or: var(--or);
  --ch-or-soft: #d8b977;
  --ch-or-deep: #8b6e30;
  --ch-blanc: var(--blanc);
  --ch-creme: #f3ede1;
  --ch-papier: #f7f4ec;
  --ch-encre: #1a1814;
  --ch-gris: #6e6a62;
  --ch-gris-2: #9b958a;
  --ch-rule-dark: rgba(255,255,255,.08);
  --ch-rule-light: rgba(26,24,20,.12);
  --ch-pad-x: clamp(24px, 5vw, 80px);
  --ch-max-w: 1440px;

  background: var(--ch-papier);
  color: var(--ch-encre);
  font-size: 15.5px;
  line-height: 1.62;
}
.page-charpente a { color: inherit; text-decoration: none; }
.page-charpente .ch-wrap { max-width: var(--ch-max-w); margin: 0 auto; padding: 0 var(--ch-pad-x); }

/* Placeholders photo */
.page-charpente .photo {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 70% 35%, rgba(201,163,90,.12) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(255,255,255,.04) 0%, transparent 50%),
    linear-gradient(155deg, #1c1c22 0%, #0a0a0c 55%, #050508 100%);
}
.page-charpente .photo.cool   { background: radial-gradient(ellipse at 35% 25%, rgba(255,255,255,.06) 0%, transparent 60%), radial-gradient(ellipse at 80% 70%, rgba(201,163,90,.08) 0%, transparent 50%), linear-gradient(170deg, #1a1d22 0%, #0c0e12 55%, #050608 100%); }
.page-charpente .photo.warm   { background: radial-gradient(ellipse at 70% 35%, rgba(201,163,90,.20) 0%, transparent 55%), radial-gradient(ellipse at 20% 80%, rgba(201,163,90,.06) 0%, transparent 50%), linear-gradient(160deg, #221c14 0%, #110d08 55%, #060403 100%); }
.page-charpente .photo.forest { background: radial-gradient(ellipse at 30% 40%, rgba(140,170,140,.07) 0%, transparent 60%), radial-gradient(ellipse at 80% 70%, rgba(201,163,90,.08) 0%, transparent 50%), linear-gradient(180deg, #0c1410 0%, #08100a 50%, #020403 100%); }

/* Helpers communs */
.page-charpente .ch-br-num {
  font-family: var(--sans); font-weight: 600;
  font-size: 10px; letter-spacing: .24em; color: var(--ch-or-deep);
  text-transform: uppercase;
}
.page-charpente .ch-sect-tag {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--sans); font-weight: 600;
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ch-or-deep);
}
.page-charpente .ch-sect-tag::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* Pill CTA */
.page-charpente .ch-pill {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 8px 8px 8px 22px;
  background: var(--ch-blanc); color: var(--ch-encre);
  font-family: var(--sans); font-weight: 500;
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  border-radius: 999px;
  transition: background .25s ease, color .25s ease;
}
.page-charpente .ch-pill .arr {
  width: 32px; height: 32px;
  background: var(--ch-encre); color: var(--ch-blanc);
  border-radius: 999px;
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 18px;
  transition: background .25s ease, transform .25s ease;
}
.page-charpente .ch-pill:hover { background: var(--ch-or); color: var(--ch-encre); }
.page-charpente .ch-pill:hover .arr { background: var(--ch-encre); transform: translateX(3px); }
.page-charpente .ch-pill.ghost { background: transparent; color: var(--ch-blanc); border: 1px solid rgba(255,255,255,.25); }
.page-charpente .ch-pill.ghost .arr { background: rgba(255,255,255,.12); color: var(--ch-blanc); }
.page-charpente .ch-pill.ghost:hover { border-color: var(--ch-or); color: var(--ch-or); }
.page-charpente .ch-pill.ghost:hover .arr { background: var(--ch-or); color: var(--ch-encre); }

/* Pill glass spécifique au hero (« Parler d'un projet ») — translucide sur photo */
.page-charpente .ch-hero .ch-pill {
  background: rgba(255,255,255,.10);
  color: var(--ch-blanc);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 12px 32px rgba(0,0,0,.25);
  padding: 10px 10px 10px 24px;
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s ease, color .25s ease;
}
.page-charpente .ch-hero .ch-pill .arr {
  background: rgba(255,255,255,.18);
  color: var(--ch-blanc);
  border: 1px solid rgba(255,255,255,.25);
  width: 36px; height: 36px;
  transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.page-charpente .ch-hero .ch-pill:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(208,167,66,.55);
  color: var(--ch-blanc);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 16px 40px rgba(208,167,66,.22);
}
.page-charpente .ch-hero .ch-pill:hover .arr {
  background: var(--ch-or);
  border-color: var(--ch-or);
  color: var(--ch-encre);
  transform: translateX(4px);
}
/* Fallback sans backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .page-charpente .ch-hero .ch-pill { background: rgba(11,10,8,.55); }
}

/* ─── HERO ─── */
.page-charpente .ch-hero {
  position: relative; min-height: 100vh; overflow: hidden;
  background: var(--ch-noir);
}
.page-charpente .ch-hero .photo, .page-charpente .ch-hero .cover-img { z-index: 0; }
/* Couche 1 — filtre noir uniforme (identique aux autres heros du site) */
.page-charpente .ch-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgba(2,2,3,.42);
  pointer-events: none;
}
/* Couche 2 — dégradé vertical pour la lisibilité (haut, milieu clair, bas sombre) */
.page-charpente .ch-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(2,2,3,.55) 0%, rgba(2,2,3,.25) 35%,
    rgba(2,2,3,.3) 60%, rgba(2,2,3,.75) 100%);
  pointer-events: none;
}
.page-charpente .ch-hero-content {
  position: relative; z-index: 2;
  padding: 200px var(--ch-pad-x) 80px;
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.page-charpente .ch-crumb {
  display: flex; gap: 12px;
  font-family: var(--sans); font-weight: 500;
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(255,255,255,.55); margin-bottom: 32px;
}
.page-charpente .ch-crumb a { color: rgba(255,255,255,.7); transition: color .2s; }
.page-charpente .ch-crumb a:hover { color: var(--ch-or); }
.page-charpente .ch-crumb .here { color: var(--ch-or); }
.page-charpente .ch-hero h1 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(56px, 8.4vw, 144px);
  line-height: .94; letter-spacing: -.014em;
  margin: 0; color: var(--ch-blanc); max-width: 18ch;
}
.page-charpente .ch-hero h1 em { font-style: italic; color: var(--ch-or); }
.page-charpente .ch-hero-bottom {
  margin-top: 56px;
  display: grid; grid-template-columns: 1.3fr 1fr;
  gap: 48px; align-items: end;
}
.page-charpente .ch-hero-sub {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(18px, 1.4vw, 22px); line-height: 1.55;
  color: rgba(255,255,255,.86); max-width: 56ch; margin: 0;
}
.page-charpente .ch-hero-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 18px; }
.page-charpente .ch-hero-geo {
  font-family: var(--sans); font-weight: 500;
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(255,255,255,.55); text-align: right;
}
.page-charpente .ch-hero-geo .ll { color: var(--ch-or); }

/* ─── Sections génériques ─── */
.page-charpente .ch-sect { padding: clamp(96px, 12vw, 160px) 0; position: relative; }
.page-charpente .ch-sect.dark { background: var(--ch-noir); color: var(--ch-blanc); }
.page-charpente .ch-sect.dark .ch-br-num { color: var(--ch-or); }
.page-charpente .ch-sect.creme { background: var(--ch-creme); }

/* ─── INTRO [01] ─── */
.page-charpente .ch-intro-grid {
  display: grid; grid-template-columns: 1fr 2fr;
  gap: clamp(48px, 7vw, 120px); align-items: start;
}
.page-charpente .ch-intro-grid h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(36px, 4vw, 56px); line-height: 1.05;
  margin: 28px 0 0; letter-spacing: -.008em; max-width: 18ch;
}
.page-charpente .ch-intro-grid h2 em { font-style: italic; color: var(--ch-or-deep); }
.page-charpente .ch-intro-grid .body p {
  font-family: var(--serif); font-size: clamp(22px, 2vw, 30px);
  line-height: 1.42; font-weight: 300; margin: 0 0 22px;
  max-width: 30ch;
}
.page-charpente .ch-intro-grid .body p em { font-style: italic; color: var(--ch-or-deep); }
.page-charpente .ch-intro-grid .body .small {
  font-family: var(--sans); font-size: 15.5px; line-height: 1.7;
  color: var(--ch-gris); max-width: 60ch; margin: 32px 0 0;
}
.page-charpente .ch-sect.dark .ch-intro-grid h2 em,
.page-charpente .ch-sect.dark .ch-intro-grid .body p em { color: var(--ch-or); }
.page-charpente .ch-sect.dark .ch-intro-grid .body p { color: var(--ch-blanc); }
.page-charpente .ch-sect.dark .ch-intro-grid .body .small { color: rgba(255,255,255,.6); }

/* ─── SERVICES [02] ─── */
.page-charpente .ch-services-head {
  display: grid; grid-template-columns: 1fr auto;
  gap: 48px; align-items: end; margin-bottom: 80px;
}
.page-charpente .ch-services-head h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(48px, 6.4vw, 96px); line-height: .96; letter-spacing: -.012em;
  margin: 24px 0 0; max-width: 16ch;
}
.page-charpente .ch-services-head h2 em { font-style: italic; color: var(--ch-or-deep); }
.page-charpente .ch-services-head .meta {
  font-family: var(--sans); font-weight: 500;
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--ch-gris); text-align: right;
}
.page-charpente .ch-services-head .meta strong {
  color: var(--ch-or-deep); font-weight: 400; font-size: 26px;
  font-family: var(--serif); letter-spacing: 0; display: block; font-style: italic;
}
.page-charpente .ch-sect.dark .ch-services-head h2 em { color: var(--ch-or); }
.page-charpente .ch-sect.dark .ch-services-head .meta { color: rgba(255,255,255,.55); }
.page-charpente .ch-sect.dark .ch-services-head .meta strong { color: var(--ch-or); }

.page-charpente .ch-svc {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 7vw, 120px); align-items: center;
  padding: clamp(56px, 8vw, 120px) 0;
  border-top: 1px solid var(--ch-rule-light);
}
.page-charpente .ch-svc:last-of-type { border-bottom: 1px solid var(--ch-rule-light); }
.page-charpente .ch-svc.reverse .svc-visual { order: -1; }
.page-charpente .svc-text .ch-br-num { display: inline-block; margin-bottom: 18px; }
.page-charpente .svc-text h3 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(34px, 4.2vw, 58px); line-height: 1.02; letter-spacing: -.008em;
  margin: 0 0 24px; max-width: 16ch;
}
.page-charpente .svc-text h3 em { font-style: italic; color: var(--ch-or-deep); }
.page-charpente .svc-text p {
  font-size: 16px; line-height: 1.7; color: var(--ch-encre);
  margin: 0 0 16px; max-width: 56ch;
}
.page-charpente .svc-text .lede {
  font-family: var(--serif); font-style: italic;
  font-size: 21px; line-height: 1.5; color: var(--ch-gris);
  margin-bottom: 24px; max-width: 44ch;
}
.page-charpente .svc-text ul.tags {
  list-style: none; padding: 0; margin: 24px 0 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.page-charpente .svc-text ul.tags li {
  font-family: var(--sans); font-weight: 500;
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ch-or-deep); padding: 7px 12px;
  border: 1px solid rgba(139,110,48,.3); border-radius: 999px;
}
.page-charpente .ch-sect.dark .ch-svc { border-top-color: var(--ch-rule-dark); }
.page-charpente .ch-sect.dark .ch-svc:last-of-type { border-bottom-color: var(--ch-rule-dark); }
.page-charpente .ch-sect.dark .svc-text h3 em { color: var(--ch-or); }
.page-charpente .ch-sect.dark .svc-text p { color: rgba(255,255,255,.82); }
.page-charpente .ch-sect.dark .svc-text .lede { color: rgba(255,255,255,.55); }
.page-charpente .ch-sect.dark .svc-text ul.tags li { color: var(--ch-or); border-color: rgba(201,163,90,.32); }

/* Visual collage */
.page-charpente .svc-visual { position: relative; min-height: 460px; }
.page-charpente .svc-visual .frame {
  position: absolute;
  border: 1px solid var(--ch-rule-light);
  overflow: hidden;
}
.page-charpente .svc-visual .frame .photo,
.page-charpente .svc-visual .frame .cover-img { position: absolute; inset: 0; }
.page-charpente .ch-sect.dark .svc-visual .frame { border-color: var(--ch-rule-dark); }
.page-charpente .svc-visual .frame .badge {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  font-family: var(--sans); font-weight: 500;
  font-size: 9px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--ch-or);
  padding: 6px 10px;
  border: 1px solid rgba(201,163,90,.3);
  background: rgba(12,11,9,.55);
  backdrop-filter: blur(4px);
}
.page-charpente .svc-visual.var-a .f1 { top: 0; left: 0; width: 72%; aspect-ratio: 4/3; }
.page-charpente .svc-visual.var-a .f2 { bottom: 0; right: 0; width: 42%; aspect-ratio: 3/4; }
.page-charpente .svc-visual.var-b .f1 { top: 0; right: 0; width: 78%; aspect-ratio: 5/4; }
.page-charpente .svc-visual.var-b .f2 { bottom: 0; left: 0; width: 38%; aspect-ratio: 1/1; }
.page-charpente .svc-visual.var-c .f1 { top: 0; left: 0; width: 56%; aspect-ratio: 4/5; }
.page-charpente .svc-visual.var-c .f2 { top: 12%; right: 0; width: 48%; aspect-ratio: 5/4; }
.page-charpente .svc-visual.var-c .f3 { bottom: 0; left: 22%; width: 50%; aspect-ratio: 3/2; z-index: 2; }

/* Pull-quote */
.page-charpente .svc-pull {
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: clamp(22px, 2vw, 28px); line-height: 1.3;
  color: var(--ch-encre); margin: 32px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--ch-or-deep);
  max-width: 38ch; position: relative;
}
.page-charpente .svc-pull::before {
  content: ""; position: absolute; top: -1px; left: 0;
  width: 56px; height: 1px; background: var(--ch-or);
}
.page-charpente .svc-pull em { font-style: italic; color: var(--ch-or-deep); }
.page-charpente .ch-sect.dark .svc-pull { color: var(--ch-blanc); border-top-color: rgba(201,163,90,.45); }
.page-charpente .ch-sect.dark .svc-pull::before { background: var(--ch-or); }
.page-charpente .ch-sect.dark .svc-pull em { color: var(--ch-or); }

/* Matériaux */
.page-charpente .ch-materials {
  margin-top: clamp(72px, 9vw, 120px);
  padding-top: clamp(56px, 7vw, 96px);
  border-top: 1px solid var(--ch-encre);
}
.page-charpente .ch-sect.dark .ch-materials { border-top-color: rgba(255,255,255,.4); }
.page-charpente .ch-materials-head {
  display: grid; grid-template-columns: 1fr 2fr;
  gap: clamp(32px, 5vw, 96px); align-items: end;
  margin-bottom: 56px;
}
.page-charpente .ch-materials-head h4 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(32px, 3.8vw, 52px); line-height: 1.05;
  margin: 0; letter-spacing: -.008em; max-width: 22ch;
}
.page-charpente .ch-materials-head h4 em { font-style: italic; color: var(--ch-or-deep); }
.page-charpente .ch-sect.dark .ch-materials-head h4 em { color: var(--ch-or); }
.page-charpente .ch-materials-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid var(--ch-rule-light);
  border-bottom: 1px solid var(--ch-rule-light);
}
.page-charpente .ch-sect.dark .ch-materials-grid {
  border-top-color: var(--ch-rule-dark); border-bottom-color: var(--ch-rule-dark);
}
.page-charpente .ch-mat {
  padding: 32px 24px 36px;
  border-right: 1px solid var(--ch-rule-light);
}
.page-charpente .ch-sect.dark .ch-mat { border-right-color: var(--ch-rule-dark); }
.page-charpente .ch-mat:last-child { border-right: none; }
.page-charpente .ch-mat .mat-num {
  font-family: var(--sans); font-weight: 500;
  font-size: 10px; letter-spacing: .28em;
  color: var(--ch-or-deep); margin-bottom: 20px;
}
.page-charpente .ch-sect.dark .ch-mat .mat-num { color: var(--ch-or); }
.page-charpente .ch-mat h5 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(22px, 1.9vw, 28px); line-height: 1.1;
  margin: 0 0 14px; color: var(--ch-encre);
}
.page-charpente .ch-sect.dark .ch-mat h5 { color: var(--ch-blanc); }
.page-charpente .ch-mat p { font-size: 13.5px; line-height: 1.6; color: var(--ch-gris); margin: 0; }
.page-charpente .ch-sect.dark .ch-mat p { color: rgba(255,255,255,.55); }
.page-charpente .ch-materials-foot {
  margin: 32px 0 0;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(17px, 1.4vw, 21px); line-height: 1.5;
  color: var(--ch-encre); max-width: 64ch;
}
.page-charpente .ch-sect.dark .ch-materials-foot { color: rgba(255,255,255,.82); }

/* ─── CITATION ─── */
.page-charpente .ch-citation {
  position: relative;
  padding: clamp(120px, 14vw, 200px) var(--ch-pad-x);
  overflow: hidden;
  background: var(--ch-noir); color: var(--ch-blanc);
  text-align: center;
}
.page-charpente .ch-citation .photo,
.page-charpente .ch-citation .cover-img { z-index: 0; opacity: 1; object-position: center top; }
.page-charpente .ch-citation::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(12,11,9,.35) 0%, rgba(12,11,9,.55) 60%, rgba(12,11,9,.72) 100%);
}
.page-charpente .citation-body { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; }
.page-charpente .citation-body .mark {
  font-family: var(--serif); font-style: italic;
  font-size: 88px; line-height: .6; color: var(--ch-or);
  display: block; margin-bottom: 20px;
}
.page-charpente .citation-body blockquote {
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: clamp(38px, 5vw, 72px); line-height: 1.12;
  margin: 0; letter-spacing: -.008em; color: var(--ch-blanc);
}
.page-charpente .citation-body blockquote em { font-style: italic; color: var(--ch-or); }
.page-charpente .citation-body .att {
  margin-top: 40px;
  font-family: var(--sans); font-weight: 500;
  font-size: 10.5px; letter-spacing: .32em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.page-charpente .citation-body .att::before { content: "— "; color: var(--ch-or); }

/* ─── APPROCHE [03] ─── */
.page-charpente .ch-approach-grid {
  display: grid; grid-template-columns: 1fr 1.6fr;
  gap: clamp(48px, 7vw, 120px); align-items: start;
}
.page-charpente .ch-approach-grid h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(40px, 5vw, 68px); line-height: 1.04;
  margin: 24px 0 0; letter-spacing: -.008em; max-width: 14ch;
}
.page-charpente .ch-approach-grid h2 em { font-style: italic; color: var(--ch-or-deep); }
.page-charpente .ch-sect.dark .ch-approach-grid h2 em { color: var(--ch-or); }
.page-charpente .ch-approach-grid .body p {
  font-size: 17px; line-height: 1.72;
  margin: 0 0 22px; max-width: 60ch; color: var(--ch-encre);
}
.page-charpente .ch-approach-grid .body p.lede {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(22px, 1.7vw, 26px); line-height: 1.45;
  color: var(--ch-or-deep); max-width: 40ch; margin-bottom: 32px;
}
.page-charpente .ch-approach-grid .body p strong {
  color: var(--ch-encre); font-weight: 500;
  background: linear-gradient(transparent 65%, rgba(201,163,90,.25) 65%);
}
.page-charpente .ch-sect.dark .ch-approach-grid .body p { color: rgba(255,255,255,.86); }
.page-charpente .ch-sect.dark .ch-approach-grid .body p.lede { color: var(--ch-or); }
.page-charpente .ch-sect.dark .ch-approach-grid .body p strong {
  color: var(--ch-blanc); background: linear-gradient(transparent 65%, rgba(201,163,90,.4) 65%);
}

/* ─── PÉRIMÈTRE [04] ─── */
.page-charpente .ch-scope-head {
  display: grid; grid-template-columns: 1fr auto;
  gap: 48px; align-items: end; margin-bottom: 72px;
}
.page-charpente .ch-scope-head h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(42px, 5.2vw, 72px); line-height: 1.02;
  margin: 24px 0 0; letter-spacing: -.008em; max-width: 16ch;
}
.page-charpente .ch-scope-head h2 em { font-style: italic; color: var(--ch-or-deep); }
.page-charpente .ch-scope-meta {
  text-align: right;
  font-family: var(--sans); font-weight: 500;
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--ch-gris);
}
.page-charpente .ch-scope-grid {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: clamp(32px, 4vw, 64px);
}
.page-charpente .ch-scope-col { border-top: 1px solid var(--ch-encre); padding-top: 28px; }
.page-charpente .ch-scope-col .label {
  font-family: var(--sans); font-weight: 600;
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ch-or-deep); margin-bottom: 28px;
}
.page-charpente .ch-scope-col ul { list-style: none; padding: 0; margin: 0; }
.page-charpente .ch-scope-col li {
  display: grid; grid-template-columns: 28px 1fr;
  gap: 16px; padding: 16px 0;
  border-bottom: 1px solid var(--ch-rule-light);
  font-family: var(--serif); font-size: clamp(18px, 1.5vw, 23px);
  line-height: 1.42; align-items: baseline;
}
.page-charpente .ch-scope-col li::before {
  content: "+"; font-family: var(--sans); font-weight: 600; font-size: 11px;
  color: var(--ch-or-deep); letter-spacing: 0;
}
.page-charpente .ch-scope-col.exclude li::before { content: "—"; color: var(--ch-gris); }
.page-charpente .ch-scope-col.exclude li { color: var(--ch-gris); }

/* ─── ÉCHELLES [05] — bandeau dark ─── */
.page-charpente .ch-echelles {
  background: var(--ch-noir); color: var(--ch-blanc);
  padding: clamp(110px, 13vw, 160px) 0;
  position: relative; overflow: hidden;
}
.page-charpente .ch-echelles .ch-sect-tag { color: var(--ch-or); }
.page-charpente .ch-ech-grid {
  display: grid; grid-template-columns: 1fr 1.6fr;
  gap: clamp(48px, 7vw, 120px); align-items: start; margin-top: 56px;
}
.page-charpente .ch-ech-grid h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(40px, 5.2vw, 72px); line-height: 1.02;
  margin: 0; letter-spacing: -.012em;
  color: var(--ch-blanc); max-width: 14ch;
}
.page-charpente .ch-ech-grid h2 em { font-style: italic; color: var(--ch-or); }
.page-charpente .ch-ech-grid .right p {
  font-size: 17px; line-height: 1.72;
  color: rgba(255,255,255,.82); max-width: 60ch; margin: 0 0 32px;
}
.page-charpente .ch-ech-range {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 32px;
  margin-top: 48px; padding: 32px 0;
  border-top: 1px solid var(--ch-rule-dark);
  border-bottom: 1px solid var(--ch-rule-dark);
}
.page-charpente .ch-ech-range .end {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(24px, 2.2vw, 34px); line-height: 1.15;
}
.page-charpente .ch-ech-range .end small {
  display: block; font-family: var(--sans); font-weight: 500;
  font-style: normal; font-size: 10px; letter-spacing: .28em;
  text-transform: uppercase; color: var(--ch-or); margin-bottom: 8px;
}
.page-charpente .ch-ech-range .end.right-end { text-align: right; }
.page-charpente .ch-ech-range .bar {
  width: clamp(80px, 14vw, 220px); height: 1px;
  background: linear-gradient(90deg, var(--ch-or), rgba(201,163,90,.15));
  position: relative;
}
.page-charpente .ch-ech-range .bar::before,
.page-charpente .ch-ech-range .bar::after {
  content: ""; position: absolute; top: 50%;
  width: 7px; height: 7px; background: var(--ch-or);
  border-radius: 50%; transform: translateY(-50%);
}
.page-charpente .ch-ech-range .bar::before { left: -3px; }
.page-charpente .ch-ech-range .bar::after { right: -3px; opacity: .35; }

/* ─── RÉALISATIONS [06] ─── */
.page-charpente .ch-reals-head {
  display: grid; grid-template-columns: 1fr auto;
  gap: 48px; align-items: end; margin-bottom: 56px;
}
.page-charpente .ch-reals-head h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(48px, 6vw, 96px); line-height: .96;
  margin: 24px 0 0; letter-spacing: -.012em;
}
.page-charpente .ch-reals-head h2 em { font-style: italic; color: var(--ch-or-deep); }
.page-charpente .ch-sect.dark .ch-reals-head h2 em { color: var(--ch-or); }
.page-charpente .ch-reals-head .intro {
  font-family: var(--serif); font-style: italic;
  font-size: 22px; color: var(--ch-gris); max-width: 36ch; margin: 12px 0 0;
}
.page-charpente .ch-sect.dark .ch-reals-head .intro { color: rgba(255,255,255,.6); }

.page-charpente .ch-reals-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
.page-charpente .ch-real {
  display: block; transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.page-charpente .ch-real:hover { transform: translateY(-4px); }
.page-charpente .ch-real .frame {
  position: relative; aspect-ratio: 4/5; overflow: hidden;
  border: 1px solid var(--ch-rule-light); margin-bottom: 18px;
}
.page-charpente .ch-sect.dark .ch-real .frame { border-color: var(--ch-rule-dark); }
.page-charpente .ch-real .meta {
  display: flex; justify-content: space-between;
  font-family: var(--sans); font-weight: 500;
  font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--ch-gris); margin-bottom: 8px;
}
.page-charpente .ch-sect.dark .ch-real .meta { color: rgba(255,255,255,.5); }
.page-charpente .ch-real .meta .dot::before { content: "● "; color: var(--ch-or-deep); }
.page-charpente .ch-sect.dark .ch-real .meta .dot::before { color: var(--ch-or); }
.page-charpente .ch-real h4 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(24px, 1.9vw, 30px); line-height: 1.1; margin: 0;
}
.page-charpente .ch-real h4 em { font-style: italic; color: var(--ch-or-deep); }
.page-charpente .ch-sect.dark .ch-real h4 { color: var(--ch-blanc); }
.page-charpente .ch-sect.dark .ch-real h4 em { color: var(--ch-or); }

/* ─── CTA FINAL [07] ─── */
.page-charpente .ch-final {
  background: var(--ch-noir); color: var(--ch-blanc);
  padding: clamp(120px, 14vw, 180px) 0 80px;
  position: relative; overflow: hidden;
}
.page-charpente .ch-final-head {
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: clamp(48px, 7vw, 120px); align-items: start;
  padding-bottom: clamp(96px, 12vw, 140px);
}
.page-charpente .ch-final-head .left p {
  font-size: 14px; line-height: 1.7;
  color: rgba(255,255,255,.65); max-width: 28ch; margin: 0;
}
.page-charpente .ch-final-head .right h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(56px, 7vw, 116px); line-height: .96;
  letter-spacing: -.012em; margin: 0 0 40px; max-width: 18ch;
}
.page-charpente .ch-final-head .right h2 em { font-style: italic; color: var(--ch-or); }
.page-charpente .ch-final-head .right .lede {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(18px, 1.4vw, 22px); line-height: 1.55;
  color: rgba(255,255,255,.85); max-width: 56ch; margin: 0 0 40px;
}
.page-charpente .ch-final-head .actions { display: flex; gap: 16px; flex-wrap: wrap; }

.page-charpente .ch-wordmark {
  position: relative; text-align: center;
  padding: 60px 0 0; overflow: hidden;
}
.page-charpente .ch-wordmark span {
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: clamp(120px, 22vw, 380px); line-height: .85;
  background: linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.02) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: -.02em;
  display: block; white-space: nowrap;
}

/* ─── Responsive ─── */
@media (max-width: 1100px) {
  .page-charpente .ch-hero-bottom { grid-template-columns: 1fr; }
  .page-charpente .ch-hero-actions { align-items: flex-start; }
  .page-charpente .ch-hero-geo { text-align: left; }
  .page-charpente .ch-intro-grid,
  .page-charpente .ch-services-head,
  .page-charpente .ch-scope-head,
  .page-charpente .ch-reals-head,
  .page-charpente .ch-final-head,
  .page-charpente .ch-approach-grid,
  .page-charpente .ch-ech-grid,
  .page-charpente .ch-materials-head { grid-template-columns: 1fr; gap: 24px; }
  .page-charpente .ch-svc,
  .page-charpente .ch-svc.reverse { grid-template-columns: 1fr; }
  .page-charpente .ch-svc.reverse .svc-visual { order: 0; }
  .page-charpente .svc-visual { min-height: 360px; }
  .page-charpente .ch-scope-grid { grid-template-columns: 1fr; }
  .page-charpente .ch-reals-grid { grid-template-columns: 1fr; }
  .page-charpente .ch-materials-grid { grid-template-columns: 1fr 1fr; }
  .page-charpente .ch-mat { border-bottom: 1px solid var(--ch-rule-light); }
  .page-charpente .ch-mat:nth-child(2n) { border-right: none; }
  .page-charpente .ch-mat:last-child { border-bottom: none; }
  .page-charpente .ch-ech-range { grid-template-columns: 1fr; gap: 16px; }
  .page-charpente .ch-ech-range .end.right-end { text-align: left; }
  .page-charpente .ch-ech-range .bar {
    width: 1px; height: 60px;
    background: linear-gradient(180deg, var(--ch-or), rgba(201,163,90,.15));
  }
  .page-charpente .ch-ech-range .bar::before { left: 50%; top: -3px; transform: translateX(-50%); }
  .page-charpente .ch-ech-range .bar::after { right: auto; left: 50%; bottom: -3px; top: auto; transform: translateX(-50%); }
  .page-charpente .ch-wordmark { display: none; }
}
@media (max-width: 640px) {
  .page-charpente .ch-hero h1 { font-size: clamp(44px, 11vw, 68px); }
  .page-charpente .ch-materials-grid { grid-template-columns: 1fr; }
  .page-charpente .ch-mat { border-right: none !important; }
  .page-charpente .ch-final-head .actions { flex-direction: column; align-items: stretch; }
  .page-charpente .ch-pill, .page-charpente .ch-pill.ghost { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .page-charpente .ch-real { transition: none; }
}


/* ============================================================================
   PAGE EXTENSION & AGRANDISSEMENT — scope .page-extension
   ============================================================================ */
.page-extension {
  --ext-noir: #0c0b09;
  --ext-noir-2: #15140f;
  --ext-or: #c9a35a;
  --ext-or-soft: #d8b977;
  --ext-or-deep: #8b6e30;
  --ext-blanc: #ffffff;
  --ext-creme: #f3ede1;
  --ext-creme-2: #ebe3d0;
  --ext-papier: #f7f4ec;
  --ext-encre: #1a1814;
  --ext-gris: #6e6a62;
  --ext-gris-2: #9b958a;
  --ext-rule-dark: rgba(255,255,255,.08);
  --ext-rule-light: rgba(26,24,20,.12);
  --ext-pad-x: clamp(24px, 5vw, 80px);
  --ext-max-w: 1440px;
  background: var(--ext-noir);
  color: var(--ext-blanc);
}

.page-extension .ext-wrap { max-width: var(--ext-max-w); margin: 0 auto; padding: 0 var(--ext-pad-x); }

/* Placeholders photo (cool/warm/forest/papier) */
.page-extension .photo {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 70% 35%, rgba(201,163,90,.12) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(255,255,255,.04) 0%, transparent 50%),
    linear-gradient(155deg, #1c1c22 0%, #0a0a0c 55%, #050508 100%);
}
.page-extension .photo.cool   { background: radial-gradient(ellipse at 35% 25%, rgba(255,255,255,.06) 0%, transparent 60%), radial-gradient(ellipse at 80% 70%, rgba(201,163,90,.08) 0%, transparent 50%), linear-gradient(170deg, #1a1d22 0%, #0c0e12 55%, #050608 100%); }
.page-extension .photo.warm   { background: radial-gradient(ellipse at 70% 35%, rgba(201,163,90,.20) 0%, transparent 55%), radial-gradient(ellipse at 20% 80%, rgba(201,163,90,.06) 0%, transparent 50%), linear-gradient(160deg, #221c14 0%, #110d08 55%, #060403 100%); }
.page-extension .photo.forest { background: radial-gradient(ellipse at 30% 40%, rgba(140,170,140,.07) 0%, transparent 60%), radial-gradient(ellipse at 80% 70%, rgba(201,163,90,.08) 0%, transparent 50%), linear-gradient(180deg, #0c1410 0%, #08100a 50%, #020403 100%); }
.page-extension .photo.papier { background: radial-gradient(ellipse at 30% 30%, rgba(201,163,90,.10) 0%, transparent 60%), radial-gradient(ellipse at 80% 80%, rgba(26,24,20,.08) 0%, transparent 55%), linear-gradient(155deg, #e8dfc8 0%, #d8cfb4 100%); }

/* Eyebrow numbers */
/* Numérotation entre crochets ([01], [02], …) masquée globalement
   sur toutes les pages — les valeurs ACF sont conservées si jamais
   le client souhaite les réactiver plus tard. */
.caz-br-num, .ch-br-num, .ext-br-num { display: none !important; }

.page-extension .ext-br-num {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; color: var(--ext-or);
}

/* Pill CTA */
.page-extension .ext-pill {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 8px 8px 8px 22px;
  background: var(--ext-blanc); color: var(--ext-encre);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  border-radius: 999px;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
  text-decoration: none;
}
.page-extension .ext-pill .arr {
  width: 32px; height: 32px;
  background: var(--ext-encre); color: var(--ext-blanc);
  border-radius: 999px;
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 18px; font-style: normal;
  transition: background .25s ease, transform .25s ease;
}
.page-extension .ext-pill:hover { background: var(--ext-or); color: var(--ext-encre); }
.page-extension .ext-pill:hover .arr { background: var(--ext-encre); transform: translateX(3px); }
.page-extension .ext-pill.ghost { background: transparent; color: var(--ext-blanc); border: 1px solid rgba(255,255,255,.25); }
.page-extension .ext-pill.ghost .arr { background: rgba(255,255,255,.12); color: var(--ext-blanc); }
.page-extension .ext-pill.ghost:hover { border-color: var(--ext-or); color: var(--ext-or); }
.page-extension .ext-pill.ghost:hover .arr { background: var(--ext-or); color: var(--ext-encre); }
.page-extension .ext-pill.dark { background: var(--ext-encre); color: var(--ext-blanc); }
.page-extension .ext-pill.dark .arr { background: var(--ext-or); color: var(--ext-encre); }
.page-extension .ext-pill.dark:hover { background: var(--ext-or); color: var(--ext-encre); }
.page-extension .ext-pill.dark:hover .arr { background: var(--ext-encre); color: var(--ext-blanc); }

/* HERO */
.page-extension .ext-hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: var(--ext-noir);
}
.page-extension .ext-hero .photo,
.page-extension .ext-hero .cover-img { z-index: 0; }
.page-extension .ext-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgba(2,2,3,.42);
  pointer-events: none;
}
.page-extension .ext-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(2,2,3,.55) 0%, rgba(2,2,3,.25) 35%, rgba(2,2,3,.3) 60%, rgba(2,2,3,.75) 100%);
  pointer-events: none;
}
.page-extension .ext-hero-content {
  position: relative; z-index: 2;
  padding: 200px var(--ext-pad-x) 80px;
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.page-extension .ext-crumb {
  display: flex; gap: 12px; flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 32px;
}
.page-extension .ext-crumb a { color: inherit; text-decoration: none; }
.page-extension .ext-crumb a:hover { color: var(--ext-or); }
.page-extension .ext-crumb .here { color: var(--ext-or); }
.page-extension .ext-hero h1 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(56px, 9vw, 152px);
  line-height: 0.94;
  letter-spacing: -0.016em;
  margin: 0;
  color: var(--ext-blanc);
  max-width: 16ch;
}
.page-extension .ext-hero h1 em { font-style: italic; color: var(--ext-or); }
.page-extension .ext-hero-bottom {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: end;
}
.page-extension .ext-hero-sub {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(18px, 1.4vw, 22px); line-height: 1.55;
  color: rgba(255,255,255,.86);
  max-width: 60ch; margin: 0;
}
.page-extension .ext-hero-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 18px; }
.page-extension .ext-hero-geo {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
  text-align: right;
}
.page-extension .ext-hero-geo .ll { color: var(--ext-or); }

/* Glass pill spécifique au hero */
.page-extension .ext-hero .ext-pill {
  background: rgba(255,255,255,.10);
  color: var(--ext-blanc);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 12px 32px rgba(0,0,0,.25);
  padding: 10px 10px 10px 24px;
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s ease, color .25s ease;
}
.page-extension .ext-hero .ext-pill .arr {
  background: rgba(255,255,255,.18); color: var(--ext-blanc);
  border: 1px solid rgba(255,255,255,.25);
  width: 36px; height: 36px;
}
.page-extension .ext-hero .ext-pill:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(208,167,66,.55);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 16px 40px rgba(208,167,66,.22);
}
.page-extension .ext-hero .ext-pill:hover .arr {
  background: var(--ext-or); border-color: var(--ext-or); color: var(--ext-encre); transform: translateX(4px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .page-extension .ext-hero .ext-pill { background: rgba(11,10,8,.55); }
}

/* Sections */
.page-extension .ext-sect { padding: clamp(96px, 12vw, 160px) 0; position: relative; }
.page-extension .ext-sect.dark { background: var(--ext-noir); color: var(--ext-blanc); }

/* INTRO [01] */
.page-extension .ext-intro-grid {
  display: grid; grid-template-columns: 1fr 2fr;
  gap: clamp(48px, 7vw, 120px); align-items: start;
}
.page-extension .ext-intro-grid h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(36px, 4vw, 56px); line-height: 1.05;
  margin: 28px 0 0; letter-spacing: -0.008em;
  max-width: 14ch;
}
.page-extension .ext-intro-grid h2 em { font-style: italic; color: var(--ext-or); }
.page-extension .ext-intro-grid .body p {
  font-family: var(--serif);
  font-size: clamp(22px, 2vw, 30px); line-height: 1.42; font-weight: 300;
  margin: 0 0 22px; max-width: 30ch;
}
.page-extension .ext-intro-grid .body p em { font-style: italic; color: var(--ext-or); }
.page-extension .ext-intro-grid .body .small {
  font-family: var(--sans);
  font-size: 15.5px; line-height: 1.7;
  color: rgba(255,255,255,.62);
  max-width: 60ch; margin: 32px 0 0;
}

/* PROJETS [02] — Grille 2x2 */
.page-extension .ext-proj-head {
  display: grid; grid-template-columns: 1fr auto;
  gap: 48px; align-items: end; margin-bottom: 64px;
}
.page-extension .ext-proj-head h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(48px, 6.4vw, 96px); line-height: 0.96;
  letter-spacing: -0.012em; margin: 24px 0 0; max-width: 16ch;
}
.page-extension .ext-proj-head h2 em { font-style: italic; color: var(--ext-or); }
.page-extension .ext-proj-head .meta {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(255,255,255,.55); text-align: right;
}
.page-extension .ext-proj-head .meta strong {
  color: var(--ext-or); font-weight: 400; font-size: 26px; font-family: var(--serif);
  letter-spacing: 0; display: block; font-style: italic;
}
.page-extension .ext-proj-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
}
.page-extension .ext-proj {
  position: relative;
  aspect-ratio: 4/3.4;
  overflow: hidden;
  border: 1px solid var(--ext-rule-dark);
  background: var(--ext-noir-2);
}
.page-extension .ext-proj .photo,
.page-extension .ext-proj .cover-img { position: absolute; inset: 0; z-index: 1; }
.page-extension .ext-proj::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(12,11,9,.05) 0%, rgba(12,11,9,.5) 55%, rgba(12,11,9,.95) 100%);
  pointer-events: none;
}
.page-extension .ext-proj .proj-num {
  position: absolute; top: 22px; right: 26px; z-index: 3;
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(48px, 5vw, 72px); line-height: 0.85;
  color: var(--ext-or);
}
.page-extension .ext-proj .proj-content {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: clamp(24px, 3vw, 40px);
  color: var(--ext-blanc);
}
.page-extension .ext-proj .proj-tag {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ext-or); margin-bottom: 14px;
}
.page-extension .ext-proj h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(26px, 2.6vw, 38px); line-height: 1.05;
  margin: 0 0 14px; letter-spacing: -0.008em;
}
.page-extension .ext-proj h3 em { font-style: italic; color: var(--ext-or); }
.page-extension .ext-proj p {
  font-size: 14.5px; line-height: 1.6;
  color: rgba(255,255,255,.78);
  margin: 0; max-width: 44ch;
}

/* CITATION (carte flottante) */
.page-extension .ext-citation {
  position: relative;
  height: clamp(640px, 88vh, 920px);
  overflow: hidden;
  background: var(--ext-noir);
}
.page-extension .ext-citation .photo,
.page-extension .ext-citation .cover-img { z-index: 0; opacity: 1; object-position: center top; }
.page-extension .ext-citation::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(105deg, rgba(12,11,9,.55) 0%, rgba(12,11,9,.15) 50%, rgba(12,11,9,.6) 100%);
  pointer-events: none;
}
.page-extension .ext-citation .quote-card {
  position: absolute; z-index: 2;
  bottom: clamp(40px, 6vw, 80px);
  left: clamp(24px, 5vw, 80px);
  max-width: 560px;
  background: var(--ext-papier);
  color: var(--ext-encre);
  padding: clamp(32px, 3.5vw, 48px);
  border-top: 2px solid var(--ext-or);
}
.page-extension .ext-citation .qtag {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ext-or-deep);
  margin-bottom: 24px;
  display: inline-flex; align-items: center; gap: 12px;
}
.page-extension .ext-citation .qtag::before { content: ""; width: 24px; height: 1px; background: currentColor; }
.page-extension .ext-citation blockquote {
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: clamp(28px, 2.8vw, 40px); line-height: 1.15;
  margin: 0 0 24px; letter-spacing: -0.008em;
  color: var(--ext-encre);
}
.page-extension .ext-citation blockquote em { color: var(--ext-or-deep); font-style: italic; }
.page-extension .ext-citation .qfoot {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ext-gris);
}

/* CONTINUITÉ [03] */
.page-extension .ext-cont-grid {
  display: grid; grid-template-columns: 1fr 1.6fr;
  gap: clamp(48px, 7vw, 120px); align-items: start;
}
.page-extension .ext-cont-grid h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(40px, 5vw, 68px); line-height: 1.04;
  margin: 24px 0 0; letter-spacing: -0.008em; max-width: 16ch;
}
.page-extension .ext-cont-grid h2 em { font-style: italic; color: var(--ext-or); }
.page-extension .ext-cont-grid .body .lede {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(22px, 1.7vw, 26px); line-height: 1.45;
  color: var(--ext-or); max-width: 42ch; margin: 0 0 32px;
}
.page-extension .ext-cont-grid .body p {
  font-size: 17px; line-height: 1.72;
  margin: 0 0 22px; max-width: 62ch;
  color: rgba(255,255,255,.86);
}
.page-extension .ext-cont-grid .body p strong {
  color: var(--ext-blanc); font-weight: 500;
  background: linear-gradient(transparent 65%, rgba(201,163,90,.4) 65%);
}

/* APPROCHE [04] — 3 cartes */
.page-extension .ext-app-head { margin-bottom: 64px; }
.page-extension .ext-app-head h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(42px, 5.6vw, 80px); line-height: 1.02;
  margin: 24px 0 24px; letter-spacing: -0.012em; max-width: 22ch;
}
.page-extension .ext-app-head h2 em { font-style: italic; color: var(--ext-or); }
.page-extension .ext-app-head .lede {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(20px, 1.5vw, 24px); line-height: 1.5;
  color: rgba(255,255,255,.7);
  max-width: 60ch; margin: 0;
}
.page-extension .ext-app-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid rgba(255,255,255,.4);
  border-bottom: 1px solid var(--ext-rule-dark);
}
.page-extension .ext-app-card {
  padding: 48px 32px 56px;
  border-right: 1px solid var(--ext-rule-dark);
  position: relative;
}
.page-extension .ext-app-card:last-child { border-right: none; }
.page-extension .ext-app-card .app-num {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 48px; color: var(--ext-or); line-height: 1; margin-bottom: 32px;
}
.page-extension .ext-app-card h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(24px, 2vw, 30px); line-height: 1.12;
  margin: 0 0 16px; color: var(--ext-blanc);
  letter-spacing: -0.004em;
}
.page-extension .ext-app-card h3 em { font-style: italic; color: var(--ext-or); }
.page-extension .ext-app-card p {
  font-size: 14.5px; line-height: 1.65;
  color: rgba(255,255,255,.65); margin: 0;
}

/* PASSERELLE RÉNOVATION [05] — Full-width photo + carte glass centrée */
.page-extension .ext-bridge {
  position: relative;
  background: var(--ext-noir);
  color: var(--ext-blanc);
  padding: clamp(96px, 12vw, 160px) 0;
  overflow: hidden;
  border-top: 1px solid var(--ext-rule-dark);
  border-bottom: 1px solid var(--ext-rule-dark);
}
.page-extension .ext-bridge > .photo,
.page-extension .ext-bridge > .cover-img {
  position: absolute; inset: 0; z-index: 0;
}
/* Filtre noir pour lisibilité du glass par-dessus */
.page-extension .ext-bridge::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(2,2,3,.50) 0%, rgba(2,2,3,.35) 50%, rgba(2,2,3,.55) 100%);
  pointer-events: none;
}
.page-extension .ext-bridge .ext-wrap { position: relative; z-index: 2; }
.page-extension .ext-bridge-card {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(36px, 4.5vw, 64px);
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  border-left: 3px solid var(--ext-or);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 24px 60px rgba(0,0,0,.35);
}
.page-extension .ext-bridge .bridge-eyebrow {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ext-or);
  display: inline-flex; align-items: center; gap: 12px;
}
.page-extension .ext-bridge .bridge-eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; }
.page-extension .ext-bridge-card h3 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(28px, 3.2vw, 44px); line-height: 1.08;
  margin: 0; letter-spacing: -0.008em;
  color: var(--ext-blanc); max-width: 22ch;
}
.page-extension .ext-bridge-card h3 em { font-style: italic; color: var(--ext-or); }
.page-extension .ext-bridge-card p {
  font-size: 15.5px; line-height: 1.65;
  color: rgba(255,255,255,.86);
  margin: 0; max-width: 60ch;
}
/* Pill spécifique au glass : reprendre le même style translucide que sur le hero */
.page-extension .ext-bridge-card .ext-pill {
  background: rgba(255,255,255,.10);
  color: var(--ext-blanc);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  padding: 10px 10px 10px 24px;
  margin-top: 4px;
}
.page-extension .ext-bridge-card .ext-pill .arr {
  background: rgba(255,255,255,.18);
  color: var(--ext-blanc);
  border: 1px solid rgba(255,255,255,.25);
  width: 36px; height: 36px;
}
.page-extension .ext-bridge-card .ext-pill:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(208,167,66,.55);
  color: var(--ext-blanc);
  transform: translateY(-1px);
}
.page-extension .ext-bridge-card .ext-pill:hover .arr {
  background: var(--ext-or); border-color: var(--ext-or); color: var(--ext-encre); transform: translateX(4px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .page-extension .ext-bridge-card { background: rgba(11,10,8,.65); }
  .page-extension .ext-bridge-card .ext-pill { background: rgba(11,10,8,.55); }
}

/* RÉALISATIONS [06] */
.page-extension .ext-reals-head {
  display: grid; grid-template-columns: 1fr auto;
  gap: 48px; align-items: end; margin-bottom: 56px;
}
.page-extension .ext-reals-head h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(48px, 6vw, 96px); line-height: 0.96;
  margin: 24px 0 0; letter-spacing: -0.012em;
}
.page-extension .ext-reals-head h2 em { font-style: italic; color: var(--ext-or); }
.page-extension .ext-reals-head .intro {
  font-family: var(--serif); font-style: italic;
  font-size: 22px;
  color: rgba(255,255,255,.55);
  max-width: 36ch; margin: 12px 0 0;
}
.page-extension .ext-reals-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
.page-extension .ext-real {
  display: block;
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
  text-decoration: none; color: inherit;
}
.page-extension .ext-real:hover { transform: translateY(-4px); }
.page-extension .ext-real .frame {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  border: 1px solid var(--ext-rule-dark);
  margin-bottom: 18px;
}
.page-extension .ext-real .frame .photo,
.page-extension .ext-real .frame .cover-img { position: absolute; inset: 0; }
.page-extension .ext-real .meta {
  display: flex; justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: 8px;
}
.page-extension .ext-real .meta .dot::before { content: "● "; color: var(--ext-or); }
.page-extension .ext-real h4 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(24px, 1.9vw, 30px); line-height: 1.1;
  margin: 0; color: var(--ext-blanc);
}
.page-extension .ext-real h4 em { font-style: italic; color: var(--ext-or); }

/* CTA FINAL [07] */
.page-extension .ext-final {
  background: var(--ext-noir);
  color: var(--ext-blanc);
  padding: clamp(120px, 14vw, 180px) 0 100px;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--ext-rule-dark);
}
.page-extension .ext-final-head {
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: clamp(48px, 7vw, 120px); align-items: start;
}
.page-extension .ext-final-head .left p {
  font-size: 14px; line-height: 1.7;
  color: rgba(255,255,255,.65);
  max-width: 28ch; margin: 24px 0 0;
}
.page-extension .ext-final-head .right h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(48px, 6.4vw, 108px); line-height: 0.98;
  letter-spacing: -0.012em; margin: 0 0 40px; max-width: 18ch;
}
.page-extension .ext-final-head .right h2 em { font-style: italic; color: var(--ext-or); }
.page-extension .ext-final-head .right .lede {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(18px, 1.4vw, 22px); line-height: 1.55;
  color: rgba(255,255,255,.85);
  max-width: 60ch; margin: 0 0 40px;
}
.page-extension .ext-final-head .actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* RESPONSIVE */
@media (max-width: 980px) {
  .page-extension .ext-hero-bottom { grid-template-columns: 1fr; }
  .page-extension .ext-hero-actions { align-items: flex-start; }
  .page-extension .ext-intro-grid,
  .page-extension .ext-proj-head,
  .page-extension .ext-reals-head,
  .page-extension .ext-final-head,
  .page-extension .ext-cont-grid { grid-template-columns: 1fr; }
  .page-extension .ext-proj-grid { grid-template-columns: 1fr; }
  .page-extension .ext-proj { aspect-ratio: 4/3.2; }
  .page-extension .ext-app-cards { grid-template-columns: 1fr; }
  .page-extension .ext-app-card { border-right: none; border-bottom: 1px solid var(--ext-rule-dark); }
  .page-extension .ext-app-card:last-child { border-bottom: none; }
  .page-extension .ext-reals-grid { grid-template-columns: 1fr; }
  .page-extension .ext-bridge-card { padding: 28px; }
  .page-extension .ext-citation .quote-card { right: clamp(24px, 5vw, 80px); max-width: none; }
  .page-extension .ext-hero::before { background: rgba(2,2,3,.58); }
}
@media (prefers-reduced-motion: reduce) {
  .page-extension .ext-real { transition: none; }
}

/* ============================================================================
   PAGE NOS RÉALISATIONS — scope .page-realisations
   Galerie verticale immersive : 8 panels projets + 1 panel contact.
   Chaque panel = 100vh, fond photo plein-cadre, carrousel intégré.
   ============================================================================ */
.page-realisations {
  --real-noir: #0c0b09;
  --real-or: #c9a35a;
  --real-or-deep: #8b6e30;
  --real-blanc: #ffffff;
  --real-encre: #1a1814;
  --real-gris: #6e6a62;
  --real-rule-dark: rgba(255,255,255,.08);
  --real-pad-x: clamp(24px, 4vw, 64px);
  background: var(--real-noir);
  color: var(--real-blanc);
}

.page-realisations .real-stage { position: relative; width: 100%; }
.page-realisations .real-track { display: block; width: 100%; }

/* ─── Panel projet — sticky cover scroll ───────────────────────────────────
   Chaque panel est position:sticky top:0 → il reste "épinglé" au sommet
   pendant qu'on scroll, et le panel suivant glisse par-dessus comme une
   pile de cartes. L'ordre du DOM gère naturellement le z-index. */
.page-realisations .real-panel {
  --cover-progress: 0; /* 0 = pleinement visible · 1 = entièrement recouvert */
  width: 100%;
  height: 100vh;          /* fallback navigateurs anciens */
  height: 100svh;         /* iOS Safari : exclut la zone potentiellement masquée par la barre d'adresse */
  height: 100dvh;         /* navigateurs modernes : suit dynamiquement la barre d'adresse */
  min-height: 540px;
  position: sticky;
  top: 0;
  overflow: hidden;
  background: var(--real-noir);
  will-change: transform;
}

/* Ombre haute douce — donne le sentiment "carte qui glisse par-dessus"
   à chaque panel qui remonte recouvrir le précédent. */
.page-realisations .real-panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 28px;
  z-index: 5;
  background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 100%);
  pointer-events: none;
  opacity: .8;
}

/* Effet de profondeur — le carrousel se rétrécit + s'assombrit
   progressivement à mesure que le panel suivant le recouvre.
   La variable --cover-progress est mise à jour en JS (rAF + scroll). */
.page-realisations .real-panel .real-carousel {
  transform: scale(calc(1 - 0.06 * var(--cover-progress)));
  transform-origin: center center;
  filter:
    brightness(calc(1 - 0.45 * var(--cover-progress)))
    saturate(calc(1 - 0.25 * var(--cover-progress)));
  transition: none;
}
/* Les overlays d'info / compteur s'éclipsent légèrement plus vite que
   l'image pour libérer la place au panel suivant. */
.page-realisations .real-panel .real-panel-info,
.page-realisations .real-panel .real-panel-counter {
  opacity: calc(1 - 1.6 * var(--cover-progress));
  transform: translateY(calc(-50px * var(--cover-progress)));
  transition: none;
}
/* Note : le centrage du panel.contact intègre déjà --cover-progress
   dans sa propre règle plus bas (section "PANEL CONTACT"). */

/* ─── Carrousel ─── */
.page-realisations .real-carousel { position: absolute; inset: 0; }
.page-realisations .real-cslide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .9s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
.page-realisations .real-cslide.active {
  opacity: 1;
  pointer-events: auto;
}
.page-realisations .real-cslide .photo,
.page-realisations .real-cslide .real-cover-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform 1.2s cubic-bezier(.22,.61,.36,1);
}
.page-realisations .real-cslide.active .photo,
.page-realisations .real-cslide.active .real-cover-img {
  transform: scale(1.0);
}

/* Voile vignette + lecture */
.page-realisations .real-panel::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse at center, transparent 50%, rgba(12,11,9,.45) 100%),
    linear-gradient(180deg, rgba(12,11,9,.35) 0%, rgba(12,11,9,0) 18%, rgba(12,11,9,0) 60%, rgba(12,11,9,.82) 100%);
  pointer-events: none;
}

/* ─── Bloc info bas-gauche ─── */
.page-realisations .real-panel-info {
  position: absolute;
  left: var(--real-pad-x);
  bottom: clamp(70px, 9vh, 110px);
  z-index: 3;
  color: var(--real-blanc);
  max-width: 760px;
}
.page-realisations .real-panel-info .tag {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--real-or);
  display: inline-flex; align-items: center; gap: 14px;
  margin-bottom: 22px;
}
.page-realisations .real-panel-info .tag::before {
  content: ""; width: 28px; height: 1px; background: currentColor;
}
.page-realisations .real-panel-info h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(54px, 7vw, 120px);
  line-height: 0.94;
  letter-spacing: -0.014em;
  margin: 0 0 14px;
  color: var(--real-blanc);
}
.page-realisations .real-panel-info h2 em { font-style: italic; color: var(--real-or); }
.page-realisations .real-panel-info .meta {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

/* ─── Compteur haut-droit ─── */
.page-realisations .real-panel-counter {
  position: absolute;
  top: clamp(96px, 12vh, 130px);
  right: var(--real-pad-x);
  z-index: 3;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 1.4vw, 24px);
  color: rgba(255,255,255,.6);
  display: flex; align-items: baseline; gap: 8px;
}
.page-realisations .real-panel-counter .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(56px, 5vw, 84px);
  line-height: 0.85;
  color: var(--real-or);
  font-weight: 300;
}
.page-realisations .real-panel-counter .sep {
  font-family: var(--mono);
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,.4);
  margin: 0 4px;
}

/* ─── Flèches carrousel ─── */
.page-realisations .real-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 56px; height: 56px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(12,11,9,.32);
  color: var(--real-blanc);
  display: grid; place-items: center;
  font-family: var(--serif);
  font-size: 30px; line-height: 1;
  font-style: normal;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .25s ease, border-color .25s ease, transform .25s ease, color .25s ease;
}
.page-realisations .real-arrow:hover {
  background: var(--real-or);
  border-color: var(--real-or);
  color: var(--real-encre);
}
.page-realisations .real-arrow.prev { left: var(--real-pad-x); }
.page-realisations .real-arrow.next { right: var(--real-pad-x); }
.page-realisations .real-arrow.prev:hover { transform: translateY(-50%) translateX(-3px); }
.page-realisations .real-arrow.next:hover { transform: translateY(-50%) translateX(3px); }

/* ─── Dots carrousel ─── */
.page-realisations .real-dots {
  position: absolute;
  left: 50%; bottom: clamp(28px, 4vh, 44px);
  transform: translateX(-50%);
  z-index: 4;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(12,11,9,.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.1);
}
.page-realisations .real-dots .dot {
  width: 8px; height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(255,255,255,.3);
  cursor: pointer;
  transition: background .25s ease, width .25s ease;
}
.page-realisations .real-dots .dot.active {
  background: var(--real-or);
  width: 26px;
  border-radius: 999px;
}
.page-realisations .real-dots .lbl {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-right: 8px;
}

/* ─── Barre de progression bas page ─── */
.page-realisations + .real-progress,
.page-realisations .real-progress {
  position: fixed;
  left: 0; bottom: 0;
  width: 100%;
  height: 2px;
  background: rgba(255,255,255,.06);
  z-index: 60;
  pointer-events: none;
}
.page-realisations .real-progress .bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--real-or-deep) 0%, var(--real-or) 100%);
  transition: width .15s linear;
}

/* ─── Hint scroll ─── */
.page-realisations .real-hint {
  position: fixed;
  right: var(--real-pad-x);
  bottom: 36px;
  z-index: 55;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
  display: flex; align-items: center; gap: 14px;
  pointer-events: none;
  transition: opacity .6s ease;
}
.page-realisations .real-hint.hidden { opacity: 0; }
.page-realisations .real-hint::after {
  content: "↓";
  font-family: var(--serif);
  font-size: 22px;
  color: var(--real-or);
  animation: real-nudge 1.8s ease-in-out infinite;
}
@keyframes real-nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

/* ─── Pill CTA (utilisé sur panel Contact) ─── */
.page-realisations .real-pill {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 8px 8px 8px 22px;
  background: var(--real-blanc);
  color: var(--real-encre);
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  border-radius: 999px;
  text-decoration: none;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.page-realisations .real-pill .arr {
  width: 32px; height: 32px;
  background: var(--real-encre); color: var(--real-blanc);
  border-radius: 999px;
  display: grid; place-items: center;
  font-family: var(--serif);
  font-size: 18px; font-style: normal;
  transition: background .25s ease, transform .25s ease;
}
.page-realisations .real-pill:hover { background: var(--real-or); color: var(--real-encre); }
.page-realisations .real-pill:hover .arr { background: var(--real-encre); transform: translateX(3px); }
.page-realisations .real-pill.ghost {
  background: transparent;
  color: var(--real-blanc);
  border: 1px solid rgba(255,255,255,.25);
}
.page-realisations .real-pill.ghost .arr { background: rgba(255,255,255,.12); color: var(--real-blanc); }
.page-realisations .real-pill.ghost:hover { border-color: var(--real-or); color: var(--real-or); }
.page-realisations .real-pill.ghost:hover .arr { background: var(--real-or); color: var(--real-encre); }

/* ─── PANEL CONTACT ─── */
.page-realisations .real-panel.contact .real-panel-info {
  bottom: auto;
  top: 50%;
  transform: translateY(calc(-50% - 50px * var(--cover-progress)));
  max-width: 980px;
}
.page-realisations .real-panel.contact .real-panel-info h2 {
  font-size: clamp(56px, 7vw, 130px);
  max-width: 14ch;
}
.page-realisations .real-panel.contact .lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 1.5vw, 26px);
  line-height: 1.5;
  color: rgba(255,255,255,.82);
  margin: 24px 0 36px;
  max-width: 50ch;
}
.page-realisations .real-panel.contact .actions {
  display: flex; gap: 16px; flex-wrap: wrap;
}
.page-realisations .real-panel.contact .photo {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 70% 40%, rgba(201,163,90,.16) 0%, transparent 60%),
    linear-gradient(160deg, #14110d 0%, #07050a 100%);
  transform: scale(1.0) !important;
  transition: none !important;
}
.page-realisations .real-wmark {
  position: absolute;
  left: 50%; bottom: -3vw;
  z-index: 1;
  transform: translateX(-50%);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(160px, 26vw, 460px);
  line-height: 0.82;
  color: transparent;
  background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.01) 100%);
  -webkit-background-clip: text; background-clip: text;
  white-space: nowrap;
  letter-spacing: -0.02em;
  pointer-events: none;
}

/* ─── Photos placeholders (par projet) ─── */
.page-realisations .ph-1a { background: radial-gradient(ellipse at 60% 35%, rgba(201,163,90,.28) 0%, transparent 60%), linear-gradient(160deg, #2a2118 0%, #100a06 100%); }
.page-realisations .ph-1b { background: radial-gradient(ellipse at 30% 70%, rgba(255,255,255,.06) 0%, transparent 55%), linear-gradient(180deg, #1c1814 0%, #07050a 100%); }
.page-realisations .ph-1c { background: radial-gradient(ellipse at 75% 25%, rgba(201,163,90,.22) 0%, transparent 55%), linear-gradient(170deg, #1f1812 0%, #0a0604 100%); }
.page-realisations .ph-1d { background: radial-gradient(ellipse at 50% 80%, rgba(255,255,255,.08) 0%, transparent 50%), linear-gradient(155deg, #25201b 0%, #0c0806 100%); }
.page-realisations .ph-1e { background: radial-gradient(ellipse at 20% 50%, rgba(201,163,90,.18) 0%, transparent 60%), linear-gradient(180deg, #1d1b18 0%, #08060a 100%); }
.page-realisations .ph-2a { background: radial-gradient(ellipse at 30% 30%, rgba(255,255,255,.07) 0%, transparent 55%), linear-gradient(170deg, #1a1e23 0%, #06090d 100%); }
.page-realisations .ph-2b { background: radial-gradient(ellipse at 70% 65%, rgba(201,163,90,.16) 0%, transparent 60%), linear-gradient(155deg, #221d16 0%, #0a0705 100%); }
.page-realisations .ph-2c { background: radial-gradient(ellipse at 50% 40%, rgba(140,170,140,.08) 0%, transparent 60%), linear-gradient(180deg, #10171a 0%, #04080a 100%); }
.page-realisations .ph-2d { background: radial-gradient(ellipse at 80% 20%, rgba(255,255,255,.05) 0%, transparent 55%), linear-gradient(160deg, #1c1c22 0%, #07070c 100%); }
.page-realisations .ph-3a { background: radial-gradient(ellipse at 65% 35%, rgba(201,163,90,.22) 0%, transparent 60%), linear-gradient(155deg, #2a221a 0%, #0d0906 100%); }
.page-realisations .ph-3b { background: radial-gradient(ellipse at 30% 70%, rgba(140,170,140,.08) 0%, transparent 55%), linear-gradient(180deg, #14160f 0%, #05070a 100%); }
.page-realisations .ph-3c { background: radial-gradient(ellipse at 75% 55%, rgba(255,255,255,.06) 0%, transparent 60%), linear-gradient(170deg, #1c1b18 0%, #07060a 100%); }
.page-realisations .ph-3d { background: radial-gradient(ellipse at 40% 30%, rgba(201,163,90,.18) 0%, transparent 60%), linear-gradient(160deg, #221c14 0%, #09060a 100%); }
.page-realisations .ph-3e { background: radial-gradient(ellipse at 25% 80%, rgba(140,170,140,.07) 0%, transparent 50%), linear-gradient(180deg, #0e1410 0%, #04080a 100%); }
.page-realisations .ph-4a { background: radial-gradient(ellipse at 55% 40%, rgba(201,163,90,.24) 0%, transparent 60%), linear-gradient(160deg, #221b13 0%, #0a0704 100%); }
.page-realisations .ph-4b { background: radial-gradient(ellipse at 25% 25%, rgba(255,255,255,.06) 0%, transparent 55%), linear-gradient(170deg, #1c1815 0%, #07050a 100%); }
.page-realisations .ph-4c { background: radial-gradient(ellipse at 80% 60%, rgba(201,163,90,.20) 0%, transparent 60%), linear-gradient(155deg, #26201a 0%, #0c0806 100%); }
.page-realisations .ph-4d { background: radial-gradient(ellipse at 50% 80%, rgba(255,255,255,.07) 0%, transparent 55%), linear-gradient(180deg, #1a1916 0%, #06050a 100%); }
.page-realisations .ph-5a { background: radial-gradient(ellipse at 65% 45%, rgba(201,163,90,.30) 0%, transparent 60%), linear-gradient(155deg, #2c2118 0%, #0e0805 100%); }
.page-realisations .ph-5b { background: radial-gradient(ellipse at 30% 65%, rgba(255,255,255,.05) 0%, transparent 55%), linear-gradient(170deg, #1b1815 0%, #06050a 100%); }
.page-realisations .ph-5c { background: radial-gradient(ellipse at 75% 30%, rgba(201,163,90,.20) 0%, transparent 60%), linear-gradient(155deg, #25201a 0%, #0a0706 100%); }
.page-realisations .ph-5d { background: radial-gradient(ellipse at 50% 50%, rgba(140,170,140,.06) 0%, transparent 55%), linear-gradient(180deg, #161a14 0%, #04080a 100%); }
.page-realisations .ph-6a { background: radial-gradient(ellipse at 50% 35%, rgba(255,255,255,.08) 0%, transparent 55%), linear-gradient(170deg, #1a1d22 0%, #06080c 100%); }
.page-realisations .ph-6b { background: radial-gradient(ellipse at 70% 60%, rgba(201,163,90,.18) 0%, transparent 60%), linear-gradient(155deg, #221c14 0%, #09060a 100%); }
.page-realisations .ph-6c { background: radial-gradient(ellipse at 25% 25%, rgba(140,170,140,.08) 0%, transparent 55%), linear-gradient(180deg, #121814 0%, #04080a 100%); }
.page-realisations .ph-6d { background: radial-gradient(ellipse at 80% 80%, rgba(201,163,90,.22) 0%, transparent 60%), linear-gradient(160deg, #25201a 0%, #0a0706 100%); }
.page-realisations .ph-7a { background: radial-gradient(ellipse at 55% 50%, rgba(201,163,90,.20) 0%, transparent 60%), linear-gradient(155deg, #211c16 0%, #08060a 100%); }
.page-realisations .ph-7b { background: radial-gradient(ellipse at 30% 30%, rgba(255,255,255,.07) 0%, transparent 55%), linear-gradient(170deg, #1c1918 0%, #06050a 100%); }
.page-realisations .ph-7c { background: radial-gradient(ellipse at 75% 65%, rgba(201,163,90,.16) 0%, transparent 55%), linear-gradient(160deg, #28221a 0%, #0a0706 100%); }
.page-realisations .ph-7d { background: radial-gradient(ellipse at 50% 25%, rgba(255,255,255,.05) 0%, transparent 55%), linear-gradient(180deg, #1b1b1f 0%, #07070c 100%); }
.page-realisations .ph-7e { background: radial-gradient(ellipse at 25% 75%, rgba(201,163,90,.18) 0%, transparent 60%), linear-gradient(155deg, #251d14 0%, #08050a 100%); }
.page-realisations .ph-8a { background: radial-gradient(ellipse at 60% 40%, rgba(201,163,90,.16) 0%, transparent 60%), linear-gradient(165deg, #1f1a14 0%, #06040a 100%); }
.page-realisations .ph-8b { background: radial-gradient(ellipse at 30% 60%, rgba(255,255,255,.06) 0%, transparent 55%), linear-gradient(175deg, #1a1815 0%, #06050a 100%); }
.page-realisations .ph-8c { background: radial-gradient(ellipse at 80% 30%, rgba(140,170,140,.07) 0%, transparent 55%), linear-gradient(180deg, #12160f 0%, #04070a 100%); }
.page-realisations .ph-8d { background: radial-gradient(ellipse at 50% 75%, rgba(201,163,90,.20) 0%, transparent 60%), linear-gradient(155deg, #251f17 0%, #09060a 100%); }

/* ─── MOBILE ─── */
@media (max-width: 900px) {
  /* Sur mobile : on garde le sticky cover scroll, mais chaque panel
     occupe bien 100 % de la hauteur visible (la déclaration de base
     utilise 100dvh qui suit dynamiquement la barre d'adresse). */
  .page-realisations .real-panel-info { bottom: 100px; }
  .page-realisations .real-panel-info h2 { font-size: clamp(38px, 9vw, 64px); }
  .page-realisations .real-arrow { width: 44px; height: 44px; font-size: 22px; }
  .page-realisations .real-arrow.prev { left: 16px; }
  .page-realisations .real-arrow.next { right: 16px; }
  .page-realisations .real-panel-counter { top: 84px; }
  .page-realisations .real-panel-counter .num { font-size: 48px; }
  .page-realisations .real-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .page-realisations .real-cslide,
  .page-realisations .real-cslide .photo,
  .page-realisations .real-cslide .real-cover-img,
  .page-realisations .real-panel { transition: none; }
}

/* ============================================================================
   PAGES NOTRE HISTOIRE + NOS ENGAGEMENTS
   Variables et styles communs scopés sous .page-histoire et .page-engagements
   ============================================================================ */
.page-histoire, .page-engagements {
  --noir-2: #020203;
  --or-2: #d0a742;
  --or-soft-2: #b9912e;
  --or-deep-2: #8a6b1e;
  --blanc-2: #ffffff;
  --ivoire-2: #faf7f1;
  --creme-2: #f5f1ea;
  --gris-2: #7a7770;
  --gris-clair-2: #cbc6bd;
  --max-2: 1440px;
  --pad-2: clamp(20px, 4.5vw, 72px);
}

/* Placeholders communs (rendu de remplacement quand pas d'image ACF) */
.page-histoire .ph, .page-engagements .ph {
  position: relative;
  background: linear-gradient(135deg,#2a2722 0%,#3d362d 25%,#4a4239 50%,#352f28 75%,#1f1c18 100%);
  overflow: hidden; color: #cbc6bd;
}
.page-histoire .ph::before, .page-engagements .ph::before {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.08) 0 1px, transparent 1px 22px);
  pointer-events: none;
}
.page-histoire .ph::after, .page-engagements .ph::after {
  content: attr(data-label);
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(208,167,66,.6);
  padding: 8px 14px; border: 1px solid rgba(208,167,66,.28);
  white-space: nowrap; max-width: 90%; text-align: center;
}
.page-histoire .ph-sepia, .page-engagements .ph-sepia {
  background: linear-gradient(135deg,#3d2f1f 0%,#5c4528 35%,#6f5532 65%,#3d2f1f 100%);
}
.page-engagements .ph-meleze {
  background:
    repeating-linear-gradient(94deg, rgba(0,0,0,0) 0 5px, rgba(0,0,0,.08) 5px 6px, rgba(0,0,0,0) 6px 14px),
    linear-gradient(120deg,#5a3a1c 0%,#8b5c2b 35%,#a87138 65%,#6e4520 100%);
}
.page-engagements .ph-cembro {
  background:
    repeating-linear-gradient(92deg, rgba(0,0,0,0) 0 4px, rgba(0,0,0,.05) 4px 5px, rgba(0,0,0,0) 5px 13px),
    linear-gradient(115deg,#c89a64 0%,#dfb27a 40%,#e8c08a 65%,#b88350 100%);
}
.page-engagements .ph-epicea {
  background:
    repeating-linear-gradient(92deg, rgba(0,0,0,0) 0 4px, rgba(0,0,0,.045) 4px 5px, rgba(0,0,0,0) 5px 14px),
    linear-gradient(115deg,#d9bf8e 0%,#e8d3a4 40%,#efdcaf 65%,#cba872 100%);
}
.page-engagements .ph-vieux {
  background:
    repeating-linear-gradient(92deg, rgba(0,0,0,0) 0 5px, rgba(0,0,0,.18) 5px 7px, rgba(0,0,0,0) 7px 16px),
    linear-gradient(120deg,#322212 0%,#4d3520 40%,#5d4226 65%,#2a1e10 100%);
}

/* Images réelles (ACF) — remplace les placeholders */
.hist-cover-img, .eng-cover-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* ============================================================================
   HERO commun
   ============================================================================ */
.page-histoire .hist-hero, .page-engagements .eng-hero {
  position: relative; height: 92vh; min-height: 680px;
  color: var(--blanc-2);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; overflow: hidden;
  background: var(--noir-2);
}
.page-histoire .hist-hero > .ph, .page-engagements .eng-hero > .ph,
.page-histoire .hist-hero > .hist-cover-img, .page-engagements .eng-hero > .eng-cover-img {
  position: absolute; inset: 0; z-index: 0;
}
.page-histoire .hist-hero::after, .page-engagements .eng-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(2,2,3,.55) 0%, rgba(2,2,3,.18) 35%, rgba(2,2,3,.28) 60%, rgba(2,2,3,.7) 100%);
  pointer-events: none;
}
.page-histoire .hist-hero-inner, .page-engagements .eng-hero-inner {
  position: relative; z-index: 2; padding: 0 var(--pad-2); max-width: 1180px;
}
.page-histoire .hist-hero-eyebrow, .page-engagements .eng-hero-eyebrow {
  font-size: 10px; letter-spacing: .5em; text-transform: uppercase;
  color: var(--or-2); font-weight: 500; margin-bottom: 32px;
}
.page-histoire .hist-hero h1, .page-engagements .eng-hero h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(42px, 6.4vw, 98px); line-height: 1.02; letter-spacing: -.01em;
  color: var(--blanc-2); margin: 0;
}
.page-histoire .hist-hero h1 em, .page-engagements .eng-hero h1 em {
  font-style: italic; color: var(--or-2); font-weight: 300;
}
.page-histoire .hist-hero-rule, .page-engagements .eng-hero-rule {
  width: 80px; height: 1px; background: var(--or-2); margin: 42px auto 36px;
}
.page-histoire .hist-hero-accroche, .page-engagements .eng-hero-accroche {
  max-width: 760px; margin: 0 auto;
  font-family: var(--serif); font-weight: 300; font-size: clamp(18px, 1.55vw, 23px);
  line-height: 1.55; color: #e9e3d6; letter-spacing: .01em;
}
.page-histoire .hist-hero-accroche em, .page-engagements .eng-hero-accroche em {
  color: var(--or-2); font-style: italic;
}
.page-histoire .hist-hero-scroll, .page-engagements .eng-hero-scroll {
  position: absolute; bottom: 42px; left: 50%; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  font-size: 10px; letter-spacing: .4em; text-transform: uppercase;
  color: #fff; text-decoration: none;
}
.page-histoire .hist-hero-scroll .line, .page-engagements .eng-hero-scroll .line {
  width: 1px; height: 54px; background: rgba(255,255,255,.4); position: relative; overflow: hidden;
}
.page-histoire .hist-hero-scroll .line::after, .page-engagements .eng-hero-scroll .line::after {
  content: ""; position: absolute; top: -54px; left: 0; width: 1px; height: 54px;
  background: var(--or-2); animation: cb-scrollLine 2.6s ease-in-out infinite;
}
@keyframes cb-scrollLine { 0% { top: -54px } 100% { top: 54px } }

/* ============================================================================
   INTRO band commun
   ============================================================================ */
.page-histoire .hist-intro, .page-engagements .eng-intro {
  background: var(--ivoire-2);
  padding: clamp(80px, 11vw, 140px) var(--pad-2) clamp(40px, 6vw, 80px);
  text-align: center;
}
.page-histoire .hist-intro .eyebrow, .page-engagements .eng-intro .eyebrow {
  font-size: 10px; letter-spacing: .5em; text-transform: uppercase;
  color: var(--or-soft-2); font-weight: 600; margin-bottom: 26px; display: block;
}
.page-histoire .hist-intro p, .page-engagements .eng-intro p {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(22px, 2.6vw, 34px); line-height: 1.35;
  max-width: 920px; margin: 0 auto; letter-spacing: -.005em; color: var(--noir-2);
}
.page-histoire .hist-intro p em, .page-engagements .eng-intro p em {
  font-style: italic; color: var(--or-soft-2);
}
.page-histoire .hist-intro .intro-rule, .page-engagements .eng-intro .intro-rule {
  width: 48px; height: 1px; background: var(--or-2); margin: 36px auto 0;
}

/* ============================================================================
   HISTOIRE — Timeline frise
   ============================================================================ */
.page-histoire .hist-timeline {
  position: relative; background: var(--ivoire-2);
  padding: clamp(60px, 8vw, 120px) var(--pad-2) clamp(80px, 12vw, 160px);
  overflow: hidden;
}
.page-histoire .hist-timeline::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .4;
  background:
    repeating-linear-gradient(90deg, rgba(151,121,75,0) 0, rgba(151,121,75,0) 80px,
      rgba(151,121,75,.025) 80px, rgba(151,121,75,.025) 81px, rgba(151,121,75,0) 81px,
      rgba(151,121,75,0) 220px, rgba(151,121,75,.018) 220px, rgba(151,121,75,.018) 221px);
}
.page-histoire .tl-wrap { position: relative; max-width: 1180px; margin: 0 auto; }
.page-histoire .tl-axis {
  position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-.5px);
  width: 1px; z-index: 1; pointer-events: none;
}
.page-histoire .tl-axis .rail {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(2,2,3,0) 0%, rgba(2,2,3,.14) 6%,
    rgba(2,2,3,.14) 94%, rgba(2,2,3,0) 100%);
}
.page-histoire .tl-axis .fill {
  position: absolute; top: 0; left: 0; right: 0; height: 0;
  background: linear-gradient(180deg, var(--or-2) 0%, var(--or-soft-2) 100%);
  box-shadow: 0 0 18px rgba(208,167,66,.45);
  transition: height .08s linear;
}
.page-histoire .tl-cap {
  position: absolute; left: 50%;
  width: 9px; height: 9px; border: 1px solid rgba(2,2,3,.18);
  background: var(--ivoire-2);
  transform: translateX(-50%) rotate(45deg); z-index: 2;
}
.page-histoire .tl-cap.top { top: -4px; }
.page-histoire .tl-cap.bot { bottom: -4px; }
.page-histoire .tl-list {
  position: relative; display: flex; flex-direction: column;
  gap: clamp(80px, 10vw, 140px); z-index: 2;
}
.page-histoire .milestone {
  position: relative; display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(60px, 7vw, 110px); align-items: center;
}
.page-histoire .ms-marker {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ivoire-2); border: 1px solid rgba(2,2,3,.25); z-index: 3;
  transition: border-color .5s ease, background .5s ease, box-shadow .5s ease, transform .5s ease;
}
.page-histoire .ms-marker::before {
  content: ""; position: absolute; inset: 4px; border-radius: 50%;
  background: transparent; transition: background .5s ease;
}
.page-histoire .ms-marker::after {
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  border: 1px solid rgba(208,167,66,0); transition: border-color .5s ease, inset .5s ease;
}
.page-histoire .milestone.is-active .ms-marker {
  border-color: var(--or-2);
  box-shadow: 0 0 0 4px rgba(208,167,66,.12), 0 0 22px rgba(208,167,66,.5);
  transform: translate(-50%, -50%) scale(1.05);
}
.page-histoire .milestone.is-active .ms-marker::before { background: var(--or-2); }
.page-histoire .milestone.is-active .ms-marker::after {
  border-color: rgba(208,167,66,.35); inset: -10px;
}
.page-histoire .ms-text, .page-histoire .ms-media {
  opacity: 0; transform: translateY(40px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.page-histoire .milestone.is-visible .ms-text { opacity: 1; transform: translateY(0); transition-delay: .05s; }
.page-histoire .milestone.is-visible .ms-media { opacity: 1; transform: translateY(0); transition-delay: .18s; }
.page-histoire .milestone[data-side="left"] .ms-text { grid-column: 1; text-align: right; padding-right: clamp(20px, 2vw, 40px); }
.page-histoire .milestone[data-side="left"] .ms-media { grid-column: 2; padding-left: clamp(20px, 2vw, 40px); }
.page-histoire .milestone[data-side="right"] .ms-text { grid-column: 2; text-align: left; padding-left: clamp(20px, 2vw, 40px); }
.page-histoire .milestone[data-side="right"] .ms-media { grid-column: 1; padding-right: clamp(20px, 2vw, 40px); }
.page-histoire .ms-tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 10px; letter-spacing: .4em; text-transform: uppercase;
  color: var(--or-soft-2); font-weight: 600; margin-bottom: 18px;
}
.page-histoire .ms-tag .dash { width: 22px; height: 1px; background: var(--or-soft-2); display: inline-block; }
.page-histoire .ms-date {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(64px, 8.4vw, 128px); line-height: .95; letter-spacing: -.02em;
  color: var(--noir-2); margin-bottom: 8px;
}
.page-histoire .ms-date em {
  font-style: italic; color: var(--or-soft-2); font-weight: 300;
  font-size: .7em; display: block; line-height: 1; margin-top: 4px;
  letter-spacing: -.005em;
}
.page-histoire .ms-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(24px, 2.4vw, 34px); line-height: 1.2; letter-spacing: -.005em;
  color: var(--noir-2); margin: 18px 0 22px; max-width: 38ch;
}
.page-histoire .milestone[data-side="left"] .ms-title { margin-left: auto; }
.page-histoire .ms-body {
  color: #3d3a34; font-size: 15.5px; line-height: 1.8;
  max-width: 46ch; text-wrap: pretty;
}
.page-histoire .milestone[data-side="left"] .ms-body { margin-left: auto; }
.page-histoire .ms-media .frame {
  position: relative; overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: 0 30px 60px -30px rgba(2,2,3,.35);
}
.page-histoire .ms-media .frame.square { aspect-ratio: 1/1; }
.page-histoire .ms-media .frame.landscape { aspect-ratio: 5/4; }
.page-histoire .ms-media .frame .ph,
.page-histoire .ms-media .frame .hist-cover-img { position: absolute; inset: 0; }
.page-histoire .ms-media .frame::after {
  content: ""; position: absolute; inset: 0;
  border: 1px solid rgba(208,167,66,.18); pointer-events: none;
}
.page-histoire .ms-media .fname {
  margin-top: 14px; font-family: ui-monospace, Menlo, monospace;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--gris-2);
}
.page-histoire .ms-media .fname b { color: var(--or-soft-2); font-weight: 600; margin-right: 8px; }
.page-histoire .milestone[data-side="left"] .ms-media .fname { text-align: left; }
.page-histoire .milestone[data-side="right"] .ms-media .fname { text-align: right; }
.page-histoire .ms-media .frame .ph,
.page-histoire .ms-media .frame .hist-cover-img { transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.page-histoire .ms-media .frame:hover .ph,
.page-histoire .ms-media .frame:hover .hist-cover-img { transform: scale(1.04); }

/* HISTOIRE — Clôture */
.page-histoire .hist-closing {
  background: var(--noir-2); color: var(--blanc-2);
  padding: clamp(100px, 14vw, 180px) var(--pad-2);
  position: relative; overflow: hidden;
}
.page-histoire .hist-closing::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(208,167,66,.10) 0%, rgba(208,167,66,0) 60%),
    radial-gradient(40% 50% at 100% 100%, rgba(208,167,66,.06) 0%, rgba(208,167,66,0) 70%);
}
.page-histoire .closing-inner {
  position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; text-align: center;
}
.page-histoire .hist-closing .eyebrow {
  font-size: 10px; letter-spacing: .5em; text-transform: uppercase;
  color: var(--or-2); font-weight: 500; margin-bottom: 36px; display: inline-block;
}
.page-histoire .hist-closing blockquote {
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: clamp(28px, 4vw, 54px); line-height: 1.22; letter-spacing: -.01em;
  color: var(--blanc-2); max-width: 1000px; margin: 0 auto;
}
.page-histoire .hist-closing blockquote::before {
  content: "«"; display: block; color: var(--or-2); font-style: normal;
  font-size: clamp(56px, 7vw, 96px); line-height: .6; margin-bottom: 14px; font-weight: 400;
}
.page-histoire .hist-closing blockquote::after {
  content: "»"; display: block; color: var(--or-2); font-style: normal;
  font-size: clamp(56px, 7vw, 96px); line-height: .4; margin-top: -4px; font-weight: 400;
}
.page-histoire .signature {
  margin-top: 32px; font-family: var(--serif); font-style: italic;
  font-size: 18px; color: var(--or-2); letter-spacing: .04em;
}
.page-histoire .closing-rule {
  width: 60px; height: 1px; background: var(--or-2); margin: 64px auto;
}
.page-histoire .transition {
  max-width: 680px; margin: 0 auto;
  font-size: 16px; line-height: 1.85; color: #cbc6bd;
}
.page-histoire .transition strong { color: var(--blanc-2); font-weight: 500; }
.page-histoire .closing-ctas {
  margin-top: 56px; display: flex; justify-content: center; gap: 18px; flex-wrap: wrap;
}

/* Boutons CTA communs */
.page-histoire .btn-primary, .page-histoire .btn-ghost,
.page-engagements .btn-primary, .page-engagements .btn-ghost {
  padding: 20px 36px; font-size: 11px; letter-spacing: .32em;
  text-transform: uppercase; font-weight: 500;
  display: inline-flex; align-items: center; gap: 14px;
  transition: all .25s ease; text-decoration: none;
}
.page-histoire .btn-primary { background: var(--or-2); color: var(--noir-2); }
.page-histoire .btn-primary:hover { background: var(--blanc-2); }
.page-histoire .btn-ghost { border: 1px solid rgba(255,255,255,.4); color: var(--blanc-2); }
.page-histoire .btn-ghost:hover { border-color: var(--or-2); color: var(--or-2); }
.page-engagements .btn-primary { background: var(--noir-2); color: var(--blanc-2); }
.page-engagements .btn-primary:hover { background: var(--or-2); color: var(--noir-2); }
.page-engagements .btn-ghost { border: 1px solid var(--noir-2); color: var(--noir-2); }
.page-engagements .btn-ghost:hover { border-color: var(--or-soft-2); color: var(--or-soft-2); }
.page-histoire .btn-primary .arr, .page-histoire .btn-ghost .arr,
.page-engagements .btn-primary .arr, .page-engagements .btn-ghost .arr {
  width: 22px; height: 1px; background: currentColor; position: relative;
}
.page-histoire .btn-primary .arr::after, .page-histoire .btn-ghost .arr::after,
.page-engagements .btn-primary .arr::after, .page-engagements .btn-ghost .arr::after {
  content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg);
}

/* ============================================================================
   ENGAGEMENTS — sections alt
   ============================================================================ */
.page-engagements .eng-alt {
  position: relative; background: var(--ivoire-2);
  padding: clamp(80px, 11vw, 140px) var(--pad-2);
}
.page-engagements .alt-inner {
  position: relative; max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: clamp(60px, 8vw, 130px); align-items: center;
}
.page-engagements .eng-alt[data-side="left"] .alt-media { grid-column: 1; padding-right: clamp(20px, 2vw, 40px); }
.page-engagements .eng-alt[data-side="left"] .alt-text  { grid-column: 2; padding-left: clamp(20px, 2vw, 40px); }
.page-engagements .eng-alt[data-side="right"] .alt-media { grid-column: 2; padding-left: clamp(20px, 2vw, 40px); }
.page-engagements .eng-alt[data-side="right"] .alt-text  { grid-column: 1; padding-right: clamp(20px, 2vw, 40px); }
.page-engagements .alt-text, .page-engagements .alt-media {
  opacity: 0; transform: translateY(40px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.page-engagements .alt-media { transition-delay: .12s; }
.page-engagements .eng-alt.is-visible .alt-text,
.page-engagements .eng-alt.is-visible .alt-media { opacity: 1; transform: translateY(0); }
.page-engagements .eng-alt .eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 10px; letter-spacing: .4em; text-transform: uppercase;
  color: var(--or-soft-2); font-weight: 600; margin-bottom: 22px;
}
.page-engagements .eng-alt .eyebrow .dash { width: 22px; height: 1px; background: var(--or-soft-2); }
.page-engagements .eng-alt h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(38px, 4.8vw, 64px); line-height: 1.08; letter-spacing: -.01em;
  margin-bottom: 28px; max-width: 18ch; color: var(--noir-2);
}
.page-engagements .eng-alt h2 em { font-style: italic; color: var(--or-soft-2); font-weight: 300; }
.page-engagements .eng-alt p {
  color: #3d3a34; font-size: 15.5px; line-height: 1.85; margin-bottom: 18px;
  max-width: 48ch; text-wrap: pretty;
}
.page-engagements .eng-alt p strong { color: var(--noir-2); font-weight: 500; }
.page-engagements .alt-media .frame {
  position: relative; aspect-ratio: 4/5; overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(2,2,3,.35);
}
.page-engagements .alt-media .frame.landscape { aspect-ratio: 5/4; }
.page-engagements .alt-media .frame .ph,
.page-engagements .alt-media .frame .eng-cover-img {
  position: absolute; inset: 0;
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.page-engagements .alt-media .frame:hover .ph,
.page-engagements .alt-media .frame:hover .eng-cover-img { transform: scale(1.04); }
.page-engagements .alt-media .frame::after {
  content: ""; position: absolute; inset: 0;
  border: 1px solid rgba(208,167,66,.18); pointer-events: none;
}
.page-engagements .alt-media .fname {
  margin-top: 14px; font-family: ui-monospace, Menlo, monospace;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--gris-2);
}
.page-engagements .alt-media .fname b { color: var(--or-soft-2); font-weight: 600; margin-right: 8px; }

/* MÉLÈZE immersive */
.page-engagements .eng-meleze {
  position: relative; min-height: 100vh;
  display: flex; align-items: center;
  color: var(--blanc-2); overflow: hidden;
  padding: clamp(100px, 12vw, 160px) var(--pad-2);
  background: var(--noir-2);
}
.page-engagements .meleze-bg { position: absolute; inset: -10% 0; z-index: 0; }
.page-engagements .meleze-bg .ph,
.page-engagements .meleze-bg .eng-cover-img { position: absolute; inset: 0; }
.page-engagements .meleze-bg .ph {
  background:
    repeating-linear-gradient(89deg, rgba(0,0,0,0) 0 8px, rgba(0,0,0,.14) 8px 10px, rgba(0,0,0,0) 10px 28px),
    linear-gradient(108deg,#2d1a0a 0%,#5a3815 20%,#8a5b28 45%,#5e3b18 70%,#2a1808 100%);
}
.page-engagements .eng-meleze::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(2,2,3,.80) 0%, rgba(2,2,3,.60) 35%, rgba(2,2,3,.65) 65%, rgba(2,2,3,.82) 100%);
  pointer-events: none;
}
.page-engagements .meleze-inner {
  position: relative; z-index: 2; max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: auto 1fr;
  column-gap: clamp(60px, 8vw, 120px); align-items: start;
}
.page-engagements .meleze-meta {
  border-left: 1px solid rgba(208,167,66,.45);
  padding: 6px 28px; min-width: 200px;
}
.page-engagements .meleze-meta .essence {
  font-family: var(--serif); font-size: 14px; letter-spacing: .4em;
  color: var(--or-2); text-transform: uppercase; margin-bottom: 14px; font-weight: 500;
}
.page-engagements .meleze-meta .latin {
  font-family: var(--serif); font-style: italic; font-size: 18px;
  color: #e9e3d6; line-height: 1.3; margin-bottom: 24px;
}
.page-engagements .meleze-meta .specs {
  display: flex; flex-direction: column; gap: 12px;
  font-size: 12px; color: #cbc6bd; letter-spacing: .05em;
}
.page-engagements .meleze-meta .specs div {
  display: grid; grid-template-columns: 90px 1fr; gap: 10px;
}
.page-engagements .meleze-meta .specs b {
  color: var(--or-2); font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; font-size: 10px; padding-top: 3px;
}
.page-engagements .meleze-quote {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(34px, 4.6vw, 64px); line-height: 1.1; letter-spacing: -.01em;
  color: var(--blanc-2); margin-bottom: 48px; max-width: 14ch;
}
.page-engagements .meleze-quote::before { content: "« "; color: var(--or-2); font-style: normal; }
.page-engagements .meleze-quote::after { content: " »"; color: var(--or-2); font-style: normal; }
.page-engagements .meleze-body {
  max-width: 560px; color: #e9e3d6;
  font-size: 15.5px; line-height: 1.85;
  display: flex; flex-direction: column; gap: 18px;
}
.page-engagements .meleze-body strong { color: var(--or-2); font-weight: 500; }

/* PANTONE */
.page-engagements .eng-pantone {
  position: relative; background: var(--ivoire-2);
  padding: clamp(100px, 13vw, 160px) var(--pad-2);
}
.page-engagements .pantone-head {
  position: relative; text-align: center;
  max-width: 880px; margin: 0 auto 80px;
}
.page-engagements .pantone-head .eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 10px; letter-spacing: .5em; text-transform: uppercase;
  color: var(--or-soft-2); font-weight: 600; margin-bottom: 24px;
}
.page-engagements .pantone-head .eyebrow .dash { width: 22px; height: 1px; background: var(--or-soft-2); }
.page-engagements .pantone-head h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(38px, 4.8vw, 64px); line-height: 1.08; letter-spacing: -.01em;
  color: var(--noir-2);
}
.page-engagements .pantone-head h2 em { font-style: italic; color: var(--or-soft-2); }
.page-engagements .pantone-head .lede {
  margin-top: 24px; color: var(--gris-2);
  font-size: 16px; line-height: 1.75; max-width: 580px; margin-inline: auto;
}
.page-engagements .pantone-grid {
  position: relative; max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.page-engagements .swatch {
  position: relative; background: var(--blanc-2);
  border: 1px solid rgba(2,2,3,.08);
  padding: 14px 14px 0;
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(40px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
.page-engagements .eng-pantone.is-visible .swatch { opacity: 1; transform: translateY(0); }
.page-engagements .eng-pantone.is-visible .swatch:nth-child(1) { transition-delay: .05s; }
.page-engagements .eng-pantone.is-visible .swatch:nth-child(2) { transition-delay: .18s; }
.page-engagements .eng-pantone.is-visible .swatch:nth-child(3) { transition-delay: .31s; }
.page-engagements .eng-pantone.is-visible .swatch:nth-child(4) { transition-delay: .44s; }
.page-engagements .swatch:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px -25px rgba(2,2,3,.35);
}
.page-engagements .swatch .chip {
  position: relative; width: 100%; aspect-ratio: 3/4; overflow: hidden;
}
.page-engagements .swatch .chip .ph,
.page-engagements .swatch .chip .eng-cover-img { position: absolute; inset: 0; }
.page-engagements .swatch .chip::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 70%, rgba(0,0,0,.18) 100%);
  pointer-events: none;
}
.page-engagements .swatch .chip .ref {
  position: absolute; top: 14px; left: 14px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px; letter-spacing: .18em;
  color: rgba(255,255,255,.85); background: rgba(0,0,0,.35);
  padding: 5px 9px; backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.18);
}
.page-engagements .swatch .chip .ref b { color: var(--or-2); margin-right: 6px; font-weight: 600; }
.page-engagements .swatch .info {
  padding: 24px 6px 28px; display: flex; flex-direction: column; gap: 6px;
  border-top: 1px solid rgba(2,2,3,.06); margin-top: 14px;
}
.page-engagements .swatch .info .ess {
  font-family: var(--serif); font-weight: 400;
  font-size: 30px; line-height: 1.05; letter-spacing: -.005em; color: var(--noir-2);
  margin-bottom: 10px; /* compense l'espacement laissé par la suppression du nom latin */
}
.page-engagements .swatch .info .latin {
  font-family: var(--serif); font-style: italic;
  font-size: 14px; color: var(--gris-2); margin-bottom: 8px;
}
.page-engagements .swatch .info .usage {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--or-soft-2); font-weight: 600; margin-bottom: 14px;
}
.page-engagements .swatch .info .usage::before {
  content: ""; width: 6px; height: 6px; background: var(--or-2); border-radius: 50%;
}
.page-engagements .swatch .info .desc {
  font-size: 13.5px; line-height: 1.7; color: #3d3a34; text-wrap: pretty; flex: 1;
}
.page-engagements .swatch .info .specs {
  margin-top: 18px; padding-top: 14px;
  border-top: 1px dashed rgba(2,2,3,.12);
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px;
  font-size: 10.5px; letter-spacing: .06em; color: var(--gris-2);
}
.page-engagements .swatch .info .specs span { display: flex; flex-direction: column; gap: 3px; }
.page-engagements .swatch .info .specs b {
  font-family: var(--serif); font-style: italic;
  font-size: 14px; color: var(--noir-2); font-weight: 500; letter-spacing: 0;
}

/* SÉCHAGE — mini frise */
.page-engagements .eng-sechage {
  position: relative; background: var(--ivoire-2);
  padding: clamp(80px, 11vw, 140px) var(--pad-2);
  border-top: 1px solid rgba(2,2,3,.06);
}
.page-engagements .sechage-inner {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.2fr;
  gap: clamp(60px, 8vw, 120px); align-items: center;
}
.page-engagements .eng-sechage .eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 10px; letter-spacing: .4em; text-transform: uppercase;
  color: var(--or-soft-2); font-weight: 600; margin-bottom: 22px;
}
.page-engagements .eng-sechage .eyebrow .dash { width: 22px; height: 1px; background: var(--or-soft-2); }
.page-engagements .eng-sechage h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(38px, 4.8vw, 64px); line-height: 1.08; letter-spacing: -.01em;
  margin-bottom: 24px; max-width: 18ch; color: var(--noir-2);
}
.page-engagements .eng-sechage h2 em { font-style: italic; color: var(--or-soft-2); }
.page-engagements .eng-sechage p {
  color: #3d3a34; font-size: 15.5px; line-height: 1.85;
  margin-bottom: 18px; max-width: 48ch;
}
.page-engagements .eng-sechage p strong { color: var(--noir-2); font-weight: 500; }
.page-engagements .miniline { position: relative; padding: 48px 0 56px; }
.page-engagements .miniline .rail {
  position: absolute; left: 18px; right: 18px; top: 50%; height: 1px;
  background: linear-gradient(90deg, rgba(2,2,3,.16) 0%, rgba(208,167,66,.8) 30%, rgba(208,167,66,.8) 70%, rgba(2,2,3,.16) 100%);
}
.page-engagements .miniline-steps {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.page-engagements .ml-step {
  position: relative; text-align: center; padding: 0 12px;
  opacity: 0; transform: translateY(20px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.page-engagements .eng-sechage.is-visible .ml-step:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: .1s; }
.page-engagements .eng-sechage.is-visible .ml-step:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: .3s; }
.page-engagements .eng-sechage.is-visible .ml-step:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: .5s; }
.page-engagements .ml-step .dot {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ivoire-2); border: 1px solid rgba(2,2,3,.2);
  margin: 0 auto 18px; position: relative; z-index: 2;
  display: grid; place-items: center;
}
.page-engagements .ml-step .dot::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--or-2);
}
.page-engagements .ml-step:nth-child(2) .dot {
  border-color: var(--or-2); box-shadow: 0 0 0 4px rgba(208,167,66,.1);
}
.page-engagements .ml-step .label {
  font-size: 10px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--or-soft-2); font-weight: 600; margin-bottom: 8px;
}
.page-engagements .ml-step .name {
  font-family: var(--serif); font-size: 26px; line-height: 1.15;
  color: var(--noir-2); margin-bottom: 6px;
}
.page-engagements .ml-step .duration {
  font-family: var(--serif); font-style: italic;
  font-size: 15px; color: var(--gris-2);
}
.page-engagements .ml-step .hint {
  margin-top: 10px; font-size: 12px; color: var(--gris-2);
  line-height: 1.5; max-width: 24ch; margin-inline: auto;
}

/* CERTIFICATIONS — sceaux flip 3D */
.page-engagements .eng-certif {
  position: relative; background: var(--noir-2); color: var(--blanc-2);
  padding: clamp(100px, 13vw, 160px) var(--pad-2); overflow: hidden;
}
.page-engagements .eng-certif::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(208,167,66,.10) 0%, rgba(208,167,66,0) 60%),
    radial-gradient(40% 50% at 0% 100%, rgba(208,167,66,.06) 0%, rgba(208,167,66,0) 70%);
}
.page-engagements .certif-head {
  position: relative; text-align: center; max-width: 880px; margin: 0 auto 80px;
}
.page-engagements .certif-head .eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 10px; letter-spacing: .5em; text-transform: uppercase;
  color: var(--or-2); font-weight: 500; margin-bottom: 24px;
}
.page-engagements .certif-head .eyebrow .dash { width: 22px; height: 1px; background: var(--or-2); }
.page-engagements .certif-head h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(38px, 4.8vw, 64px); line-height: 1.08; letter-spacing: -.01em;
  color: var(--blanc-2);
}
.page-engagements .certif-head h2 em { font-style: italic; color: var(--or-2); }
.page-engagements .certif-head .lede {
  margin-top: 24px; color: #cbc6bd;
  font-size: 16px; line-height: 1.75; max-width: 620px; margin-inline: auto;
}
.page-engagements .seals {
  position: relative; max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
  perspective: 1200px;
}
.page-engagements .seal {
  position: relative; aspect-ratio: 1/1;
  opacity: 0; transform: translateY(40px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.page-engagements .eng-certif.is-visible .seal { opacity: 1; transform: translateY(0); }
.page-engagements .eng-certif.is-visible .seal:nth-child(1) { transition-delay: .05s; }
.page-engagements .eng-certif.is-visible .seal:nth-child(2) { transition-delay: .18s; }
.page-engagements .eng-certif.is-visible .seal:nth-child(3) { transition-delay: .31s; }
.page-engagements .eng-certif.is-visible .seal:nth-child(4) { transition-delay: .44s; }
.page-engagements .seal-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .9s cubic-bezier(.2,.7,.2,1);
  cursor: pointer;
}
.page-engagements .seal:hover .seal-inner,
.page-engagements .seal.is-flipped .seal-inner { transform: rotateY(180deg); }
.page-engagements .seal-face {
  position: absolute; inset: 0; backface-visibility: hidden;
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px;
}
.page-engagements .seal-front {
  background:
    radial-gradient(circle at 50% 50%, rgba(208,167,66,.12) 0%, rgba(208,167,66,0) 65%),
    linear-gradient(180deg, #0c0a08 0%, #1a140c 100%);
  border: 1px solid rgba(208,167,66,.4);
  box-shadow:
    inset 0 0 0 6px rgba(208,167,66,.08),
    inset 0 0 0 7px rgba(208,167,66,.3),
    0 30px 60px -30px rgba(208,167,66,.25);
}
.page-engagements .seal-front::before {
  content: ""; position: absolute; inset: 14px; border-radius: 50%;
  border: 1px dashed rgba(208,167,66,.2);
}
.page-engagements .seal-front .glyph {
  width: 54px; height: 54px; margin-bottom: 18px;
  display: grid; place-items: center;
  border: 1px solid var(--or-2); border-radius: 50%; color: var(--or-2);
}
.page-engagements .seal-front .glyph svg {
  width: 28px; height: 28px; fill: var(--or-2);
}
.page-engagements .seal-front .nm {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(22px, 2.2vw, 32px); line-height: 1.05;
  color: var(--blanc-2); letter-spacing: .01em; text-transform: uppercase;
}
.page-engagements .seal-front .nm em {
  font-style: italic; font-weight: 300; color: var(--or-2);
  text-transform: none; display: block; font-size: .55em;
  letter-spacing: .2em; margin-top: 8px;
}
.page-engagements .seal-front .lvl {
  margin-top: 14px; font-size: 9px; letter-spacing: .5em;
  color: var(--or-2); text-transform: uppercase; font-weight: 600;
}
.page-engagements .seal-front .turn {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  font-size: 8.5px; letter-spacing: .32em; color: rgba(208,167,66,.7);
  text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px;
}
.page-engagements .seal-front .turn .arr {
  width: 14px; height: 1px; background: currentColor; position: relative;
}
.page-engagements .seal-front .turn .arr::after {
  content: ""; position: absolute; right: 0; top: -2px;
  width: 5px; height: 5px; border-top: 1px solid currentColor;
  border-right: 1px solid currentColor; transform: rotate(45deg);
}
.page-engagements .seal-back {
  background:
    radial-gradient(circle at 50% 0%, rgba(208,167,66,.16) 0%, rgba(208,167,66,0) 65%),
    linear-gradient(160deg, #1a140c 0%, #0c0a08 100%);
  border: 1px solid rgba(208,167,66,.5);
  transform: rotateY(180deg);
  padding: 30px 32px;
}
.page-engagements .seal-back .nm-small {
  font-family: var(--serif); font-size: 14px; letter-spacing: .32em;
  color: var(--or-2); text-transform: uppercase;
  margin-bottom: 14px; font-weight: 500;
}
.page-engagements .seal-back p {
  font-size: 12.5px; line-height: 1.6; color: #e9e3d6; text-wrap: pretty;
}

/* CTA FINAL */
.page-engagements .eng-cta {
  position: relative; background: var(--ivoire-2);
  padding: clamp(100px, 13vw, 160px) var(--pad-2); text-align: center;
}
.page-engagements .cta-inner { max-width: 920px; margin: 0 auto; position: relative; z-index: 1; }
.page-engagements .eng-cta .eyebrow {
  font-size: 10px; letter-spacing: .5em; text-transform: uppercase;
  color: var(--or-soft-2); font-weight: 600; margin-bottom: 28px; display: block;
}
.page-engagements .eng-cta h2 {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: clamp(38px, 4.8vw, 64px); line-height: 1.08; letter-spacing: -.01em;
  color: var(--noir-2);
}
.page-engagements .eng-cta h2 em { color: var(--or-soft-2); }
.page-engagements .cta-rule { width: 60px; height: 1px; background: var(--or-2); margin: 44px auto; }
.page-engagements .eng-cta p {
  max-width: 640px; margin: 0 auto;
  font-size: 16px; line-height: 1.85; color: #3d3a34;
}
.page-engagements .cta-ctas {
  margin-top: 48px; display: flex; justify-content: center; gap: 18px; flex-wrap: wrap;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 1100px) {
  .page-engagements .pantone-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .page-engagements .seals { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .page-engagements .meleze-inner { grid-template-columns: 1fr; gap: 40px; }
  .page-engagements .meleze-meta {
    border-left: none; border-top: 1px solid rgba(208,167,66,.45);
    padding: 24px 0 0;
  }
  .page-engagements .sechage-inner { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 980px) {
  .page-histoire .tl-axis { left: 30px; transform: none; }
  .page-histoire .tl-cap { left: 30px; }
  .page-histoire .milestone { grid-template-columns: 1fr; column-gap: 0; padding-left: 64px; }
  .page-histoire .milestone[data-side="left"] .ms-text,
  .page-histoire .milestone[data-side="right"] .ms-text { grid-column: 1; text-align: left; padding: 0; }
  .page-histoire .milestone[data-side="left"] .ms-media,
  .page-histoire .milestone[data-side="right"] .ms-media { grid-column: 1; padding: 0; margin-top: 28px; }
  .page-histoire .milestone[data-side="left"] .ms-title,
  .page-histoire .milestone[data-side="left"] .ms-body { margin-left: 0; }
  .page-histoire .milestone[data-side="left"] .ms-media .fname,
  .page-histoire .milestone[data-side="right"] .ms-media .fname { text-align: left; }
  .page-histoire .ms-marker { left: 30px; top: 14px; transform: translate(-50%, 0); }
  .page-histoire .milestone.is-active .ms-marker { transform: translate(-50%, 0) scale(1.05); }
  .page-histoire .ms-date { font-size: clamp(56px, 12vw, 90px); }
}
@media (max-width: 760px) {
  .page-engagements .alt-inner { grid-template-columns: 1fr; gap: 40px; }
  .page-engagements .eng-alt[data-side="left"] .alt-media,
  .page-engagements .eng-alt[data-side="right"] .alt-media,
  .page-engagements .eng-alt[data-side="left"] .alt-text,
  .page-engagements .eng-alt[data-side="right"] .alt-text { grid-column: 1; padding: 0; }
  .page-engagements .eng-alt[data-side="left"] .alt-media,
  .page-engagements .eng-alt[data-side="right"] .alt-media { order: -1; }
  .page-engagements .miniline-steps { grid-template-columns: 1fr; gap: 36px; }
  .page-engagements .miniline .rail {
    left: 50%; right: auto; top: 18px; bottom: 18px; width: 1px; height: auto;
    background: linear-gradient(180deg, rgba(2,2,3,.16) 0%, rgba(208,167,66,.8) 30%, rgba(208,167,66,.8) 70%, rgba(2,2,3,.16) 100%);
  }
  /* Certifications : un sceau par ligne (texte ne tient pas à 2 cols sous 760px) */
  .page-engagements .seals { grid-template-columns: 1fr; gap: 28px; }
  .page-engagements .seal { max-width: 380px; margin: 0 auto; width: 100%; }
}
@media (max-width: 640px) {
  .page-histoire .hist-hero-accroche, .page-engagements .eng-hero-accroche { font-size: 16px; }
  .page-histoire .hist-intro p, .page-engagements .eng-intro p { font-size: 20px; }
  .page-histoire .tl-axis { left: 22px; }
  .page-histoire .tl-cap { left: 22px; }
  .page-histoire .milestone { padding-left: 46px; }
  .page-histoire .ms-marker { left: 22px; width: 14px; height: 14px; }
  .page-histoire .ms-marker::before { inset: 3px; }
  .page-histoire .ms-tag { margin-bottom: 14px; }
  .page-histoire .ms-date { font-size: 54px; }
  .page-histoire .ms-title { font-size: 22px; margin: 14px 0 18px; }
  .page-histoire .ms-body { font-size: 14.5px; }
}
@media (max-width: 540px) {
  .page-engagements .pantone-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* ============================================================================
   ENGAGEMENTS — Fil conducteur vertical (brief section 0)
   Trait fin doré qui se remplit au scroll, relie les sections ivoire entre elles.
   ============================================================================ */
.page-engagements .eng-thread-zone {
  position: relative;
  background: var(--ivoire-2);
}
.page-engagements .eng-thread-axis {
  position: absolute; top: 0; bottom: 0;
  left: 50%; transform: translateX(-.5px);
  width: 1px; z-index: 1; pointer-events: none;
}
.page-engagements .eng-thread-axis .rail {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(2,2,3,0) 0%,
    rgba(2,2,3,.10) 4%,
    rgba(2,2,3,.10) 96%,
    rgba(2,2,3,0) 100%);
}
.page-engagements .eng-thread-axis .fill {
  position: absolute; top: 0; left: 0; right: 0;
  height: 0;
  background: linear-gradient(180deg, var(--or-2) 0%, var(--or-soft-2) 100%);
  box-shadow: 0 0 14px rgba(208,167,66,.4);
  transition: height .08s linear;
}
/* Le fil se cache sur tablette/mobile (pas de centre visuel net) */
@media (max-width: 980px) {
  .page-engagements .eng-thread-axis { display: none; }
}

/* Parallaxe mélèze — fond se translate doucement au scroll */
.page-engagements .meleze-bg {
  will-change: transform;
  transition: none;
}

/* Hero h1 — alignement avec la typo globale des autres pages
   (cf. Histoire qui utilise la même échelle clamp 42→98) */
.page-engagements .eng-hero h1 {
  font-size: clamp(44px, 6.8vw, 102px);
}

/* ============================================================================
   ENGAGEMENTS — Inversion couleurs (ivoire ↔ noir)
   - Toutes les sections ivoire passent en noir (intro, alt, pantone, séchage, CTA, fil)
   - La section certifications passe en ivoire (était noire)
   - Le hero et le mélèze immersif gardent leur traitement spécifique
   ============================================================================ */

/* Sections ivoire → noir */
.page-engagements .eng-intro,
.page-engagements .eng-alt,
.page-engagements .eng-pantone,
.page-engagements .eng-sechage,
.page-engagements .eng-cta,
.page-engagements .eng-thread-zone {
  background: var(--noir-2);
  color: var(--blanc-2);
}

/* Intro */
.page-engagements .eng-intro p { color: var(--blanc-2); }
.page-engagements .eng-intro p em { color: var(--or-2); }

/* Alt — bois local / main / transparence */
.page-engagements .eng-alt h2 { color: var(--blanc-2); }
.page-engagements .eng-alt h2 em { color: var(--or-2); }
.page-engagements .eng-alt p { color: #cbc6bd; }
.page-engagements .eng-alt p strong { color: var(--blanc-2); }
.page-engagements .eng-alt .alt-media .fname { color: var(--gris-clair-2); }
.page-engagements .eng-alt .alt-media .fname b { color: var(--or-2); }
.page-engagements .eng-alt .alt-media .frame::after { border-color: rgba(208,167,66,.28); }

/* Pantone — head texte clair, swatches blancs sur fond noir = contraste net */
.page-engagements .pantone-head h2 { color: var(--blanc-2); }
.page-engagements .pantone-head h2 em { color: var(--or-2); }
.page-engagements .pantone-head .lede { color: var(--gris-clair-2); }

/* Séchage — full inversion */
.page-engagements .eng-sechage h2 { color: var(--blanc-2); }
.page-engagements .eng-sechage h2 em { color: var(--or-2); }
.page-engagements .eng-sechage p { color: #cbc6bd; }
.page-engagements .eng-sechage p strong { color: var(--blanc-2); }
.page-engagements .ml-step .name { color: var(--blanc-2); }
.page-engagements .ml-step .duration { color: var(--gris-clair-2); }
.page-engagements .ml-step .hint { color: var(--gris-clair-2); }
.page-engagements .ml-step .dot {
  background: var(--noir-2);
  border-color: rgba(208,167,66,.45);
}
.page-engagements .ml-step:nth-child(2) .dot {
  border-color: var(--or-2);
  box-shadow: 0 0 0 4px rgba(208,167,66,.16);
}
.page-engagements .eng-sechage { border-top: 1px solid rgba(208,167,66,.18); }
.page-engagements .miniline .rail {
  background: linear-gradient(90deg,
    rgba(255,255,255,.18) 0%,
    rgba(208,167,66,.8) 30%,
    rgba(208,167,66,.8) 70%,
    rgba(255,255,255,.18) 100%);
}

/* CTA "Venez voir par vous-même" */
.page-engagements .eng-cta h2 { color: var(--blanc-2); }
.page-engagements .eng-cta h2 em { color: var(--or-2); }
.page-engagements .eng-cta p { color: #cbc6bd; }
.page-engagements .eng-cta p strong { color: var(--blanc-2); }
.page-engagements .eng-cta .btn-primary {
  background: var(--or-2); color: var(--noir-2);
  border: 1px solid var(--or-2);
}
.page-engagements .eng-cta .btn-primary:hover { background: var(--blanc-2); border-color: var(--blanc-2); }
.page-engagements .eng-cta .btn-ghost { border-color: rgba(255,255,255,.4); color: var(--blanc-2); }
.page-engagements .eng-cta .btn-ghost:hover { border-color: var(--or-2); color: var(--or-2); }

/* Fil conducteur sur fond noir — rail blanc ténu, fill toujours doré */
.page-engagements .eng-thread-axis .rail {
  background: linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.12) 4%,
    rgba(255,255,255,.12) 96%,
    rgba(255,255,255,0) 100%);
}

/* CERTIFICATIONS noir → ivoire (full inversion) */
.page-engagements .eng-certif {
  background: var(--ivoire-2);
  color: var(--noir-2);
  border-top: 1px solid rgba(2,2,3,.06);
}
.page-engagements .eng-certif::before {
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(208,167,66,.14) 0%, rgba(208,167,66,0) 60%),
    radial-gradient(40% 50% at 0% 100%, rgba(208,167,66,.08) 0%, rgba(208,167,66,0) 70%);
}
.page-engagements .eng-certif .certif-head h2 { color: var(--noir-2); }
.page-engagements .eng-certif .certif-head h2 em { color: var(--or-soft-2); }
.page-engagements .eng-certif .certif-head .eyebrow { color: var(--or-soft-2); }
.page-engagements .eng-certif .certif-head .eyebrow .dash { background: var(--or-soft-2); }
.page-engagements .eng-certif .certif-head .lede { color: var(--gris-2); }
/* Les sceaux gardent leur design noir/doré — superbe contraste sur fond ivoire */

/* ============================================================================
   ENGAGEMENTS — Polish final
   ============================================================================ */

/* Fix collision avec la règle globale .eng-cta (bouton de l'Accueil) qui
   forçait text-transform:uppercase + letter-spacing serré sur toute la
   section. On reset proprement au niveau de la section. */
.page-engagements .eng-cta {
  text-transform: none;
  letter-spacing: normal;
}
/* Paragraphe CTA aligné sur le style des autres pages (serif italique,
   normal case, taille cohérente avec ch-final, ext-final, caz-final). */
.page-engagements .eng-cta p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.55;
  letter-spacing: normal;
  text-transform: none;
  max-width: 60ch;
  margin: 0 auto;
}
.page-engagements .eng-cta p strong { font-style: italic; font-weight: 500; }

/* Glass design pour les 3 étapes de séchage —
   semi-transparent pour qu'on voie le rail doré passer derrière. */
.page-engagements .ml-step {
  position: relative;
  padding: 30px 18px 28px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 12px 32px rgba(0,0,0,.20);
  z-index: 2; /* au-dessus du rail doré */
}
/* L'étape centrale (active) gagne une bordure dorée légèrement plus marquée */
.page-engagements .eng-sechage .ml-step:nth-child(2) {
  border-color: rgba(208,167,66,.32);
  background: rgba(208,167,66,.06);
}
/* Fallback si le navigateur ne gère pas backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .page-engagements .ml-step { background: rgba(12,11,9,.55); }
}

/* ============================================================================
   ENGAGEMENTS — Logos certifications (remplace l'icône SVG fallback)
   ============================================================================ */
/* Quand un logo image est uploadé : on garde le contour circulaire doré du
   template d'origine, avec un fond ivoire pour faire ressortir les logos
   (qui sont quasi toujours sur fond blanc dans leurs versions officielles).
   → l'effet "médaillon avec une rondelle au centre" est préservé. */
.page-engagements .seal-front .glyph.has-logo {
  width: 84px; height: 84px;
  border: 1px solid rgba(208,167,66,.45);
  background: var(--ivoire-2);
  border-radius: 50%;
  padding: 12px;
  margin-bottom: 18px;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.55),
    0 6px 16px rgba(0,0,0,.28);
}
.page-engagements .seal-front .glyph.has-logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  filter: none;
}

/* ============================================================================
   ENGAGEMENTS — Hero filtre noir renforcé + CTA en 2 colonnes
   ============================================================================ */

/* Hero : filtre noir plus marqué pour une lisibilité parfaite du texte */
.page-engagements .eng-hero::after {
  background: linear-gradient(180deg,
    rgba(2,2,3,.72) 0%,
    rgba(2,2,3,.40) 35%,
    rgba(2,2,3,.50) 60%,
    rgba(2,2,3,.85) 100%);
}

/* CTA final : layout 2 colonnes pleine largeur — texte gauche, image
   collée au bord droit du viewport (pas de carte 4:5, pas de white space). */
.page-engagements .eng-cta {
  padding: 0;
  text-align: left;
  width: 100%;
  max-width: none;
}
.page-engagements .eng-cta .cta-inner {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  min-height: clamp(480px, 60vh, 720px);
}
.page-engagements .eng-cta .cta-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding:
    clamp(80px, 10vw, 140px)
    clamp(40px, 6vw, 96px)
    clamp(80px, 10vw, 140px)
    var(--pad-2);
}
.page-engagements .eng-cta h2 { max-width: 14ch; }
.page-engagements .eng-cta p { margin-left: 0; margin-right: 0; max-width: 50ch; }
.page-engagements .eng-cta .cta-rule { margin-left: 0; margin-right: auto; }
.page-engagements .eng-cta .cta-ctas { justify-content: flex-start; }

.page-engagements .eng-cta .cta-media {
  position: relative;
  overflow: hidden;
  align-self: stretch;
}
.page-engagements .eng-cta .cta-media .ph,
.page-engagements .eng-cta .cta-media .eng-cover-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.page-engagements .eng-cta .cta-media:hover .ph,
.page-engagements .eng-cta .cta-media:hover .eng-cover-img { transform: scale(1.04); }
.page-engagements .eng-cta .cta-media::after {
  content: ""; position: absolute; inset: 0;
  border-left: 1px solid rgba(208,167,66,.18);
  pointer-events: none;
}

/* Responsive : empile sous 900px, image au-dessus du texte */
@media (max-width: 900px) {
  .page-engagements .eng-cta .cta-inner { grid-template-columns: 1fr; min-height: auto; }
  .page-engagements .eng-cta .cta-media { aspect-ratio: 16/10; min-height: 0; order: -1; }
  .page-engagements .eng-cta .cta-media::after { border-left: none; border-bottom: 1px solid rgba(208,167,66,.18); }
  .page-engagements .eng-cta .cta-text { text-align: center; padding: clamp(60px, 9vw, 100px) var(--pad-2); }
  .page-engagements .eng-cta h2 { max-width: 18ch; margin-inline: auto; }
  .page-engagements .eng-cta p { max-width: 60ch; margin-inline: auto; }
  .page-engagements .eng-cta .cta-rule { margin-left: auto; margin-right: auto; }
  .page-engagements .eng-cta .cta-ctas { justify-content: center; }
}

/* ============================================================================
   ENGAGEMENTS + HISTOIRE — Désactive la contrainte de largeur Hello Elementor
   Hello Elementor applique une règle GLOBALE sur tous les <main> :
     main { max-width: 1140px; margin: 0 auto; padding: 0 10px; }
   sur les viewports ≥ 1200px. Ça crée des gouttières blanches sur nos
   pages full-bleed. On la fait sauter spécifiquement sur ces 2 pages.
   ============================================================================ */
body.page-id-4257 main,
body.page-id-4258 main,
main.page-engagements,
main.page-histoire {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================================================================
   PAGE VISITES PRIVÉES — scope .page-visites
   Scroll narratif sur la section story (3 lieux crossfadés au scroll).
   ============================================================================ */
.page-visites {
  --vp-noir: #020203;
  --vp-or: #d0a742;
  --vp-or-soft: #b9912e;
  --vp-or-deep: #8a6b1e;
  --vp-blanc: #ffffff;
  --vp-ivoire: #faf7f1;
  --vp-creme: #f5f1ea;
  --vp-creme-2: #ece6db;
  --vp-gris: #7a7770;
  --vp-gris-clair: #cbc6bd;
  --vp-pad: clamp(20px, 4.5vw, 72px);
}

/* Désactive la contrainte Hello Elementor sur main pour cette page */
body.page-id-4828 main,
main.page-visites {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Placeholders */
.page-visites .ph {
  position: relative;
  background: linear-gradient(135deg, #2a2722 0%, #3d362d 25%, #4a4239 50%, #352f28 75%, #1f1c18 100%);
  overflow: hidden; color: #cbc6bd;
}
.page-visites .ph::before {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.08) 0 1px, transparent 1px 22px);
  pointer-events: none;
}
.page-visites .ph::after {
  content: attr(data-label); position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(208,167,66,.6); padding: 8px 14px; border: 1px solid rgba(208,167,66,.28);
  white-space: nowrap; max-width: 90%; text-align: center;
}
.page-visites .ph-foret {
  background:
    radial-gradient(60% 40% at 30% 30%, rgba(120,80,30,.25), transparent 70%),
    linear-gradient(160deg, #0e1a10 0%, #1a2a18 30%, #2c3a25 60%, #1a2418 100%);
}
.page-visites .ph-atelier {
  background:
    radial-gradient(40% 30% at 70% 40%, rgba(208,167,66,.18), transparent 70%),
    linear-gradient(150deg, #1c140a 0%, #2e1f0e 30%, #4a3318 60%, #221608 100%);
}
.page-visites .ph-chantier {
  background:
    radial-gradient(70% 50% at 50% 30%, rgba(200,200,200,.10), transparent 70%),
    linear-gradient(165deg, #1a1815 0%, #2a2620 35%, #3a342a 60%, #1a1815 100%);
}

/* Image réelle (ACF) */
.page-visites .vp-cover-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* ============================================================================
   HERO
   ============================================================================ */
.page-visites .vp-hero {
  position: relative; height: 92vh; min-height: 680px;
  color: var(--vp-blanc);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; overflow: hidden; background: var(--vp-noir);
}
.page-visites .vp-hero > .ph,
.page-visites .vp-hero > .vp-cover-img { position: absolute; inset: 0; z-index: 0; }
.page-visites .vp-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(2,2,3,.6) 0%, rgba(2,2,3,.25) 35%, rgba(2,2,3,.35) 60%, rgba(2,2,3,.78) 100%);
  pointer-events: none;
}
.page-visites .vp-hero-inner {
  position: relative; z-index: 2; padding: 0 var(--vp-pad); max-width: 1180px;
  opacity: 0; transform: translateY(20px);
  animation: vpHeroIn 1.1s cubic-bezier(.2,.7,.2,1) .15s forwards;
}
@keyframes vpHeroIn { to { opacity: 1; transform: translateY(0); } }
.page-visites .vp-hero-eyebrow {
  font-size: 10px; letter-spacing: .5em; text-transform: uppercase;
  color: var(--vp-or); font-weight: 500; margin-bottom: 32px;
}
.page-visites .vp-hero h1 {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: clamp(48px, 7vw, 108px); line-height: 1.02; letter-spacing: -.01em;
  color: var(--vp-blanc); margin: 0;
}
.page-visites .vp-hero h1 em { font-style: normal; color: var(--vp-or); font-weight: 300; }
.page-visites .vp-hero-rule {
  width: 80px; height: 1px; background: var(--vp-or); margin: 42px auto 36px;
}
.page-visites .vp-hero-accroche {
  max-width: 760px; margin: 0 auto;
  font-family: var(--serif); font-weight: 300; font-size: clamp(18px, 1.55vw, 23px);
  line-height: 1.55; color: #e9e3d6; letter-spacing: .01em;
}
.page-visites .vp-hero-accroche em { color: var(--vp-or); font-style: italic; }
.page-visites .vp-hero-scroll {
  position: absolute; bottom: 42px; left: 50%; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  font-size: 10px; letter-spacing: .4em; text-transform: uppercase;
  color: #fff; text-decoration: none;
}
.page-visites .vp-hero-scroll .line {
  width: 1px; height: 54px; background: rgba(255,255,255,.4); position: relative; overflow: hidden;
}
.page-visites .vp-hero-scroll .line::after {
  content: ""; position: absolute; top: -54px; left: 0; width: 1px; height: 54px;
  background: var(--vp-or); animation: vpScrollLine 2.6s ease-in-out infinite;
}
@keyframes vpScrollLine { 0% { top: -54px } 100% { top: 54px } }

/* ============================================================================
   INTRO
   ============================================================================ */
.page-visites .vp-intro {
  background: var(--vp-ivoire);
  padding: clamp(100px, 14vw, 180px) var(--vp-pad);
  text-align: center; position: relative;
}
.page-visites .vp-intro-inner {
  max-width: 920px; margin: 0 auto;
  opacity: 0; transform: translateY(30px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
.page-visites .vp-intro.is-visible .vp-intro-inner { opacity: 1; transform: translateY(0); }
.page-visites .vp-intro .eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 10px; letter-spacing: .5em; text-transform: uppercase;
  color: var(--vp-or-soft); font-weight: 600; margin-bottom: 28px;
}
.page-visites .vp-intro .eyebrow .dash { width: 22px; height: 1px; background: var(--vp-or-soft); }
.page-visites .vp-intro h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(38px, 5.2vw, 68px); line-height: 1.05; letter-spacing: -.01em;
  margin-bottom: 36px; color: var(--vp-noir);
}
.page-visites .vp-intro h2 em { font-style: italic; color: var(--vp-or-soft); }
.page-visites .vp-intro .intro-rule {
  width: 48px; height: 1px; background: var(--vp-or); margin: 36px auto 36px;
}
.page-visites .vp-intro p {
  color: #3d3a34; font-size: 16.5px; line-height: 1.9; margin-bottom: 22px;
  max-width: 680px; margin-inline: auto; text-wrap: pretty;
}
.page-visites .vp-intro p strong { color: var(--vp-noir); font-weight: 500; }

/* ============================================================================
   STORY — Scroll narratif horizontal
   Desktop : la section fait 300vh ; sticky du stage pendant qu'on scrolle,
   la track horizontale (3 panneaux côte à côte) translate de gauche à droite
   au fil de la molette. Mobile : on transforme la track en carrousel
   horizontal scrollable au doigt avec scroll-snap.
   ============================================================================ */
.page-visites .vp-story {
  position: relative;
  height: 300vh;
  background: var(--vp-noir);
}
.page-visites .vp-story-stage {
  position: sticky; top: 0;
  height: 100vh; width: 100%; overflow: hidden;
  color: var(--vp-blanc);
}

/* Track horizontale : 3 panneaux côte à côte */
.page-visites .vp-story-track {
  display: flex;
  width: 300%; /* 3 panels = 300% du stage */
  height: 100%;
  will-change: transform;
}
.page-visites .vp-panel {
  flex: 0 0 calc(100% / 3); /* chaque panel = 1/3 du track = 100% du viewport */
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* Image de fond du panel */
.page-visites .vp-panel-bg {
  position: absolute; inset: 0; z-index: 0;
  transform: scale(1.08);
  transition: transform 1.6s ease;
  will-change: transform;
}
.page-visites .vp-panel.is-active .vp-panel-bg { transform: scale(1.0); }
.page-visites .vp-panel-bg .ph,
.page-visites .vp-panel-bg .vp-cover-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Voile sombre pour la lisibilité */
.page-visites .vp-panel-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(2,2,3,.50) 0%,
      rgba(2,2,3,.35) 35%,
      rgba(2,2,3,.45) 65%,
      rgba(2,2,3,.78) 100%),
    radial-gradient(70% 50% at 30% 60%, rgba(2,2,3,0) 0%, rgba(2,2,3,.45) 100%);
}

/* Bloc texte (positionné en bas-gauche du panel) */
.page-visites .vp-panel-text {
  position: absolute;
  left: var(--vp-pad);
  right: var(--vp-pad);
  bottom: clamp(120px, 16vh, 180px);
  z-index: 2;
  max-width: 720px;
  color: var(--vp-blanc);
}
.page-visites .vp-panel-text .tag {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 10px; letter-spacing: .5em; text-transform: uppercase;
  color: var(--vp-or); font-weight: 500; margin-bottom: 22px;
}
.page-visites .vp-panel-text .tag .dash {
  width: 22px; height: 1px; background: var(--vp-or);
}
.page-visites .vp-panel-text .panel-num {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(60px, 8vw, 120px); line-height: 1;
  color: var(--vp-or); margin-bottom: -12px; letter-spacing: -.02em;
}
.page-visites .vp-panel-text h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 5.4vw, 76px); line-height: 1.05; letter-spacing: -.01em;
  margin-bottom: 22px; color: var(--vp-blanc); max-width: 14ch;
}
.page-visites .vp-panel-text h3 em { font-style: italic; color: var(--vp-or); }
.page-visites .vp-panel-text .sub {
  display: inline-block; font-family: var(--serif); font-style: italic;
  font-size: 18px; color: var(--vp-or); margin-bottom: 22px; letter-spacing: .02em;
}
.page-visites .vp-panel-text p {
  color: #e9e3d6; font-size: 16.5px; line-height: 1.85;
  max-width: 54ch; text-wrap: pretty;
  margin: 0;
}
.page-visites .vp-panel-text p strong { color: var(--vp-or); font-weight: 500; }

/* Compteur 01 / 03 — top-right */
.page-visites .vp-story-counter {
  position: absolute; top: 36px; right: var(--vp-pad); z-index: 5;
  font-family: var(--serif); font-style: italic; font-size: 14px;
  color: rgba(255,255,255,.6); letter-spacing: .2em;
  display: flex; align-items: baseline; gap: 8px;
}
.page-visites .vp-story-counter .cur {
  font-size: 30px; font-style: normal; color: var(--vp-or); font-weight: 500;
  letter-spacing: 0; min-width: 1.2em; text-align: right;
}
.page-visites .vp-story-counter .total {
  font-size: 14px; color: rgba(255,255,255,.5);
}

/* Indicateurs cliquables — bottom centered */
.page-visites .vp-story-dots {
  position: absolute;
  bottom: 36px; left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex; gap: clamp(20px, 4vw, 56px);
  align-items: flex-start;
}
.page-visites .vp-story-dot {
  background: transparent; border: none; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: rgba(255,255,255,.5);
  cursor: pointer;
  transition: color .35s ease;
  font: inherit;
  text-align: center;
}
.page-visites .vp-story-dot.is-active { color: var(--vp-blanc); }
.page-visites .vp-story-dot .bar {
  width: 32px; height: 1px;
  background: rgba(255,255,255,.25);
  position: relative; overflow: hidden;
  transition: background .35s ease;
}
.page-visites .vp-story-dot .bar::after {
  content: ""; position: absolute; left: -32px; top: 0;
  width: 32px; height: 1px;
  background: var(--vp-or);
  transition: left .6s cubic-bezier(.2,.7,.2,1);
}
.page-visites .vp-story-dot.is-active .bar::after { left: 0; }
.page-visites .vp-story-dot .lbl {
  font-size: 10px; letter-spacing: .4em; text-transform: uppercase; font-weight: 600;
}
.page-visites .vp-story-dot .place {
  font-family: var(--serif); font-size: 15px; line-height: 1.2; letter-spacing: -.005em;
}

/* ============================================================================
   COMMENT ÇA SE PASSE
   ============================================================================ */
.page-visites .vp-how {
  background: var(--vp-ivoire);
  padding: clamp(100px, 14vw, 180px) var(--vp-pad);
  position: relative;
}
.page-visites .vp-how-inner {
  max-width: 1100px; margin: 0 auto; text-align: center;
  opacity: 0; transform: translateY(30px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
.page-visites .vp-how.is-visible .vp-how-inner { opacity: 1; transform: translateY(0); }
.page-visites .vp-how .eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 10px; letter-spacing: .5em; text-transform: uppercase;
  color: var(--vp-or-soft); font-weight: 600; margin-bottom: 36px;
}
.page-visites .vp-how .eyebrow .dash { width: 22px; height: 1px; background: var(--vp-or-soft); }
.page-visites .vp-how blockquote {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(28px, 3.8vw, 52px); line-height: 1.18; letter-spacing: -.005em;
  color: var(--vp-noir); max-width: 1000px; margin: 0 auto;
}
.page-visites .vp-how blockquote::before { content: "« "; color: var(--vp-or-soft); font-style: normal; }
.page-visites .vp-how blockquote::after { content: " »"; color: var(--vp-or-soft); font-style: normal; }
.page-visites .vp-how .how-rule {
  width: 60px; height: 1px; background: var(--vp-or); margin: 56px auto;
}
.page-visites .vp-how p {
  color: #3d3a34; font-size: 16px; line-height: 1.9; margin-bottom: 20px;
  max-width: 720px; margin-inline: auto; text-wrap: pretty;
}
.page-visites .vp-how p strong { color: var(--vp-noir); font-weight: 500; }
.page-visites .vp-how-steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin-top: 64px; text-align: left;
  border-top: 1px solid rgba(2,2,3,.1); padding-top: 32px;
}
.page-visites .vp-how-step { padding: 0 4px; }
.page-visites .vp-how-step .n {
  font-family: var(--serif); font-style: italic; font-size: 13px;
  color: var(--vp-or-soft); letter-spacing: .22em; margin-bottom: 8px;
}
.page-visites .vp-how-step h4 {
  font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.15;
  margin-bottom: 8px; letter-spacing: -.005em; color: var(--vp-noir);
}
.page-visites .vp-how-step p {
  font-size: 13.5px; line-height: 1.65; color: var(--vp-gris);
  margin: 0; max-width: none; text-align: left;
}

/* ============================================================================
   CURIEUX — bloc secondaire léger
   ============================================================================ */
.page-visites .vp-curious {
  background: var(--vp-creme);
  padding: clamp(70px, 9vw, 110px) var(--vp-pad);
  border-top: 1px solid rgba(2,2,3,.05);
  border-bottom: 1px solid rgba(2,2,3,.05);
}
.page-visites .vp-curious-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: auto 1fr auto;
  gap: clamp(28px, 5vw, 60px); align-items: center;
  opacity: 0; transform: translateY(20px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
.page-visites .vp-curious.is-visible .vp-curious-inner { opacity: 1; transform: translateY(0); }
.page-visites .vp-curious .badge {
  width: 80px; height: 80px; border-radius: 50%;
  border: 1px solid var(--vp-or-soft);
  display: grid; place-items: center;
  font-family: var(--serif); font-style: italic; font-size: 24px;
  color: var(--vp-or-soft); background: rgba(208,167,66,.06);
  flex-shrink: 0;
}
.page-visites .vp-curious .body .lbl {
  font-size: 10px; letter-spacing: .4em; text-transform: uppercase;
  color: var(--vp-or-soft); font-weight: 600; margin-bottom: 10px;
}
.page-visites .vp-curious .body h3 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.15; margin-bottom: 12px; letter-spacing: -.005em; color: var(--vp-noir);
}
.page-visites .vp-curious .body p { color: #3d3a34; font-size: 15px; line-height: 1.75; max-width: 54ch; }
.page-visites .vp-curious .arrow {
  align-self: center;
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--vp-noir);
  border-bottom: 1px solid var(--vp-noir); padding-bottom: 6px;
  transition: all .25s ease; white-space: nowrap;
  text-decoration: none;
}
.page-visites .vp-curious .arrow:hover {
  color: var(--vp-or-soft); border-color: var(--vp-or-soft); gap: 20px;
}

/* ============================================================================
   CTA FINAL
   ============================================================================ */
.page-visites .vp-cta {
  position: relative; background: var(--vp-noir); color: var(--vp-blanc);
  padding: clamp(100px, 14vw, 180px) var(--vp-pad);
  text-align: center; overflow: hidden;
}
.page-visites .vp-cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(208,167,66,.10) 0%, rgba(208,167,66,0) 60%),
    radial-gradient(40% 50% at 100% 100%, rgba(208,167,66,.06) 0%, rgba(208,167,66,0) 70%);
}
.page-visites .vp-cta-inner { max-width: 920px; margin: 0 auto; position: relative; z-index: 1; }
.page-visites .vp-cta .eyebrow {
  font-size: 10px; letter-spacing: .5em; text-transform: uppercase;
  color: var(--vp-or); font-weight: 500; margin-bottom: 32px; display: block;
}
.page-visites .vp-cta h2 {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: clamp(42px, 5.8vw, 80px); line-height: 1.05; letter-spacing: -.01em;
  color: var(--vp-blanc);
}
.page-visites .vp-cta h2 em { color: var(--vp-or); font-style: normal; font-weight: 300; }
.page-visites .vp-cta .cta-rule {
  width: 60px; height: 1px; background: var(--vp-or); margin: 44px auto;
}
.page-visites .vp-cta p {
  max-width: 640px; margin: 0 auto; font-size: 16px; line-height: 1.85; color: #cbc6bd;
}
.page-visites .vp-cta p strong { color: var(--vp-blanc); font-weight: 500; }
.page-visites .vp-cta-ctas {
  margin-top: 48px; display: flex; justify-content: center; gap: 18px; flex-wrap: wrap;
}
.page-visites .btn-primary,
.page-visites .btn-ghost {
  padding: 20px 36px; font-size: 11px; letter-spacing: .32em; text-transform: uppercase;
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 14px; transition: all .25s ease;
  text-decoration: none;
}
.page-visites .btn-primary { background: var(--vp-or); color: var(--vp-noir); }
.page-visites .btn-primary:hover { background: var(--vp-blanc); }
.page-visites .btn-ghost { border: 1px solid rgba(255,255,255,.4); color: var(--vp-blanc); }
.page-visites .btn-ghost:hover { border-color: var(--vp-or); color: var(--vp-or); }
.page-visites .btn-primary .arr,
.page-visites .btn-ghost .arr {
  width: 22px; height: 1px; background: currentColor; position: relative;
}
.page-visites .btn-primary .arr::after,
.page-visites .btn-ghost .arr::after {
  content: ""; position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 1100px) {
  .page-visites .vp-how-steps { grid-template-columns: 1fr; gap: 24px; text-align: left; }
  .page-visites .vp-story-dot .place { font-size: 13px; }
}
@media (max-width: 760px) {
  /* Mobile : carrousel swipe horizontal au doigt — on désactive le pin */
  .page-visites .vp-story {
    height: auto;
    background: var(--vp-noir);
  }
  .page-visites .vp-story-stage {
    position: relative; top: auto; height: auto;
    min-height: 90vh;
  }
  /* La track devient scrollable au doigt avec scroll-snap */
  .page-visites .vp-story-track {
    display: flex;
    width: 100%;
    height: 90vh;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    transform: none !important;
    scrollbar-width: none;
  }
  .page-visites .vp-story-track::-webkit-scrollbar { display: none; }
  .page-visites .vp-panel {
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  /* Toujours montrer l'image bg active sur le panel courant */
  .page-visites .vp-panel-bg { transform: scale(1); }

  /* Compteur : on le repositionne discrètement */
  .page-visites .vp-story-counter {
    top: 24px; right: var(--vp-pad);
    font-size: 11px;
  }
  .page-visites .vp-story-counter .cur { font-size: 22px; }

  /* Dots : on les place sous le carrousel, plus serrés */
  .page-visites .vp-story-dots {
    position: relative;
    bottom: auto; left: auto;
    transform: none;
    margin: 28px auto;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 0 var(--vp-pad);
  }
  .page-visites .vp-story-dot .place { font-size: 13px; }

  /* Texte panel : réduit, plus haut */
  .page-visites .vp-panel-text {
    bottom: clamp(80px, 14vh, 130px);
    max-width: 100%;
  }
  .page-visites .vp-panel-text h3 { font-size: clamp(32px, 9vw, 56px); }
  .page-visites .vp-panel-text .panel-num { font-size: clamp(48px, 14vw, 88px); }
  .page-visites .vp-panel-text p { font-size: 14.5px; }

  .page-visites .vp-curious-inner { grid-template-columns: 1fr; text-align: center; gap: 24px; }
  .page-visites .vp-curious .badge { margin: 0 auto; }
  .page-visites .vp-curious .arrow { justify-self: center; }
}

/* ============================================================================
   VISITES PRIVÉES — Inversion intro + how en noir
   ============================================================================ */
.page-visites .vp-intro,
.page-visites .vp-how {
  background: var(--vp-noir);
  color: var(--vp-blanc);
}

/* INTRO */
.page-visites .vp-intro h2 { color: var(--vp-blanc); }
.page-visites .vp-intro h2 em { color: var(--vp-or); }
.page-visites .vp-intro p { color: #cbc6bd; }
.page-visites .vp-intro p strong { color: var(--vp-blanc); font-weight: 500; }
.page-visites .vp-intro .eyebrow { color: var(--vp-or); }
.page-visites .vp-intro .eyebrow .dash { background: var(--vp-or); }

/* COMMENT ÇA SE PASSE */
.page-visites .vp-how .eyebrow { color: var(--vp-or); }
.page-visites .vp-how .eyebrow .dash { background: var(--vp-or); }
.page-visites .vp-how blockquote { color: var(--vp-blanc); }
.page-visites .vp-how blockquote::before,
.page-visites .vp-how blockquote::after { color: var(--vp-or); }
.page-visites .vp-how p { color: #cbc6bd; }
.page-visites .vp-how p strong { color: var(--vp-blanc); font-weight: 500; }
.page-visites .vp-how-steps { border-top-color: rgba(255,255,255,.12); }
.page-visites .vp-how-step .n { color: var(--vp-or); }
.page-visites .vp-how-step h4 { color: var(--vp-blanc); }
.page-visites .vp-how-step p { color: var(--vp-gris-clair); }

/* ============================================================================
   VISITES PRIVÉES — Hero filter renforcé (double couche pour lisibilité max)
   ============================================================================ */
.page-visites .vp-hero::after {
  background:
    linear-gradient(180deg,
      rgba(2,2,3,.88) 0%,
      rgba(2,2,3,.62) 35%,
      rgba(2,2,3,.68) 60%,
      rgba(2,2,3,.92) 100%),
    rgba(2,2,3,.25);
}

/* ============================================================================
   ENGAGEMENTS — Mélèze : filtre encore plus marqué (lisibilité texte)
   ============================================================================ */
.page-engagements .eng-meleze::before {
  background: linear-gradient(180deg,
    rgba(2,2,3,.86) 0%,
    rgba(2,2,3,.72) 35%,
    rgba(2,2,3,.76) 65%,
    rgba(2,2,3,.88) 100%) !important;
}

/* ============================================================================
   VISITES PRIVÉES — Filtre renforcé spécifique sur la diapo 2 (À l'atelier)
   La photo de l'atelier est plus claire que la forêt et le chantier ;
   on assombrit son overlay pour rééquilibrer la lisibilité du texte.
   ============================================================================ */
.page-visites .vp-panel[data-i="1"] .vp-panel-overlay {
  background:
    linear-gradient(180deg,
      rgba(2,2,3,.68) 0%,
      rgba(2,2,3,.52) 35%,
      rgba(2,2,3,.58) 65%,
      rgba(2,2,3,.86) 100%),
    radial-gradient(70% 50% at 30% 60%, rgba(2,2,3,.12) 0%, rgba(2,2,3,.55) 100%);
}

/* ============================================================================
   VISITES PRIVÉES — Filtre renforcé sur le lieu 3 (Chantier), mobile uniquement
   ============================================================================ */
@media (max-width: 760px) {
  .page-visites .vp-panel[data-i="2"] .vp-panel-overlay {
    background:
      linear-gradient(180deg,
        rgba(2,2,3,.70) 0%,
        rgba(2,2,3,.55) 35%,
        rgba(2,2,3,.62) 65%,
        rgba(2,2,3,.88) 100%),
      radial-gradient(70% 50% at 30% 60%, rgba(2,2,3,.14) 0%, rgba(2,2,3,.58) 100%);
  }
}

/* ============================================================================
   PAGE CONTACT — scope .page-contact
   ============================================================================ */
.page-contact {
  --ct-noir: #020203;
  --ct-or: #d0a742;
  --ct-or-soft: #b9912e;
  --ct-or-deep: #8a6b1e;
  --ct-blanc: #ffffff;
  --ct-ivoire: #faf7f1;
  --ct-creme: #f5f1ea;
  --ct-creme-2: #ece6db;
  --ct-gris: #7a7770;
  --ct-gris-clair: #cbc6bd;
  --ct-pad: clamp(20px, 4.5vw, 72px);
}

body.page-id-4905 main,
main.page-contact {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.page-contact .ph {
  position: relative;
  background:
    radial-gradient(60% 40% at 30% 30%, rgba(208,167,66,.18), transparent 70%),
    linear-gradient(155deg, #2a2118 0%, #1a140c 100%);
  overflow: hidden;
}
.page-contact .ph::after {
  content: attr(data-label); position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(208,167,66,.6); padding: 8px 14px;
  border: 1px solid rgba(208,167,66,.28);
  white-space: nowrap; max-width: 90%; text-align: center;
}
.page-contact .ct-cover-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* HERO */
.page-contact .ct-hero {
  position: relative;
  height: 60vh; min-height: 480px;
  color: var(--ct-blanc);
  display: flex; align-items: center;
  overflow: hidden;
  background: var(--ct-noir);
}
.page-contact .ct-hero > .ph,
.page-contact .ct-hero > .ct-cover-img { position: absolute; inset: 0; z-index: 0; }
.page-contact .ct-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(2,2,3,.65) 0%, rgba(2,2,3,.40) 50%, rgba(2,2,3,.70) 100%);
}
.page-contact .ct-hero-inner {
  position: relative; z-index: 2;
  max-width: 1180px; width: 100%; margin: 0 auto;
  padding: clamp(60px, 10vw, 110px) var(--ct-pad);
}
.page-contact .ct-hero h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(44px, 6.4vw, 98px); line-height: 1.02;
  letter-spacing: -.01em; color: var(--ct-blanc);
  margin: 0 0 24px; max-width: 18ch;
}
.page-contact .ct-hero h1 em { font-style: italic; color: var(--ct-or); font-weight: 300; }
.page-contact .ct-hero-sub {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(18px, 1.6vw, 24px); line-height: 1.55;
  color: #e9e3d6; max-width: 760px; margin: 0;
}
.page-contact .ct-hero-sub strong { color: var(--ct-or); font-weight: 400; }

/* Eyebrows + H2 unifiés */
.page-contact .eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 10px; letter-spacing: .5em; text-transform: uppercase;
  color: var(--ct-or-soft); font-weight: 600;
  margin-bottom: 24px;
}
.page-contact .eyebrow .dash { width: 22px; height: 1px; background: var(--ct-or-soft); }
.page-contact h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(36px, 4.6vw, 60px); line-height: 1.08;
  letter-spacing: -.008em;
  margin: 0 0 24px;
}
.page-contact h2 em { font-style: italic; color: var(--ct-or-soft); }

/* Reveal au scroll — désactivé sur cette page utilitaire (page Contact) :
   pas de fade-in pour ne pas créer d'effet d'apparition étrange entre les
   sections noir/ivoire qui s'enchaînent.
.page-contact .ct-form, .page-contact .ct-direct,
.page-contact .ct-atelier, .page-contact .ct-zone {
  opacity: 0; transform: translateY(20px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
.page-contact .ct-form.is-visible, .page-contact .ct-direct.is-visible,
.page-contact .ct-atelier.is-visible, .page-contact .ct-zone.is-visible {
  opacity: 1; transform: translateY(0);
}
*/

/* FORMULAIRE */
.page-contact .ct-form {
  background: var(--ct-ivoire);
  padding: clamp(80px, 11vw, 140px) var(--ct-pad);
}
.page-contact .ct-form-inner {
  max-width: 780px; margin: 0 auto; text-align: center;
}
.page-contact .ct-form-inner h2 { color: var(--ct-noir); max-width: 22ch; margin-inline: auto; }
.page-contact .ct-form-intro {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(17px, 1.4vw, 21px); line-height: 1.55;
  color: var(--ct-gris); margin: 28px auto 48px;
  max-width: 640px;
}
.page-contact .ct-form-shell {
  background: var(--ct-blanc);
  border: 1px solid rgba(2,2,3,.08);
  padding: clamp(28px, 4vw, 48px);
  text-align: left;
  box-shadow: 0 20px 40px -20px rgba(2,2,3,.10);
}
.page-contact .ct-form-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 8px;
  padding: clamp(40px, 7vw, 80px) 20px;
  border: 1px dashed rgba(208,167,66,.5);
  border-radius: 4px;
  background: rgba(208,167,66,.04);
}
.page-contact .ct-form-placeholder-label {
  font-family: var(--serif); font-style: italic;
  font-size: 20px; color: var(--ct-or-soft);
}
.page-contact .ct-form-placeholder-hint {
  font-size: 13px; color: var(--ct-gris); max-width: 50ch; line-height: 1.6;
}
.page-contact .ct-form-placeholder-hint code {
  background: rgba(2,2,3,.06); padding: 2px 6px; border-radius: 3px;
  font-family: ui-monospace, Menlo, monospace; font-size: 12px;
  color: var(--ct-noir);
}

/* CONTACT DIRECT (noir) */
.page-contact .ct-direct {
  background: var(--ct-noir); color: var(--ct-blanc);
  padding: clamp(80px, 11vw, 140px) var(--ct-pad);
}
.page-contact .ct-direct-inner {
  max-width: 1240px; margin: 0 auto; text-align: center;
}
.page-contact .ct-direct .eyebrow { color: var(--ct-or); }
.page-contact .ct-direct .eyebrow .dash { background: var(--ct-or); }
.page-contact .ct-direct h2 { color: var(--ct-blanc); max-width: 18ch; margin-inline: auto; }
.page-contact .ct-direct h2 em { color: var(--ct-or); }
.page-contact .ct-direct-intro {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55;
  color: var(--ct-gris-clair); margin: 24px auto 56px;
  max-width: 620px;
}
.page-contact .ct-direct-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 40px);
}
.page-contact .ct-direct-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 12px; padding: 36px 24px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  transition: border-color .35s ease, background .35s ease, transform .35s ease;
}
.page-contact .ct-direct-card:hover {
  border-color: rgba(208,167,66,.32);
  background: rgba(208,167,66,.04);
  transform: translateY(-3px);
}
.page-contact .ct-direct-card .icon {
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(208,167,66,.45);
  color: var(--ct-or);
  margin-bottom: 8px;
}
.page-contact .ct-direct-card .icon svg { width: 22px; height: 22px; }
.page-contact .ct-direct-card .lbl {
  font-size: 10px; letter-spacing: .4em; text-transform: uppercase;
  color: var(--ct-or); font-weight: 600;
}
.page-contact .ct-direct-card .value {
  font-family: var(--serif); font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.35; color: var(--ct-blanc);
  text-decoration: none;
  transition: color .25s ease;
  max-width: 100%; word-wrap: break-word;
}
.page-contact .ct-direct-card a.value:hover { color: var(--ct-or); }
.page-contact .ct-direct-card .hint {
  font-size: 12.5px; color: var(--ct-gris-clair); margin-top: 4px;
}

/* ATELIER + CARTE */
.page-contact .ct-atelier {
  background: var(--ct-creme);
  padding: clamp(80px, 11vw, 140px) var(--ct-pad);
}
.page-contact .ct-atelier-inner {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 6vw, 80px); align-items: center;
}
.page-contact .ct-atelier-text { color: var(--ct-noir); }
.page-contact .ct-atelier-text h2 { max-width: 16ch; }
.page-contact .ct-atelier-text p {
  color: #3d3a34; font-size: 16px; line-height: 1.85;
  margin: 0 0 18px; max-width: 52ch;
}
.page-contact .ct-atelier-text p strong { color: var(--ct-noir); font-weight: 500; }
.page-contact .ct-atelier-meta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 28px !important;
  padding-top: 22px;
  border-top: 1px solid rgba(2,2,3,.12);
  font-size: 14px !important; line-height: 1.6 !important;
}
.page-contact .ct-atelier-meta .separator { color: var(--ct-or-soft); }
.page-contact .ct-atelier-meta a {
  color: var(--ct-or-soft); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
  transition: color .25s ease;
}
.page-contact .ct-atelier-meta a:hover { color: var(--ct-noir); }

.page-contact .ct-atelier-map {
  position: relative;
  aspect-ratio: 5/4;
  background: var(--ct-creme-2);
  border: 1px solid rgba(2,2,3,.08);
  overflow: hidden;
  box-shadow: 0 24px 48px -24px rgba(2,2,3,.20);
}
.page-contact .ct-atelier-map iframe,
.page-contact .ct-atelier-map > * {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  border: 0;
}
.page-contact .ct-map-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 24px;
  text-align: center;
  color: var(--ct-gris);
}
.page-contact .ct-map-placeholder svg {
  width: 56px; height: 56px; color: rgba(208,167,66,.55);
  margin-bottom: 6px;
}
.page-contact .ct-map-placeholder span {
  font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--ct-or-soft);
}
.page-contact .ct-map-placeholder small {
  font-size: 12.5px; color: var(--ct-gris); max-width: 36ch; line-height: 1.6;
}

/* ZONE D'INTERVENTION */
.page-contact .ct-zone {
  background: var(--ct-ivoire);
  padding: clamp(60px, 8vw, 100px) var(--ct-pad);
  border-top: 1px solid rgba(2,2,3,.06);
}
.page-contact .ct-zone-inner {
  max-width: 920px; margin: 0 auto; text-align: center;
}
.page-contact .ct-zone .eyebrow {
  color: var(--ct-or-soft); margin-bottom: 18px;
}
.page-contact .ct-zone p {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(20px, 2vw, 28px); line-height: 1.4;
  color: var(--ct-noir); letter-spacing: -.005em;
  margin: 0; max-width: 680px; margin-inline: auto;
}
.page-contact .ct-zone p strong { color: var(--ct-or-soft); font-weight: 400; font-style: italic; }

/* RESPONSIVE */
@media (max-width: 980px) {
  .page-contact .ct-direct-grid { grid-template-columns: 1fr; gap: 20px; }
  .page-contact .ct-atelier-inner { grid-template-columns: 1fr; gap: 40px; }
  .page-contact .ct-atelier-map { aspect-ratio: 4/3; }
}
@media (max-width: 540px) {
  .page-contact .ct-hero { height: 65vh; min-height: 420px; }
  .page-contact .ct-direct-card { padding: 28px 18px; }
  .page-contact .ct-direct-card .value { font-size: 18px; }
}

/* ============================================================================
   CONTACT — Inversion section "Premier échange" en noir + formulaire glass
   ============================================================================ */
.page-contact .ct-form {
  background: var(--ct-noir);
  color: var(--ct-blanc);
}
.page-contact .ct-form .eyebrow { color: var(--ct-or); }
.page-contact .ct-form .eyebrow .dash { background: var(--ct-or); }
.page-contact .ct-form-inner h2 { color: var(--ct-blanc); }
.page-contact .ct-form-inner h2 em { color: var(--ct-or); }
.page-contact .ct-form-intro { color: var(--ct-gris-clair); }

/* Conteneur formulaire en glass design — translucide sur fond noir */
.page-contact .ct-form-shell {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 24px 60px rgba(0,0,0,.35);
}

/* Placeholder du formulaire — adapté au fond sombre */
.page-contact .ct-form-placeholder {
  background: rgba(208,167,66,.06);
  border-color: rgba(208,167,66,.42);
}
.page-contact .ct-form-placeholder-label { color: var(--ct-or); }
.page-contact .ct-form-placeholder-hint { color: var(--ct-gris-clair); }
.page-contact .ct-form-placeholder-hint code {
  background: rgba(255,255,255,.10);
  color: var(--ct-blanc);
}

/* Style des inputs WP Forms injectés (texte clair sur glass) */
.page-contact .ct-form-shell .wpforms-container label,
.page-contact .ct-form-shell .wpforms-container .wpforms-field-label { color: var(--ct-blanc) !important; }
.page-contact .ct-form-shell .wpforms-container input[type="text"],
.page-contact .ct-form-shell .wpforms-container input[type="email"],
.page-contact .ct-form-shell .wpforms-container input[type="tel"],
.page-contact .ct-form-shell .wpforms-container textarea,
.page-contact .ct-form-shell .wpforms-container select {
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: var(--ct-blanc) !important;
}
.page-contact .ct-form-shell .wpforms-container input::placeholder,
.page-contact .ct-form-shell .wpforms-container textarea::placeholder {
  color: rgba(255,255,255,.45) !important;
}
.page-contact .ct-form-shell .wpforms-container button[type="submit"] {
  background: var(--ct-or) !important;
  color: var(--ct-noir) !important;
  border: none !important;
  font-weight: 600 !important;
  letter-spacing: .2em;
  text-transform: uppercase;
  transition: background .25s ease, color .25s ease;
}
.page-contact .ct-form-shell .wpforms-container button[type="submit"]:hover {
  background: var(--ct-blanc) !important;
}

/* Fallback navigateur sans backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .page-contact .ct-form-shell { background: rgba(11,10,8,.55); }
}

/* ============================================================================
   CONTACT — Section "Nous recevons à l'atelier" passe en noir aussi
   ============================================================================ */
.page-contact .ct-atelier {
  background: var(--ct-noir);
  color: var(--ct-blanc);
}
.page-contact .ct-atelier .eyebrow { color: var(--ct-or); }
.page-contact .ct-atelier .eyebrow .dash { background: var(--ct-or); }
.page-contact .ct-atelier-text { color: var(--ct-blanc); }
.page-contact .ct-atelier-text h2 { color: var(--ct-blanc); }
.page-contact .ct-atelier-text h2 em { color: var(--ct-or); }
.page-contact .ct-atelier-text p { color: var(--ct-gris-clair); }
.page-contact .ct-atelier-text p strong { color: var(--ct-blanc); font-weight: 500; }
.page-contact .ct-atelier-meta {
  border-top-color: rgba(255,255,255,.12) !important;
  color: var(--ct-gris-clair);
}
.page-contact .ct-atelier-meta .separator { color: var(--ct-or); }
.page-contact .ct-atelier-meta a { color: var(--ct-or); }
.page-contact .ct-atelier-meta a:hover { color: var(--ct-blanc); }

/* Carte : cadre adapté au fond noir */
.page-contact .ct-atelier-map {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(208,167,66,.22);
  box-shadow: 0 24px 48px -24px rgba(0,0,0,.55);
}
.page-contact .ct-map-placeholder { color: var(--ct-gris-clair); }
.page-contact .ct-map-placeholder small { color: var(--ct-gris-clair); }

/* ============================================================================
   CONTACT — Uniformise la largeur de tous les champs WP Forms
   (le textarea par défaut prend 100%, on le contraint à la même largeur que
   les inputs Email/Téléphone/Select)
   ============================================================================ */
.page-contact .ct-form-shell .wpforms-container .wpforms-field {
  max-width: 720px;
}
.page-contact .ct-form-shell .wpforms-container .wpforms-field input,
.page-contact .ct-form-shell .wpforms-container .wpforms-field select,
.page-contact .ct-form-shell .wpforms-container .wpforms-field textarea {
  max-width: 100% !important;
  width: 100% !important;
}
/* Sécurité : neutralise les variantes WP Forms "Large" qui forcent 100% du conteneur */
.page-contact .ct-form-shell .wpforms-container .wpforms-field-large,
.page-contact .ct-form-shell .wpforms-container .wpforms-field-medium,
.page-contact .ct-form-shell .wpforms-container .wpforms-field-small {
  max-width: 720px;
}

/* ============================================================================
   CONTACT — Force la typo du site (Manrope) sur tout WP Forms
   ============================================================================ */
.page-contact .ct-form-shell .wpforms-container,
.page-contact .ct-form-shell .wpforms-container *,
.page-contact .ct-form-shell .wpforms-container input,
.page-contact .ct-form-shell .wpforms-container textarea,
.page-contact .ct-form-shell .wpforms-container select,
.page-contact .ct-form-shell .wpforms-container button,
.page-contact .ct-form-shell .wpforms-container label,
.page-contact .ct-form-shell .wpforms-container .wpforms-field-label,
.page-contact .ct-form-shell .wpforms-container .wpforms-field-sublabel,
.page-contact .ct-form-shell .wpforms-container .wpforms-field-description,
.page-contact .ct-form-shell .wpforms-container .wpforms-error,
.page-contact .ct-form-shell .wpforms-container option {
  font-family: var(--sans) !important;
  -webkit-font-smoothing: antialiased;
}

/* Labels principaux : un peu plus gras, comme nos eyebrow */
.page-contact .ct-form-shell .wpforms-container .wpforms-field-label {
  font-weight: 600 !important;
  letter-spacing: .01em;
  font-size: 14px !important;
}
/* Sublabels (Prénom/Nom sous un champ Name) : plus discrets */
.page-contact .ct-form-shell .wpforms-container .wpforms-field-sublabel {
  font-weight: 400 !important;
  font-size: 12px !important;
  color: rgba(255,255,255,.55) !important;
  letter-spacing: .02em;
  margin-top: 6px !important;
}
/* Inputs : texte en blanc, taille confortable */
.page-contact .ct-form-shell .wpforms-container input,
.page-contact .ct-form-shell .wpforms-container textarea,
.page-contact .ct-form-shell .wpforms-container select {
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: .01em;
}
/* Bouton submit : Manrope, espacement raffiné */
.page-contact .ct-form-shell .wpforms-container button[type="submit"] {
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: .32em !important;
}

/* Footer — Met en valeur le lien Contact principal */
.ftr .ftr-col a.ftr-contact-strong {
  color: var(--or, #c9a35a) !important;
  font-weight: 600;
  letter-spacing: .04em;
}
.ftr .ftr-col a.ftr-contact-strong:hover {
  color: #fff !important;
}

/* ============================================================ */
/* PAGE PROJET DE RÉNOVATION (.page-renovation)                  */
/* ============================================================ */

/* Override Hello Elementor main constraint */
body.page-id-4949 main,
main.page-renovation {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.page-renovation {
  --noir: #020203;
  --noir-2: #0a0a0c;
  --or: #d0a742;
  --or-soft: #b9912e;
  --or-deep: #8a6b1e;
  --blanc: #ffffff;
  --ivoire: #faf7f1;
  --creme: #f5f1ea;
  --creme-2: #ece6db;
  --gris: #7a7770;
  --gris-clair: #cbc6bd;
  --pad-r: clamp(20px, 4.5vw, 72px);
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  background: var(--ivoire);
  color: var(--noir);
  font-family: var(--sans);
}

.page-renovation .ph {
  position: relative;
  background: linear-gradient(135deg, #2a2722 0%, #3d362d 25%, #4a4239 50%, #352f28 75%, #1f1c18 100%);
  overflow: hidden;
  color: #cbc6bd;
}
.page-renovation .ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.08) 0 1px, transparent 1px 22px);
  pointer-events: none;
}
.page-renovation .ph[data-label]::after {
  content: attr(data-label);
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(208,167,66,.6);
  padding: 8px 14px;
  border: 1px solid rgba(208,167,66,.28);
  white-space: nowrap;
  max-width: 90%;
  text-align: center;
}
.page-renovation .ph-aged {
  background: linear-gradient(135deg, #3d2f1f 0%, #5c4528 35%, #6f5532 65%, #3d2f1f 100%);
}
.page-renovation .ph-aged[data-label]::after {
  color: rgba(208,167,66,.7);
  border-color: rgba(208,167,66,.38);
}
.page-renovation .ph-cold {
  background: linear-gradient(135deg, #1f2228 0%, #2c3038 50%, #1a1d22 100%);
}
.page-renovation .ph-warm {
  background: linear-gradient(135deg, #3a2818 0%, #4a3520 50%, #2c1f12 100%);
}

/* eyebrow générique */
.page-renovation .reno-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  letter-spacing: .5em;
  text-transform: uppercase;
  color: var(--or-soft);
  font-weight: 600;
  margin-bottom: 24px;
  font-family: var(--sans);
}
.page-renovation .reno-eyebrow .dash {
  width: 22px;
  height: 1px;
  background: var(--or-soft);
}

/* ============================================================ */
/* 01 HERO                                                       */
/* ============================================================ */
.page-renovation .reno-hero {
  position: relative;
  height: 92vh;
  min-height: 680px;
  color: var(--blanc);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
}
.page-renovation .reno-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-renovation .reno-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(2,2,3,.85) 0%, rgba(2,2,3,.55) 30%, rgba(2,2,3,.6) 60%, rgba(2,2,3,.95) 100%);
}
.page-renovation .reno-hero-inner {
  position: relative;
  z-index: 2;
  padding: 0 var(--pad-r);
  max-width: 1180px;
  opacity: 0;
  transform: translateY(20px);
  animation: renoHeroIn 1.1s cubic-bezier(.2,.7,.2,1) .15s forwards;
}
@keyframes renoHeroIn { to { opacity: 1; transform: translateY(0); } }
.page-renovation .reno-hero-eyebrow {
  font-size: 10px;
  letter-spacing: .5em;
  text-transform: uppercase;
  color: var(--or);
  font-weight: 500;
  margin-bottom: 32px;
}
.page-renovation .reno-hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(42px, 6.4vw, 98px);
  line-height: 1.02;
  letter-spacing: -.01em;
  color: var(--blanc);
}
.page-renovation .reno-hero h1 em {
  font-style: italic;
  color: var(--or);
  font-weight: 300;
}
.page-renovation .reno-hero-rule {
  width: 80px;
  height: 1px;
  background: var(--or);
  margin: 42px auto 36px;
}
.page-renovation .reno-hero-accroche {
  max-width: 820px;
  margin: 0 auto;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(18px, 1.55vw, 23px);
  line-height: 1.55;
  color: #e9e3d6;
  letter-spacing: .01em;
}
.page-renovation .reno-hero-accroche em {
  color: var(--or);
  font-style: italic;
}
.page-renovation .reno-hero-marks {
  position: absolute;
  inset: 24px;
  z-index: 2;
  pointer-events: none;
}
.page-renovation .reno-hero-marks span {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(208,167,66,.4);
}
.page-renovation .reno-hero-marks span:nth-child(1) { top: 0; left: 0; border-right: none; border-bottom: none; }
.page-renovation .reno-hero-marks span:nth-child(2) { top: 0; right: 0; border-left: none; border-bottom: none; }
.page-renovation .reno-hero-marks span:nth-child(3) { bottom: 0; left: 0; border-right: none; border-top: none; }
.page-renovation .reno-hero-marks span:nth-child(4) { bottom: 0; right: 0; border-left: none; border-top: none; }
.page-renovation .reno-hero-coord {
  position: absolute;
  bottom: 42px;
  left: var(--pad-r);
  z-index: 2;
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(208,167,66,.7);
  letter-spacing: .18em;
}
.page-renovation .reno-hero-coord-r {
  position: absolute;
  bottom: 42px;
  right: var(--pad-r);
  z-index: 2;
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(208,167,66,.7);
  letter-spacing: .18em;
}
.page-renovation .reno-hero-scroll {
  position: absolute;
  bottom: 42px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-size: 10px;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
}
.page-renovation .reno-hero-scroll .line {
  width: 1px;
  height: 54px;
  background: rgba(255,255,255,.4);
  position: relative;
  overflow: hidden;
}
.page-renovation .reno-hero-scroll .line::after {
  content: "";
  position: absolute;
  top: -54px;
  left: 0;
  width: 1px;
  height: 54px;
  background: var(--or);
  animation: renoScrollLine 2.6s ease-in-out infinite;
}
@keyframes renoScrollLine { 0% { top: -54px; } 100% { top: 54px; } }

/* ============================================================ */
/* 02 INTRO                                                      */
/* ============================================================ */
.page-renovation .reno-intro {
  background: var(--ivoire);
  padding: clamp(110px, 14vw, 180px) var(--pad-r);
  text-align: center;
  position: relative;
}
.page-renovation .reno-intro-inner {
  max-width: 920px;
  margin: 0 auto;
}
.page-renovation .reno-intro h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.08;
  letter-spacing: -.01em;
  margin-bottom: 42px;
  color: var(--noir);
}
.page-renovation .reno-intro h2 em {
  font-style: italic;
  color: var(--or-soft);
}
.page-renovation .reno-intro p {
  color: #3d3a34;
  font-size: 16.5px;
  line-height: 1.9;
  margin-bottom: 22px;
  max-width: 680px;
  margin-inline: auto;
  text-wrap: pretty;
}
.page-renovation .reno-intro p strong {
  color: var(--noir);
  font-weight: 500;
}
.page-renovation .reno-intro-rule {
  width: 48px;
  height: 1px;
  background: var(--or);
  margin: 42px auto 0;
}

/* ============================================================ */
/* 03 PILIER (FOND SOMBRE)                                       */
/* ============================================================ */
.page-renovation .reno-pillar {
  position: relative;
  background: var(--noir);
  color: var(--blanc);
  padding: clamp(120px, 16vw, 200px) var(--pad-r);
  overflow: hidden;
}
.page-renovation .reno-pillar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(208,167,66,.10) 0%, rgba(208,167,66,0) 60%),
    radial-gradient(50% 60% at 100% 100%, rgba(208,167,66,.07) 0%, rgba(208,167,66,0) 70%);
}
.page-renovation .reno-pillar-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .16;
}
.page-renovation .reno-pillar-bg .ph {
  position: absolute;
  inset: 0;
}
.page-renovation .reno-pillar-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--noir) 0%, rgba(2,2,3,.4) 40%, rgba(2,2,3,.4) 60%, var(--noir) 100%);
}
.page-renovation .reno-pillar-inner {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}
.page-renovation .reno-pillar .reno-eyebrow {
  color: var(--or);
  font-weight: 500;
  margin-bottom: 44px;
}
.page-renovation .reno-pillar .reno-eyebrow .dash {
  background: var(--or);
}
.page-renovation .reno-pillar blockquote {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(30px, 4.6vw, 62px);
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--blanc);
  max-width: 1080px;
  margin: 0 auto;
}
.page-renovation .reno-pillar blockquote::before {
  content: "«";
  display: block;
  color: var(--or);
  font-style: normal;
  font-size: clamp(56px, 7vw, 96px);
  line-height: .6;
  margin-bottom: 14px;
  font-weight: 400;
}
.page-renovation .reno-pillar blockquote::after {
  content: "»";
  display: block;
  color: var(--or);
  font-style: normal;
  font-size: clamp(56px, 7vw, 96px);
  line-height: .4;
  margin-top: -4px;
  font-weight: 400;
}
.page-renovation .reno-pillar blockquote em {
  font-style: italic;
  color: var(--or);
}
.page-renovation .reno-pillar-rule {
  width: 60px;
  height: 1px;
  background: var(--or);
  margin: 64px auto 56px;
}
.page-renovation .reno-pillar-body {
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
  font-size: 16.5px;
  line-height: 1.95;
  color: #cbc6bd;
  text-wrap: pretty;
}
.page-renovation .reno-pillar-body p { margin-bottom: 20px; }
.page-renovation .reno-pillar-body p:last-child { margin-bottom: 0; }
.page-renovation .reno-pillar-body strong { color: var(--blanc); font-weight: 500; }
.page-renovation .reno-pillar-body em { color: var(--or); font-style: italic; font-weight: 400; }

/* ============================================================ */
/* 04 CARTES — CE QUE NOUS RÉNOVONS                              */
/* ============================================================ */
.page-renovation .reno-cards {
  background: var(--ivoire);
  padding: clamp(100px, 13vw, 160px) var(--pad-r);
  position: relative;
}
.page-renovation .reno-cards-inner { max-width: 1280px; margin: 0 auto; }
.page-renovation .reno-cards-head {
  text-align: center;
  margin-bottom: clamp(60px, 7vw, 96px);
  max-width: 780px;
  margin-inline: auto;
}
.page-renovation .reno-cards-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 5.2vw, 68px);
  line-height: 1.05;
  letter-spacing: -.01em;
  margin-bottom: 24px;
  color: var(--noir);
}
.page-renovation .reno-cards-head h2 em { font-style: italic; color: var(--or-soft); }
.page-renovation .reno-cards-head p {
  color: #3d3a34;
  font-size: 16.5px;
  line-height: 1.85;
  max-width: 620px;
  margin: 0 auto;
}

.page-renovation .reno-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2vw, 32px);
}
.page-renovation .reno-card {
  position: relative;
  background: var(--blanc);
  border: 1px solid rgba(2,2,3,.06);
  padding: clamp(32px, 3vw, 44px) clamp(28px, 2.6vw, 40px) clamp(36px, 3.4vw, 52px);
  display: flex;
  flex-direction: column;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease, border-color .5s ease;
}
.page-renovation .reno-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -30px rgba(2,2,3,.18);
  border-color: rgba(208,167,66,.25);
}
.page-renovation .reno-card .num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--or-soft);
  margin-bottom: 24px;
  display: block;
}
.page-renovation .reno-card .num::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--or-soft);
  vertical-align: middle;
  margin-right: 10px;
}
.page-renovation .reno-card .mark {
  width: 54px;
  height: 54px;
  margin-bottom: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(208,167,66,.4);
}
.page-renovation .reno-card .mark svg {
  width: 28px;
  height: 28px;
  stroke: var(--or-soft);
  fill: none;
  stroke-width: 1.2;
}
.page-renovation .reno-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.15;
  letter-spacing: -.005em;
  margin-bottom: 18px;
  color: var(--noir);
}
.page-renovation .reno-card p {
  color: #3d3a34;
  font-size: 15px;
  line-height: 1.78;
  text-wrap: pretty;
}
.page-renovation .reno-card .corner {
  position: absolute;
  top: 0;
  right: 0;
  width: 14px;
  height: 14px;
  border-top: 1px solid rgba(208,167,66,.55);
  border-right: 1px solid rgba(208,167,66,.55);
}

/* ============================================================ */
/* 05 APPROCHE                                                   */
/* ============================================================ */
.page-renovation .reno-approach {
  background: var(--creme);
  padding: clamp(100px, 13vw, 160px) var(--pad-r);
  position: relative;
}
.page-renovation .reno-approach-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(60px, 7vw, 110px);
  align-items: start;
}
.page-renovation .reno-approach-left { position: sticky; top: 120px; }
.page-renovation .reno-approach-left h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--noir);
}
.page-renovation .reno-approach-left h2 em { font-style: italic; color: var(--or-soft); }
.page-renovation .reno-approach-left .rule {
  width: 40px;
  height: 1px;
  background: var(--or);
  margin-top: 32px;
}
.page-renovation .reno-approach-right p {
  color: #3d3a34;
  font-size: 16.5px;
  line-height: 1.9;
  margin-bottom: 24px;
  text-wrap: pretty;
}
.page-renovation .reno-approach-right p:last-of-type { margin-bottom: 0; }
.page-renovation .reno-approach-right strong { color: var(--noir); font-weight: 500; }
.page-renovation .reno-approach-points {
  margin-top: 48px;
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(2,2,3,.12);
}
.page-renovation .reno-approach-points .row {
  padding: 22px 0;
  border-bottom: 1px solid rgba(2,2,3,.12);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: baseline;
}
.page-renovation .reno-approach-points .k {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--or-soft);
  text-transform: uppercase;
  white-space: nowrap;
}
.page-renovation .reno-approach-points .v {
  font-size: 15.5px;
  color: #3d3a34;
  line-height: 1.65;
}
.page-renovation .reno-approach-points .v strong { color: var(--noir); font-weight: 500; }

/* ============================================================ */
/* 06 PROJETS — AVANT/APRÈS                                      */
/* ============================================================ */
.page-renovation .reno-projects {
  background: var(--ivoire);
  padding: clamp(100px, 13vw, 160px) var(--pad-r);
  position: relative;
}
.page-renovation .reno-projects-inner { max-width: 1280px; margin: 0 auto; }
.page-renovation .reno-projects-head {
  text-align: center;
  margin-bottom: clamp(72px, 8vw, 108px);
  max-width: 780px;
  margin-inline: auto;
}
.page-renovation .reno-projects-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 5.2vw, 68px);
  line-height: 1.05;
  letter-spacing: -.01em;
  margin-bottom: 24px;
  color: var(--noir);
}
.page-renovation .reno-projects-head h2 em { font-style: italic; color: var(--or-soft); }
.page-renovation .reno-projects-head p {
  color: #3d3a34;
  font-size: 16.5px;
  line-height: 1.85;
  max-width: 640px;
  margin: 0 auto;
}

.page-renovation .project-row {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
  margin-bottom: clamp(60px, 7vw, 100px);
}
.page-renovation .project-row:last-child { margin-bottom: 0; }
.page-renovation .project-row[data-side="right"] { grid-template-columns: 1.15fr 1fr; }
.page-renovation .project-row[data-side="right"] .pr-text { order: 2; }
.page-renovation .project-row[data-side="right"] .pr-media { order: 1; }

.page-renovation .pr-text .meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--or-soft);
  margin-bottom: 24px;
}
.page-renovation .pr-text .meta .num {
  border: 1px solid rgba(208,167,66,.4);
  padding: 5px 10px;
  color: var(--or-soft);
  font-weight: 500;
}
.page-renovation .pr-text .meta .sep {
  width: 18px;
  height: 1px;
  background: var(--or-soft);
}
.page-renovation .pr-text h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -.01em;
  margin-bottom: 14px;
  color: var(--noir);
}
.page-renovation .pr-text .kind {
  font-family: var(--serif);
  font-style: italic;
  color: var(--or-soft);
  font-size: clamp(16px, 1.4vw, 19px);
  margin-bottom: 22px;
  display: block;
}
.page-renovation .pr-text p {
  color: #3d3a34;
  font-size: 15.5px;
  line-height: 1.82;
  margin-bottom: 24px;
  max-width: 50ch;
  text-wrap: pretty;
}
.page-renovation .pr-stats {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  padding-top: 22px;
  border-top: 1px solid rgba(2,2,3,.12);
}
.page-renovation .pr-stats div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.page-renovation .pr-stats .k {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gris);
}
.page-renovation .pr-stats .v {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--noir);
  font-weight: 400;
}

/* AVANT/APRÈS — slider */
.page-renovation .compare {
  position: relative;
  width: 100%;
  aspect-ratio: 5/4;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(2,2,3,.35);
  cursor: ew-resize;
  user-select: none;
  background: var(--noir);
}
.page-renovation .compare::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(208,167,66,.18);
  pointer-events: none;
  z-index: 5;
}
.page-renovation .compare .layer { position: absolute; inset: 0; }
.page-renovation .compare .layer .ph,
.page-renovation .compare .layer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-renovation .compare .layer-after {
  clip-path: inset(0 0 0 50%);
  transition: clip-path .12s ease-out;
}
.page-renovation .compare .label {
  position: absolute;
  top: 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(2,2,3,.62);
  backdrop-filter: blur(6px);
  padding: 7px 12px;
  border: 1px solid rgba(208,167,66,.35);
  z-index: 4;
}
.page-renovation .compare .label-before { left: 18px; }
.page-renovation .compare .label-after { right: 18px; color: var(--or); }
.page-renovation .compare .handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--or);
  transform: translateX(-50%);
  z-index: 6;
  pointer-events: none;
  box-shadow: 0 0 18px rgba(208,167,66,.5);
}
.page-renovation .compare .knob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--or);
  border: 2px solid var(--noir);
  transform: translate(-50%, -50%);
  z-index: 7;
  pointer-events: none;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 4px rgba(208,167,66,.18), 0 8px 24px rgba(0,0,0,.4);
}
.page-renovation .compare .knob::before,
.page-renovation .compare .knob::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--noir);
  border-left: 2px solid var(--noir);
}
.page-renovation .compare .knob::before { transform: rotate(-45deg) translate(2px, 2px); }
.page-renovation .compare .knob::after { transform: rotate(135deg) translate(2px, 2px); }
.page-renovation .compare-cap {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gris);
  display: flex;
  justify-content: space-between;
}
.page-renovation .compare-cap b { color: var(--or-soft); font-weight: 500; margin-right: 8px; }

.page-renovation .reno-projects-cta {
  text-align: center;
  margin-top: clamp(72px, 8vw, 108px);
}
.page-renovation .link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 26px);
  color: var(--noir);
  border-bottom: 1px solid var(--or);
  padding-bottom: 8px;
  transition: color .25s ease, gap .25s ease;
  text-decoration: none;
}
.page-renovation .link-arrow:hover { color: var(--or-soft); gap: 26px; }
.page-renovation .link-arrow.link-arrow-md { font-size: 18px; }
.page-renovation .link-arrow .arr {
  width: 32px;
  height: 1px;
  background: currentColor;
  position: relative;
}
.page-renovation .link-arrow .arr::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3.5px;
  width: 8px;
  height: 8px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

/* ============================================================ */
/* 07 EXTENSION                                                  */
/* ============================================================ */
.page-renovation .reno-ext {
  background: var(--creme-2);
  padding: clamp(100px, 13vw, 160px) var(--pad-r);
  position: relative;
  overflow: hidden;
}
.page-renovation .reno-ext::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(151,121,75,0) 0 240px, rgba(151,121,75,.04) 240px 241px);
}
.page-renovation .reno-ext-inner {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(60px, 7vw, 110px);
  align-items: center;
}
.page-renovation .reno-ext-text h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 4.2vw, 54px);
  line-height: 1.08;
  letter-spacing: -.01em;
  margin-bottom: 28px;
  color: var(--noir);
}
.page-renovation .reno-ext-text h2 em { font-style: italic; color: var(--or-soft); }
.page-renovation .reno-ext-text p {
  color: #3d3a34;
  font-size: 16px;
  line-height: 1.85;
  margin-bottom: 32px;
  max-width: 54ch;
  text-wrap: pretty;
}
.page-renovation .reno-ext-text strong { color: var(--noir); font-weight: 500; }
.page-renovation .reno-ext-media { position: relative; }
.page-renovation .reno-ext-media .frame {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(2,2,3,.35);
}
.page-renovation .reno-ext-media .frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-renovation .reno-ext-media .frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(208,167,66,.18);
  pointer-events: none;
}
.page-renovation .reno-ext-media .tag {
  position: absolute;
  left: -14px;
  top: 24px;
  background: var(--noir);
  color: var(--or);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  padding: 9px 14px;
  border: 1px solid rgba(208,167,66,.4);
  z-index: 2;
}

/* ============================================================ */
/* 08 SCOPE                                                      */
/* ============================================================ */
.page-renovation .reno-scope {
  background: var(--ivoire);
  padding: clamp(100px, 13vw, 160px) var(--pad-r);
}
.page-renovation .reno-scope-inner { max-width: 1240px; margin: 0 auto; }
.page-renovation .reno-scope-head {
  text-align: center;
  margin-bottom: clamp(60px, 7vw, 96px);
}
.page-renovation .reno-scope-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--noir);
}
.page-renovation .reno-scope-head h2 em { font-style: italic; color: var(--or-soft); }
.page-renovation .reno-scope-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 64px);
}
.page-renovation .scope-col {
  background: var(--blanc);
  padding: clamp(36px, 3.6vw, 52px);
  border: 1px solid rgba(2,2,3,.06);
  position: relative;
}
.page-renovation .scope-col .corner {
  position: absolute;
  top: 0;
  right: 0;
  width: 14px;
  height: 14px;
  border-top: 1px solid rgba(208,167,66,.55);
  border-right: 1px solid rgba(208,167,66,.55);
}
.page-renovation .scope-col h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.15;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--noir);
}
.page-renovation .scope-col h3 .pic {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(208,167,66,.4);
}
.page-renovation .scope-col h3 .pic svg {
  width: 18px;
  height: 18px;
  stroke: var(--or-soft);
  stroke-width: 1.6;
  fill: none;
}
.page-renovation .scope-col.is-no h3 .pic { border-color: rgba(122,119,112,.4); }
.page-renovation .scope-col.is-no h3 .pic svg { stroke: var(--gris); }
.page-renovation .scope-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 0;
}
.page-renovation .scope-list li {
  padding: 14px 0;
  border-top: 1px solid rgba(2,2,3,.08);
  font-size: 15px;
  color: #3d3a34;
  line-height: 1.55;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
}
.page-renovation .scope-list li:first-child { border-top: none; padding-top: 0; }
.page-renovation .scope-list li:last-child { padding-bottom: 0; }
.page-renovation .scope-list li .mk {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 5px;
  border: 1px solid rgba(208,167,66,.5);
  position: relative;
}
.page-renovation .scope-list li .mk::before,
.page-renovation .scope-list li .mk::after {
  content: "";
  position: absolute;
  background: var(--or-soft);
}
.page-renovation .scope-list li .mk::before {
  left: 3px;
  top: 6.5px;
  width: 3px;
  height: 1px;
  transform: rotate(45deg);
  transform-origin: left center;
}
.page-renovation .scope-list li .mk::after {
  left: 5.5px;
  top: 6.5px;
  width: 6px;
  height: 1px;
  transform: rotate(-45deg);
  transform-origin: left center;
}
.page-renovation .scope-col.is-no .scope-list li .mk { border-color: rgba(122,119,112,.5); }
.page-renovation .scope-col.is-no .scope-list li .mk::before,
.page-renovation .scope-col.is-no .scope-list li .mk::after {
  background: var(--gris);
  width: 8px;
  height: 1px;
  top: 6.5px;
  transform-origin: center;
}
.page-renovation .scope-col.is-no .scope-list li .mk::before { left: 3px; transform: rotate(45deg); }
.page-renovation .scope-col.is-no .scope-list li .mk::after { left: 3px; transform: rotate(-45deg); }
.page-renovation .scope-list li em {
  font-style: italic;
  color: var(--gris);
  font-size: 13.5px;
  display: block;
  margin-top: 4px;
}

/* ============================================================ */
/* 09 DISPONIBILITÉ                                              */
/* ============================================================ */
.page-renovation .reno-avail {
  background: var(--creme);
  padding: clamp(80px, 10vw, 130px) var(--pad-r);
  text-align: center;
}
.page-renovation .reno-avail-inner { max-width: 920px; margin: 0 auto; }
.page-renovation .reno-avail .badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(208,167,66,.5);
  padding: 9px 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--or-soft);
  margin-bottom: 32px;
}
.page-renovation .reno-avail .badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--or);
  animation: renoPulse 2.2s ease-in-out infinite;
}
@keyframes renoPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(.85); }
}
.page-renovation .reno-avail p {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.38;
  color: var(--noir);
  max-width: 780px;
  margin: 0 auto;
}
.page-renovation .reno-avail p em { font-style: italic; color: var(--or-soft); }

/* ============================================================ */
/* 10 CTA FINAL                                                  */
/* ============================================================ */
.page-renovation .reno-cta {
  position: relative;
  background: var(--noir);
  color: var(--blanc);
  padding: clamp(100px, 14vw, 180px) var(--pad-r);
  overflow: hidden;
}
.page-renovation .reno-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(208,167,66,.10) 0%, rgba(208,167,66,0) 60%),
    radial-gradient(40% 50% at 100% 100%, rgba(208,167,66,.06) 0%, rgba(208,167,66,0) 70%);
}
.page-renovation .reno-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.page-renovation .reno-cta .reno-eyebrow {
  color: var(--or);
  font-weight: 500;
  margin-bottom: 36px;
  display: inline-block;
}
.page-renovation .reno-cta h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(36px, 5.6vw, 82px);
  line-height: 1.05;
  letter-spacing: -.01em;
  max-width: 1000px;
  margin: 0 auto 36px;
  color: var(--blanc);
}
.page-renovation .reno-cta h2 em { font-style: normal; color: var(--or); font-weight: 400; }
.page-renovation .reno-cta-rule {
  width: 60px;
  height: 1px;
  background: var(--or);
  margin: 36px auto 44px;
}
.page-renovation .reno-cta p {
  max-width: 680px;
  margin: 0 auto;
  font-size: 16.5px;
  line-height: 1.85;
  color: #cbc6bd;
  text-wrap: pretty;
}
.page-renovation .reno-cta p strong { color: var(--blanc); font-weight: 500; }
.page-renovation .reno-cta-ctas {
  margin-top: 56px;
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}
.page-renovation .reno-cta-ctas .btn-primary,
.page-renovation .reno-cta-ctas .btn-ghost {
  padding: 20px 36px;
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  transition: all .25s ease;
  text-decoration: none;
  font-family: var(--sans);
}
.page-renovation .reno-cta-ctas .btn-primary { background: var(--or); color: var(--noir); }
.page-renovation .reno-cta-ctas .btn-primary:hover { background: var(--blanc); }
.page-renovation .reno-cta-ctas .btn-ghost { border: 1px solid rgba(255,255,255,.4); color: var(--blanc); }
.page-renovation .reno-cta-ctas .btn-ghost:hover { border-color: var(--or); color: var(--or); }
.page-renovation .reno-cta-ctas .arr {
  width: 22px;
  height: 1px;
  background: currentColor;
  position: relative;
}
.page-renovation .reno-cta-ctas .arr::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

/* ============================================================ */
/* RESPONSIVE                                                    */
/* ============================================================ */
@media (max-width: 1100px) {
  .page-renovation .reno-approach-inner { grid-template-columns: 1fr; gap: 48px; }
  .page-renovation .reno-approach-left { position: static; }
  .page-renovation .reno-ext-inner { grid-template-columns: 1fr; gap: 56px; }
  .page-renovation .reno-ext-media { max-width: 520px; margin: 0 auto; }
}
@media (max-width: 900px) {
  .page-renovation .reno-grid { grid-template-columns: 1fr; gap: 18px; }
  .page-renovation .reno-scope-grid { grid-template-columns: 1fr; gap: 22px; }
  .page-renovation .project-row,
  .page-renovation .project-row[data-side="right"] {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .page-renovation .project-row[data-side="right"] .pr-text { order: 2; }
  .page-renovation .project-row[data-side="right"] .pr-media { order: 1; }
  .page-renovation .project-row .pr-text { order: 2; }
  .page-renovation .project-row .pr-media { order: 1; }
}
@media (max-width: 640px) {
  .page-renovation .reno-hero-accroche { font-size: 16px; }
  .page-renovation .reno-hero-coord,
  .page-renovation .reno-hero-coord-r { display: none; }
  .page-renovation .reno-intro h2 { font-size: 32px; }
  .page-renovation .reno-pillar blockquote { font-size: 26px; }
  .page-renovation .pr-stats { gap: 22px; }
  .page-renovation .compare .knob { width: 42px; height: 42px; }
}

/* ============================================================ */
/* PAGE RÉNOVATION — TWEAKS COULEURS                             */
/* ============================================================ */

/* --- 02 Intro : fond noir --- */
.page-renovation .reno-intro {
  background: var(--noir);
  color: var(--blanc);
}
.page-renovation .reno-intro h2 { color: var(--blanc); }
.page-renovation .reno-intro h2 em { color: var(--or); }
.page-renovation .reno-intro p { color: #cbc6bd; }
.page-renovation .reno-intro p strong { color: var(--blanc); }
.page-renovation .reno-intro .reno-eyebrow { color: var(--or); }
.page-renovation .reno-intro .reno-eyebrow .dash { background: var(--or); }

/* --- 03 Pilier (honnêteté) : assombrir davantage l'image de fond --- */
.page-renovation .reno-pillar-bg { opacity: .35; }
.page-renovation .reno-pillar-bg::after {
  background: linear-gradient(180deg,
    rgba(2,2,3,.85) 0%,
    rgba(2,2,3,.70) 40%,
    rgba(2,2,3,.70) 60%,
    rgba(2,2,3,.95) 100%);
}

/* --- 04 Nos interventions : fond noir + glass cards + hover grow --- */
.page-renovation .reno-cards {
  background: var(--noir);
  color: var(--blanc);
  position: relative;
}
.page-renovation .reno-cards::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(208,167,66,.08) 0%, rgba(208,167,66,0) 60%),
    radial-gradient(40% 50% at 100% 100%, rgba(208,167,66,.05) 0%, rgba(208,167,66,0) 70%);
}
.page-renovation .reno-cards-inner { position: relative; z-index: 1; }
.page-renovation .reno-cards-head h2 { color: var(--blanc); }
.page-renovation .reno-cards-head h2 em { color: var(--or); }
.page-renovation .reno-cards-head p { color: #cbc6bd; }
.page-renovation .reno-cards-head .reno-eyebrow { color: var(--or); }
.page-renovation .reno-cards-head .reno-eyebrow .dash { background: var(--or); }

/* Glass design pour les 3 cartes */
.page-renovation .reno-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 24px 60px rgba(0,0,0,.35);
  color: var(--blanc);
  transition:
    transform .55s cubic-bezier(.2,.7,.2,1),
    box-shadow .55s cubic-bezier(.2,.7,.2,1),
    border-color .55s cubic-bezier(.2,.7,.2,1),
    background .55s cubic-bezier(.2,.7,.2,1);
}
.page-renovation .reno-card h3 { color: var(--blanc); }
.page-renovation .reno-card p { color: #cbc6bd; }
.page-renovation .reno-card .num { color: var(--or); }
.page-renovation .reno-card .num::before { background: var(--or); }
.page-renovation .reno-card .mark { border-color: rgba(208,167,66,.5); }
.page-renovation .reno-card .mark svg { stroke: var(--or); }
.page-renovation .reno-card .corner {
  border-top-color: rgba(208,167,66,.7);
  border-right-color: rgba(208,167,66,.7);
}

/* Hover : grossissement subtil et fluide */
.page-renovation .reno-card:hover {
  transform: translateY(-8px) scale(1.035);
  background: rgba(255,255,255,.08);
  border-color: rgba(208,167,66,.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 40px 80px rgba(0,0,0,.45),
    0 0 60px rgba(208,167,66,.08);
}

/* --- 06 Réalisations : fond noir --- */
.page-renovation .reno-projects {
  background: var(--noir);
  color: var(--blanc);
}
.page-renovation .reno-projects-head h2 { color: var(--blanc); }
.page-renovation .reno-projects-head h2 em { color: var(--or); }
.page-renovation .reno-projects-head p { color: #cbc6bd; }
.page-renovation .reno-projects-head .reno-eyebrow { color: var(--or); }
.page-renovation .reno-projects-head .reno-eyebrow .dash { background: var(--or); }
.page-renovation .reno-projects .pr-text h3 { color: var(--blanc); }
.page-renovation .reno-projects .pr-text p { color: #cbc6bd; }
.page-renovation .reno-projects .pr-stats {
  border-top-color: rgba(255,255,255,.14);
}
.page-renovation .reno-projects .pr-stats .v { color: var(--blanc); }
.page-renovation .reno-projects .pr-stats .k { color: var(--gris-clair); }

/* Légende discrète, sans noms de fichier */
.page-renovation .reno-projects .compare-cap {
  justify-content: flex-end;
  color: var(--or-soft);
}
.page-renovation .reno-projects .compare-cap .compare-hint {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* CTA "Découvrir toutes nos réalisations" en clair sur fond noir */
.page-renovation .reno-projects .link-arrow {
  color: var(--blanc);
}
.page-renovation .reno-projects .link-arrow:hover {
  color: var(--or);
}

/* ============================================================ */
/* PÉRIMÈTRE — lisibilité améliorée                              */
/* ============================================================ */

/* Carte plus respirante */
.page-renovation .scope-col {
  padding: clamp(40px, 4vw, 60px) clamp(36px, 3.6vw, 56px);
}

/* Titres de colonne un poil plus larges */
.page-renovation .scope-col h3 {
  font-size: clamp(26px, 2.6vw, 34px);
  margin-bottom: 36px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(208,167,66,.22);
}
.page-renovation .scope-col.is-no h3 {
  border-bottom-color: rgba(122,119,112,.22);
}

/* Items plus grands, plus aérés, mieux contrastés */
.page-renovation .scope-list li {
  padding: 22px 0;
  border-top: 1px solid rgba(2,2,3,.07);
  font-size: 19px;
  color: #1f1d1a;
  line-height: 1.6;
  gap: 22px;
  font-weight: 400;
}

/* Sous-texte des items "ne pas faire" — beaucoup plus lisible */
.page-renovation .scope-list li em {
  font-family: var(--serif);
  font-style: italic;
  color: #4a4640;
  font-size: 17px;
  display: block;
  margin-top: 10px;
  line-height: 1.5;
}

/* H3 titres — annule la mise en MAJUSCULES forcée par Hello Elementor */
.page-renovation .scope-col h3 {
  text-transform: none !important;
  letter-spacing: -.005em !important;
  font-size: clamp(24px, 2.4vw, 32px) !important;
  font-family: var(--serif) !important;
  font-weight: 400 !important;
}

/* Coche / croix : agrandies pour mieux lire visuellement */
.page-renovation .scope-list li .mk {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border: 1px solid rgba(208,167,66,.55);
  background: rgba(208,167,66,.06);
  display: grid;
  place-items: center;
}

/* Coche (OUI) — un vrai check propre */
.page-renovation .scope-col:not(.is-no) .scope-list li .mk::before,
.page-renovation .scope-col:not(.is-no) .scope-list li .mk::after {
  content: "";
  position: static;
  background: var(--or-soft);
}
.page-renovation .scope-col:not(.is-no) .scope-list li .mk {
  position: relative;
}
.page-renovation .scope-col:not(.is-no) .scope-list li .mk::before {
  position: absolute;
  left: 5px;
  top: 11px;
  width: 5px;
  height: 1.5px;
  background: var(--or-soft);
  transform: rotate(45deg);
  transform-origin: left center;
}
.page-renovation .scope-col:not(.is-no) .scope-list li .mk::after {
  position: absolute;
  left: 8.5px;
  top: 11px;
  width: 10px;
  height: 1.5px;
  background: var(--or-soft);
  transform: rotate(-50deg);
  transform-origin: left center;
}

/* Croix (NON) — un vrai X propre */
.page-renovation .scope-col.is-no .scope-list li .mk {
  border-color: rgba(122,119,112,.55);
  background: rgba(122,119,112,.05);
}
.page-renovation .scope-col.is-no .scope-list li .mk::before,
.page-renovation .scope-col.is-no .scope-list li .mk::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 10.25px;
  width: 12px;
  height: 1.5px;
  background: #5a5650;
  transform-origin: center;
  transform: rotate(45deg);
}
.page-renovation .scope-col.is-no .scope-list li .mk::after {
  transform: rotate(-45deg);
}