/* ==========================================================================
   J&B DESIGN — Feuille de styles
   Concept : « Au joint près ». Une fine ligne cuivre (le joint) et le croisillon
   (petite croix posée entre les carreaux) parcourent le site : titres, transitions,
   héros, étapes, bouton retour en haut.

   01. Polices                    12. Du brut à la finition
   02. Variables (couleurs…)      13. Réalisations (accueil) & galerie
   03. Base                       14. L'artisan
   04. Outils de mise en page     15. Avis & plateformes
   05. Boutons & liens            16. Déroulement d'un projet
   06. En-tête & menu mobile      17. Secteur & appel final
   07. Héros de l'accueil         18. Pages métiers (composants)
   08. Héros des pages            19. Contact & formulaire
   09. Sections & titres          20. Pied de page, barre mobile, retour en haut
   10. Manifeste & mots clients   21. Pages légales, merci, 404, lightbox
   11. Nuancier des matières      22. Apparitions & animations
                                  23. Mouvement réduit
   ========================================================================== */

/* 01. Polices (auto-hébergées, licence OFL) -------------------------------- */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-variable.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 100% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ysabeau Office";
  src: url("../fonts/ysabeau-office-variable.woff2") format("woff2");
  font-weight: 1 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ysabeau Office";
  src: url("../fonts/ysabeau-office-variable-italic.woff2") format("woff2");
  font-weight: 1 1000;
  font-style: italic;
  font-display: swap;
}

/* 02. Variables ------------------------------------------------------------- */
:root {
  /* Matières */
  --ivoire: #F6F1E8;
  --ivoire-2: #FBF8F2;
  --pierre: #E8DFD1;
  --pierre-2: #DED3C2;
  --sable: #CDBFAB;
  --joint: #D6CBBA;
  --graphite: #1F1D1A;
  --graphite-2: #292622;
  --graphite-3: #3A3631;
  /* Textes */
  --texte: #1F1D1A;
  --texte-doux: #5E554B;
  --texte-clair: #F6F1E8;
  --texte-clair-doux: #C4BAAD;
  /* Accents */
  --cuivre: #B5683F;          /* décor : lignes, croisillons (pas de texte) */
  --cuivre-texte: #8E4C29;    /* textes et boutons sur fond clair et pierre (AA) */
  --cuivre-hover: #733C1F;
  --cuivre-clair: #E0A06F;    /* accents sur fond sombre (AA) */
  --argile: #6B4F3A;
  --olive: #6F6E58;
  /* Typographie */
  --f-titre: "Archivo", "Arial Narrow", Arial, system-ui, sans-serif;
  --f-texte: "Ysabeau Office", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --fs-body: clamp(1.06rem, 1rem + .25vw, 1.18rem);
  --fs-h1: clamp(2.5rem, 1.3rem + 3.5vw, 4.35rem);
  --fs-h1-page: clamp(2.2rem, 1.35rem + 3.4vw, 4.2rem);
  --fs-h2: clamp(1.9rem, 1.25rem + 2.5vw, 3.35rem);
  --fs-h3: clamp(1.25rem, 1.08rem + .7vw, 1.62rem);
  /* Espaces */
  --wrap: 1260px;
  --gutter: clamp(16px, 4.2vw, 48px);
  --section: clamp(76px, 6vw + 40px, 150px);
  --hd-h: 84px;
  /* Mouvement */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  color-scheme: light;
}

/* 03. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
  margin: 0;
  background: var(--ivoire);
  color: var(--texte);
  font-family: var(--f-texte);
  font-size: var(--fs-body);
  font-weight: 440;
  line-height: 1.62;
  font-feature-settings: "kern", "liga";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
img { background: var(--pierre); }
img[src$=".svg"] { background: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-titre);
  font-stretch: 112%;
  font-weight: 620;
  letter-spacing: -.015em;
  line-height: 1.06;
  text-wrap: balance;
}
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -.01em; }
strong, b { font-weight: 640; }
em { font-style: italic; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--cuivre); color: var(--ivoire); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--cuivre-texte); outline-offset: 3px; border-radius: 1px; }
.on-dark :focus-visible { outline-color: var(--cuivre-clair); }
[hidden] { display: none !important; }
main { display: block; }
main:focus { outline: none; }

/* 04. Outils de mise en page -------------------------------------------------- */
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: calc(860px + 2 * var(--gutter)); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip {
  position: fixed; left: 12px; top: -80px; z-index: 200;
  background: var(--graphite); color: var(--ivoire);
  padding: 12px 18px; font-family: var(--f-titre); font-weight: 600; text-decoration: none;
  transition: top .2s;
}
.skip:focus { top: 12px; }
.on-dark { color: var(--texte-clair); }
.nowrap { white-space: nowrap; }

/* Croisillon : la petite croix posée entre quatre carreaux */
.x {
  --s: 11px; --t: 1.5px;
  display: inline-block; flex: none;
  width: var(--s); height: var(--s);
  color: var(--cuivre);
  background:
    linear-gradient(currentColor, currentColor) center / 100% var(--t) no-repeat,
    linear-gradient(currentColor, currentColor) center / var(--t) 100% no-repeat;
}
.on-dark .x { color: var(--cuivre-clair); }

/* Surtitre « 01 — … » */
.eyebrow {
  display: flex; align-items: center; gap: .85em;
  margin: 0 0 1.25rem;
  font-family: var(--f-titre); font-stretch: 125%; font-weight: 560;
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cuivre-texte);
}
.eyebrow::before {
  content: ""; flex: none; width: 34px; height: 1.5px; background: currentColor;
  transform-origin: left;
}
.on-dark .eyebrow { color: var(--cuivre-clair); }

.lead { font-size: clamp(1.14rem, 1.02rem + .45vw, 1.36rem); line-height: 1.55; color: var(--texte-doux); font-weight: 450; }
.on-dark .lead { color: var(--texte-clair-doux); }
.muted { color: var(--texte-doux); }
.on-dark .muted { color: var(--texte-clair-doux); }
.small { font-size: .88em; }

/* Joint horizontal (séparateur dessiné) */
.joint { height: 1px; background: var(--joint); position: relative; border: 0; margin: 0; }
.joint::after { content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 100%; background: var(--cuivre); transform: scaleX(.18); transform-origin: left; }

/* 05. Boutons & liens --------------------------------------------------------- */
.btn {
  --bg: transparent; --fg: currentColor; --bd: transparent;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  min-height: 54px; padding: 0 1.55em;
  border: 1.5px solid var(--bd); border-radius: 2px;
  background: var(--bg); color: var(--fg);
  font-family: var(--f-titre); font-stretch: 110%; font-weight: 610; font-size: .95rem; letter-spacing: .015em;
  text-decoration: none; line-height: 1.2; text-align: center;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.btn::after { /* le joint qui se trace au survol */
  content: ""; position: absolute; left: 1.55em; right: 1.55em; bottom: 10px; height: 1px;
  background: currentColor; opacity: .55;
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out);
}
.btn:hover::after, .btn:focus-visible::after { transform: scaleX(1); }
.btn svg { width: 18px; height: 18px; flex: none; transition: transform .35s var(--ease-out); }
.btn:hover svg.i-arrow, .btn:focus-visible svg.i-arrow { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }
.btn--cuivre { --bg: var(--cuivre-texte); --fg: var(--ivoire); --bd: var(--cuivre-texte); }
.btn--cuivre:hover { --bg: var(--cuivre-hover); --bd: var(--cuivre-hover); }
.btn--ghost { --bd: rgba(31, 29, 26, .35); }
.btn--ghost:hover { --bd: var(--graphite); --bg: rgba(31, 29, 26, .04); }
.on-dark .btn--ghost, .btn--ghost-clair { --bd: rgba(246, 241, 232, .45); --fg: var(--ivoire); }
.on-dark .btn--ghost:hover, .btn--ghost-clair:hover { --bd: var(--ivoire); --bg: rgba(246, 241, 232, .08); }
.btn--clair { --bg: var(--ivoire); --fg: var(--graphite); --bd: var(--ivoire); }
.btn--clair:hover { --bg: #fff; --bd: #fff; }
.btn--sm { min-height: 44px; padding: 0 1.15em; font-size: .88rem; }
.btn--sm::after { left: 1.15em; right: 1.15em; bottom: 8px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--f-titre); font-stretch: 110%; font-weight: 600; font-size: .95rem;
  color: var(--cuivre-texte); text-decoration: none; position: relative; padding: 4px 0;
}
.link-arrow::after {
  content: ""; position: absolute; left: 0; right: 26px; bottom: 0; height: 1px; background: currentColor;
  transform: scaleX(.3); transform-origin: left; transition: transform .45s var(--ease-out);
}
.link-arrow:hover::after, .link-arrow:focus-visible::after { transform: scaleX(1); }
.link-arrow svg { width: 17px; height: 17px; transition: transform .35s var(--ease-out); }
.link-arrow:hover svg { transform: translateX(4px); }
.on-dark .link-arrow { color: var(--cuivre-clair); }

.i { width: 1em; height: 1em; flex: none; }

/* 06. En-tête & menu mobile ---------------------------------------------------- */
.hd {
  position: fixed; inset: 0 0 auto; z-index: 60;
  color: var(--ivoire);
  --logo-tile: currentColor; --logo-letter: var(--graphite);
  transition: background-color .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease), transform .45s var(--ease);
}
body[data-hero="clair"] .hd { color: var(--graphite); --logo-letter: var(--ivoire); }
.hd.is-scrolled {
  color: var(--graphite); --logo-letter: var(--ivoire);
  background: rgba(246, 241, 232, .9);
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 1px 0 rgba(31, 29, 26, .09);
}
.hd.is-hidden { transform: translateY(-101%); }
.hd__in { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 34px); height: var(--hd-h); transition: height .4s var(--ease); }
.hd.is-scrolled .hd__in { height: 68px; }
.hd__logo { display: inline-flex; align-items: center; flex: none; text-decoration: none; margin-right: auto; border-radius: 2px; }
.hd__logo svg { width: auto; height: 46px; transition: height .4s var(--ease); }
.hd.is-scrolled .hd__logo svg { height: 40px; }
.lg-tile { fill: var(--logo-tile); transition: fill .4s var(--ease); }
.lg-letter { stroke: var(--logo-letter); transition: stroke .4s var(--ease); }
.lg-text { fill: currentColor; }
.lg-joint { fill: var(--cuivre); }
.hd__nav ul { display: flex; gap: clamp(14px, 1.9vw, 30px); list-style: none; }
.hd__nav a {
  position: relative; display: inline-block; padding: 10px 0;
  font-family: var(--f-titre); font-stretch: 106%; font-weight: 540; font-size: .9rem; letter-spacing: .01em;
  text-decoration: none; white-space: nowrap;
}
.hd__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1.5px; background: var(--cuivre);
  transform: scaleX(0); transition: transform .45s var(--ease-out);
}
.hd__nav a:hover::after, .hd__nav a:focus-visible::after, .hd__nav a[aria-current="page"]::after { transform: scaleX(1); }
.hd__cta { flex: none; }
.hd .btn--ghost { --bd: currentColor; }
.hd__burger {
  display: none; position: relative; width: 48px; height: 48px; margin-right: -8px;
  border: 0; background: none; border-radius: 2px;
}
.hd__burger span, .hd__burger span::before {
  position: absolute; left: 12px; width: 24px; height: 1.6px; background: currentColor; content: "";
  transition: transform .35s var(--ease), top .35s var(--ease);
}
.hd__burger span { top: 19px; }
.hd__burger span::before { left: 0; top: 9px; width: 16px; }
.hd__burger[aria-expanded="true"] span { top: 23px; transform: rotate(45deg); }
.hd__burger[aria-expanded="true"] span::before { top: 0; width: 24px; transform: rotate(-90deg); }

