/* ============================================================
   DESSIGNE — feuille de style partagée
   Architecture d'intérieur · de la conception au suivi de chantier
   Source de vérité unique des couleurs, typo et composants.
   ============================================================ */

:root{
  /* — Palette de marque (modifiable ici, répercutée partout) — */
  --ink:#262421;
  --burg:#4E2924;
  --rouge:#72140C;
  --gold:#A48054;
  --cream:#E6DFD1;
  --paper:#FAF8F4;
  --p2:#F4F1EB;

  /* — Typographie — */
  --serif:'Cormorant Garamond', serif;
  --sans:'Montserrat', sans-serif;

  /* — Mise en page — */
  --max-width:1440px;
  --section-py:120px;
  --radius:2px;
  --btn-radius:3px;
  --tracking-eyebrow:0.24em;
  --letter-tight:-0.005em;
  --nav-h:78px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
html,body{
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:15px;
  -webkit-font-smoothing:antialiased;
}
body{ overflow-x:hidden; position:relative; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; border:none; background:none; cursor:pointer; color:inherit; }

/* pattern bg utilitaire */
.has-pattern{
  background-image:url("../img/pattern-monogram.png");
  background-size:220px; background-blend-mode:multiply; background-color:var(--p2);
}

/* ---------- utilitaires typographiques ---------- */
.eyebrow{
  font-family:var(--sans); font-size:11px; font-weight:600;
  letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--gold);
}
.display{
  font-family:var(--serif); font-weight:500; line-height:1.04;
  letter-spacing:var(--letter-tight); color:var(--ink);
}
.display em,.display i{ font-style:normal; font-weight:400; color:var(--rouge); }
.gold-rule{ width:56px; height:1px; background:var(--gold); opacity:.7; }

/* ---------- boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 32px; font-family:var(--sans); font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; border-radius:var(--btn-radius);
  cursor:pointer; transition:all .25s ease; white-space:nowrap;
}
.btn .arrow{ font-family:var(--serif); font-size:14px; letter-spacing:0; text-transform:none; font-style:normal; }
.btn--ink{ background:var(--ink); color:var(--cream); }
.btn--ink:hover{ background:var(--burg); }
.btn--rouge{ background:var(--rouge); color:var(--cream); }
.btn--rouge:hover{ filter:brightness(.88); }
.btn--ghost{ background:transparent; color:var(--ink); border:1px solid var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--cream); }
.btn--ghost-l{ background:transparent; color:var(--cream); border:1px solid rgba(230,223,209,.5); }
.btn--ghost-l:hover{ background:var(--cream); color:var(--ink); }
.btn--gold{ background:var(--gold); color:var(--ink); }
.btn--gold:hover{ background:#8d6c41; color:var(--cream); }
.btn--cream{ background:var(--cream); color:var(--ink); }
.btn--cream:hover{ background:var(--paper); }

.arrow-link{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--sans); font-size:11px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink);
  padding-bottom:6px; border-bottom:1px solid var(--gold); cursor:pointer;
}
.arrow-link .arrow{
  font-family:var(--serif); font-style:normal; font-size:18px; letter-spacing:0;
  text-transform:none; font-weight:400; transition:transform .3s ease;
}
.arrow-link:hover .arrow{ transform:translateX(6px); }

/* ============================================================
   NAV — barre unique, injectée par site.js
   Transparente sur hero sombre → fond paper au scroll
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:40;
  transition:background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
  background:transparent; border-bottom:1px solid transparent;
}
.nav__inner{
  max-width:var(--max-width); margin:0 auto; height:var(--nav-h);
  padding:0 56px; display:flex; align-items:center; gap:48px;
}
.nav__brand{ display:flex; align-items:center; }
.nav__brand img{ height:auto; width:196px; }
.nav__brand .wm-light{ display:none; }
.nav__links{ display:flex; gap:38px; align-items:center; margin-left:auto; }
.nav__link{
  font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  cursor:pointer; padding:8px 0; position:relative; display:inline-flex; align-items:center; gap:7px;
  color:inherit; background:none;
}
.nav__link::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .3s ease;
}
.nav__link:hover::after,.nav__link.is-active::after{ transform:scaleX(1); }
.nav__caret{ font-size:9px; opacity:.7; transition:transform .25s ease; }
.nav__cta{ margin-left:6px; }

/* — état au-dessus du hero sombre — */
.nav[data-mode="over-dark"]{ color:var(--cream); }
.nav[data-mode="over-dark"] .wm-dark{ display:none; }
.nav[data-mode="over-dark"] .wm-light{ display:block; }

/* — état initial paper (pages claires) — */
.nav[data-mode="paper"]{ color:var(--ink); }

/* — état scrollé : paper + blur — */
.nav.is-scrolled{
  background:rgba(250,248,244,.92); backdrop-filter:blur(14px);
  border-bottom-color:rgba(38,36,33,.06); color:var(--ink);
}
.nav.is-scrolled .wm-dark{ display:block; }
.nav.is-scrolled .wm-light{ display:none; }

/* — dropdown Service — */
.nav__item{ position:relative; }
.nav__item:hover .nav__caret{ transform:rotate(180deg); }
.nav__dd{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(10px);
  min-width:310px; background:var(--paper); border:1px solid rgba(38,36,33,.08);
  box-shadow:0 26px 60px -28px rgba(38,36,33,.42); border-radius:4px; padding:10px;
  opacity:0; visibility:hidden; transition:all .25s ease; color:var(--ink);
}
.nav__item:hover .nav__dd{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(8px); }
.nav__dd-item{ display:block; padding:14px 16px; border-radius:3px; transition:background .2s ease; }
.nav__dd-item:hover{ background:var(--p2); }
.nav__dd-t{ font-family:var(--serif); font-size:18px; font-weight:500; color:var(--ink); }
.nav__dd-d{ font-size:11px; letter-spacing:.01em; color:rgba(38,36,33,.55); margin-top:3px; }

/* — burger mobile — */
.nav__burger{ display:none; margin-left:auto; width:30px; height:20px; position:relative; }
.nav__burger span{
  position:absolute; left:0; right:0; height:1.5px; background:currentColor; transition:all .3s ease;
}
.nav__burger span:nth-child(1){ top:2px; }
.nav__burger span:nth-child(2){ top:9px; }
.nav__burger span:nth-child(3){ top:16px; }
body.menu-open .nav__burger span:nth-child(1){ top:9px; transform:rotate(45deg); }
body.menu-open .nav__burger span:nth-child(2){ opacity:0; }
body.menu-open .nav__burger span:nth-child(3){ top:9px; transform:rotate(-45deg); }

/* — panneau mobile — */
.nav__mobile{
  position:fixed; inset:0; z-index:39; background:var(--ink); color:var(--cream);
  padding:calc(var(--nav-h) + 24px) 40px 48px; display:flex; flex-direction:column; gap:6px;
  transform:translateY(-100%); transition:transform .45s cubic-bezier(.16,1,.3,1);
  visibility:hidden;
}
body.menu-open .nav__mobile{ transform:translateY(0); visibility:visible; }
.nav__mobile a{
  font-family:var(--serif); font-size:30px; font-weight:500; padding:14px 0;
  border-bottom:1px solid rgba(230,223,209,.1);
}
.nav__mobile .nav__mobile-sub{ font-family:var(--sans); font-size:14px; letter-spacing:.04em; padding-left:18px; color:rgba(230,223,209,.7); border-bottom:none; }
.nav__mobile .btn{ margin-top:24px; align-self:flex-start; }

/* ============================================================
   HERO — plein cadre (accueil)
   ============================================================ */
.hero{
  position:relative; width:100%; min-height:760px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; isolation:isolate; color:var(--cream); overflow:hidden;
}
.hero__bg{ position:absolute; inset:0; z-index:-2; }
.hero__bg image-slot{ width:100%; height:100%; display:block; --is-radius:0; }
.hero::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(20,17,15,.27) 0%, rgba(20,17,15,.45) 55%, rgba(20,17,15,.52) 100%);
  pointer-events:none;
}
.hero__inner{
  position:relative; z-index:1; max-width:var(--max-width); width:100%;
  padding:120px 56px; display:flex; flex-direction:column; align-items:center;
}
.hero .eyebrow{ color:rgba(230,223,209,.78); }
.hero__title{
  font-family:var(--serif); font-weight:500; line-height:1.04; color:var(--cream);
  font-size:clamp(56px,6.5vw,104px); max-width:14ch; margin-top:28px;
}
.hero__title .accent{ color:var(--gold); }
.hero__lede{
  margin-top:32px; max-width:560px; font-family:var(--serif); font-style:normal;
  font-size:22px; line-height:1.45; color:rgba(230,223,209,.86); text-wrap:pretty;
}
.hero__ctas{ display:flex; gap:16px; margin-top:44px; flex-wrap:wrap; justify-content:center; }
.hero .btn--ink{ background:var(--cream); color:var(--ink); }
.hero .btn--ink:hover{ background:var(--gold); color:var(--cream); }
.hero .btn--ghost{ color:var(--cream); border-color:rgba(230,223,209,.6); }
.hero .btn--ghost:hover{ background:var(--cream); color:var(--ink); }

/* ============================================================
   PROJETS — carrousel 2-up
   ============================================================ */
