/* =========================================================
   KATALDIVISION · DESIGN SYSTEM 2026
   « Acier et lumière » : graphite, métal, une seule couleur
   d'accent (orange du logo). Partagé par toutes les nouvelles pages.

   1. Polices        5. Boutons          9. Cartes
   2. Tokens         6. Header / menu   10. Formulaires
   3. Base           7. Sections        11. Footer
   4. Typographie    8. Hero 3D         12. Animations & préférences
   ========================================================= */

/* ---------- 1. Polices (hébergées localement, sous-ensemble latin) ---------- */
@font-face{font-family:"Archivo";src:url("../fonts/kd/archivo-var-latin.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/kd/plex-sans-var-latin.woff2") format("woff2");font-weight:100 700;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/kd/plex-mono-400-latin.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/kd/plex-mono-500-latin.woff2") format("woff2");font-weight:500;font-display:swap}

/* ---------- 2. Tokens ---------- */
:root{
  /* Couleurs */
  --color-background:#0E1013;
  --color-surface:#16191E;
  --color-surface-2:#1E2228;
  --color-surface-3:#272C33;
  --color-paper:#F4F2EE;
  --color-paper-2:#E9E6E0;
  --color-text:#EEEBE5;
  --color-text-2:#B9B5AD;
  --color-muted:#8F8C85;
  --color-ink:#15171A;
  --color-ink-2:#4A4D52;
  --color-steel:#B9BDC2;
  --color-primary:#F15A24;
  --color-primary-hi:#FF7442;
  --color-primary-ink:#B83E10;            /* orange lisible sur fond clair (AA) */
  --color-primary-soft:rgba(241,90,36,.14);
  --color-border:rgba(238,235,229,.10);
  --color-border-strong:rgba(238,235,229,.20);
  --color-border-ink:rgba(21,23,26,.12);
  --color-success:#7FB685;
  --color-danger:#FF6B6B;
  --color-danger-ink:#B42318;
  --glass:rgba(18,21,26,.58);
  --glass-light:rgba(255,255,255,.06);

  /* Rayons */
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:24px;
  --radius-pill:999px;

  /* Ombres */
  --shadow-soft:0 1px 2px rgb(0 0 0 / .22),0 8px 24px -10px rgb(0 0 0 / .38);
  --shadow-elevated:0 2px 6px rgb(0 0 0 / .28),0 30px 70px -24px rgb(0 0 0 / .6);
  --shadow-paper:0 1px 2px rgb(21 23 26 / .06),0 18px 40px -22px rgb(21 23 26 / .28);

  /* Espaces */
  --space-2xs:.25rem;
  --space-xs:.5rem;
  --space-sm:1rem;
  --space-md:2rem;
  --space-lg:4rem;
  --space-xl:clamp(5rem,10vw,9rem);
  --gutter:clamp(1rem,4vw,3rem);
  --container:1320px;
  --header-h:80px;

  /* Typographie */
  --font-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-body:"IBM Plex Sans","Segoe UI",Roboto,Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --text-xs:.8125rem;
  --text-sm:.9375rem;
  --text-md:1.0625rem;
  --text-lg:clamp(1.125rem,1.4vw,1.3125rem);
  --text-xl:clamp(1.35rem,2vw,1.75rem);

  /* Mouvement */
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.45s;
  color-scheme:dark;
}

/* ---------- 3. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 1rem)}
body{
  margin:0;min-height:100vh;background:var(--color-background);color:#a78644;
  font:400 var(--text-md)/1.6 var(--font-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
::selection{background:var(--color-primary);color:#fff}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:var(--gutter);top:-100px;z-index:200;padding:.75rem 1rem;background:var(--color-primary);color:#fff;border-radius:var(--radius-sm);font-weight:600;text-decoration:none}
.skip-link:focus{top:1rem}
.container{width:min(100% - 2*var(--gutter),var(--container));margin-inline:auto}

/* ---------- 4. Typographie ---------- */
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:700;font-stretch:112%;letter-spacing:-.022em;text-wrap:balance}
h1,.t-h1{font-size:clamp(2.5rem,6vw,5.6rem);line-height:.95;font-weight:750}
h2,.t-h2{font-size:clamp(2.1rem,5vw,4.5rem);line-height:1}
h3,.t-h3{font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.15;letter-spacing:-.012em}
@media (max-width:400px){h1,.t-h1{font-size:min(2.3rem,10.4vw)}h2,.t-h2{font-size:1.8rem}h1,h2{hyphens:auto;-webkit-hyphens:auto}}
p{margin:0;text-wrap:pretty}
.lead{font-size:var(--text-lg);line-height:1.55;color:var(--color-text-2);max-width:60ch}
.eyebrow{
  display:inline-flex;align-items:center;gap:.75rem;
  font:500 var(--text-xs)/1.5 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-2);
}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--color-primary)}
.mono{font-family:var(--font-mono)}
.accent{color:var(--color-primary)}
.prose{max-width:68ch}
.prose > * + *{margin-top:1em}
.prose h2{font-size:clamp(1.6rem,3vw,2.4rem);margin-top:2.2em}
.prose h3{margin-top:1.8em}
.prose ul{padding-left:1.2em}
.prose li + li{margin-top:.4em}

/* ---------- 5. Boutons ---------- */
.btn{
  --btn-bg:transparent;--btn-fg:var(--color-text);--btn-bd:var(--color-border-strong);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:48px;padding:.8rem 1.35rem;border-radius:var(--radius-pill);
  border:1px solid var(--btn-bd);background:var(--btn-bg);color:var(--btn-fg);
  font:600 var(--text-sm)/1.1 var(--font-body);letter-spacing:.01em;text-decoration:none;white-space:nowrap;
  transition:background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}