@media (max-width: 1099px) {
  .hd__nav { display: none; }
  .hd__burger { display: block; }
}
@media (max-width: 560px) {
  :root { --hd-h: 72px; }
  .hd__cta { display: none; }
  .hd__logo svg { height: 40px; }
}

.menu {
  position: fixed; inset: 0; z-index: 55;
  display: flex; flex-direction: column;
  padding: calc(var(--hd-h) + 18px) var(--gutter) max(28px, env(safe-area-inset-bottom));
  background-color: var(--graphite);
  background-image:
    linear-gradient(rgba(246, 241, 232, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246, 241, 232, .045) 1px, transparent 1px);
  background-size: 96px 96px; background-position: -1px -1px;
  color: var(--ivoire);
  overflow-y: auto; overscroll-behavior: contain;
}
.menu.is-open { animation: menuIn .35s var(--ease-out) both; }
@keyframes menuIn { from { opacity: 0; } to { opacity: 1; } }
body.menu-open { overflow: hidden; }
body.menu-open .hd { color: var(--ivoire); --logo-letter: var(--graphite); background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.menu ol { list-style: none; counter-reset: m; border-top: 1px solid rgba(246, 241, 232, .14); }
.menu li { counter-increment: m; border-bottom: 1px solid rgba(246, 241, 232, .14); }
.menu.is-open li { animation: itemIn .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms + 60ms); }
@keyframes itemIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.menu li a {
  display: grid; grid-template-columns: 2.4em 1fr; align-items: baseline; gap: 0 .2em;
  padding: 15px 0; text-decoration: none;
  font-family: var(--f-titre); font-stretch: 112%; font-weight: 580; font-size: clamp(1.45rem, 5.5vw, 2rem); line-height: 1.15;
}
.menu li a::before { content: "0" counter(m); font-size: .72rem; font-stretch: 125%; letter-spacing: .14em; color: var(--cuivre-clair); }
.menu li a small { grid-column: 2; display: block; margin-top: 4px; font-family: var(--f-texte); font-size: .95rem; font-weight: 420; color: var(--texte-clair-doux); letter-spacing: 0; }
.menu li a[aria-current="page"] { color: var(--cuivre-clair); }
.menu__foot { margin-top: auto; padding-top: 28px; display: grid; gap: 12px; }
.menu__foot .btn { width: 100%; }
.menu__note { margin: 6px 0 0; font-size: .92rem; color: var(--texte-clair-doux); display: flex; gap: .7em; align-items: center; }

/* 07. Héros de l'accueil -------------------------------------------------------- */
.hero {
  position: relative; isolation: isolate;
  min-height: max(660px, 100svh);
  display: grid; grid-template-rows: 1fr auto;
  background: var(--graphite); color: var(--ivoire); overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -3; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%; background: var(--graphite-2); animation: heroImg 2.2s var(--ease-out) both; }
@keyframes heroImg { from { transform: scale(1.06); } to { transform: none; } }
.hero__veil {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(90deg, rgba(24, 22, 19, .93) 0%, rgba(24, 22, 19, .84) 26%, rgba(24, 22, 19, .52) 46%, rgba(24, 22, 19, .08) 70%, rgba(24, 22, 19, 0) 82%),
    linear-gradient(180deg, rgba(24, 22, 19, .55) 0%, rgba(24, 22, 19, 0) 22%, rgba(24, 22, 19, 0) 70%, rgba(24, 22, 19, .7) 100%);
}
/* Le joint cuivre vertical qui traverse le héros */
.hero__joint { position: absolute; z-index: -1; top: 0; bottom: 0; left: var(--jx, 64%); width: 1.5px; background: linear-gradient(180deg, rgba(181, 104, 63, 0), var(--cuivre) 16%, var(--cuivre) 100%); transform-origin: top; animation: drawY 1.25s .1s var(--ease-out) both; }
.hero__content { align-self: center; padding-top: calc(var(--hd-h) + 40px); padding-bottom: 48px; }
.hero__content > * { max-width: 44rem; }
.hero .eyebrow { color: var(--cuivre-clair); animation: fadeUp .8s .25s var(--ease-out) both; }
.hero .eyebrow::before { animation: drawX .9s .2s var(--ease-out) both; }
.hero h1 { font-weight: 620; }
.h1-kicker {
  display: block; margin-bottom: .9rem;
  font-size: clamp(1.02rem, .92rem + .5vw, 1.32rem); font-weight: 520; font-stretch: 108%; letter-spacing: 0; line-height: 1.35;
  color: var(--texte-clair); opacity: .92;
  animation: fadeUp .8s .35s var(--ease-out) both;
}
.h1-main { display: block; font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -.022em; font-stretch: 106%; }
.h1-main .l { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.h1-main .l > span { display: block; animation: lineUp 1s var(--ease-out) both; animation-delay: calc(.42s + var(--n, 0) * .1s); }
.h1-main em { font-style: normal; color: var(--cuivre-clair); }
@keyframes lineUp { from { transform: translateY(105%); } to { transform: none; } }
.hero .lead { margin-top: 1.6rem; max-width: 36rem; color: #DDD4C8; animation: fadeUp .9s .85s var(--ease-out) both; }
.hero .btn-row { margin-top: 2.2rem; animation: fadeUp .9s .98s var(--ease-out) both; }
.hero__inset {
  position: absolute; right: max(var(--gutter), (100% - 1260px) / 2); bottom: 132px; width: clamp(190px, 16vw, 250px);
  margin: 0; animation: insetIn 1.1s 1.05s var(--ease-out) both;
}
.hero__inset a { display: block; text-decoration: none; }
.hero__inset .frame { position: relative; padding: 8px; background: rgba(246, 241, 232, .1); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(246, 241, 232, .28); }
.hero__inset img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; transition: transform .8s var(--ease-out); }
.hero__inset .frame-in { overflow: hidden; }
.hero__inset a:hover img { transform: scale(1.04); }
.hero__inset figcaption { margin-top: 10px; font-size: .86rem; line-height: 1.35; color: #E5DDD2; display: flex; gap: .6em; }
.hero__inset figcaption strong { display: block; font-family: var(--f-titre); font-stretch: 118%; font-weight: 560; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--cuivre-clair); margin-bottom: 2px; }
@keyframes insetIn { from { opacity: 0; clip-path: inset(100% 0 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
.hero__bar { position: relative; padding-block: 20px 26px; display: flex; align-items: center; justify-content: space-between; gap: 18px; animation: fadeIn 1s 1.2s var(--ease) both; }
.hero__bar::before { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); top: 0; height: 1px; background: rgba(246, 241, 232, .22); transform-origin: left; animation: drawX 1.2s 1s var(--ease-out) both; }
.rating-chip {
  display: inline-flex; align-items: center; gap: .7em; min-height: 44px; padding: 0 16px 0 12px;
  border: 1px solid rgba(246, 241, 232, .28); border-radius: 2px; text-decoration: none;
  font-size: .95rem; background: rgba(24, 22, 19, .25); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: border-color .3s, background-color .3s;
}
.rating-chip:hover { border-color: rgba(246, 241, 232, .6); background: rgba(24, 22, 19, .45); }
.rating-chip strong { font-family: var(--f-titre); font-stretch: 110%; font-weight: 640; }
.rating-chip .i-star { width: 15px; height: 15px; color: var(--cuivre-clair); }
.scroll-cue {
  display: inline-flex; align-items: center; gap: 14px; text-decoration: none;
  font-family: var(--f-titre); font-stretch: 125%; font-weight: 560; font-size: .68rem; letter-spacing: .24em; text-transform: uppercase;
}
.scroll-cue i { position: relative; width: 1.5px; height: 42px; background: rgba(246, 241, 232, .3); overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: var(--cuivre-clair); animation: cue 2.4s 1.8s var(--ease-in-out) infinite; }
@keyframes cue { 0% { top: -40%; } 60%, 100% { top: 100%; } }
.hero__x { position: absolute; left: var(--jx, 64%); bottom: calc(var(--barh, 90px) - 6px); transform: translateX(-50%); animation: xIn .8s 1.2s var(--ease-out) both; }
@keyframes xIn { from { opacity: 0; transform: translateX(-50%) rotate(-45deg) scale(.4); } to { opacity: 1; transform: translateX(-50%); } }

/* Bureau : le héros devient un diptyque. À gauche, l'aplat graphite (la matière brute) ;
   à droite, la photo (la surface finie). Le joint cuivre marque la jonction. */
@media (min-width: 1100px) {
  .hero { --seam: min(52%, calc(max(var(--gutter), (100% - 1260px) / 2) + 610px)); --jx: var(--seam); }
  .hero__media { left: var(--seam); }
  .hero__media img { object-position: 60% 50%; }
  /* La vignette s'ancre à droite, hors de la niche de la photo de fond (contrôlé de 1100 à 2560 px de large) */
  .hero__inset { right: var(--gutter); width: clamp(200px, 15vw, 236px); }
  .hero__inset figcaption strong { font-size: .6rem; letter-spacing: .14em; white-space: nowrap; }
  .hero__veil {
    left: var(--seam);
    background:
      linear-gradient(90deg, rgba(31, 29, 26, .5) 0%, rgba(31, 29, 26, 0) 16%),
      linear-gradient(180deg, rgba(24, 22, 19, .5) 0%, rgba(24, 22, 19, 0) 18%, rgba(24, 22, 19, 0) 70%, rgba(24, 22, 19, .62) 100%);
  }
  .hero::before { /* calepinage discret sur l'aplat */
    content: ""; position: absolute; z-index: -2; left: 0; top: 0; bottom: 0; width: var(--seam);
    background-image: linear-gradient(rgba(246, 241, 232, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(246, 241, 232, .045) 1px, transparent 1px);
    background-size: 120px 120px; background-position: right -1px top -1px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 60%); mask-image: linear-gradient(90deg, transparent 0%, #000 60%);
    animation: fadeIn 1.6s .4s var(--ease) both;
  }
  .hero__content > * { max-width: min(562px, calc(52vw - var(--gutter) - 48px)); }
  .hero .lead { max-width: 32rem; }
}
@media (max-width: 1099px) {
  .hero__inset { display: none; }
  .hero { --jx: 78%; }
}
@media (max-width: 760px) {
  .hero { min-height: max(600px, 100svh); }
  .hero__media img { object-position: 50% 50%; }
  .hero__veil {
    background:
      linear-gradient(180deg, rgba(24, 22, 19, .62) 0%, rgba(24, 22, 19, .2) 24%, rgba(24, 22, 19, .3) 42%, rgba(24, 22, 19, .86) 66%, rgba(24, 22, 19, .95) 100%);
  }
  .hero__content { align-self: end; padding-bottom: 28px; }
  .hero { --jx: calc(100% - var(--gutter) - 2px); }
  .hero__joint { opacity: .8; }
  .hero__x { display: none; }
  .scroll-cue span { display: none; }
}

/* 08. Héros des pages ----------------------------------------------------------- */
.phero { position: relative; padding-top: calc(var(--hd-h) + clamp(28px, 4vw, 64px)); padding-bottom: clamp(56px, 6vw, 96px); overflow: hidden; }
.phero::before { /* plan de calepinage discret */
  content: ""; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: 52%;
  background-image:
    linear-gradient(var(--joint) 1px, transparent 1px),
    linear-gradient(90deg, var(--joint) 1px, transparent 1px);
  background-size: 120px 120px; background-position: -1px -1px;
  opacity: .55;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%);
  mask-image: linear-gradient(90deg, transparent, #000 40%);
}
.phero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 84px); align-items: center; }
.crumbs { display: flex; flex-wrap: wrap; gap: .5em; list-style: none; margin-bottom: 1.6rem; font-size: .9rem; color: var(--texte-doux); }
.crumbs li + li::before { content: "/"; margin-right: .5em; color: var(--sable); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.phero h1 { font-size: var(--fs-h1-page); line-height: 1.04; }
.phero h1 .k { display: block; font-size: clamp(1rem, .92rem + .4vw, 1.25rem); font-weight: 540; font-stretch: 108%; letter-spacing: 0; color: var(--cuivre-texte); margin-bottom: .8rem; line-height: 1.3; }
.phero .lead { margin-top: 1.4rem; max-width: 38rem; }
.phero .btn-row { margin-top: 2rem; }
.phero__facts { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 2rem; list-style: none; font-size: .95rem; color: var(--texte-doux); }
.phero__facts li { display: inline-flex; align-items: center; gap: .65em; }
.phero__media { position: relative; margin: 0; }
.window { position: relative; }
.window::before { /* cadre décalé, comme un carreau voisin */
  content: ""; position: absolute; inset: 18px -18px -18px 18px; border: 1px solid var(--sable); z-index: -1;
}
.window__in { overflow: hidden; }
.window img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.window .x { position: absolute; }
.window .x--tl { left: -6px; top: -6px; }
.window .x--br { right: -24px; bottom: -24px; }
.phero__inset {
  position: absolute; left: -10%; bottom: -7%; width: 38%; margin: 0;
  padding: 7px; background: var(--ivoire); box-shadow: 0 24px 50px -24px rgba(31, 29, 26, .45);
}
.phero__inset img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.phero__inset figcaption, .tag-real {
  font-family: var(--f-titre); font-stretch: 118%; font-weight: 560; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--argile); padding: 8px 2px 2px; display: flex; align-items: center; gap: .6em; line-height: 1.3;
}
.phero--compact .phero__grid { grid-template-columns: 1fr; }
@media (max-width: 899px) {
  .phero__grid { grid-template-columns: 1fr; }
  .phero::before { width: 100%; opacity: .35; }
  .phero__media { max-width: 520px; margin-inline: auto 18px; }
  .phero__inset { left: -14px; width: 40%; }
}

/* 09. Sections & titres ------------------------------------------------------------ */
.section { position: relative; padding-block: var(--section); }
.section--pierre { background: var(--pierre); }
.section--ink { background: var(--graphite); color: var(--texte-clair); }
.section--ink2 { background: var(--graphite-2); color: var(--texte-clair); }
.section-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 20px clamp(32px, 5vw, 80px); align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.section-head--single { grid-template-columns: minmax(0, 52rem); }
.section-head h2 { max-width: 18ch; }
.section-head .lead { margin: 0; }
@media (max-width: 899px) { .section-head { grid-template-columns: 1fr; } }
.section-joint { position: absolute; left: 0; right: 0; top: 0; }
.section-joint .wrap { position: relative; }
.section-joint .wrap::before { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); top: 0; height: 1px; background: var(--joint); }
.section-joint .wrap::after { content: ""; position: absolute; left: var(--gutter); top: 0; height: 1px; width: 140px; background: var(--cuivre); transform-origin: left; }
.section-joint .x { position: absolute; left: calc(var(--gutter) + 134px); top: -5px; }
.split-words .w { display: inline-block; }

/* 10. Manifeste & mots des clients ------------------------------------------------------ */
.manifeste__grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(40px, 6vw, 100px); align-items: center; }
.manifeste h2 { max-width: 15ch; margin-bottom: 1.6rem; }
.metiers { list-style: none; margin-top: 2.2rem; border-top: 1px solid var(--joint); }
.metiers li { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 4px 18px; padding: 16px 0; border-bottom: 1px solid var(--joint); }
.metiers .x { align-self: center; }
.metiers strong { font-family: var(--f-titre); font-stretch: 118%; font-weight: 620; font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; }
.metiers .d { grid-column: 2; color: var(--texte-doux); font-size: 1rem; line-height: 1.45; }
.metiers a { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.metiers__more { margin-top: 18px; font-size: 1rem; color: var(--texte-doux); }
.metiers__more a { color: var(--cuivre-texte); font-weight: 560; }

/* Calepinage de photos : des carreaux posés avec un joint régulier */
.calep { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; grid-template-rows: 1fr 1fr; gap: 10px; aspect-ratio: 1 / 1.02; margin: 0; }
.calep__a { grid-row: span 2; }
.calep > div { position: relative; overflow: hidden; background: var(--pierre); }
.calep img { width: 100%; height: 100%; object-fit: cover; }
.calep::after { /* joint cuivre qui court sous la composition */
  content: ""; position: absolute; left: -24px; right: 46%; bottom: -22px; height: 1.5px; background: var(--cuivre);
  transform-origin: left;
}
.calep__cap { position: absolute; right: 0; bottom: -30px; font-family: var(--f-titre); font-stretch: 118%; font-weight: 560; font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--argile); display: flex; gap: .7em; align-items: center; }
@media (max-width: 899px) {
  .manifeste__grid { grid-template-columns: 1fr; }
  .calep { margin-top: 8px; margin-bottom: 30px; }
}