.projects{ max-width:var(--max-width); margin:0 auto; padding:var(--section-py) 56px; }
.projects__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:56px; }
.projects__title{ font-size:clamp(40px,4.4vw,64px); margin-top:16px; }
.carousel{ position:relative; }
.carousel__viewport{ overflow:hidden; }
.carousel__track{ display:flex; gap:32px; transition:transform .55s cubic-bezier(.16,1,.3,1); }
.pcard{ flex:0 0 calc((100% - 32px) / 2); }
.pcard__media{ aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius); }
.pcard__media image-slot{ width:100%; height:100%; display:block; }
.pcard__caption{ padding-top:22px; display:flex; align-items:baseline; justify-content:space-between; gap:24px; }
.pcard__title{ font-family:var(--serif); font-size:28px; font-weight:500; color:var(--ink); }
.pcard__meta{ font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); flex-shrink:0; }
.carousel__arrow{
  position:absolute; top:calc((100% - 80px) * .375); width:56px; height:56px; border-radius:50%;
  background:var(--paper); border:1px solid rgba(38,36,33,.12); box-shadow:0 6px 24px rgba(38,36,33,.08);
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .25s ease; z-index:2;
  font-family:var(--serif); font-size:22px; color:var(--ink);
}
.carousel__arrow:hover{ background:var(--ink); color:var(--cream); border-color:var(--ink); }
.carousel__arrow--prev{ left:-28px; }
.carousel__arrow--next{ right:-28px; }
.carousel__dots{ display:flex; gap:10px; margin-top:40px; justify-content:center; }
.carousel__dot{ width:24px; height:2px; background:rgba(38,36,33,.18); cursor:pointer; transition:background .25s; }
.carousel__dot.is-active{ background:var(--ink); }

/* ============================================================
   ACCOMPAGNEMENT — formules
   ============================================================ */
.acc{ background:var(--p2); padding:var(--section-py) 56px; }
.acc__inner{ max-width:1280px; margin:0 auto; }
.acc__head{ text-align:center; margin-bottom:64px; }
.acc__title{ font-size:clamp(36px,4vw,56px); margin-top:24px; max-width:none; margin-left:auto; margin-right:auto; }
.acc__grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:stretch; }
.formule{ border-radius:10px; padding:56px 52px; display:flex; flex-direction:column; transition:transform .35s ease, box-shadow .35s ease; }
.formule:hover{ transform:translateY(-4px); }
.formule__top{ display:flex; flex-direction:column; }
.formule__foot{ padding-top:40px; }
.formule--dark .formule__foot{ margin-top:0; }
.formule--light .formule__foot{ margin-top:auto; }
.formule--dark{ background:var(--burg); color:var(--cream); box-shadow:0 30px 64px -34px rgba(38,36,33,.55); }
.formule--dark .formule__top{ }
.formule--dark:hover{ box-shadow:0 40px 80px -36px rgba(38,36,33,.6); }
.formule--dark .formule__eyebrow{ color:var(--gold); }
.formule--dark .formule__title{ color:var(--paper); }
.formule--dark .formule__body{ color:rgba(230,223,209,.82); }
.formule--dark .formule__group-label{ color:var(--gold); }
.formule--dark .formule__item{ color:rgba(230,223,209,.92); }
.formule--dark .formule__dash{ color:var(--gold); }
.formule--dark .formule__rule{ background:rgba(230,223,209,.18); }
.formule--dark .formule__note{ color:rgba(230,223,209,.6); }
.formule--light{ background:var(--paper); color:var(--ink); border:1px solid rgba(38,36,33,.06); box-shadow:0 24px 56px -36px rgba(38,36,33,.22); }
.formule--light:hover{ box-shadow:0 34px 72px -38px rgba(38,36,33,.28); }
.formule--light .formule__eyebrow{ color:var(--gold); }
.formule--light .formule__title{ color:var(--ink); }
.formule--light .formule__body{ color:rgba(38,36,33,.7); }
.formule--light .formule__group-label{ color:var(--gold); }
.formule--light .formule__item{ color:rgba(38,36,33,.82); }
.formule--light .formule__dash{ color:var(--gold); }
.formule--light .formule__rule{ background:rgba(38,36,33,.1); }
.formule--light .formule__note{ color:rgba(38,36,33,.5); }
.formule__eyebrow{ font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; text-align:center; }
.formule__title{ font-family:var(--serif); font-weight:500; font-size:clamp(34px,3.2vw,46px); line-height:1.08; letter-spacing:-0.01em; margin-top:22px; }
.formule__body{ margin-top:26px; font-size:14px; line-height:1.7; text-align:justify; }
.formule__group-label{ font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; margin-top:34px; }
.formule__list{ list-style:none; display:flex; flex-direction:column; gap:13px; margin-top:22px; }
.formule__item{ display:flex; gap:16px; align-items:flex-start; font-size:13.5px; line-height:1.55; }
.formule__dash{ flex-shrink:0; color:var(--gold); font-size:11px; line-height:1.55; }
.formule__rule{ height:1px; width:100%; }
.formule__note{ font-family:var(--serif); font-style:normal; font-size:15px; line-height:1.5; margin-top:24px; text-align:justify; }
.formule__cta{ margin-top:28px; }

.formule__bubble{ display:flex; flex-direction:column; align-items:flex-start; margin-top:20px; padding:24px 26px; border-radius:10px; }
.formule__bubble .formule__group-label{ margin-top:0; }
.formule__bubble .formule__list{ margin-top:16px; }
.formule__bubble .btn{ height:42px; padding:0 22px; font-size:10px; margin-top:24px; }
.formule--light .formule__bubble--a{ background:var(--cream); border:1px solid rgba(38,36,33,.06); }
.formule--light .formule__bubble--b{ background:var(--paper); border:1px solid rgba(38,36,33,.06); }
.formule--dark .formule__bubble--a{ background:rgba(230,223,209,.07); border:1px solid rgba(230,223,209,.14); }
.formule--dark .formule__bubble--b{ background:rgba(114,20,12,.18); border:1px solid rgba(114,20,12,.28); }
@media (max-width:860px){
  .formule__bubble{ padding:18px 18px; }
}

/* ============================================================
   L'AGENCE
   ============================================================ */
.agence{ background:var(--cream); padding:var(--section-py) 56px; }
.agence__inner{ max-width:1280px; margin:0 auto; display:grid; grid-template-columns:0.85fr 1fr; gap:96px; align-items:center; }
.agence__portrait{ aspect-ratio:4/5; }
.agence__portrait image-slot{ width:100%; height:100%; display:block; }
.agence__title{ font-size:clamp(48px,5vw,76px); margin-top:22px; }
.agence__role{ font-family:var(--serif); font-style:normal; font-size:22px; color:var(--ink); opacity:.6; margin-top:12px; }
.agence__body{ margin-top:32px; display:flex; flex-direction:column; gap:18px; font-size:15px; line-height:1.75; color:var(--ink); opacity:.88; text-align:justify; }
.agence__body em{ font-family:var(--serif); font-style:normal; font-weight:500; }
.agence__body .key{ color:var(--rouge); font-weight:500; }
.agence__cta{ margin-top:40px; }

/* ============================================================
   PAGE AGENCE — intro, valeurs (piliers), fondatrice
   ============================================================ */
/* Intro (portrait + DESSIGNE) */
.intro{ max-width:var(--max-width); margin:0 auto; padding:calc(var(--nav-h) + 52px) 56px 120px; }
.intro__inner{ display:grid; grid-template-columns:0.85fr 1fr; gap:96px; align-items:center; }
.intro[data-layout="right"] .intro__portrait{ order:2; }
.intro__portrait{ aspect-ratio:4/5; }
.intro__portrait image-slot{ width:100%; height:100%; display:block; }
.intro__title{ font-size:clamp(52px,5.4vw,84px); margin-top:20px; }
.intro__role{ font-family:var(--serif); font-style:normal; font-size:22px; color:var(--ink); opacity:.55; margin-top:10px; }
.intro__body{ margin-top:30px; display:flex; flex-direction:column; gap:20px; font-size:16px; line-height:1.75; color:var(--ink); opacity:.9; text-align:justify; max-width:50ch; }
.intro__body .latin{ font-family:var(--serif); font-style:normal; font-size:.92em; }
.intro__body .key{ color:var(--rouge); font-weight:500; }
.intro__cta{ margin-top:38px; }

/* Valeurs — piliers */
.values{ background:var(--ink); color:var(--cream); padding:72px 56px; }
.values__inner{ max-width:1280px; margin:0 auto; display:grid; grid-template-columns:0.92fr 1.35fr; gap:80px; align-items:start; }
.values__lead{ position:sticky; top:calc(var(--nav-h) + 32px); }
.values__lead .eyebrow{ color:var(--gold); }
.values__lead-title{ font-family:var(--serif); font-weight:500; font-size:clamp(34px,3.4vw,48px); line-height:1.1; color:var(--cream); margin-top:20px; text-wrap:pretty; }
.values__lead-title em{ font-style:normal; color:var(--gold); }
.values__lead-body{ margin-top:28px; display:flex; flex-direction:column; gap:18px; font-size:14.5px; line-height:1.75; color:rgba(230,223,209,.74); max-width:42ch; text-wrap:pretty; text-align:justify; }
.values__grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.vcard{ background:var(--cream); color:var(--ink); border-radius:var(--radius); padding:26px 26px 30px; display:flex; flex-direction:column; transition:transform .35s ease, box-shadow .35s ease; }
.vcard[data-style="tinted"]{ background:rgba(230,223,209,.06); color:var(--cream); border:1px solid rgba(230,223,209,.14); }
.vcard[data-style="outlined"]{ background:transparent; color:var(--cream); border:1px solid rgba(230,223,209,.22); }
.vcard:hover{ transform:translateY(-5px); box-shadow:0 28px 56px -28px rgba(0,0,0,.5); }
.vcard__head{ display:flex; align-items:baseline; justify-content:flex-end; margin-bottom:22px; }
.vcard__num{ font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); }
.vcard__name{ font-family:var(--serif); font-size:26px; font-weight:500; letter-spacing:.01em; text-transform:none; opacity:1; margin-left:0; }
.vcard__title{ font-family:var(--serif); font-weight:500; font-size:20px; line-height:1.15; letter-spacing:.01em; color:inherit; }
.vcard[data-style="cream"] .vcard__title{ color:var(--burg); }
.vcard__text{ margin-top:10px; font-size:12.5px; line-height:1.6; color:inherit; opacity:.78; text-align:right; flex:1; }
.vcard__rule{ margin-top:22px; width:32px; height:1px; background:var(--gold); opacity:.6; }