.btn svg{width:18px;height:18px;flex:none;transition:transform .3s var(--ease-out)}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:translateY(1px)}
.btn--primary{--btn-bg:var(--color-primary);--btn-fg:var(--color-ink);--btn-bd:var(--color-primary);box-shadow:0 10px 30px -12px rgb(241 90 36 / .7)}
.btn--primary:hover{--btn-bg:var(--color-primary-hi);--btn-bd:var(--color-primary-hi);box-shadow:0 14px 34px -12px rgb(241 90 36 / .85)}
.btn--secondary{--btn-bg:var(--glass-light);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn--secondary:hover{--btn-bg:rgba(255,255,255,.12);--btn-bd:rgba(238,235,229,.34)}
.btn--ghost{--btn-bd:transparent;padding-inline:.4rem;min-height:44px}
.btn--ghost:hover{color:var(--color-primary-hi)}
.btn--ink{--btn-bg:var(--color-ink);--btn-fg:#fff;--btn-bd:var(--color-ink)}
.btn--ink:hover{--btn-bg:#000}
.btn--sm{min-height:44px;padding:.6rem 1.05rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.link-arrow{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;text-decoration:none;color:inherit;min-height:44px}
.link-arrow svg{width:16px;height:16px;transition:transform .3s var(--ease-out)}
.link-arrow:hover svg{transform:translateX(4px)}

/* ---------- 6. Header / navigation ----------
   Barre flottante en verre, détachée du haut. Son opacité, sa hauteur et son flou
   suivent le défilement de façon continue via --sp (0 → 1, piloté par kd-site.js).
   Capsule active animée (ressort + légère déformation), liens magnétiques,
   bouton principal avec halo, menu mobile plein écran en cercle. */
.site-header{
  --sp:0;--bar-h:clamp(56px,4.4vw,64px);
  position:fixed;inset:0 0 auto;z-index:100;pointer-events:none;
  padding-top:calc(14px - 6px * var(--sp));
}
.site-header--solid{--sp:1}
.site-header > .container{
  pointer-events:auto;position:relative;isolation:isolate;
  width:fit-content;max-width:min(100% - 2*var(--gutter),var(--container));margin-inline:auto;
  height:calc(var(--bar-h) - 6px * var(--sp));
  display:flex;align-items:center;gap:clamp(.5rem,1.4vw,1.25rem);
  padding:0 7px 0 clamp(.9rem,1.5vw,1.35rem);border-radius:var(--radius-pill);
  background:rgba(14,16,19,calc(.22 + .6 * var(--sp)));
  border:1px solid rgba(238,235,229,calc(.08 + .06 * var(--sp)));
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 18px 50px -24px rgba(0,0,0,calc(.35 + .4 * var(--sp)));
  -webkit-backdrop-filter:saturate(1.5) blur(calc(10px + 12px * var(--sp)));backdrop-filter:saturate(1.5) blur(calc(10px + 12px * var(--sp)));
}
/* Lumière douce qui suit la souris à l'intérieur de la barre */
.site-header > .container::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.075),transparent 62%);
  opacity:0;transition:opacity .5s var(--ease-out);
}
.site-header > .container:hover::before{opacity:1}
.brand{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--color-text);min-height:44px;border-radius:var(--radius-sm)}
.brand img{display:block;height:calc(30px - 3px * var(--sp, 0));width:auto}
.brand--footer img{height:42px}
@media (max-width:400px){.brand img{height:26px}}

.nav{position:relative;display:flex;align-items:center;margin-left:clamp(.25rem,1.5vw,1.5rem)}
.nav > ul{position:relative;z-index:1;display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0}
.nav a,.nav-trigger{
  position:relative;display:inline-flex;white-space:nowrap;align-items:center;gap:.35rem;min-height:44px;
  padding:.5rem clamp(.6rem,.9vw,.95rem);border-radius:var(--radius-pill);
  font:500 var(--text-sm)/1 var(--font-body);letter-spacing:0;color:var(--color-text-2);text-decoration:none;background:none;border:0;cursor:pointer;
  transition:color .35s var(--ease-out),letter-spacing .45s var(--ease-out);
}
.nav > ul > li > a:hover,.nav-trigger:hover,.nav-trigger[aria-expanded="true"],.nav > ul > li > a[aria-current="page"],.nav-trigger.is-current{color:var(--color-text)}
.nav > ul > li > a:hover,.nav-trigger:hover{letter-spacing:.012em}
.nav a.nav-accent{color:#19E3C0}
.nav a.nav-accent:hover,.nav a.nav-accent[aria-current="page"]{color:#5EF2D8}
/* Repli sans JavaScript : simple fond au survol */
.no-js .nav > ul > li > a:hover,.no-js .nav-trigger:hover{background:rgba(255,255,255,.06)}
/* Capsule active (dessinée par clip-path, déplacée par kd-site.js) */
.nav-pill{
  position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:var(--radius-pill);
  background:
    linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.16)) top/100% 1px no-repeat,
    linear-gradient(180deg,rgba(255,255,255,.115),rgba(255,255,255,.045));
  clip-path:inset(0 100% 0 0 round 999px);opacity:0;transition:opacity .35s var(--ease-out);
}
.nav-pill.is-visible{opacity:1}
/* Libellé : décalage magnétique + bascule typographique au survol */
.nav-label{display:inline-grid;overflow:hidden;line-height:1.25;transform:translate3d(var(--tx,0),var(--ty,0),0);transition:transform .45s var(--ease-out)}
.nav-label > span{grid-area:1/1;transition:transform .5s var(--ease-out),opacity .5s var(--ease-out)}
.nav-label > span + span{transform:translateY(105%);opacity:0}
.nav a:hover .nav-label > span:first-child,.nav-trigger:hover .nav-label > span:first-child{transform:translateY(-105%);opacity:0}
.nav a:hover .nav-label > span + span,.nav-trigger:hover .nav-label > span + span{transform:none;opacity:1}
.nav-trigger svg{width:12px;height:12px;transition:transform .45s var(--ease-out)}
.nav-trigger[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-item{position:static}  /* le méga-menu se centre sous la navigation */
.mega{
  position:absolute;top:calc(100% + 14px);left:50%;translate:-50% 0;width:min(860px,92vw);
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;padding:1.5rem;
  background:#15181D;border:1px solid var(--color-border-strong);border-radius:calc(var(--radius-lg) + 4px);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,var(--shadow-elevated);
  -webkit-backdrop-filter:saturate(1.4) blur(24px);backdrop-filter:saturate(1.4) blur(24px);
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.985);transform-origin:50% 0;
  transition:opacity .3s var(--ease-out),transform .45s var(--ease-out),visibility 0s .3s;
}
.mega::before{content:"";position:absolute;inset:-16px 0 auto;height:16px} /* pont de survol */
.mega.is-open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.mega h3{font:500 var(--text-xs)/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--color-muted);margin:0 0 .75rem}
.mega ul{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.mega a{display:flex;width:100%;padding:.55rem .7rem;border-radius:var(--radius-sm);color:var(--color-text);transition:background-color .25s var(--ease-out),color .25s var(--ease-out),transform .35s var(--ease-out)}
.mega a:hover{background:rgba(255,255,255,.06);color:var(--color-primary-hi);transform:translateX(3px)}
.mega a[aria-current="page"]{color:var(--color-primary-hi)}

/* Bouton principal : dégradé à peine perceptible, lumière interne, halo qui suit le curseur */
.header-cta{
  position:relative;overflow:hidden;isolation:isolate;margin-left:clamp(.25rem,1vw,.75rem);white-space:nowrap;
  min-height:calc(var(--bar-h) - 14px - 6px * var(--sp));padding-inline:1.15rem 1rem;
  background-image:linear-gradient(180deg,#F66A37,#EE5520);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(0,0,0,.12),0 10px 26px -14px rgb(241 90 36 / .9);
}
.header-cta::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(90px circle at var(--bx,50%) var(--by,50%),rgba(255,255,255,.34),transparent 70%);
  opacity:0;transition:opacity .4s var(--ease-out);
}
.header-cta:hover::after{opacity:1}
.header-cta:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -1px 0 rgba(0,0,0,.12),0 14px 30px -14px rgb(241 90 36 / 1)}
.header-cta svg{width:16px;height:16px;transition:transform .45s var(--ease-out)}
.header-cta:hover svg{transform:translateX(4px)}

/* Focus clavier élégant dans la barre */
.site-header :focus-visible{outline:2px solid var(--color-primary-hi);outline-offset:2px}

