/* Brin de Stef, maquette Didone chorégraphiée. Feuille de style du système.
   Chargée par TOUTES les pages. Le pied de page complet vit ici, une seule
   fois, plutôt que d'être stylé neuf fois dans neuf compléments. */

/* ---------------------------------------------------------------- TOKENS */
:root {
  /* primitives, palette Herbier de Provence (validée) */
  --sand-50:#F7F2E9; --sand-100:#F0E7D6; --sand-200:#E5D9C2; --sand-300:#D8C8AB;
  --bark-900:#2A2119; --bark-700:#574636; --bark-600:#6F5D45; --bark-500:#857258; --fig-950:#211E15;
  --clay-500:#B34733; --clay-600:#963829; --clay-100:#F3DDD3;
  --olive-200:#C7CDAE; --olive-600:#5E6B44;

  /* sémantiques */
  --surface-page:var(--sand-50);
  --surface-raised:var(--sand-100);
  --surface-shell:var(--clay-100);
  --surface-deep:var(--fig-950);
  --ink:var(--bark-900);
  --ink-muted:var(--bark-700);
  /* Révision 2026-09-14 : --ink-faint pointait sur --bark-500 (#857258), qui
     ne donne que 4,14:1 sur le sable. Or ce token habille presque toujours du
     mobilier de 10,5 px (fil d'Ariane, légendes, aides de formulaire, mentions
     de tunnel) : c'est la taille qui a le plus besoin de contraste, et c'est
     elle qui en avait le moins. Il pointe maintenant sur --bark-600, un cran
     plus sombre à teinte et saturation constantes (H 34, S 23 %), soit
     5,66:1 sur le sable, 5,09:1 sur le papier, 4,83:1 sur la coquille.
     --bark-500 reste dans la palette, il n'est simplement plus porteur de
     texte. Aucun usage de ce token sur fond sombre, vérifié sur les 8 feuilles. */
  --ink-faint:var(--bark-600);
  --ink-on-deep:var(--sand-50);
  --ink-on-deep-muted:rgba(247,242,233,.62);
  --accent:var(--clay-500);
  --accent-strong:var(--clay-600);
  --on-accent:var(--sand-50);
  --hairline:#E0D2B8;
  --hairline-deep:rgba(247,242,233,.16);

  /* mobilier typographique */
  --serif:"Bodoni Moda",'Didot','Bodoni MT',Georgia,serif;
  --script:"Caveat",'Segoe Script',cursive;
  --ease:cubic-bezier(.16,1,.3,1);

  --gut:clamp(20px,5vw,64px);
  --maxw:1360px;
}

/* ------------------------------------------------------------------ BASE */
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--surface-page); color:var(--ink);
  font-family:var(--serif); font-weight:400; font-size:17px; line-height:1.7;
  font-optical-sizing:auto; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