/* Fondatrice */
.founder{ background:var(--p2); padding:var(--section-py) 56px; }
.founder__inner{ max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1fr 0.78fr; gap:88px; align-items:center; }
.founder[data-layout="left"] .founder__portrait{ order:-1; }
.founder__portrait{ aspect-ratio:3/4; }
.founder__portrait image-slot{ width:100%; height:100%; display:block; }
.founder__name{ font-family:var(--serif); font-weight:500; font-size:clamp(48px,5.2vw,80px); line-height:.98; letter-spacing:.01em; text-transform:uppercase; color:var(--burg); margin-top:18px; }
.founder__name span{ display:block; }
.founder__body{ margin-top:34px; display:flex; flex-direction:column; gap:20px; font-size:15.5px; line-height:1.78; color:var(--ink); opacity:.9; text-align:justify; max-width:54ch; }
.founder__quote{ margin-top:34px; padding-left:24px; border-left:1px solid var(--gold); font-family:var(--serif); font-style:normal; font-size:23px; line-height:1.4; color:var(--burg); max-width:30ch; }

/* ============================================================
   PAGE PROJETS — hero-carousel plein cadre + mosaïque
   ============================================================ */
/* Hero carrousel */
.hero-carousel{ position:relative; width:100%; height:clamp(540px,78vh,760px); overflow:hidden; background:var(--ink); isolation:isolate; }
.hc__track{ position:absolute; inset:0; display:flex; transition:transform 900ms cubic-bezier(.65,0,.35,1); will-change:transform; }
.hc__slide{ position:relative; flex:0 0 100%; height:100%; overflow:hidden; }
.hc__media{ position:absolute; inset:0; }
.hc__media image-slot{ width:100%; height:100%; display:block; --is-radius:0; }
.hc__scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,17,15,.25) 0%, rgba(20,17,15,0) 35%, rgba(20,17,15,0) 55%, rgba(20,17,15,.62) 100%); pointer-events:none; }
.hc__caption{ position:absolute; left:0; right:0; bottom:0; padding:0 56px 48px; max-width:var(--max-width); margin:0 auto; color:var(--cream); display:flex; align-items:flex-end; justify-content:space-between; gap:48px; }
.hc__caption-left{ max-width:820px; transform:translateY(20px); opacity:0; }
.hc__slide.is-active .hc__caption-left{ animation:hc-rise .9s .25s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes hc-rise{ to{ transform:translateY(0); opacity:1; } }
.hc__kicker{ font-family:var(--sans); font-size:9px; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); display:inline-flex; align-items:center; gap:12px; }
.hc__kicker::before{ content:''; display:inline-block; width:24px; height:1px; background:var(--gold); opacity:.85; }
.hc__title{ font-family:var(--serif); font-weight:500; font-size:clamp(22px,2.2vw,34px); line-height:1.1; letter-spacing:-0.005em; color:var(--cream); margin-top:10px; }
.hc__title em{ font-style:normal; font-weight:400; color:var(--gold); }
.hc__meta{ margin-top:12px; font-family:var(--serif); font-style:normal; font-size:19px; color:rgba(230,223,209,.82); }
.hc__cta{ flex-shrink:0; padding-bottom:6px; }
.hc__cta .arrow-link{ color:var(--cream); border-bottom-color:var(--gold); }
.hc__controls{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); padding:0 32px; display:flex; justify-content:space-between; pointer-events:none; z-index:3; }
.hc__arrow{ pointer-events:auto; width:56px; height:56px; border-radius:50%; background:rgba(38,36,33,.28); backdrop-filter:blur(6px); border:1px solid rgba(230,223,209,.28); color:var(--cream); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .3s ease; font-family:var(--serif); font-size:24px; }
.hc__arrow:hover{ background:var(--cream); color:var(--ink); border-color:var(--cream); }
.hc__dots{ position:absolute; left:0; right:0; bottom:28px; display:flex; justify-content:center; gap:10px; z-index:3; }
.hc__dot{ width:32px; height:2px; background:rgba(230,223,209,.3); cursor:pointer; transition:background .25s ease; }
.hc__dot.is-active{ background:var(--cream); }

/* Mosaïque */
.mosaic{ background:var(--p2); padding:var(--section-py) 56px; }
.mosaic__inner{ max-width:var(--max-width); margin:0 auto; }
.mosaic__head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:56px; gap:32px; }
.mosaic__head .eyebrow{ color:var(--gold); }
.mosaic__count{ font-family:var(--serif); font-style:normal; font-size:17px; color:rgba(38,36,33,.55); }
.mosaic__row{ display:grid; gap:32px; margin-bottom:32px; }
.mosaic__row.row-60-40{ grid-template-columns:1.5fr 1fr; --row-h:460px; }
.mosaic__row.row-thirds{ grid-template-columns:1fr 1fr 1fr; --row-h:360px; }
.mosaic__row.row-thirds .mcard__media{ height:auto; aspect-ratio:1/1; }
.mosaic__row.row-40-60{ grid-template-columns:1fr 1.5fr; --row-h:460px; }
.mosaic__row.row-mosaic{ grid-template-columns:1fr 1.25fr; grid-template-rows:1fr 1fr; height:640px; }
.mosaic__row.row-mosaic .mcard:nth-child(1){ grid-column:1; grid-row:1 / span 2; height:100%; justify-content:center; }
.mosaic__row.row-mosaic .mcard:nth-child(1) .mcard__media{ height:auto; aspect-ratio:16/9; flex:none; }
.mosaic__row.row-mosaic .mcard:nth-child(2){ grid-column:2; grid-row:1; height:100%; }
.mosaic__row.row-mosaic .mcard:nth-child(3){ grid-column:2; grid-row:2; height:100%; }
.mosaic__row.row-mosaic .mcard:nth-child(2) .mcard__media,
.mosaic__row.row-mosaic .mcard:nth-child(3) .mcard__media{ height:auto; flex:1 1 auto; }
.mcard{ cursor:pointer; display:flex; flex-direction:column; }
.mcard__media{ position:relative; overflow:hidden; border-radius:var(--radius); height:var(--row-h,400px); background:#ECE7DD; }
.mcard__media image-slot{ width:100%; height:100%; display:block; }
.mcard__overlay{ position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgba(20,17,15,.42) 100%); opacity:0; transition:opacity .35s ease; pointer-events:none; }
.mcard:hover .mcard__overlay{ opacity:1; }
.mcard__hint{ position:absolute; left:20px; bottom:18px; color:var(--cream); font-family:var(--sans); font-size:9px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; opacity:0; transform:translateY(6px); transition:all .35s ease; display:inline-flex; gap:10px; align-items:center; }
.mcard:hover .mcard__hint{ opacity:1; transform:translateY(0); }
.mcard__hint::after{ content:'→'; font-family:var(--serif); font-style:normal; font-size:14px; letter-spacing:0; text-transform:none; }
.mcard__caption{ padding-top:16px; display:flex; align-items:baseline; justify-content:space-between; gap:24px; }
.mcard__title{ font-family:var(--serif); font-weight:500; color:var(--ink); line-height:1.15; letter-spacing:-0.005em; font-size:19px; }
.mcard__meta{ font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); flex-shrink:0; }
.mosaic__more{ display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:72px; }
.mosaic__more-meta{ font-family:var(--serif); font-style:normal; font-size:15px; color:rgba(38,36,33,.55); }

/* CTA — variante motif monogramme */
.cta--pattern::before{ background:url("../img/pattern-monogram.png"); background-size:280px; opacity:.06; mix-blend-mode:screen; }

/* ============================================================
   PAGE PROJET DÉTAIL
   ============================================================ */
.arrow-link--light{ color:var(--cream); border-bottom-color:rgba(230,223,209,.4); }

/* Header — média plein cadre + encart flottant */
.ph-hero{ position:relative; width:100%; height:100vh; min-height:720px; max-height:920px; background:var(--ink); overflow:hidden; }
.ph-hero__media{ position:absolute; inset:0; }
.ph-hero__media image-slot{ width:100%; height:100%; display:block; --is-radius:0; }
.ph-hero::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,17,15,.25) 0%, rgba(20,17,15,.05) 30%, rgba(20,17,15,.15) 100%); pointer-events:none; }
.ph-hero__title{
  position:absolute; left:auto; right:56px; bottom:56px; z-index:2; text-align:right; width:fit-content; width:-webkit-fit-content;
  font-family:var(--serif); font-weight:500;
  font-size:clamp(48px,6vw,96px); line-height:1.02;
  letter-spacing:-0.01em; color:var(--cream);
}

/* Sections génériques */
.sec{ max-width:var(--max-width); margin:0 auto; padding:var(--section-py) 56px; }
.sec__head{ margin-bottom:56px; }
.sec__head .display{ font-size:clamp(40px,4.6vw,64px); margin-top:18px; color:var(--burg); }

/* Grille 4 photos (1 grande + 3) */
.grid4{ display:grid; grid-template-columns:1.35fr 1fr 1fr; grid-template-rows:1fr 1fr; gap:16px; height:640px; }
.grid4 > *{ overflow:hidden; border-radius:var(--radius); }
.grid4 > *:nth-child(1){ grid-column:1; grid-row:1 / span 2; }
.grid4 > *:nth-child(2){ grid-column:2 / span 2; grid-row:1; }
.grid4 > *:nth-child(3){ grid-column:2; grid-row:2; }
.grid4 > *:nth-child(4){ grid-column:3; grid-row:2; }
.grid4 image-slot{ width:100%; height:100%; display:block; }

