/* =========================================================================
   FAÇADES HILBERT — Direction « Chaux et sable »
   Le site est une façade : surface crème granuleuse, talochée par le scroll.
   ========================================================================= */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root {
  /* Ocre Taloche — accent, jamais dominante */
  --primary-50:#FBF3EC; --primary-100:#F5E3D4; --primary-200:#EAC6AC; --primary-300:#DDA57F;
  --primary-400:#CE8557; --primary-500:#C0663A; --primary-600:#A8552F; --primary-700:#8B4527;
  --primary-800:#6E3722; --primary-900:#572D1D; --primary-950:#331911;

  /* Crème & Sable — dominante */
  --secondary-50:#FAF6F0; --secondary-100:#F3ECE1; --secondary-200:#E9DECD; --secondary-300:#DACBB4;
  --secondary-400:#C6B296; --secondary-500:#B09877; --secondary-600:#947C5D; --secondary-700:#77634B;
  --secondary-800:#5C4C3B; --secondary-900:#46392C; --secondary-950:#2A2219;

  /* Chaux — neutre clair de rupture */
  --accent-50:#FDFCFA; --accent-100:#F7F5F1; --accent-200:#EDEAE4; --accent-300:#DEDAD2;
  --accent-400:#C7C2B8; --accent-500:#ABA599;

  /* Charbon chaud — ancre */
  --neutral-50:#F6F4F2; --neutral-100:#E8E4E0; --neutral-200:#CFC9C3; --neutral-300:#ADA59D;
  --neutral-400:#857C73; --neutral-500:#665E56; --neutral-600:#4E4842; --neutral-700:#3B3631;
  --neutral-800:#2C2825; --neutral-900:#1F1C1A; --neutral-950:#131110;

  /* Sémantique */
  --bg:var(--secondary-50);
  --bg-alt:var(--secondary-100);
  --surface:var(--accent-50);
  --border:var(--secondary-200);
  --text:var(--neutral-800);
  --text-strong:var(--neutral-900);
  --text-muted:var(--neutral-500);
  --text-on-dark:var(--secondary-100);
  --accent:var(--primary-500);
  --accent-hover:var(--primary-600);
  --accent-ink:var(--primary-700);
  --dark:var(--neutral-900);

  /* Typo */
  --font-display:'Archivo','Arial Narrow',system-ui,sans-serif;
  --font-accent:'Fraunces',Georgia,serif;
  --font-body:'Hanken Grotesk','Helvetica Neue',sans-serif;

  --step--1:clamp(.875rem,.85rem + .12vw,.9375rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.125rem);
  --step-1:clamp(1.125rem,1.05rem + .35vw,1.375rem);
  --step-2:clamp(1.375rem,1.2rem + .8vw,1.875rem);
  --step-3:clamp(1.75rem,1.4rem + 1.5vw,2.5rem);
  --step-4:clamp(2.25rem,1.6rem + 2.8vw,3.5rem);
  --step-5:clamp(2.75rem,1.9rem + 5vw,5.25rem);
  --step-6:clamp(3.75rem,2rem + 8vw,8rem);

  --lh-tight:.92; --lh-snug:1.2; --lh-body:1.65;
  --tracking-display:-.015em; --tracking-eyebrow:.14em;

  /* Espace */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:40px; --space-8:56px; --space-9:72px; --space-10:96px;
  --space-11:128px; --space-12:160px;
  --section-y:clamp(96px,10vw,200px);
  --gutter:clamp(20px,4vw,48px);
  --maxw:1400px; --maxw-text:720px;

  /* Radius */
  --radius-none:0px; --radius-sm:2px; --radius-md:4px; --radius-lg:8px;
  --border-hair:1px solid var(--secondary-200);

  /* Ombres chaudes */
  --shadow-xs:0 1px 2px rgba(31,28,26,.04);
  --shadow-sm:0 2px 8px rgba(31,28,26,.06);
  --shadow-md:0 8px 24px -8px rgba(31,28,26,.10);
  --shadow-lg:0 24px 60px -24px rgba(31,28,26,.16);
  --shadow-img:0 40px 80px -40px rgba(87,45,29,.28);

  /* Motion */
  --dur-fast:180ms; --dur-hover:280ms; --dur-reveal:700ms; --dur-slow:1100ms;
  --ease-depose:cubic-bezier(.22,.61,.36,1);
  --ease-hover:cubic-bezier(.40,0,.20,1);
  --ease-mask:cubic-bezier(.65,0,.35,1);
  --stagger:90ms;

  --header-h:84px;
}

/* ---------- 2. RESET ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:var(--lh-body);
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* height:auto est indispensable : sans lui, l'attribut height="768" du HTML fige la hauteur
   et neutralise tout aspect-ratio (qui ne s'applique que si une dimension est auto). */
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--neutral-900);outline-offset:3px;border-radius:2px}
::selection{background:var(--primary-200);color:var(--neutral-900)}