h1,h2,h3 { margin:0; font-weight:500; text-wrap:balance; }
p { margin:0 0 1em; text-wrap:pretty; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

.wrap { max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.furniture {
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  font-weight:500; line-height:1.4; color:var(--ink-muted);
}
.script { font-family:var(--script); font-weight:400; letter-spacing:0; }
.tab { font-variant-numeric:tabular-nums; }

/* ------------------------------------------------------------------- NAV */
.nav {
  position:relative; z-index:6; display:flex; align-items:baseline;
  justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding-block:22px 18px;
}
.nav .mark { font-size:15px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; }
.nav ul { display:flex; gap:clamp(14px,2.4vw,30px); list-style:none; margin:0; padding:0; flex-wrap:wrap; align-items:baseline; }
.nav a { padding-block:4px; border-bottom:1px solid transparent; }
.nav a:hover { border-bottom-color:var(--accent); }

/* ----------------------------------------------------------- STAGES /pin */
.stage { position:relative; }
.pin {
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid; place-items:center;
}
.pin .shot {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; will-change:transform;
}

/* -------------------------------------------------------- STAGE 1 : hero */
#stage-hero { height:240svh; }
#stage-hero .pin { background:var(--surface-page); }
#stage-hero .shot {
  mix-blend-mode:multiply;
  /* correction provisoire : les prises de vue actuelles sont froides et
     sombres. À supprimer dès que les vraies natures mortes arrivent, la
     correction doit alors être cuite dans le fichier image. */
  filter:sepia(.34) saturate(.68) brightness(1.28) contrast(.86);
  transform:scale(calc(1.04 + .07 * var(--p,0))) translateY(calc(var(--p,0) * -3%));
  transform-origin:50% 60%;
}
.wash {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:rgba(247,242,233,.34);
}
.hero-type {
  position:relative; z-index:2; text-align:center; width:100%;
  padding-inline:var(--gut);
  transform:translateY(calc(var(--p,0) * -46px));
  opacity:calc(1 - var(--p,0) * 1.35);
}
.hero-sur { font-family:var(--script); font-size:clamp(1.35rem,3vw,2.3rem); color:var(--accent); margin:0 0 .1em; transform:rotate(-1.5deg); }
.wordmark {
  font-weight:600; line-height:.8; letter-spacing:-.05em; white-space:nowrap;
  /* 12 signes, avance moyenne Didone environ .60em */
  font-size:min(clamp(3.5rem,34vw,20rem), calc(88vw / (12 * .60)));
}
.hero-bands {
  position:absolute; z-index:3; left:0; right:0; bottom:0;
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--hairline);
  color:var(--bark-900);
}
.hero-bands span { padding:14px var(--gut); }
.hero-bands span + span { border-left:1px solid var(--hairline); }

/* ---------------------------------------------------- BANDE 1 : coquille */
.band-shell { background:var(--surface-shell); padding-block:clamp(72px,10vw,140px); position:relative; }

.decl-layout {
  display:grid; grid-template-columns:minmax(240px,380px) 1fr;
  gap:clamp(36px,6vw,80px); align-items:stretch;
}
.decl-portrait {
  margin:0; overflow:hidden; min-height:100%;
  border:1px solid var(--hairline);
}
.decl-portrait img { width:100%; height:100%; object-fit:cover; object-position:50% 22%; }

.declaration {
  font-size:clamp(1.9rem,4.2vw,3.4rem); line-height:1.06; letter-spacing:-.03em;
  max-width:19ch; margin:0 0 .5em;
}
.declaration em { font-style:italic; color:var(--accent); }
.sign-script {
  font-family:var(--script); font-size:clamp(1.5rem,3.4vw,2.6rem);
  color:var(--accent); transform:rotate(-2deg); display:inline-block; margin-bottom:clamp(32px,5vw,64px);
}
.cols3 { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,56px); }
.cols3 h3 { font-size:.95rem; font-weight:600; letter-spacing:.06em; margin-bottom:.4em; }
.cols3 p { font-size:1rem; line-height:1.65; color:var(--ink-muted); margin:0; }

@media (max-width:900px) {
  .decl-layout { grid-template-columns:1fr; }
  .decl-portrait { max-width:320px; aspect-ratio:4/5; min-height:0; }
}

/* ------------------------------------------------- STAGE 2 : révélation */
#stage-reveal { height:260svh; }
#stage-reveal .pin { background:var(--surface-page); }
#stage-reveal .shot {
  filter:sepia(.3) saturate(.7) brightness(1.18) contrast(.9);
  clip-path:inset(0 0 calc((1 - var(--p,0)) * 100%) 0);
}
.reveal-title {
  position:absolute; z-index:2; left:0; right:0; top:50%;
  transform:translateY(-50%); text-align:center; padding-inline:var(--gut);
  color:#fff; mix-blend-mode:difference;
  font-size:clamp(2.2rem,8.2vw,6.4rem); line-height:.94; letter-spacing:-.045em;
  opacity:calc(1 - max(0, (var(--p,0) - .82)) * 5.5);
}
.reveal-cap {
  position:absolute; z-index:3; left:var(--gut); bottom:clamp(24px,5vh,56px);
  max-width:34ch; color:var(--sand-50);
  opacity:clamp(0, calc((var(--p,0) - .45) * 4), 1);
}
.reveal-cap .furniture { color:var(--sand-50); }
.reveal-cap p { font-size:.95rem; margin:.4em 0 0; color:rgba(247,242,233,.92); }