.mots { margin-top: clamp(80px, 8vw, 130px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--joint); }
.mot { position: relative; padding: 30px clamp(18px, 2vw, 30px) 6px; border-left: 1px solid var(--joint); margin: 0; }
.mot:first-child { border-left: 0; padding-left: 0; }
.mot > .x { position: absolute; left: -6px; top: -6px; }
.mot:first-child > .x { display: none; }
.mot__label { display: block; font-family: var(--f-titre); font-stretch: 125%; font-weight: 600; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--cuivre-texte); margin-bottom: 12px; }
.mot blockquote { margin: 0; font-style: italic; font-size: 1.12rem; line-height: 1.45; }
.mot figcaption { margin-top: 12px; font-size: .9rem; color: var(--texte-doux); }
.mots__note { grid-column: 1 / -1; margin-top: 26px; font-size: .9rem; color: var(--texte-doux); }
@media (max-width: 960px) {
  .mots { grid-template-columns: 1fr 1fr; }
  .mot:nth-child(3) { border-left: 0; padding-left: 0; }
  .mot:nth-child(3) > .x { display: none; }
  .mot:nth-child(n+3) { border-top: 1px solid var(--joint); }
}
@media (max-width: 560px) {
  .mots { grid-template-columns: 1fr; }
  .mot { border-left: 0; padding-left: 0; padding-bottom: 24px; }
  .mot > .x { display: none; }
  .mot + .mot { border-top: 1px solid var(--joint); }
}

