/* ============================================================
   ATELIER KLENG — « Millimètre chaleureux »
   Lin chaud · épicéa profond · ambre-argile
   Motif signature : lignes de cotation d'architecte
   Motion : « soft-close » — tout glisse et s'emboîte
   ============================================================ */

:root{
  /* Couleurs */
  --color-bg:          #F5F1E8;
  --color-surface:     #FDFBF4;
  --color-surface-2:   #EDE7D9;
  --color-fg:          #1F2A24;
  --color-fg-muted:    #5A6459;
  --color-dark:        #24352C;
  --color-dark-2:      #1B2921;
  --color-on-dark:     #EFEAD9;
  --color-on-dark-muted:#A9B4A6;
  --color-accent:      #C05A21;
  --color-accent-hover:#A64A16;
  --color-accent-soft: rgba(192,90,33,.10);
  --color-accent-dark: #E39A5D;
  --color-line:        rgba(31,42,36,.15);
  --color-line-dark:   rgba(239,234,217,.16);

  /* Typographie */
  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Hanken Grotesk", "Segoe UI", sans-serif;
  --font-accent:  "Spline Sans Mono", Consolas, monospace;

  /* Espace */
  --space: 8px;
  --section-pad: clamp(4.5rem, 9vw, 8.5rem);
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --container-max: 1240px;
  --nav-h: 76px;
  --radius: 10px;

  /* Mouvement — fermeture douce de tiroir */
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-back: cubic-bezier(.3,1.36,.4,1);
  --dur: .45s;
  --dur-slow: .9s;
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; overflow-x:hidden; overflow-x:clip; }
body{
  font-family:var(--font-body);
  background:var(--color-bg);
  color:var(--color-fg);
  line-height:1.6;
  font-size:1rem;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-x:clip;
}
/* Grain papier */
body::after{
  content:"";
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.045;
  pointer-events:none;
  z-index:2000;
}
::selection{ background:var(--color-accent); color:var(--color-surface); }
img{ display:block; max-width:100%; }
a{ color:inherit; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
:focus-visible{ outline:2px solid var(--color-accent); outline-offset:3px; border-radius:2px; }

.skip-link{
  position:absolute; left:-999px; top:8px; z-index:3000;
  background:var(--color-fg); color:var(--color-bg);
  padding:.6rem 1.2rem; border-radius:var(--radius);
  font-family:var(--font-accent); font-size:.8rem;
}
.skip-link:focus{ left:8px; }

.container{
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ---------- Typo utilitaires ---------- */
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:500; line-height:1.08; letter-spacing:-.015em; }
h1 em, h2 em, .err .huge em{ font-style:italic; font-weight:400; color:var(--color-accent); }
.section-label{
  display:inline-flex; align-items:center; gap:.75rem;
  font-family:var(--font-accent); font-size:.72rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.16em;
  color:var(--color-accent);
  margin-bottom:1.4rem;
}
.section-label::before{
  content:""; width:34px; height:1px; background:var(--color-accent);
}
.section-title{ font-size:clamp(1.9rem, 4.4vw, 3.1rem); max-width:16em; }
.section-intro{ color:var(--color-fg-muted); max-width:34em; margin-top:1.1rem; font-size:clamp(.98rem,1.4vw,1.08rem); }

.section{ padding-block:var(--section-pad); }
.section--tight{ padding-block:clamp(3rem,6vw,5.5rem); }
.section--alt{ background:var(--color-surface-2); }

/* ---------- Motif signature : ligne de cotation ---------- */
.measure{
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--font-accent); font-size:.72rem; letter-spacing:.08em;
  color:var(--color-fg-muted);
}
.measure .m-line{
  position:relative; flex:1; height:1px; min-width:40px;
  background:currentColor; opacity:.65;
  transform:scaleX(0); transform-origin:left center;
  transition:transform var(--dur-slow) var(--ease) .15s;
}
.measure .m-line::before,
.measure .m-line::after{
  content:""; position:absolute; top:-4px; width:1px; height:9px; background:currentColor;
}
.measure .m-line::before{ left:0; }
.measure .m-line::after{ right:0; }
.in .measure .m-line, .measure.in .m-line{ transform:scaleX(1); }

/* Coins d'épure (repères de plan) */
.corners{ position:absolute; inset:-11px; pointer-events:none; }
.corners span{ position:absolute; width:26px; height:26px; border:0 solid var(--color-accent); }
.corners span:first-child{ top:0; left:0; border-top-width:2px; border-left-width:2px; }
.corners span:last-child{ bottom:0; right:0; border-bottom-width:2px; border-right-width:2px; }