/* Grain global — la texture d'enduit sur tout le site */
body::after{
  content:'';position:fixed;inset:0;z-index:9998;pointer-events:none;
  opacity:.38;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
@media (max-width:767px){ body::after{opacity:.26} }

.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--neutral-900);color:#fff;padding:12px 20px}
.skip-link:focus{left:var(--gutter);top:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 3. TYPO SYSTÈME --------------------------------------------- */
.display{
  font-family:var(--font-display);
  font-variation-settings:'wdth' 88,'wght' 800;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:var(--tracking-display);
  line-height:var(--lh-tight);
  color:var(--text-strong);
}
.display .is-accent{color:var(--accent);font-style:normal}
.quote,.lead-accent{
  font-family:var(--font-accent);font-style:italic;font-weight:500;
  font-variation-settings:'opsz' 72;
}
.lead{font-size:var(--step-1);line-height:1.5;color:var(--text);max-width:52ch}
.muted{color:var(--text-muted)}

.eyebrow{
  font-weight:600;font-size:13px;text-transform:uppercase;
  letter-spacing:var(--tracking-eyebrow);color:var(--accent-ink);
  display:flex;align-items:center;gap:var(--space-3);
}
.section--dark .eyebrow{color:var(--primary-300)}

/* ---------- 4. MOTIF SIGNATURE — le filet de taloche -------------------- */
.filet{
  --filet-w:48px;
  display:inline-block;flex:0 0 auto;
  width:var(--filet-w);height:2px;
  background:linear-gradient(90deg,var(--primary-500) 0%,var(--primary-500) 72%,rgba(192,102,58,.25) 100%);
  filter:url(#taloche);
  transform-origin:left center;transform:scaleX(0);
  transition:transform var(--dur-reveal) var(--ease-depose);
}
.filet--lg{--filet-w:120px}
.filet--full{width:100%;opacity:.35}
.is-revealed .filet,.is-revealed.filet{transform:scaleX(1)}
.list-filet{list-style:none}
.list-filet li{position:relative;padding-left:var(--space-6);margin-bottom:var(--space-3)}
.list-filet li::before{
  content:'';position:absolute;left:0;top:.72em;width:20px;height:2px;
  background:var(--primary-500);filter:url(#taloche);
}

/* ---------- 5. REVEAL ---------------------------------------------------- */
.reveal{opacity:0;transform:translateY(24px);
  transition:opacity var(--dur-reveal) var(--ease-depose),transform var(--dur-reveal) var(--ease-depose)}
.reveal.is-revealed{opacity:1;transform:none}

/* ---------- 6. BOUTONS --------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:600;font-size:var(--step--1);text-transform:uppercase;letter-spacing:.08em;
  min-height:52px;padding:16px 32px;border-radius:var(--radius-none);
  transition:background var(--dur-hover) var(--ease-hover),color var(--dur-hover) var(--ease-hover),
             transform var(--dur-hover) var(--ease-hover),border-color var(--dur-hover) var(--ease-hover);
  position:relative;
}
.btn-primary{color:#fff;background:var(--primary-600)}
.btn-primary:hover{background:var(--primary-700);transform:translateY(-2px)}
.btn-outline{color:var(--text-strong);border:1px solid var(--neutral-900)}
.btn-outline:hover{background:var(--neutral-900);color:var(--secondary-50);transform:translateY(-2px)}
.section--dark .btn-outline{color:var(--secondary-50);border-color:var(--secondary-400)}
.section--dark .btn-outline:hover{background:var(--secondary-50);color:var(--neutral-900)}
.btn-ghost{
  padding:14px 2px;min-height:44px;color:var(--text-strong);
  border-bottom:2px solid var(--primary-500);text-transform:uppercase;
  font-weight:600;font-size:var(--step--1);letter-spacing:.08em;
}
.btn-ghost:hover{color:var(--accent-ink)}
.btn-magnet{will-change:transform}
.btn-magnet .btn-label{display:block;transition:transform var(--dur-hover) var(--ease-hover)}

/* ---------- 7. HEADER ---------------------------------------------------- */
.topbar{
  background:var(--neutral-900);color:var(--secondary-300);
  font-size:13px;letter-spacing:.02em;
}
.topbar__in{display:flex;justify-content:space-between;align-items:center;gap:var(--space-5);min-height:40px}
.topbar__list{display:flex;gap:var(--space-6);list-style:none}
.topbar a{transition:color var(--dur-hover) var(--ease-hover)}
.topbar a:hover{color:var(--primary-300)}
.topbar__note{display:flex;align-items:center;gap:8px}
.topbar__dot{width:6px;height:6px;border-radius:50%;background:#7FA86A;box-shadow:0 0 0 3px rgba(127,168,106,.22)}
@media (max-width:900px){.topbar__note{display:none}.topbar__in{justify-content:center}}

.site-header{
  position:sticky;top:0;z-index:60;
  background:transparent;
  transition:background var(--dur-hover) var(--ease-hover),box-shadow var(--dur-hover) var(--ease-hover),
             backdrop-filter var(--dur-hover) var(--ease-hover);
}
.site-header__in{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);
  min-height:var(--header-h);
  transition:min-height var(--dur-hover) var(--ease-hover);
}
.site-header.is-stuck{
  background:rgba(250,246,240,.86);
  backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:0 1px 0 var(--secondary-200),0 12px 32px -24px rgba(31,28,26,.4);
}
.site-header.is-stuck .site-header__in{min-height:66px}

.wordmark{position:relative;display:inline-block;padding-bottom:6px}
.wordmark__text{
  font-family:var(--font-display);font-variation-settings:'wdth' 92,'wght' 800;font-weight:800;
  font-size:clamp(1.25rem,.9rem + 1vw,1.6rem);letter-spacing:-.02em;color:var(--text-strong);
  transition:font-size var(--dur-hover) var(--ease-hover);
}
.site-header.is-stuck .wordmark__text{font-size:clamp(1.1rem,.9rem + .6vw,1.35rem)}
.wordmark__filet{position:absolute;left:0;bottom:0;--filet-w:100%}
.wordmark:hover .wordmark__filet{transform:scaleX(1)!important}

.nav{display:flex;align-items:center;gap:clamp(14px,1.8vw,30px)}
.nav__link{
  position:relative;padding:10px 2px;font-weight:500;font-size:15px;color:var(--text);
  transition:color var(--dur-hover) var(--ease-hover);
}
.nav__link::after{
  content:'';position:absolute;left:0;bottom:4px;width:100%;height:2px;
  background:var(--primary-500);filter:url(#taloche);
  transform:scaleX(0);transform-origin:left center;
  transition:transform var(--dur-hover) var(--ease-hover);
}
.nav__link:hover,.nav__link[aria-current="page"]{color:var(--text-strong)}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{transform:scaleX(1)}
.nav__link[aria-current="page"]{color:var(--accent-ink)}
.header__actions{display:flex;align-items:center;gap:var(--space-4)}
.header__tel{display:flex;flex-direction:column;line-height:1.15;text-align:right}
.header__tel small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.header__tel strong{font-weight:700;font-size:15px;color:var(--text-strong)}
@media (max-width:1120px){.nav,.header__tel{display:none}}

.burger{
  display:none;width:48px;height:48px;align-items:center;justify-content:center;
  border:1px solid var(--secondary-300);border-radius:var(--radius-md);
}
.burger span{display:block;width:20px;height:2px;background:var(--neutral-900);position:relative;transition:background var(--dur-fast) linear}
.burger span::before,.burger span::after{
  content:'';position:absolute;left:0;width:20px;height:2px;background:var(--neutral-900);
  transition:transform var(--dur-hover) var(--ease-hover),top var(--dur-hover) var(--ease-hover);
}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
@media (max-width:1120px){.burger{display:flex}}

/* Menu mobile cinématique */
.mobile-menu{
  position:fixed;inset:0;z-index:80;
  background:var(--secondary-50);
  padding:calc(var(--header-h) + 24px) var(--gutter) 40px;
  height:100dvh;overflow-y:auto;
  clip-path:circle(0% at var(--mm-x,90%) var(--mm-y,5%));
  transition:clip-path 620ms var(--ease-mask);
  visibility:hidden;
}
.mobile-menu.is-open{clip-path:circle(150% at var(--mm-x,90%) var(--mm-y,5%));visibility:visible}
.mobile-menu__close{position:absolute;top:22px;right:var(--gutter);width:48px;height:48px;font-size:26px;color:var(--neutral-900)}
.mobile-menu__nav{display:flex;flex-direction:column;gap:2px;margin-bottom:var(--space-8)}
.mobile-menu__link{
  font-family:var(--font-display);font-variation-settings:'wdth' 90,'wght' 700;
  text-transform:uppercase;font-size:clamp(1.6rem,7vw,2.4rem);line-height:1.15;
  color:var(--text-strong);padding:10px 0;border-bottom:1px solid var(--secondary-200);
  opacity:0;transform:translateY(18px);
}
.mobile-menu.is-open .mobile-menu__link{
  opacity:1;transform:none;
  transition:opacity 520ms var(--ease-depose),transform 520ms var(--ease-depose);
  transition-delay:calc(var(--i,0) * 55ms + 140ms);
}
.mobile-menu__cta{display:grid;gap:var(--space-4)}
.mobile-menu__cta .btn{width:100%}
.mobile-menu__nap{margin-top:var(--space-8);color:var(--text-muted);font-size:15px}

/* Sticky CTA mobile */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  grid-template-columns:1fr 1fr;gap:1px;background:var(--secondary-300);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -12px 30px -20px rgba(31,28,26,.5);
}
.sticky-cta a{
  display:flex;align-items:center;justify-content:center;gap:8px;min-height:58px;
  font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.06em;
}
.sticky-cta__call{background:var(--neutral-900);color:var(--secondary-50)}
.sticky-cta__quote{background:var(--primary-600);color:#fff}
@media (max-width:900px){.sticky-cta{display:grid}body{padding-bottom:58px}}

/* ---------- 8. HERO ------------------------------------------------------ */
.hero{position:relative;background:var(--bg);overflow:hidden}
.hero__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  align-items:stretch;min-height:calc(100svh - var(--header-h) - 40px);
}
.hero__copy{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(48px,7vw,96px) clamp(24px,4vw,72px) clamp(48px,7vw,96px) var(--gutter);
  position:relative;z-index:2;
}
.hero__eyebrow{margin-bottom:var(--space-6)}
.hero h1{font-size:var(--step-5);margin-bottom:var(--space-6);max-width:14ch}
.hero__lead{margin-bottom:var(--space-8);max-width:46ch;color:var(--neutral-700)}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-6)}
.hero__proof{
  display:flex;flex-wrap:wrap;gap:var(--space-7);margin-top:clamp(40px,5vw,72px);
  padding-top:var(--space-6);border-top:1px solid var(--secondary-200);
}
.hero__proof div{display:flex;flex-direction:column}
.hero__proof b{
  font-family:var(--font-display);font-variation-settings:'wdth' 88,'wght' 800;
  font-size:clamp(1.5rem,1rem + 1.4vw,2.1rem);line-height:1;color:var(--text-strong);
}
.hero__proof span{font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-top:6px}

/* Le mur qui se révèle */
.hero__media{position:relative;overflow:hidden;background:var(--secondary-100)}
.hero__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:translateY(var(--paraY,0px)) scale(1.06);
  will-change:transform;
}
.hero__enduit{
  position:absolute;inset:-2%;
  background:
    radial-gradient(120% 80% at 30% 20%,#FBF7F1 0%,#F3ECE1 55%,#E9DECD 100%);
  mask-image:linear-gradient(115deg,
      rgba(0,0,0,0) calc(var(--reveal,0) * 168% - 34%),
      rgba(0,0,0,1) calc(var(--reveal,0) * 168% - 20%));
  -webkit-mask-image:linear-gradient(115deg,
      rgba(0,0,0,0) calc(var(--reveal,0) * 168% - 34%),
      rgba(0,0,0,1) calc(var(--reveal,0) * 168% - 20%));
  filter:url(#taloche-edge);
  pointer-events:none;
}
.hero__enduit::after{ /* grain d'enduit sur la couche fraîche */
  content:'';position:absolute;inset:0;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E");
}
.hero__trace{ /* filet ocre laissé par la passe de taloche */
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,
      rgba(192,102,58,0) calc(var(--reveal,0) * 168% - 30%),
      rgba(192,102,58,.55) calc(var(--reveal,0) * 168% - 24%),
      rgba(192,102,58,0) calc(var(--reveal,0) * 168% - 17%));
  opacity:calc(1 - var(--reveal,0) * .55);
  filter:url(#taloche-edge);
  mix-blend-mode:multiply;
}
.hero__caption{
  position:absolute;left:var(--space-6);bottom:var(--space-6);z-index:3;
  display:flex;align-items:center;gap:12px;
  background:rgba(31,28,26,.72);backdrop-filter:blur(6px);
  color:var(--secondary-100);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  padding:10px 16px;
}
.hero__scroll{
  position:absolute;left:50%;bottom:22px;z-index:4;transform:translateX(-50%);
  width:24px;height:38px;border:1px solid var(--secondary-400);border-radius:14px;
}
.hero__scroll::after{
  content:'';position:absolute;left:50%;top:8px;width:2px;height:6px;margin-left:-1px;
  background:var(--primary-500);animation:scrollDot 2.2s var(--ease-depose) infinite;
}
@keyframes scrollDot{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr;min-height:0}
  .hero__copy{order:2;padding:var(--space-9) var(--gutter) var(--space-8)}
  .hero__media{order:1;height:min(62vh,460px)}
  .hero h1{max-width:none}
  .hero__scroll{display:none}
  .hero__proof{gap:var(--space-6)}
}

/* ---------- 9. BANDEAU MARQUEE ------------------------------------------ */
.marquee{
  background:var(--neutral-900);color:var(--secondary-200);overflow:hidden;
  border-top:2px solid var(--primary-500);
}
.marquee__track{display:flex;width:max-content;animation:slide 42s linear infinite}
.marquee__group{display:flex;flex:0 0 auto}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{
  display:flex;align-items:center;gap:var(--space-5);padding:16px var(--space-6);
  font-size:13px;text-transform:uppercase;letter-spacing:.14em;white-space:nowrap;
}
.marquee__item::after{content:'';width:5px;height:5px;background:var(--primary-500);border-radius:50%}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* ---------- 10. SECTIONS ------------------------------------------------- */
.section{padding-block:var(--section-y);position:relative}
.section--alt{background:var(--bg-alt)}
.section--dark{background:var(--neutral-900);color:var(--text-on-dark)}
.section--dark .display{color:var(--secondary-50)}
.section--dark .display .is-accent{color:var(--primary-400)}
.section--dark .muted{color:var(--secondary-400)}
.section__head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:var(--space-8);
  align-items:end;margin-bottom:clamp(48px,5vw,80px);
}
.section__head h2{font-size:var(--step-4);max-width:16ch}
.section__head p{color:var(--text-muted);max-width:46ch}
.section--dark .section__head p{color:var(--secondary-400)}
@media (max-width:860px){.section__head{grid-template-columns:1fr;gap:var(--space-5)}}