/* 11. Nuancier des matières ---------------------------------------------------------------- */
.nuancier { --accent: var(--cuivre-texte); transition: --accent .4s; }
.nuancier[data-matiere="sols"] { --accent: #7A5F45; }
.nuancier[data-matiere="platre"] { --accent: #4F5F59; }
.nuancier[data-matiere="peinture"] { --accent: #6E5236; }
.nuancier__body { display: grid; grid-template-columns: minmax(250px, .62fr) minmax(0, 1.38fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.swatches { display: grid; gap: 10px; }
.swatch {
  position: relative; display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 16px;
  width: 100%; padding: 10px 16px 10px 10px; text-align: left;
  background: rgba(246, 241, 232, .55); border: 1px solid transparent; border-radius: 2px;
  transition: background-color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.swatch:hover { background: var(--ivoire); }
.swatch[aria-selected="true"] { background: var(--ivoire); border-color: var(--accent); }
.swatch[aria-selected="true"]::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; background: var(--accent); }
.swatch__img { width: 64px; height: 64px; overflow: hidden; }
.swatch__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.swatch:hover .swatch__img img, .swatch[aria-selected="true"] .swatch__img img { transform: scale(1.12); }
.swatch__n { display: block; font-family: var(--f-titre); font-stretch: 125%; font-size: .66rem; font-weight: 600; letter-spacing: .2em; color: var(--texte-doux); }
.swatch__t { display: block; font-family: var(--f-titre); font-stretch: 110%; font-weight: 620; font-size: 1.08rem; line-height: 1.2; margin-top: 2px; }
.swatch__s { display: block; font-size: .92rem; color: var(--texte-doux); line-height: 1.35; margin-top: 2px; }
.n-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: center; }
.n-panel:focus-visible { outline-offset: 8px; }
.n-panel__media { position: relative; margin: 0; padding: 0 0 34px 0; }
.n-panel__main { overflow: hidden; }
.n-panel__main img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.n-panel__real { position: absolute; right: -18px; bottom: 0; width: 44%; margin: 0; padding: 6px; background: var(--ivoire); box-shadow: 0 22px 44px -26px rgba(31, 29, 26, .55); }
.n-panel__real img { aspect-ratio: 3 / 4; width: 100%; object-fit: cover; }
.n-panel__real figcaption { font-family: var(--f-titre); font-stretch: 118%; font-weight: 560; font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--argile); padding: 7px 2px 1px; line-height: 1.3; }
.n-panel__text h3 { font-size: clamp(1.55rem, 1.2rem + 1.2vw, 2.25rem); margin-bottom: 1rem; }
.n-panel__text h3 em { font-style: normal; color: var(--accent); }
.n-panel__text p { color: var(--texte-doux); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 1.4rem 0 1.8rem; }
.tags li { padding: 6px 12px; border: 1px solid color-mix(in srgb, var(--accent, var(--argile)) 40%, transparent); font-size: .9rem; line-height: 1.3; border-radius: 2px; }
.n-panel__main { background: rgba(31, 29, 26, .06); }
.n-panel.is-waiting .n-panel__main img { clip-path: inset(0 0 0 100%); }
.n-panel.is-waiting .n-panel__real { opacity: 0; }
.n-panel.is-entering:not(.is-waiting) .n-panel__main img { animation: wipeIn .9s var(--ease-out) both; }
.n-panel.is-entering:not(.is-waiting) .n-panel__real { animation: fadeUp .8s .2s var(--ease-out) both; }
.n-panel.is-entering .n-panel__text > * { animation: fadeUp .7s var(--ease-out) both; }
.n-panel.is-entering .n-panel__text > *:nth-child(2) { animation-delay: .06s; }
.n-panel.is-entering .n-panel__text > *:nth-child(3) { animation-delay: .12s; }
.n-panel.is-entering .n-panel__text > *:nth-child(4) { animation-delay: .18s; }
@keyframes wipeIn { from { clip-path: inset(0 0 0 100%); transform: scale(1.05); } to { clip-path: inset(0 0 0 0); transform: none; } }
.nuancier__hint { display: none; margin-top: 18px; font-size: .9rem; color: var(--texte-doux); }
@media (max-width: 1023px) {
  .nuancier__body { grid-template-columns: 1fr; }
  .swatches { grid-auto-flow: column; grid-auto-columns: minmax(160px, 1fr); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .swatches::-webkit-scrollbar { display: none; }
  .swatch { grid-template-columns: 44px 1fr; gap: 12px; scroll-snap-align: start; padding: 8px 12px 8px 8px; }
  .swatch__img { width: 44px; height: 44px; }
  .swatch__s { display: none; }
  .swatch__t { font-size: .98rem; }
  .nuancier__hint { display: block; }
}
@media (max-width: 680px) {
  .n-panel { grid-template-columns: 1fr; }
  .n-panel__media { margin-right: 18px; }
}

/* 12. Du brut à la finition ------------------------------------------------------------------ */
.brut__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 110px); }
.brut__stage { position: sticky; top: 96px; height: fit-content; }
.brut__frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--pierre); }
.brut__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 0 100% 0); transition: clip-path 1s var(--ease-in-out); }
.brut__frame img.is-on { clip-path: inset(0 0 0 0); }
.brut__frame img:first-child { clip-path: inset(0 0 0 0); }
.brut__rail { position: absolute; left: -22px; top: 0; bottom: 0; width: 1.5px; background: var(--joint); }
.brut__rail i { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--cuivre); transform-origin: top; transform: scaleY(var(--p, 0)); }
.brut__label { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; font-size: .92rem; color: var(--texte-doux); }
.brut__label strong { font-family: var(--f-titre); font-stretch: 118%; font-weight: 600; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--argile); }
.brut__count { font-family: var(--f-titre); font-stretch: 125%; font-weight: 600; font-size: .78rem; letter-spacing: .12em; color: var(--texte); white-space: nowrap; }
.etapes-brut { list-style: none; }
.eb { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; padding-block: 40px; }
.eb h3 { color: #8A8070; transition: color .6s var(--ease); }
.eb.is-on h3 { color: var(--texte); }
.eb:first-child { min-height: 56vh; justify-content: flex-start; padding-top: 0; }
.eb:last-child { min-height: 64vh; }

.eb .x { color: var(--sable); transition: color .5s; }
.eb.is-on .x { color: var(--cuivre); }
.eb__n { display: flex; align-items: center; gap: 14px; font-family: var(--f-titre); font-stretch: 125%; font-weight: 600; font-size: .78rem; letter-spacing: .2em; color: var(--cuivre-texte); margin-bottom: 14px; }
.eb__n::after { content: ""; flex: 1; max-width: 120px; height: 1px; background: currentColor; opacity: .5; }
.eb h3 { font-size: clamp(2.3rem, 1.6rem + 2.6vw, 4rem); font-stretch: 116%; letter-spacing: -.02em; }
.eb h3 small { display: block; margin-top: .55rem; font-family: var(--f-texte); font-size: 1.15rem; font-weight: 500; letter-spacing: 0; color: var(--texte-doux); line-height: 1.3; }
.eb p { margin-top: 1.2rem; max-width: 32rem; color: var(--texte-doux); }
.eb ul { list-style: none; margin-top: 1.2rem; display: grid; gap: 8px; }
.eb li { display: flex; gap: .8em; align-items: center; font-size: 1rem; }
.eb__img { display: none; margin: 1.4rem 0 0; }
.eb__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.eb__img img.is-haut { object-position: 50% 12%; }
.eb__img figcaption, .eb__note { font-size: .88rem; color: var(--texte-doux); margin-top: 8px; }
.eb__note { display: flex; gap: .6em; align-items: center; color: var(--argile); font-weight: 560; }
@media (max-width: 899px) {
  .brut__grid { grid-template-columns: 1fr; }
  .brut__stage { display: none; }
  .etapes-brut { position: relative; padding-left: 26px; }
  .etapes-brut::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1.5px; background: var(--joint); }
  .etapes-brut::after { content: ""; position: absolute; left: 0; top: 6px; width: 1.5px; height: calc((100% - 12px) * var(--p, 0)); background: var(--cuivre); }
  .eb, .eb:first-child, .eb:last-child { min-height: 0; padding-block: 0 56px; }
  .eb h3 { color: var(--texte); }
  .eb:last-child { padding-bottom: 0; }
  .eb__img { display: block; }
  .eb h3 { font-size: clamp(2rem, 1.5rem + 3vw, 2.8rem); }
}

/* 13. Réalisations (accueil) & galerie ------------------------------------------------------------- */
.reals { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(120px, 11vw, 165px); gap: 10px; }
.shot {
  position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; margin: 0;
  overflow: hidden; background: var(--graphite-3); text-align: left; color: var(--ivoire);
}
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out), filter .6s var(--ease); background: var(--graphite-3); }
.shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 18, 16, 0) 45%, rgba(20, 18, 16, .78) 100%); opacity: .7; transition: opacity .5s var(--ease); }
.shot__cap { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 12px; font-size: .92rem; line-height: 1.3; transform: translateY(6px); opacity: .92; transition: transform .5s var(--ease-out), opacity .5s; }
.shot__cap b { display: block; font-family: var(--f-titre); font-stretch: 118%; font-weight: 560; font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--cuivre-clair); margin-bottom: 3px; }
.shot__corner { position: absolute; z-index: 2; top: 12px; right: 12px; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(246, 241, 232, .5); opacity: 0; transform: scale(.85); transition: opacity .4s var(--ease), transform .4s var(--ease-out); background: rgba(20, 18, 16, .35); }
.shot__corner svg { width: 16px; height: 16px; }
.shot:hover img, .shot:focus-visible img { transform: scale(1.05); }
.shot:hover::after, .shot:focus-visible::after { opacity: 1; }
.shot:hover .shot__cap, .shot:focus-visible .shot__cap { transform: none; opacity: 1; }
.shot:hover .shot__corner, .shot:focus-visible .shot__corner { opacity: 1; transform: none; }
.shot:focus-visible { outline-offset: 3px; }
.badge { position: absolute; z-index: 2; left: 12px; top: 12px; padding: 4px 9px; background: rgba(20, 18, 16, .72); color: var(--ivoire); font-family: var(--f-titre); font-stretch: 112%; font-weight: 560; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; border-radius: 1px; }
/* Grille éditoriale de l'accueil */
.reals > :nth-child(1) { grid-column: 1 / span 5; grid-row: span 4; }
.reals > :nth-child(2) { grid-column: 6 / span 3; grid-row: span 2; }
.reals > :nth-child(3) { grid-column: 9 / span 4; grid-row: span 3; }
.reals > :nth-child(4) { grid-column: 6 / span 3; grid-row: span 3; }
.reals > :nth-child(5) { grid-column: 9 / span 4; grid-row: span 2; }
.reals > :nth-child(6) { grid-column: 1 / span 5; grid-row: span 2; }
.reals > :nth-child(7) { grid-column: 6 / span 7; grid-row: span 1; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 clamp(18px, 2vw, 30px); background: var(--graphite-2); }
.reals__more p { margin: 0; color: var(--texte-clair-doux); font-size: .98rem; }
.reals__note { margin-top: 26px; display: flex; gap: .7em; align-items: center; font-size: .92rem; color: var(--texte-clair-doux); }
@media (max-width: 899px) {
  .reals { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
  .reals > * { grid-column: auto !important; grid-row: auto !important; aspect-ratio: 3 / 4; }
  .reals > :nth-child(1) { grid-column: 1 / -1 !important; aspect-ratio: 4 / 4.4; }
  .reals > :nth-child(6) { aspect-ratio: 3 / 4; }
  .reals > :nth-child(7) { grid-column: 1 / -1 !important; aspect-ratio: auto; padding: 22px; flex-direction: column; align-items: flex-start; }
  .shot__cap { transform: none; }
}

/* Page galerie */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.filter {
  min-height: 44px; padding: 0 16px; border: 1px solid var(--sable); background: transparent; border-radius: 2px;
  font-family: var(--f-titre); font-stretch: 108%; font-weight: 560; font-size: .9rem; color: var(--texte);
  display: inline-flex; align-items: center; gap: .55em; transition: background-color .3s, border-color .3s, color .3s;
}
.filter span { font-size: .78rem; color: var(--texte-doux); font-weight: 520; }
.filter:hover { border-color: var(--graphite); }
.filter[aria-pressed="true"] { background: var(--graphite); color: var(--ivoire); border-color: var(--graphite); }
.filter[aria-pressed="true"] span { color: var(--texte-clair-doux); }
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: 10px; list-style: none; }
.gallery li { aspect-ratio: 3 / 4; transition: opacity .45s var(--ease), transform .55s var(--ease-out); }
.gallery li.is-wide { grid-column: span 2; aspect-ratio: auto; }
.gallery li.is-out { display: none; }
.gallery li.is-in { animation: tileIn .6s var(--ease-out) both; animation-delay: calc(var(--k, 0) * 40ms); }
@keyframes tileIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.gallery .shot__cap { font-size: .9rem; }
.gallery-status { margin: 22px 0 0; font-size: .92rem; color: var(--texte-doux); }
@media (max-width: 1023px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .gallery { grid-template-columns: 1fr 1fr; gap: 8px; }
  .gallery li.is-wide { grid-column: 1 / -1; }
  .gallery .shot__cap { font-size: .82rem; left: 10px; right: 10px; bottom: 9px; }
  .gallery .shot__cap b { display: none; }
  .filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); padding-bottom: 6px; scrollbar-width: none; }
  .filters::-webkit-scrollbar { display: none; }
  .filter { flex: none; }
}