/* Puces / étiquettes mono */
.chip{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--font-accent); font-size:.72rem; letter-spacing:.06em;
  padding:.34rem .8rem; border-radius:999px;
  border:1px solid var(--color-line);
  background:var(--color-surface);
  white-space:nowrap;
}
.chip--accent{ border-color:transparent; background:var(--color-accent-soft); color:var(--color-accent-hover); }
.chip--dark{ border-color:transparent; background:var(--color-dark); color:var(--color-on-dark); }

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:50px; padding:.85rem 1.7rem;
  background:var(--color-accent); color:#FFF6EA;
  font-weight:600; font-size:.95rem; text-decoration:none;
  border-radius:var(--radius);
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn:hover{ background:var(--color-accent-hover); transform:translateY(-2px); box-shadow:0 12px 24px -12px rgba(166,74,22,.55); }
.btn:active{ transform:translateY(0); }
.btn .arr{ transition:transform var(--dur) var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }
.btn--light{ background:var(--color-on-dark); color:var(--color-dark); }
.btn--light:hover{ background:#fff; box-shadow:0 12px 24px -12px rgba(0,0,0,.4); }

.btn-ghost{
  display:inline-flex; align-items:center; gap:.55rem;
  min-height:50px; padding:.85rem .4rem;
  font-weight:600; font-size:.95rem; text-decoration:none;
  color:var(--color-fg);
  position:relative;
}
.btn-ghost::after{
  content:""; position:absolute; left:0; bottom:8px; height:1.5px; width:100%;
  background:var(--color-fg); transform:scaleX(0); transform-origin:right center;
  transition:transform var(--dur) var(--ease);
}
.btn-ghost:hover::after{ transform:scaleX(1); transform-origin:left center; }
.btn-ghost .arr{ color:var(--color-accent); transition:transform var(--dur) var(--ease); }
.btn-ghost:hover .arr{ transform:translateX(4px); }

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--nav-h);
  display:flex; align-items:center;
  transition:background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(245,241,232,.92);
  backdrop-filter:blur(12px);
  border-bottom-color:var(--color-line);
}
.nav-inner{
  width:100%; max-width:var(--container-max); margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.logo{
  display:inline-flex; align-items:center; gap:.65rem;
  font-family:var(--font-display); font-size:1.28rem; font-weight:600; letter-spacing:-.01em;
  text-decoration:none;
}
.logo svg{ flex:none; }
.logo .lux{ font-family:var(--font-accent); font-size:.62rem; letter-spacing:.14em; color:var(--color-fg-muted); align-self:flex-end; margin-bottom:.2rem; }
.nav-links{ display:none; align-items:center; gap:.2rem; list-style:none; }
.nav-links > li > a, .sub-toggle{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.7rem .9rem;
  font-size:.92rem; font-weight:500; text-decoration:none;
  color:var(--color-fg); position:relative;
}
.nav-links > li > a::after{
  content:""; position:absolute; left:.9rem; right:.9rem; bottom:.45rem; height:1.5px;
  background:var(--color-accent); transform:scaleX(0); transform-origin:right center;
  transition:transform var(--dur) var(--ease);
}
.nav-links > li > a:hover::after,
.nav-links > li > a[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left center; }

/* Sous-menu « Nos maisons » */
.has-sub{ position:relative; }
.sub-toggle .caret{
  width:9px; height:9px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform var(--dur) var(--ease);
}
.has-sub:hover .caret, .has-sub.open .caret{ transform:rotate(225deg) translateY(-1px); }
.sub-menu{
  position:absolute; top:calc(100% + 2px); left:.4rem;
  min-width:250px;
  background:var(--color-surface);
  border:1px solid var(--color-line);
  border-radius:calc(var(--radius) + 2px);
  padding:.55rem;
  list-style:none;
  box-shadow:0 24px 48px -24px rgba(31,42,36,.35);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
  z-index:1001;
}
.has-sub:hover .sub-menu,
.has-sub:focus-within .sub-menu,
.has-sub.open .sub-menu{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.sub-menu a{
  display:block; padding:.7rem .85rem; border-radius:8px;
  text-decoration:none; font-size:.92rem; font-weight:600;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sub-menu a .sub-note{
  display:block; font-family:var(--font-accent); font-size:.66rem; letter-spacing:.06em;
  color:var(--color-fg-muted); font-weight:400; margin-top:.15rem;
}
.sub-menu a:hover{ background:var(--color-accent-soft); color:var(--color-accent-hover); }
.sub-menu a[aria-current="page"]{ background:var(--color-accent-soft); }

.nav-cta{ display:none; }
.nav .btn{ min-height:44px; padding:.6rem 1.25rem; font-size:.88rem; }

.burger{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:48px; height:48px; align-items:center;
  border-radius:var(--radius);
}
.burger span{
  display:block; width:22px; height:2px; background:var(--color-fg);
  transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:900;
  background:var(--color-bg);
  display:flex; flex-direction:column;
  padding:calc(var(--nav-h) + 1.5rem) var(--gutter) 2.5rem;
  overflow-y:auto;
  opacity:0; visibility:hidden; transform:translateY(-14px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.mobile-menu.open{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.mobile-menu .mm-label{
  font-family:var(--font-accent); font-size:.68rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--color-accent); margin:1.4rem 0 .3rem;
}
.mobile-menu ul{ list-style:none; display:grid; gap:.1rem; }
.mobile-menu a:not(.btn){
  display:block; padding:.42rem 0;
  font-family:var(--font-display); font-size:clamp(1.45rem,5.6vw,1.9rem);
  text-decoration:none;
}
.mobile-menu a:not(.btn):hover,
.mobile-menu a[aria-current="page"]:not(.btn){ color:var(--color-accent); }
.mobile-menu li{ opacity:0; transform:translateY(16px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.mobile-menu.open li{ opacity:1; transform:translateY(0); }
.mobile-menu.open li:nth-child(1){ transition-delay:.05s; }
.mobile-menu.open li:nth-child(2){ transition-delay:.1s; }
.mobile-menu.open li:nth-child(3){ transition-delay:.15s; }
.mobile-menu.open li:nth-child(4){ transition-delay:.2s; }
.mobile-menu.open li:nth-child(5){ transition-delay:.25s; }
.mobile-menu.open li:nth-child(6){ transition-delay:.3s; }
.mobile-menu.open li:nth-child(7){ transition-delay:.35s; }
.mobile-menu .btn{ margin-top:1.6rem; align-self:flex-start; }
.mobile-menu .menu-measure{ margin-top:2.2rem; max-width:280px; }

/* ============================================================
   HERO (accueil)
   ============================================================ */
.hero{
  position:relative;
  padding-top:calc(var(--nav-h) + clamp(2.5rem,6vw,5rem));
  padding-bottom:clamp(3rem,7vw,6rem);
  background:
    radial-gradient(58% 46% at 84% 10%, rgba(192,90,33,.07), transparent 70%),
    var(--color-bg);
  overflow:hidden;
}
.hero-grid{ display:grid; gap:clamp(2.5rem,5vw,3rem); align-items:center; }
.hero-copy{ position:relative; z-index:2; }
.hero-kicker{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-accent); font-size:.72rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--color-fg-muted); margin-bottom:1.5rem;
}
.hero-kicker .dot{ width:7px; height:7px; border-radius:2px; background:var(--color-accent); }
.hero h1{
  font-size:clamp(2.6rem, 6.4vw, 4.6rem);
  max-width:10.5em;
}
.hero-measure{ margin:1.3rem 0 1.5rem; max-width:340px; color:var(--color-accent-hover); }
.hero-sub{
  font-size:clamp(1rem, 1.5vw, 1.14rem);
  color:var(--color-fg-muted);
  max-width:33em;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:1.1rem 1.6rem; align-items:center; margin-top:2.1rem; }
.hero-proof{
  display:flex; flex-wrap:wrap; gap:.55rem;
  margin-top:2.4rem;
}

/* Composition d'images emboîtées */
.hero-visual{ position:relative; padding-bottom:3.4rem; }
.hero-visual .main-img{
  position:relative; border-radius:var(--radius); overflow:hidden;
  aspect-ratio:4/3;
  box-shadow:0 30px 60px -30px rgba(31,42,36,.4);
}
.hero-visual .main-img img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.92);
  transition:filter var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.hero-visual .main-img:hover img{ filter:saturate(1); transform:scale(1.025); }
.hero-visual .detail-img{
  position:absolute; left:clamp(-.5rem,-2vw,-2rem); bottom:0;
  width:min(38%,220px); aspect-ratio:1;
  border-radius:var(--radius); overflow:hidden;
  border:5px solid var(--color-bg);
  box-shadow:0 20px 40px -18px rgba(31,42,36,.45);
}
.hero-visual .detail-img img{ width:100%; height:100%; object-fit:cover; }
.hero-chip{
  position:absolute; right:clamp(.4rem,2vw,1.4rem); bottom:1rem;
  background:var(--color-dark); color:var(--color-on-dark);
  border-radius:var(--radius);
  padding:.8rem 1.05rem;
  font-family:var(--font-accent); font-size:.72rem; line-height:1.5; letter-spacing:.04em;
  box-shadow:0 18px 36px -16px rgba(27,41,33,.6);
}
.hero-chip strong{ display:block; font-size:1.05rem; color:var(--color-accent-dark); font-weight:500; }
/* cotation verticale à droite de l'image */
.hero-cote{
  position:absolute; top:6%; bottom:calc(3.4rem + 6%); right:-1.9rem;
  display:none; align-items:center;
  font-family:var(--font-accent); font-size:.68rem; letter-spacing:.1em;
  color:var(--color-fg-muted);
}
.hero-cote .v-line{ position:relative; width:1px; height:100%; background:currentColor; opacity:.6; }
.hero-cote .v-line::before,.hero-cote .v-line::after{
  content:""; position:absolute; left:-4px; width:9px; height:1px; background:currentColor;
}
.hero-cote .v-line::before{ top:0; } .hero-cote .v-line::after{ bottom:0; }
.hero-cote em{ writing-mode:vertical-rl; font-style:normal; margin-left:.55rem; }

/* Entrée du hero — les blocs s'emboîtent */
@media (prefers-reduced-motion: no-preference){
  .hero-copy > *{ opacity:0; transform:translateY(26px); animation:rise var(--dur-slow) var(--ease) forwards; }
  .hero-copy > *:nth-child(1){ animation-delay:.05s; }
  .hero-copy > *:nth-child(2){ animation-delay:.14s; }
  .hero-copy > *:nth-child(3){ animation-delay:.23s; }
  .hero-copy > *:nth-child(4){ animation-delay:.3s; }
  .hero-copy > *:nth-child(5){ animation-delay:.38s; }
  .hero-copy > *:nth-child(6){ animation-delay:.46s; }
  .hero-visual .main-img{ opacity:0; transform:translateX(46px); animation:slide-in var(--dur-slow) var(--ease) .25s forwards; }
  .hero-visual .detail-img{ opacity:0; transform:translateY(36px); animation:rise var(--dur-slow) var(--ease) .55s forwards; }
  .hero-chip{ opacity:0; transform:scale(.86); animation:pop .7s var(--ease-back) .8s forwards; }
  .hero-cote{ opacity:0; animation:fade .8s var(--ease) 1s forwards; }
}
@keyframes rise{ to{ opacity:1; transform:translateY(0);} }
@keyframes slide-in{ to{ opacity:1; transform:translateX(0);} }
@keyframes pop{ to{ opacity:1; transform:scale(1);} }
@keyframes fade{ to{ opacity:1;} }

/* ============================================================
   EN-TÊTE DE PAGE INTÉRIEURE
   ============================================================ */
.page-hero{
  position:relative;
  padding-top:calc(var(--nav-h) + clamp(2.2rem,5vw,4rem));
  padding-bottom:clamp(2.2rem,4.5vw,3.6rem);
  background:
    radial-gradient(52% 44% at 88% 0%, rgba(192,90,33,.06), transparent 70%),
    var(--color-bg);
  overflow:hidden;
}
.page-hero h1{ font-size:clamp(2.2rem,5.2vw,3.8rem); max-width:14em; }
.page-hero .page-intro{
  color:var(--color-fg-muted); max-width:38em; margin-top:1.2rem;
  font-size:clamp(1rem,1.5vw,1.12rem);
}
.page-hero .hero-proof{ margin-top:1.8rem; }
.page-hero .hero-actions{ margin-top:1.8rem; }
@media (prefers-reduced-motion: no-preference){
  .page-hero .ph-copy > *{ opacity:0; transform:translateY(24px); animation:rise .8s var(--ease) forwards; }
  .page-hero .ph-copy > *:nth-child(1){ animation-delay:.04s; }
  .page-hero .ph-copy > *:nth-child(2){ animation-delay:.12s; }
  .page-hero .ph-copy > *:nth-child(3){ animation-delay:.2s; }
  .page-hero .ph-copy > *:nth-child(4){ animation-delay:.28s; }
  .page-hero .ph-copy > *:nth-child(5){ animation-delay:.36s; }
  .page-hero .ph-copy > *:nth-child(6){ animation-delay:.44s; }
}

/* Fil d'Ariane */
.crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:.55rem;
  list-style:none;
  font-family:var(--font-accent); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--color-fg-muted);
  margin-bottom:1.6rem;
}
.crumbs a{ text-decoration:none; transition:color var(--dur) var(--ease); }
.crumbs a:hover{ color:var(--color-accent); }
.crumbs .sep{ opacity:.45; }

/* Bandeau image pleine largeur sous l'en-tête */
.page-banner{ position:relative; margin-top:clamp(1.5rem,3.5vw,2.6rem); }
.page-banner .frame{ position:relative; border-radius:var(--radius); overflow:hidden; }
.page-banner img{
  width:100%; aspect-ratio:16/7; object-fit:cover;
  filter:saturate(.92);
}
.page-banner .chip{
  position:absolute; bottom:1.1rem; left:1.1rem; z-index:2;
  background:rgba(245,241,232,.92); backdrop-filter:blur(4px); border:none;
}
@media (prefers-reduced-motion: no-preference){
  .page-banner .frame{ opacity:0; transform:translateY(30px); animation:rise var(--dur-slow) var(--ease) .3s forwards; }
}
@media (max-width:767px){
  .page-banner img{ aspect-ratio:4/3; }
}

/* ============================================================
   BANDEAU DÉFILANT
   ============================================================ */
.marquee{
  border-block:1px solid var(--color-line);
  background:var(--color-surface);
  overflow:hidden;
  padding-block:.95rem;
}
.marquee-track{
  display:flex; width:max-content; gap:0;
  animation:scroll 36s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee ul{
  display:flex; align-items:center; list-style:none; gap:2.6rem; padding-right:2.6rem;
}
.marquee li{
  display:flex; align-items:center; gap:2.6rem;
  font-family:var(--font-accent); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--color-fg-muted); white-space:nowrap;
}
.marquee li::after{ content:""; width:6px; height:6px; background:var(--color-accent); border-radius:1px; flex:none; }
@keyframes scroll{ to{ transform:translateX(-50%);} }

/* ============================================================
   DOUBLE EMPLOI — plan interactif (accueil)
   ============================================================ */
.demploi{
  padding-block:var(--section-pad);
  background:
    radial-gradient(rgba(31,42,36,.055) 1px, transparent 1px) 0 0/26px 26px,
    var(--color-bg);
}
.demploi-grid{ display:grid; gap:3rem; }
.demploi-sticky{ align-self:start; }
.legend{ list-style:none; margin-top:2.2rem; display:grid; gap:.5rem; }
.legend button{
  display:flex; align-items:baseline; gap:1rem; width:100%;
  text-align:left; padding:.9rem 1rem;
  border:1px solid transparent; border-radius:var(--radius);
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.legend button:hover, .legend button.active{
  background:var(--color-surface); border-color:var(--color-line);
  transform:translateX(6px);
}
.legend .num{
  font-family:var(--font-accent); font-size:.72rem; color:var(--color-accent);
  min-width:2ch;
}
.legend .name{ font-weight:600; font-size:.98rem; }
.legend .flip{
  display:block; color:var(--color-fg-muted); font-size:.88rem; font-weight:400;
}
.plan-card{
  background:var(--color-surface);
  border:1px solid var(--color-line);
  border-radius:calc(var(--radius) + 4px);
  padding:clamp(1.2rem,3vw,2.2rem);
  box-shadow:0 30px 60px -40px rgba(31,42,36,.35);
}
.plan-card svg{ width:100%; height:auto; }
.plan-card .zone{
  fill:var(--color-surface-2); stroke:var(--color-line); stroke-width:1;
  transition:fill var(--dur) var(--ease), stroke var(--dur) var(--ease);
  cursor:pointer;
}
.plan-card .zone.active{ fill:var(--color-accent-soft); stroke:var(--color-accent); }
.plan-card .zone-label{
  font-family:var(--font-accent); font-size:13px; letter-spacing:.06em;
  fill:var(--color-fg-muted); pointer-events:none; text-transform:uppercase;
}
.plan-card .cote-line{ stroke:var(--color-fg-muted); stroke-width:1; opacity:.6; }
.plan-card .cote-text{ font-family:var(--font-accent); font-size:12px; fill:var(--color-fg-muted); letter-spacing:.08em; }
@media (max-width: 767px){
  .plan-card .zone-label{ font-size:17px; }
  .plan-card .cote-text{ font-size:16px; }
}
.plan-card .mezz{
  fill:none; stroke:var(--color-accent); stroke-width:1.2; stroke-dasharray:5 5;
  pointer-events:none; opacity:.85;
}
.plan-readout{
  margin-top:1.3rem; padding:1rem 1.2rem;
  border-left:2px solid var(--color-accent);
  background:var(--color-accent-soft);
  border-radius:0 var(--radius) var(--radius) 0;
  font-size:.92rem; min-height:3.6em;
  display:flex; align-items:center;
  transition:opacity .25s var(--ease);
}
.plan-readout.swap{ opacity:0; }
.plan-readout strong{ margin-right:.4ch; }

/* ============================================================
   BANDE DE STATS
   ============================================================ */
.stats{
  background:var(--color-surface);
  border-block:1px solid var(--color-line);
  padding-block:clamp(2.6rem,5vw,4rem);
}
.stats-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2.4rem var(--gutter); }
.stat .value{
  font-family:var(--font-display); font-size:clamp(2.4rem,5vw,3.6rem); font-weight:500;
  line-height:1; letter-spacing:-.02em;
  display:flex; align-items:baseline; gap:.15em;
}
.stat .unit{ font-family:var(--font-accent); font-size:.9rem; color:var(--color-accent); letter-spacing:.02em; }
.stat .desc{
  margin-top:.6rem; font-size:.9rem; color:var(--color-fg-muted); max-width:15em;
  padding-top:.6rem; border-top:1px solid var(--color-line);
}

/* ============================================================
   BANDE DE SPECS (pages services)
   ============================================================ */
.spec-band{
  background:var(--color-surface);
  border-block:1px solid var(--color-line);
}
.spec-grid{ display:grid; grid-template-columns:1fr 1fr; }
.spec{
  padding:1.5rem 1.2rem;
  border-bottom:1px solid var(--color-line);
}
.spec .v{
  font-family:var(--font-display); font-size:clamp(1.35rem,2.4vw,1.75rem); font-weight:500;
  letter-spacing:-.01em;
}
.spec .k{
  font-family:var(--font-accent); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--color-fg-muted); margin-top:.35rem;
}
.spec-grid .spec:nth-child(odd){ border-right:1px solid var(--color-line); }

/* ============================================================
   SECTIONS ALTERNÉES IMAGE / TEXTE
   ============================================================ */
.split{
  display:grid; gap:2.5rem; align-items:center;
}
.split + .split{ margin-top:clamp(3.5rem,7vw,6rem); }
.split .s-img{ position:relative; }
.split .s-img .frame{ position:relative; border-radius:var(--radius); overflow:hidden; }
.split .s-img img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  filter:saturate(.92);
  transition:filter var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.split .s-img:hover img{ filter:saturate(1); transform:scale(1.02); }
.split .s-img .chip{
  position:absolute; bottom:-.9rem; right:1.3rem;
  box-shadow:0 10px 24px -12px rgba(31,42,36,.4);
}
.split h2{ font-size:clamp(1.6rem,3.2vw,2.3rem); max-width:15em; }
.split .s-body p{ color:var(--color-fg-muted); margin-top:1rem; max-width:36em; font-size:.98rem; }

/* Listes à puces carrées */
.ticks{ list-style:none; display:grid; gap:.65rem; margin-top:1.3rem; }
.ticks li{ position:relative; padding-left:1.5rem; font-size:.95rem; }
.ticks li::before{
  content:""; position:absolute; left:0; top:.52em;
  width:8px; height:8px; background:var(--color-accent); border-radius:2px;
}
.ticks li strong{ font-weight:600; }
.ticks--2col{ grid-template-columns:1fr; }

/* ============================================================
   CARTES (usages, valeurs, implantation)
   ============================================================ */
.cards-grid{ display:grid; gap:var(--gutter); margin-top:2.6rem; }
.icard{
  position:relative;
  background:var(--color-surface);
  border:1px solid var(--color-line);
  border-radius:calc(var(--radius) + 2px);
  padding:1.7rem 1.5rem;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.icard:hover{
  transform:translateY(-5px);
  border-color:rgba(192,90,33,.35);
  box-shadow:0 24px 48px -28px rgba(31,42,36,.35);
}
.icard .i-num{
  font-family:var(--font-accent); font-size:.72rem; color:var(--color-accent);
  display:inline-block; margin-bottom:.9rem;
}
.icard .i-num::after{
  content:""; display:block; width:22px; height:1px; background:var(--color-accent); margin-top:.45rem;
}
.icard h3{ font-size:1.18rem; }
.icard p{ color:var(--color-fg-muted); font-size:.92rem; margin-top:.55rem; }

/* ============================================================
   PRIX
   ============================================================ */
.price-grid{ display:grid; gap:var(--gutter); align-items:start; margin-top:2.6rem; }
.price-card{
  position:relative; overflow:hidden;
  background:var(--color-dark); color:var(--color-on-dark);
  border-radius:calc(var(--radius) + 4px);
  padding:clamp(1.8rem,4vw,2.6rem);
}
.price-card .watermark-sq{
  position:absolute; right:-1.2rem; bottom:-2.6rem;
  font-family:var(--font-display); font-size:9rem; line-height:1;
  color:var(--color-on-dark); opacity:.04; pointer-events:none;
}
.price-card .from{
  font-family:var(--font-accent); font-size:.7rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--color-accent-dark);
}
.price-card .amount{
  font-family:var(--font-display); font-size:clamp(2.4rem,5vw,3.3rem); font-weight:500;
  letter-spacing:-.02em; margin-top:.5rem;
}
.price-card .amount small{ font-size:.4em; font-family:var(--font-accent); letter-spacing:.04em; color:var(--color-on-dark-muted); }
.price-card .p-note{ color:var(--color-on-dark-muted); font-size:.88rem; margin-top:.7rem; max-width:26em; }
.price-card .btn{ margin-top:1.6rem; }
.price-card .measure{ color:var(--color-on-dark-muted); margin-top:1.8rem; max-width:260px; }
.price-includes h3{ font-size:1.3rem; margin-bottom:.4rem; }
.price-includes > p{ color:var(--color-fg-muted); font-size:.94rem; }

/* ============================================================
   TABLEAU COMPARATIF
   ============================================================ */
.compare{
  margin-top:2.6rem;
  border:1px solid var(--color-line);
  border-radius:calc(var(--radius) + 2px);
  background:var(--color-surface);
  overflow-x:auto;
}
.compare-table{
  width:100%; border-collapse:collapse; min-width:660px;
  font-size:.92rem;
}
.compare-table th, .compare-table td{
  padding:1rem 1.2rem; text-align:left;
  border-bottom:1px solid var(--color-line);
}
.compare-table thead th{
  font-family:var(--font-accent); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--color-fg-muted); font-weight:500;
  border-bottom:2px solid var(--color-fg);
}
.compare-table tbody th{
  font-weight:600; font-size:.9rem; color:var(--color-fg);
}
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td{ border-bottom:none; }
.compare-table td{ color:var(--color-fg-muted); }
.compare-table .col-hl{ background:var(--color-accent-soft); }
.compare-table thead .col-hl{ color:var(--color-accent-hover); }
.compare-note{
  font-family:var(--font-accent); font-size:.7rem; color:var(--color-fg-muted);
  letter-spacing:.05em; margin-top:.9rem;
}