/* ---------- 11. SERVICES — Galerie cinétique ---------------------------- */
.svc__viewport{position:relative}
.svc__rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,340px);
  gap:var(--space-5);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:var(--space-6);
  scrollbar-width:none;
}
.svc__rail::-webkit-scrollbar{display:none}
.svc-card{
  scroll-snap-align:start;position:relative;display:flex;flex-direction:column;
  background:var(--surface);border:var(--border-hair);
  transition:transform var(--dur-hover) var(--ease-hover),box-shadow var(--dur-hover) var(--ease-hover),
             border-color var(--dur-hover) var(--ease-hover);
}
.svc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--secondary-300)}
.svc-card__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--secondary-200)}
.svc-card__media img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.82) contrast(1.02);
  transform:scale(1.02);
  transition:transform 900ms var(--ease-depose),filter var(--dur-hover) var(--ease-hover);
}
.svc-card:hover .svc-card__media img{transform:scale(1.06);filter:saturate(1) contrast(1.04)}
.svc-card__num{
  position:absolute;top:0;left:0;z-index:2;
  background:var(--secondary-50);color:var(--accent-ink);
  font-family:var(--font-display);font-variation-settings:'wdth' 88,'wght' 800;
  font-size:14px;letter-spacing:.06em;padding:8px 14px;
}
.svc-card__body{padding:var(--space-6);display:flex;flex-direction:column;flex:1;gap:12px}
.svc-card__body h3{
  font-family:var(--font-display);font-variation-settings:'wdth' 90,'wght' 700;font-weight:700;
  text-transform:uppercase;letter-spacing:-.01em;font-size:1.3rem;line-height:1.1;color:var(--text-strong);
}
.svc-card__body p{font-size:15px;color:var(--text-muted);line-height:1.55;flex:1}
.svc-card__filet{--filet-w:100%;transform:scaleX(0)}
.svc-card:hover .svc-card__filet{transform:scaleX(1)}
.svc-card__link{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--accent-ink);
}
.svc-card__link svg{transition:transform var(--dur-hover) var(--ease-hover)}
.svc-card:hover .svc-card__link svg{transform:translateX(5px)}
.svc-card::after{content:'';position:absolute;inset:0;pointer-events:none}