/* Média plein cadre */
.fullmedia{ width:100%; height:80vh; min-height:600px; max-height:820px; background:var(--ink); position:relative; }
.fullmedia image-slot{ width:100%; height:100%; display:block; --is-radius:0; }
.fullmedia[data-h="tall"]{ height:90vh; min-height:680px; max-height:920px; }

/* Bloc transition */
.transition{ max-width:760px; margin:0 auto; padding:72px 56px; text-align:center; }
.transition .display{ font-size:clamp(32px,3.8vw,54px); max-width:18ch; margin:0 auto; white-space:pre-line; }
/* Transition fond sombre */
.transition--dark{ max-width:100%; background:var(--ink); padding:72px 56px; }
.transition--dark .display{ color:var(--cream); }
.transition--dark .display em{ color:var(--gold); }

/* Visite guidée */
.visite{ position:relative; width:100%; min-height:760px; background:var(--ink); }
.visite__bgs{ position:absolute; inset:0; overflow:hidden; }
.visite__bg{ position:absolute; inset:0; opacity:0; transition:opacity .5s ease; pointer-events:none; }
.visite__bg.is-active{ opacity:1; pointer-events:auto; }
.visite__bg image-slot{ width:100%; height:100%; display:block; --is-radius:0; }
.visite__bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(20,17,15,.35) 0%, rgba(20,17,15,.05) 50%, rgba(20,17,15,0) 100%); pointer-events:none; }
.visite__inner{ position:relative; z-index:1; max-width:var(--max-width); margin:0 auto; padding:96px 56px; min-height:760px; display:flex; flex-direction:column; pointer-events:none; }
.visite__inner .visite__tabs, .visite__inner .pill{ pointer-events:auto; }
.visite__head{ margin-bottom:56px; }
.visite__head .eyebrow{ color:rgba(230,223,209,.78); }
.visite__head .display{ color:var(--cream); margin-top:18px; font-size:clamp(40px,4.6vw,64px); }
.visite__pills{ flex:1; display:flex; flex-direction:column; gap:14px; max-width:300px; margin-top:18px; margin-left:24px; }
body[data-shell="wide"] .visite__inner{ max-width:none; padding-left:80px; padding-right:80px; }
body[data-shell="wide"] .visite__pills{ margin-left:0; }
.pill{ background:rgba(250,248,244,.86); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-radius:999px; padding:14px 18px; display:flex; align-items:center; gap:14px; cursor:pointer; transition:all .35s ease; border:1px solid rgba(250,248,244,.4); }
.pill:hover{ background:rgba(250,248,244,.95); }
.pill__plus{ flex-shrink:0; width:28px; height:28px; border-radius:50%; border:1px solid rgba(38,36,33,.35); display:flex; align-items:center; justify-content:center; transition:all .35s ease; }
.pill__plus svg{ width:11px; height:11px; }
.pill__plus line{ stroke:var(--ink); stroke-width:1.2; }
.pill__label{ font-family:var(--sans); font-size:14px; font-weight:600; color:var(--ink); letter-spacing:.005em; }
.pill.is-open{ flex-direction:column; align-items:stretch; border-radius:22px; padding:22px 26px; background:rgba(250,248,244,.94); gap:0; }
.pill.is-open .pill__plus{ display:none; }
.pill.is-open .pill__label{ display:none; }
.pill__body{ font-family:var(--sans); font-size:14.5px; line-height:1.55; color:var(--ink); text-align:justify; display:none; }
.pill.is-open .pill__body{ display:block; }
.pill__body .pill__strong{ font-weight:700; }


/* Visite — barre d'onglets pièces */
.visite__tabs{
  display:flex; gap:32px; position:relative;
  width:fit-content; margin:-72px auto 48px; padding:16px 32px;
  background:rgba(250,248,244,.86); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(250,248,244,.4); border-radius:999px;
}
.visite__tab{
  font-family:var(--sans); font-size:11px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:rgba(38,36,33,.55); background:none; border:none;
  padding:0 0 14px; white-space:nowrap;
  cursor:pointer; transition:color .22s ease; position:relative; outline:none;
}
.visite__tab::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px;
  height:1px; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform .3s ease;
}
.visite__tab:hover{ color:var(--ink); }
.visite__tab.is-active{ color:var(--ink); }
.visite__tab.is-active::after{ transform:scaleX(1); }
/* Groupes de pills par pièce */
.visite__rooms{ flex:1; display:flex; flex-direction:column; }
.visite__room{ display:none; }
.visite__room.is-active{ display:flex; flex-direction:column; flex:1; }

/* Galerie détails (3x2) */
.details{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:start; }
.detail-item{ display:flex; flex-direction:column; }
.detail-item__img{ aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius); }
.detail-item__img image-slot{ width:100%; height:100%; display:block; }
.detail-item__cap{ margin-top:12px; font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:.05em; color:rgba(38,36,33,.6); line-height:1.55; }

/* Pièce maîtresse — photo signature unique */
.pm-img{ width:100%; aspect-ratio:21/8; overflow:hidden; border-radius:var(--radius); }
.pm-img image-slot{ width:100%; height:100%; display:block; }

/* Pourquoi — version condensée avec portrait */
.pourquoi{ background:var(--cream); padding:72px 56px; }
.pourquoi__inner{ max-width:var(--max-width); margin:0 auto; }
.pourquoi__layout{ display:grid; grid-template-columns:500px 1fr; gap:64px; align-items:start; }
.pourquoi__portrait{ overflow:hidden; border-radius:var(--radius); position:static; aspect-ratio:4/5; }
.pourquoi__portrait image-slot{ width:100%; height:100%; display:block; }
.pourquoi__rows{ display:flex; flex-direction:column; }
.pourquoi__head{ text-align:left; margin-bottom:24px; }
.pourquoi__head .display{ font-size:clamp(28px,3vw,44px); max-width:none; margin:0; white-space:pre-line; }
.pq-row{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; margin-bottom:56px; }
.pq-row:last-child{ margin-bottom:0; }
.pq-row--reverse .pq-row__media{ order:2; }
.pq-row__media{ aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius); }
.pq-row__media image-slot{ width:100%; height:100%; display:block; }
.pq-row__text{ padding:0 32px; }
/* Ligne texte seul (sans photo) */
.pq-row--text{ grid-template-columns:1fr; margin-bottom:0; border-bottom:1px solid rgba(38,36,33,.07); padding:16px 0; }
.pq-row--text:last-child{ border-bottom:none; }
.pq-row--text .pq-row__text{ padding:0; max-width:860px; }
.pq-row--text .pq-row__rule{ margin:14px 0; }
.pq-row__num{ display:none; }
.pq-row__title{ font-family:var(--serif); font-weight:500; font-size:clamp(24px,2.4vw,34px); color:var(--ink); line-height:1.1; letter-spacing:-0.005em; }
.pq-row__rule{ height:1px; width:40px; background:var(--gold); opacity:.6; margin:24px 0; }
.pq-row__body{ font-family:var(--sans); font-size:14.5px; line-height:1.7; color:var(--ink); opacity:.78; max-width:none; text-align:justify; text-wrap:pretty; }

/* Valeurs — 4 colonnes */
.valeurs{ background:var(--paper); padding:64px 56px; border-top:1px solid rgba(38,36,33,.06); }
.valeurs__inner{ max-width:var(--max-width); margin:0 auto; }
.valeurs__head{ text-align:center; margin-bottom:72px; }
.valeurs__head .display{ font-size:clamp(28px,2.8vw,40px); margin-top:0; }
.valeurs__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.valeur{ padding:0 32px; text-align:center; }
.valeur + .valeur{ border-left:2px solid rgba(164,128,84,.55); }
.valeur__num{ font-family:var(--serif); font-style:normal; font-size:15px; color:var(--gold); margin-bottom:20px; }
.valeur__title{ font-family:var(--serif); font-weight:500; font-size:clamp(22px,2vw,28px); color:var(--ink); line-height:1.1; }
.valeur__rule{ height:1px; width:28px; background:var(--gold); opacity:.55; margin:20px auto; }
.valeur__tag{ font-family:var(--sans); font-style:normal; font-size:14px; color:var(--ink); opacity:.6; line-height:1.5; max-width:22ch; margin:0 auto; text-wrap:pretty; }

/* CTA bloc (détail) */
.cta-block{ background:var(--burg); color:var(--cream); padding:var(--section-py) 56px; text-align:center; position:relative; overflow:hidden; }
.cta-block::before{ content:''; position:absolute; inset:0; background:radial-gradient(ellipse at center top, rgba(164,128,84,.18), transparent 60%); pointer-events:none; }
.cta-block__inner{ max-width:760px; margin:0 auto; position:relative; }
.cta-block .eyebrow{ color:rgba(230,223,209,.6); }
.cta-block__title{ font-family:var(--serif); font-weight:500; font-size:clamp(40px,4.4vw,68px); line-height:1.05; color:var(--cream); margin-top:24px; white-space:pre-line; }
.cta-block__title em{ font-style:normal; font-weight:400; color:var(--gold); }
.cta-block__lede{ margin-top:28px; font-family:var(--serif); font-style:normal; font-size:20px; line-height:1.5; color:rgba(230,223,209,.78); text-align:justify; }
.cta-block__btn{ margin-top:40px; }