/* Diptyque : un même chantier, deux étapes (jamais un faux avant/après) */
.dip { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.dip__pair { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dip__pair figure { margin: 0; }
.dip__pair img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.dip__pair figcaption { margin-top: 10px; font-size: .92rem; color: var(--texte-doux); line-height: 1.4; }
.dip__pair figcaption b { display: block; font-family: var(--f-titre); font-stretch: 118%; font-weight: 600; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--cuivre-texte); margin-bottom: 3px; }
.dip__pair::before { content: ""; position: absolute; left: 50%; top: -14px; bottom: 44px; width: 1.5px; background: var(--cuivre); transform: translateX(-50%); }
.dip__pair > .x { position: absolute; left: 50%; top: -20px; transform: translateX(-50%); }
.section--ink .dip__pair figcaption { color: var(--texte-clair-doux); }
.section--ink .dip__pair figcaption b { color: var(--cuivre-clair); }
@media (max-width: 899px) { .dip { grid-template-columns: 1fr; } }

/* 14. L'artisan --------------------------------------------------------------------------------------- */
.artisan__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 100px); align-items: center; }
.artisan__media { position: relative; margin: 0; }
.artisan__photo { overflow: hidden; }
.artisan__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
/* Cadre d'attente : à remplacer par la photo de Juljan (voir README § 12) */
.artisan__attente {
  position: relative; aspect-ratio: 4 / 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  padding: 0 24px 14%; text-align: center; color: var(--ivoire);
  background:
    repeating-linear-gradient(90deg, rgba(246, 241, 232, .055) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, rgba(246, 241, 232, .055) 0 1px, transparent 1px 72px),
    radial-gradient(120% 90% at 50% 38%, #2C2925 0%, var(--graphite) 70%);
}
.artisan__attente::before {
  content: ""; position: absolute; inset: 22px; pointer-events: none; --c: rgba(224, 160, 111, .7);
  background:
    linear-gradient(var(--c) 0 0) top left / 26px 1px, linear-gradient(var(--c) 0 0) top left / 1px 26px,
    linear-gradient(var(--c) 0 0) top right / 26px 1px, linear-gradient(var(--c) 0 0) top right / 1px 26px,
    linear-gradient(var(--c) 0 0) bottom left / 26px 1px, linear-gradient(var(--c) 0 0) bottom left / 1px 26px,
    linear-gradient(var(--c) 0 0) bottom right / 26px 1px, linear-gradient(var(--c) 0 0) bottom right / 1px 26px;
  background-repeat: no-repeat;
}
.artisan__attente img { width: clamp(56px, 6vw, 76px); height: auto; }
.artisan__attente p { margin: 0; font-family: var(--f-titre); font-stretch: 118%; font-weight: 600; font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); line-height: 1.15; letter-spacing: -.005em; }
.artisan__attente small { display: block; margin-top: 10px; font-stretch: 118%; font-size: .66rem; font-weight: 560; letter-spacing: .22em; text-transform: uppercase; color: var(--cuivre-clair); }
.artisan__name {
  position: absolute; left: clamp(-60px, -4vw, -20px); bottom: 12%; margin: 0;
  background: var(--ivoire); padding: 18px 26px 18px 22px;
  font-family: var(--f-titre); font-stretch: 122%; font-weight: 640; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem); line-height: 1; letter-spacing: -.01em;
  box-shadow: 0 24px 48px -30px rgba(31, 29, 26, .5);
}
.artisan__name small { display: block; margin-top: 8px; font-family: var(--f-titre); font-stretch: 118%; font-size: .62rem; font-weight: 560; letter-spacing: .2em; text-transform: uppercase; color: var(--cuivre-texte); }
.artisan__name::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--cuivre); }
.artisan h2 { max-width: 16ch; margin-bottom: 1.4rem; }
.principes { list-style: none; margin: 2rem 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--joint); }
.principes li { padding: 18px 18px 18px 0; border-bottom: 1px solid var(--joint); }
.principes li:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--joint); }
.principes strong { display: flex; align-items: center; gap: .7em; font-family: var(--f-titre); font-stretch: 112%; font-weight: 620; font-size: 1.02rem; margin-bottom: 4px; }
.principes .d { font-size: .98rem; color: var(--texte-doux); line-height: 1.45; display: block; }
.facts { display: flex; flex-wrap: wrap; gap: 12px 30px; margin: 0 0 2rem; }
.facts div { min-width: 120px; }
.facts dt { font-family: var(--f-titre); font-stretch: 118%; font-weight: 560; font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--texte-doux); }
.facts dd { margin: 2px 0 0; font-family: var(--f-titre); font-stretch: 110%; font-weight: 600; font-size: 1.05rem; }
@media (max-width: 899px) {
  .artisan__grid { grid-template-columns: 1fr; }
  .artisan__media { max-width: 520px; margin-left: 20px; }
  .artisan__name { left: -20px; }
}
@media (max-width: 560px) { .principes { grid-template-columns: 1fr; } .principes li:nth-child(even) { padding-left: 0; border-left: 0; } }

/* 15. Avis & plateformes -------------------------------------------------------------------------------- */
.avis__head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 24px clamp(30px, 5vw, 80px); align-items: end; margin-bottom: clamp(36px, 4vw, 60px); }
.note-globale { justify-self: end; display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; align-items: center; padding: 20px 24px; background: var(--ivoire); border-left: 3px solid var(--cuivre); max-width: 380px; }
.note-globale .note-globale__val { grid-row: span 2; font-family: var(--f-titre); font-stretch: 112%; font-weight: 660; font-size: 3rem; line-height: 1; }
.note-globale__val small { font-size: 1.1rem; font-weight: 520; color: var(--texte-doux); }
.note-globale p { margin: 0; font-size: .95rem; line-height: 1.35; }
.note-globale a { grid-column: 1 / -1; margin-top: 10px; }
.stars { --n: 5; position: relative; display: inline-block; width: 96px; height: 18px;
  background: linear-gradient(90deg, var(--cuivre) calc(var(--n) / 5 * 100%), var(--sable) 0);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18'%3E%3Cpath d='M10 0l2.6 6.1 6.6.5-5 4.3 1.5 6.5L10 14l-5.7 3.4 1.5-6.5-5-4.3 6.6-.5z'/%3E%3C/svg%3E") 0 0 / 19.2px 18px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18'%3E%3Cpath d='M10 0l2.6 6.1 6.6.5-5 4.3 1.5 6.5L10 14l-5.7 3.4 1.5-6.5-5-4.3 6.6-.5z'/%3E%3C/svg%3E") 0 0 / 19.2px 18px repeat-x;
}
.avis { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .55fr); gap: clamp(28px, 4vw, 64px); align-items: stretch; }
.avis__stage { position: relative; display: flex; flex-direction: column; justify-content: center; background: var(--ivoire); padding: clamp(28px, 4vw, 56px); }
.avis__stage::before { content: ""; position: absolute; left: clamp(28px, 4vw, 56px); top: 0; width: 90px; height: 3px; background: var(--cuivre); }
.avis__item { margin: 0; }
.avis__item[aria-hidden="true"] { display: none; }
.avis__item.is-entering blockquote { animation: fadeUp .7s var(--ease-out) both; }
.avis__item.is-entering .avis__meta { animation: fadeUp .7s .1s var(--ease-out) both; }
.avis__quote-mark { width: 44px; height: 34px; color: var(--cuivre); margin-bottom: 18px; }
.avis__item blockquote { margin: 0; font-style: italic; font-weight: 460; font-size: clamp(1.32rem, 1.05rem + 1.05vw, 1.95rem); line-height: 1.38; letter-spacing: -.005em; }
.avis__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--joint); font-size: .95rem; color: var(--texte-doux); }
.avis__meta strong { font-family: var(--f-titre); font-stretch: 112%; font-weight: 640; font-size: 1.05rem; color: var(--texte); }
.avis__cat { padding: 3px 10px; border: 1px solid var(--sable); font-size: .86rem; }
.avis__nav { display: flex; flex-direction: column; }
.avis__list { list-style: none; display: grid; border-top: 1px solid var(--sable); }
.avis__tab { width: 100%; display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: center; padding: 16px 4px; border: 0; border-bottom: 1px solid var(--sable); background: none; text-align: left; transition: background-color .3s; }
.avis__tab:hover { background: rgba(246, 241, 232, .5); }
.avis__tab .x { grid-row: span 2; opacity: .25; transition: opacity .3s, transform .45s var(--ease-out); }
.avis__tab[aria-selected="true"] .x { opacity: 1; transform: rotate(90deg); }
.avis__tab b { font-family: var(--f-titre); font-stretch: 110%; font-weight: 620; font-size: 1rem; }
.avis__tab span { font-size: .88rem; color: var(--texte-doux); }
.avis__ctrl { display: flex; gap: 10px; margin-top: 18px; }
.ctrl-btn { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--sable); background: transparent; border-radius: 2px; transition: border-color .3s, background-color .3s; }
.ctrl-btn:hover { border-color: var(--graphite); background: var(--ivoire); }
.ctrl-btn svg { width: 18px; height: 18px; }
.avis__count { align-self: center; margin-left: 6px; font-family: var(--f-titre); font-stretch: 118%; font-size: .8rem; font-weight: 600; letter-spacing: .12em; }
.avis__note { margin-top: 18px; font-size: .9rem; color: var(--texte-doux); line-height: 1.5; }
@media (max-width: 960px) {
  .avis__head { grid-template-columns: 1fr; }
  .note-globale { justify-self: start; }
  .avis { grid-template-columns: 1fr; }
  .avis__list { grid-auto-flow: column; grid-auto-columns: 1fr; border-top: 0; }
  .avis__tab { grid-template-columns: 1fr; padding: 12px 6px; border-bottom-width: 2px; }
  .avis__tab .x { display: none; }
  .avis__tab span { display: none; }
  .avis__tab[aria-selected="true"] { border-bottom-color: var(--cuivre); }
  .avis__nav { order: -1; }
  .avis__stage { min-height: 0; }
}
@media (max-width: 480px) { .avis__tab b { font-size: .88rem; } }