/* --------------------------------------------------- STAGE 3 : le geste */
#stage-gesture { height:280svh; background:var(--surface-deep); }
#stage-gesture .pin {
  background:var(--surface-deep); color:var(--ink-on-deep);
  display:grid; align-items:center; justify-items:stretch;
  grid-template-columns:1.05fr .95fr; gap:clamp(32px,6vw,90px);
  padding:clamp(40px,8vh,96px) var(--gut);
}
.gesture-title { font-size:clamp(1.9rem,4.4vw,3.4rem); line-height:1.02; letter-spacing:-.03em; margin-bottom:clamp(28px,4vw,52px); }
.gesture-title em { font-style:italic; color:var(--clay-100); }
.steps { list-style:none; margin:0; padding:0; border-top:1px solid var(--hairline-deep); }
.steps li {
  display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:16px;
  padding:clamp(12px,2vh,20px) 0; border-bottom:1px solid var(--hairline-deep);
  opacity:.28; transition:opacity .5s var(--ease);
}
.steps li.lit { opacity:1; }
.steps .idx { font-size:.85rem; color:var(--accent); letter-spacing:.1em; font-variant-numeric:tabular-nums; }
.steps .name { font-size:clamp(1.05rem,1.9vw,1.35rem); font-weight:600; letter-spacing:-.01em; }
.steps .dur { font-size:.9rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-on-deep-muted); font-variant-numeric:tabular-nums; }
.gesture-media { position:relative; }
.gesture-frame { aspect-ratio:4/5; overflow:hidden; background:var(--bark-700); }
.gesture-frame img {
  width:100%; height:100%; object-fit:cover;
  transform:scale(calc(1.08 - .08 * var(--p,0)));
}
.pastille {
  position:absolute; left:-14px; bottom:-14px; margin:0;
  background:var(--accent); color:var(--on-accent);
  padding:14px 18px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:500;
}

/* --------------------------------------------- BANDE 2 : les pièces */
.band-paper { background:var(--surface-raised); padding-block:clamp(72px,10vw,140px); }
.sec-head { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap; margin-bottom:clamp(32px,5vw,64px); }
.sec-head h2 { font-size:clamp(1.8rem,4vw,3rem); line-height:1.04; letter-spacing:-.03em; max-width:16ch; }
.sec-head .intro { max-width:38ch; color:var(--ink-muted); font-size:1rem; margin:0; }

/* index illustré : ajouter ou retirer un <article class="piece"> suffit,
   la grille se recompose seule, aucun CSS à retoucher. */
.pieces {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(240px,100%), 1fr));
  gap:clamp(30px,4vw,56px) clamp(20px,3vw,40px);
}
.piece { margin:0; }
.piece .frame { aspect-ratio:4/5; overflow:hidden; background:var(--sand-200); }
.piece .frame img {
  width:100%; height:100%; object-fit:cover;
  filter:sepia(.22) saturate(.8) brightness(1.1) contrast(.94);
  transition:transform .7s var(--ease);
}
.piece a:hover .frame img,
.piece a:focus-visible .frame img { transform:scale(1.04); }
.piece .line {
  display:grid; grid-template-columns:1fr auto; gap:6px 16px; align-items:baseline;
  border-top:1px solid var(--hairline); margin-top:14px; padding-top:12px;
}
.piece .pcat { grid-column:1 / -1; margin:0 0 2px; }
.piece .pname { font-size:1.05rem; font-weight:600; letter-spacing:-.01em; line-height:1.25; }
.piece .pval { font-size:1.05rem; font-weight:600; color:var(--accent); font-variant-numeric:tabular-nums; justify-self:end; }
.piece .pdesc { grid-column:1 / -1; font-style:italic; font-size:.9rem; line-height:1.5; color:var(--ink-muted); margin:2px 0 0; }
.piece a:hover .pname { color:var(--accent-strong); }