/* Autres projets */
.others{ background:var(--paper); padding:28px 56px 40px; }
.others__inner{ max-width:var(--max-width); margin:0 auto; }
.others__head{ display:flex; justify-content:flex-end; align-items:center; margin-bottom:20px; }
.others__head .display{ font-size:clamp(28px,2.8vw,40px); margin-top:14px; }
.others__grid{ display:flex; justify-content:flex-start; gap:24px; }
.ocard{ width:420px; flex:0 0 420px; }
.ocard__media{ aspect-ratio:1/1; overflow:hidden; border-radius:var(--radius); }
.others__foot{ display:none; }
.ocard__media image-slot{ width:100%; height:100%; display:block; }
.ocard__cap{ padding-top:14px; border-top:1px dashed var(--gold); display:flex; flex-direction:row; align-items:baseline; justify-content:space-between; gap:16px; }
.ocard__title{ font-family:var(--serif); font-weight:500; font-size:22px; color:var(--ink); flex-shrink:0; }
.ocard__meta{ font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); text-align:right; }

/* ============================================================
   PAGE SERVICE — Architecture d'intérieur
   ============================================================ */
.svc-hero{ position:relative; width:100%; min-height:560px; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; color:var(--cream); isolation:isolate; }
.svc-hero__bg{ position:absolute; inset:0; z-index:-2; }
.svc-hero__bg image-slot{ width:100%; height:100%; display:block; --is-radius:0; }
.svc-hero::after{ content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(to top,rgba(20,18,16,0.88) 0%,rgba(20,18,16,0.2) 60%,rgba(20,18,16,0.05) 100%); pointer-events:none; }
.svc-hero__inner{ position:relative; z-index:1; max-width:1100px; padding:170px 56px 120px; }
.svc-hero .eyebrow{ color:rgba(230,223,209,.8); display:block; margin-bottom:26px; }
.svc-hero__title{ font-family:var(--serif); font-weight:500; font-size:clamp(40px,5.2vw,76px); line-height:1.06; letter-spacing:-0.014em; color:var(--cream); margin:0 auto 30px; max-width:18ch; text-wrap:pretty; }
.svc-hero__sub{ font-family:var(--sans); font-weight:300; font-size:18px; line-height:1.7; color:rgba(230,223,209,.82); max-width:560px; margin:0 auto; text-align:justify; }

.mission-intro{ background:var(--p2); }
.mission-intro__inner{ max-width:var(--max-width); margin:0 auto; padding:88px 56px 32px; }
.mission-intro .eyebrow{ display:block; margin-bottom:16px; }
.mission-intro__title{ font-family:var(--serif); font-weight:500; font-size:clamp(28px,3vw,44px); line-height:1.12; letter-spacing:-0.01em; color:var(--ink); margin-bottom:24px; }
.mission-intro__body{ font-family:var(--sans); font-weight:300; font-size:16px; line-height:1.75; color:var(--ink); opacity:.8; max-width:760px; text-align:justify; }

.mission-cards{ background:var(--p2); }
.mission-cards__inner{ max-width:var(--max-width); margin:0 auto; padding:24px 56px 96px; display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }
.mission-card{ padding:64px 56px 72px; border-radius:8px; box-shadow:0 2px 8px rgba(38,36,33,.09), 0 1px 3px rgba(38,36,33,.06); transition:transform .32s cubic-bezier(.16,1,.3,1), box-shadow .32s cubic-bezier(.16,1,.3,1); }
.mission-card:hover{ transform:translateY(-7px); box-shadow:0 16px 40px rgba(38,36,33,.14), 0 4px 12px rgba(38,36,33,.09); }
.mission-card--complete{ background:var(--burg); }
.mission-card--partielle{ background:var(--paper); }
.mission-card__badge{ font-family:var(--sans); font-weight:500; font-size:9px; letter-spacing:.28em; text-transform:uppercase; display:block; margin-bottom:32px; }
.mission-card--complete .mission-card__badge{ color:var(--gold); }
.mission-card--partielle .mission-card__badge{ color:rgba(38,36,33,.6); }
.mission-card__title{ font-family:var(--serif); font-weight:500; font-size:clamp(28px,2.8vw,44px); line-height:1.08; letter-spacing:-0.01em; margin-bottom:22px; }
.mission-card--complete .mission-card__title{ color:var(--cream); }
.mission-card--partielle .mission-card__title{ color:var(--ink); }
.mission-card__desc{ font-family:var(--sans); font-weight:300; font-size:15px; line-height:1.75; margin-bottom:40px; max-width:420px; text-align:justify; }
.mission-card--complete .mission-card__desc{ color:rgba(230,223,209,.78); }
.mission-card--partielle .mission-card__desc{ color:rgba(38,36,33,.8); }
.mission-card__list{ list-style:none; padding:0; display:grid; gap:13px; margin-bottom:52px; }
.mission-card__list li{ font-family:var(--sans); font-weight:400; font-size:13.5px; line-height:1.5; padding-left:22px; position:relative; }
.mission-card__list li::before{ content:'—'; position:absolute; left:0; font-size:11px; line-height:1.5; }
.mission-card--complete .mission-card__list li{ color:rgba(230,223,209,.82); }
.mission-card--complete .mission-card__list li::before{ color:var(--gold); }
.mission-card--partielle .mission-card__list li{ color:rgba(38,36,33,.8); }
.mission-card--partielle .mission-card__list li::before{ color:var(--gold); }
.mission-card__list li.exclu{ opacity:.38; }
.mission-card__list li.exclu::before{ content:'×'; }
.mission-card__note{ padding-top:24px; border-top:1px solid; font-family:var(--sans); font-weight:300; font-size:12.5px; line-height:1.6; font-style:normal; text-align:justify; }
.mission-card--complete .mission-card__note{ border-color:rgba(230,223,209,.18); color:rgba(230,223,209,.5); }
.mission-card--partielle .mission-card__note{ border-color:rgba(38,36,33,.1); color:rgba(38,36,33,.6); }

/* ============================================================
   CTA finale
   ============================================================ */
.cta{ background:var(--burg); color:var(--cream); padding:56px 56px; text-align:center; position:relative; overflow:hidden; }
.cta::before{ content:''; position:absolute; inset:0; background:radial-gradient(ellipse at center top, rgba(164,128,84,.18), transparent 60%); pointer-events:none; }
.cta__inner{ max-width:800px; margin:0 auto; position:relative; }
.cta__eyebrow{ color:rgba(230,223,209,.55); }
.cta__title{ font-family:var(--serif); font-weight:500; font-size:clamp(44px,4.2vw,60px); line-height:1.1; color:var(--cream); margin-top:0; }
.cta__title em{ font-style:normal; font-weight:400; color:var(--cream); }
.cta__lede{ margin-top:28px; font-family:var(--serif); font-style:normal; font-size:20px; color:rgba(230,223,209,.7); line-height:1.5; text-align:justify; }
.cta__btn{ margin-top:44px; }

/* ============================================================
   CONTACT — page formulaire
   ============================================================ */
.contact{ background:var(--paper); padding:calc(var(--nav-h) + 82px) 56px 120px; }
.contact__inner{
  max-width:1280px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:96px; align-items:start;
}
.contact__aside .eyebrow{ display:block; margin-bottom:24px; }
.contact__title{
  font-family:var(--serif); font-weight:500; font-size:clamp(44px,4.4vw,64px);
  line-height:1.05; letter-spacing:var(--letter-tight); color:var(--ink);
}
.contact__title em{ font-style:normal; font-weight:400; color:var(--gold); }
.contact__lede{
  font-family:var(--sans); font-weight:300; font-size:18px; line-height:1.65;
  color:rgba(38,36,33,.8); margin:36px 0 48px; max-width:460px; text-align:justify;
}
.contact__dl{ display:grid; gap:18px; margin:0; }
.contact__dt{
  font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(38,36,33,.6); margin-bottom:6px;
}
.contact__dd{ margin:0; font-family:var(--sans); font-size:15px; line-height:1.4; color:var(--ink); }

/* — Formulaire — */
.cform{ max-width:720px; }
.cform__eyebrow{
  font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold); margin-bottom:24px;
}

/* Sélecteur de service */
.cform__services{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:24px; }
.cform__svc-card{
  display:flex; flex-direction:column; gap:5px; cursor:pointer;
  padding:16px 18px; border-radius:var(--btn-radius); border:1px solid rgba(38,36,33,.16);
  background:#fff; transition:border-color 140ms, background 140ms;
  position:relative;
}
.cform__svc-card.is-selected{ border-color:var(--burg); background:rgba(78,41,36,.04); }
.cform__svc-radio{ position:absolute; opacity:0; pointer-events:none; }
.cform__svc-name{
  font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink); transition:color 140ms;
}
.cform__svc-card.is-selected .cform__svc-name{ color:var(--burg); }
.cform__svc-desc{
  font-family:var(--sans); font-size:11px; font-weight:300; color:rgba(38,36,33,.52);
  line-height:1.45;
}

/* Champs */
.cform__grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 20px; margin-bottom:14px; }
.cform__label{
  font-family:var(--sans); font-size:10px; font-weight:600; line-height:1;
  letter-spacing:.18em; text-transform:uppercase; color:rgba(38,36,33,.6);
  margin-bottom:7px; display:block;
}
.cform__input,.cform__textarea{
  font-family:var(--sans); font-size:13.5px; font-weight:400; line-height:1.4;
  padding:12px 14px; border-radius:var(--btn-radius); border:1px solid rgba(38,36,33,.18);
  background:#fff; color:var(--ink); width:100%;
  transition:border-color 140ms, box-shadow 140ms; outline:none;
}
.cform__input::placeholder,.cform__textarea::placeholder{ color:rgba(38,36,33,.34); }
.cform__input:focus,.cform__textarea:focus{
  border-color:var(--gold); box-shadow:0 0 0 2px rgba(164,128,84,.15);
}
.cform__input--date{ color-scheme:light; }
.cform__textarea{ min-height:130px; resize:vertical; display:block; }