/* Bouton menu (mobile) : deux traits qui se croisent */
.menu-toggle{
  display:none;margin-left:auto;width:44px;height:44px;flex:none;border-radius:var(--radius-pill);
  border:1px solid var(--color-border-strong);background:rgba(255,255,255,.05);color:var(--color-text);
  align-items:center;justify-content:center;cursor:pointer;transition:background-color .3s var(--ease-out)
}
.menu-toggle:hover{background:rgba(255,255,255,.09)}
.menu-toggle span{position:relative;display:block;width:18px;height:10px}
.menu-toggle span::before,.menu-toggle span::after{
  content:"";position:absolute;left:0;width:100%;height:1.5px;border-radius:2px;background:currentColor;
  transition:transform .5s var(--ease-out),top .3s var(--ease-out) .18s,width .4s var(--ease-out)
}
.menu-toggle span::before{top:0}
.menu-toggle span::after{top:calc(100% - 1.5px);width:70%}
.menu-toggle[aria-expanded="true"] span::before,.menu-toggle[aria-expanded="true"] span::after{top:calc(50% - .75px);width:100%;transition:top .25s var(--ease-out),transform .5s var(--ease-out) .14s,width .3s var(--ease-out)}
.menu-toggle[aria-expanded="true"] span::before{transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] span::after{transform:rotate(-45deg)}

/* Menu mobile plein écran : ouverture en cercle depuis le bouton, liens en cascade */
.mobile-menu{
  position:fixed;inset:0;z-index:99;overflow-y:auto;overscroll-behavior:contain;
  padding:calc(var(--header-h) + clamp(1.5rem,6vh,3rem)) var(--gutter) 2.5rem;
  background:
    linear-gradient(rgba(237,233,225,.035) 1px,transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg,rgba(237,233,225,.035) 1px,transparent 1px) 0 0/40px 40px,
    #0E1013;
  clip-path:circle(0 at var(--ox,calc(100% - 48px)) var(--oy,44px));visibility:hidden;
  transition:clip-path .55s cubic-bezier(.7,0,.2,1),visibility 0s .55s;
}
.mobile-menu.is-open{clip-path:circle(150vmax at var(--ox,calc(100% - 48px)) var(--oy,44px));visibility:visible;transition:clip-path .6s var(--ease-out),visibility 0s}
.mobile-menu > nav{counter-reset:m;max-width:40rem;margin-inline:auto}
.mobile-menu > nav > *{opacity:0;transform:translateY(18px);transition:opacity .2s var(--ease-out),transform .2s var(--ease-out)}
.mobile-menu.is-open > nav > *{opacity:1;transform:none;transition:opacity .45s var(--ease-out),transform .55s var(--ease-out);transition-delay:calc(140ms + var(--i,0) * 50ms)}
.mobile-menu details{border-bottom:1px solid var(--color-border)}
.mobile-menu summary,.mobile-menu > nav > a:not(.btn){
  counter-increment:m;display:grid;grid-template-columns:2.6rem 1fr auto;align-items:baseline;min-height:64px;padding:.7rem 0;
  font:700 clamp(1.75rem,7.5vw,2.6rem)/1.05 var(--font-display);font-stretch:112%;letter-spacing:-.025em;
  list-style:none;cursor:pointer;text-decoration:none;color:var(--color-text);
}
.mobile-menu summary::before,.mobile-menu > nav > a:not(.btn)::before{
  content:counter(m,decimal-leading-zero);font:500 .75rem/1 var(--font-mono);letter-spacing:.08em;color:var(--color-muted);font-stretch:100%;transform:translateY(-.55em)
}
.mobile-menu > nav > a:not(.btn){border-bottom:1px solid var(--color-border)}
.mobile-menu > nav > a.nav-accent{color:#19E3C0}
.mobile-menu summary::-webkit-details-marker{display:none}
.mobile-menu summary::after{content:"+";align-self:center;font:300 1.75rem/1 var(--font-body);color:var(--color-muted);transition:transform .4s var(--ease-out)}
.mobile-menu details[open] summary::after{transform:rotate(45deg)}
.mobile-menu ul{list-style:none;margin:0 0 1.25rem 2.6rem;padding:0}
.mobile-menu li a{display:flex;align-items:center;min-height:44px;color:var(--color-text-2);text-decoration:none;font-size:1.05rem}
.mobile-menu li a:hover{color:var(--color-text)}
.mobile-meta{display:flex;flex-wrap:wrap;gap:.35rem 1.25rem;margin:2rem 0 0;font:500 .8rem/1.6 var(--font-mono);letter-spacing:.04em;color:var(--color-muted)}
.mobile-meta a{color:var(--color-text-2);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.mobile-meta span{flex-basis:100%}
.mobile-menu .btn{margin-top:1.5rem;width:100%;min-height:56px;font-size:1rem}
@media (max-width:1060px){
  .nav,.header-cta{display:none}
  .menu-toggle{display:inline-flex}
  .site-header > .container{width:calc(100% - 2*var(--gutter));justify-content:space-between}
}
@media (prefers-reduced-motion:reduce){
  .site-header *,.site-header *::before,.site-header *::after,.mobile-menu,.mobile-menu *{transition-duration:.01ms !important;transition-delay:0s !important}
  .nav-label{transform:none}
  .nav a:hover .nav-label > span:first-child,.nav-trigger:hover .nav-label > span:first-child{transform:none;opacity:1}
  .nav a:hover .nav-label > span + span,.nav-trigger:hover .nav-label > span + span{opacity:0}
  .mobile-menu{clip-path:none;opacity:0}
  .mobile-menu.is-open{opacity:1}
}

/* ---------- 7. Sections ---------- */
.section{position:relative;padding-block:var(--space-xl)}
.section--paper{background:var(--color-paper);color:var(--color-ink);color-scheme:light}
/* Fond beige : papier de plan (tuile sans raccord : pâte crème, fibres, trame 5 mm / 1 cm / 5 cm),
   avec un très léger assombrissement des bords comme une feuille posée sur la table */
.section--paper{
  background-color:var(--color-paper);
  background-image:radial-gradient(ellipse 120% 90% at 50% 45%,transparent 58%,rgba(110,92,62,.075) 100%),url("../images/refonte/papier-plan.webp");
  background-size:100% 100%,600px 600px;background-position:center,center top;
}
/* Logo Kataldivision en noir, à 20 % d'opacité, intégré au fond beige */
.section--paper{isolation:isolate}
.section--paper::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  right:max(var(--gutter),(100% - var(--container)) / 2);bottom:clamp(1.25rem,3vw,2.5rem);
  width:min(46rem,58%);aspect-ratio:287.42/51.56;
  background:url("../images/refonte/logo-kataldivision-noir.svg") no-repeat right bottom/contain;
  opacity:.2;
}
@media (max-width:640px){.section--paper::after{width:calc(100% - 2*var(--gutter));bottom:1rem}}
@media print{.section--paper::after{display:none}}
.section--paper .lead{color:var(--color-ink-2)}
.section--paper .eyebrow{color:var(--color-ink-2)}
.section--paper .section-index{color:var(--color-ink-2)}
.section--paper .section-index b{color:var(--color-primary-ink)}
.section--surface{background:var(--color-surface)}
.section-head{display:grid;gap:1.25rem;margin-bottom:clamp(2.5rem,6vw,4.5rem);max-width:62rem}
.section-head--split{max-width:none;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:end;gap:2rem 4rem}
@media (max-width:860px){.section-head--split{grid-template-columns:1fr}}
/* Repère technique façon plan : numéro de section + trait de cote */
.section-index{display:flex;align-items:center;gap:.75rem;font:500 var(--text-xs)/1 var(--font-mono);letter-spacing:.12em;color:var(--color-muted)}
.section-index b{color:var(--color-primary);font-weight:500}
.section-index i{flex:1;max-width:120px;height:1px;background:currentColor;opacity:.35;position:relative}
.section-index i::before,.section-index i::after{content:"";position:absolute;top:-4px;width:1px;height:9px;background:currentColor}
.section-index i::before{left:0}.section-index i::after{right:0}
.blueprint{
  background-image:
    linear-gradient(var(--color-border) 1px,transparent 1px),
    linear-gradient(90deg,var(--color-border) 1px,transparent 1px);
  background-size:72px 72px;background-position:-1px -1px;
}

/* ---------- 8. Hero 3D ---------- */
.hero{
  position:relative;min-height:max(680px,100svh);display:grid;align-items:end;overflow:hidden;isolation:isolate;
  padding:calc(var(--header-h) + 2rem) 0 clamp(2rem,5vh,3.5rem);
  background:
    radial-gradient(70% 60% at 72% 46%,rgba(241,90,36,.10),transparent 60%),
    radial-gradient(60% 50% at 70% 60%,rgba(185,189,194,.10),transparent 70%),
    var(--color-background);
}
.hero::after{ /* sol infini qui reçoit la maquette */
  content:"";position:absolute;inset:auto 0 0;height:42%;z-index:-2;pointer-events:none;
  background:
    linear-gradient(to top,var(--color-background) 8%,transparent),
    linear-gradient(var(--color-border) 1px,transparent 1px) 0 0/80px 80px,
    linear-gradient(90deg,var(--color-border) 1px,transparent 1px) 0 0/80px 80px;
  transform:perspective(600px) rotateX(58deg);transform-origin:bottom;opacity:.55;
}
.hero-stage{position:absolute;inset:0;z-index:-1}
.hero{--dock-h:10.5rem}
.hero-stage #viewer3d,.hero-stage .hero-poster{position:absolute;inset:var(--header-h) 0 calc(var(--dock-h) + 2.5rem) 36vw}
.hero-stage #viewer3dCanvas{position:absolute;inset:0;touch-action:pan-y}
.hero-stage #viewer3dCanvas canvas{width:100%!important;height:100%!important}
.hero-stage #viewer3d,.hero-poster{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 92%,transparent),linear-gradient(to top,transparent,#000 14%);
  mask-image:linear-gradient(90deg,transparent,#000 22%,#000 92%,transparent),linear-gradient(to top,transparent,#000 14%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
.hero-stage .hero-poster{width:calc(100% - 36vw);height:calc(100% - var(--header-h) - var(--dock-h) - 2.5rem);object-fit:contain;transition:opacity .9s var(--ease)}
.hero.is-3d-ready .hero-poster{opacity:0}
.hero #viewer3d{opacity:0;transition:opacity .9s var(--ease)}
.hero.is-3d-ready #viewer3d{opacity:1}
.hero-stage .kd-v12-modes,.hero-stage .kd-v12-presets,.hero-stage .legacy{display:none!important}
.hero-content{position:relative;display:grid;align-items:end;gap:2.5rem}
.hero-copy{max-width:min(40rem,46vw);display:grid;gap:1.5rem}
.hero-copy h1{font-size:clamp(2.5rem,5vw,5rem)}
.hero-copy h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1.5px var(--color-text);display:block}
.hero-copy .lead{color:var(--color-text-2);max-width:36rem}
.hero-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;font:500 var(--text-xs)/1.4 var(--font-mono);letter-spacing:.06em;color:var(--color-muted);text-transform:uppercase}
.hero-meta span{display:inline-flex;align-items:center;gap:.5rem}
.hero-meta span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--color-primary)}