.shop-note {
  margin-top:clamp(36px,5vw,64px); padding-top:clamp(24px,3vw,36px);
  border-top:1px solid var(--hairline);
  display:flex; align-items:center; gap:clamp(16px,3vw,32px); flex-wrap:wrap;
}
.shop-note p { margin:0; max-width:46ch; color:var(--ink-muted); font-size:1rem; }
.btn {
  display:inline-block; background:var(--accent); color:var(--on-accent);
  padding:15px 28px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:500;
  transition:transform .25s var(--ease), background-color .25s var(--ease);
}
.btn:hover { background:var(--accent-strong); transform:translateY(-2px); }
.btn:active { transform:translateY(0); }

/* --------------------------------------------------------------- FAQ */
.band-faq { background:var(--surface-page); padding-block:clamp(72px,10vw,140px); }
.faq { border-top:1px solid var(--hairline); max-width:78ch; }
.faq details { border-bottom:1px solid var(--hairline); }
.faq summary {
  list-style:none; cursor:pointer; padding:clamp(16px,2.4vw,24px) 40px clamp(16px,2.4vw,24px) 0;
  position:relative; font-size:clamp(1.05rem,2vw,1.3rem); letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary::before,
.faq summary::after {
  content:""; position:absolute; right:6px; top:50%; background:var(--accent);
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.faq summary::before { width:16px; height:1px; transform:translateY(-50%); }
.faq summary::after { width:1px; height:16px; right:13px; transform:translateY(-50%); }
.faq details[open] summary::after { opacity:0; transform:translateY(-50%) rotate(90deg); }
.faq details p { margin:0 0 clamp(16px,2.4vw,24px); max-width:62ch; color:var(--ink-muted); font-size:1rem; }

/* ================================================= PIED DE PAGE COMPLET */
/* Une seule définition pour les onze pages. Le HTML du pied diffère
   seulement par la profondeur des liens : depuis index.html, « pages/… » ;
   depuis pages/…, « ./… » et « ../index.html ». Rien d'autre ne change. */
.foot {
  background:var(--surface-deep); color:var(--ink-on-deep);
  padding-block:clamp(56px,8vw,104px) 28px;
}

/* tête du pied : monogramme, signature manuscrite, baseline */
.foot-top {
  display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,4vw,44px);
  align-items:center;
  padding-bottom:clamp(32px,5vw,52px);
}
.foot-logo {
  width:clamp(64px,9vw,104px); height:auto;
  /* le monogramme est la seule image du pied : il est posé petit, comme un
     cachet, jamais en enseigne. Fichier d'origine de la cliente. */
}
.foot .script {
  color:var(--clay-100); font-size:clamp(1.4rem,3vw,2.2rem);
  display:inline-block; transform:rotate(-1deg); margin:0 0 .2em;
}
.foot-baseline {
  margin:0; max-width:46ch; color:var(--ink-on-deep-muted);
  font-size:1rem; line-height:1.65;
}

/* quatre colonnes de liens réels */
.foot-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(24px,3vw,48px);
  border-top:1px solid var(--hairline-deep); padding-top:clamp(28px,4vw,40px);
}
.foot-grid h2 {
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  font-weight:500; color:var(--ink-on-deep); margin:0 0 14px;
}
.foot-grid ul { list-style:none; margin:0; padding:0; }
.foot-grid li { margin-bottom:9px; }
.foot-grid a,
.foot-grid p {
  margin:0; color:var(--ink-on-deep-muted); font-size:.95rem; line-height:1.5;
  border-bottom:1px solid transparent; padding-bottom:1px;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.foot-grid a:hover { color:var(--ink-on-deep); border-bottom-color:var(--accent); }
/* le brin garance, détail signature, devant la famille du catalogue */
.foot-grid .brin { position:relative; padding-left:20px; display:inline-block; }
.foot-grid .brin::before {
  content:""; position:absolute; left:0; top:.72em;
  width:11px; height:1px; background:var(--accent);
}

/* ligne de bas de pied */
.foot-bottom {
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px clamp(20px,4vw,40px); flex-wrap:wrap;
  border-top:1px solid var(--hairline-deep);
  margin-top:clamp(32px,5vw,52px); padding-top:22px;
}
.foot-bottom p { margin:0; }
.foot-legal {
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-on-deep-muted);
}
.foot-credit { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-on-deep-muted); }
.foot-credit a { border-bottom:1px solid var(--hairline-deep); padding-bottom:1px; }
.foot-credit a:hover { color:var(--clay-100); border-bottom-color:var(--accent); }
.foot-up {
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-on-deep); border-bottom:1px solid var(--accent); padding-bottom:2px;
}
.foot-up:hover { color:var(--clay-100); }