.svc__controls{display:flex;align-items:center;gap:var(--space-4);margin-top:var(--space-6)}
.svc__arrow{
  width:52px;height:52px;border:1px solid var(--neutral-900);
  display:flex;align-items:center;justify-content:center;
  transition:background var(--dur-hover) var(--ease-hover),color var(--dur-hover) var(--ease-hover),opacity var(--dur-fast) linear;
}
.svc__arrow:hover{background:var(--neutral-900);color:var(--secondary-50)}
.svc__arrow[disabled]{opacity:.28;cursor:not-allowed}
.svc__arrow[disabled]:hover{background:none;color:inherit}
.svc__progress{flex:1;height:2px;background:var(--secondary-200);position:relative;max-width:280px}
.svc__progress i{
  position:absolute;top:0;height:100%;background:var(--primary-500);
  left:0;width:20%;transition:left var(--dur-fast) linear,width var(--dur-fast) linear;
}

/* ---------- 12. PREUVE / POURQUOI --------------------------------------- */
.why__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--space-5)}
.why__lead{grid-column:span 5;display:flex;flex-direction:column;justify-content:center;gap:var(--space-6)}
.why__img{grid-column:span 7;position:relative}
.why__img img{width:100%;height:100%;min-height:340px;object-fit:cover;filter:saturate(.85)}
.why__img figcaption{
  position:absolute;right:0;bottom:0;background:var(--primary-600);color:#fff;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:12px 18px;
}
.why__cards{grid-column:span 12;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5);margin-top:var(--space-6)}
.why-card{background:var(--surface);border:var(--border-hair);padding:var(--space-6);display:flex;flex-direction:column;gap:12px}
.why-card__k{
  font-family:var(--font-display);font-variation-settings:'wdth' 88,'wght' 800;
  font-size:var(--step-3);line-height:1;color:var(--accent);
}
.why-card h3{font-size:1.05rem;font-weight:700;color:var(--text-strong);line-height:1.25}
.why-card p{font-size:14.5px;color:var(--text-muted);line-height:1.55}
@media (max-width:1000px){
  .why__lead,.why__img{grid-column:span 12}
  .why__cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){.why__cards{grid-template-columns:1fr}}