/* Pupitre « mini-configurateur » posé sur la scène 3D */
.studio{
  width:min(340px,100%);padding:1.25rem;border-radius:var(--radius-lg);
  background:var(--glass);border:1px solid var(--color-border);box-shadow:var(--shadow-elevated);
  backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);
  display:grid;gap:1rem;
}
.studio-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem 1rem;flex-wrap:wrap}
@media (max-width:380px){.studio .seg{grid-auto-flow:row;grid-template-columns:1fr 1fr;border-radius:var(--radius-md)}}
.studio-head p{font:500 var(--text-xs)/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-2)}
.live{display:inline-flex;align-items:center;gap:.4rem;font:500 .75rem/1 var(--font-mono);color:var(--color-success)}
.live::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 0 currentColor;animation:kd-live 2s infinite}
@keyframes kd-live{0%{box-shadow:0 0 0 0 rgb(127 182 133 / .6)}70%{box-shadow:0 0 0 8px rgb(127 182 133 / 0)}100%{box-shadow:0 0 0 0 rgb(127 182 133 / 0)}}
.studio fieldset{border:0;margin:0;padding:0;min-width:0}
.studio legend,.studio label.studio-label{display:flex;justify-content:space-between;gap:.75rem;width:100%;margin-bottom:.45rem;font-size:var(--text-xs);color:var(--color-text-2)}
.studio output{font-family:var(--font-mono);color:var(--color-text)}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;border-radius:var(--radius-pill);background:rgba(0,0,0,.28);border:1px solid var(--color-border)}
.seg label{position:relative;display:flex}
.seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg span{flex:1;display:flex;align-items:center;justify-content:center;min-height:38px;padding:0 .5rem;border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:500;color:var(--color-text-2);transition:background-color .2s,color .2s;text-align:center}
.seg input:checked + span{background:var(--color-text);color:var(--color-ink)}
.seg input:focus-visible + span{outline:2px solid var(--color-primary);outline-offset:2px}
.range{width:100%;height:36px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;accent-color:var(--color-primary)}
.range::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(90deg,var(--color-primary) var(--fill,50%),rgba(255,255,255,.18) var(--fill,50%))}
.range::-moz-range-track{height:3px;border-radius:3px;background:rgba(255,255,255,.18)}
.range::-moz-range-progress{height:3px;border-radius:3px;background:var(--color-primary)}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-9.5px;border-radius:50%;background:#fff;border:5px solid var(--color-primary);box-shadow:0 2px 8px rgb(0 0 0 / .4)}
.range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:5px solid var(--color-primary)}
.swatches{display:flex;gap:.5rem;flex-wrap:wrap}
.swatches label{position:relative;width:44px;height:44px;display:grid;place-items:center}
.swatches input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.swatches span{width:30px;height:30px;border-radius:50%;background:var(--sw);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);transition:transform .2s var(--ease),box-shadow .2s}
.swatches input:checked + span{box-shadow:0 0 0 2px var(--color-background),0 0 0 4px var(--color-primary);transform:scale(1.04)}
.swatches input:focus-visible + span{outline:2px solid var(--color-primary);outline-offset:4px}
.studio .btn{width:100%;white-space:normal;text-align:center}
.studio-note{font-size:.75rem;color:var(--color-muted);line-height:1.45}
@media (min-width:1101px){
  .hero-content > .studio{
    width:100%;min-height:var(--dock-h);padding:1rem 1.25rem 1.1rem;
    grid-template-columns:minmax(16rem,1.2fr) repeat(3,minmax(7rem,1fr)) auto auto;
    align-items:end;gap:.75rem 1.75rem;
  }
  .studio-head{grid-column:1/-1}
  .studio .studio-note{display:none}
  .studio-label,.studio legend{white-space:nowrap}
  .studio .swatches{flex-wrap:nowrap;margin-block:-4px}
  .studio .btn{width:auto}
}
/* Écrans peu hauts (portables 768–820 px) : le pupitre reste visible sans défiler */
@media (min-width:1101px) and (max-height:860px){
  .hero{padding-top:calc(var(--header-h) + 1rem)}
  .hero-content{gap:1.5rem}
  .hero-copy{gap:1rem}
  .hero-copy h1{font-size:clamp(2.5rem,4.2vw,4rem)}
}
/* Pupitre sur deux lignes : type + dimensions, puis teinte + bouton (aucun libellé ne se chevauche) */
@media (min-width:1101px){
  .hero{--dock-h:13.5rem}
  .hero-content > .studio{grid-template-columns:minmax(17rem,1.3fr) repeat(3,minmax(9.5rem,1fr))}
  .studio > fieldset:last-of-type{grid-column:1/3}
  .studio #studioCta{grid-column:3/5;justify-self:end}
}
.view-toggle{position:absolute;right:var(--gutter);top:calc(var(--header-h) + 1.25rem);width:max-content;z-index:2;display:flex;gap:4px;padding:4px;border-radius:var(--radius-pill);background:var(--glass);border:1px solid var(--color-border);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.view-toggle button{min-height:40px;padding:0 1rem;border-radius:var(--radius-pill);border:0;background:none;color:var(--color-text-2);font-size:var(--text-xs);font-weight:500}
.view-toggle button[aria-pressed="true"]{background:var(--color-text);color:var(--color-ink)}
.explore-3d{display:none}
@media (max-width:1100px){
  .hero{display:flex;flex-direction:column;align-items:stretch;padding-bottom:2rem}
  .hero-stage{position:relative;inset:auto;height:min(58svh,520px);margin-top:.5rem;order:2}
  .hero-content{display:contents}
  .hero-copy,.hero-content > .studio{width:auto;min-width:0;margin-inline:var(--gutter)}
  .hero-stage #viewer3d,.hero-stage .hero-poster{inset:0}
  .hero-stage .hero-poster{width:100%;height:100%}
  .hero-copy{max-width:none}
  .hero-stage #viewer3d,.hero-poster{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 85%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 85%,transparent)}
  .hero-content > .hero-copy{order:1}
  .hero-content > .studio{order:3}
  .view-toggle{top:auto;bottom:1rem;right:50%;translate:50% 0}
  .explore-3d{display:inline-flex;position:absolute;left:50%;top:1rem;translate:-50% 0;z-index:2;width:max-content}
  .hero-stage.is-exploring #viewer3dCanvas{touch-action:none}
}

/* ---------- 9. Cartes ---------- */
/* Processus en 6 étapes */
.process{--steps:6;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--steps),minmax(0,1fr));gap:0;border-top:1px solid var(--color-border-ink);counter-reset:step}
.process li{list-style:none;position:relative;padding:1.75rem 1.25rem 0 0;display:grid;gap:.75rem;align-content:start}
.process li::before{ /* jauge qui se remplit au scroll */
  content:"";position:absolute;top:-1px;left:0;height:3px;width:100%;background:var(--color-primary);
  transform:scaleX(var(--p,0));transform-origin:left;transition:transform .6s var(--ease-out)
}
.process .num{font:500 var(--text-xs)/1 var(--font-mono);color:var(--color-primary-ink);letter-spacing:.08em}
.process h3{font-size:clamp(1.05rem,1.25vw,1.3rem);overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
/* Écrans moyens : 2 rangées de 3 étapes, pour que les mots longs (« Approvisionnement ») tiennent dans leur colonne */
/* Autant de colonnes que d'étapes : pas de vide à droite quand il n'y en a que 3, 4 ou 5 */
.process:has(> li:nth-child(3):last-child){--steps:3}
.process:has(> li:nth-child(4):last-child){--steps:4}
.process:has(> li:nth-child(5):last-child){--steps:5}
@media (min-width:1001px) and (max-width:1320px){
  .process:has(> li:nth-child(5)){--steps:3;border-top:0;row-gap:2.5rem}
  .process:has(> li:nth-child(5)) li{border-top:1px solid var(--color-border-ink)}
}
.process p{font-size:var(--text-sm);color:var(--color-ink-2);line-height:1.55}
@media (max-width:1000px){
  .process{grid-template-columns:1fr;border-top:0;border-left:1px solid var(--color-border-ink);margin-left:.5rem}
  .process li{padding:0 0 2rem 1.5rem}
  .process li::before{top:0;left:-2px;width:3px;height:100%;transform:scaleY(var(--p,0));transform-origin:top}
}
.process-intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:2rem 4rem;align-items:end;margin-bottom:clamp(2.5rem,5vw,4rem)}
@media (max-width:860px){.process-intro{grid-template-columns:1fr}}