.plateformes { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px 40px; align-items: center; padding-top: 34px; border-top: 1px solid var(--sable); }
.plateformes h3 { font-size: 1.2rem; }
.plateformes p { margin: 8px 0 0; font-size: .92rem; color: var(--texte-doux); }
.plateformes__list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; list-style: none; }
.plateforme { display: flex; flex-direction: column; justify-content: center; gap: 10px; min-height: 96px; padding: 18px 20px; background: var(--ivoire); border: 1px solid transparent; text-decoration: none; transition: border-color .3s, transform .4s var(--ease-out); }
.plateforme:hover { border-color: var(--graphite); transform: translateY(-2px); }
.plateforme img { height: 26px; width: auto; }
.plateforme span { font-size: .86rem; color: var(--texte-doux); display: flex; align-items: center; gap: .5em; }
.plateforme span svg { width: 14px; height: 14px; }
@media (max-width: 760px) { .plateformes { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .plateformes__list { grid-template-columns: 1fr; } }

/* 16. Déroulement d'un projet --------------------------------------------------------------------------- */
.steps { position: relative; list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: var(--joint); }
.steps::after { content: ""; position: absolute; left: 0; top: 5px; height: 1.5px; width: 100%; background: var(--cuivre); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .2s linear; }
.step { position: relative; counter-increment: s; padding: 38px 22px 0 0; }
.step .x { position: absolute; left: -5px; top: 0; z-index: 1; background-color: var(--ivoire); box-shadow: 0 0 0 4px var(--ivoire); transition: transform .5s var(--ease-out), color .4s; color: var(--sable); }
.step.is-on .x { color: var(--cuivre); transform: rotate(90deg); }
.step::before { content: "0" counter(s); display: block; font-family: var(--f-titre); font-stretch: 125%; font-weight: 620; font-size: .74rem; letter-spacing: .18em; color: var(--cuivre-texte); margin-bottom: 10px; }
.step h3 { font-size: 1.12rem; line-height: 1.22; margin-bottom: .6rem; }
.step p { font-size: .98rem; color: var(--texte-doux); line-height: 1.5; }
@media (max-width: 1023px) {
  .steps { grid-template-columns: 1fr 1fr 1fr; row-gap: 40px; }
  .steps::before, .steps::after { display: none; }
  .step { border-top: 1px solid var(--joint); padding-top: 30px; }
  .step .x { top: -6px; }
}
@media (max-width: 640px) {
  .steps { grid-template-columns: 1fr; row-gap: 0; padding-left: 26px; }
  .steps::before { display: block; left: 0; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; }
  .steps::after { display: block; left: 0; top: 6px; width: 1.5px; height: calc(100% - 12px); transform: scaleY(var(--p, 0)); transform-origin: top; }
  .step { border-top: 0; padding: 0 0 30px; }
  .step .x { left: -31px; top: 4px; }
}

/* 17. Secteur & appel final ------------------------------------------------------------------------------- */
.secteur { position: relative; overflow: hidden; }
.secteur::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(246, 241, 232, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(246, 241, 232, .05) 1px, transparent 1px);
  background-size: 120px 120px; background-position: -1px -1px;
}
.secteur__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 100px); align-items: center; }
.secteur h2 { max-width: 15ch; margin-bottom: 1.4rem; }
.communes { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 1.6rem 0 0; }
.communes li { padding: 6px 12px; border: 1px solid rgba(246, 241, 232, .25); font-size: .92rem; }
.communes li.is-base { border-color: var(--cuivre-clair); color: var(--cuivre-clair); }
.carte { position: relative; margin: 0; }
.carte svg { width: 100%; height: auto; overflow: visible; }
.carte figcaption { margin-top: 10px; font-size: .84rem; color: var(--texte-clair-doux); text-align: right; }
.carte .ring { fill: none; stroke: rgba(246, 241, 232, .22); stroke-dasharray: 3 6; }
.carte .rhin { fill: none; stroke: rgba(160, 182, 190, .45); stroke-width: 7; stroke-linecap: round; }
.carte .ill { fill: none; stroke: rgba(160, 182, 190, .3); stroke-width: 2.5; stroke-linecap: round; }
.carte .pt { fill: var(--ivoire); }
.carte .lbl { fill: var(--texte-clair-doux); font-family: var(--f-titre); font-stretch: 108%; font-size: 13px; font-weight: 520; }
.carte .lbl--base { fill: var(--ivoire); font-size: 15px; font-weight: 640; }
.carte .lbl--eau { fill: rgba(160, 182, 190, .8); font-style: italic; font-family: var(--f-texte); font-size: 13px; }
.cta-final { position: relative; margin-top: clamp(64px, 7vw, 110px); padding: clamp(28px, 4vw, 56px); background: var(--ivoire); color: var(--texte); display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: 24px 40px; align-items: center; }
.cta-final::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cuivre); }
.cta-final h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.7rem); max-width: 22ch; }
.cta-final p { margin: .8rem 0 0; color: var(--texte-doux); max-width: 40rem; }
@media (max-width: 899px) {
  .secteur__grid { grid-template-columns: 1fr; }
  .cta-final { grid-template-columns: 1fr; }
}

/* 18. Pages métiers : composants ------------------------------------------------------------------------- */
/* Prestations en calepinage */
.presta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(190px, auto); grid-auto-flow: dense; gap: 10px; list-style: none; }
.presta li { position: relative; padding: 24px 24px 22px; background: var(--ivoire); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.section--pierre .presta li { background: var(--ivoire); }
.presta li.is-photo { padding: 0; color: var(--ivoire); background: var(--graphite); }
.presta li.is-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.presta li.is-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 18, 16, 0) 35%, rgba(20, 18, 16, .82)); }
.presta li.is-photo .presta__txt { position: relative; z-index: 1; padding: 22px 24px; }
.presta li.is-photo .presta__txt p { color: #E2DAD0; }
.presta li:hover img { transform: scale(1.04); }
.presta li.is-big { grid-column: span 2; grid-row: span 2; }
.presta li.is-tall { grid-row: span 2; }
.presta li.is-wide { grid-column: span 2; }
.presta__n { position: absolute; top: 20px; left: 24px; font-family: var(--f-titre); font-stretch: 125%; font-weight: 600; font-size: .66rem; letter-spacing: .2em; color: var(--texte-doux); }
.presta li.is-photo .presta__n { color: var(--texte-clair-doux); z-index: 1; }
.presta li .x { position: absolute; top: 22px; right: 22px; }
.presta h3 { font-size: 1.18rem; margin-bottom: .45rem; }
.presta p { font-size: .97rem; color: var(--texte-doux); line-height: 1.45; }
.presta .tag-real { position: absolute; top: 14px; right: 14px; z-index: 1; color: var(--ivoire); background: rgba(20, 18, 16, .55); padding: 5px 9px; }
@media (max-width: 1023px) { .presta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .presta { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .presta li, .presta li.is-big, .presta li.is-tall, .presta li.is-wide { grid-column: auto; grid-row: auto; min-height: 170px; }
  .presta li.is-photo { min-height: 300px; }
}

/* Rangées pédagogiques image / texte */
.rows { display: grid; gap: clamp(56px, 7vw, 110px); }
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 90px); align-items: center; }
.row:nth-child(even) .row__media { order: 2; }
.row__media { position: relative; margin: 0; }
.row__media .frame { overflow: hidden; }
.row__media img { width: 100%; aspect-ratio: 4 / 3.6; object-fit: cover; }
.row__media figcaption { margin-top: 10px; font-size: .88rem; color: var(--texte-doux); display: flex; align-items: center; gap: .6em; }
.row__media::before { content: ""; position: absolute; top: -14px; left: 28px; right: -14px; height: 1px; background: var(--sable); }
.row__media::after { content: ""; position: absolute; top: 28px; bottom: 30px; right: -14px; width: 1px; background: var(--sable); }
.row__n { font-family: var(--f-titre); font-stretch: 125%; font-weight: 620; font-size: .76rem; letter-spacing: .2em; color: var(--cuivre-texte); display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.row h3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); margin-bottom: 1rem; }
.row p { color: var(--texte-doux); }
.why { margin-top: 1.4rem; padding: 16px 18px; border-left: 2px solid var(--cuivre); background: rgba(232, 223, 209, .55); font-size: .98rem; line-height: 1.5; }
.why b { font-family: var(--f-titre); font-stretch: 112%; font-weight: 620; display: block; margin-bottom: 3px; font-size: .92rem; }
.section--pierre .why { background: rgba(246, 241, 232, .6); }
@media (max-width: 899px) {
  .row { grid-template-columns: 1fr; }
  .row:nth-child(even) .row__media { order: 0; }
  .row__media { margin-right: 14px; }
}

/* Détails en trois cartes photo */
.details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); list-style: none; }
.detail figure { margin: 0; }
.detail .frame { overflow: hidden; position: relative; }
.detail img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 1s var(--ease-out); }
.detail:hover img { transform: scale(1.04); }
.detail h3 { font-size: 1.2rem; margin: 18px 0 .45rem; display: flex; align-items: center; gap: .6em; }
.detail p { font-size: .98rem; color: var(--texte-doux); line-height: 1.5; }
@media (max-width: 899px) { .details { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .details { grid-template-columns: 1fr; } .detail img { aspect-ratio: 4 / 3.4; } }

/* Citation client intégrée */
.citation { margin: 0; padding: clamp(24px, 3vw, 36px); background: var(--ivoire); position: relative; }
.section--ink .citation, .on-dark .citation { background: var(--graphite-2); }
.citation::before { content: ""; position: absolute; left: 0; top: 0; width: 70px; height: 3px; background: var(--cuivre); }
.citation blockquote { margin: 0; font-style: italic; font-size: 1.16rem; line-height: 1.5; }
.citation figcaption { margin-top: 14px; font-size: .92rem; color: var(--texte-doux); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.on-dark .citation figcaption { color: var(--texte-clair-doux); }
.citation figcaption strong { font-family: var(--f-titre); font-stretch: 110%; color: inherit; font-weight: 620; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .duo { grid-template-columns: 1fr; } }

/* Mur en coupe : couches de plâtrerie (interactif) */
.couches { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.couches__svg { width: 100%; height: auto; }
.couches__svg .ly { cursor: pointer; transition: transform .6s var(--ease-out), opacity .4s; }
.couches__svg .ly-out { fill: none; stroke: var(--cuivre); stroke-width: 1.6; opacity: 0; transition: opacity .4s; }
.couches__svg .ly-n { font-family: var(--f-titre); font-stretch: 125%; font-size: 13px; font-weight: 620; letter-spacing: .1em; fill: var(--texte-doux); transition: fill .3s; }
.couches[data-on] .couches__svg .ly { opacity: .6; }
.couches[data-on="1"] .ly1, .couches[data-on="2"] .ly2, .couches[data-on="3"] .ly3, .couches[data-on="4"] .ly4, .couches[data-on="5"] .ly5 { opacity: 1; transform: translateY(-10px); }
.couches[data-on="1"] .ly1 .ly-out, .couches[data-on="2"] .ly2 .ly-out, .couches[data-on="3"] .ly3 .ly-out, .couches[data-on="4"] .ly4 .ly-out, .couches[data-on="5"] .ly5 .ly-out { opacity: 1; }
.couches[data-on="1"] .ly1 .ly-n, .couches[data-on="2"] .ly2 .ly-n, .couches[data-on="3"] .ly3 .ly-n, .couches[data-on="4"] .ly4 .ly-n, .couches[data-on="5"] .ly5 .ly-n { fill: var(--cuivre-texte); }
.couches .ly:hover { opacity: .85; }
.couches__list { list-style: none; border-top: 1px solid var(--joint); }
.couche { width: 100%; display: grid; grid-template-columns: 36px 1fr; gap: 2px 14px; align-items: start; padding: 16px 0; border: 0; border-bottom: 1px solid var(--joint); background: none; text-align: left; }
.couche__n { font-family: var(--f-titre); font-stretch: 125%; font-weight: 620; font-size: .78rem; letter-spacing: .14em; color: var(--texte-doux); padding-top: 4px; transition: color .3s; }
.couche b { font-family: var(--f-titre); font-stretch: 112%; font-weight: 620; font-size: 1.1rem; display: block; }
.couche span.d { grid-column: 2; display: block; font-size: .98rem; line-height: 1.5; color: var(--texte-doux); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s var(--ease), opacity .4s, margin .4s; }
.couche[aria-pressed="true"] .couche__n { color: var(--cuivre-texte); }
.couche[aria-pressed="true"] span.d { max-height: 12em; opacity: 1; margin-top: 4px; }
.couche:hover b { color: var(--cuivre-texte); }
@media (max-width: 899px) { .couches { grid-template-columns: 1fr; } }

/* Sens de pose (calepinage interactif) */
.pose { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.pose__plan { position: relative; margin: 0; background: var(--ivoire); padding: 14px; }
.pose__plan svg { width: 100%; height: auto; display: block; }
.pose__plan rect.pl { fill: #C8A57E; stroke: var(--ivoire); stroke-width: 3; transition: transform .7s var(--ease-out), opacity .5s; }
.pose__plan rect.pl.t2 { fill: #BD9670; } .pose__plan rect.pl.t3 { fill: #D2B28B; } .pose__plan rect.pl.t4 { fill: #B88F68; }
.pose__plan figcaption { font-size: .86rem; color: var(--texte-doux); margin-top: 10px; }
.pose__opts { display: flex; flex-wrap: wrap; gap: 8px; margin: 1.4rem 0; }
.pose__txt { min-height: 9.5em; }
.pose__txt h3 { font-size: 1.35rem; margin-bottom: .6rem; }
.pose__txt p { color: var(--texte-doux); }
@media (max-width: 899px) { .pose { grid-template-columns: 1fr; } .pose__txt { min-height: 0; } }

/* Questions fréquentes */
.faq { border-top: 1px solid var(--joint); }
.faq details { border-bottom: 1px solid var(--joint); }
.faq summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center;
  padding: 22px 0; font-family: var(--f-titre); font-stretch: 110%; font-weight: 600; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .x { transition: transform .45s var(--ease-out); }
.faq details[open] summary .x { transform: rotate(45deg); }
.faq summary:hover { color: var(--cuivre-texte); }
.faq .faq__a { padding: 0 0 24px; max-width: 46rem; color: var(--texte-doux); }
.faq details[open] .faq__a { animation: fadeUp .5s var(--ease-out) both; }
.faq-grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(30px, 5vw, 80px); }
@media (max-width: 899px) { .faq-grid { grid-template-columns: 1fr; } }

/* Bandeau d'appel en bas des pages */
.band { position: relative; overflow: hidden; background: var(--graphite); color: var(--ivoire); }
.band__bg { position: absolute; inset: 0; }
.band__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .32; background: var(--graphite); }
.band__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(24, 22, 19, .92) 30%, rgba(24, 22, 19, .55)); }
.band__in { position: relative; padding-block: clamp(70px, 8vw, 120px); display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: 26px 40px; align-items: end; }
.band h2 { max-width: 18ch; }
.band p { margin: 1rem 0 0; color: var(--texte-clair-doux); max-width: 36rem; }
@media (max-width: 760px) { .band__in { grid-template-columns: 1fr; align-items: start; } }

/* Intro deux colonnes */
.intro2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); }
.intro2 > div { padding-top: 26px; border-top: 1px solid var(--joint); position: relative; }
.intro2 > div::before { content: ""; position: absolute; left: 0; top: -1px; width: 60px; height: 1.5px; background: var(--cuivre); }
.intro2 h3 { font-size: 1.5rem; margin-bottom: .8rem; }
.intro2 p { color: var(--texte-doux); }
.intro2 ul { list-style: none; display: grid; gap: 8px; margin-top: 1rem; }
.intro2 li { display: flex; gap: .75em; align-items: center; }
@media (max-width: 760px) { .intro2 { grid-template-columns: 1fr; } }