/* ---------- 13. AVANT / APRÈS ------------------------------------------- */
.ba{position:relative;width:100%;aspect-ratio:4/3;max-height:640px;overflow:hidden;user-select:none;cursor:ew-resize;background:var(--secondary-200)}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba__after{
  clip-path:inset(0 0 0 var(--x,50%));
  filter:url(#taloche-edge);
}
.ba__handle{
  position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;background:var(--primary-500);
  transform:translateX(-1px);pointer-events:none;
}
.ba__knob{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;background:var(--primary-600);color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);
}
.ba__tag{
  position:absolute;top:var(--space-5);z-index:2;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  padding:8px 14px;background:rgba(31,28,26,.72);color:var(--secondary-100);backdrop-filter:blur(4px);
}
.ba__tag--l{left:var(--space-5)}
.ba__tag--r{right:var(--space-5);background:var(--primary-600);color:#fff}
.ba__range{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:ew-resize}
.ba__range:focus-visible + .ba__handle{box-shadow:0 0 0 3px rgba(250,246,240,.9)}
.ba-wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(32px,5vw,72px);align-items:center}
.ba-side{display:flex;flex-direction:column;gap:var(--space-5)}
.ba-side h2{font-size:var(--step-4)}
@media (max-width:980px){.ba-wrap{grid-template-columns:1fr}}

/* ---------- 14. PROCESS -------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-5);position:relative}
.steps::before{
  content:'';position:absolute;left:0;right:0;top:26px;height:2px;
  background:var(--secondary-300);opacity:.7;filter:url(#taloche);
}
.step{position:relative;display:flex;flex-direction:column;gap:14px;padding-right:var(--space-4)}
.step__n{
  width:54px;height:54px;flex:0 0 auto;border-radius:50%;
  background:var(--bg-alt);border:1px solid var(--secondary-300);color:var(--text-strong);
  display:flex;align-items:center;justify-content:center;position:relative;z-index:1;
  font-family:var(--font-display);font-variation-settings:'wdth' 88,'wght' 800;font-size:1.05rem;
  transition:background var(--dur-hover) var(--ease-hover),color var(--dur-hover) var(--ease-hover),border-color var(--dur-hover) var(--ease-hover);
}
.section--alt .step__n{background:var(--secondary-50)}
.step:hover .step__n{background:var(--primary-600);color:#fff;border-color:var(--primary-600)}
.step h3{font-size:1.1rem;font-weight:700;color:var(--text-strong);line-height:1.25}
.step p{font-size:14.5px;color:var(--text-muted);line-height:1.55}
.step__meta{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);font-weight:600}
@media (max-width:1000px){.steps{grid-template-columns:1fr 1fr}.steps::before{display:none}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* ---------- 15. TÉMOIGNAGES + ZONES ------------------------------------- */
.testi__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.testi{
  background:rgba(250,246,240,.05);border:1px solid rgba(233,222,205,.14);
  padding:var(--space-7);display:flex;flex-direction:column;gap:var(--space-5);
}
.testi blockquote{font-family:var(--font-accent);font-style:italic;font-size:var(--step-1);line-height:1.45;color:var(--secondary-50)}
.testi__who{display:flex;flex-direction:column;gap:2px;font-size:14px}
.testi__who b{color:var(--secondary-100);font-weight:600}
.testi__who span{color:var(--secondary-500)}
.testi__stars{color:var(--primary-400);letter-spacing:3px;font-size:14px}
@media (max-width:900px){.testi__grid{grid-template-columns:1fr}}

.zones{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--space-7)}
.zones a{
  border:1px solid var(--secondary-300);padding:10px 16px;min-height:44px;
  display:inline-flex;align-items:center;font-size:14px;color:var(--text);
  transition:background var(--dur-hover) var(--ease-hover),color var(--dur-hover) var(--ease-hover),border-color var(--dur-hover) var(--ease-hover);
}
.zones a:hover{background:var(--neutral-900);color:var(--secondary-50);border-color:var(--neutral-900)}

/* ---------- 16. CTA FINAL ------------------------------------------------ */
.cta-final{position:relative;overflow:hidden;background:var(--neutral-900);color:var(--secondary-100)}
.cta-final__bg{
  position:absolute;inset:0;opacity:.18;object-fit:cover;width:100%;height:100%;
  filter:grayscale(.35) contrast(1.1);
}
.cta-final__in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-8);align-items:end;padding-block:clamp(80px,8vw,140px)}
.cta-final h2{font-size:var(--step-6);color:var(--secondary-50);line-height:.94;max-width:11ch}
.cta-final h2 .is-accent{color:var(--primary-400)}
.cta-final p{color:var(--secondary-400);margin-top:var(--space-5);max-width:44ch}
.cta-final__actions{display:flex;flex-direction:column;gap:var(--space-4);min-width:260px}
@media (max-width:900px){.cta-final__in{grid-template-columns:1fr;align-items:start}}