/* Expertises */
.expertises{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(.75rem,1.5vw,1.25rem)}
.x-card{
  position:relative;grid-column:span 4;min-height:420px;border-radius:var(--radius-lg);overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;justify-content:flex-end;gap:.6rem;padding:clamp(1.25rem,2.4vw,2rem);
  color:var(--color-text);text-decoration:none;background:var(--color-surface-2);border:1px solid var(--color-border);
  transition:transform .5s var(--ease-out),border-color .3s var(--ease),box-shadow .5s var(--ease-out);
}
.x-card--wide{grid-column:span 8}
.x-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform:scale(1.02);transition:transform 1.2s var(--ease-out),filter .6s var(--ease)}
.x-card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(10,12,15,.92) 0%,rgba(10,12,15,.55) 42%,rgba(10,12,15,.08) 75%)}
.x-card .x-tag{position:absolute;top:1.25rem;left:1.25rem;font:500 .75rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;padding:.45rem .7rem;border-radius:var(--radius-pill);background:rgba(14,16,19,.55);border:1px solid var(--color-border);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.x-card h3{font-size:clamp(1.5rem,2.4vw,2.15rem)}
.x-card p{color:var(--color-text-2);max-width:38ch;font-size:var(--text-sm)}
.x-card .x-go{position:absolute;top:1.1rem;right:1.1rem;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--color-text);color:var(--color-ink);transform:scale(.85) rotate(-45deg);opacity:0;transition:transform .45s var(--ease-out),opacity .3s}
.x-card .x-go svg{width:18px;height:18px}
.x-card:hover,.x-card:focus-visible{transform:translateY(-4px);border-color:var(--color-border-strong);box-shadow:var(--shadow-elevated)}
.x-card:hover img,.x-card:focus-visible img{transform:scale(1.07)}
.x-card:hover .x-go,.x-card:focus-visible .x-go{opacity:1;transform:none}
.x-links{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:clamp(1.5rem,3vw,2rem)}
.chip{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.5rem 1rem;border-radius:var(--radius-pill);border:1px solid var(--color-border-strong);text-decoration:none;color:var(--color-text-2);font-size:var(--text-sm);transition:color .2s,border-color .2s,background-color .2s}
.chip:hover{color:var(--color-text);border-color:var(--color-primary);background:var(--color-primary-soft)}
@media (max-width:1000px){.x-card,.x-card--wide{grid-column:span 6}}
@media (max-width:640px){.x-card,.x-card--wide{grid-column:1/-1;min-height:360px}}