/* Cartes radio (type d'accompagnement / mission) */
.cform__radio-group{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.cform__radio-option{
  display:flex; align-items:flex-start; gap:13px; cursor:pointer;
  padding:14px 16px; border-radius:var(--btn-radius); border:1px solid rgba(38,36,33,.16);
  background:#fff; transition:border-color 140ms, background 140ms;
  position:relative;
}
.cform__radio-option input[type="radio"]{ position:absolute; opacity:0; pointer-events:none; }
.cform__radio-dot{
  flex-shrink:0; width:16px; height:16px; border-radius:50%; margin-top:1px;
  border:1.5px solid rgba(38,36,33,.28); transition:border-color 140ms, border-width 140ms;
}
.cform__radio-option.is-selected{ border-color:var(--burg); background:rgba(78,41,36,.04); }
.cform__radio-option.is-selected .cform__radio-dot{ border-color:var(--burg); border-width:5px; }
.cform__radio-inner{ display:flex; flex-direction:column; gap:3px; }
.cform__radio-name{
  font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink); transition:color 140ms;
}
.cform__radio-option.is-selected .cform__radio-name{ color:var(--burg); }
.cform__radio-desc{
  font-family:var(--sans); font-size:10.5px; font-weight:300; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(38,36,33,.52);
}

/* Sections conditionnelles */
.cform__section{ margin-top:0; }
.cform__section-label{ margin-bottom:10px; }

/* Bouton envoi */
.cform__submit{
  margin-top:22px; font-family:var(--sans); font-size:11px; font-weight:600; line-height:1;
  letter-spacing:.18em; text-transform:uppercase; padding:16px 28px; border-radius:var(--btn-radius);
  background:var(--burg); color:var(--cream); transition:filter 140ms, transform 80ms;
}
.cform__submit:hover{ filter:brightness(.88); }
.cform__submit:active{ transform:scale(.99); }

/* Carte de confirmation */
.cform__success{
  background:var(--burg); color:var(--cream); border-radius:6px; padding:48px 56px;
}
.cform__success-eyebrow{
  font-family:var(--sans); font-size:11px; font-weight:500; line-height:1;
  letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin-bottom:18px;
}
.cform__success-title{
  font-family:var(--serif); font-weight:400; font-size:36px; line-height:1.15; margin:0 0 14px;
}
.cform__success-text{
  font-family:var(--sans); font-weight:300; font-size:16px; line-height:1.6; margin:0; opacity:.8;
}

@media (max-width:980px){
  .contact__inner{ grid-template-columns:1fr; gap:56px; }
}
@media (max-width:860px){
  .contact{ padding:calc(var(--nav-h) + 48px) 28px 80px; }
  .cform__grid{ grid-template-columns:1fr; }
  .cform__services{ grid-template-columns:1fr; }
}

/* ============================================================
   FOOTER A — colonnes (unique, injecté par site.js)
   ============================================================ */
.footer{ background:var(--ink); color:var(--cream); }
.footer__main{
  max-width:var(--max-width); margin:0 auto; padding:72px 56px 48px;
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:48px;
}
.footer__brand{ display:block; }
.footer__brand img{ height:auto; width:100%; max-width:280px; }
.footer__tag{ font-family:var(--serif); font-style:normal; font-size:14px; color:rgba(230,223,209,.5); margin-top:14px; }
.footer__col-h{ font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:18px; }
.footer__link{ display:block; font-size:12.5px; color:rgba(230,223,209,.78); padding:6px 0; cursor:pointer; transition:color .2s; }
.footer__link:hover{ color:var(--cream); }
.footer__email{ font-size:14px; color:var(--cream); border-bottom:1px solid var(--gold); padding-bottom:3px; display:inline-block; }
.footer__addr{ font-size:12px; color:rgba(230,223,209,.5); line-height:1.6; margin-top:14px; }
.footer__legal{
  border-top:1px solid rgba(230,223,209,.1); padding:18px 56px;
  max-width:var(--max-width); margin:0 auto;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
}
.footer__cr{ font-size:10px; letter-spacing:.08em; color:rgba(230,223,209,.4); }
.footer__legal-links{ display:flex; gap:22px; }
.footer__legal-links a{ font-size:10px; letter-spacing:.08em; color:rgba(230,223,209,.45); cursor:pointer; }
.footer__legal-links a:hover{ color:rgba(230,223,209,.8); }

/* — pages full-bleed (sections sans cap de largeur) : nav + footer suivent la largeur de l'écran — */
body[data-shell="wide"] .nav__inner,
body[data-shell="wide"] .footer__main,
body[data-shell="wide"] .footer__legal{
  max-width:none;
  padding-left:80px;
  padding-right:80px;
}
@media (max-width:860px){
  body[data-shell="wide"] .nav__inner,
  body[data-shell="wide"] .footer__main,
  body[data-shell="wide"] .footer__legal{
    padding-left:22px;
    padding-right:22px;
  }
}