/* ---------- 17. FOOTER --------------------------------------------------- */
.site-footer{background:var(--neutral-950);color:var(--secondary-400);position:relative}
.site-footer::before{content:'';display:block;height:2px;background:var(--primary-500);opacity:.4;filter:url(#taloche)}
.footer__top{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:var(--space-8);
  padding-block:clamp(64px,7vw,104px);
}
.footer__brand .wordmark__text{color:var(--secondary-50)}
.footer__brand p{margin-top:var(--space-5);font-size:15px;line-height:1.6;max-width:34ch}
.footer__nap{margin-top:var(--space-6);font-style:normal;font-size:15px;line-height:1.9}
.footer__nap a{transition:color var(--dur-hover) var(--ease-hover)}
.footer__nap a:hover{color:var(--primary-300)}
.footer__nap strong{color:var(--secondary-100);font-weight:600}
.footer h3{
  font-family:var(--font-body);font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;color:var(--secondary-100);margin-bottom:var(--space-5);
}
.footer__list{list-style:none;display:flex;flex-direction:column;gap:2px}
.footer__list a{
  display:inline-block;padding:6px 0;font-size:15px;position:relative;
  transition:color var(--dur-hover) var(--ease-hover),transform var(--dur-hover) var(--ease-hover);
}
.footer__list a::after{
  content:'';position:absolute;left:0;bottom:4px;width:100%;height:1px;background:var(--primary-500);
  transform:scaleX(0);transform-origin:left;transition:transform var(--dur-hover) var(--ease-hover);filter:url(#taloche);
}
.footer__list a:hover{color:var(--secondary-50)}
.footer__list a:hover::after{transform:scaleX(1)}
.footer__trust{display:flex;flex-direction:column;gap:var(--space-4)}
.trust-badge{
  display:flex;align-items:center;gap:12px;padding:14px 16px;
  border:1px solid rgba(233,222,205,.12);background:rgba(250,246,240,.03);
  font-size:14px;color:var(--secondary-300);
}
.trust-badge b{color:var(--secondary-50);font-weight:600}
.footer__bottom{
  border-top:1px solid rgba(233,222,205,.12);padding-block:var(--space-6);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-4);font-size:13.5px;
}
.footer__bottom nav{display:flex;flex-wrap:wrap;gap:var(--space-5)}
.footer__bottom a:hover{color:var(--secondary-100)}
.footer__signature b{color:var(--secondary-200);font-weight:600}
@media (max-width:1000px){.footer__top{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.footer__top{grid-template-columns:1fr;gap:var(--space-7)}}

/* ---------- 18. DRAWER DEVIS MULTISTEP ---------------------------------- */
.drawer-overlay{
  position:fixed;inset:0;z-index:90;background:rgba(31,28,26,.55);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity var(--dur-hover) var(--ease-hover),visibility 0s linear var(--dur-hover);
}
.drawer-overlay.is-open{opacity:1;visibility:visible;transition-delay:0s}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:95;
  width:min(560px,100%);height:100dvh;background:var(--secondary-50);
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform 520ms var(--ease-depose);
  box-shadow:var(--shadow-lg);
}
.drawer.is-open{transform:none}
.drawer__head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-5);
  padding:var(--space-7) var(--space-7) var(--space-5);border-bottom:1px solid var(--secondary-200);
}
.drawer__head h2{font-size:var(--step-2);font-family:var(--font-display);
  font-variation-settings:'wdth' 90,'wght' 800;text-transform:uppercase;color:var(--text-strong);line-height:1.05}
.drawer__head p{font-size:14px;color:var(--text-muted);margin-top:8px}
.drawer__close{width:48px;height:48px;flex:0 0 auto;font-size:24px;color:var(--neutral-900)}
.drawer__bar{height:3px;background:var(--secondary-200);position:relative}
.drawer__bar i{position:absolute;inset:0 auto 0 0;background:var(--primary-500);width:33.33%;
  transition:width 420ms var(--ease-depose)}
.drawer__body{flex:1;overflow-y:auto;padding:var(--space-7)}
.drawer__foot{
  padding:var(--space-5) var(--space-7);border-top:1px solid var(--secondary-200);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  background:var(--secondary-100);padding-bottom:calc(var(--space-5) + env(safe-area-inset-bottom));
}
.drawer__step{display:none;animation:stepIn 460ms var(--ease-depose)}
.drawer__step.is-active{display:block}
@keyframes stepIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.drawer__legend{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);font-weight:600;margin-bottom:var(--space-5);display:flex;align-items:center;gap:10px}
.opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opt{
  position:relative;display:flex;align-items:center;gap:12px;
  padding:16px;min-height:56px;border:1px solid var(--secondary-300);background:var(--surface);
  cursor:pointer;font-size:15px;font-weight:500;color:var(--text);
  transition:border-color var(--dur-hover) var(--ease-hover),background var(--dur-hover) var(--ease-hover);
}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt__box{width:18px;height:18px;flex:0 0 auto;border:1px solid var(--secondary-400);position:relative}
.opt:hover{border-color:var(--secondary-500)}
.opt:has(input:checked){border-color:var(--primary-500);background:var(--primary-50)}
.opt:has(input:checked) .opt__box{background:var(--primary-600);border-color:var(--primary-600)}
.opt:has(input:checked) .opt__box::after{
  content:'';position:absolute;left:5px;top:1px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg);
}
.opt:has(input:focus-visible){outline:2px solid var(--neutral-900);outline-offset:2px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--space-5)}
.field label{font-size:13px;font-weight:600;color:var(--text-strong);letter-spacing:.02em}
.field input,.field textarea,.field select{
  background:var(--surface);border:1px solid var(--secondary-300);border-radius:var(--radius-md);
  padding:14px 16px;min-height:52px;font-size:16px;transition:border-color var(--dur-fast) linear,box-shadow var(--dur-fast) linear;
}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--primary-500);box-shadow:0 0 0 3px var(--primary-100);
}
.field small{font-size:12.5px;color:var(--text-muted)}
.drawer__recap{background:var(--bg-alt);border:1px solid var(--secondary-200);padding:var(--space-5);margin-bottom:var(--space-6);font-size:14.5px}
.drawer__recap dt{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:2px}
.drawer__recap dd{color:var(--text-strong);font-weight:600;margin-bottom:12px}
.drawer__recap dd:last-child{margin-bottom:0}
.drawer__done{text-align:center;padding-block:var(--space-8)}
.drawer__done .display{font-size:var(--step-3);margin-bottom:var(--space-4)}
@media (max-width:520px){.opt-grid{grid-template-columns:1fr}.drawer__body,.drawer__head{padding-inline:var(--space-5)}.drawer__foot{padding-inline:var(--space-5)}}