/* Trois domaines (page sols) */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); list-style: none; }
.trio li { display: flex; flex-direction: column; }
.trio .frame { overflow: hidden; }
.trio img { width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; transition: transform 1s var(--ease-out); }
.trio li:hover img { transform: scale(1.04); }
.trio h3 { margin: 20px 0 .5rem; font-size: 1.3rem; }
.trio p { color: var(--texte-doux); font-size: 1rem; }
.trio ul { list-style: none; margin-top: .8rem; display: grid; gap: 6px; font-size: .98rem; }
.trio ul li { flex-direction: row; gap: .7em; align-items: center; }
@media (max-width: 899px) { .trio { grid-template-columns: 1fr; } .trio img { aspect-ratio: 4 / 3; } }

/* 19. Contact & formulaire ------------------------------------------------------------------------------------ */
.contact__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(36px, 5vw, 90px); align-items: start; }
.contact__intro h1 { font-size: var(--fs-h1-page); }
.contact__intro .lead { margin-top: 1.2rem; }
.juljan-card { margin-top: 2rem; padding: 26px; background: var(--pierre); position: relative; }
.juljan-card::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--cuivre) 80px, transparent 80px); }
.juljan-card__top { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; }
.juljan-card__top img { width: 54px; height: 54px; flex: none; }
.juljan-card__top b { display: block; font-family: var(--f-titre); font-stretch: 112%; font-weight: 640; font-size: 1.2rem; }
.juljan-card__top span { font-size: .95rem; color: var(--texte-doux); }
.juljan-card p { font-size: 1rem; color: var(--texte-doux); }
.juljan-card ul { list-style: none; display: grid; gap: 8px; margin-top: 14px; font-size: .98rem; }
.juljan-card li { display: flex; gap: .7em; align-items: center; }
.juljan-card .link-arrow { margin-top: 10px; }
.contact__slot:empty { display: none; }
.form { position: relative; background: var(--ivoire-2); padding: clamp(24px, 3.6vw, 48px); border: 1px solid var(--joint); scroll-margin-top: 100px; }
.form::before { content: ""; position: absolute; left: -1px; top: -1px; width: 120px; height: 3px; background: var(--cuivre); }
.form__head h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); }
.form__head p { margin-top: .6rem; font-size: .95rem; color: var(--texte-doux); }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 18px; margin-top: 26px; }
.f { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.f--full { grid-column: 1 / -1; }
.f label, .f legend { font-family: var(--f-titre); font-stretch: 108%; font-weight: 600; font-size: .9rem; padding: 0; }
.f .opt { font-family: var(--f-texte); font-weight: 450; color: var(--texte-doux); font-size: .88rem; }
.req { color: var(--cuivre-texte); }
.f input[type="text"], .f input[type="tel"], .f input[type="email"], .f input[type="number"], .f textarea, .f select {
  width: 100%; min-height: 52px; padding: 13px 14px; border: 1px solid #BDB09D; border-radius: 2px; background: #fff;
  font-size: 1.02rem; line-height: 1.4; transition: border-color .25s, box-shadow .25s;
}
.f textarea { min-height: 150px; resize: vertical; }
.f textarea.short { min-height: 92px; }
.f input:hover, .f textarea:hover, .f select:hover { border-color: var(--argile); }
.f input:focus, .f textarea:focus, .f select:focus { border-color: var(--graphite); box-shadow: 0 0 0 3px rgba(181, 104, 63, .28); outline: none; }
.f .hint { font-size: .88rem; color: var(--texte-doux); line-height: 1.4; }
.f .err { font-size: .9rem; color: #A3321E; font-weight: 560; min-height: 0; }
.f.is-invalid input, .f.is-invalid textarea, .f.is-invalid select { border-color: #A3321E; }
fieldset.f { border: 0; margin: 0; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.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: .55em; min-height: 46px; padding: 0 15px; border: 1px solid #BDB09D; background: #fff; font-size: .97rem; border-radius: 2px; transition: background-color .25s, color .25s, border-color .25s; }
.chip span::before { content: ""; width: 10px; height: 10px; flex: none;
  background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  color: var(--sable); transition: transform .4s var(--ease-out), color .25s; }
.chip input:hover + span { border-color: var(--argile); }
.chip input:checked + span { background: var(--graphite); color: var(--ivoire); border-color: var(--graphite); }
.chip input:checked + span::before { color: var(--cuivre-clair); transform: rotate(90deg); }
.chip input:focus-visible + span { outline: 2px solid var(--cuivre-texte); outline-offset: 2px; }
.f--file input[type="file"] { padding: 12px; min-height: 52px; border: 1px dashed #BDB09D; background: #fff; border-radius: 2px; width: 100%; font-size: .95rem; }
.f--file input[type="file"]::file-selector-button { font-family: var(--f-titre); font-weight: 600; border: 0; background: var(--pierre); padding: 9px 14px; margin-right: 12px; border-radius: 2px; cursor: pointer; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form__foot { margin-top: 26px; display: grid; gap: 16px; }
.form__summary { display: none; margin: 0; padding: 12px 14px; background: #F6E3DC; color: #7E2615; font-weight: 560; font-size: .95rem; border-left: 3px solid #A3321E; }
.form__summary.is-on { display: block; }
.form__demo { margin: 0; padding: 12px 14px; background: var(--pierre); font-size: .92rem; border-left: 3px solid var(--argile); }
.form__rgpd { margin: 0; font-size: .88rem; color: var(--texte-doux); line-height: 1.5; }
.form button[type="submit"] { min-width: 260px; }
@media (max-width: 899px) { .contact__grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .form__grid { grid-template-columns: 1fr; }
  .form button[type="submit"] { width: 100%; min-width: 0; }
  .form { margin-inline: calc(var(--gutter) * -1); border-left: 0; border-right: 0; }
}
.after { list-style: none; counter-reset: a; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.after li { counter-increment: a; padding-top: 18px; border-top: 1px solid var(--joint); }
.after li::before { content: "0" counter(a); display: block; font-family: var(--f-titre); font-stretch: 125%; font-weight: 620; font-size: .74rem; letter-spacing: .18em; color: var(--cuivre-texte); margin-bottom: 8px; }
.after b { font-family: var(--f-titre); font-stretch: 110%; font-weight: 620; display: block; margin-bottom: 4px; }
.after p { font-size: .98rem; color: var(--texte-doux); }
@media (max-width: 760px) { .after { grid-template-columns: 1fr; } }

/* 20. Pied de page, barre mobile, retour en haut ---------------------------------------------------------- */
.ft { position: relative; background: var(--graphite); color: var(--texte-clair); padding-top: clamp(64px, 7vw, 100px); overflow: hidden; }
.ft__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 36px; }
.ft__brand img { width: 230px; height: auto; }
.ft__brand p { margin-top: 18px; color: var(--texte-clair-doux); font-size: .98rem; max-width: 22rem; }
.ft h2 { font-family: var(--f-titre); font-stretch: 125%; font-weight: 600; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--cuivre-clair); margin-bottom: 16px; }
.ft ul { list-style: none; display: grid; gap: 9px; font-size: .98rem; }
.ft a { text-decoration: none; color: var(--texte-clair); }
.ft a:hover { text-decoration: underline; }
.ft li span.small { color: var(--texte-clair-doux); }
.ft__plat a { display: inline-flex; gap: .55em; align-items: center; }
.ft__plat svg { width: 14px; height: 14px; color: var(--texte-clair-doux); }
.ft__bottom { margin-top: clamp(48px, 6vw, 80px); padding-block: 24px 30px; border-top: 1px solid rgba(246, 241, 232, .14); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 30px; font-size: .9rem; color: var(--texte-clair-doux); }
.ft__bottom ul { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.ft__bottom a { color: var(--texte-clair-doux); }
.ft__joint { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(246, 241, 232, .1); }
.ft__joint::after { content: ""; position: absolute; left: var(--gutter); top: 0; width: 160px; height: 1.5px; background: var(--cuivre); }
@media (max-width: 960px) { .ft__grid { grid-template-columns: 1fr 1fr; } .ft__brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .ft__grid { grid-template-columns: 1fr; } }

.mbar {
  position: fixed; z-index: 45; left: 0; right: 0; bottom: 0;
  display: none; grid-template-columns: 1fr 1.4fr; gap: 8px;
  padding: 10px var(--gutter) max(10px, env(safe-area-inset-bottom));
  background: rgba(246, 241, 232, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 -1px 0 rgba(31, 29, 26, .1);
  transform: translateY(110%); transition: transform .45s var(--ease-out);
}
.mbar.is-on { transform: none; }
.mbar a { min-height: 50px; display: flex; align-items: center; justify-content: center; gap: .55em; text-decoration: none; font-family: var(--f-titre); font-stretch: 110%; font-weight: 620; font-size: .95rem; border-radius: 2px; }
.mbar a svg { width: 18px; height: 18px; }
.mbar__real { border: 1.5px solid rgba(31, 29, 26, .3); color: var(--graphite); }
.mbar__devis { background: var(--cuivre-texte); color: var(--ivoire); }
@media (max-width: 760px) { .mbar { display: grid; } body { padding-bottom: 0; } }

.totop {
  position: fixed; z-index: 44; right: max(16px, env(safe-area-inset-right)); bottom: 22px;
  width: 54px; height: 54px; padding: 0; border: 0; border-radius: 2px;
  background: var(--graphite); color: var(--ivoire);
  display: grid; place-items: center;
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .4s var(--ease), transform .45s var(--ease-out), visibility .4s, background-color .3s;
  box-shadow: 0 14px 30px -16px rgba(31, 29, 26, .7);
}
.totop.is-on { opacity: 1; visibility: visible; transform: none; }
.totop:hover { background: var(--graphite-3); }
.totop svg { grid-area: 1 / 1; }
.totop__frame { width: 54px; height: 54px; }
.totop__frame rect.track { fill: none; stroke: rgba(246, 241, 232, .14); stroke-width: 2; }
.totop__frame rect.prog { fill: none; stroke: var(--cuivre-clair); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0)); }
.totop__joint { width: 54px; height: 54px; }
.totop__joint line { stroke: var(--cuivre-clair); stroke-width: 1.4; opacity: .7; transform-origin: center; transition: transform .5s var(--ease-out); }
.totop__arrow { width: 18px; height: 18px; position: relative; z-index: 1; transition: transform .45s var(--ease-out); background: var(--graphite); padding: 1px; }
.totop:hover .totop__arrow { transform: translateY(-3px); }
.totop:hover .totop__joint line { transform: scaleY(1.25); }
@media (max-width: 760px) { .totop { bottom: calc(82px + env(safe-area-inset-bottom)); width: 48px; height: 48px; } .totop__frame, .totop__joint { width: 48px; height: 48px; } }

/* 21. Pages légales, merci, 404, lightbox ---------------------------------------------------------------------- */
.legal { padding-top: calc(var(--hd-h) + 48px); padding-bottom: var(--section); }
.legal h1 { font-size: var(--fs-h1-page); margin-bottom: 1.2rem; }
.legal h2 { font-size: clamp(1.35rem, 1.15rem + .8vw, 1.8rem); margin: 2.6rem 0 1rem; padding-top: 1.6rem; border-top: 1px solid var(--joint); }
.legal h3 { font-size: 1.15rem; margin: 1.6rem 0 .6rem; }
.legal p, .legal li { color: #3E3832; }
.legal ul { padding-left: 1.2em; display: grid; gap: 6px; margin-bottom: 1em; }
.legal dl { display: grid; grid-template-columns: minmax(150px, max-content) 1fr; gap: 10px 24px; margin: 0 0 1em; }
.legal dt { font-family: var(--f-titre); font-stretch: 108%; font-weight: 600; font-size: .95rem; }
.legal dd { margin: 0; }
.legal .todo { display: inline-block; padding: 1px 8px; background: var(--pierre); border-left: 2px solid var(--argile); font-size: .95em; }
@media (max-width: 560px) { .legal dl { grid-template-columns: 1fr; gap: 2px; } .legal dd { margin-bottom: 10px; } }

.solo { min-height: 100svh; display: grid; align-items: center; padding-top: calc(var(--hd-h) + 30px); padding-bottom: 60px; position: relative; overflow: hidden; }
.solo h1 { font-size: var(--fs-h1-page); max-width: 18ch; }
.solo .lead { margin-top: 1.2rem; max-width: 36rem; }
.solo .btn-row { margin-top: 2rem; }
.solo__plan { position: absolute; right: -40px; top: 50%; width: min(48vw, 560px); transform: translateY(-50%); z-index: -1; opacity: .9; }
.solo__plan rect { fill: none; stroke: var(--joint); stroke-width: 1.2; }
.solo__plan rect.off { stroke: var(--cuivre); stroke-width: 1.6; animation: offTile 4.5s var(--ease-in-out) infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes offTile { from { transform: rotate(0) translate(0, 0); } to { transform: rotate(7deg) translate(10px, -8px); } }
@media (max-width: 760px) { .solo__plan { width: 90vw; top: auto; bottom: -10%; right: -20%; transform: none; opacity: .5; } }

.lb { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(18, 16, 14, .96); color: var(--ivoire); }
.lb[open] { display: grid; grid-template-rows: auto 1fr auto; animation: fadeIn .3s var(--ease) both; }
.lb::backdrop { background: rgba(18, 16, 14, .8); }
.lb__top { display: flex; justify-content: space-between; align-items: center; padding: 14px var(--gutter); }
.lb__count { font-family: var(--f-titre); font-stretch: 118%; font-weight: 600; font-size: .82rem; letter-spacing: .14em; }
.lb__stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 72px; }
.lb__stage img { max-width: 100%; max-height: calc(100svh - 170px); width: auto; height: auto; object-fit: contain; background: transparent; }
.lb__stage img.is-swap { animation: lbSwap .45s var(--ease-out) both; }
@keyframes lbSwap { from { opacity: 0; transform: translateX(var(--dir, 0)); } to { opacity: 1; transform: none; } }
.lb__btn { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid rgba(246, 241, 232, .3); background: rgba(18, 16, 14, .6); color: var(--ivoire); border-radius: 2px; transition: border-color .3s, background-color .3s; }
.lb__btn:hover { border-color: var(--ivoire); background: rgba(246, 241, 232, .08); }
.lb__btn svg { width: 20px; height: 20px; }
.lb__prev, .lb__next { position: absolute; top: 50%; transform: translateY(-50%); }
.lb__prev { left: 12px; } .lb__next { right: 12px; }
.lb__cap { margin: 0; padding: 14px var(--gutter) max(18px, env(safe-area-inset-bottom)); text-align: center; font-size: 1rem; color: #E2DAD0; }
.lb__cap small { display: block; margin-top: 2px; color: var(--texte-clair-doux); font-size: .86rem; }
@media (max-width: 640px) {
  .lb__stage { padding: 0 8px; }
  .lb__prev, .lb__next { top: auto; bottom: -62px; transform: none; }
  .lb__prev { left: var(--gutter); } .lb__next { right: var(--gutter); }
  .lb__cap { padding-inline: 80px; }
}

/* 22. Apparitions & animations --------------------------------------------------------------------------------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes drawX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes drawY { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Les effets ne s'appliquent qu'avec JavaScript actif : sans JS, tout est visible. */
.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease-out), transform 1s var(--ease-out); transition-delay: var(--d, 0s); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
/* Images : le conteneur est observé, l'image se dévoile à l'intérieur (un clip-path sur la cible bloquerait l'observateur). */
.js [data-reveal="img"] { opacity: 1; transform: none; }
.js [data-reveal="img"] > img { clip-path: inset(0 0 100% 0); transform: scale(1.08); transition: clip-path 1.2s var(--ease-in-out), transform 1.6s var(--ease-out); transition-delay: var(--d, 0s); }
.js [data-reveal="img"].is-in > img { clip-path: inset(0 0 0 0); transform: none; }
.js [data-reveal="img"] > .artisan__attente { clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--ease-in-out); transition-delay: var(--d, 0s); }
.js [data-reveal="img"].is-in > .artisan__attente { clip-path: inset(0 0 0 0); }
.js [data-reveal="fade"] { transform: none; }
.js .split-words .w { display: inline-block; opacity: 0; transform: translateY(.45em); transition: opacity .7s var(--ease-out), transform .8s var(--ease-out); transition-delay: calc(var(--i, 0) * 45ms); }
.js .split-words.is-in .w { opacity: 1; transform: none; }
.js .calep > div { clip-path: inset(0 0 100% 0); transition: clip-path 1s var(--ease-in-out); }
.js .calep > div:nth-child(2) { transition-delay: .18s; }
.js .calep > div:nth-child(3) { transition-delay: .32s; }
.js .calep.is-in > div { clip-path: inset(0 0 0 0); }
.js .calep::after { transform: scaleX(0); transition: transform 1.2s .5s var(--ease-out); }
.js .calep.is-in::after { transform: scaleX(1); }
.js .calep__cap { opacity: 0; transition: opacity .8s .9s; }
.js .calep.is-in .calep__cap { opacity: 1; }
.js .section-joint .wrap::after { transform: scaleX(0); transition: transform 1.2s var(--ease-out); }
.js .section-joint.is-in .wrap::after { transform: scaleX(1); }
.js .section-joint .x { opacity: 0; transform: rotate(-90deg) scale(.4); transition: opacity .5s .8s, transform .7s .8s var(--ease-out); }
.js .section-joint.is-in .x { opacity: 1; transform: none; }
.js .eyebrow[data-reveal]::before { transform: scaleX(0); transition: transform .9s .15s var(--ease-out); }
.js .eyebrow[data-reveal].is-in::before { transform: scaleX(1); }
.js .reals .shot, .js .gallery-tile-anim { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); transition-delay: calc(var(--k, 0) * 70ms); }
.js .reals.is-in .shot { opacity: 1; transform: none; }

/* 23. Mouvement réduit ------------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js [data-reveal], .js [data-reveal="img"] > img, .js [data-reveal="img"] > .artisan__attente, .js .split-words .w, .js .calep > div, .js .reals .shot { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .js .calep::after, .js .section-joint .wrap::after, .js .eyebrow[data-reveal]::before { transform: none !important; }
  .js .calep__cap, .js .section-joint .x { opacity: 1 !important; transform: none !important; }
  .scroll-cue i::after { display: none; }
  .solo__plan rect.off { animation: none; transform: rotate(5deg); }
  .brut__frame img { transition: none; }
}

/* Impression : version sobre */
@media print {
  .hd, .menu, .mbar, .totop, .lb, .hero__media, .hero__veil, .band__bg { display: none !important; }
  body { background: #fff; color: #000; }
  .hero, .section--ink, .section--ink2, .ft, .band { background: #fff !important; color: #000 !important; }
}

/* Variantes de grilles photo (pages métiers) */
.reals.reals--p, .reals.reals--ext { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; }
.reals.reals--ext { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.reals.reals--p > *, .reals.reals--ext > * { grid-column: auto; grid-row: auto; aspect-ratio: 3 / 4; }
.reals.reals--p > :nth-child(1), .reals.reals--p > :nth-child(5) { grid-column: span 2; aspect-ratio: auto; }
@media (max-width: 899px) {
  .reals.reals--p, .reals.reals--ext { grid-template-columns: 1fr 1fr; }
  .reals.reals--p > :nth-child(1), .reals.reals--p > :nth-child(5) { grid-column: 1 / -1 !important; aspect-ratio: 16 / 10; }
  .reals.reals--ext > :nth-child(1) { grid-column: 1 / -1 !important; aspect-ratio: 4 / 4.2; }
}
.dip h2, .pose h2 { margin-bottom: 1.2rem; }
.pose__plan rect.pl { rx: 1.5; }
@media (max-width: 960px) { .avis__tab b { white-space: nowrap; font-size: .9rem; } .avis__list { overflow-x: auto; scrollbar-width: none; } }