/* ------------------------------------------------- RÉVÉLATIONS (JS off) */
[data-rev] { opacity:0; transform:translateY(18px); }
[data-rev].is-in {
  opacity:1; transform:none;
  transition:opacity .8s var(--ease) var(--d,0ms), transform .8s var(--ease) var(--d,0ms);
}
.w { display:inline-block; opacity:0; transform:translateY(.4em); }
.is-in .w {
  opacity:1; transform:none;
  transition:opacity .7s var(--ease) calc(var(--i,0) * 38ms), transform .7s var(--ease) calc(var(--i,0) * 38ms);
}

/* ------------------------------------------------------------ RESPONSIF */
@media (max-width:900px) {
  #stage-gesture .pin { grid-template-columns:1fr; align-content:center; gap:28px; }
  .gesture-media { max-width:60vw; }
  .cols3 { grid-template-columns:1fr; }
  .foot-grid { grid-template-columns:1fr 1fr; row-gap:32px; }
}
@media (max-width:700px) {
  .hero-bands { grid-template-columns:1fr; }
  .hero-bands span + span { border-left:0; border-top:1px solid var(--hairline); }
  .hero-bands span { padding-block:9px; }
  .gesture-media { max-width:none; }
  .gesture-frame { aspect-ratio:16/10; }
  .pastille { left:0; bottom:0; padding:10px 12px; }
  .foot-top { grid-template-columns:1fr; gap:18px; }
}
@media (max-width:520px) {
  body { font-size:16px; }
  .foot-grid { grid-template-columns:1fr; }
  .steps li { grid-template-columns:auto 1fr; row-gap:2px; }
  .steps .dur { grid-column:2; justify-self:start; }
}

/* -------------------------------------------------- MOUVEMENT RÉDUIT */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .stage { height:auto !important; }
  .pin { position:static; height:auto; min-height:70svh; padding-block:64px; }
  #stage-hero .shot,
  #stage-reveal .shot,
  .gesture-frame img { transform:none; }
  /* piège 1 : sans scrub, le clip-path masquerait l'image */
  #stage-reveal .shot { clip-path:none; }
  /* piège 2 : sans scrub, le titre en difference disparaîtrait */
  .reveal-title { mix-blend-mode:normal; color:var(--sand-50); opacity:1; text-shadow:0 2px 18px rgba(33,30,21,.55); }
  .hero-type { transform:none; opacity:1; }
  .reveal-cap { opacity:1; }
  .steps li { opacity:1; }
  .piece .frame img { transition:none; }
  .piece a:hover .frame img,
  .piece a:focus-visible .frame img { transform:none; }
  .btn:hover { transform:none; }
  [data-rev], .w { opacity:1; transform:none; transition:none; }
}