/* ---------- 19. UTIL ----------------------------------------------------- */
[data-stagger]>*{transition-delay:calc(var(--i,0) * var(--stagger))}
.noscroll{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}
  .reveal{opacity:1;transform:none}
  .filet{transform:scaleX(1)}
  html{scroll-behavior:auto}
}

/* =========================================================================
   20. ÉLÉMENT PREMIUM — « LE MUR D'ESSAI »
   ========================================================================= */
.hb-essai{
  --hb-tint:#EDE7DC;
  --hb-fade:900ms;
  position:relative;padding-block:var(--section-y);background:var(--bg);overflow:clip;
}
.hb-essai__inner{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.hb-essai__eyebrow{margin-bottom:var(--space-7)}
.hb-essai__grid{display:grid;grid-template-columns:1fr;gap:var(--space-8)}
@media (min-width:1024px){
  .hb-essai__grid{grid-template-columns:minmax(300px,4fr) 8fr;gap:clamp(40px,5vw,88px);align-items:start}
  .hb-essai__panel{position:sticky;top:calc(var(--header-h) + 24px)}
}
.hb-essai__title{font-size:var(--step-4);margin:0 0 var(--space-5)}
.hb-essai__title em{color:var(--accent);font-style:normal}
.hb-essai__lead{font-size:var(--step-0);line-height:var(--lh-body);color:var(--text);max-width:46ch;margin:0 0 var(--space-7)}
.hb-essai__lead .lead-accent{color:var(--accent-ink)}

.hb-essai__nuancier{border:0;padding:0;margin:0 0 var(--space-4);min-inline-size:0}
.hb-essai__legend{padding:0;margin-bottom:var(--space-4);font-weight:600;font-size:13px;
  text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);color:var(--text-muted)}
.hb-essai__rail{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.hb-swatch{position:relative;display:flex;flex-direction:column;gap:var(--space-2);min-height:44px;cursor:pointer}
.hb-swatch__input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.hb-swatch__chip{
  position:relative;display:block;width:100%;aspect-ratio:1/1;min-height:56px;
  background:var(--chip);border:1px solid var(--secondary-200);border-radius:var(--radius-sm);
  box-shadow:inset 0 0 0 0 var(--primary-600);
  transition:box-shadow var(--dur-hover) var(--ease-hover),transform var(--dur-hover) var(--ease-hover),border-color var(--dur-hover) var(--ease-hover);
}
.hb-swatch__chip::after{
  content:'';position:absolute;inset:0;border-radius:var(--radius-sm);pointer-events:none;
  opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)' opacity='.45'/%3E%3C/svg%3E");
}
.hb-swatch:hover .hb-swatch__chip{transform:translateY(-2px);border-color:var(--secondary-400)}
.hb-swatch__input:focus-visible ~ .hb-swatch__chip{outline:2px solid var(--neutral-900);outline-offset:3px}
.hb-swatch__input:checked ~ .hb-swatch__chip{box-shadow:inset 0 0 0 3px var(--primary-600);border-color:var(--primary-600)}
.hb-swatch__name{font-size:var(--step--1);font-weight:500;color:var(--text-muted);line-height:1.25;
  transition:color var(--dur-hover) var(--ease-hover)}
.hb-swatch__input:checked ~ .hb-swatch__name{color:var(--text-strong);font-weight:600}
.hb-essai__note{font-size:var(--step--1);color:var(--text-muted);max-width:38ch;margin:0 0 var(--space-6)}
.hb-essai__cta{display:inline-flex;min-height:56px}

.hb-essai__stage{position:relative}
.hb-essai__media{
  position:relative;margin:0;isolation:isolate;aspect-ratio:16/10;
  box-shadow:var(--shadow-img);background:var(--secondary-100);overflow:hidden;
}
.hb-essai__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:brightness(1.03)}
/* La teinte ne couvre QUE le mur : clip-path sur la silhouette de la maison */
.hb-essai__tint{
  position:absolute;inset:0;display:block;pointer-events:none;
  mix-blend-mode:multiply;opacity:.9;
  clip-path:polygon(15% 46%,23.5% 46%,23.5% 25%,26.5% 25%,26.5% 11%,83.5% 11%,83.5% 81%,15% 81%);
}
.hb-essai__tint-layer{
  position:absolute;inset:0;display:block;background:var(--hb-tint);opacity:0;
  transition:opacity var(--hb-fade) var(--ease-depose);
}
.hb-essai__tint-layer.is-active{opacity:1}
.hb-essai__grain{
  position:absolute;inset:0;display:block;pointer-events:none;
  background:url("../img/texture-grain.png") center/cover no-repeat;
  mix-blend-mode:overlay;opacity:.22;
  clip-path:polygon(15% 46%,23.5% 46%,23.5% 25%,26.5% 25%,26.5% 11%,83.5% 11%,83.5% 81%,15% 81%);
}
.hb-essai__tag{
  position:absolute;right:var(--space-4);bottom:var(--space-4);z-index:2;
  background:var(--accent-50);color:var(--text-strong);
  font-size:var(--step--1);line-height:1.35;padding:var(--space-3) var(--space-4);
  border-left:3px solid var(--primary-500);box-shadow:var(--shadow-sm);
}
@media (min-width:1024px){.hb-essai__tag{right:-32px;bottom:40px}}