/* ============================================================
   PROJETS — listing
   ============================================================ */
.projets{ padding-block:var(--section-pad); }
.projets-head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:1.5rem; margin-bottom:clamp(2.4rem,5vw,3.6rem);
}
.projets-grid{ display:grid; gap:var(--gutter); }
.pcard{
  position:relative; border-radius:var(--radius); overflow:hidden;
  text-decoration:none; color:var(--color-on-dark);
  display:block;
}
.pcard img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.88);
  transition:transform .8s var(--ease), filter .8s var(--ease);
}
.pcard:hover img{ transform:scale(1.045); filter:saturate(1.02); }
.pcard::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(23,33,27,.82) 0%, rgba(23,33,27,.24) 42%, transparent 68%);
  transition:opacity var(--dur) var(--ease);
}
.pcard .p-chip{
  position:absolute; top:1rem; left:1rem; z-index:2;
  background:rgba(245,241,232,.92); color:var(--color-fg);
  backdrop-filter:blur(4px);
  border:none;
}
.pcard .p-info{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:1.4rem 1.5rem;
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem;
  transform:translateY(6px);
  transition:transform var(--dur) var(--ease);
}
.pcard:hover .p-info{ transform:translateY(0); }
.pcard h3{ font-size:1.35rem; font-weight:500; }
.pcard .p-meta{
  font-family:var(--font-accent); font-size:.72rem; letter-spacing:.08em;
  color:rgba(239,234,217,.85); margin-top:.3rem; text-transform:uppercase;
}
.pcard .p-arrow{
  flex:none; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--color-accent); color:#FFF6EA;
  opacity:0; transform:translateX(-8px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.pcard:hover .p-arrow{ opacity:1; transform:translateX(0); }
.pcard.ratio-43{ aspect-ratio:4/3; }
.pcard.ratio-34{ aspect-ratio:3/4; }
.pcard.ratio-11{ aspect-ratio:1/1; }

/* Tuile « votre parcelle » */
.pcard--plot{
  aspect-ratio:auto; min-height:260px;
  border:2px dashed rgba(31,42,36,.3);
  border-radius:var(--radius);
  background:
    radial-gradient(rgba(31,42,36,.06) 1px, transparent 1px) 0 0/22px 22px,
    var(--color-surface);
  color:var(--color-fg);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:1.5rem;
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pcard--plot::after{ display:none; }
.pcard--plot:hover{
  border-color:var(--color-accent);
  transform:translateY(-4px);
  box-shadow:0 22px 44px -26px rgba(31,42,36,.35);
}
.pcard--plot .plot-label{
  font-family:var(--font-accent); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--color-fg-muted);
}
.pcard--plot h3{ font-size:1.4rem; margin-top:.8rem; }
.pcard--plot p{ color:var(--color-fg-muted); font-size:.9rem; margin-top:.5rem; }
.pcard--plot .plot-cta{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-top:1.4rem; font-weight:600; font-size:.92rem; color:var(--color-accent-hover);
}
.pcard--plot:hover .plot-cta .arr{ transform:translateX(4px); }
.pcard--plot .arr{ transition:transform var(--dur) var(--ease); }

/* Filtres */
.filters{
  display:flex; flex-wrap:wrap; gap:.6rem;
  margin-bottom:2.2rem;
}
.filters button{
  font-family:var(--font-accent); font-size:.74rem; letter-spacing:.06em;
  padding:.55rem 1.1rem; border-radius:999px;
  border:1px solid var(--color-line);
  background:var(--color-surface);
  min-height:44px;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.filters button:hover{ border-color:var(--color-accent); color:var(--color-accent-hover); }
.filters button.active{
  background:var(--color-fg); color:var(--color-bg); border-color:var(--color-fg);
}
[data-fcard].hide{ display:none; }

/* ============================================================
   FICHE PROJET
   ============================================================ */
.proj-meta{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.6rem; }
.proj-body{ display:grid; gap:3rem; align-items:start; }
.proj-story h2{ font-size:clamp(1.45rem,2.6vw,1.9rem); margin-top:2.4rem; }
.proj-story h2:first-child{ margin-top:0; }
.proj-story p{ color:var(--color-fg-muted); margin-top:.9rem; max-width:38em; }
.fiche{
  background:var(--color-surface);
  border:1px solid var(--color-line);
  border-radius:calc(var(--radius) + 4px);
  padding:1.7rem 1.6rem;
}
.fiche .f-title{
  font-family:var(--font-accent); font-size:.7rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--color-accent); margin-bottom:1rem;
  display:flex; align-items:center; gap:.7rem;
}
.fiche .f-title::after{ content:""; flex:1; height:1px; background:var(--color-line); }
.fiche-table{ width:100%; border-collapse:collapse; font-size:.9rem; }
.fiche-table th{
  text-align:left; vertical-align:top; width:44%;
  font-family:var(--font-accent); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:500; color:var(--color-fg-muted);
  padding:.68rem .8rem .68rem 0;
}
.fiche-table td{ padding:.68rem 0; color:var(--color-fg); }
.fiche-table tr:not(:last-child) th,
.fiche-table tr:not(:last-child) td{ border-bottom:1px solid var(--color-line); }

.gallery{ display:grid; gap:var(--gutter); margin-top:clamp(2.5rem,5vw,4rem); }
.gallery figure{ position:relative; }
.gallery img{
  width:100%; object-fit:cover; border-radius:var(--radius);
  filter:saturate(.92);
  transition:filter var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.gallery figure:hover img{ filter:saturate(1); }
.gallery .g-43 img{ aspect-ratio:4/3; }
.gallery .g-11 img{ aspect-ratio:1/1; }
.gallery figcaption{
  margin-top:.7rem;
  font-family:var(--font-accent); font-size:.7rem; letter-spacing:.08em;
  color:var(--color-fg-muted);
  display:flex; align-items:center; gap:.6rem;
}
.gallery figcaption::before{ content:""; width:18px; height:1px; background:var(--color-accent); }

.pquote{
  margin-top:clamp(2.5rem,5vw,4rem);
  border-left:2px solid var(--color-accent);
  padding:.4rem 0 .4rem 1.6rem;
  max-width:44em;
}
.pquote blockquote{
  font-family:var(--font-display); font-style:italic;
  font-size:clamp(1.2rem,2.2vw,1.5rem); line-height:1.45;
}
.pquote figcaption{
  margin-top:.9rem;
  font-family:var(--font-accent); font-size:.72rem; letter-spacing:.08em;
  color:var(--color-fg-muted);
}

.proj-nav{
  display:grid; gap:var(--gutter);
  margin-top:clamp(3rem,6vw,5rem);
  padding-top:2rem;
  border-top:1px solid var(--color-line);
}
.proj-nav a{
  display:flex; flex-direction:column; gap:.4rem;
  padding:1.4rem 1.5rem;
  background:var(--color-surface);
  border:1px solid var(--color-line);
  border-radius:var(--radius);
  text-decoration:none;
  transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.proj-nav a:hover{
  transform:translateY(-4px);
  border-color:rgba(192,90,33,.35);
  box-shadow:0 20px 40px -26px rgba(31,42,36,.35);
}
.proj-nav .pn-label{
  font-family:var(--font-accent); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--color-accent);
}
.proj-nav .pn-name{ font-family:var(--font-display); font-size:1.25rem; }
.proj-nav .pn-next{ text-align:right; }

/* ============================================================
   MÉTHODE
   ============================================================ */
.methode-grid{ display:grid; gap:3rem; }
.methode-visual{ position:relative; align-self:start; }
.methode-visual .frame{ position:relative; border-radius:var(--radius); overflow:hidden; }
.methode-visual img{ aspect-ratio:4/3; width:100%; object-fit:cover; filter:saturate(.92); }
.methode-visual .chip{ position:absolute; bottom:-1rem; right:1.4rem; box-shadow:0 10px 24px -12px rgba(31,42,36,.4); }
.methode-visual .m-stack{ margin-top:2.4rem; position:relative; }
.steps{ list-style:none; counter-reset:step; display:grid; }
.step{
  position:relative;
  padding:1.7rem 0 1.7rem 4.4rem;
  border-top:1px solid var(--color-line);
}
.step:last-child{ border-bottom:1px solid var(--color-line); }
.step .s-num{
  position:absolute; left:0; top:1.8rem;
  font-family:var(--font-accent); font-size:.8rem; color:var(--color-accent);
}
.step .s-num::after{
  content:""; display:block; width:22px; height:1px; background:var(--color-accent);
  margin-top:.5rem;
}
.step h3{ font-size:1.28rem; font-weight:500; display:flex; flex-wrap:wrap; align-items:center; gap:.7rem; }
.step p{ color:var(--color-fg-muted); font-size:.94rem; margin-top:.55rem; max-width:36em; }
.step .chip{ font-size:.66rem; padding:.24rem .66rem; }
.step .ticks{ margin-top:.9rem; gap:.45rem; }
.step .ticks li{ font-size:.9rem; color:var(--color-fg-muted); }
.step .checkpoint{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-top:1rem;
  font-family:var(--font-accent); font-size:.7rem; letter-spacing:.08em;
  color:var(--color-accent-hover);
}
.step .checkpoint::before{ content:"✓"; font-size:.85rem; }

/* Garanties */
.guarantees{ display:grid; gap:var(--gutter); margin-top:2.6rem; }
.guarantee{
  padding:1.6rem 1.4rem;
  border:1px solid var(--color-line);
  border-radius:var(--radius);
  background:var(--color-surface);
}
.guarantee .g-mark{
  font-family:var(--font-accent); font-size:.72rem; color:var(--color-accent);
  display:block; margin-bottom:.8rem;
}
.guarantee h3{ font-size:1.08rem; }
.guarantee p{ color:var(--color-fg-muted); font-size:.88rem; margin-top:.45rem; }

/* ============================================================
   ÉQUIPE / ATELIER
   ============================================================ */
.team-grid{ display:grid; gap:var(--gutter); margin-top:2.6rem; }
.team-card{
  background:var(--color-surface);
  border:1px solid var(--color-line);
  border-radius:calc(var(--radius) + 2px);
  padding:1.7rem 1.5rem;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.team-card:hover{ transform:translateY(-5px); box-shadow:0 24px 48px -28px rgba(31,42,36,.3); }
.team-card .monogram{
  width:60px; height:60px; border-radius:14px;
  background:var(--color-dark); color:var(--color-accent-dark);
  display:grid; place-items:center;
  font-family:var(--font-display); font-size:1.25rem; font-weight:500;
  margin-bottom:1.1rem;
}
.team-card h3{ font-size:1.1rem; }
.team-card .role{
  font-family:var(--font-accent); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--color-accent-hover); margin-top:.3rem;
}
.team-card p{ color:var(--color-fg-muted); font-size:.88rem; margin-top:.7rem; }

.atelier-imgs{ display:grid; gap:var(--gutter); margin-top:2.6rem; }
.atelier-imgs figure{ position:relative; border-radius:var(--radius); overflow:hidden; }
.atelier-imgs img{ width:100%; height:100%; object-fit:cover; filter:saturate(.92); }
.atelier-imgs .a-11 img{ aspect-ratio:1/1; }
.atelier-imgs .a-43 img{ aspect-ratio:4/3; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-cat{ margin-top:clamp(2.6rem,5vw,3.6rem); }
.faq-cat:first-of-type{ margin-top:0; }
.faq-cat h2{
  font-size:1.35rem; display:flex; align-items:baseline; gap:.8rem;
}
.faq-cat h2 .f-num{
  font-family:var(--font-accent); font-size:.75rem; color:var(--color-accent);
}
.faq-list{ margin-top:1.3rem; display:grid; gap:.7rem; }
.faq-item{
  border:1px solid var(--color-line);
  border-radius:var(--radius);
  background:var(--color-surface);
  overflow:hidden;
  transition:border-color var(--dur) var(--ease);
}
.faq-item[open]{ border-color:rgba(192,90,33,.4); }
.faq-item summary{
  display:flex; justify-content:space-between; align-items:center; gap:1.2rem;
  padding:1.05rem 1.3rem;
  cursor:pointer; font-weight:600; font-size:.98rem;
  list-style:none;
  min-height:44px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+";
  flex:none;
  font-family:var(--font-accent); font-size:1.2rem; color:var(--color-accent);
  transition:transform var(--dur) var(--ease);
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item .a{
  padding:0 1.3rem 1.25rem;
  color:var(--color-fg-muted); font-size:.94rem; max-width:62em;
}
.faq-item .a a{ color:var(--color-accent-hover); }

/* ============================================================
   TÉMOIGNAGES
   ============================================================ */
.temoignages{
  position:relative;
  padding-block:var(--section-pad);
  background:
    radial-gradient(rgba(239,234,217,.05) 1px, transparent 1px) 0 0/26px 26px,
    var(--color-dark);
  color:var(--color-on-dark);
  overflow:hidden;
}
.temoignages .watermark{
  position:absolute; right:-2%; bottom:-6%;
  font-family:var(--font-display); font-weight:600; font-size:clamp(9rem,24vw,20rem);
  line-height:1; color:var(--color-on-dark); opacity:.028;
  pointer-events:none; user-select:none; white-space:nowrap;
}
.temoignages .section-label{ color:var(--color-accent-dark); }
.temoignages .section-label::before{ background:var(--color-accent-dark); }
.temoignages .section-intro{ color:var(--color-on-dark-muted); }
.quotes{ display:grid; gap:var(--gutter); margin-top:3rem; }
.quote{
  position:relative;
  background:rgba(239,234,217,.045);
  border:1px solid var(--color-line-dark);
  border-radius:calc(var(--radius) + 4px);
  padding:2.4rem 1.9rem 1.9rem;
}
.quote::before{
  content:"“";
  position:absolute; top:-.4rem; left:1.4rem;
  font-family:var(--font-display); font-style:italic; font-size:5rem; line-height:1;
  color:var(--color-accent-dark);
}
.quote blockquote{ font-family:var(--font-display); font-size:1.13rem; line-height:1.5; font-weight:400; }
.quote figcaption{
  margin-top:1.4rem; padding-top:1rem;
  border-top:1px solid var(--color-line-dark);
  font-family:var(--font-accent); font-size:.74rem; letter-spacing:.08em;
  color:var(--color-on-dark-muted);
  display:flex; align-items:center; gap:.7rem;
}
.quote figcaption .sq{ width:7px; height:7px; background:var(--color-accent-dark); border-radius:1px; flex:none; }

/* ============================================================
   BANDEAU CTA
   ============================================================ */
.cta-band{
  position:relative;
  background:
    radial-gradient(48% 60% at 90% 10%, rgba(227,154,93,.08), transparent 70%),
    var(--color-dark);
  color:var(--color-on-dark);
  padding-block:clamp(3.5rem,7vw,5.5rem);
  overflow:hidden;
}
.cta-band .watermark{
  position:absolute; right:-1%; bottom:-24%;
  font-family:var(--font-display); font-weight:600; font-size:clamp(7rem,16vw,13rem);
  line-height:1; color:var(--color-on-dark); opacity:.03;
  pointer-events:none; user-select:none; white-space:nowrap;
}
.cta-inner{ display:grid; gap:2rem; align-items:center; position:relative; z-index:1; }
.cta-band .section-label{ color:var(--color-accent-dark); }
.cta-band .section-label::before{ background:var(--color-accent-dark); }
.cta-band h2{ font-size:clamp(1.7rem,3.6vw,2.6rem); max-width:16em; }
.cta-band p{ color:var(--color-on-dark-muted); margin-top:.9rem; max-width:34em; font-size:.98rem; }
.cta-band .cta-actions{ display:flex; flex-wrap:wrap; gap:1rem; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{ display:grid; gap:3rem; margin-top:3rem; }
.form-card{
  background:var(--color-surface);
  border:1px solid var(--color-line);
  border-radius:calc(var(--radius) + 4px);
  padding:clamp(1.5rem,4vw,2.5rem);
}
.form-grid{ display:grid; gap:1.3rem; }
.field label{
  display:block; font-weight:600; font-size:.88rem; margin-bottom:.45rem;
}
.field label span{ color:var(--color-accent); }
.field input, .field select, .field textarea{
  width:100%; padding:.85rem 1rem;
  font:inherit; font-size:.95rem; color:var(--color-fg);
  background:var(--color-bg);
  border:1px solid var(--color-line);
  border-radius:var(--radius);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea{ resize:vertical; min-height:120px; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--color-accent);
  box-shadow:0 0 0 3px var(--color-accent-soft);
}
.form-row{ display:grid; gap:1.3rem; }
.form-note{
  font-family:var(--font-accent); font-size:.7rem; color:var(--color-fg-muted);
  letter-spacing:.04em;
}
.form-success{
  display:none; text-align:center; padding:2.5rem 1rem;
}
.form-success .big{ font-family:var(--font-display); font-size:1.7rem; margin-top:1rem; }
.form-success p{ color:var(--color-fg-muted); margin-top:.6rem; }
.form-card.sent form{ display:none; }
.form-card.sent .form-success{ display:block; }

.contact-info{
  background:var(--color-dark); color:var(--color-on-dark);
  border-radius:calc(var(--radius) + 4px);
  padding:clamp(1.6rem,4vw,2.4rem);
  display:flex; flex-direction:column; gap:1.7rem;
  align-self:start;
}
.contact-info h3{ font-size:1.45rem; font-weight:500; }
.info-block .k{
  font-family:var(--font-accent); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--color-accent-dark); margin-bottom:.45rem;
}
.info-block p, .info-block a{ font-size:.96rem; color:var(--color-on-dark); text-decoration:none; line-height:1.55; }
.info-block a:hover{ color:var(--color-accent-dark); }
.contact-info .measure{ color:var(--color-on-dark-muted); }
.contact-info .note{
  font-size:.88rem; color:var(--color-on-dark-muted);
  border-left:2px solid var(--color-accent-dark);
  padding-left:1rem;
}

/* Étapes « et ensuite ? » */
.next-steps{ display:grid; gap:var(--gutter); margin-top:2.6rem; }
.nstep{
  position:relative;
  padding:1.6rem 1.4rem;
  background:var(--color-surface);
  border:1px solid var(--color-line);
  border-radius:var(--radius);
}
.nstep .n-num{
  font-family:var(--font-accent); font-size:.72rem; color:var(--color-accent);
}
.nstep .n-num::after{ content:""; display:block; width:22px; height:1px; background:var(--color-accent); margin-top:.5rem; }
.nstep h3{ font-size:1.1rem; margin-top:.8rem; }
.nstep p{ color:var(--color-fg-muted); font-size:.9rem; margin-top:.5rem; }

/* ============================================================
   PROSE (pages légales)
   ============================================================ */
.prose{ max-width:70ch; }
.prose h2{ font-size:1.45rem; margin:2.4rem 0 .8rem; }
.prose h3{ font-size:1.1rem; margin:1.6rem 0 .5rem; }
.prose p{ margin-bottom:.9rem; color:var(--color-fg-muted); }
.prose strong{ color:var(--color-fg); }
.prose ul{ padding-left:1.2rem; margin-bottom:.9rem; color:var(--color-fg-muted); }
.prose li{ margin-bottom:.35rem; }
.prose a{ color:var(--color-accent-hover); }

/* ============================================================
   404
   ============================================================ */
.err{
  min-height:100svh;
  display:grid; place-items:center;
  padding:calc(var(--nav-h) + 2rem) var(--gutter) 4rem;
  background:
    radial-gradient(rgba(31,42,36,.055) 1px, transparent 1px) 0 0/26px 26px,
    var(--color-bg);
}
.err-inner{ max-width:640px; }
.err .huge{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(5rem,17vw,10rem); line-height:1; letter-spacing:-.03em;
}
.err h1{ font-size:clamp(1.4rem,3vw,1.9rem); margin-top:1.2rem; }
.err p{ color:var(--color-fg-muted); margin-top:.8rem; }
.err .hero-actions{ margin-top:2rem; }
.err .measure{ margin-top:2.6rem; max-width:300px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  background:var(--color-dark-2); color:var(--color-on-dark);
  padding-top:clamp(3.5rem,7vw,5.5rem);
}
.footer-grid{ display:grid; gap:2.6rem; padding-bottom:3rem; }
.footer .logo{ color:var(--color-on-dark); }
.footer .logo .lux{ color:var(--color-on-dark-muted); }
.footer-brand p{
  margin-top:1.1rem; color:var(--color-on-dark-muted); font-size:.92rem; max-width:26em;
}
.footer h4{
  font-family:var(--font-accent); font-size:.7rem; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--color-on-dark-muted); margin-bottom:1.1rem;
}
.footer ul{ list-style:none; display:grid; gap:.55rem; }
.footer a{ text-decoration:none; font-size:.93rem; color:var(--color-on-dark); }
.footer a:hover{ color:var(--color-accent-dark); }
.footer .f-mono{ font-family:var(--font-accent); font-size:.82rem; color:var(--color-on-dark-muted); }
.footer-bar{
  border-top:1px solid var(--color-line-dark);
  padding-block:1.4rem;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
}
.footer-bar .measure{ color:var(--color-on-dark-muted); max-width:220px; flex:1; min-width:150px; }
.footer-bar small{
  font-family:var(--font-accent); font-size:.68rem; letter-spacing:.06em;
  color:var(--color-on-dark-muted);
}
.footer-bar small a{ font-size:inherit; }

/* ============================================================
   RÉVÉLATIONS AU DÉFILEMENT
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  .reveal, .reveal-left, .reveal-right{
    opacity:0; transform:translateY(30px);
    transition:opacity .8s var(--ease), transform .8s var(--ease);
    transition-delay:var(--d, 0s);
  }
  .reveal.in, .reveal-left.in, .reveal-right.in{
    opacity:1; transform:translate(0,0);
  }
}
/* Glissements latéraux réservés aux écrans larges — sur mobile, simple fondu montant */
@media (prefers-reduced-motion: no-preference) and (min-width: 768px){
  .reveal-left:not(.in){ transform:translateX(-44px); }
  .reveal-right:not(.in){ transform:translateX(44px); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .marquee-track{ animation:none; flex-wrap:wrap; }
  .measure .m-line{ transform:none; }
}

/* ============================================================
   BREAKPOINTS
   ============================================================ */
@media (min-width: 768px){
  .stats-grid{ grid-template-columns:repeat(4,1fr); }
  .spec-grid{ grid-template-columns:repeat(4,1fr); }
  .spec{ border-bottom:none; padding:1.9rem 1.6rem; }
  .spec-grid .spec:not(:last-child){ border-right:1px solid var(--color-line); }
  .form-row{ grid-template-columns:1fr 1fr; }
  .projets-grid{ grid-template-columns:repeat(12,1fr); }
  .p-span-8{ grid-column:span 8; }
  .p-span-7{ grid-column:span 7; }
  .p-span-6{ grid-column:span 6; }
  .p-span-5{ grid-column:span 5; }
  .p-span-4{ grid-column:span 4; }
  .p-span-3{ grid-column:span 3; }
  .quotes{ grid-template-columns:7fr 5fr; align-items:start; }
  .quote:nth-child(2){ margin-top:3.2rem; }
  .quote:nth-child(3){ grid-column:1 / -1; max-width:62%; margin-left:auto; margin-top:-.6rem; }
  .footer-grid{ grid-template-columns:2fr 1fr 1fr 1fr; }
  .ticks--2col{ grid-template-columns:1fr 1fr; column-gap:2rem; }
  .cards-grid{ grid-template-columns:repeat(2,1fr); }
  .guarantees{ grid-template-columns:repeat(2,1fr); }
  .team-grid{ grid-template-columns:repeat(2,1fr); }
  .next-steps{ grid-template-columns:repeat(3,1fr); }
  .gallery{ grid-template-columns:7fr 5fr; align-items:start; }
  .gallery .g-11{ margin-top:3rem; }
  .atelier-imgs{ grid-template-columns:5fr 7fr; }
  .proj-nav{ grid-template-columns:1fr 1fr; }
}

@media (min-width: 1024px){
  .nav-links{ display:flex; }
  .nav-cta{ display:inline-flex; }
  .burger{ display:none; }
  .mobile-menu{ display:none; }
  .hero-grid{ grid-template-columns:7fr 5fr; }
  .hero-cote{ display:flex; }
  .demploi-grid{ grid-template-columns:5fr 7fr; gap:4rem; }
  .demploi-sticky{ position:sticky; top:calc(var(--nav-h) + 2rem); }
  .methode-grid{ grid-template-columns:5fr 6fr; gap:5rem; }
  .methode-visual{ position:sticky; top:calc(var(--nav-h) + 2rem); }
  .contact-grid{ grid-template-columns:7fr 5fr; }
  .split{ grid-template-columns:6fr 6fr; gap:4.5rem; }
  .split--rev .s-img{ order:2; }
  .split--rev .s-body{ order:1; }
  .price-grid{ grid-template-columns:6fr 6fr; gap:4rem; }
  .cards-grid{ grid-template-columns:repeat(3,1fr); }
  .cards-grid--4{ grid-template-columns:repeat(4,1fr); }
  .guarantees{ grid-template-columns:repeat(4,1fr); }
  .team-grid{ grid-template-columns:repeat(4,1fr); }
  .proj-body{ grid-template-columns:7fr 5fr; gap:4.5rem; }
  .proj-body .fiche{ position:sticky; top:calc(var(--nav-h) + 2rem); }
  .cta-inner{ grid-template-columns:1fr auto; }
}