/* Section configurateur */
.cfg{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.cfg-visual{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-border);background:var(--color-surface-2);box-shadow:var(--shadow-elevated);aspect-ratio:16/11}
.cfg-visual img{width:100%;height:100%;object-fit:cover}
.cfg-visual .hud{position:absolute;inset:auto 1rem 1rem 1rem;display:flex;flex-wrap:wrap;gap:.5rem}
.hud span{display:inline-flex;gap:.5rem;padding:.45rem .7rem;border-radius:var(--radius-pill);background:var(--glass);border:1px solid var(--color-border);font:500 .75rem/1 var(--font-mono);color:var(--color-text);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hud b{color:var(--color-primary);font-weight:500}
.features{padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--color-border);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;margin:2rem 0}
.features li{list-style:none;background:var(--color-background);padding:1.1rem 1.2rem;display:grid;gap:.3rem}
.features b{font:600 var(--text-sm)/1.2 var(--font-body)}
.features span{font-size:var(--text-xs);color:var(--color-muted);line-height:1.5}
.section--paper .features{background:var(--color-border-ink);border-color:var(--color-border-ink)}
.section--paper .features li{background:#fff}
.section--paper .features span{color:var(--color-ink-2)}
@media (max-width:960px){.cfg{grid-template-columns:1fr}.cfg-visual{order:-1}}
@media (max-width:480px){.features{grid-template-columns:1fr}}

/* Réalisations : grille éditoriale asymétrique */
.projects{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(.75rem,1.5vw,1.25rem)}
.project{grid-column:span 5;display:grid;gap:1rem;align-content:start;color:inherit;text-decoration:none}
.project:nth-child(4n+1){grid-column:span 7}
.project:nth-child(4n+2){grid-column:span 5;margin-top:clamp(0rem,8vw,7rem)}
.project:nth-child(4n+3){grid-column:span 5}
.project:nth-child(4n+4){grid-column:span 7;margin-top:clamp(0rem,4vw,3rem)}
.project-media{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3;background:var(--color-paper-2)}
.project-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.project:hover .project-media img{transform:scale(1.05)}
.project-meta{display:flex;flex-wrap:wrap;gap:.4rem 1rem;font:500 .75rem/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--color-ink-2)}
.project h3{font-size:clamp(1.25rem,2vw,1.6rem)}
.project dl{display:grid;grid-template-columns:auto 1fr;gap:.25rem 1rem;margin:0;font-size:var(--text-sm);color:var(--color-ink-2)}
.project dt{color:var(--color-ink);font-weight:500}
.project dd{margin:0}
/* Emplacement à compléter : visible uniquement tant que les données réelles manquent */
.is-todo{outline:1.5px dashed var(--color-primary-ink);outline-offset:4px}
.todo-badge{position:absolute;top:1rem;left:1rem;padding:.4rem .65rem;border-radius:var(--radius-pill);background:var(--color-primary-ink);color:#fff;font:500 .7rem/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase}
.project-media.is-todo{display:grid;place-items:center;background:repeating-linear-gradient(135deg,var(--color-paper-2) 0 12px,var(--color-paper) 12px 24px)}
.project-media.is-todo p{max-width:24ch;text-align:center;font:500 var(--text-xs)/1.5 var(--font-mono);color:var(--color-ink-2)}
@media (max-width:860px){.project,.project:nth-child(n){grid-column:1/-1;margin-top:0}}

/* Chiffres clés */
.figures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--color-border)}
.figure{padding:2rem 1.5rem 0 0;display:grid;gap:.5rem;border-right:1px solid var(--color-border);padding-left:1.5rem}
.figure:first-child{padding-left:0}
.figure:last-child{border-right:0}
.figure b{font:700 clamp(2.6rem,5vw,4.5rem)/1 var(--font-display);font-stretch:118%;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.figure span{color:var(--color-text-2);font-size:var(--text-sm)}
.figure.is-todo b{color:var(--color-muted)}
@media (max-width:860px){.figures{grid-template-columns:repeat(2,1fr)}.figure{padding:1.5rem 1rem 1.5rem 0;border-right:0;border-bottom:1px solid var(--color-border)}.figure:nth-child(2n){padding-left:1rem;border-left:1px solid var(--color-border)}}

/* Zone d'intervention */
.zone{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.zone-map{position:relative;aspect-ratio:1;max-width:520px;width:100%;justify-self:center}
.zone-map svg{width:100%;height:100%}
.zone-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem 2rem;margin:2rem 0 0;padding:0;list-style:none}
.zone-list li{display:flex;gap:.6rem;align-items:baseline;padding-bottom:.75rem;border-bottom:1px solid var(--color-border-ink)}
.zone-list b{font:500 var(--text-xs)/1 var(--font-mono);color:var(--color-primary-ink)}
.sites{display:grid;gap:1rem;margin-top:2rem}
.site{display:grid;grid-template-columns:auto 1fr;gap:.25rem 1rem;padding:1.1rem 1.25rem;border-radius:var(--radius-md);background:#fff;box-shadow:var(--shadow-paper)}
.site svg{grid-row:span 2;width:22px;height:22px;color:var(--color-primary-ink);margin-top:.15rem}
.site b{font-weight:600}
.site span{color:var(--color-ink-2);font-size:var(--text-sm)}
@media (max-width:860px){.zone{grid-template-columns:1fr}}

/* CTA final */
.cta-band{position:relative;overflow:hidden;border-radius:var(--radius-lg);padding:clamp(2rem,6vw,5rem);background:linear-gradient(135deg,var(--color-surface-2),var(--color-surface));border:1px solid var(--color-border);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:2rem 4rem;align-items:center}
.cta-band::before{content:"";position:absolute;right:-12%;top:-30%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(241,90,36,.22),transparent 65%);pointer-events:none}
.cta-actions{display:grid;gap:.75rem}
.cta-actions a{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:64px;padding:1rem 1.25rem;border-radius:var(--radius-md);border:1px solid var(--color-border);background:rgba(255,255,255,.03);text-decoration:none;transition:border-color .2s,background-color .2s,transform .3s var(--ease-out)}
.cta-actions a:hover{border-color:var(--color-primary);background:var(--color-primary-soft);transform:translateX(4px)}
.cta-actions small{display:block;color:var(--color-muted);font-size:var(--text-xs);margin-top:.15rem}
.cta-actions svg{width:20px;height:20px;flex:none;color:var(--color-primary)}
@media (max-width:860px){.cta-band{grid-template-columns:1fr}}

/* FAQ */
.faq{display:grid;border-top:1px solid var(--color-border-ink)}
.faq details{border-bottom:1px solid var(--color-border-ink)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:64px;padding:1rem 0;cursor:pointer;list-style:none;font:600 var(--text-lg)/1.3 var(--font-body)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details > div{padding:0 0 1.5rem;max-width:70ch;color:var(--color-ink-2)}
/* FAQ sur fond sombre : rompt la suite de sections beiges */
.section--faq .faq{border-top-color:var(--color-border-strong)}
.section--faq .faq details{border-bottom-color:var(--color-border-strong)}
.section--faq .faq summary{color:#EEEBE5;transition:color .25s var(--ease)}
.section--faq .faq summary:hover,.section--faq .faq details[open] summary{color:#a78644}
.section--faq .faq details > div{color:rgba(238,235,229,.72)}
.section--faq .faq a{color:#19E3C0}
.section--faq + .section{border-top:1px solid var(--color-border)}

/* ---------- 10. Formulaires ---------- */
.form{display:grid;gap:1.1rem}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem}
@media (max-width:640px){.form-row{grid-template-columns:1fr}}
.field{display:grid;gap:.4rem}
.field label{font-size:var(--text-sm);font-weight:500}
.field label small{color:var(--color-muted);font-weight:400}
.input{width:100%;min-height:50px;padding:.8rem 1rem;border-radius:var(--radius-sm);border:1px solid var(--color-border-strong);background:rgba(255,255,255,.03);color:var(--color-text);transition:border-color .2s,box-shadow .2s,background-color .2s}
textarea.input{min-height:140px;resize:vertical}
.input:hover{border-color:rgba(238,235,229,.32)}
.input:focus{outline:0;border-color:var(--color-primary);box-shadow:0 0 0 4px var(--color-primary-soft);background:rgba(255,255,255,.05)}
.field.is-invalid .input{border-color:var(--color-danger)}
.field-error{font-size:var(--text-xs);color:var(--color-danger);min-height:1em}
.check{display:flex;gap:.75rem;align-items:flex-start;font-size:var(--text-sm);color:var(--color-text-2)}
.check input{width:20px;height:20px;margin-top:.15rem;accent-color:var(--color-primary);flex:none}
.hp{position:absolute!important;left:-9999px!important}
.form-status{padding:1rem 1.25rem;border-radius:var(--radius-sm);font-size:var(--text-sm)}
.form-status.is-success{background:rgb(127 182 133 / .14);color:var(--color-success);border:1px solid rgb(127 182 133 / .35)}
.form-status.is-error{background:rgb(255 107 107 / .12);color:var(--color-danger);border:1px solid rgb(255 107 107 / .35)}
.btn[aria-busy="true"]{pointer-events:none;opacity:.75}
.btn[aria-busy="true"]::after{content:"";width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:kd-spin .7s linear infinite}
@keyframes kd-spin{to{transform:rotate(360deg)}}
.section--paper .input{background:#fff;color:var(--color-ink);border-color:var(--color-border-ink)}
.section--paper .check{color:var(--color-ink-2)}

/* ---------- Textures de fond des zones sombres (alternance : calque millimétré / acier brossé) ----------
   Posées par classe sur les en-têtes, sections sombres et pied de page. Fichiers SVG légers, mis en cache. */
.tx-calque{background-image:linear-gradient(rgba(237,233,225,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(237,233,225,.045) 1px,transparent 1px),linear-gradient(rgba(237,233,225,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(237,233,225,.018) 1px,transparent 1px);background-size:40px 40px,40px 40px,8px 8px,8px 8px;background-position:center top}
.tx-acier{background-image:linear-gradient(180deg,rgba(237,233,225,.025),transparent 55%),url("../images/refonte/tx-acier.svg");background-size:auto,400px 400px}
.section.tx-calque,.section.tx-acier,.site-footer.tx-acier{background-color:var(--color-background)}
.section--surface.tx-calque,.section--surface.tx-acier{background-color:var(--color-surface)}
@media print{.tx-calque,.tx-acier{background-image:none}}

/* ---------- Page intérieure : en-tête, fil d'Ariane ---------- */
.page-hero{position:relative;padding:calc(var(--header-h) + clamp(3rem,8vw,6rem)) 0 clamp(3rem,6vw,5rem);overflow:hidden;isolation:isolate}
.page-hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.page-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(14,16,19,.94) 0%,rgba(14,16,19,.75) 48%,rgba(14,16,19,.35)),linear-gradient(to top,var(--color-background),transparent 40%)}
.page-hero .lead{margin-top:1.5rem}
.page-hero .btn-row{margin-top:2rem}
.breadcrumb{margin-bottom:2rem}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0;font:500 var(--text-xs)/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted)}
.breadcrumb li + li::before{content:"/";margin-right:.5rem;opacity:.5}
.breadcrumb a{text-decoration:none}
.page-hero--short{padding-bottom:clamp(2rem,4vw,3rem)}
.page-hero--short::before{background:radial-gradient(60% 80% at 85% 0%,rgba(241,90,36,.12),transparent 60%)}
/* En-tête « esquisse de charpente » (bureau d'études) : trame de calque + dessin animé (js/kd-blueprint.js) */
.page-hero--blueprint{min-height:clamp(34rem,78vh,48rem);display:flex;flex-direction:column;justify-content:center;
  background-image:linear-gradient(rgba(237,233,225,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(237,233,225,.035) 1px,transparent 1px);
  background-size:32px 32px;background-position:center top}
.page-hero--blueprint::before{background:radial-gradient(55% 70% at 72% 55%,rgba(241,90,36,.10),transparent 70%),linear-gradient(to top,var(--color-background),transparent 22%)}
.kd-blueprint{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.kd-blueprint.is-ready{opacity:1}
@media (prefers-reduced-motion:reduce){.kd-blueprint{transition:none}}
/* Texte long (pages juridiques) */
.prose{max-width:46rem}
.prose h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin:2.75rem 0 1rem}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.15rem;margin:2rem 0 .75rem}
.prose p,.prose li{line-height:1.7;color:var(--color-ink-2)}
.prose p + p{margin-top:1rem}
.prose ul,.prose ol{padding-left:1.25rem;display:grid;gap:.5rem}
.prose a{color:var(--color-primary-ink);overflow-wrap:anywhere}
.prose p,.prose li{overflow-wrap:anywhere}
.prose blockquote{margin:1.25rem 0;padding:.25rem 0 .25rem 1.25rem;border-left:3px solid var(--color-primary);color:var(--color-ink-2);font-style:italic}
.todo-inline{display:inline-block;padding:.1rem .5rem;margin-right:.35rem;border-radius:var(--radius-pill);background:var(--color-primary-ink);color:#fff;font:500 .72rem/1.5 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;vertical-align:.1em}
/* Pages de contact */
.contact-split{align-items:start}
.contact-info h2{margin-top:1.25rem}
.contact-list{display:grid;gap:0;margin:2rem 0 0;border-top:1px solid var(--color-border)}
.contact-list > div{display:grid;grid-template-columns:8rem 1fr;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--color-border)}
.contact-list dt{font:500 var(--text-xs)/1.6 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--color-muted)}
.contact-list dd{margin:0}
.contact-list a{text-decoration:none}
.contact-list a:hover{color:var(--color-primary-hi)}
.form-card{padding:clamp(1.25rem,3vw,2rem);border-radius:var(--radius-lg);background:var(--color-surface-2);border:1px solid var(--color-border)}
select.input{appearance:none;-webkit-appearance:none;padding-right:2.75rem;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 1.3rem) 50%,calc(100% - .95rem) 50%;background-size:6px 6px;background-repeat:no-repeat}
select.input option{color:#111}
@media (max-width:480px){.contact-list > div{grid-template-columns:1fr;gap:.25rem}}
.breadcrumb a:hover{color:var(--color-text)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.cards-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
@media (max-width:960px){.cards-3{grid-template-columns:1fr}}
.card{padding:1.75rem;border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-paper);display:grid;gap:.75rem;align-content:start}
.card .num{font:500 var(--text-xs)/1 var(--font-mono);color:var(--color-primary-ink)}
.card p{color:var(--color-ink-2);font-size:var(--text-sm)}
.section:not(.section--paper) .card{background:var(--color-surface-2);border:1px solid var(--color-border)}
.section:not(.section--paper) .card p{color:var(--color-text-2)}
.section:not(.section--paper) .card .num{color:var(--color-primary)}
.checklist{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.checklist li{display:flex;gap:.75rem;align-items:baseline}
.checklist li::before{content:"";flex:none;width:8px;height:8px;border-radius:2px;background:var(--color-primary);transform:translateY(-1px)}

/* ---------- 11. Footer ---------- */
.site-footer{padding:clamp(4rem,8vw,6rem) 0 2rem;border-top:1px solid var(--color-border);background-color:var(--color-background)}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:2.5rem}
.footer-grid h2{font:500 var(--text-xs)/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--color-muted);margin-bottom:1rem}
.footer-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.footer-grid a{display:inline-flex;align-items:center;min-height:36px;color:var(--color-text-2);text-decoration:none;font-size:var(--text-sm)}
.footer-grid a:hover{color:var(--color-text)}
.footer-about p{color:var(--color-text-2);font-size:var(--text-sm);max-width:34ch;margin-top:1rem}
.footer-about address{font-style:normal;color:var(--color-text-2);font-size:var(--text-sm);margin-top:1.25rem;line-height:1.7}
.footer-about address a{min-height:0}
.socials{display:flex;gap:.5rem;margin-top:1.25rem}
.socials a{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--color-border-strong);color:var(--color-text);transition:background-color .2s,border-color .2s,color .2s}
.socials a:hover{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.socials svg{width:18px;height:18px}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:4rem;padding-top:1.5rem;border-top:1px solid var(--color-border);font-size:var(--text-xs);color:var(--color-muted)}
.footer-bottom a{color:inherit}
.site-footer .container{container-type:inline-size}
.footer-word{margin-top:3rem;font:800 10.4vw/.8 var(--font-display);font-size:10.4cqi;font-stretch:125%;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgb(0 231 255 / 20%);user-select:none;white-space:nowrap;overflow:hidden}
/* Survol (ordinateur) : le mot se décompose en particules et étincelles de soudure — js/kd-footer-sparks.js */
.footer-sparks{position:absolute;z-index:2;pointer-events:none;max-width:none;max-height:none}
/* Soudure prolongée : les pompiers (js/kd-footer-pompiers.js), théâtre de papier découpé */
.kdp-stage{position:absolute;z-index:3;pointer-events:none;overflow-x:clip;overflow-y:visible}
.kdp-defs{position:absolute;width:0;height:0;overflow:hidden}
.kdp-water,.kdp-hose,.kdp-strobe{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.kdp-hose{overflow:visible;visibility:hidden}
.kdp-strobe{opacity:0;transition:opacity .5s ease;mix-blend-mode:screen}
.kdp-piece{position:absolute;left:0;top:0;transform-origin:50% 100%;visibility:hidden;will-change:transform;
  filter:drop-shadow(1.5px 3px 0 rgba(0,0,0,.4)) drop-shadow(5px 12px 10px rgba(0,0,0,.5))}
.kdp-piece svg{display:block;width:100%;height:100%;max-width:none;overflow:visible}
.kdp-cloud{filter:drop-shadow(1px 2px 0 rgba(0,0,0,.25)) drop-shadow(3px 8px 8px rgba(0,0,0,.35))}
.kdp-tag{position:absolute;display:grid;gap:.15rem;padding:.75rem 1.1rem .7rem;min-width:15rem;text-align:center;
  background:#f5efe0 linear-gradient(transparent 0 calc(100% - 1px),rgba(0,0,0,.06) 0) 0 0/100% 1.1rem;color:#1b1c1e;
  font:500 .8rem/1.35 var(--font-body);box-shadow:1px 2px 0 rgba(0,0,0,.25),6px 14px 22px rgba(0,0,0,.45);
  clip-path:polygon(0 3%,4% 0,22% 2%,41% 0,63% 2%,82% 0,100% 2%,99% 30%,100% 62%,98% 100%,74% 98%,52% 100%,30% 98%,8% 100%,1% 97%,0 64%,1% 33%);
  transform:translate(-50%,10px) rotate(-3deg) scale(.7);opacity:0;transition:transform .45s cubic-bezier(.34,1.56,.64,1),opacity .3s}
.kdp-tag strong{font:800 .95rem/1.2 var(--font-display);font-stretch:112%;color:#b3121b;letter-spacing:.01em}
.kdp-tag b{font-variant-numeric:tabular-nums;color:#1f3f95}
.kdp-tape{position:absolute;left:50%;top:-.55rem;width:4.6rem;height:1.3rem;margin-left:-2.3rem;background:rgba(255,236,170,.75);transform:rotate(4deg);box-shadow:0 1px 2px rgba(0,0,0,.2)}
.kdp-tag.is-on{opacity:1;transform:translate(-50%,0) rotate(-3deg) scale(1)}
.kdp-tag.is-nudge{animation:kdp-nudge .55s ease}
.kdp-tag.is-off{animation:kdp-peel .9s ease-in forwards}
@keyframes kdp-nudge{25%{transform:translate(-50%,0) rotate(2deg) scale(1.05)}55%{transform:translate(-50%,0) rotate(-6deg) scale(1)}}
@keyframes kdp-peel{0%{transform:translate(-50%,0) rotate(-3deg)}30%{transform:translate(-50%,-6px) rotate(8deg)}100%{transform:translate(-30%,140px) rotate(38deg);opacity:0}}
@media (hover:hover) and (pointer:fine) and (min-width:1024px){
  .footer-word{transition:-webkit-text-stroke-color .6s ease}
  .footer-word:hover{cursor:crosshair}
  .footer-word.is-sparking{-webkit-text-stroke-color:rgb(0 231 255 / 6%)}
}
@media (max-width:1000px){.footer-grid{grid-template-columns:repeat(2,1fr)}.footer-about{grid-column:1/-1}}
@media (max-width:480px){.footer-grid{grid-template-columns:1fr}}

/* ---------- 12. Animations & préférences ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);transition-delay:var(--d,0s)}
.reveal.is-in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}
@media print{
  .site-header,.mobile-menu,.hero-stage,.studio,.site-footer .socials{display:none}
  body{background:#fff;color:#000}
}