.hb-essai__readout{position:relative;margin-top:var(--space-5)}
.hb-essai__teinte-nom{
  margin:0;font-size:clamp(2.25rem,8vw,7rem);line-height:.88;color:var(--neutral-900);
  mix-blend-mode:multiply;overflow-wrap:break-word;
  transition:opacity var(--hb-fade) var(--ease-depose);
}
.hb-essai__teinte-ref{
  margin:var(--space-3) 0 0;font-size:var(--step--1);font-weight:600;
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--accent-ink);
  transition:opacity var(--hb-fade) var(--ease-depose);
}
.hb-essai__readout.is-swapping .hb-essai__teinte-nom,
.hb-essai__readout.is-swapping .hb-essai__teinte-ref{opacity:0}
@media (min-width:1024px){
  .hb-essai__readout{margin-top:calc(var(--space-6) * -1);margin-left:-7vw;max-width:calc(100% + 7vw)}
  .hb-essai__teinte-nom{letter-spacing:-.02em}
}
.hb-essai__vignette{display:none}
@media (min-width:1024px){
  .hb-essai__vignette{
    display:block;position:absolute;right:3%;bottom:-32px;
    width:clamp(140px,12vw,190px);height:auto;z-index:3;
    transform:rotate(-1.5deg);box-shadow:var(--shadow-lg);border:6px solid var(--accent-50);
  }
}
@media (max-width:767px){
  .hb-essai__rail{
    display:flex;gap:var(--space-4);overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:var(--space-3);
    margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
  }
  .hb-swatch{flex:0 0 108px;scroll-snap-align:start}
  .hb-swatch__chip{min-height:72px}
  .hb-essai__cta{display:flex;width:100%}
  .hb-essai__media{aspect-ratio:4/3}
}
.hb-essai__rule{display:block;width:100%;margin-top:var(--section-y)}
@media (prefers-reduced-motion:reduce){
  .hb-essai{--hb-fade:1ms}
  .hb-essai__vignette{transform:none}
}

/* =========================================================================
   21. CORRECTIFS QA VISUEL (itération 1)
   ========================================================================= */

/* Desktop : le H1 tenait en 5 lignes et poussait le CTA sous le pli */
.hero h1{font-size:clamp(2.5rem,1.4rem + 3.4vw,4.25rem);max-width:15ch;margin-bottom:var(--space-5)}
.hero__lead{margin-bottom:var(--space-6)}
.hero__proof{margin-top:clamp(28px,3vw,44px);padding-top:var(--space-5);gap:var(--space-6)}
.hero__copy{padding-block:clamp(36px,4.5vw,64px)}
.hero__grid{min-height:calc(100svh - var(--header-h))}

/* Le wordmark ne se casse jamais en deux lignes */
.wordmark__text{white-space:nowrap}

@media (max-width:900px){
  /* La barre collante du bas porte déjà « Appeler + Devis » :
     le CTA du header n'a plus lieu d'être et libère la place au wordmark. */
  .header__actions .btn-primary{display:none}
  .site-header__in{min-height:68px}
  .topbar{font-size:12.5px}
}

@media (max-width:980px){
  /* Le H1 et le CTA doivent arriver vite : la photo ne mange plus l'écran */
  .hero__media{height:min(46vh,360px)}
  .hero__copy{padding-block:var(--space-8) var(--space-7)}
  .hero__caption{left:var(--space-4);bottom:var(--space-4);font-size:11px;padding:8px 12px}
  .hero__proof{gap:var(--space-5) var(--space-7)}
}

/* Itération 2 — mobile : le H1 entier dans le premier écran */
@media (max-width:560px){
  .hero__media{height:min(34vh,270px)}
  .hero__copy{padding-block:var(--space-7) var(--space-7)}
  .hero__eyebrow{margin-bottom:var(--space-5);font-size:11.5px;letter-spacing:.1em}
  .hero h1{font-size:clamp(2.15rem,8.4vw,2.75rem);max-width:none}
  .hero__lead{font-size:1.0625rem;margin-bottom:var(--space-6)}
  .hero__actions{gap:var(--space-4)}
  .hero__actions .btn{width:100%}
}

/* Itération 2 — Mur d'essai : la typo géante débordait hors cadre et mordait le nuancier ;
   le grain, étiré en "cover", faisait des nuages au lieu d'un grain d'enduit. */
.hb-essai__grain{
  background:url("../img/texture-grain.png") 0 0/340px 340px repeat;
  opacity:.2;
}
.hb-essai__readout{position:relative;z-index:2;pointer-events:none}
.hb-essai__teinte-nom{
  font-size:clamp(2rem,5vw,5rem);
  line-height:.9;
  max-width:11ch;           /* « Ocre Bettembourg » passe sur 2 lignes au lieu d'être coupé */
  hyphens:none;
}
.hb-essai__teinte-ref{pointer-events:auto}
@media (min-width:1024px){
  /* Le débordement reste (rupture de grille) mais tient dans la gouttière : plus de collision */
  .hb-essai__readout{margin-top:calc(var(--space-5) * -1);margin-left:-3vw;max-width:none}
}
@media (min-width:1024px){
  .hb-essai__vignette{right:2%;bottom:-56px}
}

/* Itération 3 — « BETTEMBOU/RG » se coupait en plein mot ; l'étiquette débordante
   était rognée par l'overflow de la figure. */
.hb-essai__teinte-nom{overflow-wrap:normal;word-break:normal;max-width:none}
.hb-essai__media{overflow:visible}
@media (min-width:1024px){.hb-essai__tag{right:-28px}}

/* Itération 3b — la vignette atelier mangeait la dernière lettre du nom de teinte */
.hb-essai__teinte-nom{font-size:clamp(2rem,4.4vw,4.5rem)}
@media (min-width:1024px){.hb-essai__vignette{bottom:-72px;right:1%}}

/* Itération 3c — bordure par défaut du <fieldset> visible dans le drawer */
.drawer__step{border:0;padding:0;margin:0;min-inline-size:0}
.drawer__legend{padding:0}

/* Itération 3d — le filtre de taloche déformait TOUTE la photo « après »,
   pas seulement le bord du masque. Le bord granuleux est abandonné ici :
   un comparateur doit rester lisible. */
.ba__after{filter:none}

/* Itération 4 — le rail du nuancier (flex, 6 pastilles) élargissait la colonne de grille :
   à 375px, le texte, le CTA et la photo étaient rognés par overflow:clip.
   `min-width:0` : une piste de grille ne doit pas grandir pour son contenu. */
.hb-essai__grid,
.hb-essai__panel,
.hb-essai__stage{min-width:0}

/* Itération 4b — le rail en pleine largeur collait la 1re pastille au bord de l'écran */
@media (max-width:767px){
  .hb-essai__rail{margin-inline:0;padding-inline:0;padding-right:var(--gutter)}
}