/* image-slot theming */
image-slot{ --is-bg:#ECE7DD; --is-border:rgba(38,36,33,.08); --is-fg:rgba(38,36,33,.42); --is-radius:var(--radius); font-family:var(--sans); }
image-slot[data-mood="dark"]{ --is-bg:#2E1A16; --is-border:rgba(230,223,209,.12); --is-fg:rgba(230,223,209,.5); }

/* ============================================================
   VISITE — onglets par pièce
   ============================================================ */
.vtabs{
  max-width:var(--max-width); margin:0 auto; padding:0 56px 96px;
}
.vtabs__shell{
  border:1px solid rgba(38,36,33,.1); overflow:hidden; background:var(--paper);
}
.vtabs__bar{
  display:flex; border-bottom:1px solid rgba(38,36,33,.1);
}
.vtab{
  flex:1; padding:20px 16px;
  font-family:var(--sans); font-size:10px; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase;
  color:rgba(38,36,33,.45); background:var(--p2);
  border:none; border-right:1px solid rgba(38,36,33,.1);
  cursor:pointer; transition:color .22s ease,background .22s ease; outline:none;
}
.vtab:last-child{ border-right:none; }
.vtab:hover:not(.is-active){ color:var(--ink); background:var(--cream); }
.vtab.is-active{ background:var(--gold); color:var(--cream); }
.vtabs__panel{ display:none; }
.vtabs__panel.is-active{ display:flex; min-height:540px; }
.vtabs__left{
  width:340px; flex-shrink:0; padding:36px 32px;
  display:flex; flex-direction:column; gap:12px;
  border-right:1px solid rgba(38,36,33,.08); overflow-y:auto;
}
.vtabs__right{ flex:1; min-height:540px; position:relative; }
.vtabs__right image-slot{ width:100%; height:100%; display:block; --is-radius:0; }
/* pills en contexte clair */
.vtabs__left .pill{
  background:var(--p2); border-color:rgba(38,36,33,.12);
  backdrop-filter:none; -webkit-backdrop-filter:none; width:auto !important;
}
.vtabs__left .pill:hover{ background:var(--cream); }
.vtabs__left .pill.is-open{ background:var(--cream); border-radius:14px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .agence__inner{ grid-template-columns:1fr; gap:48px; }
  .footer__main{ grid-template-columns:1fr 1fr; gap:40px 48px; }
}
@media (max-width:980px){
  .intro__inner,.values__inner,.founder__inner{ grid-template-columns:1fr; gap:48px; }
  .values__lead{ position:static; }
  .intro[data-layout="right"] .intro__portrait,
  .founder[data-layout="left"] .founder__portrait{ order:-1; }
  .mosaic__row.row-60-40,.mosaic__row.row-40-60{ grid-template-columns:1fr; --row-h:380px; }
  .mosaic__row.row-thirds{ grid-template-columns:1fr 1fr; --row-h:300px; }
  .mosaic__row.row-mosaic{ height:520px; }
}
@media (max-width:860px){
  :root{ --section-py:80px; }
  .nav__links{ display:none; }
  .nav__burger{ display:block; }
  .nav__inner{ padding:0 28px; }
  /* Le carrousel reste un carrousel en mobile : une vignette par vue,
     que l'on fait defiler au doigt ou par les fleches. Il empilait
     les vignettes et masquait sa navigation. */
  .pcard{ flex:0 0 100%; }
  .acc__grid{ grid-template-columns:1fr; }
  .values__grid{ grid-template-columns:1fr; }
  .mosaic__row,.mosaic__row.row-thirds{ grid-template-columns:1fr !important; --row-h:340px; }
  .mosaic__row.row-mosaic{ grid-template-rows:none; height:auto; }
  .mosaic__row.row-mosaic .mcard{ height:auto; }
  .mosaic__row.row-mosaic .mcard__media{ height:340px; flex:none; }
  .mosaic__row.row-mosaic .mcard:nth-child(1),
  .mosaic__row.row-mosaic .mcard:nth-child(2),
  .mosaic__row.row-mosaic .mcard:nth-child(3){ grid-column:1; grid-row:auto; }
  .mosaic__row.row-mosaic .mcard:nth-child(1) .mcard__media{ height:auto; aspect-ratio:16/9; }
  .hc__caption{ padding:0 28px 36px; flex-direction:column; align-items:flex-start; gap:16px; }
  .hc__controls{ display:none; }
  .hero__inner{ padding:120px 28px; }
  .ph-card{ right:24px; bottom:24px; left:24px; min-width:0; max-width:none; }
  .sec,.pourquoi,.valeurs,.cta-block,.others{ padding-left:28px; padding-right:28px; }
  .transition{ padding:96px 28px; }
  .visite__inner{ padding:72px 28px; }
  body[data-shell="wide"] .visite__inner{ padding-left:22px; padding-right:22px; }
  .visite__tabs{ margin:-60px auto 40px; padding:14px 24px; }
  .visite__pills{ max-width:none; }
  .pq-row{ grid-template-columns:1fr; gap:24px; }
  .pourquoi__layout{ grid-template-columns:1fr; gap:32px; }
  .pourquoi__portrait{ position:static; aspect-ratio:4/3; }
  .pq-row--reverse .pq-row__media{ order:0; }
  .grid4{ grid-template-columns:1fr 1fr; grid-template-rows:220px 220px 220px; height:auto; }
  .grid4 > *:nth-child(1){ grid-column:1 / span 2; grid-row:1; }
  .grid4 > *:nth-child(2){ grid-column:1 / span 2; grid-row:2; }
  .grid4 > *:nth-child(3){ grid-column:1; grid-row:3; }
  .grid4 > *:nth-child(4){ grid-column:2; grid-row:3; }
  .valeurs__grid{ grid-template-columns:1fr 1fr; gap:48px 0; }
  .valeur + .valeur{ border-left:none; }
  .valeur:nth-child(odd){ border-right:2px solid rgba(164,128,84,.55); }
  .others__grid{ justify-content:flex-start; flex-wrap:wrap; }
  .details{ grid-template-columns:1fr 1fr; }
  .ph-hero__title{ left:auto; right:28px; bottom:36px; text-align:right; }
  .mission-cards__inner{ grid-template-columns:1fr; padding:24px 28px 72px; }
  .mission-intro__inner{ padding:64px 28px 24px; }
  .svc-hero__inner{ padding:150px 28px 88px; }
  .mission-card{ padding:48px 36px 56px; }
  .hero__inner{ padding:120px 28px; }
  .projects,.acc,.agence,.cta,.intro,.values,.founder,.mosaic{ padding-left:28px; padding-right:28px; }
  .footer__main{ grid-template-columns:1fr; padding:56px 28px 40px; }
  .footer__legal{ flex-direction:column; align-items:flex-start; padding:18px 28px; }
}

/* ============================================================
   MOBILE — neutralisation des largeurs fixes (styles inline)
   posées dans l'éditeur. N'affecte QUE le mobile ; desktop intact.
   ============================================================ */
@media (max-width:860px){
  /* pages projet — bloc « Pourquoi nous confier votre projet » */
  .pourquoi__layout{ grid-template-columns:1fr !important; min-width:0; }
  .pourquoi__inner, .pourquoi__rows, .pq-row, .pq-row__text{ min-width:0; }
  .pq-row__body{ width:auto !important; max-width:100% !important; }
  .pourquoi__portrait image-slot{ height:auto !important; }
  /* titre du header projet posé en absolu avec width fixe */
  .ph-hero__title{ width:auto !important; max-width:calc(100vw - 56px); }
  /* « Autres projets » — cartes figées à 420px */
  .others__grid{ flex-direction:column; }
  .ocard{ width:100% !important; flex:1 1 100% !important; }
  /* barre d'onglets « visite » — repli sur plusieurs lignes */
  .visite__tabs{ flex-wrap:wrap; gap:4px 20px; }
  /* grille « valeurs » — mots longs qui débordent la colonne */
  .valeur{ padding:0 12px; }
  .valeur__title{ overflow-wrap:break-word; }
  /* garde-fou : le crossfade plein cadre ne crée pas de scroll horizontal */
  .visite{ overflow-x:clip; }
  /* titres de transition posés en white-space:nowrap → autorise le repli */
  .transition .display{ white-space:normal !important; }

  /* ---------- Header : bouton « Contactez-nous » du menu déroulant ---------- */
  /* Il héritait du style des liens (serif 30px) → on le repasse en bouton normal, aligné à gauche */
  .nav__mobile .btn{
    font-family:var(--sans) !important; font-size:11px !important; font-weight:600 !important;
    letter-spacing:.16em !important; padding:14px 28px !important; line-height:1.2 !important;
    border-bottom:none !important; align-self:flex-start; width:auto; margin-top:22px;
  }

  /* ---------- Accueil : légende Combebelle coupée ---------- */
  .pcard__caption{ flex-direction:column; align-items:flex-start; gap:6px; }
  .pcard__meta{ flex-shrink:1; }

  /* ---------- Accueil : encart « DESSIGNE » — ordre titre / trait / photo / texte ---------- */
  .agence__inner{ display:flex; flex-direction:column; gap:28px; }
  .agence__col{ display:contents; }
  .agence__head{ order:1; }
  .agence__portrait{ order:2; }
  .agence__text{ order:3; }
  /* .agence__inner centre ses enfants ; le bloc titre, qui s'ajuste a
     la largeur du logo, se retrouvait decale vers la droite alors que
     la photo et le texte sont a fleur de marge. */
  .agence__head{ align-self:flex-start; }
  .agence__head .agence__title{ margin-top:0 !important; }
  .agence__head .agence__title img{ margin:0 !important; }
  .agence__text .agence__body{ margin-top:0; }
  .agence__portrait image-slot{ width:100% !important; height:auto !important; aspect-ratio:4/5; margin:0 !important; }
  .agence__body p{ width:auto !important; height:auto !important; }

  /* ---------- Agence : intro — titre / trait à gauche, photo centrée, texte justifié (comme Kim Fourneaux) ---------- */
  .intro__inner{ display:flex; flex-direction:column; align-items:flex-start; gap:28px; }
  .intro__col{ display:contents; }
  .intro__head{ order:1; text-align:left; align-self:stretch; }
  .intro__portrait{ order:2; margin:0 !important; width:100%; max-width:none; align-self:stretch; }
  .intro__text{ order:3; align-self:stretch; }
  .intro__head img{ margin:0 0 4px 0 !important; }
  .intro__head .gold-rule{ margin-left:0; margin-right:auto; }
  .intro__text .intro__body{ text-align:justify; max-width:100%; align-items:stretch; }

  /* ---------- Agence : les quatre piliers — vignettes moins allongees ---------- */
  /* Pleine largeur, elles faisaient 319x171 (rapport 1,87) : le texte
     tenait sur deux lignes et la carte s'etirait. Resserrees, elles
     retrouvent un rapport proche de 1,3. */
  .values__grid .vcard{ max-width:250px; margin-left:auto; margin-right:auto; }

  /* ---------- Agence : Kim Fourneaux — titre / photo / texte pleine largeur ---------- */
  section.founder{ padding-left:24px !important; padding-right:24px !important; padding-top:72px !important; padding-bottom:72px !important; }
  .founder__inner{ display:flex; flex-direction:column; gap:32px; }
  .founder__col{ display:contents; }
  /* .founder__inner centre ses enfants ; le bloc titre s'ajuste a la
     largeur de « FOURNEAUX » et se retrouvait rentre par rapport a la
     photo et au texte, qui sont a fleur de marge. */
  .founder__head{ order:1; align-self:flex-start; }
  .founder__portrait{ order:2; aspect-ratio:4/5; margin:0 !important; }
  .founder__portrait image-slot{ height:auto !important; width:100% !important; margin:0 !important; padding:0 !important; }
  .founder__text{ order:3; }
  .founder__text .founder__body{ margin-top:0; max-width:100%; }

  /* ---------- Services (et accueil) : fiches « formule » plus compactes et un peu plus larges ---------- */
  .acc{ padding-left:16px !important; padding-right:16px !important; }
  .formule{ padding:40px 20px !important; }
  /* saut de ligne entre le corps et la première puce (carte « Conception, consultation, suivi de chantier ») */
  .formule--dark .formule__body{ margin-bottom:18px !important; }
  .formule__title{ font-size:30px; margin-top:16px; }
  .formule__body{ font-size:12.5px; line-height:1.5; margin-top:18px; }
  .formule__group-label{ margin-top:22px; }
  .formule__list{ gap:9px; margin-top:16px; }
  .formule__item{ font-size:12px; line-height:1.4; gap:10px; }
  .formule__note{ font-size:12.5px; line-height:1.45; }
  .formule__foot{ padding-top:28px; }

  /* ---------- Services : fiche « Architecture d'intérieur » figée en 608×892px ---------- */
  .acc .formule{ width:auto !important; height:auto !important; }

  /* ---------- Services / Architecture d'intérieur : titre hero fixe qui chevauche le monogramme ---------- */
  body[data-hero] > div[style*="height:520px"] p[style*="Cormorant Garamond"],
  section.svc-hero > p[style*="Cormorant Garamond"]{ font-size:26px !important; left:24px !important; bottom:24px !important; }
  body[data-hero] > div[style*="height:520px"] img[alt=""],
  section.svc-hero > img[alt=""]{ display:none !important; }

  /* ---------- Architecture d'intérieur : espace autour du trait doré (pq-row texte) ---------- */
  .pq-row--text .pq-row__rule{ margin:22px 0 !important; }
}

/* ============================================================
   MOBILE — pages projet (ph-hero / sec / grid4 / visite /
   details / pourquoi / valeurs). Ces classes ne servent QUE
   sur les pages projet : sûr de ne pas toucher les autres pages.
   ============================================================ */
@media (max-width:860px){
  /* 0 · Header projet en format horizontal (voir le maximum de la photo) */
  .ph-hero{ height:auto !important; min-height:0 !important; max-height:none !important; aspect-ratio:16/11; }


  /* Média pleine page (sous la pièce maîtresse) — format carré sur mobile */
  .fullmedia, .fullmedia[data-h="tall"]{ height:auto !important; min-height:0 !important; max-height:none !important; aspect-ratio:1/1; }

  /* 1 · Sous-titres de section plus petits */
  .sec__head .display{ font-size:34px !important; }
  .transition .display{ font-size:30px !important; }
  .transition--dark .display{ font-size:26px !important; }
  .pourquoi__head .display{ font-size:30px !important; }
  .valeurs__head .display{ font-size:28px !important; }

  /* 2 + 3 · Pièce maîtresse — image principale pleine largeur sans marge, images du dessous carrées */
  .sec:has(.grid4){ padding-left:0 !important; padding-right:0 !important; padding-top:14px !important; }
  /* Bandeau « Pieces maitresses » : 56px de blanc sous le titre en
     faisaient une bande trop haute sur un ecran de telephone. */
  .sec:has(.grid4) .sec__head{ padding-left:22px; padding-right:22px; margin-bottom:22px !important; }
  .grid4{ grid-template-columns:1fr 1fr !important; grid-template-rows:none !important; grid-auto-rows:auto !important; gap:6px !important; height:auto !important; }
  .grid4 > *{ border-radius:0 !important; }
  .grid4 > *:nth-child(1){ grid-column:1 / -1 !important; grid-row:auto !important; aspect-ratio:16/10; }
  .grid4 > *:nth-child(2){ grid-column:1 / -1 !important; grid-row:auto !important; aspect-ratio:16/10; }
  .grid4 > *:nth-child(3){ grid-column:1 !important; grid-row:auto !important; aspect-ratio:1/1; }
  .grid4 > *:nth-child(4){ grid-column:2 !important; grid-row:auto !important; aspect-ratio:1/1; }

  /* 4 · Visite — onglets pièces défilant horizontalement */
  .visite__tabs{ flex-wrap:nowrap !important; overflow-x:auto; -webkit-overflow-scrolling:touch; gap:0 22px !important; width:calc(100% - 16px) !important; scrollbar-width:none; }
  .visite__tabs::-webkit-scrollbar{ display:none; }
  .visite__tab{ white-space:nowrap; flex:0 0 auto; }

  /* 5 · Visite — bulles compactes ancrées en bas (l'image reste visible au-dessus) */
  /* La section faisait 760px de haut pour 375 de large : une photo
     horizontale s'y recadrait en portrait etroit, coupee de partout.
     Le carre lui convient, et le contenu (273px au naturel) y tient. */
  .visite{ min-height:100vw !important; }
  .visite__inner{ min-height:100vw; padding-top:52px !important; padding-bottom:22px !important; }

  /* Manore remonte sa visite de 40px par un style en dur, ce qui
     rognait d'autant le blanc sous le titre du bandeau : 50px au-dessus,
     10px en dessous. Le titre retrouve son centre. */
  .visite__inner{ margin-top:0 !important; }
  .visite__tabs{ margin-top:-40px !important; }
  .visite__rooms{ justify-content:flex-end; }
  .visite__room{ margin-top:auto; }
  .visite__room.is-active{ display:flex; flex-direction:column; justify-content:flex-end; }
  .visite__pills{ gap:8px; max-width:none; }
  .pill{ padding:10px 14px; }
  .pill__plus{ width:22px; height:22px; }
  .pill__plus svg{ width:9px; height:9px; }
  .pill__label{ font-size:12px; }
  .pill.is-open{ padding:14px 16px; border-radius:14px; }
  .pill__body{ font-size:12.5px; line-height:1.45; }

  /* 6 · « Un design pensé » — chaque image + légende en vignette, une par ligne */
  .details{ grid-template-columns:1fr !important; gap:18px !important; }
  .detail-item{ background:var(--p2); border-radius:8px; overflow:hidden; box-shadow:0 2px 8px rgba(38,36,33,.06); }
  .detail-item__img{ aspect-ratio:16/10 !important; border-radius:0 !important; }
  .detail-item__cap{ margin-top:0; padding:14px 16px 18px; font-size:12px; }

  /* 7 · « Nous confier votre projet » — réduire l'espace vide au-dessus du texte */
  .pourquoi{ padding-top:36px !important; }
  .pourquoi__layout{ gap:22px !important; }
  .pourquoi__portrait{ aspect-ratio:16/9 !important; max-height:200px; }
  .pourquoi__portrait image-slot{ height:100% !important; }

  /* 8 · « Les valeurs de chaque projet » — encart pleine largeur, petite marge */
  .valeurs{ padding-left:12px !important; padding-right:12px !important; }
  .valeurs__grid{ background:var(--p2); border-radius:10px; padding:32px 16px; gap:36px 0; }
}

/* ============================================================
   MOBILE — pages projet · ajustements typo & marges (v2)
   Desktop strictement intact (tout est sous @media 860px).
   ============================================================ */
@media (max-width:860px){
  /* « Pièces maîtresses » — +3px et épaisseur uniforme sur les deux mots */
  .sec:has(.grid4) .sec__head .display{ font-size:37px !important; }
  .sec:has(.grid4) .sec__head .display em,
  .sec:has(.grid4) .sec__head .display i{ font-weight:500 !important; }

  /* Bandeau « Visite guidée pièce par pièce » — marges resserrées (réf. Manoré) */
  .transition:not(.transition--dark){ padding:50px 22px !important; }
  .transition:not(.transition--dark) .display{ font-size:30px !important; }

  /* Visite — vignettes (bulles) plus compactes : moins de photo masquée */
  .visite__pills .pill{ width:auto !important; max-width:168px; padding:7px 12px !important; }
  .visite__pills .pill.is-open{ max-width:225px; padding:12px 14px !important; }
  .pill__plus{ width:19px; height:19px; }
  .pill__plus svg{ width:8px; height:8px; }
  .pill__label{ font-size:11px; }
  .pill__body{ font-size:12px; line-height:1.4; }
  .visite__pills{ gap:6px; }

  /* Bandeau sombre sous la visite — marges resserrées, texte +5px */
  .transition--dark{ padding:50px 22px !important; }
  .transition--dark .display{ font-size:31px !important; }

  /* « Un design pensé » — +5px */
  .sec:has(.details) .sec__head .display{ font-size:39px !important; }

  /* « Nous confier votre projet » — plus de bandeau beige au-dessus de la photo, titre +10px */
  .pourquoi{ overflow-x:clip; padding:0 22px 30px !important; }
  .pourquoi__portrait image-slot{ margin-top:0 !important; margin-bottom:0 !important;
    width:100% !important; height:100% !important; }
  /* « Nous confier votre projet » tient sur une ligne : le saut force
     avant « projet » est retire, et le corps se calcule sur la largeur
     reelle de l'ecran (moins les 2 x 22px de marge) pour ne jamais
     repasser a la ligne. Plafonne a la valeur d'origine. */
  .pourquoi__head .display{ font-size:min(calc((100vw - 44px) / 10.1), 36px) !important; }
  .pourquoi__head .display .brk-m{ display:inline; }
  .pourquoi__portrait{ aspect-ratio:16/10 !important; max-height:none !important;
    width:100vw !important; max-width:none !important;
    margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important;
    border-radius:0 !important; }

  /* « Les valeurs de chaque projet » — titre +5px, contenus −4px, marge titre/étiquettes resserrée */
  .valeurs__head{ margin-bottom:24px !important; }
  .valeurs__head .display{ font-size:33px !important; }
  .valeur__title{ font-size:18px !important; }
  .valeur__tag{ font-size:10px !important; max-width:26ch; }
  .valeur__num{ font-size:11px !important; margin-bottom:14px; }

  /* CTA « Parlons de votre projet » — bandeau resserré.
     Le titre occupe toute la largeur disponible sans jamais passer sur
     deux lignes : la formule le calcule a partir de la largeur reelle
     de l'ecran, moins les 2 x 28px de marge du bandeau. Le facteur 9
     est le rapport largeur/corps de la police pour ce texte precis,
     avec un peu de garde. Plafonne pour ne pas devenir enorme sur
     tablette. */
  .cta__title{ font-size:min(calc((100vw - 56px) / 9.5), 38px) !important; }
  .cta{ padding-top:34px !important; padding-bottom:34px !important; }
  .cta__btn{ margin-top:24px !important; }

  /* Le bandeau bordeaux remontait de 35px sur la section agence, ce qui
     ne laissait que 25px sous le bouton « Decouvrir l'agence ». */
  .agence{ margin-bottom:0 !important; }

  /* Visite — accès à toutes les pièces : compteur + flèches, plus de défilement */
  .visite__tabs{ display:none !important; }
  .visite__stepper{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    width:auto; max-width:calc(100% - 8px); margin:-40px auto 22px; padding:5px 6px;
    background:rgba(250,248,244,.9); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border:1px solid rgba(250,248,244,.4); border-radius:999px; pointer-events:auto; position:relative; z-index:2;
    display:flex !important;
  }
  .visite__step{
    flex:0 0 auto; width:30px; height:30px; border:none; border-radius:50%;
    background:rgba(38,36,33,.06); color:var(--ink);
    font-family:var(--serif); font-size:20px; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center; padding:0 0 2px;
  }
  .visite__step:active{ transform:scale(.99); }
  .visite__step-info{ flex:1; min-width:0; display:flex; align-items:center; justify-content:center; gap:8px; }
  .visite__step-count{ display:none; }
  .visite__step-name{
    font-family:var(--sans); font-size:10.5px; font-weight:700; letter-spacing:.16em;
    text-transform:uppercase; color:var(--ink);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
}

/* Visite — navigation compacte mobile (masquée en desktop) */
.visite__stepper{ display:none; }

/* ============================================================
   MOBILE — héros de page service moins hauts (on voit mieux l'image)
   ============================================================ */
@media (max-width:860px){
  body[data-hero] > div[style*="height:520px"]{ height:380px !important; }
  section.svc-hero{ min-height:0 !important; height:380px !important; }
  section.svc-hero .svc-hero__inner{ padding:0 24px !important; }
}