/* ==========================================================================
   Adhéprint — système graphique (v2)
   Palette tirée de la façade de l'atelier (bardage anthracite et gris clair,
   enseigne bleue) et du logo. Une seule famille : Archivo (largeur variable).
   Signature : traits de coupe d'imprimeur et « passage de tête » (balayage
   bleu) sur les images qui apparaissent.
   ========================================================================== */
@font-face {
  font-family: "Archivo";
  src: url("../../fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("../../fonts/archivo-latin-ext-wdth-normal.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --encre: #14181c;        /* fonds les plus sombres */
  --anthracite: #23292e;   /* bardage de façade */
  --anthracite-2: #2f363c;
  --acier: #5b6268;        /* gris du logo, assombri pour le texte */
  --gris-doux: #8a9197;
  --bardage: #e8ebed;      /* bardage clair */
  --bardage-2: #f3f5f6;
  --papier: #ffffff;
  --bleu: #229ad6;         /* bleu du logo : graphismes, fonds sombres */
  --bleu-encre: #0b6ea6;   /* bleu lisible sur fond blanc (5,5:1) */
  --trait: #d3d8dc;
  --texte: #1c2125;
  --mousse: #2f5a43;       /* éco-responsable uniquement */
  --sauge: #e4ece6;
  --wrap: 1360px;
  --gut: clamp(20px, 4vw, 56px);
  --sec: clamp(88px, 11vw, 168px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --r-img: 4px;
  --r-panel: 10px;
  --r-btn: 999px;
  --hdr-h: 78px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0; background: var(--papier); color: var(--texte);
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem; line-height: 1.62; font-stretch: 100%;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--bleu-encre); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; }
main:focus { outline: none; }
::selection { background: var(--bleu); color: #fff; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--encre); color: #fff; padding: 10px 16px; border-radius: 6px; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
h1, h2, h3, h4 { margin: 0; font-weight: 800; line-height: 1.02; letter-spacing: -.012em; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol.steps, ol.timeline { padding: 0; }
address { font-style: normal; }
figure { margin: 0; }

/* ---------- Typographie ---------------------------------------------- */
.display { font-stretch: 125%; font-weight: 820; font-size: clamp(2.7rem, 7.6vw, 7rem); line-height: .93; letter-spacing: -.022em; }
.h-sec { font-stretch: 120%; font-size: clamp(2.2rem, 5vw, 4.3rem); line-height: .98; letter-spacing: -.018em; }
.h-mid { font-stretch: 114%; font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.08; }
.h-small { font-stretch: 112%; font-size: 1.15rem; font-weight: 750; }
.lead { font-size: clamp(1.12rem, 1.5vw, 1.3rem); line-height: 1.55; max-width: 36em; color: var(--acier); }
.kicker { display: inline-flex; align-items: center; gap: 10px; font-stretch: 112%; font-weight: 650; font-size: .95rem; color: var(--bleu-encre); margin-bottom: 20px; }
.kicker::before { content: ""; width: 22px; height: 2px; background: currentColor; }
.prose { max-width: 40em; }
.prose h2 { font-stretch: 114%; font-size: 1.55rem; margin: 2.2em 0 .6em; }
.prose h3 { font-size: 1.12rem; margin: 1.6em 0 .4em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .35em; }
.muted { color: var(--acier); }
.small { font-size: .92rem; }
.dark .lead, .dark .muted { color: rgba(255,255,255,.76); }
.dark .kicker { color: var(--bleu); }

/* ---------- Boutons -------------------------------------------------- */
.btn {
  --bg: var(--bleu); --fg: #fff; --fill: var(--bleu-encre); --fg-h: #fff;
  position: relative; display: inline-flex; align-items: center; gap: 12px; justify-content: center;
  min-height: 54px; padding: 14px 26px 14px 28px; border: 1.5px solid var(--bg); border-radius: var(--r-btn);
  background: var(--bg); color: var(--fg); font: inherit; font-weight: 700; font-stretch: 108%; font-size: 1rem; line-height: 1.1;
  text-decoration: none; cursor: pointer; overflow: hidden; isolation: isolate; white-space: nowrap;
  transition: color .35s var(--ease), border-color .35s var(--ease), transform .2s;
}
.btn::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: var(--fill); transform: translateY(101%); transition: transform .45s var(--ease-out); z-index: -1; }
.btn:hover::before, .btn:focus-visible::before { transform: none; }
.btn:hover, .btn:focus-visible { color: var(--fg-h); border-color: var(--fill); }
.btn:active { transform: scale(.98); }
.btn__ico { display: grid; place-items: center; width: 26px; height: 26px; margin-right: -8px; border-radius: 50%; background: rgba(255,255,255,.18); overflow: hidden; }
.btn__ico svg { transition: transform .45s var(--ease-out); }
.btn:hover .btn__ico svg { animation: arrow-pass .55s var(--ease-out); }
@keyframes arrow-pass { 0% { transform: none; } 49% { transform: translateX(140%); } 50% { transform: translateX(-140%); } 100% { transform: none; } }
.btn--ghost { --bg: transparent; --fg: var(--texte); --fill: var(--encre); border-color: rgba(28,33,37,.35); }
.btn--ghost .btn__ico { background: rgba(28,33,37,.08); }
.btn--light { --bg: #fff; --fg: var(--encre); --fill: var(--bleu); --fg-h: #fff; }
.btn--light .btn__ico { background: var(--bardage); }
.btn--on-dark { --bg: transparent; --fg: #fff; --fill: #fff; --fg-h: var(--encre); border-color: rgba(255,255,255,.45); }
.btn--sm { min-height: 44px; padding: 9px 18px 9px 20px; font-size: .94rem; }
.btn--sm .btn__ico { width: 22px; height: 22px; }
.btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.link-tel { color: inherit; font-weight: 650; }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--bleu-encre); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat; padding-bottom: 3px; transition: background-size .35s var(--ease); }
.text-link:hover { background-size: 35% 1.5px; }
.dark .text-link { color: #fff; }

/* ---------- En-tête : verre dépoli, se compacte au défilement ---------- */
.hdr { position: fixed; inset: 0 0 auto; z-index: 60; padding: 12px var(--gut) 0; pointer-events: none; transition: padding .4s var(--ease); }
.hdr__in { pointer-events: auto; position: relative; display: flex; align-items: center; gap: 24px; max-width: calc(var(--wrap) - 2 * var(--gut) + 40px); margin-inline: auto; min-height: var(--hdr-h); padding: 0 12px 0 22px; border-radius: 18px;
  background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid rgba(255,255,255,.55); box-shadow: 0 10px 40px -24px rgba(20,24,28,.45);
  transition: min-height .4s var(--ease), background .4s, border-color .4s, box-shadow .4s, border-radius .4s; }
.hdr.is-scrolled .hdr__in { min-height: 62px; background: rgba(255,255,255,.86); }
.hdr__logo { flex: none; display: block; }
.hdr__logo img { width: 176px; height: auto; transition: width .4s var(--ease); }
.hdr__logo .logo-w { display: none; }
.hdr.is-scrolled .hdr__logo img { width: 150px; }
/* Variante transparente au-dessus d'un visuel sombre */
.hdr--over:not(.is-scrolled) .hdr__in { background: rgba(20,24,28,.18); border-color: rgba(255,255,255,.16); box-shadow: none; }
.hdr--over:not(.is-scrolled) .hdr__logo .logo-c { display: none; }
.hdr--over:not(.is-scrolled) .hdr__logo .logo-w { display: block; }
.hdr--over:not(.is-scrolled) .nav__a, .hdr--over:not(.is-scrolled) .nav__btn, .hdr--over:not(.is-scrolled) .hdr__burger { color: #fff; }
body.nav-open .hdr__in { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.nav-open .hdr__logo .logo-c { display: none; }
body.nav-open .hdr__logo .logo-w { display: block; }
body.nav-open .hdr__burger { color: #fff; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.nav__list { display: flex; gap: 2px; margin: 0; list-style: none; }
.nav__list > li { position: relative; }
.nav__a, .nav__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 12px; border: 0; background: none; color: var(--texte); font: inherit; font-weight: 600; font-stretch: 106%; font-size: .97rem; text-decoration: none; cursor: pointer; border-radius: 10px; transition: background .25s, color .25s; }
.nav__a:hover, .nav__btn:hover, .nav__btn[aria-expanded="true"] { background: rgba(20,24,28,.06); }
.hdr--over:not(.is-scrolled) .nav__a:hover, .hdr--over:not(.is-scrolled) .nav__btn:hover, .hdr--over:not(.is-scrolled) .nav__btn[aria-expanded="true"] { background: rgba(255,255,255,.12); }
.nav__a[aria-current="page"], .nav__btn.is-current { box-shadow: inset 0 -2px 0 var(--bleu); border-radius: 0; }
.nav__btn svg { transition: transform .3s var(--ease); }
.nav__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__panel { position: absolute; top: calc(100% + 14px); left: -12px; width: max-content; min-width: 340px; padding: 10px; border-radius: 16px;
  background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(255,255,255,.7); box-shadow: 0 30px 60px -30px rgba(20,24,28,.45);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s, transform .3s var(--ease), visibility .25s; }
.nav__panel.is-open { opacity: 1; visibility: visible; transform: none; }
.nav__panel ul { margin: 0; padding: 0; list-style: none; }
.nav__panel a { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: center; padding: 8px 12px 8px 8px; border-radius: 10px; color: var(--texte); text-decoration: none; }
.nav__panel a:hover, .nav__panel a[aria-current="page"] { background: var(--bardage-2); }
.nav__panel img { width: 52px; height: 40px; object-fit: cover; border-radius: 6px; background: var(--bardage); }
.nav__panel b { display: block; font-stretch: 110%; font-size: .98rem; }
.nav__panel small { display: block; color: var(--acier); font-size: .84rem; line-height: 1.35; }
.nav__cta { margin-left: 4px; }
.hdr__burger { display: none; }

@media (max-width: 1100px) {
  :root { --hdr-h: 66px; }
  .hdr { padding-top: 10px; }
  .hdr__in { padding: 0 8px 0 16px; border-radius: 14px; }
  .hdr__logo img { width: 148px; }
  .hdr__burger { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 10px; margin-left: auto; min-height: 46px; padding: 8px 12px; border: 0; border-radius: 10px; background: none; font: inherit; font-weight: 650; color: var(--texte); cursor: pointer; }
  .hdr__burger-lines, .hdr__burger-lines::before, .hdr__burger-lines::after { display: block; width: 22px; height: 2px; background: currentColor; transition: transform .35s var(--ease), background .2s; }
  .hdr__burger-lines { position: relative; }
  .hdr__burger-lines::before, .hdr__burger-lines::after { content: ""; position: absolute; left: 0; }
  .hdr__burger-lines::before { top: -7px; } .hdr__burger-lines::after { top: 7px; }
  .hdr__burger[aria-expanded="true"] .hdr__burger-lines { background: transparent; }
  .hdr__burger[aria-expanded="true"] .hdr__burger-lines::before { transform: translateY(7px) rotate(45deg); }
  .hdr__burger[aria-expanded="true"] .hdr__burger-lines::after { transform: translateY(-7px) rotate(-45deg); }
  .nav { position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: calc(var(--hdr-h) + 40px) var(--gut) 40px; background: var(--encre); color: #fff; overflow-y: auto;
    clip-path: circle(0% at calc(100% - 48px) 44px); visibility: hidden; transition: clip-path .6s var(--ease-out), visibility .6s; }
  .nav.is-open { clip-path: circle(150% at calc(100% - 48px) 44px); visibility: visible; }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__list > li { border-bottom: 1px solid rgba(255,255,255,.12); }
  .nav__a, .nav__btn { width: 100%; justify-content: space-between; min-height: 64px; padding: 14px 0; color: #fff; font-size: clamp(1.5rem, 6vw, 2.1rem); font-stretch: 118%; font-weight: 750; border-radius: 0; }
  .nav__a:hover, .nav__btn:hover, .nav__btn[aria-expanded="true"] { background: none; color: var(--bleu); }
  .nav__a[aria-current="page"], .nav__btn.is-current { box-shadow: none; color: var(--bleu); }
  .nav__panel { position: static; width: auto; min-width: 0; padding: 0 0 18px; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; display: none; opacity: 1; visibility: visible; transform: none; }
  .nav__panel.is-open { display: block; }
  .nav__panel a { color: rgba(255,255,255,.88); grid-template-columns: 64px 1fr; }
  .nav__panel a:hover, .nav__panel a[aria-current="page"] { background: rgba(255,255,255,.06); }
  .nav__panel small { color: rgba(255,255,255,.6); }
  .nav__panel img { width: 64px; height: 46px; }
  .nav__cta { margin: 32px 0 0; align-self: flex-start; }
  .nav.is-open .nav__list > li { animation: nav-in .6s var(--ease-out) both; }
  .nav.is-open .nav__list > li:nth-child(2) { animation-delay: .05s; } .nav.is-open .nav__list > li:nth-child(3) { animation-delay: .1s; } .nav.is-open .nav__list > li:nth-child(4) { animation-delay: .15s; } .nav.is-open .nav__list > li:nth-child(5) { animation-delay: .2s; }
  body.nav-open { overflow: hidden; }
}
@keyframes nav-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
main > :first-child:not(.ph):not(.hero) { padding-top: calc(var(--hdr-h) + 40px); }

/* ---------- Traits de coupe ------------------------------------------ */
.marks { position: relative; }
.marks::before, .marks::after {
  content: ""; position: absolute; inset: -14px; pointer-events: none; z-index: 2;
  --c: currentColor; --l: 22px; --g: 6px;
  background:
    linear-gradient(var(--c), var(--c)) 0 var(--g) / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) var(--g) 0 / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% var(--g) / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) calc(100% - var(--g)) 0 / 1px var(--l) no-repeat;
}
.marks::after { transform: scaleY(-1); }
.marks--dark { color: rgba(28,33,37,.5); }
.marks--light { color: rgba(255,255,255,.7); }

/* ---------- Images --------------------------------------------------- */
.pic { display: block; }
.pic img { width: 100%; height: 100%; object-fit: cover; background: var(--bardage); }
.ill { position: relative; display: block; height: 100%; }
.ill__tag { position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 5px 10px; background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--encre); font-size: .76rem; font-weight: 650; border-radius: 999px; }
.frame { position: relative; overflow: hidden; background: var(--bardage); border-radius: var(--r-img); }
.frame > .pic, .frame > .ill { height: 100%; }
.r-4x3 { aspect-ratio: 4 / 3; } .r-3x4 { aspect-ratio: 3 / 4; } .r-16x9 { aspect-ratio: 16 / 9; } .r-1x1 { aspect-ratio: 1; } .r-3x2 { aspect-ratio: 3 / 2; } .r-4x5 { aspect-ratio: 4 / 5; } .r-21x9 { aspect-ratio: 21 / 9; }
.caption { margin-top: 12px; font-size: .9rem; color: var(--acier); }
.dark .caption { color: rgba(255,255,255,.65); }
.vid video { width: 100%; height: auto; background: #000; border-radius: var(--r-img); }
.vid figcaption { margin-top: 12px; font-size: .92rem; color: var(--acier); }
.vid__meta { white-space: nowrap; }
.dark .vid figcaption { color: rgba(255,255,255,.72); }
.slot-todo { position: relative; display: grid; place-items: center; height: 100%; min-height: 220px; padding: 24px; border: 1.5px dashed rgba(91,98,104,.55); border-radius: var(--r-img); background: repeating-linear-gradient(135deg, var(--bardage-2) 0 14px, var(--bardage) 14px 28px); color: var(--acier); text-align: center; font-size: .92rem; }
.slot-todo strong { display: block; font-stretch: 112%; color: var(--texte); margin-bottom: 6px; }
.dark .slot-todo { background: repeating-linear-gradient(135deg, #1b2025 0 14px, #20262b 14px 28px); border-color: rgba(255,255,255,.25); color: rgba(255,255,255,.65); }
.dark .slot-todo strong { color: #fff; }

/* ---------- Animations d'apparition --------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* Passage de tête d'impression : l'image se révèle derrière une ligne bleue */
  .reveal { clip-path: inset(0 100% 0 0); transition: clip-path 1.25s var(--ease-out); }
  .reveal::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; z-index: 3; width: 3px; background: var(--bleu); box-shadow: 0 0 24px 4px rgba(34,154,214,.55); opacity: 0; pointer-events: none; }
  .reveal.is-in { clip-path: inset(0 0 0 0); }
  .reveal.is-in::after { animation: scan 1.25s var(--ease-out) both; }
  .reveal img { transform: scale(1.12); transition: transform 1.8s var(--ease-out); }
  .reveal.is-in img { transform: none; }
  .js [data-anim] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: var(--d, 0s); }
  .js [data-anim].is-in { opacity: 1; transform: none; }
  [data-split] .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; margin-bottom: -.06em; }
  [data-split] .w > span { display: inline-block; transform: translateY(105%); transition: transform 1s var(--ease-out); transition-delay: calc(var(--i) * 45ms + var(--d, 0s)); }
  [data-split].is-in .w > span { transform: none; }
}
@keyframes scan { 0% { left: 0; opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

/* ---------- Sections ------------------------------------------------- */
.sec { padding-block: var(--sec); position: relative; }
.sec--tight { padding-block: calc(var(--sec) * .62); }
.sec--grey { background: var(--bardage-2); }
.sec--flush-top { padding-top: 0; }
.dark { background: var(--encre); color: #fff; }
.dark a:not(.btn):not(.card__link) { color: #fff; }
.sec-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(40px, 6vw, 96px); align-items: end; margin-bottom: clamp(48px, 6vw, 88px); }
.sec-head .lead { margin: 0; max-width: 30em; }
.sec-head--rule { padding-bottom: clamp(28px, 3vw, 40px); border-bottom: 1px solid var(--trait); }
.dark .sec-head--rule { border-color: rgba(255,255,255,.16); }
.sec-head--stack { grid-template-columns: 1fr; max-width: 52em; }
@media (max-width: 860px) { .sec-head { grid-template-columns: 1fr; } }

/* ---------- Héros de page ------------------------------------------- */
.ph { position: relative; display: flex; align-items: flex-end; min-height: min(86svh, 860px); color: #fff; background: var(--encre); overflow: hidden; isolation: isolate; }
.ph__media { position: absolute; inset: 0; z-index: -1; }
.ph__media .pic, .ph__media img, .ph__media video { width: 100%; height: 100%; object-fit: cover; }
.ph__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,24,28,.82) 0%, rgba(20,24,28,.45) 50%, rgba(20,24,28,.15) 100%), linear-gradient(180deg, rgba(20,24,28,.35) 0%, rgba(20,24,28,0) 35%, rgba(20,24,28,.85) 100%); }
.ph__frame { position: absolute; inset: clamp(16px, 2.2vw, 30px); pointer-events: none; color: rgba(255,255,255,.6); }
.ph__in { position: relative; padding-block: calc(var(--hdr-h) + 96px) clamp(48px, 6vw, 88px); width: 100%; }
.ph .crumbs { color: rgba(255,255,255,.72); }
.ph .crumbs a { color: inherit; }
.ph h1 { max-width: 14ch; }
.ph__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 64px; align-items: end; margin-top: clamp(26px, 3vw, 40px); }
.ph__row .lead { margin: 0; color: rgba(255,255,255,.86); max-width: 34em; }
.ph__row .btns { margin: 0; flex-wrap: nowrap; }
.ph--short { min-height: min(64svh, 640px); }
.ph--light { min-height: 0; color: var(--texte); background: var(--bardage-2); }
.ph--light .ph__in { padding-block: calc(var(--hdr-h) + 88px) clamp(48px, 6vw, 80px); }
.ph--light .crumbs { color: var(--acier); }
.ph--light .ph__row .lead { color: var(--acier); }
.ph--light h1 { max-width: 16ch; }
@media (max-width: 1000px) { .ph__row { grid-template-columns: 1fr; } .ph__row .btns { flex-wrap: wrap; } }
@media (max-width: 700px) { .ph { min-height: 0; } .ph__in { padding-top: calc(var(--hdr-h) + 120px); } .ph__media::after { background: linear-gradient(180deg, rgba(20,24,28,.4) 0%, rgba(20,24,28,.6) 45%, rgba(20,24,28,.94) 100%); } }
@media (prefers-reduced-motion: no-preference) {
  .ph__media img, .hero__media .pic img { animation: ph-zoom 2.4s var(--ease-out) both; }
}
@keyframes ph-zoom { from { transform: scale(1.12); } to { transform: none; } }
.crumbs { margin: 0 0 26px; font-size: .9rem; color: var(--acier); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
.crumbs a { color: inherit; }

/* ---------- Héros d'accueil ----------------------------------------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; color: #fff; background: var(--encre); overflow: hidden; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__media .pic, .hero__media video { width: 100%; height: 100%; object-fit: cover; }
.hero__media .pic img { height: 100%; }
.hero__media video { position: absolute; inset: 0; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,24,28,.8) 0%, rgba(20,24,28,.35) 55%, rgba(20,24,28,.12) 100%), linear-gradient(180deg, rgba(20,24,28,.3) 0%, rgba(20,24,28,0) 30%, rgba(20,24,28,.88) 100%); }
.hero__frame { position: absolute; inset: clamp(16px, 2.2vw, 30px); pointer-events: none; color: rgba(255,255,255,.62); }
.hero__in { position: relative; padding-block: calc(var(--hdr-h) + 120px) clamp(36px, 5vw, 64px); width: 100%; }
.hero h1 { max-width: 11.5ch; font-size: clamp(3rem, 8.4vw, 7.8rem); }
.hero__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 64px; align-items: end; margin-top: clamp(28px, 3.4vw, 44px); }
.hero__sub { margin: 0; max-width: 31em; font-size: clamp(1.08rem, 1.5vw, 1.28rem); color: rgba(255,255,255,.88); }
.hero__row .btns { margin: 0; flex-wrap: nowrap; }
.hero__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(44px, 5vw, 72px) 0 0; border-top: 1px solid rgba(255,255,255,.26); list-style: none; }
.hero__facts li { padding: 18px 18px 0 0; font-size: .94rem; color: rgba(255,255,255,.78); }
.hero__facts strong { display: block; color: #fff; font-stretch: 112%; font-size: 1.04rem; }
.hero__pause { position: absolute; z-index: 3; right: clamp(16px, 2.2vw, 30px); bottom: clamp(16px, 2.2vw, 30px); display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; background: rgba(20,24,28,.4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font: inherit; font-size: .85rem; cursor: pointer; }
.hero__pause[hidden] { display: none; }
.hero__scroll { position: absolute; left: 50%; bottom: 22px; z-index: 2; width: 1px; height: 46px; background: rgba(255,255,255,.25); overflow: hidden; }
.hero__scroll::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: #fff; animation: scroll-cue 2.2s var(--ease) 1.6s 3; }
@keyframes scroll-cue { to { top: 100%; } }
@media (max-width: 1000px) { .hero__row { grid-template-columns: 1fr; } .hero__row .btns { flex-wrap: wrap; } .hero__scroll { display: none; } }
@media (max-width: 700px) {
  .hero { min-height: 0; }
  .hero__in { padding-top: calc(var(--hdr-h) + 140px); }
  .hero__media::after { background: linear-gradient(180deg, rgba(20,24,28,.45) 0%, rgba(20,24,28,.6) 40%, rgba(20,24,28,.93) 100%); }
  .hero__facts { grid-template-columns: 1fr; }
  .hero__facts li { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.16); }
  .hero__pause { top: calc(var(--hdr-h) + 24px); bottom: auto; }
}

/* ---------- Index des expertises (survol → grande image) ------------- */
.xpi { display: grid; grid-template-columns: minmax(0, 6.2fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 104px); align-items: start; }
.xpi__list { margin: 0; list-style: none; border-top: 1px solid var(--trait); }
.xpi__item { border-bottom: 1px solid var(--trait); }
.xpi__link { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 22px; padding: clamp(22px, 2.4vw, 32px) 0; color: inherit; text-decoration: none; }
.xpi__n { grid-column: 1; grid-row: 1; padding-top: .55em; font-size: .82rem; font-weight: 650; color: var(--gris-doux); font-variant-numeric: tabular-nums; min-width: 2ch; }
.xpi__img { display: none; }
.xpi__title { grid-column: 2; font-stretch: 120%; font-weight: 800; font-size: clamp(1.55rem, 3vw, 2.7rem); line-height: 1.02; letter-spacing: -.012em; color: #6b7278; transition: color .35s var(--ease), transform .45s var(--ease-out); }
.xpi__text { grid-column: 2; max-width: 34em; color: var(--acier); overflow: hidden; max-height: 0; opacity: 0; transition: max-height .5s var(--ease), opacity .35s, margin .5s var(--ease); }
.xpi__go { grid-column: 3; grid-row: 1 / span 2; align-self: center; display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid var(--trait); border-radius: 50%; color: var(--encre); transform: translateX(-10px) scale(.9); opacity: 0; transition: opacity .3s, transform .45s var(--ease-out), background .3s, color .3s, border-color .3s; }
.xpi__item.is-active .xpi__title, .xpi__link:focus-visible .xpi__title { color: var(--texte); transform: translateX(6px); }
.xpi__item.is-active .xpi__text { max-height: 6em; opacity: 1; margin-top: 12px; }
.xpi__item.is-active .xpi__go { opacity: 1; transform: none; }
.xpi__link:hover .xpi__go { background: var(--bleu-encre); border-color: var(--bleu-encre); color: #fff; }
.xpi__stage { position: sticky; top: 120px; }
.xpi__frame { position: relative; aspect-ratio: 1; background: var(--bardage); border-radius: var(--r-img); }
.xpi__slide { position: absolute; inset: 0; overflow: hidden; border-radius: var(--r-img); clip-path: inset(0 0 0 100%); transition: clip-path .8s var(--ease-out); }
.xpi__slide .pic, .xpi__slide img { width: 100%; height: 100%; object-fit: cover; }
.xpi__slide img { transform: scale(1.08); transition: transform 1.4s var(--ease-out); }
.xpi__slide.is-active { clip-path: inset(0 0 0 0); z-index: 1; }
.xpi__slide.is-active img { transform: none; }
.xpi__slide.was-active { clip-path: inset(0 0 0 0); z-index: 0; }
.xpi__label { position: absolute; left: 16px; bottom: 16px; z-index: 3; padding: 8px 14px; border-radius: 999px; background: rgba(20,24,28,.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font-size: .86rem; font-weight: 600; }
@media (max-width: 900px) {
  .xpi { grid-template-columns: 1fr; }
  .xpi__stage { display: none; }
  .xpi__list { border-top: 0; display: grid; gap: 40px; }
  .xpi__item { border-bottom: 0; }
  .xpi__link { padding: 0; grid-template-columns: minmax(0, 1fr) auto; }
  .xpi__n { display: none; }
  .xpi__img { display: block; grid-column: 1 / -1; aspect-ratio: 16 / 10; overflow: hidden; margin-bottom: 18px; background: var(--bardage); border-radius: var(--r-img); }
  .xpi__img .pic, .xpi__img img { height: 100%; }
  .xpi__title, .xpi__text { grid-column: 1; }
  .xpi__title { color: var(--texte); font-size: clamp(1.5rem, 6.2vw, 2rem); transform: none !important; }
  .xpi__text { max-height: none; opacity: 1; margin-top: 8px; }
  .xpi__go { grid-column: 2; grid-row: 2 / span 2; opacity: 1; transform: none; width: 46px; height: 46px; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .xpi__list { grid-template-columns: 1fr 1fr; gap: 44px 28px; }
  .xpi__img { aspect-ratio: 4 / 3; }
  .xpi__title { font-size: 1.5rem; }
  .xpi__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .xpi__item:last-child:nth-child(odd) .xpi__img { aspect-ratio: 16 / 7; }
}

/* ---------- Parc machines : une séquence par machine ----------------- */
.machines-intro { padding-bottom: clamp(40px, 5vw, 72px); }
.mach { position: relative; height: 210vh; }
.mach__pin { position: sticky; top: 0; height: 100vh; min-height: 640px; display: grid; align-items: center; padding-top: calc(var(--hdr-h) + 12px); overflow: hidden; }
.mach__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 88px); align-items: center; width: 100%; }
.mach--rev .mach__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.mach--rev .mach__visual { order: 2; }
.mach__visual { position: relative; height: min(70vh, 720px); border-radius: var(--r-img); overflow: hidden; background: #0d1013;
  clip-path: inset(calc((1 - var(--p-in, 1)) * 18%) calc((1 - var(--p-in, 1)) * 12%) round var(--r-img)); }
.mach__visual .pic, .mach__visual img, .mach__visual video { width: 100%; height: 100%; object-fit: cover; }
.mach__visual img, .mach__visual video { transform: scale(calc(1.18 - var(--p, 0) * .18)) translateY(calc((var(--p, 0) - .5) * -4%)); transform-origin: center; }
.mach__visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,24,28,0) 55%, rgba(20,24,28,.55) 100%); pointer-events: none; }
.mach__count { position: absolute; left: 22px; top: 20px; z-index: 2; color: #fff; font-size: .9rem; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.mach__text { transform: translateX(calc((1 - var(--p-in, 1)) * 60px)); opacity: var(--p-in, 1); }
.mach--rev .mach__text { transform: translateX(calc((1 - var(--p-in, 1)) * -60px)); }
.mach__role { display: block; margin-bottom: 16px; color: var(--bleu); font-weight: 650; font-stretch: 110%; }
.mach__name { font-stretch: 122%; font-size: clamp(2rem, 4.2vw, 3.7rem); line-height: .98; }
.mach__desc { margin: 22px 0 0; color: rgba(255,255,255,.78); font-size: 1.08rem; max-width: 30em; }
.mach__specs { margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.16); }
.mach__specs li { display: grid; grid-template-columns: 9.5em 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.16); font-size: .96rem; }
.mach__specs span { color: rgba(255,255,255,.58); }
.mach__specs .is-todo { color: rgba(255,255,255,.5); font-style: italic; }
.mach__progress { position: absolute; right: var(--gut); top: 50%; display: grid; gap: 10px; transform: translateY(-50%); }
.mach__progress i { display: block; width: 3px; height: 28px; background: rgba(255,255,255,.2); border-radius: 2px; }
.mach__progress i.is-on { background: var(--bleu); }
@media (max-width: 1000px), (max-height: 620px) {
  .mach { height: auto; }
  .mach__pin { position: relative; height: auto; min-height: 0; padding-block: clamp(36px, 7vw, 64px); overflow: visible; }
  .mach__grid, .mach--rev .mach__grid { grid-template-columns: 1fr; }
  .mach--rev .mach__visual { order: 0; }
  .mach__visual { height: auto; aspect-ratio: 4 / 3; clip-path: none; }
  .mach__visual img, .mach__visual video { transform: none; }
  .mach__text, .mach--rev .mach__text { transform: none; opacity: 1; }
  .mach__progress { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mach { height: auto; }
  .mach__pin { position: relative; height: auto; min-height: 0; padding-block: 64px; }
  .mach__visual { clip-path: none; }
  .mach__visual img, .mach__visual video { transform: none; }
  .mach__text, .mach--rev .mach__text { transform: none; opacity: 1; }
}

/* ---------- Bande éco-responsable (rupture) -------------------------- */
.eco-band { position: relative; overflow: hidden; background: var(--sauge); color: #17261d; isolation: isolate; }
.eco-band__bg { position: absolute; inset: -10% 0; z-index: -1; opacity: .9; transform: translateY(calc(var(--p, .5) * -6%)); }
.eco-band__bg svg { width: 100%; height: 100%; }
.eco-band .kicker { color: var(--mousse); }
.eco-band .lead { color: #3d5246; }
.eco-band__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 120px); align-items: center; }
.eco-band__title { font-stretch: 122%; font-size: clamp(2.4rem, 5.6vw, 5rem); line-height: .96; color: #17261d; }
.eco-band__title em { font-style: normal; color: var(--mousse); }
.eco-band__visuals { position: relative; min-height: 560px; }
.eco-band__v1 { position: absolute; right: 0; top: 0; width: 78%; aspect-ratio: 4 / 3; border-radius: var(--r-img); overflow: hidden; transform: translateY(calc((var(--p, .5) - .5) * -60px)); }
.eco-band__v2 { position: absolute; left: 0; bottom: 0; width: 46%; padding: 12px; background: #fff; border-radius: 6px; box-shadow: 0 30px 60px -30px rgba(23,38,29,.5); transform: translateY(calc((var(--p, .5) - .5) * 70px)) rotate(-2deg); }
.eco-band__v2 .pic img { object-fit: contain; background: #fff; }
.eco-band__points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 40px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(23,38,29,.2); }
.eco-band__points li { padding: 18px 18px 0 0; }
.eco-band__points b { display: block; font-stretch: 114%; font-size: 1.08rem; margin-bottom: 4px; }
.eco-band__points span { color: #3d5246; font-size: .95rem; }
.btn--eco { --bg: var(--mousse); --fill: #17261d; }
.btn--eco .btn__ico { background: rgba(255,255,255,.16); }
@media (max-width: 960px) {
  .eco-band__grid { grid-template-columns: 1fr; }
  .eco-band__visuals { min-height: 0; height: 120vw; max-height: 620px; }
  .eco-band__points { grid-template-columns: 1fr; }
  .eco-band__points li { padding: 14px 0; border-bottom: 1px solid rgba(23,38,29,.15); }
}

/* ---------- Galerie horizontale pilotée par le défilement ------------ */
.hs { position: relative; }
.hs__pin { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--hdr-h) + 12px); overflow: hidden; }
.hs__track { display: flex; gap: clamp(20px, 2.4vw, 36px); padding-inline: var(--gut); width: max-content; transform: translate3d(calc(var(--x, 0) * -1px), 0, 0); will-change: transform; }
.hs__item { flex: none; width: clamp(300px, 34vw, 520px); }
.hs__item:nth-child(3n+1) { width: clamp(340px, 44vw, 700px); }
.hs__link { display: block; color: inherit; text-decoration: none; }
.hs__media { position: relative; display: block; height: min(46vh, 500px); overflow: hidden; border-radius: var(--r-img); background: var(--bardage); }
.hs__media .pic, .hs__media img { height: 100%; }
.hs__media img { transition: transform 1s var(--ease-out), filter .5s; }
.hs__link:hover .hs__media img { transform: scale(1.05); filter: brightness(.85); }
.hs__over { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; color: #fff; background: linear-gradient(180deg, rgba(20,24,28,0), rgba(20,24,28,.75)); transform: translateY(30%); opacity: 0; transition: transform .5s var(--ease-out), opacity .4s; }
.hs__link:hover .hs__over, .hs__link:focus-visible .hs__over { transform: none; opacity: 1; }
.hs__over span { font-size: .9rem; color: rgba(255,255,255,.8); }
.hs__meta { display: block; padding-top: 16px; }
.hs__cat { display: block; font-size: .86rem; color: var(--bleu-encre); font-weight: 650; }
.hs__title { display: block; margin-top: 4px; font-stretch: 110%; font-weight: 750; font-size: 1.2rem; line-height: 1.2; }
.hs__end { flex: none; display: grid; align-content: center; gap: 22px; width: clamp(260px, 26vw, 380px); padding: 0 20px; }
.hs__bar { position: relative; height: 2px; margin: 36px var(--gut) 0; background: var(--trait); max-width: calc(var(--wrap) - 2 * var(--gut)); }
.hs__bar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); background: var(--bleu-encre); }
@media (max-width: 1023px), (prefers-reduced-motion: reduce) {
  .hs { height: auto !important; }
  .hs__pin { position: relative; height: auto; overflow: visible; }
  .hs__track { width: auto; transform: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 18px; scrollbar-width: thin; }
  .hs__item, .hs__item:nth-child(3n+1) { width: min(82vw, 440px); scroll-snap-align: start; }
  .hs__media { height: auto; aspect-ratio: 4 / 3; }
  .hs__bar { display: none; }
  .hs__over { display: none; }
}

/* ---------- Cartes de réalisations ---------------------------------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: clamp(22px, 2.4vw, 34px); margin: 0; list-style: none; }
.cards > * { min-width: 0; }
.card[hidden] { display: none; }
.card__link { display: block; color: inherit; text-decoration: none; }
.card__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bardage); border-radius: var(--r-img); }
.card__media .pic, .card__media img { height: 100%; }
.card__media img { transition: transform 1s var(--ease-out), filter .5s; }
.card__media::after { content: "Voir le projet"; position: absolute; left: 14px; bottom: 14px; padding: 8px 14px; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 999px; color: var(--encre); font-weight: 650; font-size: .86rem; opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .4s var(--ease-out); }
.card__link:hover .card__media img { transform: scale(1.05); filter: brightness(.86); }
.card__link:hover .card__media::after, .card__link:focus-visible .card__media::after { opacity: 1; transform: none; }
.card__body { display: block; padding-top: 16px; }
.card__cat { display: block; font-size: .86rem; color: var(--bleu-encre); font-weight: 650; }
.card__title { display: block; margin-top: 4px; font-stretch: 110%; font-weight: 750; font-size: 1.18rem; line-height: 1.22; }
.card__count { display: block; margin-top: 6px; font-size: .86rem; color: var(--acier); }
.dark .card__cat { color: var(--bleu); }
.dark .card__count { color: rgba(255,255,255,.65); }
@media (hover: none) { .card__media::after { display: none; } }
.cards--bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.cards--bento > .card { grid-column: span 4; display: flex; }
.cards--bento .card__link { display: flex; flex-direction: column; width: 100%; }
.cards--bento > .card:nth-child(1) { grid-column: 1 / span 7; grid-row: 1 / span 2; }
.cards--bento > .card:nth-child(2), .cards--bento > .card:nth-child(3) { grid-column: 8 / span 5; }
.cards--bento > .card:nth-child(1) .card__media { flex: 1 1 0; aspect-ratio: auto; min-height: 0; }
.cards--bento > .card:nth-child(1) .card__media .pic { position: absolute; inset: 0; }
.cards--bento > .card:nth-child(2) .card__media, .cards--bento > .card:nth-child(3) .card__media { aspect-ratio: 16 / 10; }
.cards--bento > .card:nth-child(1) .card__title { font-size: clamp(1.35rem, 2vw, 1.7rem); }
@media (max-width: 900px) {
  .cards--bento > .card, .cards--bento > .card:nth-child(n) { grid-column: 1 / -1; grid-row: auto; }
  .cards--bento > .card:nth-child(1) .card__media { flex: none; aspect-ratio: 4 / 3; }
  .cards--bento > .card:nth-child(1) .card__media .pic { position: static; }
  .cards--bento > .card:nth-child(n+2) { grid-column: span 6; }
  .cards--bento > .card:nth-child(n+2) .card__media { aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) { .cards--bento > .card:nth-child(n+2) { grid-column: 1 / -1; } }

/* ---------- Étapes (séquence réelle) -------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; list-style: none; counter-reset: st; }
.steps li { position: relative; padding: 30px 30px 8px 0; border-top: 1px solid var(--trait); counter-increment: st; }
.steps li::after { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 0; background: var(--bleu-encre); transition: width 1.2s var(--ease-out); transition-delay: calc(var(--i, 0) * 120ms); }
.steps.is-in li::after, .steps li.is-in::after { width: 100%; }
.steps li::before { content: counter(st, decimal-leading-zero); display: block; margin-bottom: 20px; font-stretch: 125%; font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--bleu-encre); }
.steps h3 { font-stretch: 110%; font-size: 1.22rem; margin-bottom: 8px; }
.steps p { color: var(--acier); margin: 0; }
.dark .steps li { border-color: rgba(255,255,255,.2); }
.dark .steps li::before, .dark .steps li::after { color: var(--bleu); background-color: transparent; }
.dark .steps li::after { background: var(--bleu); }
.dark .steps p { color: rgba(255,255,255,.72); }
.steps--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps--v { grid-template-columns: 1fr; }
.steps--v li { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 24px; padding: 34px 0; }
.steps--v li:last-child { border-bottom: 1px solid var(--trait); }
.steps--v li::before { grid-row: 1 / span 2; margin: 0; font-size: clamp(2.4rem, 4vw, 3.4rem); }
.steps--v h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); margin: 4px 0 10px; }
@media (max-width: 980px) { .steps, .steps--5, .steps--3 { grid-template-columns: 1fr 1fr; row-gap: 12px; } }
@media (max-width: 560px) { .steps, .steps--5, .steps--3 { grid-template-columns: 1fr; } .steps li { padding-right: 0; } .steps--v li { grid-template-columns: 64px minmax(0, 1fr); padding: 26px 0; } }

/* ---------- Mises en page ------------------------------------------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 104px); align-items: center; }
.split > * { min-width: 0; }
.split--wide-img { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.split--rev > :first-child { order: 2; }
.split--top { align-items: start; }
@media (max-width: 900px) { .split, .split--wide-img { grid-template-columns: 1fr; } .split--rev > :first-child { order: 0; } }
.sticky-col { position: sticky; top: 120px; }
@media (max-width: 900px) { .sticky-col { position: static; } }
.checks { margin: 26px 0 0; list-style: none; }
.checks li { position: relative; padding: 12px 0 12px 32px; border-bottom: 1px solid var(--trait); }
.checks li::before { content: ""; position: absolute; left: 2px; top: 21px; width: 14px; height: 8px; border-left: 2px solid var(--bleu-encre); border-bottom: 2px solid var(--bleu-encre); transform: rotate(-45deg); }
.dark .checks li { border-color: rgba(255,255,255,.16); }
.dark .checks li::before { border-color: var(--bleu); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 0; margin: 0; list-style: none; border-top: 1px solid var(--trait); }
.tiles > * { min-width: 0; }
.tiles li { position: relative; padding: 30px 30px 30px 0; border-bottom: 1px solid var(--trait); }
.tiles h3 { font-stretch: 112%; font-size: 1.2rem; margin-bottom: 8px; }
.tiles p { margin: 0; color: var(--acier); }
.dark .tiles, .dark .tiles li { border-color: rgba(255,255,255,.16); }
.dark .tiles p { color: rgba(255,255,255,.72); }
.tiles--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
/* Panneaux : blocs à fond, survol avec soulèvement */
.panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.panels > li { position: relative; padding: 30px 28px 32px; border-radius: var(--r-panel); background: #fff; border: 1px solid var(--trait); transition: transform .45s var(--ease-out), box-shadow .45s, border-color .3s; }
.panels > li:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -36px rgba(20,24,28,.5); border-color: transparent; }
.panels h3 { font-stretch: 112%; font-size: 1.22rem; margin: 18px 0 8px; }
.panels p { margin: 0; color: var(--acier); }
.panels__ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--bardage-2); color: var(--bleu-encre); }
.sec--grey .panels > li { background: #fff; }
.dark .panels > li { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.dark .panels p { color: rgba(255,255,255,.7); }
.dark .panels__ico { background: rgba(255,255,255,.08); color: var(--bleu); }
.mosaic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); align-items: start; }
.mosaic > * { grid-column: span 4; min-width: 0; }
.mosaic > .m-wide { grid-column: span 8; }
.mosaic > .m-half { grid-column: span 6; }
.mosaic > .m-full { grid-column: 1 / -1; }
.mosaic .frame { height: auto; width: 100%; }
.mosaic .frame.m-side-4x3 { aspect-ratio: 2 / 3; }
.mosaic .frame.m-side-16x9 { aspect-ratio: 8 / 9.4; }
@media (max-width: 800px) { .mosaic > *, .mosaic > .m-wide, .mosaic > .m-half { grid-column: span 12; } .mosaic .frame.m-side-4x3, .mosaic .frame.m-side-16x9 { aspect-ratio: 4 / 3; } }
.full-img { position: relative; height: min(88vh, 900px); overflow: hidden; }
.full-img .pic, .full-img img { width: 100%; height: 100%; object-fit: cover; }
.full-img img { transform: translateY(calc((var(--p, .5) - .5) * -8%)) scale(1.12); }
.full-img__cap { position: absolute; left: var(--gut); bottom: 28px; z-index: 2; padding: 8px 14px; border-radius: 999px; background: rgba(20,24,28,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: .88rem; }
@media (max-width: 700px) { .full-img { height: 70vw; } }

/* ---------- Faits, preuves, fiche ----------------------------------- */
.ticket { margin: 0; border-top: 2px solid var(--encre); }
.ticket > div { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: 8px 32px; padding: 22px 0; border-bottom: 1px solid #c8ced3; }
.ticket dt { font-stretch: 118%; font-weight: 800; font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.15; }
.ticket dd { margin: 0; color: var(--acier); }
.ticket a { font-weight: 600; }
@media (max-width: 560px) { .ticket > div { grid-template-columns: 1fr; } }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--trait); }
.stats li { padding: 26px 24px 24px 0; border-bottom: 1px solid var(--trait); }
.stats b { display: block; font-stretch: 125%; font-weight: 820; font-size: clamp(2.4rem, 4.6vw, 4rem); line-height: 1; letter-spacing: -.02em; }
.stats span { display: block; margin-top: 10px; color: var(--acier); font-size: .96rem; }
.dark .stats, .dark .stats li { border-color: rgba(255,255,255,.16); }
.dark .stats span { color: rgba(255,255,255,.7); }

/* ---------- CTA final ----------------------------------------------- */
.cta-final { position: relative; overflow: hidden; background: var(--encre); color: #fff; isolation: isolate; }
.cta-final__media { position: absolute; inset: 0; z-index: -1; opacity: .38; }
.cta-final__media .pic, .cta-final__media img { width: 100%; height: 100%; object-fit: cover; }
.cta-final__media img { transform: scale(calc(1.15 - var(--p, .5) * .15)); }
.cta-final__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,24,28,.95) 0%, rgba(20,24,28,.7) 60%, rgba(20,24,28,.5) 100%); }
.cta-final__in { padding-block: clamp(96px, 13vw, 200px); }
.cta-final__title { font-stretch: 125%; font-size: clamp(2.8rem, 8vw, 7.2rem); line-height: .92; letter-spacing: -.024em; max-width: 12ch; }
.cta-final__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 64px; align-items: end; margin-top: clamp(32px, 4vw, 56px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid rgba(255,255,255,.2); }
.cta-final__row p { margin: 0; color: rgba(255,255,255,.78); max-width: 34em; font-size: 1.1rem; }
.cta-final__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.cta-final .link-tel { color: #fff; }
@media (max-width: 860px) { .cta-final__row { grid-template-columns: 1fr; } }

/* ---------- Autres expertises --------------------------------------- */
.others { padding-block: 64px; border-top: 1px solid var(--trait); }
.others ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; margin: 22px 0 0; list-style: none; }
.others a { display: block; height: 100%; padding: 20px 20px 20px 0; color: inherit; text-decoration: none; border-top: 2px solid var(--encre); transition: border-color .3s; }
.others a:hover { border-color: var(--bleu-encre); }
.others a span { display: block; font-stretch: 112%; font-weight: 750; font-size: 1.12rem; }
.others a small { display: block; margin-top: 6px; color: var(--acier); font-size: .9rem; }
.others a:hover span { color: var(--bleu-encre); }
@media (max-width: 900px) { .others ul { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .others ul { grid-template-columns: 1fr; } }


/* ---------- Galerie des réalisations -------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 36px; padding: 0; list-style: none; }
.filters button { min-height: 44px; padding: 8px 18px; border: 1px solid var(--trait); border-radius: 999px; background: #fff; color: var(--texte); font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.filters button:hover { border-color: var(--encre); }
.filters button[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: #fff; }
.gal-status { min-height: 1.6em; margin: -18px 0 28px; color: var(--acier); font-size: .95rem; }
.fiche { width: min(1280px, 100vw); max-width: 100vw; height: min(100dvh, 980px); max-height: 100dvh; margin: auto; padding: 0; border: 0; background: #fff; color: var(--texte); overflow: hidden; border-radius: 12px; }
.fiche::backdrop { background: rgba(14,17,20,.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.fiche[open] { animation: fiche-in .45s var(--ease-out); }
@keyframes fiche-in { from { opacity: 0; transform: translateY(20px) scale(.98); } to { opacity: 1; transform: none; } }
.fiche__in { display: grid; grid-template-columns: minmax(0, 1fr) 370px; height: 100%; }
.fiche__stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; min-height: 0; min-width: 0; background: #101316; }
.fiche__view { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); place-items: center; min-height: 0; min-width: 0; padding: 20px 68px; }
.fiche__view img, .fiche__view video { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; justify-self: center; align-self: center; animation: fade-in .4s var(--ease-out); }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.fiche__view picture { display: contents; }
.fiche__nav { position: absolute; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: rgba(20,24,28,.6); color: #fff; cursor: pointer; transition: background .2s, color .2s; }
.fiche__nav:hover { background: #fff; color: var(--encre); }
.fiche__nav--prev { left: 12px; } .fiche__nav--next { right: 12px; }
.fiche__thumbs { display: flex; gap: 8px; padding: 12px; overflow-x: auto; margin: 0; list-style: none; }
.fiche__thumbs button { position: relative; flex: none; width: 78px; height: 58px; padding: 0; border: 2px solid transparent; border-radius: 4px; background: #000; cursor: pointer; opacity: .6; overflow: hidden; }
.fiche__thumbs button[aria-current="true"] { border-color: var(--bleu); opacity: 1; }
.fiche__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.fiche__thumbs .is-vid::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-left: 14px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; filter: drop-shadow(0 0 3px rgba(0,0,0,.6)); }
.fiche__aside { display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: 28px 28px 24px; overflow-y: auto; }
.fiche__close { align-self: flex-end; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--trait); border-radius: 999px; background: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.fiche__close:hover { border-color: var(--encre); }
.fiche__cat { margin: 24px 0 8px; font-size: .9rem; color: var(--bleu-encre); font-weight: 650; }
.fiche__title { font-stretch: 114%; font-size: 1.75rem; line-height: 1.1; margin-bottom: 16px; }
.fiche__title:focus { outline: none; }
.fiche__count { font-size: .9rem; color: var(--acier); }
.fiche__alt { font-size: .95rem; color: var(--acier); border-left: 2px solid var(--bleu); padding-left: 12px; }
.fiche__details { margin: 0 0 16px; padding-left: 1.1em; }
.fiche__note { margin-top: auto; padding-top: 16px; font-size: .85rem; color: var(--acier); border-top: 1px solid var(--trait); }
.fiche__projnav { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }
.fiche__projnav button { flex: 1; min-height: 44px; border: 1px solid var(--trait); border-radius: 999px; background: #fff; font: inherit; font-size: .9rem; cursor: pointer; }
.fiche__projnav button:hover:not([disabled]) { border-color: var(--encre); }
.fiche__projnav button[disabled] { opacity: .4; cursor: default; }
@media (max-width: 900px) {
  .fiche { width: 100vw; height: 100dvh; border-radius: 0; }
  .fiche__in { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .fiche__view { padding: 12px 54px; }
  .fiche__aside { max-height: 42dvh; padding: 18px 20px; }
  .fiche__title { font-size: 1.35rem; }
  .fiche__close { position: absolute; top: 10px; right: 10px; z-index: 3; background: rgba(255,255,255,.95); }
  .fiche__stage { padding-top: 56px; }
}

/* ---------- Formulaires premium ------------------------------------- */
.form-card { padding: clamp(24px, 4vw, 56px); border-radius: 16px; background: #fff; border: 1px solid var(--trait); box-shadow: 0 40px 80px -60px rgba(20,24,28,.45); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 22px; }
.form-step { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 0; padding: 0 0 30px; border: 0; border-bottom: 1px solid var(--trait); }
.form-step + .form-step { padding-top: 30px; }
.form-step:last-of-type { border-bottom: 0; }
.form-step > legend { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 14px; padding: 0; margin-bottom: 4px; font-stretch: 116%; font-weight: 800; font-size: 1.35rem; }
.form-step > legend span { color: var(--bleu-encre); font-size: .95rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.form-step > legend { margin-bottom: 18px; }
.field { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label, .field .label { font-weight: 650; font-size: .96rem; }
.field .opt { font-weight: 400; color: var(--acier); }
.field input, .field select, .field textarea { width: 100%; min-height: 56px; padding: 14px 16px; border: 1.5px solid #c6ccd1; border-radius: 10px; background: var(--bardage-2); color: var(--texte); font: inherit; font-size: 1rem; transition: border-color .25s, background .25s, box-shadow .25s; -webkit-appearance: none; appearance: none; }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M2 5l5 5 5-5' fill='none' stroke='%231c2125' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px; }
.field textarea { min-height: 160px; resize: vertical; line-height: 1.5; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #9aa2a8; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--bleu-encre); background: #fff; box-shadow: 0 0 0 4px rgba(34,154,214,.18); }
.field [aria-invalid="true"] { border-color: #b3261e; background: #fff8f7; }
.field__hint { font-size: .88rem; color: var(--acier); margin: 0; }
.field__err { display: flex; gap: 6px; align-items: flex-start; font-size: .92rem; color: #b3261e; font-weight: 600; margin: 0; animation: fade-in .3s; }
.field__err:empty { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; border: 0; }
.chips legend { width: 100%; margin-bottom: 10px; font-weight: 650; font-size: .96rem; padding: 0; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 10px 18px; border: 1.5px solid #c6ccd1; border-radius: 999px; background: #fff; font-weight: 600; font-size: .95rem; transition: background .25s, border-color .25s, color .25s, transform .2s; }
.chip span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid currentColor; opacity: .5; transition: background .2s, opacity .2s; }
.chip input:hover + span { border-color: var(--encre); }
.chip input:checked + span { background: var(--encre); border-color: var(--encre); color: #fff; }
.chip input:checked + span::before { background: var(--bleu); border-color: var(--bleu); opacity: 1; }
.chip input:focus-visible + span { outline: 3px solid var(--bleu); outline-offset: 2px; }
.chips[aria-invalid="true"] .chip span { border-color: #b3261e; }
.drop { position: relative; display: grid; place-items: center; gap: 6px; min-height: 140px; padding: 24px; border: 1.5px dashed #9aa2a8; border-radius: 12px; background: var(--bardage-2); text-align: center; color: var(--acier); transition: border-color .25s, background .25s; }
.drop:hover, .drop.is-over { border-color: var(--bleu-encre); background: #eef6fb; }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop strong { color: var(--texte); }
.file-list { margin: 8px 0 0; padding: 0; list-style: none; font-size: .92rem; }
.file-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; margin-top: 6px; border-radius: 8px; background: var(--bardage-2); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-progress { position: sticky; top: calc(var(--hdr-h) + 24px); }
.form-progress ol { margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--trait); }
.form-progress li { position: relative; padding: 10px 0 10px 22px; color: var(--acier); font-weight: 600; transition: color .3s; }
.form-progress li::before { content: ""; position: absolute; left: -7px; top: 17px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--trait); transition: background .3s, border-color .3s; }
.form-progress li.is-done { color: var(--texte); }
.form-progress li.is-done::before { background: var(--bleu-encre); border-color: var(--bleu-encre); }
.form-submit { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding-top: 28px; border-top: 1px solid var(--trait); }
.form-submit p { margin: 0; max-width: 34em; }
.btn[disabled] { opacity: .7; cursor: progress; }
.btn .spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }
.btn.is-loading .spinner { display: inline-block; }
.btn.is-loading .btn__ico { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.form-msg { grid-column: 1 / -1; padding: 22px 24px; border-radius: 12px; }
.form-msg[hidden] { display: none; }
.form-msg--ok { background: #eaf6ef; border: 1px solid #b9dfc8; }
.form-msg--err { background: #fbeeed; border: 1px solid #efc4c0; margin-top: 24px; }
.form-msg h2, .form-msg h3 { font-size: 1.2rem; margin-bottom: 6px; }
.form-msg p:last-child { margin: 0; }
.ok-check { width: 56px; height: 56px; margin-bottom: 16px; }
.ok-check circle { stroke: #1e7a46; stroke-width: 2; fill: none; stroke-dasharray: 160; stroke-dashoffset: 160; animation: draw .8s var(--ease-out) forwards; }
.ok-check path { stroke: #1e7a46; stroke-width: 3; fill: none; stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .5s var(--ease-out) .6s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (max-width: 640px) { .form-grid, .form-step { grid-template-columns: 1fr; } }

/* ---------- Contact ------------------------------------------------- */
.contact-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.contact-cards > li { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 30px 28px; border-radius: var(--r-panel); background: #fff; border: 1px solid var(--trait); transition: transform .45s var(--ease-out), box-shadow .45s; }
.contact-cards > li:hover { transform: translateY(-5px); box-shadow: 0 30px 50px -36px rgba(20,24,28,.5); }
.contact-cards .label { color: var(--acier); font-size: .92rem; font-weight: 600; }
.contact-cards .big { font-stretch: 114%; font-weight: 800; font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.2; color: var(--texte); text-decoration: none; word-break: break-word; }
.contact-cards a.big:hover { color: var(--bleu-encre); }
@media (max-width: 900px) { .contact-cards { grid-template-columns: 1fr; } }
.map-card { position: relative; display: block; min-height: 360px; border-radius: var(--r-panel); overflow: hidden; background: #dfe4e7; color: var(--texte); text-decoration: none; isolation: isolate; }
.map-card svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.map-card__pin { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -100%); }
.map-card__pin::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 60px; height: 60px; margin-left: -30px; border-radius: 50%; border: 2px solid var(--bleu); animation: ping 2.4s var(--ease-out) 3; opacity: 0; }
@keyframes ping { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
.map-card__label { position: absolute; left: 20px; right: 20px; bottom: 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 12px; background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-weight: 650; }
.todo { background: #fff5d6; padding: 0 4px; border-radius: 3px; }
.notice { padding: 18px 22px; border: 1px dashed var(--acier); border-radius: 10px; background: #fff; font-size: .95rem; }

/* ---------- FAQ ----------------------------------------------------- */
.faq-group { margin-bottom: 56px; }
.faq-group h2 { font-stretch: 114%; font-size: 1.55rem; margin-bottom: 12px; }
.faq details { border-bottom: 1px solid var(--trait); }
.faq summary { position: relative; display: block; padding: 22px 52px 22px 0; font-weight: 700; font-size: 1.08rem; cursor: pointer; list-style: none; transition: color .2s; }
.faq summary:hover { color: var(--bleu-encre); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; border: 1px solid var(--trait); background: linear-gradient(currentColor, currentColor) center / 10px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 10px no-repeat; transition: transform .35s var(--ease), background-size .3s; }
.faq details[open] summary::after { transform: rotate(180deg); background-size: 10px 1.5px, 1.5px 0; }
.faq details > div { padding: 0 0 22px; max-width: 46em; color: #3b4247; }
.dark .faq details, .dark.faq details { border-color: rgba(255,255,255,.18); }
.dark .faq details > div, .dark.faq details > div { color: rgba(255,255,255,.78); }
.dark .faq summary::after, .dark.faq summary::after { border-color: rgba(255,255,255,.3); }

/* ---------- Divers -------------------------------------------------- */
.timeline { margin: 0; list-style: none; border-left: 2px solid var(--trait); }
.timeline li { position: relative; padding: 0 0 40px 34px; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 10px; width: 12px; height: 12px; border-radius: 50%; background: var(--bleu); box-shadow: 0 0 0 5px rgba(34,154,214,.18); }
.timeline .year { display: block; font-stretch: 125%; font-weight: 820; font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.05; }
.timeline h3 { font-size: 1.14rem; margin: 6px 0; }
.timeline p { margin: 0; color: var(--acier); }
.dark .timeline { border-color: rgba(255,255,255,.2); }
.dark .timeline p { color: rgba(255,255,255,.72); }
.certs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.certs button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; text-align: left; }
.certs .frame { aspect-ratio: 4 / 3; background: #fff; padding: 10px; transition: transform .45s var(--ease-out), box-shadow .45s; }
.certs button:hover .frame { transform: translateY(-5px) rotate(-.6deg); box-shadow: 0 30px 50px -34px rgba(23,38,29,.6); }
.certs .frame img { object-fit: contain; background: #fff; }
.certs strong { display: block; margin-top: 12px; font-stretch: 114%; font-size: 1.1rem; }
.certs span { font-size: .9rem; color: var(--acier); }
@media (max-width: 800px) { .certs { grid-template-columns: 1fr 1fr; } }
.zoom { padding: 0; border: 0; background: transparent; max-width: 96vw; max-height: 96dvh; }
.zoom::backdrop { background: rgba(14,17,20,.9); }
.zoom img { max-width: 92vw; max-height: 86dvh; width: auto; margin: 0 auto; border-radius: 6px; }
.zoom button { display: block; margin: 14px auto 0; min-height: 44px; padding: 8px 20px; background: #fff; border: 0; border-radius: 999px; font: inherit; font-weight: 650; cursor: pointer; }
.err-page { min-height: 70vh; display: grid; align-content: center; }

/* ---------- Pages juridiques ---------------------------------------- */
.legal-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.legal-toc { position: sticky; top: calc(var(--hdr-h) + 40px); padding: 22px; border-radius: var(--r-panel); background: var(--bardage-2); }
.legal-toc b { display: block; margin-bottom: 10px; font-stretch: 112%; }
.legal-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.legal-toc li { counter-increment: toc; }
.legal-toc a { display: flex; gap: 10px; padding: 7px 8px; border-radius: 6px; color: var(--acier); text-decoration: none; font-size: .94rem; transition: background .2s, color .2s; }
.legal-toc a::before { content: counter(toc, decimal-leading-zero); color: var(--gris-doux); font-variant-numeric: tabular-nums; }
.legal-toc a:hover, .legal-toc a.is-current { background: #fff; color: var(--texte); }
.legal { max-width: 46em; counter-reset: lsec; }
.legal section { padding-block: 8px 28px; border-bottom: 1px solid var(--trait); scroll-margin-top: calc(var(--hdr-h) + 40px); counter-increment: lsec; }
.legal section:last-of-type { border-bottom: 0; }
.legal h2 { display: flex; gap: 14px; align-items: baseline; margin: 28px 0 14px; font-stretch: 114%; font-size: 1.5rem; }
.legal h2::before { content: counter(lsec, decimal-leading-zero); color: var(--bleu-encre); font-size: 1rem; font-variant-numeric: tabular-nums; }
.legal dl { display: grid; grid-template-columns: max-content 1fr; gap: 10px 28px; margin: 0 0 1em; padding: 20px 22px; border-radius: var(--r-panel); background: var(--bardage-2); }
.legal dt { font-weight: 650; }
.legal dd { margin: 0; }
@media (max-width: 900px) { .legal-layout { grid-template-columns: 1fr; } .legal-toc { position: static; } }
@media (max-width: 560px) { .legal dl { grid-template-columns: 1fr; gap: 2px; } .legal dd { margin-bottom: 10px; } }

/* ---------- Spécifique accueil -------------------------------------- */
.home-still figcaption { margin-top: 10px; font-size: .9rem; color: rgba(255,255,255,.7); }
.atelier-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); row-gap: 28px; }
.atelier-grid > * { min-width: 0; }
.atelier-grid__vid { grid-column: 1 / span 8; }
.atelier-grid__side { grid-column: 9 / span 4; display: grid; gap: clamp(16px, 2vw, 28px); align-content: start; }
@media (max-width: 900px) { .atelier-grid__vid, .atelier-grid__side { grid-column: 1 / -1; } .atelier-grid__side { grid-template-columns: 1fr 1fr; } }
.proof-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 8vw, 128px); align-items: center; }
.proof-frame { background: #fff; padding: clamp(16px, 2vw, 28px); border-radius: 6px; box-shadow: 0 30px 60px -40px rgba(20,24,28,.45); }
.proof-frame .pic img { object-fit: contain; background: #fff; }
@media (max-width: 900px) { .proof-grid { grid-template-columns: 1fr; } .proof-grid > :first-child { max-width: 460px; } }

/* ---------- Éco-responsable (page) ---------------------------------- */
.p-eco-responsable { --sauge-2: #f1f5f1; }
.p-eco-responsable .sec--grey { background: var(--sauge-2); }
.p-eco-responsable .kicker { color: var(--mousse); }
.p-eco-responsable .ph__media::after { background: linear-gradient(90deg, rgba(16,32,23,.85) 0%, rgba(16,32,23,.45) 55%, rgba(16,32,23,.15) 100%), linear-gradient(180deg, rgba(16,32,23,.3) 0%, rgba(16,32,23,0) 35%, rgba(16,32,23,.85) 100%); }
.p-eco-responsable .steps li::before, .p-eco-responsable .checks li::before { color: var(--mousse); border-color: var(--mousse); }
.p-eco-responsable .steps li::after { background: var(--mousse); }
.eco-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.eco-pillars > li { position: relative; padding: 34px 30px 36px; border-radius: 14px; background: rgba(255,255,255,.62); border: 1px solid rgba(47,90,67,.16); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); overflow: hidden; transition: transform .45s var(--ease-out); }
.eco-pillars > li:hover { transform: translateY(-6px); }
.eco-pillars h3 { font-stretch: 116%; font-size: 1.5rem; margin: 16px 0 10px; color: #17261d; }
.eco-pillars p { color: #3d5246; margin: 0 0 14px; }
.eco-pillars ul { margin: 0; padding: 0; list-style: none; }
.eco-pillars ul li { position: relative; padding: 9px 0 9px 22px; border-top: 1px solid rgba(47,90,67,.14); color: #24372b; font-size: .96rem; }
.eco-pillars ul li::before { content: ""; position: absolute; left: 0; top: 17px; width: 8px; height: 8px; border-radius: 50% 0; background: var(--mousse); }
.eco-pillars__n { font-size: .9rem; font-weight: 700; color: var(--mousse); }
.eco-stage { position: relative; overflow: hidden; background: var(--sauge); isolation: isolate; }
.eco-stage .eco-band__bg { opacity: .7; }
@media (max-width: 960px) { .eco-pillars { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}
@media print { .hdr, .ftr, .cta-final, .hero__pause { display: none; } }

/* ---------- Page devis ---------------------------------------------------- */
.devis-reassure { display: flex; gap: 28px; margin: 0; padding: 0; list-style: none; }
.devis-reassure li { padding-left: 16px; border-left: 2px solid var(--bleu); color: var(--acier); font-size: .94rem; line-height: 1.35; }
.devis-reassure b { display: block; color: var(--texte); font-stretch: 112%; }
.devis-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.devis-aside { position: sticky; top: calc(var(--hdr-h) + 24px); display: grid; gap: 28px; }
.devis-aside .form-progress { position: static; }
.form-progress b { display: block; margin-bottom: 14px; font-stretch: 112%; }
.form-progress a { color: inherit; text-decoration: none; }
.form-progress a:hover { color: var(--bleu-encre); }
.devis-direct { display: grid; gap: 4px; padding: 20px; border-radius: var(--r-panel); background: var(--bardage-2); }
.devis-direct p { margin: 0 0 4px; }
.devis-direct .big { font-stretch: 114%; font-weight: 800; font-size: 1.3rem; color: var(--texte); text-decoration: none; }
.devis-direct a:not(.big) { font-size: .94rem; word-break: break-all; }
.form-step { scroll-margin-top: calc(var(--hdr-h) + 24px); }
@media (max-width: 960px) {
  .devis-layout { grid-template-columns: 1fr; }
  .devis-aside { position: static; }
  .devis-aside .form-progress { display: none; }
  .devis-reassure { flex-wrap: wrap; }
}
/* ---------- Page contact -------------------------------------------------- */
.contact-cards address { margin: 0; }
.contact-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.contact-aside { position: sticky; top: calc(var(--hdr-h) + 24px); }
@media (max-width: 900px) { .contact-split { grid-template-columns: 1fr; } .contact-aside { position: static; } }
/* ---------- Page expertises : rangées alternées ---------------------------- */
.xrows { margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(56px, 8vw, 120px); }
.xrow { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.xrow:nth-child(even) .xrow__media { order: 2; }
.xrow__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-img); background: var(--bardage); }
.xrow__media .pic, .xrow__media img { width: 100%; height: 100%; object-fit: cover; }
.xrow__media img { transition: transform 1.1s var(--ease-out); }
.xrow:hover .xrow__media img { transform: scale(1.05); }
.xrow__n { display: block; margin-bottom: 14px; font-stretch: 125%; font-weight: 800; font-size: clamp(2.4rem, 4vw, 3.6rem); line-height: 1; color: var(--bleu-encre); }
.xrow h2 a { color: inherit; text-decoration: none; }
.xrow h2 a:hover { color: var(--bleu-encre); }
.xrow p { color: var(--acier); margin: 14px 0 22px; max-width: 32em; }
@media (max-width: 800px) { .xrow { grid-template-columns: 1fr; } .xrow:nth-child(even) .xrow__media { order: 0; } }
.contact-cards address.big { font-size: clamp(1.1rem, 1.6vw, 1.3rem); }
.panels--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 1000px) { .panels--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .panels--3 { grid-template-columns: 1fr; } }

/* =========================================================================
   COVERING VÉHICULES
   ========================================================================= */
@property --wrap { syntax: '<number>'; inherits: true; initial-value: 1; }
/* Schéma de véhicule : 3 calques empilés */
.veh { position: relative; width: 100%; aspect-ratio: 640 / 280; }
.veh__l, .veh__wrap { position: absolute; inset: 0; width: 100%; height: 100%; }
.veh__wrap svg { display: block; width: 100%; height: 100%; }
.veh__wrap { clip-path: inset(0 calc((1 - var(--wrap, 1)) * 100%) 0 0); transition: clip-path .5s var(--ease-out), transform .6s var(--ease-out), opacity .5s; }
.veh__body { fill: #2b3238; transition: fill .6s; }
.veh__outline { fill: none; stroke: rgba(255,255,255,.72); stroke-width: 1.6; stroke-linejoin: round; }
.veh__glass { fill: rgba(150,200,230,.2); stroke: rgba(255,255,255,.55); stroke-width: 1.2; }
.veh__lines { fill: none; stroke: rgba(255,255,255,.3); stroke-width: 1.2; }
.veh__tyre { fill: #0d1013; stroke: rgba(255,255,255,.55); stroke-width: 1.5; }
.veh__rim { fill: #3a4249; stroke: rgba(255,255,255,.45); stroke-width: 1.2; }
.veh__cut { fill: none; stroke: #fff; stroke-width: 1.6; stroke-dasharray: 6 6; opacity: 0; transition: opacity .4s; }
.veh__dims { fill: none; stroke: var(--bleu); stroke-width: 1.2; opacity: 0; transition: opacity .5s; }
.veh__dims text { fill: var(--bleu); stroke: none; font: 600 12px/1 Archivo, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.veh__dimv { display: none; }
.w-a { fill: var(--bleu); } .w-b { fill: #0b6ea6; } .w-c { fill: #fff; opacity: .92; }
.w-d { fill: #1c2228; } .w-e { fill: var(--bleu); } .w-f { fill: #e8ebed; }
.w-logo rect { fill: #fff; }
.w-logo text { fill: #14181c; font: 800 14px/1 Archivo, system-ui, sans-serif; font-stretch: 120%; letter-spacing: .08em; }
.veh--partial .w-logo rect { fill: var(--bleu); } .veh--partial .w-logo text { fill: #fff; }
/* Variante claire (avant covering) */
.veh--plain .veh__body { fill: #e3e8eb; }
.veh--plain .veh__outline { stroke: #8a949b; }
.veh--plain .veh__lines { stroke: rgba(20,24,28,.22); }
.veh--plain .veh__glass { fill: #9fb3c0; stroke: #8a949b; }
/* Variante fantôme (emplacement photo) */
.veh--ghost .veh__body { fill: rgba(255,255,255,.025); }
.veh--ghost .veh__outline { stroke: rgba(255,255,255,.32); stroke-dasharray: 5 6; }
.veh--ghost .veh__glass { fill: none; stroke: rgba(255,255,255,.18); }
.veh--ghost .veh__lines { stroke: rgba(255,255,255,.12); }
.veh--ghost .veh__tyre { fill: none; stroke: rgba(255,255,255,.28); }
.veh--ghost .veh__rim { fill: none; stroke: rgba(255,255,255,.18); }
.veh--ghost .veh__wrap { display: none; }

/* Emplacement photo « à fournir » */
.vslot { position: relative; display: grid; place-items: center; margin: 0; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-img); background-color: #181d22; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px), radial-gradient(ellipse at 50% 40%, #252c33 0%, #15191d 75%); background-size: 40px 40px, 40px 40px, 100% 100%; isolation: isolate; }
.vslot::before { content: ""; position: absolute; inset: 14px; border: 1px dashed rgba(255,255,255,.16); border-radius: 3px; pointer-events: none; }
.vslot .veh { width: 76%; transition: transform 1.2s var(--ease-out); }
.vslot__cap { position: absolute; left: 22px; right: 22px; bottom: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: rgba(255,255,255,.72); font-size: .88rem; line-height: 1.35; }
.vslot__cap strong { padding: 4px 10px; border-radius: 999px; background: rgba(34,154,214,.16); border: 1px solid rgba(34,154,214,.5); color: #8fd0f2; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.vslot--wide { aspect-ratio: 21 / 9; border-radius: 0; }
.vslot--4x3 { aspect-ratio: 4 / 3; } .vslot--1x1 { aspect-ratio: 1; } .vslot--3x4 { aspect-ratio: 3 / 4; }
.vslot--3x4 .veh, .vslot--1x1 .veh { width: 120%; }
.vslot--light { background-color: #e8ebed; background-image: linear-gradient(rgba(20,24,28,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(20,24,28,.06) 1px, transparent 1px); }
.vslot--light::before { border-color: rgba(20,24,28,.2); }
.vslot--light .vslot__cap { color: var(--acier); }
.vslot--light .vslot__cap strong { color: var(--bleu-encre); background: #fff; }
.vslot--light .veh--ghost .veh__outline { stroke: rgba(20,24,28,.35); }
.vslot--light .veh--ghost .veh__glass, .vslot--light .veh--ghost .veh__tyre, .vslot--light .veh--ghost .veh__rim { stroke: rgba(20,24,28,.22); }
.vslot--light .veh--ghost .veh__lines { stroke: rgba(20,24,28,.12); }

/* Hero */
.cov-hero { position: relative; overflow: hidden; isolation: isolate; padding: calc(var(--hdr-h) + clamp(56px, 7vw, 96px)) 0 clamp(36px, 4vw, 56px); }
.cov-hero__grid-bg { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 72% 52%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 70% at 72% 52%, #000 20%, transparent 75%); }
.cov-hero__in { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.cov-hero h1 { max-width: 12ch; }
.cov-hero .lead { margin-top: 26px; max-width: 32em; }
.cov-hero .btns { margin-top: 32px; }
.cov-hero__veh { position: relative; margin: 0; }
.cov-hero__veh .veh { width: 108%; margin-left: -2%; }
.cov-hero__cap { display: flex; justify-content: space-between; gap: 16px; margin-top: 18px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14); font-size: .82rem; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .08em; }
.cov-hero__types { display: flex; flex-wrap: wrap; gap: 10px 0; margin: clamp(40px, 5vw, 72px) 0 0; padding: 22px 0 0; list-style: none; border-top: 1px solid rgba(255,255,255,.14); }
.cov-hero__types li { font-stretch: 116%; font-weight: 750; font-size: clamp(1rem, 1.6vw, 1.3rem); }
.cov-hero__types li + li::before { content: "/"; margin: 0 16px; color: var(--bleu); font-weight: 400; }
.veh--hero .veh__dims { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .js .veh--hero .veh__wrap { animation: wrap-in 2.2s var(--ease-out) .9s both; }
  .js .veh--hero .veh__dims { animation: dims-out .8s ease 2.6s both; }
}
@keyframes wrap-in { from { --wrap: 0; } to { --wrap: 1; } }
@keyframes dims-out { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .veh--hero .veh__dims { opacity: 0; } }
@media (max-width: 960px) { .cov-hero__in { grid-template-columns: 1fr; } .cov-hero__veh .veh { width: 100%; margin: 0; } }

/* Usages */
.cov-uses { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.cov-uses__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--trait); }
.cov-uses__list li { border-bottom: 1px solid var(--trait); }
.cov-uses__list button { display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: auto 0fr; width: 100%; padding: 18px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: grid-template-rows .45s var(--ease-out), padding .45s; }
.cov-uses__n { grid-row: 1 / span 2; padding-top: 6px; font-size: .9rem; font-weight: 700; color: var(--gris-doux, #8a949b); font-variant-numeric: tabular-nums; transition: color .3s; }
.cov-uses__t { font-stretch: 116%; font-weight: 780; font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1.15; transition: color .3s, transform .45s var(--ease-out); }
.cov-uses__d { overflow: hidden; min-height: 0; color: var(--acier); opacity: 0; transition: opacity .35s; }
.cov-uses__list li.is-active button { grid-template-rows: auto 1fr; padding: 22px 0 24px; }
.cov-uses__list li.is-active .cov-uses__d { opacity: 1; padding-top: 10px; }
.cov-uses__list li.is-active .cov-uses__n, .cov-uses__list button:hover .cov-uses__n { color: var(--bleu-encre); }
.cov-uses__list button:hover .cov-uses__t { transform: translateX(6px); }
.cov-uses__list button:focus-visible { outline: 3px solid var(--bleu); outline-offset: 4px; }
.cov-uses__stage { position: sticky; top: calc(var(--hdr-h) + 32px); }
.cov-uses__frame { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background-color: #181d22; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 40px 40px; }
.cov-uses__item { position: absolute; inset: 0; display: grid; place-items: center; padding: 8%; opacity: 0; transform: translateX(6%) scale(.96); transition: opacity .55s var(--ease-out), transform .8s var(--ease-out); }
.cov-uses__item.is-active { opacity: 1; transform: none; }
.cov-uses__item--fleet { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3%; padding: 6%; }
.cov-uses__item--photo { padding: 0; }
.cov-uses__item--photo .pic, .cov-uses__item--photo img { width: 100%; height: 100%; object-fit: cover; }
.cov-uses__label { position: absolute; left: 18px; bottom: 16px; z-index: 2; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.75); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 960px) {
  .cov-uses { grid-template-columns: 1fr; }
  .cov-uses__stage { position: sticky; top: calc(var(--hdr-h) + 8px); z-index: 2; order: -1; }
  .cov-uses__frame { aspect-ratio: 16 / 9; }
}

/* Composition éditoriale véhicules */
.cov-edit { padding-block: var(--sec); overflow: hidden; }
.cov-edit__head { max-width: 58rem; margin-bottom: clamp(48px, 6vw, 88px); }
.cov-edit__title { font-stretch: 122%; font-size: clamp(2.4rem, 6vw, 5.4rem); line-height: .96; letter-spacing: -.02em; }
.cov-edit__head .lead { margin-top: 28px; max-width: 38em; }
.cov-edit__wide .veh { transform: scale(calc(.9 + var(--p, .5) * .16)); }
.cov-edit__duo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; margin-top: clamp(64px, 8vw, 128px); }
.cov-edit__big { grid-column: 1 / span 8; grid-row: 1 / span 2; }
.cov-edit__small { grid-column: 8 / span 5; grid-row: 1; z-index: 2; margin-top: -12%; transform: translateY(calc((.5 - var(--p, .5)) * 90px)); box-shadow: 0 40px 80px -40px rgba(0,0,0,.8); border-radius: var(--r-img); }
.cov-edit__txt { grid-column: 9 / span 4; grid-row: 2; align-self: end; }
.cov-edit__txt p { margin-top: 14px; }
.cov-edit__trio { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: start; margin-top: clamp(64px, 8vw, 128px); }
.cov-edit__ill { margin: 18% 0 0; }
.cov-edit__ill .caption { margin-top: 12px; }
.cov-edit__sizes { margin-top: clamp(72px, 9vw, 140px); }
.cov-sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 28px 0 0; padding: 0; list-style: none; align-items: end; }
.cov-sizes .vslot { aspect-ratio: 4 / 3; }
.cov-sizes li:nth-child(1) .veh { width: 66%; } .cov-sizes li:nth-child(2) .veh { width: 80%; } .cov-sizes li:nth-child(3) .veh { width: 92%; }
.cov-ba { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(32px, 5vw, 80px); align-items: center; margin-top: clamp(72px, 9vw, 140px); }
.cov-ba__text p { margin-top: 16px; }
.cov-ba__stage { position: relative; aspect-ratio: 640 / 330; border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, #20262c 0%, #14181c 70%, #101316 100%); }
.cov-ba__stage::after { content: ""; position: absolute; left: 0; right: 0; top: 79%; height: 1px; background: rgba(255,255,255,.12); }
.cov-ba__after, .cov-ba__before { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 6%; }
.cov-ba__before { background: linear-gradient(180deg, #2a3137 0%, #1a1f24 70%, #15191d 100%); clip-path: inset(0 calc(100% - var(--ba)) 0 0); }
.cov-ba__tag { position: absolute; left: 18px; top: 16px; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.12); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cov-ba__tag--r { left: auto; right: 18px; background: var(--bleu); }
.cov-ba__handle { position: absolute; top: 0; bottom: 0; left: var(--ba); width: 2px; margin-left: -1px; background: #fff; pointer-events: none; }
.cov-ba__handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M8 6l-5 5 5 5M14 6l5 5-5 5' fill='none' stroke='%2314181c' stroke-width='1.8'/%3E%3C/svg%3E") center no-repeat; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.cov-ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.cov-ba__stage:focus-within { outline: 3px solid var(--bleu); outline-offset: 4px; }
@media (max-width: 900px) {
  .cov-edit__duo { grid-template-columns: 1fr; }
  .cov-edit__big, .cov-edit__small, .cov-edit__txt { grid-column: 1; grid-row: auto; }
  .cov-edit__small { width: 78%; margin: 16px 0 0 auto; transform: none; }
  .cov-edit__trio, .cov-ba { grid-template-columns: 1fr; }
  .cov-edit__ill { margin-top: 0; }
  .cov-sizes { grid-template-columns: 1fr; }
  .vslot--wide { aspect-ratio: 16 / 10; }
}

/* Processus : séquence épinglée pilotée par le scroll */
.cov-proc { position: relative; background: #101316; color: #fff; padding-block: var(--sec); }
.cov-proc__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "head head" "stage steps"; gap: clamp(28px, 4vw, 56px) clamp(32px, 5vw, 80px); align-items: center; }
.cov-proc__head { grid-area: head; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 40px; }
.cov-proc__head .kicker { width: 100%; margin-bottom: 0; }
.cov-proc__bar { flex: 0 0 min(320px, 100%); height: 2px; background: rgba(255,255,255,.14); }
.cov-proc__bar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--bleu); }
.cov-proc__stage { grid-area: stage; position: relative; }
.cov-proc__steps { grid-area: steps; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; counter-reset: none; }
.cov-proc__steps li { border-top: 1px solid rgba(255,255,255,.16); padding-top: 18px; }
.cov-proc__n { display: block; font-stretch: 125%; font-weight: 820; font-size: 2rem; line-height: 1; color: var(--bleu); }
.cov-proc__steps h3 { margin: 12px 0 8px; font-stretch: 112%; font-size: 1.15rem; }
.cov-proc__steps p { margin: 0; color: rgba(255,255,255,.7); font-size: .96rem; }
.cov-proc__bat, .cov-proc__ok { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .5s var(--ease-out); }
.cov-proc__bat { left: 2%; top: 0; background: #fff; color: var(--encre); }
.cov-proc__ok { right: 2%; top: 0; background: #1e7a46; color: #fff; }
@media (min-width: 1000px) and (prefers-reduced-motion: no-preference) {
  .js .cov-proc { height: 520vh; padding: 0; }
  .js .cov-proc__pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding-top: var(--hdr-h); }
  .js .cov-proc__grid { width: 100%; }
  .js .cov-proc__steps { display: grid; grid-template-columns: 1fr; }
  .js .cov-proc__steps li { grid-area: 1 / 1; border: 0; padding: 0; opacity: 0; transform: translateY(26px); transition: opacity .45s, transform .6s var(--ease-out); pointer-events: none; }
  .js .cov-proc__n { font-size: clamp(4rem, 8vw, 7rem); }
  .js .cov-proc__steps h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); margin-top: 18px; }
  .js .cov-proc__steps p { font-size: 1.05rem; max-width: 26em; }
  .js .cov-proc[data-step="0"] li[data-i="0"], .js .cov-proc[data-step="1"] li[data-i="1"], .js .cov-proc[data-step="2"] li[data-i="2"], .js .cov-proc[data-step="3"] li[data-i="3"], .js .cov-proc[data-step="4"] li[data-i="4"], .js .cov-proc[data-step="5"] li[data-i="5"] { opacity: 1; transform: none; pointer-events: auto; }
  /* États du véhicule selon l'étape */
  .js .cov-proc[data-step="0"] .veh--proc { --wrap: 0; }
  .js .cov-proc[data-step="0"] .veh__dims { opacity: 1; }
  .js .cov-proc[data-step="1"] .veh__wrap { opacity: .55; }
  .js .cov-proc[data-step="1"] .cov-proc__bat { opacity: 1; transform: none; }
  .js .cov-proc[data-step="2"] .veh__wrap { transform: translateY(-7%); }
  .js .cov-proc[data-step="2"] .veh__cut { opacity: .9; }
  .js .cov-proc[data-step="3"] .veh--proc { --wrap: 0; }
  .js .cov-proc[data-step="3"] .veh__body { fill: #46515a; }
  .js .cov-proc[data-step="4"] .veh--proc { --wrap: var(--sp, 0); }
  .js .cov-proc[data-step="4"] .veh__wrap { transition: transform .6s, opacity .5s; }
  .js .cov-proc[data-step="5"] .cov-proc__ok { opacity: 1; transform: none; }
}
@media (max-width: 999px) {
  .cov-proc__grid { grid-template-columns: 1fr; grid-template-areas: "head" "stage" "steps"; }
}
@media (max-width: 600px) { .cov-proc__steps { grid-template-columns: 1fr; } }

/* Galerie covering */
.cov-gal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.cov-gal__item { min-width: 0; }
.cov-gal__item[hidden] { display: none; }
.cov-gal { transition: opacity .17s ease; }
.cov-gal.is-out { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .cov-gal.is-in .cov-gal__item { animation: covIn .5s var(--ease-out, ease) both; animation-delay: calc(var(--k, 0) * 35ms); }
}
@keyframes covIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.cov-gal__item .vslot { aspect-ratio: auto; height: 100%; min-height: 240px; }
.cov-gal__item--xl { grid-column: span 2; grid-row: span 2; }
.cov-gal__item--wide { grid-column: span 2; }
.cov-gal__item--xl .vslot { min-height: 500px; }
.cov-gal__item:not(.cov-gal__item--xl) { aspect-ratio: 3 / 2; }
.cov-gal__item--fit .cov-gal__img { background: linear-gradient(var(--g)); }
.cov-gal__item--fit .cov-gal__img img { object-fit: contain; }
.cov-gal__real { position: relative; display: block; height: 100%; min-height: 0; overflow: hidden; border-radius: var(--r-img); color: #fff; text-decoration: none; }
.cov-gal__img, .cov-gal__img .pic { position: absolute; inset: 0; }
.cov-gal__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.cov-gal__real:hover img { transform: scale(1.06); }
.cov-gal__meta { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 2px; padding: 40px 18px 16px; background: linear-gradient(0deg, rgba(14,17,20,.85), transparent); }
.cov-gal__meta b { font-stretch: 112%; font-size: 1.08rem; }
.cov-gal__meta span { font-size: .86rem; opacity: .8; }
@media (max-width: 900px) { .cov-gal { grid-template-columns: 1fr 1fr; } .cov-gal__item--xl .vslot { min-height: 320px; } }
@media (max-width: 600px) { .cov-gal { grid-template-columns: 1fr; } .cov-gal__item--xl, .cov-gal__item--wide { grid-column: auto; grid-row: auto; aspect-ratio: 3 / 2; } }
.cov-hero h1 { max-width: none; font-size: clamp(2.6rem, 5.4vw, 5.6rem); }
.cov-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .cov-tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cov-tiles { grid-template-columns: 1fr; } }

/* =========================================================================
   MOTION AVANCÉ — interactions communes (fx.js)
   ========================================================================= */
/* Titres lettre par lettre */
[data-chars] .cw { display: inline-block; white-space: nowrap; }
[data-chars] .ch { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
[data-chars] .ch > span { display: inline-block; transform: translateY(110%) rotate(6deg); transform-origin: 0 100%; transition: transform 1.1s var(--ease-out); transition-delay: calc(var(--c) * 28ms + var(--d, .15s)); }
[data-chars].is-in .ch > span { transform: none; }
/* Inclinaison en profondeur */
[data-tilt] { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: box-shadow .5s; will-change: transform; }
[data-tilt].is-tilting { box-shadow: 0 50px 80px -50px rgba(0,0,0,.55); }
.fx-glare { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.22), rgba(255,255,255,0) 55%); opacity: 0; transition: opacity .5s; mix-blend-mode: soft-light; }
.is-tilting > .fx-glare { opacity: 1; }
/* Curseur contextuel */
.fx-cursor { position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none; }
.fx-cursor span { display: grid; place-items: center; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; background: rgba(34,154,214,.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-weight: 700; font-size: .86rem; letter-spacing: .02em; transform: scale(0); transition: transform .45s var(--ease-out); }
.fx-cursor.is-on span { transform: scale(1); }
[data-magnetic] { will-change: transform; }

/* =========================================================================
   ACCUEIL — hero immersif en profondeur
   ========================================================================= */
.hero { display: block; min-height: 0; --push: clamp(0, calc(var(--p, 0) / .82), 1); }
.hero__pin { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; perspective: 1400px; perspective-origin: 72% 38%; }
.hero__media { transform: scale(calc(1.04 + var(--push) * .34)) translate3d(calc(var(--mx, 0) * -14px), calc(var(--my, 0) * -10px), 0); transform-origin: 62% 52%; will-change: transform; }
.hero__light { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(700px circle at calc(62% + var(--mx, 0) * 22%) calc(42% + var(--my, 0) * 20%), rgba(34,154,214,.2), rgba(34,154,214,0) 62%); mix-blend-mode: screen; opacity: calc(1 - var(--push)); }
.hero__stage { position: absolute; right: 5vw; top: calc(var(--hdr-h) + 5vh); z-index: 0; width: 42vw; height: 54vh; transform-style: preserve-3d; transform: rotateX(calc(var(--my, 0) * -5deg)) rotateY(calc(var(--mx, 0) * 7deg)); pointer-events: none; }
.hero__sheet { position: absolute; overflow: hidden; border-radius: 4px; background: #0d1013; box-shadow: 0 60px 90px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08); opacity: clamp(0, calc(1.25 - var(--push) * 1.5), 1); will-change: transform; }
.hero__sheet .pic { display: block; width: 100%; height: 100%; }
.hero__sheet img { width: 100%; height: 100%; object-fit: cover; }
.hero__sheet--a { right: 2%; top: 12%; width: 56%; aspect-ratio: 4 / 3; transform: translate3d(calc(var(--push) * 16vw), calc(var(--push) * -4vh), calc(var(--push) * 560px)) rotateY(-16deg) rotateX(4deg) rotateZ(-1.2deg); }
.hero__sheet--b { left: 4%; top: 0; width: 30%; aspect-ratio: 3 / 4; transform: translate3d(calc(var(--push) * -12vw), calc(var(--push) * -20vh), calc(140px + var(--push) * 900px)) rotateY(-10deg) rotateZ(2.4deg); }
.hero__sheet--c { right: 26%; bottom: -4%; width: 36%; aspect-ratio: 16 / 10; transform: translate3d(calc(var(--push) * 8vw), calc(var(--push) * 28vh), calc(260px + var(--push) * 1100px)) rotateY(-20deg) rotateX(-3deg); }
.hero__kicker { display: inline-block; margin-bottom: 22px; color: rgba(255,255,255,.72); font-size: .82rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; }
.hero__in { z-index: 1; transform: translate3d(0, calc(var(--push) * -12vh), 0); opacity: clamp(0, calc(1 - var(--push) * 1.6), 1); }
.hero__frame { transform: scale(calc(1 + var(--push) * .08)); opacity: calc(1 - var(--push)); }
.hero__veil { position: absolute; inset: 0; z-index: 4; background: #fff; opacity: clamp(0, calc((var(--p, 0) - .62) / .36), 1); pointer-events: none; }
.hero__scroll { opacity: calc(1 - var(--push) * 4); }
@media (prefers-reduced-motion: no-preference) {
  .js .hero { height: 185vh; }
  .js .hero__pin { position: sticky; top: 0; height: 100svh; }
  .js .hero__sheet .pic { animation: sheet-in 1.8s var(--ease-out) both, sheet-float 9s ease-in-out 2s infinite alternate; }
  .js .hero__sheet--a .pic { animation-delay: .5s, 2.3s; }
  .js .hero__sheet--b .pic { animation-delay: .75s, 2.6s; animation-duration: 1.8s, 11s; }
  .js .hero__sheet--c .pic { animation-delay: 1s, 2.9s; animation-duration: 1.8s, 10s; }
  .js [data-chars]:not([aria-label]) { opacity: 0; animation: chars-fallback 0s 2.5s forwards; }
}
@keyframes sheet-in { from { opacity: 0; scale: .82; translate: 0 40px; } to { opacity: 1; scale: 1; translate: 0 0; } }
@keyframes sheet-float { from { translate: 0 0; } to { translate: 0 -10px; } }
@keyframes chars-fallback { to { opacity: 1; } }
@media (max-width: 900px) {
  .hero__stage { display: none; }
  .js .hero { height: 150vh; }
}
@media (prefers-reduced-motion: reduce) { .hero__veil, .hero__light { display: none; } }
.hero { overflow: visible; }
.hero__stage { right: 3vw; top: calc(var(--hdr-h) + 4vh); width: 28vw; height: 40vh; }
.hero__sheet--a { right: 0; top: 18%; width: 78%; }
.hero__sheet--b { left: -6%; top: -4%; width: 40%; }
.hero__sheet--c { right: 38%; bottom: -10%; width: 50%; }
@media (max-width: 1180px) { .hero__stage { display: none; } }

/* =========================================================================
   ACCUEIL — machines : quatre langages d'animation
   Base = version statique (mobile, animations réduites) ; les séquences
   épinglées s'activent sur grand écran avec animations autorisées.
   ========================================================================= */
.mx { position: relative; color: #fff; }
.mx__pin { position: relative; padding-block: clamp(48px, 7vw, 96px); }
.mx__count { display: inline-block; font-size: .82rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.mx__count--inline { display: block; margin-bottom: 18px; }
.mx .is-todo { color: rgba(255,255,255,.5); font-style: italic; }
/* 01 — plein écran */
.mx-full__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.mx-full__media .pic, .mx-full__media img { width: 100%; height: 100%; object-fit: cover; }
.mx-full__shade { display: none; }
.mx--full .mx__count { position: absolute; left: var(--gut); top: clamp(60px, 8vw, 110px); z-index: 2; }
.mx-full__text { padding-top: 32px; }
/* 02 — technique */
.mx-tech { display: grid; gap: 32px; }
.mx-tech__stage { position: relative; }
.mx-tech__grid { position: absolute; inset: -10%; background-image: linear-gradient(rgba(34,154,214,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(34,154,214,.12) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent); pointer-events: none; }
.mx-tech__img { position: relative; overflow: hidden; border-radius: var(--r-img); aspect-ratio: 16 / 9; }
.mx-tech__img .pic, .mx-tech__img img { width: 100%; height: 100%; object-fit: cover; }
.mx-tech__scan { display: none; }
.mx-tech__lines { display: none; }
.mx-tech__callouts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; margin: 24px 0 0; padding: 0; list-style: none; }
.mx-tech__callouts li { padding-top: 12px; border-top: 1px solid rgba(34,154,214,.5); font-size: .94rem; color: rgba(255,255,255,.75); }
.mx-tech__callouts b { display: block; color: #fff; font-stretch: 112%; margin-bottom: 2px; }
/* 03 — volume */
.mx-stack { display: grid; gap: 40px; }
.mx-stack__lines { margin: 26px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.16); }
.mx-stack__lines li { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.72); }
.mx-stack__lines b { display: block; color: #fff; font-stretch: 112%; }
.mx-stack__todo { margin-top: 18px; font-size: .92rem; }
.mx-stack__stage { position: relative; height: 380px; perspective: 1400px; }
.mx-stack__pile { position: absolute; left: 50%; top: 50%; width: min(440px, 80%); aspect-ratio: 400 / 260; transform-style: preserve-3d; transform: translate(-50%, -50%) rotateX(56deg) rotateZ(-24deg); }
.mx-stack__sheet { position: absolute; inset: 0; border-radius: 6px; transform: translateZ(calc(var(--i) * 14px)); box-shadow: 0 20px 40px -20px rgba(0,0,0,.7); }
.mx-stack__sheet:nth-child(1) { background: #3a4249; }
.mx-stack__sheet:nth-child(2) { background: #dfe4e7; }
.mx-stack__sheet:nth-child(3) { background: linear-gradient(135deg, #229ad6, #0b6ea6); }
.mx-stack__sheet--print { overflow: hidden; background: #111; }
.mx-stack__sheet--print .pic, .mx-stack__sheet--print img { width: 100%; height: 100%; object-fit: cover; }
.mx-stack__sheet--print svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mx-stack__cut { fill: none; stroke: #fff; stroke-width: 2.5; stroke-dasharray: 10 8; }
.mx-stack__label { position: absolute; left: 0; bottom: 0; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.1); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7); }
@media (min-width: 1000px) { .mx-stack { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; } }

@media (prefers-reduced-motion: no-preference) and (min-width: 1000px) {
  .js .mx__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; padding: 0; display: flex; align-items: center; }
  /* 01 : l'image arrive, s'étend en plein écran puis le texte se fixe */
  .js .mx--full { height: 300vh; --e: clamp(0, calc(var(--p, 0) / .45), 1); --t: clamp(0, calc((var(--p, 0) - .42) / .22), 1); }
  .js .mx-full__media { position: absolute; inset: 0; aspect-ratio: auto; clip-path: inset(calc((1 - var(--e)) * 24%) calc((1 - var(--e)) * 30%) calc((1 - var(--e)) * 24%) calc((1 - var(--e)) * 30%) round calc((1 - var(--e)) * 16px)); }
  .js .mx-full__media img { transform: translate3d(calc((1 - var(--e)) * 14%), 0, 0) scale(calc(1.32 - var(--e) * .22 - var(--p, 0) * .1)); transform-origin: 60% 50%; }
  .js .mx-full__shade { display: block; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,17,20,.88) 0%, rgba(14,17,20,.55) 42%, rgba(14,17,20,0) 75%); opacity: var(--t); }
  .js .mx-full__text { position: relative; z-index: 2; padding: 0; max-width: none; margin-top: 8vh; opacity: var(--t); transform: translate3d(0, calc((1 - var(--t)) * 48px), 0); }
  .js .mx-full__text > * { max-width: 34rem; }
  .js .mx--full .mx__count { opacity: calc(1 - var(--t) * .4); }
  /* 02 : lignes techniques, détails autour, profondeur */
  .js .mx--tech { height: 300vh; background: radial-gradient(ellipse at 50% 60%, #18212a 0%, #14181c 70%); }
  .js .mx-tech { width: 100%; grid-template-columns: 1fr; gap: 3vh; }
  .js .mx-tech__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 48px; align-items: end; opacity: clamp(0, calc(var(--p, 0) / .12), 1); }
  .js .mx-tech__head .mach__desc { margin: 0; }
  .js .mx-tech__head .mx__count, .js .mx-tech__head .mach__role { grid-column: 1 / -1; }
  .js .mx-tech__stage { height: 62vh; perspective: 1400px; }
  .js .mx-tech__grid { inset: -20% -6%; transform: translate3d(0, calc(var(--p, 0) * -80px), 0); }
  .js .mx-tech__img { position: absolute; left: 22%; right: 22%; top: 21%; bottom: 21%; aspect-ratio: auto; transform: rotateX(calc((1 - var(--p, 0)) * 16deg)) scale(calc(.86 + var(--p, 0) * .16)); transform-origin: 50% 100%; box-shadow: 0 50px 100px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(34,154,214,.35); }
  .js .mx-tech__scan { display: block; position: absolute; top: 0; bottom: 0; left: calc(var(--p, 0) * 130% - 15%); width: 2px; background: var(--bleu); box-shadow: 0 0 24px 6px rgba(34,154,214,.5); opacity: .8; }
  .js .mx-tech__lines { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .js .mx-tech__lines path { fill: none; stroke: var(--bleu); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-dasharray: 340; --lk: clamp(0, calc((var(--p, 0) - .16 - var(--k) * .14) / .12), 1); stroke-dashoffset: calc(340 - var(--lk) * 340); }
  .js .mx-tech__callouts { position: absolute; inset: 0; display: block; margin: 0; pointer-events: none; }
  .js .mx-tech__callouts li { position: absolute; width: 18%; border: 0; padding: 0; --lk: clamp(0, calc((var(--p, 0) - .22 - var(--k) * .14) / .1), 1); opacity: var(--lk); transform: translate3d(0, calc((1 - var(--lk)) * 16px), 0); }
  .js .mx-tech__callouts .tl { left: 0; top: 0; } .js .mx-tech__callouts .tr { right: 0; top: 0; text-align: right; }
  .js .mx-tech__callouts .bl { left: 0; bottom: 0; } .js .mx-tech__callouts .br { right: 0; bottom: 0; text-align: right; }
  /* 03 : volume, rotation très légère, pile qui s'ouvre, découpe tracée */
  .js .mx--stack { height: 260vh; }
  .js .mx-stack { width: 100%; }
  .js .mx-stack__stage { height: 70vh; }
  .js .mx-stack__pile { transform: translate(-50%, -50%) rotateX(calc(58deg - var(--p, 0) * 10deg)) rotateZ(calc(-30deg + var(--p, 0) * 14deg)); }
  .js .mx-stack__sheet { transform: translateZ(calc(var(--i) * (10px + var(--p, 0) * 46px))); }
  .js .mx-stack__cut { stroke-dasharray: 1200; stroke-dashoffset: calc(1200 - clamp(0, calc((var(--p, 0) - .3) / .45), 1) * 1200); }
  .js .mx-stack__lines li { --lk: clamp(0, calc((var(--p, 0) - .12 - var(--k) * .2) / .12), 1); opacity: calc(.15 + var(--lk) * .85); transform: translate3d(calc((1 - var(--lk)) * -20px), 0, 0); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1000px) { .js .mx__pin > .wrap { width: 100%; } }
@media (prefers-reduced-motion: no-preference) and (min-width: 1000px) {
  .js .mx-tech__img { left: 18%; right: 18%; top: 17%; bottom: 17%; }
}

/* =========================================================================
   IMPRESSION — le support se déroule puis envahit l'écran
   ========================================================================= */
.unroll { position: relative; background: #101316; color: #fff; overflow: clip; }
.unroll__pin { position: relative; display: grid; gap: 32px; padding-block: var(--sec); }
.unroll__type { display: none; }
.unroll__stage { display: grid; place-items: center; }
.unroll__sheet { position: relative; width: min(420px, 78vw); }
.unroll__print { overflow: hidden; border-radius: 2px; box-shadow: 0 50px 90px -40px rgba(0,0,0,.9); }
.unroll__print .pic, .unroll__print img { display: block; width: 100%; height: auto; }
.unroll__curl, .unroll__roll, .unroll__shade { display: none; }
.unroll__caps { display: grid; gap: 24px; }
.unroll__cap p { margin: 0; font-size: 1.1rem; color: rgba(255,255,255,.8); max-width: 22em; }
.unroll__cap .kicker { color: var(--bleu); margin-bottom: 10px; }
.unroll__big { font-stretch: 122%; font-weight: 820; font-size: clamp(1.8rem, 4vw, 3.4rem) !important; line-height: 1; color: #fff !important; max-width: 14em !important; }
@media (prefers-reduced-motion: no-preference) and (min-width: 1000px) {
  .js .unroll { height: 340vh; --u: clamp(0, calc(var(--p, 0) / .46), 1); --x: clamp(0, calc((var(--p, 0) - .52) / .3), 1); }
  .js .unroll__pin { position: sticky; top: 0; height: 100vh; padding: 0; display: block; overflow: hidden; perspective: 1600px; }
  .js .unroll__type { display: block; position: absolute; left: 0; top: 50%; white-space: nowrap; font-weight: 820; font-size: 22vw; line-height: .8; letter-spacing: -.03em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.12); font-stretch: calc(64% + var(--p, 0) * 60%); transform: translate3d(calc(8vw - var(--p, 0) * 70vw), -50%, 0); opacity: calc(1 - var(--x)); }
  .js .unroll__stage { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(calc((1 - var(--u)) * 26deg)) rotateZ(calc((1 - var(--u)) * -5deg)) translate3d(0, calc((1 - var(--u)) * -14vh), 0); }
  .js .unroll__sheet { width: auto; height: 76vh; aspect-ratio: 1417 / 1890; transform: scale(calc(1 + var(--x) * 1.9)) translate3d(0, calc(var(--x) * 6vh), 0); transform-origin: 50% 40%; }
  .js .unroll__print { height: 100%; clip-path: inset(0 0 calc((1 - var(--u)) * 100%) 0); }
  .js .unroll__print img { height: 100%; object-fit: cover; }
  .js .unroll__roll { display: block; position: absolute; left: -3%; right: -3%; top: calc(var(--u) * 100%); height: calc(36px - var(--u) * 14px); transform: translateY(-50%); border-radius: 12px; background: linear-gradient(180deg, #8f989f 0%, #f4f6f7 22%, #ffffff 34%, #c9d0d4 60%, #6b747b 88%, #4a5258 100%); box-shadow: 0 18px 30px -10px rgba(0,0,0,.7); opacity: clamp(0, calc(1 - var(--x) * 4), 1); }
  .js .unroll__roll::before, .js .unroll__roll::after { content: ""; position: absolute; top: 8%; bottom: 8%; width: 10px; border-radius: 50%; background: radial-gradient(circle, #2a3036 30%, #9aa3a9 34%, #dfe4e7 70%); }
  .js .unroll__roll::before { left: -4px; } .js .unroll__roll::after { right: -4px; }
  .js .unroll__curl { display: block; position: absolute; left: 0; right: 0; top: calc(var(--u) * 100% - 60px); height: 60px; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.35)); pointer-events: none; opacity: clamp(0, calc((1 - var(--u)) * 6), 1); }
  .js .unroll__shade { display: block; position: absolute; inset: 0; background: rgba(10,12,14,.6); opacity: var(--x); pointer-events: none; }
  .js .unroll__caps { position: absolute; inset: 0; display: block; }
  .js .unroll__cap { position: absolute; width: 19rem; }
  .js .unroll__cap--1 { left: var(--gut); top: 30vh; --o: calc(clamp(0, calc((var(--p, 0) - .1) / .08), 1) * clamp(0, calc((.56 - var(--p, 0)) / .06), 1)); opacity: var(--o); transform: translate3d(calc((1 - var(--o)) * -30px), 0, 0); }
  .js .unroll__cap--2 { right: var(--gut); top: 52vh; text-align: right; --o: calc(clamp(0, calc((var(--p, 0) - .26) / .08), 1) * clamp(0, calc((.56 - var(--p, 0)) / .06), 1)); opacity: var(--o); transform: translate3d(calc((1 - var(--o)) * 30px), 0, 0); }
  .js .unroll__cap--2 p { margin-left: auto; }
  .js .unroll__cap--3 { left: var(--gut); right: var(--gut); bottom: 12vh; width: auto; --o: clamp(0, calc((var(--p, 0) - .7) / .12), 1); opacity: var(--o); transform: translate3d(0, calc((1 - var(--o)) * 50px), 0); }
}
@media (max-width: 999px) { .unroll__caps { text-align: left; } }
@media (prefers-reduced-motion: no-preference) and (min-width: 1000px) {
  .js .unroll__stage { transform: rotateX(calc((1 - var(--u)) * 26deg)) rotateZ(calc((1 - var(--u)) * -5deg)) translate3d(0, calc(var(--hdr-h) * .5 + (1 - var(--u)) * 4vh), 0); }
  .js .unroll__sheet { height: 70vh; }
}

/* =========================================================================
   COVERING — séquence « la transformation » (3D légère, éclatée)
   ========================================================================= */
.cov-tx { position: relative; background: linear-gradient(180deg, #14181c 0%, #101316 100%); color: #fff; }
.cov-tx__pin { position: relative; padding-block: var(--sec); }
.cov-tx__head .h-sec { max-width: 16ch; }
.cov-tx__stage { position: relative; margin: clamp(32px, 5vw, 64px) auto 0; width: min(900px, 92vw); }
.cov-tx__rig { position: relative; }
.cov-tx__lab, .cov-tx__pt { display: none; }
.cov-tx__phases { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 32px; padding-top: 18px; list-style: none; border-top: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.55); font-weight: 650; }
.cov-tx__phases b { margin-right: 8px; color: var(--bleu); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) and (min-width: 1000px) {
  .js .cov-tx { height: 420vh;
    --a: clamp(0, calc(var(--p, 0) / .2), 1);
    --e: calc(clamp(0, calc((var(--p, 0) - .24) / .16), 1) - clamp(0, calc((var(--p, 0) - .56) / .14), 1));
    --w: clamp(0, calc((var(--p, 0) - .28) / .14), 1);
    --f: clamp(0, calc((var(--p, 0) - .6) / .14), 1);
    --d: clamp(0, calc((var(--p, 0) - .78) / .1), 1); }
  .js .cov-tx__pin { position: sticky; top: 0; height: 100vh; padding: calc(var(--hdr-h) + 4vh) 0 4vh; display: flex; flex-direction: column; overflow: hidden; }
  .js .cov-tx__stage { flex: 1; display: grid; place-items: center; margin: 0 auto; width: min(980px, 72vw); perspective: 1500px; }
  .js .cov-tx__rig { width: 100%; transform-style: preserve-3d; transform: translate3d(calc((1 - var(--a)) * -75vw), 0, 0) rotateY(calc(-36deg * (1 - var(--f)) + (1 - var(--a)) * 18deg)) rotateX(calc(12deg * (1 - var(--f)))); }
  .js .veh--tx { transform-style: preserve-3d; --wrap: 1; }
  .js .veh--tx .veh__l, .js .veh--tx .veh__wrap { transition: none; }
  .js .veh--tx .veh__l--base { transform: translate3d(0, 0, calc(var(--e) * -150px)); }
  .js .veh--tx .veh__wrap { opacity: var(--w); transform: translate3d(0, calc(var(--e) * -26% + (1 - var(--w)) * -40%), calc(var(--e) * 70px + (1 - var(--w)) * 260px)); filter: drop-shadow(0 30px 30px rgba(0,0,0,calc(var(--e) * .55))); }
  .js .veh--tx .veh__l--top { transform: translate3d(0, calc(var(--e) * 22%), calc(var(--e) * 220px)); }
  .js .veh--tx .veh__dims { opacity: calc(1 - var(--a) * 0 - var(--w)); }
  .js .cov-tx__lab { display: flex; align-items: center; gap: 10px; position: absolute; left: 102%; white-space: nowrap; font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.85); opacity: var(--e); transform: translate3d(calc((1 - var(--e)) * 20px), 0, 0); }
  .js .cov-tx__lab i { width: 40px; height: 1px; background: var(--bleu); }
  .js .cov-tx__lab--1 { top: 62%; } .js .cov-tx__lab--2 { top: 18%; } .js .cov-tx__lab--3 { top: 90%; }
  .js .cov-tx__pt { display: flex; align-items: center; gap: 10px; position: absolute; padding: 7px 12px 7px 8px; border-radius: 999px; background: rgba(255,255,255,.94); color: var(--encre); font-size: .82rem; font-weight: 700; white-space: nowrap; box-shadow: 0 16px 30px -12px rgba(0,0,0,.6); opacity: var(--d); transform: translate3d(0, calc((1 - var(--d)) * 14px), 0) scale(calc(.9 + var(--d) * .1)); }
  .js .cov-tx__pt b { width: 10px; height: 10px; border-radius: 50%; background: var(--bleu); box-shadow: 0 0 0 5px rgba(34,154,214,.25); }
  .js .cov-tx__pt--1 { left: 16%; top: 22%; }
  .js .cov-tx__pt--2 { left: 54%; top: 12%; transition-delay: .1s; }
  .js .cov-tx__pt--3 { left: 76%; top: 74%; }
  .js .cov-tx__phases { margin-top: 0; }
  .js .cov-tx__phases li { transition: color .4s; }
  .js .cov-tx[data-step="0"] .cov-tx__phases [data-i="0"], .js .cov-tx[data-step="1"] .cov-tx__phases [data-i="1"], .js .cov-tx[data-step="2"] .cov-tx__phases [data-i="2"], .js .cov-tx[data-step="3"] .cov-tx__phases [data-i="3"] { color: #fff; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1000px) {
  .js .cov-tx__head .h-sec { font-size: clamp(2rem, 3.4vw, 3.1rem); max-width: 22ch; }
  .js .cov-tx__stage { width: min(860px, 58vw); padding-top: 4vh; }
  .js .veh--tx .veh__wrap { transform: translate3d(0, calc(var(--e) * -15% + (1 - var(--w)) * -30%), calc(var(--e) * 70px + (1 - var(--w)) * 260px)); }
  .js .veh--tx .veh__l--top { transform: translate3d(0, calc(var(--e) * 10%), calc(var(--e) * 220px)); }
  .js .cov-tx__lab { left: 104%; }
  .js .cov-tx__lab--2 { top: 8%; } .js .cov-tx__lab--1 { top: 55%; } .js .cov-tx__lab--3 { top: 84%; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1000px) {
  .js .cov-tx__stage { position: relative; }
  .js .cov-tx__lab { left: auto; right: calc(100% + 8px); transform: translate3d(calc((1 - var(--e)) * -20px), 0, 0); }
  .js .cov-tx__lab--2 { top: 22%; } .js .cov-tx__lab--1 { top: 52%; } .js .cov-tx__lab--3 { top: 76%; }
}

/* =========================================================================
   TRANSITIONS ENTRE SECTIONS
   ========================================================================= */
/* Une section sombre « monte » : elle part d'un bloc arrondi, en retrait,
   et s'élargit jusqu'au plein écran en entrant dans la vue. */
@media (prefers-reduced-motion: no-preference) {
  .js .rise { clip-path: inset(0 calc((1 - var(--q, 1)) * 4vw) round calc((1 - var(--q, 1)) * 36px) calc((1 - var(--q, 1)) * 36px) 0 0); }
}
/* Bande de grande typographie */
.tband { overflow: hidden; padding-block: clamp(28px, 5vw, 72px); background: #fff; color: var(--encre); }
.tband--grey { background: var(--bardage-2); }
.tband__row { display: flex; align-items: center; white-space: nowrap; font-weight: 820; font-size: clamp(3rem, 10.5vw, 10rem); line-height: .96; letter-spacing: -.025em; text-transform: uppercase; font-stretch: 112%; }
.tband__row span { padding: 0 .22em; }
.tband__row i { flex: none; width: .22em; height: .22em; border-radius: 50%; background: var(--bleu); }
.tband__row--out { color: transparent; -webkit-text-stroke: 1.5px rgba(20,24,28,.4); }
@media (prefers-reduced-motion: no-preference) {
  .js .tband__row { transform: translate3d(calc(-6% - var(--p, 0) * 24%), 0, 0); font-stretch: calc(78% + var(--p, 0) * 46%); will-change: transform; }
  .js .tband__row--out { transform: translate3d(calc(-34% + var(--p, 0) * 24%), 0, 0); }
}
/* Couches et cartes inclinables */
.hs__media[data-tilt], .card__media[data-tilt] { transform-style: flat; }
.mx { overflow-x: clip; }
@media (max-width: 700px) { .atelier-grid { grid-template-columns: 1fr; } .atelier-grid__side { display: block; } }
@media (max-width: 700px) { .atelier-grid__vid, .atelier-grid__side { grid-column: 1 / -1; } }
.tband__row span::before { content: attr(data-w); }
.cov-uses__n { color: var(--acier); }
@media (prefers-reduced-motion: no-preference) and (min-width: 1000px) {
  .js .mx-stack__lines li { opacity: calc(.55 + var(--lk) * .45); }
}

/* =========================================================================
   ACCUEIL v6 — direction « studio éditorial »
   ========================================================================= */
/* ---------- Hero typographique avec fenêtre vidéo ---------- */
.h2o { position: relative; background: var(--bardage-2); color: var(--encre); --e: clamp(0, calc((var(--p, 0) - .04) / .62), 1); }
.h2o__pin { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; isolation: isolate; padding: calc(var(--hdr-h) + 40px) 0 clamp(28px, 4vw, 52px); }
.h2o__in { position: relative; order: 1; }
.h2o__expand { position: relative; order: 2; margin: 28px var(--gut) 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-img); background: #0d1013; }
.h2o__expand .pic, .h2o__expand img, .h2o__expand video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.h2o__expcap { position: absolute; left: 20px; bottom: 18px; z-index: 2; padding: 6px 12px; border-radius: 999px; background: rgba(14,17,20,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: .8rem; font-weight: 650; letter-spacing: .06em; }
.h2o__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid rgba(20,24,28,.18); font-size: .78rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--acier); }
.h2o__reg { display: inline-flex; gap: 3px; }
.h2o__reg i { width: 12px; height: 12px; }
.h2o__reg i:nth-child(1) { background: #00a0e3; } .h2o__reg i:nth-child(2) { background: #e6007e; } .h2o__reg i:nth-child(3) { background: #ffed00; } .h2o__reg i:nth-child(4) { background: #14181c; }
.h2o__title { margin: clamp(22px, 4vh, 44px) 0 0; font-weight: 820; font-stretch: 118%; font-size: clamp(2.7rem, 8.6vw, 9.6rem); line-height: .9; letter-spacing: -.035em; }
.h2o__line { display: flex; align-items: center; gap: .16em; white-space: nowrap; }
.h2o__line--2 { padding-left: 1.2em; }
.h2o__line--3 { justify-content: flex-end; }
.h2o__hole { display: none; }
.h2o__pill { flex: none; display: inline-block; width: 2.1em; height: .74em; overflow: hidden; border-radius: 999px; background: var(--bardage); transform: translate3d(calc(var(--mx, 0) * 8px), calc(var(--my, 0) * 6px), 0); }
.h2o__pill .pic, .h2o__pill img { width: 100%; height: 100%; object-fit: cover; }
.h2o__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 56px; align-items: end; margin-top: clamp(28px, 4vh, 48px); }
.h2o__sub { margin: 0; max-width: 34em; font-size: clamp(1.02rem, 1.4vw, 1.2rem); color: #3b4247; }
.h2o__row .btns { margin: 0; flex-wrap: nowrap; }
.h2o__scroll { display: none; }
.h2o .hero__pause { z-index: 4; }
@media (prefers-reduced-motion: no-preference) and (min-width: 1000px) {
  .js .h2o { height: 240vh; }
  .js .h2o__pin { position: sticky; top: 0; height: 100vh; min-height: 0; }
  .js .h2o__expand { position: absolute; inset: 0; z-index: 0; margin: 0; aspect-ratio: auto; border-radius: 0; opacity: 0; }
  .js .has-hole .h2o__expand { opacity: 1; clip-path: inset(calc(var(--hy) * (1 - var(--e))) calc(var(--hr) * (1 - var(--e))) calc(var(--hb) * (1 - var(--e))) calc(var(--hx) * (1 - var(--e))) round calc(9999px * (1 - var(--e)))); }
  .js .h2o__expand img { transform: scale(calc(1.12 - var(--e) * .12)); }
  .js .h2o__expcap { opacity: clamp(0, calc((var(--e) - .8) / .2), 1); }
  .js .h2o__hole { display: inline-block; flex: none; width: 2.1em; height: .74em; border-radius: 999px; }
  .js .h2o__pin:not(.has-hole) .h2o__hole { background: var(--bardage); }
  .js .h2o__title { color: color-mix(in srgb, #fff calc(clamp(0, calc((var(--e) - .18) / .3), 1) * 100%), #14181c); text-shadow: 0 2px 30px rgba(0,0,0, calc(clamp(0, calc((var(--e) - .3) / .3), 1) * .35)); }
  .js .h2o__line--1 { transform: translate3d(calc(var(--e) * -24vw), 0, 0); }
  .js .h2o__line--2 { transform: translate3d(calc(var(--e) * 14vw), 0, 0); opacity: calc(1 - var(--e) * .6); }
  .js .h2o__line--3 { transform: translate3d(calc(var(--e) * 24vw), 0, 0); }
  .js .h2o__bar > *, .js .h2o__row > * { opacity: clamp(0, calc(1 - var(--e) * 2.6), 1); }
  .js .h2o__bar { border-color: rgba(20,24,28, calc(.18 - var(--e) * .3)); }
  .js .h2o__scroll { display: block; position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--acier); opacity: calc(1 - var(--e) * 5); }
  .js .h2o__title { translate: 0 50px; opacity: 0; transition: translate 1.3s var(--ease-out) .1s, opacity 1s ease .1s; }
  .is-ready .h2o__title { translate: 0 0; opacity: 1; }
}
@media (max-width: 760px) {
  .h2o__line--2 { padding-left: 0; }
  .h2o__line--3 { justify-content: flex-start; }
  .h2o__row { grid-template-columns: 1fr; }
  .h2o__row .btns { flex-wrap: wrap; }
  .h2o__expand { aspect-ratio: 4 / 5; margin-inline: var(--gut); }
}

/* ---------- Phrase qui se remplit ---------- */
.stmt { padding-block: clamp(96px, 13vw, 190px); background: #fff; }
.stmt__txt { margin: 0; max-width: 23em; font-weight: 720; font-stretch: 112%; font-size: clamp(1.6rem, 3.7vw, 3.5rem); line-height: 1.12; letter-spacing: -.015em; }
.stmt__txt.is-split span[data-w] { opacity: clamp(.14, calc((var(--p, 0) * 2.3 - .38 - var(--i) / var(--n)) * 6), 1); }

/* ---------- Solutions : index typographique ---------- */
.sol { padding-block: var(--sec); background: #fff; }
.sol__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(40px, 6vw, 96px); align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.sol__head .lead { margin: 0; }
.sol__wrap { position: relative; }
.sol__list { margin: 0; padding: 0; list-style: none; border-top: 1.5px solid var(--encre); }
.sol__row { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 17rem) 52px; align-items: center; gap: 24px; padding: clamp(16px, 2.2vw, 28px) 14px; border-bottom: 1px solid var(--trait); color: inherit; text-decoration: none; overflow: hidden; isolation: isolate; }
.sol__row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--encre); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .55s var(--ease-out); }
.sol__n { font-size: .9rem; font-weight: 700; color: var(--acier); font-variant-numeric: tabular-nums; transition: color .3s; }
.sol__t { font-weight: 800; font-stretch: 110%; font-size: clamp(1.7rem, 4.4vw, 4.2rem); line-height: 1; letter-spacing: -.022em; transition: font-stretch .55s var(--ease-out), transform .55s var(--ease-out), color .3s; }
.sol__tags { font-size: .92rem; color: var(--acier); transition: color .3s; }
.sol__thumb { display: none; }
.sol__go { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--trait); transition: background .35s, border-color .35s, transform .45s var(--ease-out), color .3s; }
.sol__row:hover::before, .sol__row:focus-visible::before { transform: scaleY(1); }
.sol__row:hover, .sol__row:focus-visible { color: #fff; }
.sol__row:hover .sol__t, .sol__row:focus-visible .sol__t { font-stretch: 124%; transform: translateX(14px); }
.sol__row:hover .sol__n, .sol__row:hover .sol__tags, .sol__row:focus-visible .sol__tags { color: rgba(255,255,255,.7); }
.sol__row:hover .sol__go, .sol__row:focus-visible .sol__go { background: var(--bleu); border-color: var(--bleu); transform: rotate(-45deg); }
.sol__row:focus-visible { outline: 3px solid var(--bleu); outline-offset: -3px; }
.sol__float { display: none; }
@media (hover: hover) and (pointer: fine) {
  .sol__float { display: block; position: absolute; left: 0; top: 0; z-index: 3; width: 280px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 6px; pointer-events: none; box-shadow: 0 40px 70px -30px rgba(0,0,0,.6); transform: translate3d(calc(var(--fx, 0px) + 40px), calc(var(--fy, 0px) - 180px), 0); opacity: 0; scale: .85; transition: opacity .3s, scale .45s var(--ease-out); }
  .is-hover .sol__float { opacity: 1; scale: 1; }
  .sol__fimg { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); transition: clip-path .6s var(--ease-out); }
  .sol__fimg .pic, .sol__fimg img { width: 100%; height: 100%; object-fit: cover; }
  [data-active="0"] .sol__fimg[data-sol="0"], [data-active="1"] .sol__fimg[data-sol="1"], [data-active="2"] .sol__fimg[data-sol="2"], [data-active="3"] .sol__fimg[data-sol="3"], [data-active="4"] .sol__fimg[data-sol="4"], [data-active="5"] .sol__fimg[data-sol="5"] { clip-path: inset(0); z-index: 2; }
}
@media (max-width: 900px) {
  .sol__head { grid-template-columns: 1fr; }
  .sol__row { grid-template-columns: 76px minmax(0, 1fr) 40px; gap: 6px 16px; padding: 14px 4px; }
  .sol__n { display: none; }
  .sol__thumb { display: block; grid-row: 1 / span 2; width: 76px; aspect-ratio: 1; overflow: hidden; border-radius: 6px; }
  .sol__thumb .pic, .sol__thumb img { width: 100%; height: 100%; object-fit: cover; }
  .sol__t { grid-column: 2; font-size: clamp(1.4rem, 6vw, 2rem); }
  .sol__tags { grid-column: 2; grid-row: 2; font-size: .84rem; }
  .sol__go { grid-column: 3; grid-row: 1 / span 2; width: 40px; height: 40px; }
}

/* ---------- Covering sur l'accueil ---------- */
.covh { padding-block: var(--sec); background: var(--bardage-2); overflow: clip; }
.covh__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.covh__types { display: flex; flex-wrap: wrap; margin: 28px 0; padding: 0; list-style: none; font-weight: 750; font-stretch: 114%; font-size: 1.1rem; }
.covh__types li + li::before { content: "/"; margin: 0 12px; color: var(--bleu); font-weight: 400; }
.covh__veh { margin: 0; }
.covh__veh .caption { margin-top: 14px; }
@media (prefers-reduced-motion: no-preference) {
  .js .veh--covh { transform: translate3d(calc((1 - clamp(0, calc(var(--p, 0) * 2.4 - .25), 1)) * 50vw), 0, 0); --wrap: clamp(0, calc(var(--p, 0) * 2.6 - .95), 1); }
  .js .veh--covh .veh__wrap { transition: none; }
}
@media (max-width: 900px) { .covh__grid { grid-template-columns: 1fr; } }

/* ---------- Réalisations : mosaïque qui se dézoome ---------- */
.zm { position: relative; background: #0e1114; color: #fff; --z: clamp(0, calc((var(--p, 0) - .1) / .55), 1); --c: clamp(0, calc((var(--p, 0) - .66) / .14), 1); }
.zm__pin { position: relative; display: flex; flex-direction: column; gap: 32px; padding: var(--sec) var(--gut); }
.zm__intro { order: -1; }
.zm__title { font-weight: 820; font-stretch: 120%; font-size: clamp(2.2rem, 5.4vw, 5rem); line-height: .96; letter-spacing: -.02em; max-width: 14ch; margin: 0; }
.zm__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.zm__cell { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: #1b2025; }
.zm__link { position: absolute; inset: 0; display: block; color: #fff; text-decoration: none; }
.zm__img, .zm__img .pic { position: absolute; inset: 0; }
.zm__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.zm__link:hover img { transform: scale(1.05); }
.zm__cap { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 2px; padding: 40px 16px 14px; background: linear-gradient(0deg, rgba(14,17,20,.85), transparent); font-size: .86rem; }
.zm__cap b { font-size: 1rem; font-stretch: 112%; }
.zm__end { text-align: center; }
@media (prefers-reduced-motion: no-preference) and (min-width: 1000px) {
  .js .zm { height: 320vh; }
  .js .zm__pin { position: sticky; top: 0; height: 100vh; padding: 0; display: block; overflow: hidden; }
  .js .zm__grid { position: absolute; inset: 0; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 1.1vw; padding: 1.1vw; transform: scale(calc(3.12 - var(--z) * 2.12)); transform-origin: 50% 50%; will-change: transform; }
  .js .zm__cell { aspect-ratio: auto; }
  .js .zm__cap { opacity: var(--c); }
  .js .zm__intro { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--gut) 12vh; background: linear-gradient(0deg, rgba(14,17,20,.75) 0%, rgba(14,17,20,0) 55%); opacity: clamp(0, calc(1 - var(--z) * 3), 1); pointer-events: none; }
  .js .zm__title { font-size: clamp(3rem, 8vw, 8.4rem); max-width: 12ch; }
  .js .zm__end { position: absolute; left: 0; right: 0; bottom: 4.5vh; z-index: 3; opacity: var(--c); transform: translate3d(0, calc((1 - var(--c)) * 30px), 0); pointer-events: none; }
  .js .zm__end a { pointer-events: auto; }
}
@media (max-width: 700px) { .zm__grid { grid-template-columns: 1fr 1fr; } .zm__cell:nth-child(n+7) { display: none; } }

/* ---------- À propos : double page éditoriale ---------- */
.spread { position: relative; padding-block: var(--sec); background: #fff; overflow: clip; }
.spread__grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.spread__year { position: absolute; left: -2vw; top: -4vw; z-index: 0; font-weight: 820; font-stretch: 125%; font-size: 30vw; line-height: .8; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px rgba(20,24,28,.08); pointer-events: none; transform: translate3d(calc((.5 - var(--p, .5)) * 12vw), 0, 0); }
.spread__head { position: relative; grid-column: 1 / span 6; grid-row: 1; align-self: end; padding-bottom: 6vw; }
.spread__img { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-img); }
.spread__img .pic, .spread__img img { width: 100%; height: 100%; object-fit: cover; }
.spread__img--a { grid-column: 8 / span 5; grid-row: 1 / span 2; aspect-ratio: 4 / 5; transform: translate3d(0, calc((.5 - var(--p, .5)) * 120px), 0); }
.spread__img--b { grid-column: 1 / span 7; grid-row: 2 / span 2; aspect-ratio: 16 / 10; transform: translate3d(0, calc((.5 - var(--p, .5)) * -50px), 0); }
.spread__quote { grid-column: 8 / span 5; grid-row: 3; align-self: end; margin: 0; font-weight: 750; font-stretch: 112%; font-size: clamp(1.4rem, 2.4vw, 2.2rem); line-height: 1.12; letter-spacing: -.01em; }
.spread__stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(40px, 6vw, 88px) 0 0; padding: 0; list-style: none; border-top: 1.5px solid var(--encre); }
.spread__stats li { padding: 22px 24px 0 0; }
.spread__stats b { display: block; font-weight: 820; font-stretch: 125%; font-size: clamp(2.6rem, 5.4vw, 5rem); line-height: 1; letter-spacing: -.03em; }
.spread__stats span { display: block; margin-top: 10px; color: var(--acier); font-size: .94rem; max-width: 16em; }
.spread__links { grid-column: 1 / -1; display: flex; gap: 28px; margin-top: 16px; }
@media (max-width: 900px) {
  .spread__grid { grid-template-columns: 1fr; }
  .spread__head, .spread__img--a, .spread__img--b, .spread__quote { grid-column: 1; grid-row: auto; transform: none; }
  .spread__head { padding-bottom: 0; }
  .spread__img--a { width: 70%; margin-left: auto; }
  .spread__img--b { width: 86%; margin-top: -18%; }
  .spread__stats { grid-template-columns: 1fr 1fr; gap: 0 16px; }
}

/* ---------- Appel final ---------- */
.endcta { position: relative; overflow: hidden; background: var(--encre); color: #fff; padding-top: clamp(96px, 13vw, 190px); isolation: isolate; }
.endcta__bg { position: absolute; inset: -6%; z-index: -1; opacity: .3; transform: translate3d(calc(var(--mx, 0) * -22px), calc(var(--my, 0) * -14px), 0); }
.endcta__bg .pic, .endcta__bg img { width: 100%; height: 100%; object-fit: cover; }
.endcta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,24,28,.4) 0%, rgba(20,24,28,.92) 85%); }
.endcta__title { margin: 0; max-width: 9ch; font-weight: 820; font-stretch: 122%; font-size: clamp(3.2rem, 11vw, 12rem); line-height: .88; letter-spacing: -.035em; }
.endcta__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-top: clamp(32px, 4vw, 56px); }
.endcta__txt { margin: 0; max-width: 30em; color: rgba(255,255,255,.8); font-size: clamp(1.05rem, 1.4vw, 1.2rem); }
.endcta__btn { flex: none; display: grid; place-items: center; width: clamp(150px, 15vw, 214px); aspect-ratio: 1; border-radius: 50%; background: var(--bleu); color: #fff; text-decoration: none; text-align: center; font-weight: 760; font-stretch: 112%; font-size: clamp(1rem, 1.3vw, 1.18rem); line-height: 1.15; transition: background .35s, color .35s, scale .5s var(--ease-out); }
.endcta__btn:hover { background: #fff; color: var(--encre); scale: 1.06; }
.endcta__btn:focus-visible { outline: 3px solid #fff; outline-offset: 6px; }
.endcta__alt { margin: 36px 0 0; color: rgba(255,255,255,.72); }
.endcta__alt a { color: #fff; }
@media (max-width: 700px) { .endcta__row { flex-direction: column; align-items: flex-start; } }
.h2o__title { font-size: clamp(2.6rem, min(7.6vw, 12.5vh), 8.6rem); margin-top: clamp(16px, 3vh, 36px); }
.h2o__row { margin-top: clamp(20px, 3.4vh, 40px); }
.h2o__pin { padding-top: calc(var(--hdr-h) + 24px); }
main > .h2o:first-child:not(.ph):not(.hero) { padding-top: 0; }
.h2o .hero__pause { top: calc(var(--hdr-h) + 28px); bottom: auto; right: var(--gut); }
@media (max-width: 760px) { .h2o__title { font-size: clamp(2rem, 10.2vw, 3rem); } .h2o__pill { width: 1.5em; } }
.stmt__txt span[data-w]::before { content: attr(data-w); }
.h2o .hero__pause { background: rgba(20,24,28,.82); color: #fff; border-color: transparent; }
@media (prefers-reduced-motion: no-preference) and (min-width: 1000px) { .js .mx-stack__lines li { opacity: calc(.86 + var(--lk) * .14); } }
.zm .kicker, .cov-proc .kicker, .cov-tx .kicker, .unroll .kicker, .mx .kicker, .endcta .kicker { color: var(--bleu); }

/* =========================================================================
   ACCUEIL v7 — direction issue des références Pinterest
   Hero : Auronix / Metal360 · Bandes : Rubik · Solutions : Rubik
   À propos : HAUS Studio · Repères : HAUS Studio (escalier de chiffres)
   ========================================================================= */
/* ---------- Hero ---------- */
.hx { position: relative; background: #0d1013; color: #fff; --e: clamp(0, calc(var(--p, 0) / .8), 1); }
main > .hx:first-child:not(.ph):not(.hero) { padding-top: 0; }
.hx__pin { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; overflow: hidden; isolation: isolate; padding: calc(var(--hdr-h) + 28px) 0 clamp(22px, 3vw, 40px); }
.hx__media { position: absolute; inset: 0; z-index: -2; transform: scale(calc(1.06 + var(--e) * .16)) translate3d(calc(var(--mx, 0) * -12px), calc(var(--my, 0) * -8px), 0); }
.hx__media .pic, .hx__media img, .hx__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hx__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(13,16,19,.62) 0%, rgba(13,16,19,.2) 38%, rgba(13,16,19,.72) 100%); }
.hx__shade::after { content: ""; position: absolute; inset: 0; background: #0d1013; opacity: calc(var(--e) * .55); }
.hx__frame { position: absolute; inset: clamp(14px, 2vw, 28px); pointer-events: none; color: rgba(255,255,255,.55); }
.hx__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.22); font-size: .76rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.78); }
.hx__in { position: relative; }
.hx__title { margin: 0; text-transform: uppercase; font-weight: 660; font-stretch: 102%; font-size: clamp(2.5rem, min(8.6vw, 13.5vh), 9.8rem); line-height: .9; letter-spacing: -.025em; }
.hx__l { display: block; white-space: nowrap; overflow: hidden; padding-bottom: .02em; }
.hx__l > span { display: inline-block; }
.hx__l--2 { padding-left: 2.2em; }
.hx__l--4 { padding-left: 1.4em; }
.hx__tag { margin-left: 1.4em; vertical-align: middle; font-size: .15em; font-weight: 600; letter-spacing: .1em; color: rgba(255,255,255,.8); }
.hx__badge { position: absolute; right: var(--gut); top: 4%; }
.hx__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 48px; align-items: end; margin-top: clamp(24px, 3.4vh, 40px); padding-top: 18px; border-top: 1px solid rgba(255,255,255,.22); }
.hx__sub { margin: 0; max-width: 34em; color: rgba(255,255,255,.86); font-size: clamp(1rem, 1.3vw, 1.15rem); }
.hx__foot .btns { margin: 0; flex-wrap: nowrap; }
.hx .hero__pause { z-index: 4; top: calc(var(--hdr-h) + 64px); bottom: auto; }
@media (prefers-reduced-motion: no-preference) {
  .js .hx__l > span { transform: translate3d(0, 105%, 0); transition: transform 1.25s var(--ease-out); }
  .js .hx__l--2 > span { transition-delay: .08s; } .js .hx__l--3 > span { transition-delay: .16s; } .js .hx__l--4 > span { transition-delay: .24s; }
  .is-ready .hx__l > span { transform: none; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1000px) {
  .js .hx { height: 175vh; }
  .js .hx__pin { position: sticky; top: 0; height: 100vh; min-height: 0; }
  .js .hx__l--1 { transform: translate3d(calc(var(--e) * -9vw), 0, 0); }
  .js .hx__l--2 { transform: translate3d(calc(var(--e) * 7vw), 0, 0); }
  .js .hx__l--3 { transform: translate3d(calc(var(--e) * -5vw), 0, 0); }
  .js .hx__l--4 { transform: translate3d(calc(var(--e) * 11vw), 0, 0); }
  .js .hx__title { opacity: clamp(0, calc(1 - var(--e) * 1.1), 1); }
  .js .hx__top > *, .js .hx__foot > * { opacity: clamp(0, calc(1 - var(--e) * 2.2), 1); }
  .js .hx__badge { transform: translate3d(0, calc(var(--e) * -30vh), 0) rotate(calc(var(--e) * 90deg)); opacity: clamp(0, calc(1 - var(--e) * 1.4), 1); }
}
@media (max-width: 999px) {
  .hx__title { font-size: clamp(2.2rem, 11vw, 5rem); }
  .hx__l--2 { padding-left: .8em; } .hx__l--4 { padding-left: 0; }
  .hx__tag { display: none; }
  .hx__badge { display: none; }
  .hx__foot { grid-template-columns: 1fr; }
  .hx__foot .btns { flex-wrap: wrap; }
  .hx__top > span:first-child { display: none; }
}

/* ---------- Bandes croisées (rubans adhésifs) ---------- */
.tape { position: relative; z-index: 3; height: clamp(140px, 15vw, 230px); margin-block: calc(clamp(140px, 15vw, 230px) * -.5); pointer-events: none; overflow: clip; }
.tape__band { position: absolute; left: -6%; right: -6%; top: 50%; padding: clamp(10px, 1vw, 16px) 0; overflow: hidden; white-space: nowrap; box-shadow: 0 24px 40px -24px rgba(0,0,0,.45); }
.tape__band--a { background: var(--bleu); color: #fff; transform: translateY(-50%) rotate(-3.5deg); }
.tape__band--b { background: #fff; color: var(--encre); border-block: 1.5px solid var(--encre); transform: translateY(-50%) rotate(2.6deg); }
.tape__run { display: inline-flex; align-items: center; gap: clamp(14px, 1.6vw, 26px); font-weight: 800; font-stretch: 116%; font-size: clamp(1rem, 2.1vw, 1.9rem); text-transform: uppercase; letter-spacing: .01em; }
.tape__run i { font-style: normal; font-size: .7em; opacity: .9; }
.tape__band--b .tape__run i { color: var(--bleu); }
@media (prefers-reduced-motion: no-preference) {
  .js .tape__band--a .tape__run { transform: translate3d(calc(-8% - var(--p, 0) * 24%), 0, 0); }
  .js .tape__band--b .tape__run { transform: translate3d(calc(-34% + var(--p, 0) * 24%), 0, 0); }
}
.tape + .stmt { padding-top: clamp(150px, 16vw, 240px); }

/* ---------- Solutions : liste active au défilement + image fixe ---------- */
.sx { padding-block: var(--sec); background: #fff; }
.sx__grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.sx__media { position: sticky; top: calc(var(--hdr-h) + 28px); }
.sx__frame { position: relative; aspect-ratio: 4 / 5; max-height: calc(100vh - var(--hdr-h) - 56px); margin-inline: auto; overflow: hidden; border-radius: var(--r-img); background: var(--bardage); }
.sx__img { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); transition: clip-path .9s var(--ease-out); }
.sx__img .pic, .sx__img img { width: 100%; height: 100%; object-fit: cover; }
.sx__img img { transform: scale(1.1); transition: transform 1.4s var(--ease-out); }
.sx__img.is-active { z-index: 1; clip-path: inset(0); }
.sx__img.is-active img { transform: none; }
.sx__count { position: absolute; left: 16px; bottom: 14px; z-index: 2; padding: 6px 12px; border-radius: 999px; background: rgba(14,17,20,.65); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-size: .84rem; font-variant-numeric: tabular-nums; }
.sx__head { margin-bottom: clamp(28px, 4vw, 56px); }
.sx__list { margin: 0; padding: 0; list-style: none; border-top: 1.5px solid var(--encre); }
.sx__item { border-bottom: 1px solid var(--trait); }
.sx__link { display: grid; grid-template-columns: 46px minmax(0, 1fr); grid-template-rows: auto 0fr; column-gap: 10px; padding: clamp(16px, 2vw, 26px) 0; color: inherit; text-decoration: none; transition: grid-template-rows .6s var(--ease-out); }
.sx__n { padding-top: .7em; font-size: .84rem; font-weight: 700; color: var(--acier); font-variant-numeric: tabular-nums; }
.sx__t { font-weight: 800; font-stretch: 110%; font-size: clamp(1.8rem, 3.5vw, 3.4rem); line-height: 1; letter-spacing: -.022em; color: #8a949b; transition: color .4s, font-stretch .6s var(--ease-out); }
.sx__more { grid-column: 2; display: grid; gap: 10px; min-height: 0; overflow: hidden; opacity: 0; transition: opacity .45s, padding .5s; }
.sx__d { color: #3b4247; max-width: 34em; }
.sx__tags { font-size: .86rem; color: var(--acier); }
.sx__go { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--bleu-encre); }
.sx__thumb { display: none; }
.sx__item.is-active .sx__link { grid-template-rows: auto 1fr; }
.sx__item.is-active .sx__t { color: var(--encre); font-stretch: 122%; }
.sx__item.is-active .sx__more { opacity: 1; padding-top: 14px; }
.sx__link:hover .sx__t { color: var(--encre); }
.sx__link:focus-visible { outline: 3px solid var(--bleu); outline-offset: 4px; }
@media (max-width: 999px) {
  .sx__grid { grid-template-columns: 1fr; }
  .sx__media { display: none; }
  .sx__link { grid-template-rows: auto auto; }
  .sx__t { color: var(--encre); font-size: clamp(1.6rem, 7vw, 2.4rem); }
  .sx__more { opacity: 1; padding-top: 12px; }
  .sx__thumb { display: block; grid-column: 2; margin-top: 14px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-img); }
  .sx__thumb .pic, .sx__thumb img { width: 100%; height: 100%; object-fit: cover; }
}

/* ---------- À propos : mots géants et photo au centre ---------- */
.ab { position: relative; padding: clamp(64px, 8vw, 120px) 0 var(--sec); background: var(--bardage-2); overflow: clip; }
.ab__words { display: flex; justify-content: space-between; padding: 0 var(--gut); font-weight: 820; font-stretch: 125%; font-size: clamp(3.4rem, 16.5vw, 17rem); line-height: .8; letter-spacing: -.045em; text-transform: uppercase; }
.ab__w--l { transform: translate3d(calc((.5 - var(--p, .5)) * -8vw), 0, 0); }
.ab__w--r { transform: translate3d(calc((.5 - var(--p, .5)) * 8vw), 0, 0); }
.ab__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: start; margin-top: calc(clamp(3.4rem, 16.5vw, 17rem) * -.42); }
.ab__photo { position: relative; z-index: 2; margin: 0; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--r-img); box-shadow: 0 50px 90px -50px rgba(20,24,28,.6); transform: translate3d(0, calc((.5 - var(--p, .5)) * 60px), 0); }
.ab__photo .pic, .ab__photo img { width: 100%; height: 100%; object-fit: cover; }
.ab__c { padding-top: calc(clamp(3.4rem, 16.5vw, 17rem) * .58); }
.ab__c p { color: #3b4247; }
.ab__h { margin: 0 0 14px; font-weight: 800; font-stretch: 116%; font-size: clamp(1.5rem, 2.4vw, 2.2rem); line-height: 1.05; }
.ab__quote { margin: 0 0 14px; font-weight: 760; font-stretch: 112%; font-size: clamp(1.3rem, 2vw, 1.8rem) !important; line-height: 1.15; color: var(--encre) !important; }
@media (max-width: 900px) {
  .ab__grid { grid-template-columns: 1fr; margin-top: 24px; }
  .ab__c { padding-top: 0; }
  .ab__photo { width: 78%; margin-inline: auto; transform: none; }
}

/* ---------- Repères : escalier de chiffres ---------- */
.stairs { background: #0d1013; color: #fff; padding-block: var(--sec); overflow: clip; }
.stairs__h { margin: 0 0 clamp(40px, 5vw, 72px); max-width: 18ch; font-weight: 800; font-stretch: 118%; font-size: clamp(1.8rem, 3.4vw, 3rem); line-height: 1.02; }
.stairs__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: clamp(10px, 1.4vw, 20px); min-height: 72vh; margin: 0; padding: 0; list-style: none; }
.stairs__step { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: calc(34% + var(--k) * 22%); padding: 16px 16px 14px; background: #fff; color: var(--encre); overflow: hidden; }
.stairs__lab { position: absolute; left: 16px; top: 14px; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.stairs__step b { font-weight: 820; font-stretch: 125%; font-size: clamp(4rem, 12vw, 12rem); line-height: .78; letter-spacing: -.05em; }
.stairs__step:last-child b { font-size: clamp(2.6rem, 6.4vw, 6.6rem); }
.stairs__d { margin-top: 12px; font-size: .9rem; color: #3b4247; }
@media (prefers-reduced-motion: no-preference) {
  .js .stairs__step { transform: translate3d(0, calc((1 - clamp(0, calc(var(--p, 0) * 3.2 - .55 - var(--k) * .2), 1)) * 45%), 0); }
}
@media (max-width: 800px) {
  .stairs__list { grid-template-columns: 1fr 1fr; min-height: 0; }
  .stairs__step { height: auto; min-height: calc(160px + var(--k) * 40px); transform: none !important; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1000px) {
  .js .hx { height: 150vh; --e: clamp(0, calc(var(--p, 0) / .95), 1); }
  .js .hx__title { opacity: clamp(0, calc(1.15 - var(--e) * 1.1), 1); }
}
.ab__words { font-size: clamp(3rem, 12.4vw, 13rem); }
.ab__grid { margin-top: calc(clamp(3rem, 12.4vw, 13rem) * -.38); }
.ab__c { padding-top: calc(clamp(3rem, 12.4vw, 13rem) * .5); }
@media (prefers-reduced-motion: no-preference) {
  .js .hx__top, .js .hx__foot { opacity: 0; translate: 0 18px; transition: opacity .9s ease .7s, translate 1.1s var(--ease-out) .7s; }
  .is-ready .hx__top, .is-ready .hx__foot { opacity: 1; translate: 0 0; }
}

/* =========================================================================
   DIRECTION v8 — « Trame & format »
   Signature : la trame d'impression (points), les lés, les repères,
   le bleu comme lumière. Références : Artefakt (transitions pixel),
   Wastetide (images découpées en lés), Visite Amazonia (fonds qui changent),
   Love and Money / Boc (lettres géantes coupées par le bord).
   ========================================================================= */
:root { --papier: #efece4; --papier-2: #e6e1d5; --nuit: #0a1622; --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
@property --dot { syntax: '<length>'; inherits: false; initial-value: 0px; }
/* Image révélée par une trame de points qui grossissent */
.fx [data-halftone] { -webkit-mask-image: radial-gradient(circle at center, #000 var(--dot), transparent calc(var(--dot) + .6px)); mask-image: radial-gradient(circle at center, #000 var(--dot), transparent calc(var(--dot) + .6px)); -webkit-mask-size: 14px 14px; mask-size: 14px 14px; --dot: 0px; transition: --dot 1.7s var(--ease-out); }
.fx [data-halftone].is-in { --dot: 11px; }
.fx [data-halftone].is-done { -webkit-mask-image: none; mask-image: none; }
/* Noir et blanc → couleur */
.fx [data-mono] img { filter: grayscale(1) contrast(1.06); transition: filter 1.8s var(--ease-out) .15s; }
.fx [data-mono].is-in img { filter: none; }
/* Étiquettes techniques en chasse fixe */
.meta { font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
/* Trame de points décorative */
.dots { background-image: radial-gradient(currentColor 1px, transparent 1.4px); background-size: 12px 12px; }
/* Grain papier */
.paper { background-color: var(--papier); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* Bordure lumineuse bleue qui suit le curseur */
[data-glow] { position: relative; }
[data-glow]::after { content: ""; position: absolute; inset: 0; z-index: 3; padding: 1px; border-radius: inherit; pointer-events: none; background: radial-gradient(260px circle at var(--lx, -300px) var(--ly, -300px), rgba(34,154,214,.95), rgba(34,154,214,0) 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; transition: opacity .4s; }
[data-glow]:hover::after { opacity: 1; }
/* Boutons : reflet lumineux au survol */
.btn { overflow: hidden; }
.btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.38) 50%, transparent 65%); transform: translateX(-130%); transition: transform .9s var(--ease-out); pointer-events: none; }
.btn:hover::after { transform: translateX(130%); }
/* Navigation : apparition en cascade des entrées du sous-menu */
@media (min-width: 1101px) {
  .nav__panel li { opacity: 0; translate: 0 8px; transition: opacity .35s, translate .5s var(--ease-out); }
  .nav__panel.is-open li { opacity: 1; translate: 0 0; }
  .nav__panel.is-open li:nth-child(2) { transition-delay: .04s; } .nav__panel.is-open li:nth-child(3) { transition-delay: .08s; } .nav__panel.is-open li:nth-child(4) { transition-delay: .12s; } .nav__panel.is-open li:nth-child(5) { transition-delay: .16s; } .nav__panel.is-open li:nth-child(6) { transition-delay: .2s; }
  .nav__panel img { transition: transform .5s var(--ease-out), filter .4s; filter: grayscale(.6); }
  .nav__panel a:hover img { transform: scale(1.12); filter: none; }
}
/* Lien texte : la flèche glisse */
.text-link::after { content: "→"; display: inline-block; transition: transform .4s var(--ease-out); }
.text-link:hover::after { transform: translateX(5px); }

/* ---------- Hero v8 : lés, trame, repères ---------- */
.hx__les { position: absolute; inset: 0; z-index: -2; display: none; }
.hx__les i { position: absolute; top: 0; bottom: 0; left: calc(var(--i) * 12.5%); width: 12.5%; background-image: url("../../media/atelier/atelier-machines-03-1600.webp"); background-repeat: no-repeat; background-size: max(100vw, 177.78vh) auto; background-position: calc(-1 * var(--i) * 12.5vw - (max(100vw, 177.78vh) - 100vw) / 2) 50%; }
.hx__trame { position: absolute; inset: -20px; z-index: -1; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.22) calc(.5px + var(--e, 0) * 2.4px), transparent calc(.9px + var(--e, 0) * 2.4px)); background-size: 9px 9px; mix-blend-mode: overlay; transform: translate3d(calc(var(--mx, 0) * 6px), calc(var(--my, 0) * 6px), 0); opacity: calc(.5 + var(--e, 0) * .5); }
.hx__vert { position: absolute; left: clamp(18px, 2vw, 30px); top: 50%; z-index: 2; writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); color: rgba(255,255,255,.6); }
.hx__coord { position: absolute; right: var(--gut); top: 32%; z-index: 2; text-align: right; color: rgba(255,255,255,.62); line-height: 1.6; }
@media (prefers-reduced-motion: no-preference) and (min-width: 1000px) {
  .js .hx__les { display: block; opacity: clamp(0, calc((var(--e) - .02) * 12), 1); }
  .js .hx__les i { transform: translate3d(calc((var(--i) - 3.5) * var(--e) * 1.6vw), calc(var(--e) * var(--dy)), 0) scale(calc(1 - var(--e) * .06)); }
  .js .hx__media { opacity: clamp(0, calc(1 - (var(--e) - .02) * 12), 1); }
  .js .hx__coord, .js .hx__vert { opacity: clamp(0, calc(1 - var(--e) * 2.5), 1); }
}
@media (max-width: 999px) { .hx__vert, .hx__coord { display: none; } }

/* ---------- « Nous donnons de l'échelle à vos idées » ---------- */
.scale { position: relative; background: #fff; color: var(--encre); overflow: clip; }
.scale__pin { position: relative; padding: clamp(150px, 16vw, 240px) var(--gut) var(--sec); }
.scale__title { margin: 0; text-transform: uppercase; font-weight: 820; line-height: .86; letter-spacing: -.035em; }
.scale__l { display: block; white-space: nowrap; font-stretch: 112%; font-size: clamp(2.4rem, 9vw, 9.6rem); }
.scale__l--2 { font-size: clamp(3rem, 14vw, 15rem); }
.scale__l--3 { text-align: right; }
.scale__big { display: inline-block; color: transparent; -webkit-text-stroke: clamp(1.5px, .25vw, 3px) var(--bleu); }
.scale__note { display: grid; gap: 14px; max-width: 30rem; margin: clamp(40px, 5vw, 72px) 0 0 auto; }
.scale__note .meta { color: var(--acier); }
.scale__txt { font-size: clamp(1.15rem, 1.7vw, 1.55rem) !important; line-height: 1.3 !important; font-weight: 650 !important; max-width: none !important; }
.scale__mark { position: absolute; inset: clamp(80px, 9vw, 130px) clamp(14px, 2vw, 28px) clamp(14px, 2vw, 28px); pointer-events: none; color: rgba(20,24,28,.25); }
@media (prefers-reduced-motion: no-preference) and (min-width: 1000px) {
  .js .scale { height: 300vh; --a: clamp(0, calc(var(--p, 0) / .3), 1); --z: clamp(0, calc((var(--p, 0) - .5) / .44), 1); }
  .js .scale__pin { position: sticky; top: 0; height: 100vh; padding: 0 var(--gut); display: flex; flex-direction: column; justify-content: center; }
  .js .scale__l--1 { transform: translate3d(calc((1 - var(--a)) * 70vw), 0, 0); opacity: clamp(0, calc(1 - var(--z) * 3), 1); }
  .js .scale__l--3 { transform: translate3d(calc((1 - var(--a)) * -70vw), 0, 0); opacity: clamp(0, calc(1 - var(--z) * 3), 1); }
  .js .scale__l--2 { position: relative; z-index: 2; text-align: center; }
  .js .scale__big { transform: scale(calc(.55 + var(--a) * .45 + var(--z) * var(--z) * var(--z) * 14)); transform-origin: 47% 55%; -webkit-text-stroke-width: calc(3px - var(--z) * 2px); color: rgba(34,154,214, clamp(0, calc(var(--z) * 1.6 - .2), 1)); will-change: transform; }
  .js .scale__note { position: absolute; right: var(--gut); bottom: 9vh; margin: 0; opacity: clamp(0, calc(var(--a) * 1.2 - .2 - var(--z) * 4), 1); }
  .js .scale__mark { inset: calc(var(--hdr-h) + 20px) clamp(14px, 2vw, 28px) clamp(14px, 2vw, 28px); opacity: clamp(0, calc(1 - var(--z) * 3), 1); }
}
@media (max-width: 999px) { .scale__l--3 { text-align: left; } .scale__l, .scale__l--2 { white-space: normal; } }

.mx-tech__callouts .meta { display: block; margin-bottom: 4px; color: var(--bleu); font-style: normal; }

/* ---------- Éco-responsable : rupture organique ---------- */
.eco2 { position: relative; color: #22301f; padding: clamp(140px, 16vw, 240px) 0 var(--sec); overflow: clip; }
.eco2__fade { position: absolute; left: 0; right: 0; top: 0; height: clamp(120px, 14vw, 220px); background: linear-gradient(180deg, #0e1114 0%, rgba(14,17,20,0) 100%); pointer-events: none; }
.eco2__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 110px); align-items: center; }
.eco2__kicker { color: #3c6b4f !important; }
.eco2__title { margin: 0; font-weight: 300; font-stretch: 92%; font-size: clamp(2.6rem, 6vw, 5.8rem); line-height: .98; letter-spacing: -.03em; color: #1d2a1e; }
.eco2__lead { margin: 28px 0 0; max-width: 32em; font-size: clamp(1.05rem, 1.3vw, 1.18rem); color: #3d4b3c; }
.eco2__points { margin: 34px 0; padding: 0; list-style: none; border-top: 1px solid rgba(47,90,67,.25); }
.eco2__points li { display: grid; grid-template-columns: 40px 140px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid rgba(47,90,67,.18); }
.eco2__points .meta { color: #3c6b4f; }
.eco2__points b { font-stretch: 110%; }
.eco2__points span:last-child { color: #4b5a4a; }
.eco2__scene { position: relative; min-height: clamp(420px, 46vw, 640px); }
.eco2__img { position: absolute; margin: 0; overflow: hidden; box-shadow: 0 50px 80px -50px rgba(34,48,31,.55); }
.eco2__img .pic, .eco2__img img { width: 100%; height: 100%; object-fit: cover; }
.eco2__img--a { left: 6%; top: 0; width: 70%; aspect-ratio: 4 / 5; border-radius: 48% 52% 46% 54% / 38% 40% 60% 62%; transform: translate3d(0, calc((.5 - var(--p, .5)) * 70px), 0); }
.eco2__img--b { right: 0; bottom: 6%; width: 38%; aspect-ratio: 1; border-radius: 50%; transform: translate3d(0, calc((.5 - var(--p, .5)) * -110px), 0); }
.eco2__img--c { left: 0; bottom: -2%; width: 26%; aspect-ratio: 1448 / 1024; border-radius: 6px; background: #fff; padding: 6px; transform: translate3d(0, calc((.5 - var(--p, .5)) * -40px), 0) rotate(-4deg); }
.eco2__img--c img { object-fit: contain; }
.eco2__leaf { position: absolute; border-radius: 0 100% 0 100%; background: linear-gradient(135deg, #8db596, #4f7d5d); opacity: .55; pointer-events: none; }
.eco2__leaf--1 { width: 46px; height: 46px; right: 18%; top: 4%; transform: rotate(18deg); }
.eco2__leaf--2 { width: 28px; height: 28px; left: 2%; top: 38%; transform: rotate(-30deg); opacity: .4; }
.eco2__leaf--3 { width: 64px; height: 64px; right: 4%; top: 46%; transform: rotate(60deg); opacity: .3; }
@media (prefers-reduced-motion: no-preference) {
  .eco2__leaf--1 { animation: drift 9s ease-in-out infinite alternate; }
  .eco2__leaf--2 { animation: drift 11s ease-in-out -3s infinite alternate; }
  .eco2__leaf--3 { animation: drift 13s ease-in-out -6s infinite alternate; }
}
@keyframes drift { from { translate: 0 0; } to { translate: 12px -22px; } }
@media (max-width: 960px) {
  .eco2__grid { grid-template-columns: 1fr; }
  .eco2__points li { grid-template-columns: 32px minmax(0, 1fr); }
  .eco2__points li span:last-child { grid-column: 2; }
}
.scale__l--2 { font-size: clamp(2.8rem, 10.6vw, 11.5rem); }
@media (prefers-reduced-motion: no-preference) and (min-width: 1000px) {
  .js .scale__note { right: auto; left: var(--gut); bottom: 6vh; max-width: 25rem; }
  .js .scale__title { margin-top: -6vh; }
  .js .hx__les i { transform: translate3d(calc((var(--i) - 3.5) * var(--e) * 3.2vw), calc(var(--e) * var(--dy) * 2.2), 0) scale(calc(1 - var(--e) * .1)); box-shadow: 0 30px 60px -20px rgba(0,0,0,.8); }
}

/* =========================================================================
   CONTACT v8
   ========================================================================= */
.ct-hero { position: relative; min-height: min(92svh, 900px); display: flex; align-items: flex-end; color: #fff; background: #0d1013; overflow: hidden; isolation: isolate; }
main > .ct-hero:first-child:not(.ph):not(.hero) { padding-top: 0; }
.ct-hero__media { position: absolute; inset: -4%; z-index: -2; transform: translate3d(calc(var(--mx, 0) * -14px), calc(var(--my, 0) * -10px + (var(--p, .5) - .5) * 60px), 0) scale(1.04); }
.ct-hero__media .pic, .ct-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.ct-hero__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(13,16,19,.5) 0%, rgba(13,16,19,.1) 40%, rgba(13,16,19,.85) 100%); }
.ct-hero__in { position: relative; width: 100%; padding-block: calc(var(--hdr-h) + 80px) clamp(36px, 5vw, 64px); }
.ct-hero .crumbs { color: rgba(255,255,255,.72); } .ct-hero .crumbs a { color: inherit; }
.ct-hero__title { margin: 0; text-transform: uppercase; font-weight: 820; font-stretch: 118%; font-size: clamp(2.8rem, 9.6vw, 10.4rem); line-height: .86; letter-spacing: -.035em; }
.ct-hero__l { display: block; overflow: hidden; }
.ct-hero__l > span { display: inline-block; }
.ct-hero__l--2 { padding-left: 1.2em; color: transparent; -webkit-text-stroke: clamp(1.5px, .2vw, 2.5px) #229ad6; }
.ct-hero__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 48px; margin-top: clamp(24px, 3vw, 40px); padding-top: 18px; border-top: 1px solid rgba(255,255,255,.25); }
.ct-hero__sub { margin: 0; max-width: 34em; color: rgba(255,255,255,.86); font-size: clamp(1rem, 1.3vw, 1.15rem); }
.ct-hero__coord { color: rgba(255,255,255,.65); text-align: right; line-height: 1.6; }
@media (prefers-reduced-motion: no-preference) {
  .js .ct-hero__l > span { transform: translate3d(0, 105%, 0); transition: transform 1.2s var(--ease-out) .1s; }
  .js .ct-hero__l--2 > span { transition-delay: .22s; }
  .is-ready .ct-hero__l > span { transform: none; }
}
@media (max-width: 760px) { .ct-hero__l--2 { padding-left: 0; } .ct-hero__row { flex-direction: column; align-items: flex-start; } .ct-hero__coord { text-align: left; } }

.ct-cards { position: relative; z-index: 2; margin-top: clamp(-90px, -6vw, -40px); }
.ct-cards__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) minmax(0, 1.25fr); gap: clamp(12px, 1.4vw, 20px); align-items: stretch; }
.ct-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 250px; padding: clamp(22px, 2.4vw, 32px); border-radius: 14px; color: inherit; text-decoration: none; overflow: hidden; isolation: isolate; transition: transform .5s var(--ease-out), box-shadow .5s; }
.ct-card:hover { transform: translateY(-6px); box-shadow: 0 40px 70px -40px rgba(20,24,28,.6); }
.ct-card--tel { background: var(--encre); color: #fff; }
.ct-card--mail { background: var(--bleu-encre); color: #fff; }
.ct-card--addr { background: #fff; color: #fff; border: 1px solid var(--trait); }
.ct-card__img { position: absolute; inset: 0; z-index: -1; }
.ct-card__img .pic, .ct-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.ct-card__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,16,19,.25), rgba(13,16,19,.82)); }
.ct-card:hover .ct-card__img img { transform: scale(1.06); }
.ct-card .meta { opacity: .75; }
.ct-card__big { font-weight: 800; font-stretch: 118%; font-size: clamp(1.9rem, 3.4vw, 3.2rem); line-height: 1; letter-spacing: -.02em; overflow-wrap: anywhere; }
.ct-card__big--sm { font-size: clamp(1.25rem, 1.9vw, 1.7rem); line-height: 1.15; }
.ct-card__foot { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.25); font-weight: 650; }
.ct-card__arrow { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.14); transition: transform .45s var(--ease-out), background .3s; }
.ct-card:hover .ct-card__arrow { transform: rotate(45deg); background: var(--bleu); }
.ct-card--mail:hover .ct-card__arrow { background: #fff; color: var(--bleu-encre); }
@media (max-width: 900px) { .ct-cards__grid { grid-template-columns: 1fr; } .ct-cards { margin-top: 24px; } }

.ct-main { padding-block: var(--sec); }
.ct-main__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.ct-form__meta { color: var(--acier); }
.ct-form__title { margin: 12px 0 10px; font-weight: 800; font-stretch: 118%; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -.02em; }
.ct-form__intro { color: var(--acier); margin: 0 0 32px; max-width: 34em; }
.ct-form__grid .field input, .ct-form__grid .field textarea { background: transparent; border: 0; border-bottom: 1.5px solid #b8bfc4; border-radius: 0; padding-inline: 0; min-height: 52px; }
.ct-form__grid .field input:focus, .ct-form__grid .field textarea:focus { box-shadow: none; border-color: var(--bleu); background: linear-gradient(0deg, rgba(34,154,214,.06), transparent 60%); }
.ct-form__grid .field label { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--acier); }
.ct-map { position: sticky; top: calc(var(--hdr-h) + 24px); }
.gmap { position: relative; aspect-ratio: 4 / 3.4; overflow: hidden; border-radius: 14px; background-color: #e3e8eb; background-image: linear-gradient(rgba(20,24,28,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(20,24,28,.06) 1px, transparent 1px); background-size: 32px 32px; }
.gmap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.25) contrast(1.05); }
.gmap__ph { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 24px; text-align: center; }
.gmap.is-loaded .gmap__ph { display: none; }
.gmap__txt { margin: 0; max-width: 26em; color: #3b4247; font-size: .95rem; }
.gmap__txt b { display: block; margin-bottom: 4px; color: var(--encre); font-size: 1.1rem; }
.ct-map__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: 14px; padding: 16px 18px; border-radius: 12px; background: var(--encre); color: #fff; }
.ct-map__bar .meta { display: block; color: rgba(255,255,255,.6); }
.ct-map__addr { font-weight: 650; }
.ct-map__bar .btns { margin: 0; gap: 8px; }
.ct-map__bar .btn--ghost { --fg: #fff; --fill: #fff; --fg-h: var(--encre); border-color: rgba(255,255,255,.4); }
.ct-info { margin: 22px 0 0; display: grid; gap: 0; border-top: 1px solid var(--trait); }
.ct-info > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--trait); }
.ct-info dt { color: var(--acier); padding-top: 3px; }
.ct-info dd { margin: 0; }
@media (max-width: 960px) { .ct-main__grid { grid-template-columns: 1fr; } .ct-map { position: static; } }
.ct-hero__in { padding-bottom: clamp(110px, 10vw, 150px); }
.ct-card--tel .ct-card__big { white-space: nowrap; font-size: clamp(1.7rem, 2.7vw, 2.7rem); }
.ct-card__big--mail { overflow-wrap: normal; font-size: clamp(1.15rem, 1.65vw, 1.5rem); }
@media (max-width: 900px) { .ct-hero__in { padding-bottom: 48px; } }

/* ---------- Impression : titre géant + matières en défilement horizontal ---------- */
.mat { padding-block: var(--sec); background: var(--bardage-2); overflow: clip; }
.mat__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(40px, 6vw, 96px); align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.mat__head .lead { margin: 0; }
.mat__track { display: flex; gap: clamp(14px, 1.6vw, 24px); margin: 0; padding: 0 var(--gut); list-style: none; width: max-content; }
.mat__sw { position: relative; display: grid; gap: 6px; width: clamp(240px, 26vw, 380px); flex: none; }
.mat__sw:nth-child(even) { margin-top: clamp(30px, 5vw, 80px); }
.mat__sw b { font-stretch: 116%; font-size: clamp(1.3rem, 2vw, 1.8rem); }
.mat__sw > span:last-child { color: var(--acier); }
.mat__sw .meta { color: var(--bleu-encre); margin-top: 10px; }
.mat__tex { display: block; aspect-ratio: 4 / 5; border-radius: 6px; box-shadow: 0 40px 60px -40px rgba(20,24,28,.55); }
.mat__tex--papier { background-color: #f6f3ec; }
.mat__tex--bache { background: repeating-linear-gradient(0deg, rgba(20,24,28,.07) 0 2px, transparent 2px 6px), repeating-linear-gradient(90deg, rgba(20,24,28,.07) 0 2px, transparent 2px 6px), linear-gradient(160deg, #f4f6f7, #d9dee1); }
.mat__tex--adhesif { position: relative; overflow: hidden; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.45) 47%, transparent 56%), linear-gradient(140deg, #36aee6, #0b6ea6); }
.mat__tex--adhesif::after { content: ""; position: absolute; right: 0; bottom: 0; width: 26%; aspect-ratio: 1; background: linear-gradient(135deg, #f3f5f6 50%, transparent 50%); box-shadow: -6px -6px 14px rgba(0,0,0,.15); }
.mat__tex--toile { background: repeating-linear-gradient(45deg, rgba(60,50,30,.08) 0 1px, transparent 1px 4px), repeating-linear-gradient(-45deg, rgba(60,50,30,.08) 0 1px, transparent 1px 4px), #e1d9c8; }
.mat__tex--rigide { background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px), linear-gradient(180deg, #3d464d, #23292e); box-shadow: inset 0 -10px 0 #14181c, 0 40px 60px -40px rgba(20,24,28,.7); }
.mat__note { margin-top: 28px; }
@media (prefers-reduced-motion: no-preference) {
  .js .mat__track { transform: translate3d(calc((.55 - var(--p, .5)) * 40vw), 0, 0); will-change: transform; }
}
@media (max-width: 900px) {
  .mat__head { grid-template-columns: 1fr; }
  .mat__track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; transform: none !important; }
  .mat__sw { scroll-snap-align: start; width: 70vw; }
}

/* ---------- Éco-responsable : univers organique sur toute la page ---------- */
.p-eco-responsable main > .sec { background-color: var(--papier); }
.p-eco-responsable main > .sec.sec--grey { background-color: var(--papier-2); }
.p-eco-responsable main > .sec { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.p-eco-responsable .h-sec { font-weight: 300; font-stretch: 92%; letter-spacing: -.03em; color: #1d2a1e; }
.p-eco-responsable .ph h1 { font-weight: 300; font-stretch: 92%; }
.p-eco-responsable .frame { border-radius: 46% 54% 42% 58% / 40% 38% 62% 60%; }
.p-eco-responsable .eco-stage { background-color: #dfe8df; }
.p-eco-responsable .certs .frame { border-radius: 6px; }

/* ==========================================================================
   v9 — Style d'ensemble : transitions, en-têtes géants, numérotation,
   bloc final et pied de page
   ========================================================================== */

/* ---------- Transition entre pages : rideau de lés --------------------- */
.pt { position: fixed; inset: 0; z-index: 300; display: grid; grid-template-columns: repeat(7, 1fr); pointer-events: none; }
.pt i { display: block; background: var(--encre); transform: scaleY(0); transform-origin: 50% 0; margin-right: -1px; }
.pt i:nth-child(2n) { background: #1a1f24; }
.pt i:nth-child(4) { background: var(--bleu-encre); }
.pt__mark { position: absolute; left: 50%; top: 50%; translate: -50% -50%; color: #fff; opacity: 0; white-space: nowrap; }
html.pt-out .pt { pointer-events: auto; }
html.pt-out .pt i { transform: scaleY(1); transform-origin: 50% 100%; transition: transform .52s cubic-bezier(.76, 0, .24, 1) calc(var(--k) * .035s); }
html.pt-out .pt__mark { opacity: 1; transition: opacity .25s .3s; }
html.pt-in .pt i { animation: ptIn .8s cubic-bezier(.76, 0, .24, 1) calc(.08s + var(--k) * .04s) both; }
html.pt-in .pt__mark { animation: ptMark .45s both; }
@keyframes ptIn { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes ptMark { from { opacity: 1; } to { opacity: 0; } }

/* ---------- Progression de lecture + en-tête qui s'efface -------------- */
.sprog { position: fixed; left: 0; top: 0; z-index: 61; width: 100%; height: 3px; background: linear-gradient(90deg, var(--bleu-encre), var(--bleu)); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
.hdr { transition: padding .4s var(--ease), transform .6s var(--ease-out); }
.hdr.is-hidden { transform: translateY(-130%); }
::selection { background: var(--bleu); color: #fff; }

/* ---------- En-têtes des pages intérieures ----------------------------- */
.ph h1, .ph--light h1 {
  max-width: none; text-transform: uppercase; font-weight: 820; font-stretch: 125%;
  font-size: clamp(1.7rem, min(calc(84vw / (var(--lw, 10) * .8)), 10vw), 9.6rem);
  line-height: .92; letter-spacing: -.035em; text-wrap: balance;
}
.p-eco-responsable .ph h1 { font-weight: 300; font-stretch: 92%; letter-spacing: -.02em; }
.ph__media::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.2) .8px, transparent 1.25px); background-size: 7px 7px; -webkit-mask-image: linear-gradient(100deg, #000 0%, transparent 62%); mask-image: linear-gradient(100deg, #000 0%, transparent 62%); }
.ph__in::after { content: "Adhéprint — Collégien (77)"; position: absolute; right: var(--gut); top: calc(var(--hdr-h) + 52px); font: 500 .72rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.ph--light .ph__in::after { color: var(--acier); }
.ph--light { background-image: radial-gradient(rgba(20,24,28,.13) 1px, transparent 1.4px); background-size: 14px 14px; background-color: var(--bardage-2); }
.ph--light::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, var(--bardage-2) 30%, rgba(243,245,246,.55) 100%); }
.ph--light .ph__in { z-index: 1; }
@media (max-width: 700px) { .ph__in::after { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .js .ph__media img { animation: phIn 1.8s var(--ease-out) both; }
  @keyframes phIn { from { transform: scale(1.14); filter: grayscale(1) contrast(1.1); } to { transform: scale(1.02); filter: none; } }
}

/* ---------- Numérotation des sections (pages intérieures) -------------- */
body:not(.p-index) main { counter-reset: sec; }
body:not(.p-index) main .h-sec { counter-increment: sec; }
body:not(.p-index) main .h-sec::before {
  content: "(" counter(sec, decimal-leading-zero) ")";
  content: "(" counter(sec, decimal-leading-zero) ")" / "";
  display: inline-block; vertical-align: top; margin: .42em .7em 0 0;
  font: 500 .74rem/1 var(--mono); letter-spacing: .06em; color: var(--bleu-encre);
}
body:not(.p-index) .dark .h-sec::before { color: var(--bleu); }

/* ---------- Tuiles, panneaux, cartes : plus de caractère --------------- */
.tiles { counter-reset: t; }
.tiles > li { counter-increment: t; padding-top: 58px; transition: background-color .4s; }
.tiles > li::before { content: counter(t, decimal-leading-zero); position: absolute; left: 0; top: 26px; font: 500 .74rem/1 var(--mono); letter-spacing: .06em; color: var(--bleu-encre); }
.tiles > li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--bleu); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease-out); }
.tiles > li:hover::after { transform: scaleX(1); }
.dark .tiles > li::before { color: var(--bleu); }

.panels { counter-reset: pn; }
.panels > li { counter-increment: pn; overflow: hidden; }
.panels > li::before { content: counter(pn, decimal-leading-zero); position: absolute; right: 24px; top: 22px; font: 500 .74rem/1 var(--mono); letter-spacing: .06em; color: var(--acier); transition: color .3s; }
.panels > li:hover::before { color: var(--bleu-encre); }
.dark .panels > li::before { color: rgba(255,255,255,.62); }
.dark .panels > li:hover::before { color: var(--bleu); }
.panels h3 a { color: inherit; text-decoration: none; }
.panels h3 a::after { content: ""; position: absolute; inset: 0; z-index: 2; }

.cards { counter-reset: cd; }
.cards > li { counter-increment: cd; }
.card__cat::before { content: counter(cd, decimal-leading-zero) " — "; font-family: var(--mono); font-weight: 500; font-size: .78em; letter-spacing: .04em; }
.card__media img { filter: grayscale(.35) contrast(1.04); }
.card__link:hover .card__media img, .card__link:focus-visible .card__media img { filter: none; }

/* Fond gris légèrement « papier » */
.sec--grey { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- Bloc final commun ----------------------------------------- */
.endcta__meta { display: block; margin-bottom: clamp(20px, 2.4vw, 32px); color: var(--bleu); }
.endcta--page .endcta__title { max-width: 11ch; }
.endcta__title .w > span { transition-duration: 1.1s; }

/* Masque des mots : laisse de la place aux accents des capitales */
[data-split] .w { padding-top: .16em; margin-top: -.16em; }

/* ==========================================================================
   v10 — « ÉPREUVE » : grille suisse visible, typo qui s'étire, hero WebGL,
   photos révélées façon caméra, défilement fluide. Mélange de styles :
   imprimerie suisse + typo cinétique + scène 3D + éditorial plein cadre.
   ========================================================================== */
:root {
  --papier: #f2f0ea; --papier-2: #e7e4db; --nuit: #0b0d10;
  --r-btn: 0px; --r-img: 0px; --r-panel: 0px; --hdr-h: 64px;
  --c: #00a0e3; --m: #e5007e; --y: #ffe600; --k: #14181c;
  --hair: rgba(120, 128, 136, .22);
}
body { background: var(--papier); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Grille d'épreuve visible (12 colonnes, 4 sur mobile) ------- */
body::before {
  content: ""; position: fixed; top: 0; bottom: 0; z-index: 55; pointer-events: none;
  left: max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut)));
  right: max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut)));
  background-image: linear-gradient(90deg, var(--hair) 1px, transparent 1px);
  background-size: calc(100% / 12) 100%;
  border-right: 1px solid var(--hair); opacity: .5;
}
@media (max-width: 760px) { body::before { background-size: 25% 100%; opacity: .4; } }
@media print { body::before { display: none; } }

/* ---------- En-tête : barre d'épreuve plate, mono ---------------------- */
.hdr { padding: 0; }
.hdr__in { max-width: none; margin: 0; min-height: var(--hdr-h); padding: 0 var(--gut); border-radius: 0; border: 0; border-bottom: 1px solid rgba(20,24,28,.12); background: rgba(242,240,234,.86); box-shadow: none; }
.hdr.is-scrolled .hdr__in { min-height: var(--hdr-h); background: rgba(242,240,234,.92); }
.hdr--over:not(.is-scrolled) .hdr__in { background: transparent; border-bottom-color: rgba(255,255,255,.18); -webkit-backdrop-filter: none; backdrop-filter: none; }
.hdr__logo img, .hdr.is-scrolled .hdr__logo img { width: 150px; }
@media (min-width: 1101px) {
  .nav__list { counter-reset: nv; gap: 0; }
  .nav__list > li { counter-increment: nv; }
  .nav__a, .nav__btn { font-family: var(--mono); font-size: .74rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; font-stretch: 100%; padding: 8px 14px; border-radius: 0; }
  .nav__a::before, .nav__btn::before { content: "0" counter(nv) "/"; margin-right: .5em; opacity: .5; }
  .nav__a:hover, .nav__btn:hover, .nav__btn[aria-expanded="true"] { background: none; color: var(--bleu-encre); }
  .hdr--over:not(.is-scrolled) .nav__a:hover, .hdr--over:not(.is-scrolled) .nav__btn:hover { background: none; color: var(--bleu); }
  .nav__panel { border-radius: 0; top: calc(100% + 13px); background: rgba(242,240,234,.97); border: 1px solid rgba(20,24,28,.12); }
  .nav__panel a, .nav__panel img { border-radius: 0; }
}
.nav__cta { font-family: var(--mono); font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; font-weight: 500; min-height: 42px; padding: 10px 18px; }
@media (max-width: 1100px) {
  .hdr { padding-top: 0; }
  .hdr__in { border-radius: 0; }
  .hdr__burger { font-family: var(--mono); font-size: .76rem; letter-spacing: .07em; text-transform: uppercase; font-weight: 500; }
  .nav { clip-path: inset(0 0 100% 0); }
  .nav.is-open { clip-path: inset(0 0 0 0); }
  .nav__list { counter-reset: nv; }
  .nav__list > li { counter-increment: nv; }
  .nav__a, .nav__btn { position: relative; justify-content: flex-start; gap: 14px; padding-right: 34px; font-size: clamp(1.7rem, 8.2vw, 3.6rem); font-stretch: 125%; font-weight: 850; text-transform: uppercase; letter-spacing: -.03em; line-height: 1; transition: font-stretch .5s var(--ease-out), color .3s; }
  .nav__a::before, .nav__btn::before { content: "0" counter(nv); position: absolute; right: 0; top: 50%; translate: 0 -50%; font: 500 .72rem/1 var(--mono); letter-spacing: .06em; color: var(--bleu); }
  .hdr__logo { position: relative; z-index: 2; }
  .nav__a:hover, .nav__btn:hover { font-stretch: 80%; }
}

/* Contraste du menu mobile : les intitulés restent lisibles sur le fond nuit. */
@media (max-width: 1100px) {
  html body .nav.is-open .nav__a,
  html body .nav.is-open .nav__btn { color: #fff !important; }
  html body .nav.is-open .nav__a:hover,
  html body .nav.is-open .nav__btn:hover,
  html body .nav.is-open .nav__btn[aria-expanded="true"],
  html body .nav.is-open .nav__a[aria-current="page"],
  html body .nav.is-open .nav__btn.is-current { color: #40b9ee !important; }
}

/* ---------- Boutons : rectangles d’épreuve ---------------------------- */
.btn { border-radius: 0; font-stretch: 112%; }
.btn--sm { min-height: 44px; }
.text-link { text-transform: uppercase; font-family: var(--mono); font-size: .8rem; letter-spacing: .06em; }

/* ---------- Titres : apparition « étirée » (déformation, sans reflow) -- */
@media (prefers-reduced-motion: no-preference) {
  [data-split] .w > span { transform: translateY(105%) scaleX(.5); transform-origin: 0 100%; transition: transform 1.15s var(--ease-out); transition-delay: calc(var(--i) * 55ms + var(--d, 0s)); }
  [data-split].is-in .w > span { transform: none; }
}
.h-sec { font-weight: 820; font-stretch: 122%; letter-spacing: -.03em; line-height: .92; }

/* ---------- Photos : révélation « caméra » ---------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .fx .cam { clip-path: inset(12% 9% 12% 9%); transition: clip-path 1.5s var(--ease-out); }
  .fx .cam img { transform: scale(1.32); transition: transform 1.8s var(--ease-out), filter .5s; }
  .fx .cam.is-in { clip-path: inset(0 0 0 0); }
  .fx .cam.is-in img { transform: none; }
}

/* ---------- Curseur « mire de repérage » ------------------------------ */
.fx-reg { position: fixed; left: 0; top: 0; z-index: 400; width: 34px; height: 34px; margin: -17px 0 0 -17px; pointer-events: none; color: #fff; mix-blend-mode: difference; opacity: 0; transition: opacity .3s, width .35s var(--ease-out), height .35s var(--ease-out), margin .35s var(--ease-out); }
.fx-reg.is-on { opacity: 1; }
.fx-reg::before { content: ""; position: absolute; inset: 22%; border: 1.5px solid currentColor; border-radius: 50%; }
.fx-reg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(currentColor, currentColor) 50% 0 / 1.5px 100% no-repeat, linear-gradient(currentColor, currentColor) 0 50% / 100% 1.5px no-repeat; }
.fx-reg.is-link { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
.fx-reg.is-link::before { inset: 30%; background: currentColor; }

/* ==========================================================================
   Hero WebGL « rouleau d'impression »
   ========================================================================== */
.rl { position: relative; height: 100vh; height: 100svh; background: var(--nuit); color: #fff; }
.js .rl { height: 340vh; }
.js .rl.no-gl { height: 100svh; }
main > .rl:first-child:not(.ph):not(.hero) { padding-top: 0; }
.rl__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; }
.rl__fallback { position: absolute; inset: 0; z-index: -2; }
.rl__fallback .pic, .rl__fallback img { width: 100%; height: 100%; object-fit: cover; }
.rl__fallback img { filter: grayscale(.5) brightness(.5) contrast(1.1); }
.rl__gl { position: absolute; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s var(--ease-out); }
.rl.is-gl .rl__gl { opacity: 1; }
.rl__vignette { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(130% 95% at 50% 45%, transparent 45%, rgba(8,10,12,.7)), linear-gradient(180deg, rgba(8,10,12,.6), transparent 26%, transparent 58%, rgba(8,10,12,.85)); opacity: calc(1 - clamp(0, (var(--rp, 0) - .5) * 2.6, .8)); }
.rl__ui { position: absolute; inset: 0; z-index: 1; display: grid; grid-template-rows: auto 1fr auto; padding: calc(var(--hdr-h) + 18px) var(--gut) clamp(20px, 3vw, 36px); pointer-events: none; }
.rl__ui a, .rl__ui button { pointer-events: auto; }
.rl__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.72); }
.rl__cmyk { display: inline-flex; gap: 4px; }
.rl__cmyk i { width: 10px; height: 10px; background: var(--c); }
.rl__cmyk i:nth-child(2) { background: var(--m); } .rl__cmyk i:nth-child(3) { background: var(--y); } .rl__cmyk i:nth-child(4) { background: #fff; }
.rl__title { align-self: end; margin: 0; font-weight: 850; text-transform: uppercase; font-size: clamp(2.5rem, 9.6vw, 11rem); line-height: .84; letter-spacing: -.035em;
  opacity: calc(1 - clamp(0, (var(--rp, 0) - .03) * 7, 1)); transform: translate3d(0, calc(var(--rp, 0) * -26vh), 0); }
.rl__l { display: block; overflow: hidden; padding-top: .1em; margin-top: -.1em; }
.rl__l > span { display: inline-block; font-stretch: calc(125% - min(var(--rp, 0) * 9, 1) * 63%); }
.rl__l--2 { padding-left: 1.05em; }
.rl__l--2 em { display: inline-block; margin-left: 1.4em; vertical-align: .9em; font-style: normal; color: var(--bleu); font-size: max(.72rem, .1em); }
.rl__l--3 > span { font-size: 1em; }
@media (prefers-reduced-motion: no-preference) {
  .js .rl__l > span { animation: rlIn 1.5s var(--ease-out) backwards; }
  .js .rl__l:nth-child(2) > span { animation-delay: .12s; } .js .rl__l:nth-child(3) > span { animation-delay: .24s; }
  @keyframes rlIn { from { transform: translateY(105%) scaleX(.42); transform-origin: 0 100%; } to { transform: none; transform-origin: 0 100%; } }
}
.rl__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 48px; margin-top: clamp(20px, 3vh, 36px); padding-top: 18px; border-top: 1px solid rgba(255,255,255,.2);
  opacity: calc(1 - clamp(0, (var(--rp, 0) - .02) * 8, 1)); }
.rl.is-moved .rl__foot a { pointer-events: none; }
.rl__sub { margin: 0; max-width: 34em; color: rgba(255,255,255,.82); font-size: clamp(1rem, 1.25vw, 1.15rem); }
.rl__foot .btns { margin: 0; flex-wrap: nowrap; }
.rl__caps { position: absolute; left: var(--gut); bottom: clamp(28px, 6vh, 64px); margin: 0; padding: 0; list-style: none; width: min(560px, calc(100% - 2 * var(--gut) - 60px)); }
.rl__caps li { position: absolute; left: 0; bottom: 0; width: 100%; padding: 18px 20px; background: rgba(11,13,16,.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-left: 3px solid var(--bleu);
  --o: clamp(0, min(calc((var(--rp, 0) - var(--a)) * 16), calc((var(--b) - var(--rp, 0)) * 16)), 1);
  opacity: var(--o); transform: translate3d(0, calc((1 - var(--o)) * 24px), 0); }
.rl__caps .meta { display: block; margin-bottom: 8px; color: var(--bleu); }
.rl__caps b { display: block; font-weight: 800; font-stretch: 118%; font-size: clamp(1.3rem, 2.4vw, 2.2rem); line-height: 1.02; letter-spacing: -.02em; }
.rl__scroll { position: absolute; left: 50%; bottom: 18px; translate: -50% 0; display: grid; justify-items: center; gap: 8px; color: rgba(255,255,255,.7); opacity: calc(1 - var(--rp, 0) * 10); }
.rl__scroll i { width: 1px; height: 42px; background: linear-gradient(#fff, transparent); }
@media (prefers-reduced-motion: no-preference) { .rl__scroll i { animation: rlScroll 2s var(--ease) infinite; transform-origin: 50% 0; } @keyframes rlScroll { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } } }
.rl__meter { position: absolute; right: var(--gut); top: 50%; translate: 0 -50%; display: grid; justify-items: end; gap: 10px; }
.rl__meter i { position: relative; width: 2px; height: 28vh; background: rgba(255,255,255,.2); }
.rl__meter i::after { content: ""; position: absolute; inset: 0; background: var(--bleu); transform-origin: 50% 0; transform: scaleY(var(--rp, 0)); }
.rl__meter .meta { color: rgba(255,255,255,.8); }
@media (max-width: 760px) {
  .js .rl { height: 300vh; }
  .rl__top span:nth-child(3) { display: none; }
  .rl__foot { flex-direction: column; align-items: flex-start; }
  .rl__foot .btns { flex-wrap: wrap; }
  .rl__l--2 { padding-left: 0; }
  .rl__l--2 em { display: block; margin: .6em 0 .2em; vertical-align: 0; }
  .rl__meter { display: none; }
  .rl__scroll { display: none; }
}
/* Sans animations : un hero simple, sans épinglage */
@media (prefers-reduced-motion: reduce) {
  .js .rl, .rl { height: auto; }
  .rl__stage { position: relative; height: auto; min-height: 100svh; }
  .rl__ui { position: relative; min-height: 100svh; }
  .rl__caps, .rl__scroll, .rl__meter { display: none; }
}

/* ---------- v10 : angles vifs partout (sauf l'éco, volontairement organique) */
body:not(.p-eco-responsable) :is(.frame, .card__media, .sx__frame, .sx__count, .hs__media, .zm__img, .mx img, .mx video, .panels > li, .cta-final, .ct-card, .gmap, .vslot, .cov-ba, .tiles > li, .stats li, .chip, .faq details, .field input, .field textarea, .field select, .nav__panel):not(.eco2 *) { border-radius: 0 !important; }
@media (prefers-reduced-motion: no-preference) {
  .js .rise { clip-path: inset(0 calc((1 - var(--q, 1)) * 5vw)); }
}

/* ---------- Accueil : index des solutions (typo qui s'étire) ----------- */
.sx { background: var(--papier); border-top: 1px solid var(--hair); }
.sx__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, .7fr); }
.sx__media { order: 2; }
.sx__frame { aspect-ratio: 3 / 4; }
.sx__count { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; border-radius: 0; background: var(--encre); }
.sx__head .h-sec { font-size: clamp(2.6rem, 6vw, 6rem); text-transform: uppercase; }
.sx__list { border-top: 2px solid var(--encre); }
.sx__item { border-bottom: 1px solid var(--hair); }
.sx__link { grid-template-columns: 64px minmax(0, 1fr); }
.sx__n { font-family: var(--mono); font-weight: 500; font-size: .78rem; letter-spacing: .06em; color: var(--acier); padding-top: 1.3em; }
.sx__t { text-transform: uppercase; font-weight: 850; font-stretch: 66%; font-size: clamp(2.2rem, 5.6vw, 6.2rem); line-height: .9; letter-spacing: -.025em; color: #737b81; transition: color .4s, font-stretch .8s var(--ease-out); }
.sx__item.is-active .sx__t { font-stretch: 125%; color: var(--encre); }
.sx__item.is-active .sx__n { color: var(--bleu-encre); }
.sx__link:hover .sx__t { font-stretch: 125%; color: var(--encre); }
.sx__tags { font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; }
.sx__go { font-family: var(--mono); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; }
@media (max-width: 1000px) { .sx__t { font-stretch: 105%; font-size: clamp(1.45rem, 6.4vw, 2.8rem); color: var(--encre); } .sx__link { grid-template-columns: 44px minmax(0, 1fr); } }
.sx { overflow-x: clip; }

/* ---------- Pages intérieures : en-tête d'épreuve ---------------------- */
.ph { border-bottom: 1px solid var(--hair); }
.ph h1, .ph--light h1 { font-weight: 850; }
.ph--light { background-color: var(--papier); }
.ph--light::before { background: linear-gradient(90deg, var(--papier) 30%, rgba(242,240,234,.55) 100%); }
.kicker { font-family: var(--mono); font-weight: 500; font-size: .76rem; letter-spacing: .07em; text-transform: uppercase; font-stretch: 100%; }
.kicker::before { width: 10px; height: 10px; background: var(--bleu); }
.sec--grey { background-color: var(--papier-2); }
.lead { font-size: clamp(1.08rem, 1.4vw, 1.3rem); }
@media (prefers-reduced-motion: no-preference) {
  .js .mx-full__media { clip-path: inset(calc((1 - var(--e)) * 24%) calc((1 - var(--e)) * 30%) calc((1 - var(--e)) * 24%) calc((1 - var(--e)) * 30%)); }
}
body:not(.p-eco-responsable) :is(.cov-uses__frame, .cov-ba__stage, .cov-gal__real, .mx-tech__img, .mx-stack__sheet, .zm__cell, .ab__photo, .sol__float, .mx-stack__label, .cov-uses__label, .cov-ba__tag, .cov-proc__bat, .cov-proc__ok, .cov-tx__pt) { border-radius: 0 !important; }
.scale { background: var(--papier); }

/* ==========================================================================
   v11 — « Atelier de l'image » : finition premium.
   70 % calme et photographique, 30 % de moments forts (hero 3D, machines,
   échelle du grand format, transformation covering).
   ========================================================================== */
:root { --hair: rgba(20,24,28,.12); }
/* Plus de grille ni de curseur sur tout le site : réservés aux zones utiles */
body::before { display: none; }
.fx-reg { display: none; }

/* ---------- Menu : verre léger, contraste automatique ------------------ */
.hdr__in { gap: 20px; border-bottom: 1px solid transparent; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; transition: background .45s var(--ease), border-color .45s, -webkit-backdrop-filter .45s, backdrop-filter .45s; }
.hdr.is-scrolled .hdr__in { background: rgba(242,240,234,.72); border-bottom-color: rgba(20,24,28,.08); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
.hdr--over.is-scrolled .hdr__in { background: rgba(10,12,15,.52); border-bottom-color: rgba(255,255,255,.08); }
.hdr--over.is-scrolled .hdr__logo .logo-c { display: none; }
.hdr--over.is-scrolled .hdr__logo .logo-w { display: block; }
.hdr--over.is-scrolled .nav__a, .hdr--over.is-scrolled .nav__btn, .hdr--over.is-scrolled .hdr__burger { color: #fff; }
.hdr--over:not(.is-scrolled) .hdr__in { border-bottom-color: transparent; }
@media (min-width: 1101px) {
  .nav__a, .nav__btn { font-family: inherit; font-size: .93rem; font-weight: 600; letter-spacing: 0; text-transform: none; font-stretch: 104%; padding: 8px 13px; }
  .nav__a::before, .nav__btn::before { content: none; }
  .nav__a, .nav__btn { position: relative; }
  .nav__a::after, .nav__btn::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 6px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: 100% 50%; transition: transform .45s var(--ease-out); }
  .nav__a:hover::after, .nav__btn:hover::after, .nav__btn[aria-expanded="true"]::after { transform: scaleX(1); transform-origin: 0 50%; }
  .nav__a[aria-current="page"]::after, .nav__btn.is-current::after { transform: scaleX(1); background: var(--bleu); }
  .nav__a[aria-current="page"], .nav__btn.is-current { box-shadow: none; }
  .nav__a:hover, .nav__btn:hover, .nav__btn[aria-expanded="true"], .hdr--over .nav__a:hover, .hdr--over .nav__btn:hover { color: inherit; background: none; }
  .nav__btn svg { width: 10px; }
  .nav__cta { font-family: inherit; font-size: .9rem; letter-spacing: 0; text-transform: none; font-weight: 700; min-height: 42px; padding: 9px 16px 9px 18px; }
}
.hdr__devis { display: none; }
@media (max-width: 1100px) {
  .hdr__devis { position: relative; z-index: 2; display: inline-flex; align-items: center; min-height: 40px; margin-left: auto; padding: 8px 14px; background: var(--bleu-encre); color: #fff; font-weight: 700; font-size: .9rem; text-decoration: none; }
  .hdr__burger { margin-left: 6px; }
  body.nav-open .hdr__devis { visibility: hidden; }
}

/* ---------- Transition de page : rideau + mot géant de la destination --- */
.pt__word { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; z-index: 1; overflow: hidden; padding: 0 var(--gut); color: #fff; text-align: center; text-transform: uppercase; font-weight: 850; font-stretch: 125%; font-size: clamp(2.6rem, 11vw, 11rem); line-height: .9; letter-spacing: -.035em; white-space: nowrap; opacity: 0; }
html.pt-out .pt__word { animation: ptWordIn .5s .12s var(--ease-out) both; }
html.pt-in .pt__word { animation: ptWordOut .45s var(--ease-out) both; }
@keyframes ptWordIn { from { opacity: 0; transform: translateY(40%) scaleX(.6); } to { opacity: 1; transform: none; } }
@keyframes ptWordOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-30%); } }
html.pt-out .pt i { transition-duration: .42s; }

/* ---------- Curseur contextuel (Voir / Découvrir / Drag) --------------- */
.fx-cursor span { width: 96px; height: 96px; margin: -48px 0 0 -48px; background: rgba(11,110,166,.94); font: 600 .72rem/1 var(--mono, monospace); letter-spacing: .08em; text-transform: uppercase; }

/* ---------- Liens et cartes : survols soignés -------------------------- */
.text-link { font-family: inherit; text-transform: none; letter-spacing: 0; font-size: 1rem; }
.card__link { display: block; transition: transform .6s var(--ease-out); }
.card__link:hover { transform: translateY(-4px); }
.card__body { position: relative; }
.card__body::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1.5px; background: var(--bleu); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--ease-out); }
.card__link:hover .card__body::before { transform: scaleX(1); }

/* ---------- Accueil : sortie du hero, plongée dans l'épreuve ----------- */
.rl__paper { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--papier); opacity: clamp(0, calc((var(--rp, 0) - .9) * 12), 1); }
.rl + .scale { margin-top: 0; }

/* ---------- Machine 01 : mot géant et passage au détail ----------------- */
.mx1__word, .mx1__detail { display: none; }
@media (prefers-reduced-motion: no-preference) and (min-width: 1000px) {
  .js .mx1__word { display: block; position: absolute; right: -2vw; top: 9vh; z-index: 1; pointer-events: none; text-transform: uppercase; font-weight: 900; font-stretch: 125%; font-size: 21vw; line-height: .8; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.55); white-space: nowrap;
    opacity: var(--t); transform: translate3d(calc((.55 - var(--p, 0)) * 28vw), 0, 0); }
  .js .mx--full .mx-full__media img { transform: translate3d(calc((1 - var(--e)) * 14%), 0, 0) scale(calc(1.32 - var(--e) * .22 - var(--p, 0) * .1 + max(0, var(--p, 0) - .72) * 1.5)); transform-origin: 64% 47%; }
  .js .mx1__detail { display: flex; align-items: center; gap: 12px; position: absolute; left: 62%; top: 45%; z-index: 3; color: #fff; opacity: clamp(0, calc((var(--p, 0) - .8) * 8), 1); }
  .js .mx1__detail i { width: 46px; height: 46px; border: 1.5px solid var(--bleu); border-radius: 50%; box-shadow: 0 0 0 8px rgba(34,154,214,.18); }
  .js .mx--full .mx-full__text { opacity: calc(var(--t) * (1 - clamp(0, (var(--p, 0) - .78) * 6, .65))); }
}


@media (prefers-reduced-motion: no-preference) and (min-width: 1000px) {
  .js .mx-full__text { padding-inline: var(--gut); }
}

/* ---------- Grand format : séquence « l'échelle » ---------------------- */
.echelle { position: relative; background: var(--papier); overflow: clip; }
.echelle__pin { position: relative; padding: var(--sec) var(--gut); display: grid; gap: 28px; justify-items: center; text-align: center; }
.echelle__word { margin: 0; text-transform: uppercase; font-weight: 900; font-stretch: 125%; font-size: clamp(2.6rem, 12.5vw, 14rem); line-height: .82; letter-spacing: -.045em; color: var(--encre); }
.echelle__sheet { position: relative; width: min(420px, 70vw); aspect-ratio: 1417 / 1890; background: #fff; padding: 10px; box-shadow: 0 40px 80px -40px rgba(20,24,28,.45); }
.echelle__sheet .pic, .echelle__sheet img { width: 100%; height: 100%; object-fit: cover; }
.echelle__dim { display: none; }
.echelle__hud { display: grid; gap: 8px; justify-items: center; }
.echelle__hud .meta { color: var(--acier); }
.echelle__fmt { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 0; padding: 0; list-style: none; }
.echelle__fmt b { display: block; font-stretch: 118%; font-size: 1.2rem; }
.echelle__fmt span { font-size: .86rem; color: var(--acier); }
.echelle__end { max-width: 30em; margin: 0; font-size: clamp(1.1rem, 1.6vw, 1.4rem); }
@media (prefers-reduced-motion: no-preference) and (min-width: 760px) {
  .js .echelle { height: 380vh; --s: calc(.13 * pow(26, var(--p, 0))); }
  @supports not (width: calc(pow(2, 2) * 1px)) { .js .echelle { --s: calc(.13 + var(--p, 0) * var(--p, 0) * 2.3); } }
  .js .echelle__pin { position: sticky; top: 0; height: 100vh; padding: 0; display: block; overflow: hidden; }
  .js .echelle__word { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; z-index: 0; font-size: 13vw; transform: scale(calc(1 + var(--p, 0) * .25)); }
  .js .echelle__sheet { position: absolute; left: 50%; top: 50%; z-index: 1; width: auto; height: 100vh; padding: 1.2vh; margin: 0; translate: -50% -50%; transform: scale(var(--s)); will-change: transform; box-shadow: 0 6vh 10vh -6vh rgba(20,24,28,.5); }
  .js .echelle__dim { display: block; position: absolute; background: var(--bleu); opacity: calc(1 - clamp(0, (var(--p, 0) - .6) * 4, 1)); }
  .js .echelle__dim--w { left: 0; right: 0; bottom: -4vh; height: .5vh; }
  .js .echelle__dim--h { top: 0; bottom: 0; right: -4vh; width: .5vh; }
  .js .echelle__dim::before, .js .echelle__dim::after { content: ""; position: absolute; background: var(--bleu); }
  .js .echelle__dim--w::before, .js .echelle__dim--w::after { top: -1.5vh; width: .5vh; height: 3.5vh; } .js .echelle__dim--w::before { left: 0; } .js .echelle__dim--w::after { right: 0; }
  .js .echelle__dim--h::before, .js .echelle__dim--h::after { left: -1.5vh; height: .5vh; width: 3.5vh; } .js .echelle__dim--h::before { top: 0; } .js .echelle__dim--h::after { bottom: 0; }
  .js .echelle__hud { position: absolute; left: var(--gut); bottom: clamp(24px, 5vh, 56px); z-index: 2; justify-items: start; text-align: left; padding: 16px 18px; background: rgba(242,240,234,.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-left: 3px solid var(--bleu); }
  .js .echelle__fmt { display: grid; justify-content: start; gap: 0; }
  .js .echelle__fmt li { grid-area: 1 / 1; opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .5s var(--ease-out); }
  .js .echelle__fmt b { font-size: clamp(1.6rem, 3vw, 2.6rem); font-weight: 850; line-height: 1; }
  .js .echelle[data-step="0"] [data-i="0"], .js .echelle[data-step="1"] [data-i="1"], .js .echelle[data-step="2"] [data-i="2"], .js .echelle[data-step="3"] [data-i="3"] { opacity: 1; transform: none; }
  .js .echelle__end { position: absolute; right: var(--gut); bottom: clamp(24px, 5vh, 56px); z-index: 2; max-width: 22em; text-align: right; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.5); opacity: clamp(0, calc((var(--p, 0) - .86) * 9), 1); }
}

/* ---------- Covering : transformation du véhicule au scroll ------------ */
.cvx { position: relative; background: #0b0d10; color: #fff; overflow: clip; }
.cvx__pin { position: relative; padding: var(--sec) 0; }
.cvx__floor { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 45% at 50% 72%, rgba(34,154,214,.16), transparent 70%), radial-gradient(90% 60% at 50% 100%, #161b20, transparent 70%); }
.cvx__head { position: relative; z-index: 2; }
.cvx__title { margin: 0; max-width: 16ch; font-weight: 850; font-stretch: 122%; font-size: clamp(2rem, 4.6vw, 4.4rem); line-height: .95; letter-spacing: -.03em; }
.cvx__stage { position: relative; width: min(1100px, 92vw); margin: clamp(28px, 4vw, 56px) auto 0; aspect-ratio: 640 / 280; }
.cvx__veh, .cvx__l, .cvx__l svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cvx__l--blue { opacity: 0; }
.cvx__brandtxt { fill: #0b5f8f; font: 800 20px/1 Archivo, Arial, sans-serif; letter-spacing: .02em; }
.cvx__dimtxt { fill: #229ad6; font: 500 9px/1 ui-monospace, Menlo, monospace; letter-spacing: .12em; }
.cvx__shine { transform: translateX(calc(var(--sh, 1) * 1040px)); }
.cvx__shadow { position: absolute; left: 6%; right: 4%; bottom: 0; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.75), transparent); z-index: -1; }
.cvx__pt { display: none; }
.cvx__squeegee { display: none; }
.cvx__phases { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: clamp(28px, 4vw, 48px); padding-top: 16px; list-style: none; border-top: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.7); font-size: .95rem; }
.cvx__phases b { margin-right: 8px; color: var(--bleu); font: 500 .74rem/1 var(--mono); letter-spacing: .06em; }
.cvx__info { position: relative; z-index: 2; width: min(420px, calc(100% - 2 * var(--gut))); margin: 28px var(--gut) 0 auto; padding: 20px 22px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); }
.cvx__info .meta { color: var(--bleu); }
.cvx__info dl { display: grid; gap: 8px; margin: 14px 0 0; }
.cvx__info dl div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.1); }
.cvx__info dt { color: rgba(255,255,255,.6); font-size: .9rem; }
.cvx__info dd { margin: 0; font-weight: 650; }
.cvx__todo { margin: 12px 0 0; font-size: .86rem; }
.cvx .is-todo { color: rgba(255,255,255,.62); font-style: italic; }

@media (prefers-reduced-motion: no-preference) and (min-width: 1000px) {
  .js .cvx { height: 480vh;
    --drive: clamp(0, calc(var(--p, 0) / .14), 1);
    --bp: clamp(0, calc((var(--p, 0) - .1) / .06), 1);
    --g: clamp(0, calc((var(--p, 0) - .2) / .1), 1);
    --f: clamp(0, calc((var(--p, 0) - .32) / .26), 1);
    --z: clamp(0, calc((var(--p, 0) - .58) / .12), 1);
    --l: clamp(0, calc((var(--p, 0) - .7) / .08), 1);
    --sh: clamp(0, calc((var(--p, 0) - .8) / .1), 1);
    --in: clamp(0, calc((var(--p, 0) - .88) / .07), 1); }
  .js .cvx__pin { position: sticky; top: 0; height: 100vh; padding: calc(var(--hdr-h) + 3vh) 0 3vh; display: flex; flex-direction: column; }
  .js .cvx__stage { width: min(1180px, 80vw, calc((100vh - 330px) * 2.28)); margin-top: auto; margin-bottom: auto; }
  .js .cvx__veh, .js .cvx__shadow { transform: translate3d(calc((1 - var(--drive)) * (1 - var(--drive)) * -115vw), 0, 0); }
  .js .cvx__wheel { transform: rotate(calc((1 - var(--drive)) * -900deg)); transform-box: view-box; }
  .js .cvx__l--blue { opacity: calc(var(--bp) * (1 - var(--g))); }
  .js .cvx__l--film { clip-path: inset(0 calc((1 - var(--f)) * 100%) 0 0); }
  .js .cvx__l--graph { clip-path: inset(0 calc((1 - var(--g)) * 100%) 0 0); }
  .js .cvx__l--zone { clip-path: inset(0 0 0 calc((1 - var(--z)) * 100%)); }
  .js .cvx__l--logo { opacity: var(--l); transform: scale(calc(.94 + var(--l) * .06)); transform-origin: 20% 55%; }
  .js .cvx__l--shine { opacity: calc(var(--sh) * (1 - var(--sh)) * 4); }
  .js .cvx__squeegee { display: block; position: absolute; top: 18%; bottom: 14%; left: calc(5% + var(--f) * 89%); width: 2px; background: #bfe6fb; box-shadow: 0 0 18px 4px rgba(34,154,214,.7); opacity: calc(clamp(0, var(--f) * 20, 1) * clamp(0, (1 - var(--f)) * 20, 1)); }
  .js .cvx__pt { display: grid; gap: 2px; position: absolute; z-index: 3; width: 210px; padding-left: 18px; border-left: 1px solid var(--bleu); font-size: .86rem; color: rgba(255,255,255,.75); opacity: var(--o, 0); transform: translate3d(0, calc((1 - var(--o, 0)) * 14px), 0); }
  .js .cvx__pt b { color: #fff; font-size: .98rem; }
  .js .cvx__pt i { position: absolute; left: -5px; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--bleu); box-shadow: 0 0 0 5px rgba(34,154,214,.25); }
  .js .cvx__pt--1 { left: 6%; top: 0; --o: var(--g); }
  .js .cvx__pt--2 { left: 66%; top: 0; --o: var(--z); }
  .js .cvx__pt--3 { left: 36%; top: 0; --o: var(--l); }
  .js .cvx__phases { margin-top: 0; }
  .js .cvx__phases li { transition: color .4s; }
  .js .cvx[data-step="0"] [data-i="0"], .js .cvx[data-step="1"] [data-i="1"], .js .cvx[data-step="2"] [data-i="2"], .js .cvx[data-step="3"] [data-i="3"], .js .cvx[data-step="4"] [data-i="4"] { color: #fff; }
  .js .cvx__phases::after { content: ""; position: absolute; left: var(--gut); top: -1px; height: 2px; width: calc((100% - 2 * var(--gut)) * var(--p, 0)); background: var(--bleu); }
  .js .cvx__info { position: absolute; right: var(--gut); top: calc(var(--hdr-h) + 3vh); margin: 0; opacity: var(--in); transform: translate3d(0, calc((1 - var(--in)) * 20px), 0); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
}

/* ---------- Contact : lignes typographiques, formulaire, grande carte ---- */
.ct-lines { padding-block: clamp(40px, 6vw, 88px) 0; }
.ct-line { position: relative; display: grid; grid-template-columns: 56px minmax(120px, .7fr) minmax(0, 2.2fr) auto; align-items: baseline; gap: 12px 24px; padding: clamp(18px, 2.4vw, 30px) 0; border-bottom: 1px solid var(--hair); color: inherit; text-decoration: none; }
.ct-line:first-child { border-top: 1px solid var(--hair); }
.ct-line::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--bleu); transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s var(--ease-out); }
a.ct-line:hover::after, a.ct-line:focus-visible::after { transform: scaleX(1); }
.ct-line__n { color: var(--bleu-encre); }
.ct-line__k { color: var(--acier); font-weight: 600; }
.ct-line__v { font-weight: 800; font-stretch: 120%; font-size: clamp(1.6rem, 4.4vw, 4.2rem); line-height: 1; letter-spacing: -.03em; transition: transform .7s var(--ease-out), color .3s; overflow-wrap: anywhere; }
.ct-line__v--addr { font-size: clamp(1.3rem, 2.8vw, 2.6rem); }
.ct-line__v--todo { font-size: 1rem; font-weight: 500; font-stretch: 100%; letter-spacing: 0; }
a.ct-line:hover .ct-line__v { transform: translateX(14px); color: var(--bleu-encre); }
.ct-line__go { font-weight: 700; color: var(--bleu-encre); white-space: nowrap; }
@media (max-width: 760px) { .ct-line { grid-template-columns: 34px 1fr; } .ct-line__v { grid-column: 1 / -1; } .ct-line__go { grid-column: 1 / -1; } }
.ct-main__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); }
.ct-aside { position: sticky; top: calc(var(--hdr-h) + 32px); display: grid; gap: 28px; padding: 28px; background: var(--papier-2); }
.ct-aside .ct-info { margin: 0; }
@media (max-width: 900px) { .ct-main__grid { grid-template-columns: 1fr; } .ct-aside { position: static; } }
.ct-mapsec { background: var(--encre); color: #fff; }
.gmap--xl { aspect-ratio: auto; height: min(78vh, 760px); min-height: 520px; border-radius: 0 !important; background: #dfe3e1; background-image: none; }
.gmap--xl .gmap__ph { display: block; padding: 0; text-align: left; }
.gmap__draw { position: absolute; inset: 0; width: 100%; height: 100%; color: #fff; opacity: .95; }
.gmap--xl::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(20,24,28,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(20,24,28,.05) 1px, transparent 1px); background-size: 40px 40px; }
.gmap__word { position: absolute; left: var(--gut); bottom: -.12em; text-transform: uppercase; font-weight: 900; font-stretch: 125%; font-size: clamp(4rem, 15vw, 15rem); line-height: .8; letter-spacing: -.04em; color: rgba(20,24,28,.08); white-space: nowrap; pointer-events: none; }
.gmap--xl .gmap__pin { position: absolute; left: 58%; top: 46%; translate: -50% -100%; filter: drop-shadow(0 12px 14px rgba(0,0,0,.25)); }
.gmap--xl .gmap__pin::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 60px; height: 60px; margin-left: -30px; border-radius: 50%; border: 2px solid var(--bleu); opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .gmap--xl .gmap__pin::after { animation: pinPulse 2.4s var(--ease-out) infinite; } @keyframes pinPulse { 0% { transform: scale(.2); opacity: .9; } 100% { transform: scale(1.8); opacity: 0; } } }
.gmap__card { position: absolute; left: var(--gut); top: clamp(24px, 6vh, 64px); width: min(460px, calc(100% - 2 * var(--gut))); padding: clamp(22px, 2.4vw, 32px); background: rgba(242,240,234,.94); color: var(--encre); box-shadow: 0 40px 80px -40px rgba(0,0,0,.4); }
.gmap__title { margin: 0; font-weight: 850; font-stretch: 120%; font-size: clamp(1.5rem, 2.4vw, 2.2rem); line-height: 1; letter-spacing: -.02em; }
.gmap__addr { margin: 12px 0 0; font-size: 1.05rem; }
.gmap__card .btns { margin-top: 22px; }
.gmap__card .gmap__txt { margin: 18px 0 0; font-size: .86rem; color: var(--acier); max-width: none; }
.gmap.is-loaded .gmap__ph { display: none; }
.gmap--xl iframe { filter: grayscale(.15) contrast(1.04); }
.ct-mapsec__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding-block: 22px; }
.ct-mapsec__bar .btns { margin: 0; }
.ct-mapsec__bar .btn--ghost { --fg: #fff; border-color: rgba(255,255,255,.4); --fill: #fff; --fg-h: var(--encre); }
.ct-mapsec__bar .meta { color: rgba(255,255,255,.7); }
@media (max-width: 760px) { .gmap--xl { height: auto; min-height: 640px; } .gmap--xl .gmap__pin { left: 70%; top: 80%; } }

/* ---------- Réalisations : composition éditoriale (8 rythmes qui tournent) */
@media (min-width: 900px) {
  .cards--ed { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px) clamp(18px, 2vw, 32px); align-items: start; }
  .cards--ed > .card { grid-column: span 4; }
  .cards--ed > [data-k="0"] { grid-column: span 7; }
  .cards--ed > [data-k="1"] { grid-column: span 5; margin-top: 12vh; }
  .cards--ed > [data-k="0"] .card__media { aspect-ratio: 4 / 3; }
  .cards--ed > [data-k="1"] .card__media { aspect-ratio: 4 / 5; }
  .cards--ed > [data-k="2"] .card__media, .cards--ed > [data-k="3"] .card__media, .cards--ed > [data-k="4"] .card__media { aspect-ratio: 1; }
  .cards--ed > [data-k="3"] { margin-top: 6vh; }
  .cards--ed > [data-k="5"] { grid-column: 1 / -1; }
  .cards--ed > [data-k="5"] .card__media { aspect-ratio: 21 / 8; }
  .cards--ed > [data-k="5"] .card__title { font-size: clamp(1.4rem, 2.4vw, 2.2rem); }
  .cards--ed > [data-k="6"] { grid-column: span 5; }
  .cards--ed > [data-k="6"] .card__media { aspect-ratio: 4 / 5; }
  .cards--ed > [data-k="7"] { grid-column: span 7; margin-top: 16vh; }
  .cards--ed > [data-k="7"] .card__media { aspect-ratio: 4 / 3; }
  .cards--ed > [data-k="0"] .card__title, .cards--ed > [data-k="7"] .card__title { font-size: clamp(1.3rem, 1.9vw, 1.8rem); }
}

/* ---------- À propos : chapitres éditoriaux ---------------------------- */
.chap { padding-block: var(--sec); }
.chap--dark { background: var(--encre); color: #fff; }
.chap--paper { background: var(--papier-2); }
.chap__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.chap__side { position: sticky; top: calc(var(--hdr-h) + 32px); display: grid; gap: 10px; }
.chap__n { font-weight: 900; font-stretch: 125%; font-size: clamp(4rem, 11vw, 10rem); line-height: .8; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px currentColor; opacity: .9; }
.chap__side .meta { color: var(--bleu-encre); }
.chap--dark .chap__side .meta { color: var(--bleu); }
.chap__title { margin: 0; max-width: 16ch; font-weight: 850; font-stretch: 122%; font-size: clamp(2.2rem, 5.4vw, 5.2rem); line-height: .94; letter-spacing: -.03em; }
.chap__prose, .chap__lead { margin-top: clamp(20px, 2.4vw, 32px); max-width: 40em; }
.chap--dark .chap__lead { color: rgba(255,255,255,.82); }
.chap__stats { margin-top: clamp(36px, 5vw, 64px); }
.chap__duo { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(16px, 2vw, 28px); align-items: end; margin: clamp(32px, 5vw, 64px) 0 clamp(24px, 3vw, 40px); }
.chap__duo--rev { align-items: start; }
.chap__ph { position: relative; margin: 0; overflow: hidden; background: #1b2025; }
.chap__ph .pic, .chap__ph img { width: 100%; height: 100%; object-fit: cover; }
.chap__ph figcaption { position: absolute; left: 12px; bottom: 12px; padding: 6px 10px; background: rgba(14,16,19,.8); color: #fff; }
.chap__ph--tall { aspect-ratio: 4 / 5; }
.chap__ph--low { aspect-ratio: 4 / 3; margin-bottom: 14vh; }
.chap__ph--wide { aspect-ratio: 16 / 10; }
.chap__ph--todo { aspect-ratio: 4 / 5; margin-top: 12vh; display: grid; place-items: center; background: repeating-linear-gradient(135deg, #e7e4db 0 14px, #efece4 14px 28px); border: 1.5px dashed #9aa2a8; }
.chap__todo { display: grid; gap: 6px; max-width: 22ch; text-align: center; color: var(--acier); font-size: .95rem; }
.chap__todo b { font: 600 .74rem/1 var(--mono); letter-spacing: .08em; color: var(--encre); }
.chap__values { margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; list-style: none; border-top: 2px solid var(--encre); }
.chap__values li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px 32px; align-items: baseline; padding: clamp(18px, 2.4vw, 30px) 0; border-bottom: 1px solid var(--hair); }
.chap__values b { font-weight: 850; font-stretch: 122%; font-size: clamp(1.8rem, 4vw, 3.6rem); line-height: 1; letter-spacing: -.03em; }
.chap__values span { color: #3b4247; }
@media (max-width: 900px) {
  .chap__grid { grid-template-columns: 1fr; }
  .chap__side { position: static; grid-auto-flow: column; justify-content: start; align-items: end; gap: 16px; }
  .chap__n { font-size: 4.4rem; }
  .chap__duo { grid-template-columns: 1fr; }
  .chap__ph--low, .chap__ph--todo { margin: 0; }
  .chap__values li { grid-template-columns: 1fr; }
}

/* ---------- Formulaires : champs larges, ligne de focus, choix nets ------ */
.form-card { border-radius: 0 !important; box-shadow: none; border: 0; background: #fff; }
.form-step > legend { align-items: flex-end; gap: 18px; font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 850; font-stretch: 120%; letter-spacing: -.02em; }
.form-step > legend span { font: 900 clamp(2.4rem, 4vw, 3.6rem)/.8 Archivo, sans-serif; font-stretch: 125%; color: transparent; -webkit-text-stroke: 1.3px var(--bleu-encre); }
.field label, .field .label { font-size: .86rem; font-weight: 650; letter-spacing: .01em; color: #3b4247; }
.field input, .field select, .field textarea { min-height: 60px; padding: 16px 18px; border: 0; border-radius: 0 !important; background-color: var(--papier); box-shadow: inset 0 -1.5px 0 #9aa2a8; font-size: 1.06rem; transition: box-shadow .35s var(--ease-out), background-color .3s; }
.field input:hover, .field select:hover, .field textarea:hover { box-shadow: inset 0 -1.5px 0 var(--encre); }
.field input:focus, .field select:focus, .field textarea:focus { background-color: #fff; box-shadow: inset 0 -3px 0 var(--bleu), 0 0 0 1px rgba(11,110,166,.25); }
.field [aria-invalid="true"] { box-shadow: inset 0 -3px 0 #b3261e; background-color: #fff6f5; }
.field__err:not(:empty) { display: flex; gap: 8px; align-items: center; color: #b3261e; font-weight: 600; font-size: .9rem; }
.field__err:not(:empty)::before { content: "!"; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #b3261e; color: #fff; font-size: .74rem; }
.chips { gap: 8px; }
.chip span { min-height: 54px; padding: 12px 18px 12px 46px; border-radius: 0; border: 1.5px solid #c6ccd1; font-size: .98rem; position: relative; transition: border-color .25s, background .25s, color .25s; }
.chip span::before { content: ""; position: absolute; left: 16px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border: 1.5px solid #9aa2a8; transition: background .25s, border-color .25s; }
.chip input:hover + span { border-color: var(--encre); }
.chip input:checked + span { background: var(--encre); border-color: var(--encre); color: #fff; }
.chip input:checked + span::before { background: var(--bleu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-6' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center / 12px no-repeat; border-color: var(--bleu); }
.chip input:focus-visible + span { outline: 3px solid var(--bleu); outline-offset: 2px; }
.drop { min-height: 170px; border-radius: 0 !important; background: var(--papier); border: 1.5px dashed #9aa2a8; transition: border-color .3s, background .3s; }
.drop svg { transition: transform .5s var(--ease-out); }
.drop:hover svg, .drop.is-over svg { transform: translateY(-6px); color: var(--bleu-encre); }
.form-submit .btn[type="submit"] { --bg:var(--bleu); --fill:var(--bleu-encre); min-height:64px; padding-inline:34px 30px; font-size:1.08rem; }
.form-progress li.is-current { color: var(--encre); }
.chap__n { -webkit-text-stroke: 1.5px var(--encre); }
.chap--dark .chap__n { -webkit-text-stroke-color: rgba(255,255,255,.85); }
.chap--paper .chap__side .meta { color: #08598a; }

/* ---------- Covering : vraies images de véhicules ---------------------- */
.vslot--img { background: #14181c; display: block; }
.vslot--img::before { content: none; }
.vslot--img .ill, .vslot--img .pic, .vslot--img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vslot--img .vslot__cap { left: 0; right: auto; bottom: 0; padding: 8px 12px; background: rgba(14,16,19,.82); color: #fff; font-size: .84rem; }
.vslot--img .ill__tag { top: 12px; bottom: auto; }
.vslot--empty { display: grid; place-items: center; background: repeating-linear-gradient(135deg, #1b2025 0 14px, #20262c 14px 28px); }
.vslot--empty::before { border-color: rgba(255,255,255,.22); }
.vslot__ph { position: relative; display: grid; gap: 8px; max-width: 26ch; padding: 18px; text-align: center; color: rgba(255,255,255,.75); font-size: .92rem; }
.vslot__ph b { font: 600 .74rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #8fd0f2; }
.cov-sizes li { display: grid; gap: 10px; }
.cov-sizes__l { font-weight: 700; }
.cov-hero__veh .ill, .cov-hero__veh .pic, .cov-hero__veh img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cov-hero__veh { box-shadow: 0 60px 120px -50px rgba(0,0,0,.8); }
.cov-uses__item .vslot { width: 100%; height: 100%; aspect-ratio: auto; }
.cov-uses__item:has(.vslot) { padding: 0; }
.cov-uses__item--photo .ill { display: block; width: 100%; height: 100%; }
.cov-ba__stage { aspect-ratio: 4 / 3; }
.cov-ba__stage::after { content: none; }
.cov-ba__after, .cov-ba__before { padding: 0; display: block; }
.cov-ba__after .ill, .cov-ba__before .ill, .cov-ba__after .pic, .cov-ba__before .pic, .cov-ba__after img, .cov-ba__before img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cov-ba__before img { filter: grayscale(1) brightness(.72) contrast(1.05); }
.cov-ba__before .ill__tag { display: none; }
.cov-ba__tag { z-index: 2; }
.cov-proc__img { position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.cov-proc__img .ill, .cov-proc__img .pic, .cov-proc__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.covh__veh .ill, .covh__veh .pic, .covh__veh img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Transformation : la photo passe du neutre (gris) à la couleur, zone par zone */
.cvx__veh--photo .cvx__l .pic, .cvx__veh--photo .cvx__l img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cvx__stage:has(.cvx__veh--photo) { aspect-ratio: 1448 / 1086; }
.cvx__veh--photo { overflow: hidden; box-shadow: 0 60px 120px -50px rgba(0,0,0,.9); }
.cvx__l--neutral img { filter: grayscale(1) brightness(.62) contrast(1.08); }
.cvx__l--band, .cvx__l--film { clip-path: inset(0); }
.cvx__l--logo { pointer-events: none; }
.cvx__frame { position: absolute; left: 73%; top: 17%; width: 23%; height: 21%; border: 2px solid var(--bleu); box-shadow: 0 0 0 6px rgba(34,154,214,.18); opacity: 0; }
.cvx__l--shine { background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%); background-size: 260% 100%; background-position: calc(100% - var(--sh, 0) * 100%) 0; mix-blend-mode: soft-light; opacity: 0; }
.cvx__veh--photo .cvx__l--blue svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cvx__veh--photo .cvx__dimtxt { font-size: 26px; }
.cvx__tag { position: absolute; right: 12px; bottom: 12px; z-index: 5; padding: 6px 10px; background: rgba(14,16,19,.82); color: #fff; font: 500 .7rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.cvx__veh--photo ~ .cvx__shadow { display: none; }
@media (prefers-reduced-motion: no-preference) and (min-width: 1000px) {
  .js .cvx__stage:has(.cvx__veh--photo) { width: min(1100px, 76vw, calc((100vh - 390px) * 1.333)); }
  .js .cvx__veh--photo { transform: translate3d(calc((1 - var(--drive)) * (1 - var(--drive)) * 60vw), 0, 0) scale(calc(.92 + var(--drive) * .08)); opacity: clamp(0, calc(var(--drive) * 1.6), 1); }
  .js .cvx__veh--photo .cvx__l--band { clip-path: inset(50% 1% 23% calc(52% + (1 - var(--g)) * 47%)); }
  .js .cvx__veh--photo .cvx__l--film { clip-path: inset(0 0 0 calc((1 - var(--f)) * 100%)); }
  .js .cvx__veh--photo .cvx__frame { opacity: calc(var(--z) * (1 - var(--l) * .6)); transform: scale(calc(1.15 - var(--z) * .15)); }
  .js .cvx__veh--photo .cvx__l--shine { opacity: calc(var(--sh) * (1 - var(--sh)) * 4); }
  .js .cvx__veh--photo .cvx__l--logo { opacity: 1; transform: none; }
  .js .cvx__stage:has(.cvx__veh--photo) .cvx__squeegee { left: calc((1 - var(--f)) * 100%); top: 0; bottom: 0; }
  .js .cvx__stage:has(.cvx__veh--photo) .cvx__pt { padding: 10px 12px 10px 16px; background: rgba(11,13,16,.8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .js .cvx__stage:has(.cvx__veh--photo) .cvx__pt--1 { left: 56%; top: 78%; }
  .js .cvx__stage:has(.cvx__veh--photo) .cvx__pt--2 { left: 50%; top: 4%; }
  .js .cvx__stage:has(.cvx__veh--photo) .cvx__pt--3 { left: 74%; top: 41%; }
}
.cov-uses__item--fleet3 { padding: 0; display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; }
.cov-uses__item--fleet3 .pic { display: block; width: 100%; height: 100%; min-height: 0; }
.cov-uses__item--fleet3 .pic:first-child { grid-row: span 2; }
.cov-uses__item--fleet3 img { width: 100%; height: 100%; object-fit: cover; }
.cvx__veh--photo .cvx__frame { left: 3%; top: 19%; width: 25%; height: 20%; }

/* --- Structure à 10 pages (octobre 2026) : ajouts uniquement --- */
@media (max-width: 1100px) {
  .nav.is-open .nav__list > li:nth-child(6) { animation-delay: .25s; } .nav.is-open .nav__list > li:nth-child(7) { animation-delay: .3s; }
}
@media (min-width: 1101px) and (max-width: 1360px) { .nav__a { padding-inline: 9px; font-size: .92rem; } .nav { gap: 12px; } }
.form-submit .form-offline { flex: 1 1 100%; max-width: none; margin: 0; padding: 12px 14px; border-left: 3px solid var(--bleu); background: rgba(20,24,28,.04); }

/* --- Vidéo de présentation dans le hero (version 13) : ajouts uniquement --- */
.rl__fallback .rl__video { display: block; width: 100%; height: 100%; object-fit: cover; filter: brightness(.55) saturate(.9) contrast(1.05); background: var(--nuit); }

/* --- Impression à plat : trois photos en lés (version 15) : ajouts uniquement --- */
.mx-full__media--tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; background: var(--nuit); }
.mx-full__media--tri .pic { display: block; position: relative; min-width: 0; overflow: hidden; }

/* --- Impression à plat : trois vidéos en lés (version 16) : ajouts uniquement --- */
.mx-full__media--tri video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--nuit); }
@media (prefers-reduced-motion: no-preference) and (min-width: 1000px) {
  .js .mx--full .mx-full__media--tri video { transform: translate3d(calc((1 - var(--e)) * 14%), 0, 0) scale(calc(1.32 - var(--e) * .22 - var(--p, 0) * .1 + max(0, var(--p, 0) - .72) * 1.5)); transform-origin: 64% 47%; }
}

/* --- Machine 02 « Imprimantes grand format » : mise en scène sobre (version 17) ---
   Remplace l'inclinaison 3D, la grille, la ligne de balayage et les traits de rappel :
   la photo se dévoile par un volet horizontal avec un zoom lent, les quatre
   caractéristiques s'affichent l'une après l'autre dans une colonne à droite. */
@media (prefers-reduced-motion: no-preference) and (min-width: 1000px) {
  .js .mx--tech { background: var(--nuit); --rv: clamp(0, calc((var(--p, 0) - .04) / .3), 1); }
  .js .mx--tech .mx-tech__grid, .js .mx--tech .mx-tech__lines, .js .mx--tech .mx-tech__scan { display: none; }
  .js .mx--tech .mx-tech__stage { height: 60vh; perspective: none; display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 72px); align-items: stretch; }
  .js .mx--tech .mx-tech__img { position: relative; inset: auto; left: auto; right: auto; top: auto; bottom: auto; height: 100%; transform: none; box-shadow: none;
    clip-path: inset(0 calc((1 - var(--rv)) * 100%) 0 0); }
  .js .mx--tech .mx-tech__img img { transform: scale(calc(1.14 - var(--p, 0) * .14)); transform-origin: 50% 55%; }
  .js .mx--tech .mx-tech__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,24,28,0) 55%, rgba(20,24,28,.45) 100%); pointer-events: none; }
  .js .mx--tech .mx-tech__callouts { position: relative; inset: auto; display: flex; flex-direction: column; justify-content: center; margin: 0; pointer-events: auto; }
  .js .mx--tech .mx-tech__callouts li { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; text-align: left; padding: 2.4vh 0 2.4vh 0;
    --lk: clamp(0, calc((var(--p, 0) - .18 - var(--k) * .13) / .1), 1);
    border-top: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(var(--bleu), var(--bleu)) 0 -1px / calc(var(--lk) * 100%) 1px no-repeat;
    opacity: calc(.18 + var(--lk) * .82); transform: translate3d(calc((1 - var(--lk)) * 24px), 0, 0); }
  .js .mx--tech .mx-tech__callouts li:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
  .js .mx--tech .mx-tech__callouts b { font-size: 1.12rem; margin: 2px 0 4px; }
}

/* --- Machine 03 « Finition et découpe » : animation en trois temps (version 18) ---
   1. Découpe : le trait de coupe se trace autour de l'épreuve.
   2. Façonnage : la pile s'ouvre, la pièce découpée se détache et monte.
   3. Contrôle : la pile se redresse face au lecteur, cotes et pastille « Contrôlé ». */
.mx-stack__dim, .mx-stack__ok, .mx-stack__steps { display: none; }
@media (prefers-reduced-motion: no-preference) and (min-width: 1000px) {
  .js .mx--stack { height: 340vh;
    --a: clamp(0, calc((var(--p, 0) - .04) / .26), 1);
    --b: clamp(0, calc((var(--p, 0) - .34) / .26), 1);
    --c: clamp(0, calc((var(--p, 0) - .66) / .24), 1); }
  .js .mx--stack .mx-stack__stage { height: 74vh; }
  .js .mx--stack .mx-stack__pile { width: min(520px, 80%);
    transform: translate(-50%, -50%) rotateX(calc(60deg - var(--b) * 8deg - var(--c) * 38deg)) rotateZ(calc(-32deg + var(--b) * 10deg + var(--c) * 22deg)) scale(calc(.9 + var(--b) * .06 + var(--c) * .1)); }
  .js .mx--stack .mx-stack__sheet { transform: translateZ(calc(var(--i) * (8px + var(--b) * (1 - var(--c)) * 70px + var(--c) * 6px))); transition: none; }
  .js .mx--stack .mx-stack__sheet--print { transform: translateZ(calc(3 * (8px + var(--b) * (1 - var(--c)) * 70px + var(--c) * 6px) + var(--b) * (1 - var(--c)) * 60px + var(--c) * 30px));
    clip-path: inset(calc(var(--b) * 6.15%) calc(var(--b) * 4.5%) round calc(var(--b) * 12px));
    box-shadow: 0 calc(20px + var(--b) * 40px) calc(40px + var(--b) * 50px) -20px rgba(0,0,0,.8); }
  .js .mx--stack .mx-stack__cut { stroke-width: 3; stroke-dasharray: 1200; stroke-dashoffset: calc(1200 - var(--a) * 1200); opacity: calc(1 - var(--b) * .7); }
  .js .mx--stack .mx-stack__dim { display: block; fill: none; stroke: var(--bleu); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-dasharray: 400; stroke-dashoffset: calc(400 - var(--c) * 400); opacity: var(--c); }
  /* Pastille de contrôle */
  .js .mx--stack .mx-stack__ok { display: inline-flex; align-items: center; gap: 8px; position: absolute; right: 6%; top: 12%; z-index: 2; padding: 10px 16px; background: var(--bleu); color: #fff; font-weight: 700; font-stretch: 110%; font-size: .95rem;
    opacity: clamp(0, calc((var(--c) - .55) / .3), 1); transform: translate3d(0, calc((1 - clamp(0, calc((var(--c) - .55) / .3), 1)) * 18px), 0) scale(calc(.9 + clamp(0, calc((var(--c) - .55) / .3), 1) * .1)); box-shadow: 0 20px 40px -18px rgba(34,154,214,.7); }
  /* Étapes sous la scène */
  .js .mx--stack .mx-stack__steps { display: flex; gap: 0; position: absolute; left: 50%; bottom: 2%; transform: translateX(-50%); margin: 0; padding: 0; list-style: none; }
  .js .mx--stack .mx-stack__steps li { --in: clamp(0, calc((var(--p, 0) - .04 - var(--k) * .31) / .06), 1); --out: clamp(0, calc((var(--p, 0) - .35 - var(--k) * .31) / .06), 1);
    position: relative; padding: 14px 22px 0; color: rgba(255,255,255,calc(.35 + (var(--in) - var(--out) * .55) * .65)); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
  .js .mx--stack .mx-stack__steps li::before { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 2px; background: rgba(255,255,255,.14); }
  .js .mx--stack .mx-stack__steps li::after { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 2px; background: var(--bleu); transform: scaleX(var(--in)); transform-origin: left; }
  .js .mx--stack .mx-stack__steps li:last-child { --out: 0; }
  /* Liste de gauche : l'étape en cours est mise en avant */
  .js .mx--stack .mx-stack__lines li { --in: clamp(0, calc((var(--p, 0) - .04 - var(--k) * .31) / .06), 1); --out: clamp(0, calc((var(--p, 0) - .35 - var(--k) * .31) / .06), 1);
    position: relative; padding-left: 20px; opacity: calc(.32 + (var(--in) - var(--out) * .5) * .68); transform: translate3d(calc((1 - var(--in)) * -14px), 0, 0); }
  .js .mx--stack .mx-stack__lines li:last-child { --out: 0; }
  .js .mx--stack .mx-stack__lines li::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; background: var(--bleu); transform: scaleY(calc(var(--in) - var(--out))); transform-origin: top; }
  .js .mx--stack .mx-stack__label { opacity: calc(1 - var(--c)); }
}

/* --- Covering, « Six étapes, une seule équipe » : une réalisation par étape (version 19) --- */
.cov-proc__img .pic { position: absolute; inset: 0; opacity: 0; }
.cov-proc__img .pic:first-child { opacity: 1; }
.js .cov-proc .cov-proc__img .pic { opacity: 0; transform: scale(1.06); transition: opacity .8s var(--ease-out), transform 1.4s var(--ease-out); }
.js .cov-proc[data-step="0"] .cov-proc__img .pic[data-i="0"], .js .cov-proc[data-step="1"] .cov-proc__img .pic[data-i="1"], .js .cov-proc[data-step="2"] .cov-proc__img .pic[data-i="2"],
.js .cov-proc[data-step="3"] .cov-proc__img .pic[data-i="3"], .js .cov-proc[data-step="4"] .cov-proc__img .pic[data-i="4"], .js .cov-proc[data-step="5"] .cov-proc__img .pic[data-i="5"] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .cov-proc .cov-proc__img .pic { transition: none; transform: none; } }

/* --- Impression grand format, image du haut (version 20) : cadrage seul --- */
.p-impression-grand-format .ph__media img { object-position: 62% 42%; }
@media (max-width: 700px) { .p-impression-grand-format .ph__media img { object-position: 64% 38%; } }

/* --- Impression grand format, section « L'échelle » (version 21) : nouvelle photo, cadrage seul --- */
.p-impression-grand-format .echelle__sheet { aspect-ratio: 1086 / 1448; }
.p-impression-grand-format .echelle__sheet img { object-position: 58% 38%; }

/* --- Impression grand format, section « déroulé » (version 22) : nouvelle photo, cadrage seul --- */
.p-impression-grand-format .unroll__print img { object-position: 50% 30%; }

/* =========================================================================
   ÉCO-RESPONSABLE — intro « De la matière à une production attentive »
   (version 23 : nouvelle séquence d'ouverture, ajouts uniquement)
   ========================================================================= */
/* --- Base (mobile, réduction des animations, sans JS) : la photo tient lieu de fond statique --- */
.ph--eco .eco__plate, .ph--eco .eco__mark, .ph--eco .eco__scrap, .ph--eco .eco__zone { display: none; }
.ph--eco .eco__steps { display: none; }
.ph--eco .eco__reveal { position: absolute; inset: 0; }
.ph--eco .eco__reveal img { position: absolute; inset: 0; }
.ph__pin { display: contents; }

@media (prefers-reduced-motion: no-preference) and (min-width: 1000px) {
  .js .ph--eco { display: block; height: 320vh; min-height: 0; background: var(--encre);
    --a: clamp(0, calc(var(--p, 0) / .32), 1);
    --b: clamp(0, calc((var(--p, 0) - .3) / .36), 1);
    --c: clamp(0, calc((var(--p, 0) - .64) / .34), 1); }
  .js .ph--eco .ph__pin { display: flex; flex-direction: column; justify-content: flex-end; position: sticky; top: 0; height: 100vh; overflow: hidden; }
  .js .ph--eco .eco__stage { position: absolute; inset: 0; z-index: -1; }

  .js .ph--eco .eco__plate { display: block; position: absolute; left: 50%; top: 48%; width: min(440px, 44vw); aspect-ratio: 1417 / 1890; translate: -50% -50%; background: #f4f3ee; box-shadow: 0 40px 90px -40px rgba(0,0,0,.6); background-image: repeating-linear-gradient(0deg, rgba(20,24,28,.05) 0 1px, transparent 1px 22px); opacity: var(--a); transform: perspective(1400px) rotateX(calc((1 - var(--a)) * 24deg)) translateY(calc((1 - var(--a)) * 60px)); transform-origin: 50% 72%; }
  .js .ph--eco .eco__mark { display: block; position: absolute; width: 18px; height: 18px; border: 1.5px solid rgba(20,24,28,.4); opacity: var(--a); }
  .js .ph--eco .eco__mark--tl { left: -9px; top: -9px; border-width: 1.5px 0 0 1.5px; }
  .js .ph--eco .eco__mark--tr { right: -9px; top: -9px; border-width: 1.5px 1.5px 0 0; }
  .js .ph--eco .eco__mark--bl { left: -9px; bottom: -9px; border-width: 0 0 1.5px 1.5px; }
  .js .ph--eco .eco__mark--br { right: -9px; bottom: -9px; border-width: 0 1.5px 1.5px 0; }

  .js .ph--eco .eco__reveal { position: absolute; left: 50%; top: 48%; width: min(440px, 44vw); aspect-ratio: 1417 / 1890; translate: -50% -50%; overflow: hidden; box-shadow: 0 40px 90px -40px rgba(0,0,0,.6); opacity: clamp(0, calc(var(--a) + var(--b) * 4), 1); clip-path: inset(0 calc((1 - var(--b)) * 100%) 0 0); transform: perspective(1400px) rotateX(calc((1 - var(--a)) * 24deg)) translateY(calc((1 - var(--a)) * 60px)); transform-origin: 50% 72%; transition: none; }
  .js .ph--eco .eco__reveal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: none; }

  .js .ph--eco .eco__scrap { display: block; position: absolute; width: 44px; height: 44px; background: #eceae2; box-shadow: 0 10px 24px -10px rgba(0,0,0,.5); opacity: clamp(0, calc((var(--b) - .5) * 3), 1); }
  .js .ph--eco .eco__scrap--1 { left: calc(50% - 220px); top: calc(48% - 150px); transform: translate3d(calc(var(--c) * 200px), calc(var(--c) * 170px), 0) rotate(calc(var(--c) * 150deg)) scale(calc(1 - var(--c) * .5)); }
  .js .ph--eco .eco__scrap--2 { left: calc(50% + 190px); top: calc(48% - 110px); transform: translate3d(calc(var(--c) * -165px), calc(var(--c) * 200px), 0) rotate(calc(var(--c) * -135deg)) scale(calc(1 - var(--c) * .5)); }
  .js .ph--eco .eco__scrap--3 { left: calc(50% - 30px); top: calc(48% + 190px); transform: translate3d(calc(var(--c) * 50px), calc(var(--c) * 30px), 0) rotate(calc(var(--c) * 95deg)) scale(calc(1 - var(--c) * .5)); }
  .js .ph--eco .eco__zone { display: block; position: absolute; left: 50%; bottom: 10%; width: 130px; height: 62px; translate: -50% 0; border: 1.5px dashed var(--bleu); border-radius: 4px; opacity: var(--c); }

  .js .ph--eco .eco__steps { display: flex; gap: 28px; list-style: none; margin: 28px 0 0; padding: 0; }
  .js .ph--eco .eco__steps li { display: flex; align-items: center; gap: 8px; opacity: .36; transition: opacity .3s; }
  .js .ph--eco .eco__steps b { font: 700 .78rem/1 var(--mono); color: var(--bleu); }
  .js .ph--eco .eco__steps span { font-size: .86rem; color: rgba(255,255,255,.86); }
  .js .ph--eco[data-step="0"] .eco__steps li[data-i="0"],
  .js .ph--eco[data-step="1"] .eco__steps li[data-i="1"],
  .js .ph--eco[data-step="2"] .eco__steps li[data-i="2"] { opacity: 1; }

  .js .ph--eco .eco__cta { opacity: clamp(0, calc((var(--p, 0) - .84) * 7), 1); }
}

/* =========================================================================
   v24 — « Nous donnons de l'échelle à vos idées » : fin lisible du zoom
   (ajouts uniquement, remplace le grossissement illisible de fin de scène)
   ========================================================================= */
.scale__line, .scale__shot { display: none; }
@media (prefers-reduced-motion: no-preference) and (min-width: 1000px) {
  .js .scale { height: 320vh; --l: clamp(0, calc((var(--p, 0) - .62) / .2), 1); --r: clamp(0, calc((var(--p, 0) - .78) / .2), 1); }
  /* Grossissement limité (≈1,10–1,15) au lieu du zoom à l'infini ; la couleur bleue se remplit toujours progressivement. */
  .js .scale__big { transform: scale(calc(.85 + var(--a, 0) * .15 + var(--z, 0) * .12)); }
  /* Le reste de la composition reste lisible : plus d'extinction par le zoom. */
  .js .scale__l--1, .js .scale__l--3 { opacity: 1; }
  .js .scale__mark { opacity: 1; }
  .js .scale__note { opacity: clamp(0, calc(var(--a, 0) * 1.4 - var(--l, 0) * 1.6), 1); }
  /* Le mouvement se prolonge par un filet bleu qui s'étire... */
  .js .scale__line { display: block; position: absolute; left: 50%; bottom: clamp(56px, 7vh, 100px); height: 2px; width: clamp(34px, 6vw, 70px); background: var(--bleu); translate: -50% 0; transform: scaleX(calc(1 + var(--l) * 8)); opacity: clamp(0, calc(var(--l) * 3), 1); }
  /* ...puis révèle une vraie photo de réalisation grand format, dans un cadre. */
  .js .scale__shot { display: block; position: absolute; left: 50%; bottom: clamp(66px, 8vh, 110px); translate: -50% 0; width: min(270px, 28vw); aspect-ratio: 1086 / 1448; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(20,24,28,.45); clip-path: inset(0 calc((1 - var(--r)) * 100%) 0 0); opacity: clamp(0, calc(var(--r) * 4), 1); }
  .js .scale__shot img, .js .scale__shot .pic { display: block; width: 100%; height: 100%; object-fit: cover; }
}
@media (max-width: 999px), (prefers-reduced-motion: reduce) {
  .scale__line, .scale__shot { display: none !important; }
}

/* =========================================================================
   v25 — « Quelques repères vérifiables » : composition compacte
   (remplace les rectangles blancs en escalier ; nouvelles classes .stats,
   l'ancienne section .stairs n'est plus utilisée dans le HTML)
   ========================================================================= */
.stats { background: #0d1013; color: #fff; padding-block: clamp(56px, 7vw, 96px); }
.stats__h { margin: 0 0 clamp(28px, 3.4vw, 44px); max-width: 22ch; font-weight: 800; font-stretch: 118%; font-size: clamp(1.5rem, 2.8vw, 2.4rem); line-height: 1.08; }
.stats__rule { position: relative; display: block; height: 2px; margin-bottom: clamp(28px, 3.4vw, 44px); background: var(--bleu); overflow: visible; }
.stats__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.stats__item { position: relative; padding: 0 clamp(16px, 2.2vw, 28px); border-left: 1px solid rgba(255,255,255,.14); }
.stats__item:first-child { border-left: none; padding-left: 0; }
.stats__n { display: block; font-weight: 800; font-stretch: 120%; font-size: clamp(64px, 6.2vw, 88px); line-height: 1; letter-spacing: -.02em; color: var(--bleu); }
.stats__n--y { font-size: clamp(44px, 4.6vw, 64px); }
.stats__lab { display: block; margin-top: 10px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.stats__d { display: block; margin-top: 6px; font-size: .9rem; line-height: 1.4; color: rgba(255,255,255,.82); max-width: 24ch; }
@media (prefers-reduced-motion: no-preference) {
  .stats__rule { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ease-out); }
  .stats__rule::after { content: ""; position: absolute; top: -5px; bottom: -5px; left: 0; width: 3px; background: var(--bleu); box-shadow: 0 0 24px 4px rgba(34,154,214,.55); opacity: 0; pointer-events: none; }
  .stats__rule.is-in { clip-path: inset(0 0 0 0); }
  .stats__rule.is-in::after { animation: scan 1.1s var(--ease-out) both; }
  .js .stats__item[data-anim] { transform: translateY(16px); }
}
@media (max-width: 1000px) {
  .stats__list { grid-template-columns: 1fr 1fr; row-gap: clamp(28px, 4vw, 40px); }
  .stats__item { border-left: none; padding-left: 0; }
  .stats__item:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.14); padding-top: clamp(20px, 3vw, 28px); }
  .stats__n { font-size: clamp(56px, 7.4vw, 72px); }
  .stats__n--y { font-size: clamp(40px, 5.2vw, 52px); }
}
@media (max-width: 700px) {
  .stats__list { grid-template-columns: 1fr; row-gap: clamp(24px, 6vw, 32px); }
  .stats__item:nth-child(n+2) { border-top: 1px solid rgba(255,255,255,.14); padding-top: clamp(20px, 5vw, 28px); }
  .stats__n { font-size: clamp(44px, 11vw, 56px); }
  .stats__n--y { font-size: clamp(38px, 9vw, 48px); }
}

/* =========================================================================
   v25 — Éco-responsable : réduction de la hauteur épinglée de l'intro
   (le défilement de 320vh laissait une longue zone sans évolution visible
   après la fin de la révélation ; ramené à 190vh, mêmes seuils --a/--b/--c)
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) and (min-width: 1000px) {
  .js .ph--eco { height: 190vh; }
}

/* ==========================================================================
   Contact — coordonnées compactes (v26) : remplace les grandes lignes
   .ct-lines par un bloc .ct-coord en colonne gauche, formulaire à droite.
   ========================================================================== */
.ct-main__grid { grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); align-items: start; }
@media (max-width: 900px) { .ct-main__grid { grid-template-columns: 1fr; } }

.ct-coord { display: grid; gap: 18px; padding: 26px 24px; background: var(--papier-2); border-radius: 2px; }
.ct-coord__item { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 4px 14px; padding-bottom: 14px; border-bottom: 1px solid var(--hair); align-items: start; }
.ct-coord__item:last-of-type { border-bottom: none; padding-bottom: 0; }
.ct-coord__ic { color: var(--bleu-encre); padding-top: 2px; }
.ct-coord__t { display: grid; gap: 4px; min-width: 0; }
.ct-coord__k { color: var(--acier); }
.ct-coord__v { font-weight: 700; font-size: clamp(1.25rem, 1.6vw + .6rem, 1.75rem); line-height: 1.15; letter-spacing: -.01em; color: inherit; text-decoration: none; transition: color .25s; overflow-wrap: anywhere; }
a.ct-coord__v:hover, a.ct-coord__v:focus-visible { color: var(--bleu-encre); }
.ct-coord__v--addr { font-size: clamp(1.1rem, .6vw + .95rem, 1.25rem); font-weight: 600; }
.ct-coord__hours { margin: 2px 0 0; }
.ct-coord__go-row { display: flex; flex-wrap: wrap; gap: 10px 18px; padding-top: 4px; border-top: 1px solid var(--trait); }
.ct-coord__go { font-size: .92rem; font-weight: 700; color: var(--bleu-encre); text-decoration: none; }
.ct-coord__go:hover, .ct-coord__go:focus-visible { text-decoration: underline; }
.ct-info--coord { margin-top: 4px; border-top: 1px solid var(--trait); }
.ct-info--coord > div { grid-template-columns: 5.5rem minmax(0, 1fr); padding: 12px 0; }
@media (max-width: 900px) {
  .ct-coord { padding: 22px 20px; }
}

/* ==========================================================================
   Éco-responsable — ouverture plein écran (v28) : scène photographique sur
   toute la largeur avec panneau translucide à gauche et titre à cheval.
   NOTE : la photo de végétation réelle n'a pas pu être intégrée (voir
   LISEZMOI) — .eco-hero__bg-photo porte un dégradé de remplacement en
   attendant le fichier ; tout le reste (panneau, titre, animation,
   responsive) est final et ne change pas quand la photo sera fournie.
   ========================================================================== */
.eco-hero { position: relative; min-height: 100svh; height: auto; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; isolation: isolate; }
.eco-hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #1b3226; }
.eco-hero__bg-scale { position: absolute; inset: -3%; }
.eco-hero__bg-photo, .eco-hero__bg-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.eco-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,20,14,.35), transparent 42%); z-index: 1; pointer-events: none; }

/* Panneau « liquid glass » : verre dépoli translucide, reflet animé, petits
   éclats de lumière qui dérivent doucement (clin d'œil aux gouttes d'eau). */
.eco-hero__panel { position: absolute; inset: 0 auto 0 0; width: 42%; z-index: 1; overflow: hidden; background: linear-gradient(165deg, rgba(255,255,255,.34) 0%, rgba(244,243,238,.56) 38%, rgba(190,198,188,.46) 100%); -webkit-backdrop-filter: blur(22px) saturate(165%); backdrop-filter: blur(22px) saturate(165%); border-right: 1px solid rgba(255,255,255,.55); box-shadow: inset -1px 0 0 rgba(255,255,255,.25), inset 0 1px 0 rgba(255,255,255,.4); }
@supports not (backdrop-filter: blur(1px)) {
  .eco-hero__panel { background: linear-gradient(180deg, rgba(239,236,228,.97) 0%, rgba(205,210,200,.96) 100%); }
}
.eco-hero__panel::before { content: ""; position: absolute; inset: -40% -10%; z-index: 0; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%); pointer-events: none; }
.eco-hero__glint { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.9), rgba(255,255,255,0) 72%); filter: blur(.5px); pointer-events: none; z-index: 0; }
.eco-hero__glint--1 { width: 46px; height: 46px; left: 16%; top: 22%; opacity: .7; }
.eco-hero__glint--2 { width: 24px; height: 24px; left: 62%; top: 46%; opacity: .55; }
.eco-hero__glint--3 { width: 14px; height: 14px; left: 34%; top: 68%; opacity: .6; }

.eco-hero__title { position: absolute; left: clamp(24px, 4vw, 64px); top: 38%; z-index: 2; margin: 0; line-height: .94; font-weight: 800; font-stretch: 115%; letter-spacing: -.02em; font-size: clamp(3.4rem, 5vw + 1.6rem, 8.1rem); }
.eco-hero__l { display: block; }
.eco-hero__l--1 { color: #0d2318; }
.eco-hero__l--2 { color: #fff; margin-left: clamp(26vw, 32vw, 36vw); text-shadow: 0 2px 30px rgba(0,0,0,.25); }

.eco-hero__in { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(40px, 6vh, 64px); }
.eco-hero__sub { position: absolute; left: clamp(24px, 4vw, 64px); bottom: calc(100% - 4px); margin: 0 0 14px; font-size: clamp(1.1rem, 1vw + .8rem, 1.6rem); font-weight: 600; color: #0d2318; }
.eco-hero__panel-txt { max-width: 38%; padding: 0 clamp(24px, 4vw, 64px) clamp(32px, 5vh, 56px); display: grid; gap: 14px; color: #122a1c; }
.eco-hero__kicker { font-family: var(--mono); font-size: .76rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #2f5a43; }
.eco-hero__lead { margin: 0; font-size: 1rem; line-height: 1.55; color: #243c30; }
.eco-hero__link { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: #0d2318; text-decoration: none; width: fit-content; }
.eco-hero__arr { transition: transform .3s var(--ease-out); }
.eco-hero__link:hover .eco-hero__arr, .eco-hero__link:focus-visible .eco-hero__arr { transform: translateX(6px); }

@media (max-width: 900px) {
  .eco-hero { align-items: flex-end; min-height: 100svh; }
  .eco-hero__panel { inset: auto 0 0 0; width: 100%; height: 72%; background: linear-gradient(0deg, rgba(10,20,14,.92) 0%, rgba(10,20,14,.72) 46%, rgba(10,20,14,0) 100%); -webkit-backdrop-filter: none; backdrop-filter: none; border-right: none; }
  .eco-hero__title { position: static; margin: 0 20px 6px; font-size: clamp(2.75rem, 10vw + .6rem, 4rem); }
  .eco-hero__l--1 { color: #fff; }
  .eco-hero__l--2 { margin-left: 0; }
  .eco-hero__in { padding-bottom: clamp(26px, 5vh, 40px); }
  .eco-hero__sub { position: static; color: #fff; margin: 0 20px 18px; }
  .eco-hero__panel-txt { max-width: none; padding: 0 20px; color: #fff; }
  .eco-hero__kicker { color: #bfe0c6; }
  .eco-hero__lead { color: rgba(255,255,255,.88); }
  .eco-hero__link { color: #fff; }
}

/* Entrée et profondeur : seulement avec JS et sans préférence de mouvement réduit */
@media (prefers-reduced-motion: no-preference) {
  .js .eco-hero.reveal { clip-path: none; }
  .js .eco-hero.reveal::after { content: none; }
  .js .eco-hero__bg-scale { transform: scale(1.04); transition: transform 1.3s var(--ease-out); }
  .js .eco-hero.is-in .eco-hero__bg-scale { transform: scale(1); }
  .js .eco-hero__panel { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ease-out); transition-delay: .15s; }
  .js .eco-hero.is-in .eco-hero__panel { clip-path: inset(0 0 0 0); }
  .js [data-rise20] { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay: var(--d, 0s); }
  .js [data-rise20].is-in { opacity: 1; transform: none; }
  @media (min-width: 901px) {
    .js .eco-hero__bg-photo { transform: translateY(calc((0.5 - var(--p, .5)) * 50px)); will-change: transform; }
  }
}

@media (prefers-reduced-motion: no-preference) {
  .js .eco-hero__panel::before { animation: ecoSheen 9s ease-in-out infinite; }
  .js .eco-hero__glint { animation: ecoGlint 6s ease-in-out infinite; }
  .js .eco-hero__glint--2 { animation-duration: 7.5s; animation-delay: -2.4s; }
  .js .eco-hero__glint--3 { animation-duration: 5.2s; animation-delay: -1.1s; }
  @keyframes ecoSheen {
    0%, 100% { transform: translateX(-12%) translateY(-4%); }
    50% { transform: translateX(10%) translateY(4%); }
  }
  @keyframes ecoGlint {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: .35; }
    50% { transform: translate(6px, -10px) scale(1.15); opacity: .85; }
  }
}
@media (max-width: 900px) {
  .eco-hero__glint { display: none; }
  .eco-hero__panel::before { content: none; }
  .eco-hero__panel { box-shadow: none; }
}

/* Lisibilité du menu sur l'ouverture Éco-responsable : la photo (gouttes
   d'eau sur feuilles) est claire en haut d'écran, le texte blanc du menu
   n'y est plus assez contrasté. On ajoute un fond sombre discret au menu
   tant qu'il est au-dessus de cette ouverture, sans toucher aux autres pages. */
.p-eco-responsable .hdr--over:not(.is-scrolled) .hdr__in { background: rgba(8,18,12,.42); -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3); border-color: rgba(255,255,255,.14); }
.p-eco-responsable .hdr--over:not(.is-scrolled) .nav__a,
.p-eco-responsable .hdr--over:not(.is-scrolled) .nav__btn,
.p-eco-responsable .hdr--over:not(.is-scrolled) .hdr__burger { color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.p-eco-responsable .hdr--over:not(.is-scrolled) .nav__a:hover,
.p-eco-responsable .hdr--over:not(.is-scrolled) .nav__btn:hover { background: rgba(255,255,255,.14); }

/* ==========================================================================
   Attestations Imprim'Vert — version plus dynamique : ligne chronologique
   qui se dessine, cadres légèrement « posés » en quinconce, badge année en
   pastille bleue, survol plus vivant.
   ========================================================================== */
.certs { position: relative; padding-top: 30px; }
.certs::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: repeating-linear-gradient(90deg, var(--bleu) 0 10px, transparent 10px 20px); transform: scaleX(0); transform-origin: 0 50%; }
.certs li { position: relative; }
.certs .frame { transform: rotate(var(--rot, 0deg)); }
.certs li:nth-child(4n+1) { --rot: -1.6deg; }
.certs li:nth-child(4n+2) { --rot: 1.3deg; margin-top: 10px; }
.certs li:nth-child(4n+3) { --rot: -1deg; margin-top: -6px; }
.certs li:nth-child(4n+4) { --rot: 1.8deg; margin-top: 6px; }
.certs button:hover .frame, .certs button:focus-visible .frame { transform: translateY(-8px) rotate(0deg) scale(1.035); box-shadow: 0 34px 60px -28px rgba(23,38,29,.55), 0 0 0 1px rgba(34,154,214,.28); }
.certs .yr { position: absolute; top: -14px; left: 16px; z-index: 2; display: inline-block; margin: 0; background: var(--bleu); color: #fff; font: 700 .82rem/1 var(--mono); letter-spacing: .02em; padding: 7px 13px; border-radius: 999px; box-shadow: 0 10px 22px -8px rgba(34,154,214,.65); transition: transform .35s var(--ease-out); }
.certs button:hover ~ .yr, .certs li:has(button:hover) .yr { transform: translateY(-3px) scale(1.06); }
.certs span { display: block; margin-top: 4px; }
@media (max-width: 800px) {
  .certs li:nth-child(n) { margin-top: 0; }
  .certs .frame { transform: none; }
  .certs button:hover .frame { transform: translateY(-5px) scale(1.02); }
}
@media (prefers-reduced-motion: no-preference) {
  .js .certs.is-in::before { transform: scaleX(1); transition: transform 1s var(--ease-out); }
}

/* ---------- Éco-responsable — nouvelle direction graphique des sections (hors ouverture) ---------- */
.p-eco-responsable { --vert-foret: #103D2E; --vert-profond: #082A20; --sauge-clair: #DCEBDD; }

/* Intro */
.p-eco-responsable main > .sec.eco-intro { background-color: #fff; background-image: none; }

/* 1. Les engagements */
.p-eco-responsable .eco-stage.eco-engagements { background-color: var(--vert-foret); }
.eco-engagements .eco-band__bg svg path { stroke: rgba(255,255,255,.4) !important; }
.eco-engagements .h-sec { color: #fff; }
.eco-engagements .kicker { color: rgba(255,255,255,.82); }
.eco-engagements .lead { color: rgba(255,255,255,.78); }
.eco-engagements .eco-pillars { position: relative; }
.eco-engagements .eco-pillars__line { position: absolute; left: 4%; right: 4%; top: 50%; height: 2px; background: linear-gradient(90deg, transparent, var(--bleu) 12%, var(--bleu) 88%, transparent); transform: scaleX(0); transform-origin: 50% 50%; pointer-events: none; z-index: 0; }
.eco-engagements .eco-pillars.is-in .eco-pillars__line { transform: scaleX(1); }
.js .eco-engagements .eco-pillars.is-in .eco-pillars__line { transition: transform 1.1s var(--ease-out); }
.eco-pillars--photo { padding: 0; }
.eco-pillars--photo > li { position: relative; z-index: 1; padding: 0 26px 30px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: 14px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); overflow: hidden; transition: transform .45s var(--ease-out), background .3s; }
.eco-pillars--photo > li:hover { transform: translateY(-6px); background: rgba(255,255,255,.1); }
.eco-pillars--photo .eco-pillars__media { aspect-ratio: 4 / 3; overflow: hidden; margin: 0 -26px 22px; }
.eco-pillars--photo .eco-pillars__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-out); }
.eco-pillars--photo > li:hover .eco-pillars__media img { transform: scale(1.05); }
.eco-engagements .eco-pillars__n { color: var(--bleu); font-size: .85rem; }
.eco-engagements .eco-pillars h3 { color: #fff; margin: 14px 0 8px; }
.eco-engagements .eco-pillars p { color: rgba(255,255,255,.76); margin: 0; }
@media (max-width: 960px) { .eco-engagements .eco-pillars__line { display: none; } }

/* 2. Les réalisations */
.p-eco-responsable main > .sec.eco-real { background-color: #fff; background-image: none; }
.eco-real .h-sec { color: var(--vert-profond); }
.eco-real .kicker { color: var(--vert-foret); }
.eco-real__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); margin-top: clamp(32px, 4vw, 56px); }
.eco-real__item { margin: 0; }
.eco-real__item .frame { display: block; width: 100%; border: 0; padding: 0; margin: 0; background: none; cursor: zoom-in; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-img); }
.eco-real__item .frame .pic, .eco-real__item .frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-out); }
.eco-real__item .frame:hover img { transform: scale(1.05); }
.eco-real__item figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 14px; font-size: .95rem; color: var(--acier); }
.eco-real__item figcaption a { color: var(--bleu-encre); }
@media (max-width: 760px) {
  .eco-real__grid { grid-template-columns: 1fr; }
  .eco-real__item figcaption { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* 3. Les attestations */
.p-eco-responsable main > .sec.eco-attest { background-color: var(--sauge-clair); background-image: none; }
.eco-attest .h-sec { color: var(--vert-profond); }
.eco-attest .kicker { color: var(--vert-foret); }
.eco-attest .small.muted { color: #2e4a3c; }
.eco-attest .notice { color: #2e4a3c; }
.eco-attest .certs .frame { background: #fff; box-shadow: 0 1px 0 rgba(16,61,46,.08); }
.eco-attest .certs { gap: 24px; }

/* 4. Fin de page */
.p-eco-responsable .endcta--eco { background: var(--vert-profond); padding-top: clamp(56px, 7vw, 108px); padding-bottom: clamp(56px, 7vw, 108px); }
.p-eco-responsable .endcta--eco::before { background: linear-gradient(180deg, rgba(8,42,32,.2) 0%, rgba(4,20,15,.55) 100%); }
.p-eco-responsable .endcta--eco .endcta__title { font-size: clamp(2.3rem, 4.6vw, 4.3rem); max-width: 16ch; }
.p-eco-responsable .endcta--eco .endcta__row { align-items: center; }
.p-eco-responsable .endcta--eco .btn { flex: none; }
@media (max-width: 700px) { .p-eco-responsable .endcta--eco .endcta__row { align-items: flex-start; } }

/* FAQ section */
.p-eco-responsable main > .sec.eco-faqsec { background-color: #fff; background-image: none; }

/* ---------- Accueil — hero « rouleau » : fond élégant + titre affiné + IMPRESSIONS en bleu au scroll ---------- */
.p-index .rl { background: linear-gradient(135deg, #101D2B 0%, #182A3C 48%, #203B50 100%); }
.p-index .rl__glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(58% 55% at 82% 36%, rgba(34,154,214,.22), transparent 70%);
  opacity: calc(.5 + var(--rp, 0) * .22); }
.p-index .rl__stage::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.p-index .rl__title { font-weight: 380; font-stretch: 100%; font-size: clamp(2rem, 7.4vw, 8.4rem); letter-spacing: -.02em; }
.p-index .rl__l--2 em { font-weight: 500; }

.rl__blue-fill {
  background-image: linear-gradient(90deg, #229ad6 0%, #229ad6 calc(clamp(0, var(--rp, 0) * 9, 1) * 100%), #fff calc(clamp(0, var(--rp, 0) * 9, 1) * 100%), #fff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .rl__blue-fill { background-image: none; color: var(--bleu); -webkit-text-fill-color: var(--bleu); }
}
@media (prefers-reduced-motion: reduce) {
  .rl__blue-fill { background-image: none; color: var(--bleu); -webkit-text-fill-color: var(--bleu); }
}

/* ---------- Accueil — hero : titre encore affiné (taille, largeur, interligne, casse normale) ---------- */
.p-index .rl__title { font-weight: 350; font-size: clamp(3.5rem, 4.1vw, 5rem); line-height: 1.1; letter-spacing: -.01em; text-transform: none; max-width: 820px; }
.p-index .rl__l--2 { padding-left: 0; }
@media (max-width: 760px) {
  .p-index .rl__title { font-size: clamp(2.125rem, 8.6vw, 2.875rem); max-width: 100%; }
}

/* ---------- Accueil — « Nous donnons de l'échelle à vos idées » : photo retirée, scène recalée ---------- */
@media (prefers-reduced-motion: no-preference) and (min-width: 1000px) {
  .js .scale { height: 300vh; }
}

/* ---------- À propos : Notre usine et ses machines (Cream 200 / Speedy 400) ---------- */
.machines { padding-block: var(--sec); overflow: clip; }
.machines .machine { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: clamp(56px, 7vw, 96px); }
.machines .machine--rev { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.machines .machine--rev .machine__ph { order: 2; }
.machines .machine--rev .machine__body { order: 1; }
.machine__ph { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-img); background: #1b2025; }
.machine__ph .pic, .machine__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.machine__brand { color: var(--bleu); }
.machine__name { margin: 8px 0 0; font-weight: 850; font-stretch: 122%; font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: .98; letter-spacing: -.02em; }
.machine__tag { margin: 10px 0 0; font-weight: 650; font-stretch: 112%; font-size: clamp(1.1rem, 1.6vw, 1.4rem); color: var(--bleu); }
.machine__desc { margin-top: 18px; max-width: 42em; color: rgba(255,255,255,.8); }
.machine__quote { margin: 26px 0 0; padding-left: 18px; border-left: 2px solid var(--bleu); font-style: italic; font-size: 1.05rem; line-height: 1.5; color: rgba(255,255,255,.68); max-width: 40em; }
.machine__thumbs { display: flex; gap: 12px; margin-top: 28px; }
.machine__thumb { position: relative; width: 84px; height: 84px; padding: 0; border: 0; border-radius: var(--r-img); overflow: hidden; cursor: zoom-in; background: #1b2025; flex: none; }
.machine__thumb .pic, .machine__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease-out); }
.machine__thumb:hover img, .machine__thumb:focus-visible img { transform: scale(1.1); }
.machine__thumb::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); border-radius: inherit; pointer-events: none; }
.machines__end { margin-top: clamp(48px, 6vw, 80px); text-align: center; }
@media (max-width: 999px) {
  .machines .machine, .machines .machine--rev { grid-template-columns: 1fr; }
  .machines .machine--rev .machine__ph, .machines .machine--rev .machine__body { order: initial; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1000px) {
  .js .machine__ph img { transform: translate3d(0, calc((.5 - var(--p, .5)) * 22px), 0) scale(1.05); }
}

/* ---------- Scène immersive : ouverture de la page À propos --------- */
.scene { position: relative; display: block; min-height: min(92svh, 940px); color: #fff; background: var(--encre); overflow: hidden; isolation: isolate; }
main > .scene:first-child { padding-top: 0; }
.scene__decor { position: absolute; inset: 0; z-index: -2; }
.scene__decor .pic, .scene__decor img { width: 100%; height: 100%; object-fit: cover; }
.scene__decor::after { content: ""; position: absolute; inset: 0; background:
    radial-gradient(ellipse 58% 48% at 50% 44%, rgba(8,13,20,.6) 0%, rgba(8,13,20,0) 72%),
    linear-gradient(180deg, rgba(8,13,20,.62) 0%, rgba(8,13,20,.06) 24%, rgba(8,13,20,.08) 56%, rgba(8,13,20,.82) 100%),
    linear-gradient(90deg, rgba(8,13,20,.3) 0%, rgba(8,13,20,0) 28%, rgba(8,13,20,0) 72%, rgba(8,13,20,.3) 100%); }
.scene__top { position: relative; z-index: 2; padding-top: calc(var(--hdr-h) + 40px); }
.scene__top .crumbs { color: rgba(255,255,255,.72); margin-bottom: 14px; }
.scene__top .crumbs a { color: inherit; }
.scene__top .kicker { margin: 0; }
.scene__word { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0 var(--gut); pointer-events: none; text-align: center; font-stretch: 108%; font-weight: 480; letter-spacing: -.01em; font-size: clamp(3.4rem, 11.5vw, 11.5rem); line-height: .96; color: #fff; }
.scene__ribbon { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.scene__ribbon svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene__ribbon-mob { display: none; }
.scene__in { position: absolute; left: 0; right: 0; bottom: clamp(32px, 5vw, 64px); z-index: 2; max-width: 30em; }
.scene__in .lead { margin: 0 0 20px; color: rgba(255,255,255,.92); }
.scene__in .btns { margin: 0; }
@media (max-width: 1000px) { .scene__word { font-size: clamp(3rem, 15vw, 6rem); } }
@media (max-width: 700px) {
  .scene { min-height: 100svh; }
  .scene__top { padding-top: calc(var(--hdr-h) + 26px); }
  .scene__word { font-size: clamp(2.5rem, 16vw, 4.4rem); top: -6%; }
  .scene__ribbon-desk { display: none; }
  .scene__ribbon-mob { display: block; }
  .scene__ribbon { top: 13%; bottom: 32%; }
  .scene__in { max-width: none; right: var(--gut); left: var(--gut); bottom: clamp(26px, 8vw, 40px); }
}
@media (min-width: 701px) { .scene__ribbon-mob { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .js .scene__decor img { animation: scene-fade 1.8s var(--ease-out) both; }
}
@keyframes scene-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) and (min-width: 701px) {
  .js .scene__decor img { transform: translate3d(0, calc((.5 - var(--p, .5)) * 26px), 0) scale(1.05); }
  .js .scene__word { transform: translateY(calc((.5 - var(--p, .5)) * -46px)); }
  .js .scene__ribbon { transform: translate3d(0, calc((.5 - var(--p, .5)) * 58px), 0); }
}

/* ---------- Six façons d'être vu (v45) : titres −25 %, largeur stable, remplissage bleu progressif ---------- */
.sx__t {
  --sx-gris: #5d666d; --sx-bleu: var(--bleu);
  justify-self: start; width: fit-content; max-width: 100%;
  font-stretch: 66%; font-size: clamp(1.65rem, 4.2vw, 4.65rem); line-height: .94; letter-spacing: -.02em;
  overflow-wrap: normal; word-break: normal; hyphens: none;
  color: var(--sx-gris);
  background-image: linear-gradient(90deg, var(--sx-bleu) 0, var(--sx-bleu) 40%, var(--sx-gris) 60%, var(--sx-gris) 100%);
  background-size: 250% 100%; background-position: 100% 0; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position .45s cubic-bezier(.4, 0, .2, 1);
}
.sx__link { padding-block: clamp(12px, 1.5vw, 19px); }
.sx__n { padding-top: .95em; }
/* largeur et taille identiques au repos, au survol et à l'activation */
.sx__item.is-active .sx__t, .sx__link:hover .sx__t { font-stretch: 66%; }
.sx__item.is-active .sx__t { background-position: 100% 0; }
@media (hover: hover) and (min-width: 1001px) {
  .sx__link:hover .sx__t { background-position: 0 0; transition-duration: .6s; transition-timing-function: cubic-bezier(.45, .1, .3, 1); }
}
.sx__link:focus-visible .sx__t { background-position: 0 0; transition-duration: .6s; transition-timing-function: cubic-bezier(.45, .1, .3, 1); }
@media (max-width: 1000px) {
  .sx__t, .sx__item.is-active .sx__t, .sx__link:hover .sx__t { font-stretch: 105%; font-size: clamp(1.1rem, 4.8vw, 2.1rem); line-height: 1; color: var(--sx-gris); }
  .sx__n { padding-top: .5em; }
  .sx__item.is-active .sx__t { background-position: 0 0; transition-duration: .6s; transition-timing-function: cubic-bezier(.45, .1, .3, 1); }
}
@media (hover: none) {
  .sx__item.is-active .sx__t { background-position: 0 0; transition-duration: .6s; transition-timing-function: cubic-bezier(.45, .1, .3, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .sx__t, .sx__link:hover .sx__t, .sx__link:focus-visible .sx__t, .sx__item.is-active .sx__t { transition: none; }
}

/* ---------- Pied de page (v49) : photo continue, un seul cadre, textes superposés ---------- */
.ftr { --f-ciel: #5cc3f5; position: relative; isolation: isolate; overflow: hidden; color: rgba(255,255,255,.88); font-size: .97rem; line-height: 1.55; background: #07122b; padding: clamp(12px, 3vw, 48px); }
.ftr__bg, .ftr__bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ftr__bg { z-index: -2; }
.ftr__bg img { top: auto; bottom: 0; height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: 50% 100%; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 34%); mask-image: linear-gradient(180deg, transparent 0, #000 34%); }
.ftr__frame { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: clamp(700px, 52vw, 860px); max-width: 1680px; margin-inline: auto; padding: clamp(22px, 3.6vw, 60px); border-radius: clamp(18px, 2.6vw, 38px); border: 1px solid rgba(255,255,255,.58); }
/* dégradé bleu nuit localisé derrière les textes ; le centre reste dégagé */
.ftr__frame::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(62% 52% at 0% 0%, rgba(4,10,24,.86), rgba(4,10,24,0) 100%),
    radial-gradient(46% 56% at 100% 0%, rgba(4,10,24,.74), rgba(4,10,24,0) 100%),
    linear-gradient(0deg, rgba(4,10,24,.94) 0%, rgba(4,10,24,.78) 20%, rgba(4,10,24,0) 52%); }
.ftr__top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px clamp(32px, 6vw, 96px); align-items: start; }
.ftr__clear { flex: 1 1 auto; min-height: clamp(120px, 14vw, 220px); }
.ftr__bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); gap: 0; padding-top: clamp(22px, 2.4vw, 34px); border-top: 1px solid rgba(255,255,255,.28); }
.ftr__bottom > * { padding-inline: clamp(16px, 2.4vw, 40px); border-left: 1px solid rgba(255,255,255,.18); }
.ftr__bottom > :first-child { padding-left: 0; border-left: 0; }
.ftr__bottom > :last-child { padding-right: 0; }
/* accroche */
.ftr__kick { margin: 0 0 16px; font-family: var(--mono, ui-monospace, monospace); font-size: .76rem; font-weight: 500; letter-spacing: .14em; color: var(--f-ciel); }
.ftr__title { margin: 0; max-width: 13ch; font-stretch: 125%; font-weight: 820; font-size: clamp(2.1rem, 4.4vw, 4.4rem); line-height: .97; letter-spacing: -.02em; color: #fff; text-wrap: balance; text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.ftr__lead { margin: 20px 0 0; max-width: 30em; font-size: clamp(1rem, 1.2vw, 1.15rem); color: rgba(255,255,255,.92); }
/* contact */
.ftr__contact { container-type: inline-size; display: flex; flex-direction: column; gap: clamp(16px, 1.8vw, 24px); justify-self: end; width: 100%; max-width: 460px; }
.ftr__ctitle { margin: 0; font-stretch: 118%; font-weight: 800; font-size: clamp(1.3rem, 2vw, 1.9rem); line-height: 1.08; letter-spacing: -.015em; color: #fff; }
.ftr__direct { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.ftr__direct li { display: grid; gap: 2px; margin: 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.28); }
.ftr__lab { font-family: var(--mono, ui-monospace, monospace); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.ftr__big { display: inline-block; max-width: 100%; font-stretch: 112%; font-weight: 750; font-size: 1.4rem; line-height: 1.25; color: #fff; overflow-wrap: anywhere; }
@container (min-width: 300px) { .ftr__big { font-size: clamp(1.2rem, 6.6cqi, 1.8rem); } .ftr__mail { font-size: clamp(1.05rem, 5.2cqi, 1.5rem); } }
.ftr__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-top: 4px; }
/* liens : soulignement bleu progressif */
.ftr a { color: rgba(255,255,255,.92); text-decoration: none; background: linear-gradient(var(--f-ciel), var(--f-ciel)) 0 100% / 0 2px no-repeat; transition: color .3s ease, background-size .4s cubic-bezier(.2,.7,.2,1); }
.ftr a:hover { color: var(--f-ciel); background-size: 100% 2px; }
.ftr a:focus-visible { outline: 3px solid #8fd8ff; outline-offset: 4px; border-radius: 4px; color: #fff; }
.ftr__arr { display: inline-block; margin-left: .35em; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.ftr a:hover .ftr__arr { transform: translate(3px, -3px); }
.ftr a:hover .ftr__arr--up { transform: translateY(-3px); }
/* bouton principal avec reflet subtil */
.ftr a.ftr__btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 12px 28px; border-radius: 999px; font-weight: 700; font-size: 1.02rem; color: #fff; background: linear-gradient(180deg, #0f79b9, #0b6ea6); border: 1px solid rgba(255,255,255,.4); box-shadow: 0 12px 30px -10px rgba(34,154,214,.75), inset 0 1px 0 rgba(255,255,255,.4); transition: background-color .3s ease, box-shadow .3s ease; }
.ftr a.ftr__btn::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 50%; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0)); }
.ftr a.ftr__btn:hover { color: #fff; background: linear-gradient(180deg, #0e7bbb, #0b72a9); box-shadow: 0 16px 36px -10px rgba(34,154,214,.9), inset 0 1px 0 rgba(255,255,255,.5); }
.ftr a.ftr__btn:focus-visible { outline-offset: 4px; border-radius: 999px; }
.ftr a.ftr__link { display: inline-flex; align-items: center; min-height: 44px; color: rgba(255,255,255,.88); background-position: 0 78%; }
/* bas */
.ftr__id img { width: 190px; height: auto; margin-bottom: 14px; }
.ftr__id p { margin: 0; max-width: 24em; }
.ftr__h { margin: 0 0 8px; font-family: var(--mono, ui-monospace, monospace); font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--f-ciel); font-stretch: 100%; }
.ftr__nav ul { display: grid; grid-template-rows: repeat(3, auto); grid-auto-flow: column; grid-auto-columns: 1fr; column-gap: 24px; margin: 0; padding: 0; list-style: none; }
.ftr__nav li { margin: 0; }
.ftr__nav a { display: inline-flex; align-items: center; min-height: 44px; }
.ftr__find address { margin: 0 0 6px; font-style: normal; }
.ftr__find address strong { color: #fff; font-weight: 700; }
/* fin */
.ftr__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; margin-top: clamp(14px, 1.6vw, 22px); padding-top: 14px; border-top: 1px solid rgba(255,255,255,.28); font-size: .9rem; color: rgba(255,255,255,.8); }
.ftr__legal p { margin: 0; }
.ftr__legal ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; margin: 0; padding: 0; list-style: none; }
.ftr__legal li { margin: 0; }
.ftr__legal a { display: inline-flex; align-items: center; min-height: 44px; }
.ftr a.ftr__up { padding: 0 20px; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; background-image: none; font-weight: 650; color: #fff; transition: background-color .3s ease, border-color .3s ease, color .3s ease; }
.ftr a.ftr__up:hover { color: #fff; background-color: rgba(34,154,214,.35); border-color: rgba(143,216,255,.85); }
/* apparition (JS présent et animations autorisées) */
.ftr--ready .ftr__frame { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform 1s cubic-bezier(.16,1,.3,1); }
.ftr--ready [data-stg] { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .8s cubic-bezier(.16,1,.3,1); }
.ftr--ready.is-in .ftr__frame { opacity: 1; transform: none; }
.ftr--ready.is-in [data-stg] { opacity: 1; transform: none; transition-delay: calc(.25s + var(--i, 0) * .09s); }
/* tablette */
@media (max-width: 1000px) {
  .ftr__top { grid-template-columns: 1fr; }
  .ftr__contact { justify-self: start; max-width: 520px; }
  .ftr__bottom { grid-template-columns: 1fr 1fr; row-gap: 26px; }
  .ftr__bottom > * { border-left: 0; padding-inline: 0; }
  .ftr__id { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px 32px; flex-wrap: wrap; }
  .ftr__id img { margin: 0; }
  .ftr__find { border-left: 1px solid rgba(255,255,255,.18) !important; padding-left: 28px !important; }
}
/* mobile : photo en haut, dégradé renforcé, ordre : accroche, contact, navigation, adresse, légal */
@media (max-width: 640px) {
  .ftr { padding: 10px; font-size: .95rem; }
  .ftr__bg { bottom: auto; top: 150px; height: 400px; }
  .ftr__bg img { top: 0; bottom: auto; height: 100%; aspect-ratio: auto; object-position: 41% 50%; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%); }
  .ftr__frame { min-height: 0; padding: 22px 18px 12px; border-radius: 22px; }
  .ftr__frame::before { background: linear-gradient(180deg, rgba(4,10,24,.9) 0%, rgba(4,10,24,.62) 11%, rgba(4,10,24,0) 16%, rgba(4,10,24,0) 26%, rgba(4,10,24,.8) 31%, rgba(4,10,24,.94) 38%, rgba(4,10,24,.97) 100%); }
  .ftr__title { font-size: clamp(1.9rem, 9vw, 2.4rem); max-width: 11ch; }
  .ftr__clear { display: none; }
  .ftr__top { display: flex; flex-direction: column; gap: 0; }
  .ftr__contact { margin-top: 215px; }
  .ftr__contact { max-width: none; }
  .ftr a.ftr__btn { width: 100%; min-height: 56px; }
  .ftr__cta { flex-direction: column; align-items: stretch; }
  .ftr__bottom { grid-template-columns: 1fr; margin-top: 26px; }
  .ftr__find { border-left: 0 !important; padding-left: 0 !important; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.18); }
  .ftr__legal { flex-direction: column; align-items: flex-start; }
  .ftr__mail { font-size: clamp(1rem, 5.2vw, 1.3rem); }
}
@media (prefers-reduced-motion: reduce) {
  .ftr *, .ftr *::before, .ftr *::after { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   Page Devis (v50) : composition immersive, carte de formulaire en étapes
   ========================================================================== */
.p-devis { --dv-nuit: #060d1a; --dv-ciel: #5cc3f5; --dv-bleu: #0b6ea6; --dv-line: rgba(255,255,255,.16); background: var(--dv-nuit); }
.p-devis main { background: var(--dv-nuit); }
.dv { position: relative; background: var(--dv-nuit); padding: calc(var(--hdr-h) + clamp(14px, 2vw, 28px)) clamp(10px, 2.6vw, 40px) clamp(28px, 4vw, 56px); color: #fff; }
.dv__stage { position: relative; isolation: isolate; overflow: hidden; max-width: 1320px; margin-inline: auto; border-radius: clamp(20px, 2.6vw, 32px); border: 1px solid rgba(255,255,255,.14); background: #04080f; box-shadow: 0 50px 100px -50px rgba(0,0,0,.9), 0 0 120px -50px rgba(34,154,214,.45); }
.dv__bg, .dv__bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.dv__bg { z-index: -2; }
.dv__bg img { object-fit: cover; object-position: 38% 50%; }
.dv__stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(4,9,19,.55) 0%, rgba(4,9,19,.68) 45%, rgba(4,9,19,.9) 100%), linear-gradient(0deg, rgba(4,9,19,.82), rgba(4,9,19,0) 45%); }
.dv__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); grid-template-areas: "intro card" "info card"; gap: 28px clamp(24px, 4vw, 64px); padding: clamp(22px, 3.4vw, 52px); align-items: start; }
.dv__intro { grid-area: intro; align-self: start; max-width: 34rem; }
.dv__info { grid-area: info; align-self: end; display: grid; gap: 22px; max-width: 34rem; }
.dv__card { grid-area: card; }
.dv__crumbs { margin: 0 0 clamp(22px, 5vw, 70px); }
.dv__crumbs ol, .dv__crumbs a { color: rgba(255,255,255,.78); }
.dv__crumbs a:hover { color: #fff; }
.dv__title { font-stretch: 122%; font-weight: 830; font-size: clamp(2.1rem, 3.7vw, 3.6rem); line-height: .98; letter-spacing: -.02em; color: #fff; text-wrap: balance; text-shadow: 0 2px 30px rgba(0,0,0,.4); }
.dv__title span { color: var(--dv-ciel); }
.dv__lead { margin: 18px 0 0; max-width: 28em; font-size: clamp(1rem, 1.25vw, 1.15rem); color: rgba(255,255,255,.9); }
.dv__reassure { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--dv-line); }
.dv__reassure li { display: flex; flex-wrap: wrap; gap: 0 .5em; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--dv-line); color: rgba(255,255,255,.82); font-size: .96rem; }
.dv__reassure li::before { content: ""; align-self: center; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--dv-ciel); box-shadow: 0 0 0 4px rgba(92,195,245,.18); }
.dv__reassure b { color: #fff; font-weight: 700; }
.dv__direct { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; font-size: .96rem; }
.dv__lab { flex: 0 0 100%; font-family: var(--mono, ui-monospace, monospace); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.p-devis .dv a:not(.dv-btn) { color: #fff; text-decoration: none; background: linear-gradient(var(--dv-ciel), var(--dv-ciel)) 0 100% / 0 2px no-repeat; transition: color .3s ease, background-size .4s cubic-bezier(.2,.7,.2,1); }
.p-devis .dv a:not(.dv-btn):hover { color: var(--dv-ciel); background-size: 100% 2px; }
.p-devis .dv a:focus-visible, .p-devis .dv button:focus-visible { outline: 3px solid #8fd8ff; outline-offset: 3px; border-radius: 4px; }
/* carte formulaire */
.dv__card { position: relative; padding: clamp(20px, 2.4vw, 34px); border-radius: 22px; border: 1px solid rgba(255,255,255,.2); background: linear-gradient(160deg, rgba(14,26,46,.93), rgba(7,14,28,.95)); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 34px 70px -30px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.16); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .dv__card { background: #0a1426; } }
.dv__head { margin-bottom: 22px; }
.dv__ctitle { margin: 0 0 18px; font-stretch: 116%; font-weight: 800; font-size: clamp(1.35rem, 1.8vw, 1.7rem); line-height: 1.1; color: #fff; }
.dv-prog { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.dv-prog li { position: relative; margin: 0; }
.dv-prog button { display: grid; gap: 6px; width: 100%; padding: 0; border: 0; background: none; color: rgba(255,255,255,.62); font: inherit; text-align: left; cursor: pointer; }
.dv-prog button[aria-disabled="true"] { cursor: default; }
.dv-prog button::before { content: ""; display: block; height: 3px; border-radius: 3px; background: rgba(255,255,255,.18); transition: background-color .35s ease; }
.dv-prog__n { font-family: var(--mono, ui-monospace, monospace); font-size: .78rem; font-weight: 500; letter-spacing: .08em; transition: color .3s ease; }
.dv-prog__t { font-size: .8rem; line-height: 1.25; font-weight: 600; }
.dv-prog li.is-reached button::before, .dv-prog li.is-done button::before { background: rgba(92,195,245,.55); }
.dv-prog li.is-current button::before { background: var(--dv-ciel); box-shadow: 0 0 14px rgba(92,195,245,.6); }
.dv-prog li.is-current button { color: #fff; }
.dv-prog li.is-current .dv-prog__n { color: var(--dv-ciel); }
.dv-prog li.is-done:not(.is-current) .dv-prog__n::after { content: " ✓"; color: var(--dv-ciel); }
.dv-prog button:not([aria-disabled="true"]):hover { color: #fff; }
/* étapes */
.dv-form { display: block; }
.dv-step { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 16px; min-width: 0; margin: 0; padding: 0; border: 0; }
.dv-step[hidden] { display: none; }
.dv-step > legend { padding: 0; margin: 0 0 16px; font-stretch: 112%; font-weight: 780; font-size: 1.12rem; line-height: 1.2; color: #fff; outline-offset: 6px; }
.dv-step__n { color: var(--dv-ciel); font-family: var(--mono, ui-monospace, monospace); font-weight: 500; }
.dvf { position: relative; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.dvf--full { grid-column: 1 / -1; }
.dvf label, .dvf__label { font-weight: 650; font-size: .92rem; color: #fff; }
.dvf .opt { font-weight: 400; color: rgba(255,255,255,.66); }
.dvf input, .dvf select, .dvf textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.24); border-radius: 12px !important; background-color: rgba(255,255,255,.06); color: #fff; font: inherit; font-size: 1rem; box-shadow: none; transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease; color-scheme: dark; }
.dvf textarea { min-height: 128px; resize: vertical; line-height: 1.5; }
.dvf select { appearance: none; -webkit-appearance: none; padding-right: 42px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='m1 1.5 6 6 6-6' fill='none' stroke='%23ffffff' stroke-width='1.8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.dvf select option { background: #0c182c; color: #fff; }
.dvf input::placeholder, .dvf textarea::placeholder { color: rgba(255,255,255,.52); opacity: 1; }
.dvf input:hover, .dvf select:hover, .dvf textarea:hover { border-color: rgba(255,255,255,.42); }
.dvf input:focus, .dvf select:focus, .dvf textarea:focus { outline: none; border-color: var(--dv-ciel); background-color: rgba(92,195,245,.07); box-shadow: 0 0 0 3px rgba(92,195,245,.28); }
.dvf [aria-invalid="true"] { border-color: #ff9d96; background-color: rgba(255,120,110,.08); }
.dvf__hint { margin: 0; font-size: .84rem; color: rgba(255,255,255,.68); }
.dvf__err { margin: 0; font-size: .88rem; font-weight: 600; color: #ffb3ad; }
.dvf__err:empty { display: none; }
.dvf__err:not(:empty)::before { content: "! "; font-weight: 800; }
/* type de projet : six cartes régulières */
.dv-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.dv-types > legend { grid-column: 1 / -1; padding: 0; margin-bottom: 8px; font-weight: 650; font-size: .92rem; color: #fff; }
.dv-types .dvf__err { grid-column: 1 / -1; }
.dv-type { position: relative; display: block; }
.dv-type input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
.dv-type__in { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-height: 104px; height: 100%; padding: 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.05); color: rgba(255,255,255,.88); transition: border-color .25s ease, background-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.dv-type__ico { color: var(--dv-ciel); }
.dv-type__t { font-weight: 650; font-size: .9rem; line-height: 1.2; color: #fff; }
.dv-type__ck { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.35); color: transparent; transition: background-color .25s ease, border-color .25s ease, color .25s ease; }
.dv-type input:hover + .dv-type__in { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.09); transform: translateY(-2px); }
.dv-type input:checked + .dv-type__in { border-color: var(--dv-ciel); background: rgba(34,154,214,.2); box-shadow: 0 0 0 1px var(--dv-ciel), 0 12px 28px -14px rgba(34,154,214,.8); }
.dv-type input:checked + .dv-type__in .dv-type__ck { background: var(--dv-ciel); border-color: var(--dv-ciel); color: #04101e; }
.dv-type input:focus-visible + .dv-type__in { outline: 3px solid #8fd8ff; outline-offset: 3px; }
.dv-types[aria-invalid="true"] .dv-type__in { border-color: #ff9d96; }
/* fichiers */
.p-devis .dv .drop { min-height: 124px; border: 1.5px dashed rgba(255,255,255,.4); border-radius: 14px !important; background: rgba(255,255,255,.05); color: rgba(255,255,255,.8); padding: 18px; }
.p-devis .dv .drop:hover, .p-devis .dv .drop.is-over { border-color: var(--dv-ciel); background: rgba(92,195,245,.1); }
.p-devis .dv .drop:focus-within { border-color: var(--dv-ciel); box-shadow: 0 0 0 3px rgba(92,195,245,.28); }
.p-devis .dv .drop strong { color: #fff; }
.p-devis .dv .drop svg { color: var(--dv-ciel); }
.p-devis .dv .drop .small { font-size: .82rem; color: rgba(255,255,255,.7); }
.p-devis .dv .file-list li { background: rgba(255,255,255,.07); border-radius: 10px; color: #fff; }
/* actions */
.dv-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 22px; }
.dv-actions [data-prev] { margin-right: auto; }
.dv-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 26px; border-radius: 999px; border: 1px solid rgba(255,255,255,.34); background: linear-gradient(180deg, #0f79b9, #0b6ea6); color: #fff; font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; box-shadow: 0 12px 28px -12px rgba(34,154,214,.8), inset 0 1px 0 rgba(255,255,255,.35); transition: background .3s ease, box-shadow .3s ease, border-color .3s ease, transform .2s ease; }
.dv-btn[hidden] { display: none; }
.dv-btn::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 50%; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)); }
.dv-btn:hover { background: linear-gradient(180deg, #0e7bbb, #0b72a9); box-shadow: 0 16px 34px -12px rgba(34,154,214,.95), inset 0 1px 0 rgba(255,255,255,.45); }
.dv-btn:active { transform: scale(.985); }
.dv-btn__ico { display: inline-flex; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.dv-btn:hover .dv-btn__ico { transform: translateX(4px); }
.dv-btn__ico--back { transform: scaleX(-1); }
.dv-btn:hover .dv-btn__ico--back { transform: scaleX(-1) translateX(4px); }
.dv-btn--ghost { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.3); box-shadow: none; }
.dv-btn--ghost::after { display: none; }
.dv-btn--ghost:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.6); box-shadow: none; }
.dv-btn[disabled] { opacity: .75; cursor: progress; }
.dv-btn .spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }
.dv-btn.is-loading .spinner { display: inline-block; }
.dv-btn.is-loading .dv-btn__ico { display: none; }
.dv-notes { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--dv-line); }
.dv-notes p { margin: 0 0 8px; font-size: .82rem; line-height: 1.5; color: rgba(255,255,255,.7); }
.dv-notes p:last-child { margin: 0; }
.dv-notes a { text-decoration: underline; text-underline-offset: 3px; }
/* messages */
.dv__card.is-sent .dv__head .dv-prog, .dv__card.is-sent .dv__head .dv__ctitle { display: none; }
.p-devis .dv .dv-msg { margin: 0; padding: 18px 20px; border-radius: 14px; color: #fff; }
.p-devis .dv .form-msg--ok { background: rgba(46,160,104,.16); border: 1px solid rgba(110,210,160,.5); }
.p-devis .dv .form-msg--err { background: rgba(255,120,110,.12); border: 1px solid rgba(255,157,150,.55); margin-top: 18px; }
.p-devis .dv .dv-msg h2 { font-size: 1.2rem; margin-bottom: 6px; }
.p-devis .dv .ok-check circle, .p-devis .dv .ok-check path { stroke: #7fe0ae; }
.p-devis .dv .text-link { text-decoration: underline; }
/* transitions d'étapes (courtes, uniquement au changement d'étape) */
@media (prefers-reduced-motion: no-preference) {
  .dv-step.is-enter-next { animation: dvInNext .32s cubic-bezier(.2,.7,.2,1) both; }
  .dv-step.is-enter-prev { animation: dvInPrev .32s cubic-bezier(.2,.7,.2,1) both; }
  .dv__stage { animation: dvStage .8s cubic-bezier(.16,1,.3,1) both; }
  .dv__intro, .dv__info { animation: dvRise .8s cubic-bezier(.16,1,.3,1) .15s both; }
  .dv__card { animation: dvRise .8s cubic-bezier(.16,1,.3,1) .25s both; }
}
@keyframes dvInNext { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes dvInPrev { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes dvStage { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes dvRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* « Et ensuite ? » : même univers */
.p-devis .dv-next { background: var(--dv-nuit); color: #fff; padding-top: clamp(40px, 6vw, 88px); border-top: 1px solid rgba(255,255,255,.08); }
.p-devis .dv-next .h-sec { color: #fff; }
.p-devis .dv-next .lead { color: rgba(255,255,255,.78); }
.p-devis .dv-next .steps li { border-top-color: rgba(255,255,255,.22); }
.p-devis .dv-next .steps li::before, .p-devis .dv-next .steps li::after { color: var(--dv-ciel); background-color: transparent; }
.p-devis .dv-next .steps li::after { background: var(--dv-ciel); }
.p-devis .dv-next .steps h3 { color: #fff; }
.p-devis .dv-next .steps p { color: rgba(255,255,255,.78); }
/* tablette */
@media (max-width: 1000px) {
  .dv__in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "card" "info"; gap: 26px; }
  .dv__intro, .dv__info { max-width: none; }
  .dv__crumbs { margin-bottom: 28px; }
  .dv__info { grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
}
/* mobile */
@media (max-width: 640px) {
  .dv { padding-inline: 8px; }
  .dv__stage { border-radius: 20px; }
  .dv__in { padding: 18px 14px 18px; gap: 20px; }
  .dv__crumbs { margin-bottom: 16px; }
  .dv__title { font-size: clamp(1.9rem, 9vw, 2.4rem); }
  .dv__lead { margin-top: 10px; font-size: .98rem; }
  .dv__card { padding: 18px 14px; border-radius: 18px; }
  .dv-prog { gap: 6px; }
  .dv-prog__t { display: none; }
  .dv-prog { margin-bottom: 4px; }
  .dv-prog li:not(.is-current) .dv-prog__n { font-size: .74rem; }
  .dv-step, .dv-types { gap: 14px 12px; }
  .dv-step { grid-template-columns: 1fr; }
  .dv-types { grid-template-columns: 1fr 1fr; }
  .dv-type__in { min-height: 92px; }
  .dv-actions { flex-direction: column-reverse; align-items: stretch; }
  .dv-actions [data-prev] { margin-right: 0; }
  .dv-btn { width: 100%; min-height: 56px; }
  .dv__info { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .dv *, .dv *::before, .dv *::after { transition: none !important; animation: none !important; } }

/* ---------- Titres d'ouverture réduits (v51) : Covering, Impression grand format, FAQ ---------- */
.p-covering-vehicules .cov-hero h1 { font-size: clamp(2.15rem, 4.2vw, 4.4rem); text-wrap: balance; }
.p-impression-grand-format .ph h1,
.p-faq .ph h1 { font-size: clamp(1.45rem, min(7.8vw, 9.5vw / (var(--lw, 10) / 10)), 7.4rem); }
@media (max-width: 1000px) {
  .p-covering-vehicules .cov-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.1rem); }
}
@media (max-width: 640px) {
  .p-covering-vehicules .cov-hero h1 { font-size: clamp(1.9rem, 8.6vw, 2.35rem); }
  .p-impression-grand-format .ph h1,
  .p-faq .ph h1 { font-size: clamp(1.45rem, 8.2vw, 2.4rem); }
  /* Le cadre de coupe et la jonction image/fond ne doivent pas créer de trait
     clair au travers du titre sur les petits écrans. */
  .p-impression-grand-format .ph__frame { display:none; }
  .p-impression-grand-format .ph { border-bottom:0; background:transparent; }
  .p-impression-grand-format .ph__media,
  .p-impression-grand-format .ph__media .pic { position:absolute; inset:0; height:100%; }
  .p-impression-grand-format .ph h1 { background:transparent; box-shadow:none; }
}

/* ---------- Menu principal (v52) : verre bleu nuit sur photo, blanc au défilement ---------- */
:root { --mn-nuit: #0b1b33; --mn-bleu: #229ad6; --mn-bleu-h: #0b6ea6; }
html body .hdr.hdr[data-hdr] { transition: none; }
html body .hdr.hdr[data-hdr].is-hidden { transform: none; }

/* état par défaut : fond blanc presque opaque, liens bleu nuit, logo pour fond clair */
html body .hdr.hdr[data-hdr] .hdr__in {
  min-height: var(--hdr-h); border: 0; border-bottom: 1px solid rgba(11,27,51,.08); border-radius: 0;
  background: rgba(255,255,255,.97); box-shadow: 0 8px 24px -18px rgba(11,27,51,.38);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
/* au-dessus d'une ouverture photo / vidéo : verre bleu nuit discret */
html body .hdr.hdr[data-hdr]:is(.hdr--glass, .hdr--over:not(.is-scrolled)) .hdr__in {
  background: rgba(11,27,51,.6); border-bottom-color: rgba(255,255,255,.16); box-shadow: none;
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html body .hdr.hdr[data-hdr]:is(.hdr--glass, .hdr--over:not(.is-scrolled)) .hdr__in { background: rgba(11,27,51,.92); }
}
/* logo : deux versions superposées, fondu croisé (aucun changement de taille) */
html body .hdr.hdr[data-hdr] .hdr__logo { position: relative; z-index: 2; }
html body .hdr.hdr[data-hdr] .hdr__logo picture { display: block; transition: opacity .25s ease; }
html body .hdr.hdr[data-hdr] .hdr__logo .logo-c { opacity: 1; }
html body .hdr.hdr[data-hdr] .hdr__logo .logo-w { position: absolute; inset: 0; opacity: 0; }
html body .hdr.hdr[data-hdr] .hdr__logo img { width: 160px; height: auto; display: block; }
html body .hdr.hdr[data-hdr] .hdr__logo .logo-w img { width: 100%; }
html body .hdr.hdr[data-hdr]:is(.hdr--glass, .hdr--over:not(.is-scrolled)) .hdr__logo .logo-c { opacity: 0; }
html body .hdr.hdr[data-hdr]:is(.hdr--glass, .hdr--over:not(.is-scrolled)) .hdr__logo .logo-w { opacity: 1; }
html body.nav-open .hdr.hdr.hdr.hdr[data-hdr] .hdr__logo .logo-c { opacity: 0; }
html body.nav-open .hdr.hdr.hdr.hdr[data-hdr] .hdr__logo .logo-w { opacity: 1; }
html body.nav-open .hdr.hdr.hdr.hdr[data-hdr] .hdr__in { background: transparent; border-bottom-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

@media (min-width: 1101px) {
  /* liens */
  html body .hdr.hdr[data-hdr] .nav__a, html body .hdr.hdr[data-hdr] .nav__btn { color: var(--mn-nuit); background: none; text-shadow: none; transition: color .25s ease; }
  html body .hdr.hdr[data-hdr]:is(.hdr--glass, .hdr--over:not(.is-scrolled)) .nav__a,
  html body .hdr.hdr[data-hdr]:is(.hdr--glass, .hdr--over:not(.is-scrolled)) .nav__btn { color: #fff; text-shadow: none; }
  html body .hdr.hdr[data-hdr] .nav__a::after, html body .hdr.hdr[data-hdr] .nav__btn::after {
    left: 13px; right: 13px; bottom: 5px; height: 2px; background: var(--mn-bleu); opacity: 0;
    transform: scaleX(.25); transform-origin: 50% 50%; transition: transform .3s ease, opacity .25s ease;
  }
  html body .hdr.hdr[data-hdr]:is(.hdr--glass, .hdr--over:not(.is-scrolled)) .nav__a::after,
  html body .hdr.hdr[data-hdr]:is(.hdr--glass, .hdr--over:not(.is-scrolled)) .nav__btn::after { background: #4fb8ee; }
  html body .hdr.hdr[data-hdr] .nav__a:hover::after, html body .hdr.hdr[data-hdr] .nav__a:focus-visible::after,
  html body .hdr.hdr[data-hdr] .nav__a[aria-current="page"]::after,
  html body .hdr.hdr[data-hdr] .nav__btn:hover::after, html body .hdr.hdr[data-hdr] .nav__btn.is-current::after { opacity: 1; transform: scaleX(1); }
  html body .hdr.hdr[data-hdr] .nav__a:hover, html body .hdr.hdr[data-hdr] .nav__btn:hover { background: none; }
  html body .hdr.hdr[data-hdr] .nav__a:focus-visible, html body .hdr.hdr[data-hdr] .nav__btn:focus-visible { outline: 2px solid var(--mn-bleu); outline-offset: 2px; border-radius: 8px; }
  html body .hdr.hdr[data-hdr]:is(.hdr--glass, .hdr--over:not(.is-scrolled)) .nav__a:focus-visible,
  html body .hdr.hdr[data-hdr]:is(.hdr--glass, .hdr--over:not(.is-scrolled)) .nav__btn:focus-visible { outline-color: #9bd8f8; }
}

/* bouton Devis */
html body .hdr.hdr[data-hdr] .nav__cta {
  --bg: var(--mn-bleu); --fill: var(--mn-bleu-h); --fg: #fff; --fg-h: #fff;
  border-radius: 11px; min-height: 44px; padding: 9px 10px 9px 18px; gap: 10px; color: #fff; border-color: var(--bg);
}
html body .hdr.hdr[data-hdr] .nav__cta::before { transform: none; opacity: 0; transition: opacity .25s ease; }
html body .hdr.hdr[data-hdr] .nav__cta::after { display: none; }
html body .hdr.hdr[data-hdr] .nav__cta:hover::before, html body .hdr.hdr[data-hdr] .nav__cta:focus-visible::before { opacity: 1; }
html body .hdr.hdr[data-hdr] .nav__cta:hover, html body .hdr.hdr[data-hdr] .nav__cta:focus-visible { color: #fff; border-color: var(--mn-bleu-h); }
html body .hdr.hdr[data-hdr] .nav__cta .btn__ico { width: 24px; height: 24px; margin-right: 0; background: rgba(255,255,255,.18); }
html body .hdr.hdr[data-hdr] .nav__cta .btn__ico svg { width: 12px; height: 12px; transition: transform .25s ease; }
html body .hdr.hdr[data-hdr] .nav__cta:hover .btn__ico svg, html body .hdr.hdr[data-hdr] .nav__cta:focus-visible .btn__ico svg { animation: none; transform: translateX(3px); }
html body .hdr.hdr[data-hdr] .nav__cta:focus-visible { outline: 2px solid var(--mn-bleu); outline-offset: 3px; }
html body .hdr.hdr[data-hdr]:is(.hdr--glass, .hdr--over:not(.is-scrolled)) .nav__cta:focus-visible { outline-color: #fff; }

@media (max-width: 1100px) {
  html body .hdr.hdr[data-hdr] .hdr__logo img { width: 148px; }
  html body .hdr.hdr[data-hdr] .hdr__devis { min-height: 44px; padding: 8px 16px; border-radius: 10px; background: var(--mn-bleu); color: #fff; transition: background-color .25s ease; }
  html body .hdr.hdr[data-hdr] .hdr__devis:hover { background: var(--mn-bleu-h); }
  html body .hdr.hdr[data-hdr] .hdr__burger {
    min-height: 44px; padding: 8px 14px; gap: 10px; border: 1px solid rgba(11,27,51,.24); border-radius: 10px; background: transparent; color: var(--mn-nuit);
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
  }
  html body .hdr.hdr[data-hdr] .hdr__burger:hover { background: rgba(11,27,51,.06); }
  html body .hdr.hdr[data-hdr]:is(.hdr--glass, .hdr--over:not(.is-scrolled)) .hdr__burger { color: #fff; border-color: rgba(255,255,255,.42); }
  html body .hdr.hdr[data-hdr]:is(.hdr--glass, .hdr--over:not(.is-scrolled)) .hdr__burger:hover { background: rgba(255,255,255,.12); }
  html body.nav-open .hdr.hdr.hdr.hdr[data-hdr] .hdr__burger { color: #fff; border-color: rgba(255,255,255,.5); }
  html body .hdr.hdr[data-hdr] .hdr__burger:focus-visible, html body .hdr.hdr[data-hdr] .hdr__devis:focus-visible { outline: 2px solid var(--mn-bleu); outline-offset: 2px; }
  html body .hdr.hdr[data-hdr]:is(.hdr--glass, .hdr--over:not(.is-scrolled)) .hdr__burger:focus-visible,
  html body .hdr.hdr[data-hdr]:is(.hdr--glass, .hdr--over:not(.is-scrolled)) .hdr__devis:focus-visible,
  html body.nav-open .hdr.hdr.hdr.hdr[data-hdr] .hdr__burger:focus-visible { outline-color: #fff; }
  .hdr__burger-txt { display: inline-block; min-width: 3.3em; text-align: left; }
  html body .nav { background: var(--mn-nuit); }
  html body .hdr.hdr[data-hdr] .nav__cta { min-height: 54px; padding: 12px 12px 12px 22px; font-size: 1rem; }
  html body .hdr.hdr[data-hdr] .nav__cta .btn__ico { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  html body .hdr.hdr[data-hdr] *, html body .hdr.hdr[data-hdr] *::before, html body .hdr.hdr[data-hdr] *::after { transition: none !important; animation: none !important; }
}
@media (max-width: 1100px) {
  html body .hdr.hdr[data-hdr] .hdr__in { gap: 10px; }
  html body .hdr.hdr[data-hdr] .hdr__burger { padding: 8px 12px; gap: 8px; margin-left: 0; }
  html body .hdr.hdr[data-hdr] .hdr__devis { padding: 8px 14px; }
}
@media (max-width: 480px) {
  html body .hdr.hdr[data-hdr] .hdr__logo img { width: 124px; }
  html body .hdr.hdr[data-hdr] .hdr__devis { padding: 8px 12px; }
  html body .hdr.hdr[data-hdr] .hdr__burger { padding: 8px 10px; }
  .hdr__burger-txt { min-width: 3.1em; }
}
@media (max-width: 360px) {
  html body .hdr.hdr[data-hdr] .hdr__logo img { width: 104px; }
  html body .hdr.hdr[data-hdr] .hdr__in { gap: 6px; }
  html body .hdr.hdr[data-hdr] .hdr__devis { padding: 8px 10px; font-size: .86rem; }
  html body .hdr.hdr[data-hdr] .hdr__burger { padding: 8px 8px; gap: 6px; }
  .hdr__burger-txt { min-width: 0; font-size: .7rem; }
}

/* =========================================================================
   v53 — « Nous donnons de l'échelle à vos idées » : zoom immersif sur le « C »
   (piloté par le défilement ; la section suivante apparaît par l'ouverture du « C »)
   ========================================================================= */
.scale__bg, .scale__bl { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .scale.scale--zoom { height: 330vh; margin-bottom: -100vh; z-index: 2; background: transparent; overflow: clip; }
  .js .scale.scale--zoom + * { position: relative; z-index: 1; }
  .js .scale.scale--zoom .scale__pin { position: sticky; top: 0; height: 100vh; height: 100svh; padding: 0 var(--gut); display: flex; flex-direction: column; justify-content: center; overflow: clip; }
  .js .scale--zoom .scale__bg { display: block; position: absolute; inset: 0; z-index: 0; background: #fff; pointer-events: none;
    -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent var(--hr, 0px), #000 calc(var(--hr, 0px) + 1.5px));
            mask-image: radial-gradient(circle at 50% 50%, transparent var(--hr, 0px), #000 calc(var(--hr, 0px) + 1.5px)); }
  .js .scale--zoom .scale__bl { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
  .js .scale--zoom .scale__title { position: relative; z-index: 2; }
  .js .scale--zoom .scale__big { transform: scale(calc(.85 + var(--a, 1) * .15)); transform-origin: 50% 50%; will-change: auto; color: transparent; -webkit-text-stroke-width: clamp(1.5px, .25vw, 3px); }
  .js .scale--zoom .scale__mark { z-index: 1; }
  .js .scale--zoom .scale__note { z-index: 2; }
  .js .scale.is-measure .scale__title, .js .scale.is-measure .scale__big { transform: none !important; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 999px) {
  .js .scale.scale--zoom { height: 290vh; }
  .js .scale--zoom .scale__note { position: absolute; left: var(--gut); right: var(--gut); bottom: 5vh; max-width: none; margin: 0; }
  .js .scale--zoom .scale__title { margin-top: -10vh; }
}

/* v54 — galerie « Nos impressions en situation » : deux cartes restantes, côte à côte, sans case vide */
@media (min-width: 901px) {
  .cards--bento > .card:nth-child(1):nth-last-child(2) { grid-row: auto; grid-column: 1 / span 6; }
  .cards--bento > .card:nth-child(1):nth-last-child(2) .card__media { flex: none; aspect-ratio: 16 / 10; }
  .cards--bento > .card:nth-child(1):nth-last-child(2) .card__media .pic { position: static; }
  .cards--bento > .card:nth-child(2):last-child { grid-row: 1; grid-column: 7 / span 6; }
}

/* v56 : phrase d'accroche sous « Six façons d'être vu » (usages et savoir-faire) */
.sx__head .sx__intro { margin: 14px 0 0; max-width: 34ch; font-size: clamp(.95rem, 1.2vw, 1.05rem); line-height: 1.5; opacity: .72; }

/* Galerie des équipements ajoutée dans la section Impression grand format */
.atelier-machines-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px);margin-top:clamp(28px,4vw,52px)}
.atelier-machines-gallery figure{margin:0;background:#f1f3f4;border:1px solid rgba(20,38,52,.12);border-radius:18px;overflow:hidden}
.atelier-machines-gallery img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.atelier-machines-gallery figcaption{padding:14px 16px 16px;color:#53616b;font-size:.92rem;line-height:1.4}
@media (max-width:760px){.atelier-machines-gallery{grid-template-columns:1fr;gap:18px}.atelier-machines-gallery img{aspect-ratio:16/10}}

/* Bleu principal Adhéprint pour les CTA */
.btn { background:#229ad6!important; border-color:#229ad6!important; }
/* Bleu clair de marque pour les boutons */
.btn,
html body .hdr.hdr[data-hdr] .nav__cta,
html body .hdr.hdr[data-hdr] .hdr__devis,
.p-devis .dv-btn:not(.dv-btn--ghost),
.form-submit .btn[type="submit"] {
  --bg:#40b9ee!important;
  background:#40b9ee!important;
  border-color:#40b9ee!important;
  color:#fff!important;
}
.btn::before { background:#229ad6!important; }
/* Uniformisation : tous les boutons suivent le bleu clair de la marque */
button:not([type="range"]),
a.btn {
  --button-brand:#40b9ee;
  background-color:#40b9ee;
  border-color:#40b9ee;
  color:#fff;
}
button:not([type="range"]):hover,
button:not([type="range"]):focus-visible,
a.btn:hover,
a.btn:focus-visible {
  background-color:#229ad6;
  border-color:#229ad6;
  color:#fff;
}

/* Les onglets du catalogue restent sobres : leur sélection est indiquée par le soulignement. */
.p-catalogue .cat-ess__tab,
.p-catalogue .cat-ess__tab:hover,
.p-catalogue .cat-ess__tab:focus-visible,
.p-catalogue .cat-ess__tab.is-active {
  background:transparent !important;
  border-color:transparent !important;
  color:var(--bleu-encre,#0b6ea6) !important;
}

/* Les commandes de la présentation des matières gardent un fond blanc lisible. */
.p-impression-grand-format .material-lab__zoom,
.p-impression-grand-format .material-lab__arrows button,
.p-impression-grand-format .material-lab__tabs button,
.p-impression-grand-format .material-dialog__close {
  background:#fff !important;
  border-color:#dce3e8 !important;
  color:#17232c !important;
}
.p-impression-grand-format .material-lab__zoom-label {
  background:#fff !important;
  color:#17232c !important;
}

/* Les choix de finition utilisent leur mise en page claire d'origine. */
.p-impression-grand-format .finish-choice,
.p-impression-grand-format .finish-choice:hover,
.p-impression-grand-format .finish-choice:focus-visible {
  background:#fff !important;
  border-color:transparent !important;
  color:#596771 !important;
}
.p-impression-grand-format .finish-choice[aria-pressed="true"] {
  background:#eff7fb !important;
  color:#18232d !important;
  box-shadow:inset 3px 0 #229ad6 !important;
}

/* Les cases Covering restent blanches et se remplissent doucement au survol. */
.p-covering-vehicules .us-scene__tab {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#fff !important;
  border-color:#dfe5e8 !important;
  color:#18232d !important;
  transition:transform .3s, border-color .3s, box-shadow .3s, color .3s;
}
.p-covering-vehicules .us-scene__tab::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:#40b9ee;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .55s cubic-bezier(.22,1,.36,1);
}
.p-covering-vehicules .us-scene__tab > *,
.p-covering-vehicules .us-scene__tab b,
.p-covering-vehicules .us-scene__tab small,
.p-covering-vehicules .us-scene__tab i {
  position:relative;
  z-index:1;
}
.p-covering-vehicules .us-scene__tab:hover,
.p-covering-vehicules .us-scene__tab:focus-visible {
  background:#fff !important;
  border-color:#40b9ee !important;
  color:#fff !important;
  box-shadow:0 8px 25px #229ad655;
  transform:translateY(-8px);
}
.p-covering-vehicules .us-scene__tab:hover::before,
.p-covering-vehicules .us-scene__tab:focus-visible::before {
  transform:scaleX(1);
}
.p-covering-vehicules .us-scene__tab.is-active {
  background:#fff !important;
  border-color:#dfe5e8 !important;
  color:#18232d !important;
  box-shadow:0 5px 20px #17232c05;
  transform:none;
}
.p-covering-vehicules .us-scene__tab.is-active::before {
  transform:scaleX(0);
}

/* Progression du devis : étapes claires sans aplats bleus. */
.p-devis .dv-prog button,
.p-devis .dv-prog li.is-current button {
  background:#fff !important;
  border-color:#dce3e8 !important;
  color:#596771 !important;
}
.p-devis .dv-prog button::before,
.p-devis .dv-prog li.is-current button::before {
  background:#dce3e8 !important;
  box-shadow:none !important;
}
.p-devis .dv-prog li.is-current button {
  color:#18232d !important;
  border-color:#40b9ee !important;
}
.p-devis .dv-prog li.is-current button::before {
  background:#40b9ee !important;
}

/* La signalétique verticale reste entièrement visible dans sa carte agrandie. */
.p-a-propos .arc__card[data-arc="3"] img {
  object-fit:contain;
  object-position:center;
  background:#eef1f3;
}
.p-a-propos .arc__card[data-arc="4"] img {
  object-fit:cover;
  object-position:center;
}