/* Chinode, maquette « film » : socle commun aux pages (accueil v5, œuvres, fiche d'une œuvre).
   Un plan photo plein écran par séquence, la caméra suit le défilement, typographie réduite.
   Sans script ou avec le mouvement réduit, les plans redeviennent des écrans fixes empilés. */
:root {
  --nuit: #0e0c0a;
  --papier: #f4f4f2;
  --clair: #efeeeb;
  --encre: #141311;
  --doux: #5f5b55;
  --brume: #b8b3ab;
  --marge: 40px;
  --t1: clamp(34px, 4.6vw, 76px);
  --t2: clamp(20px, 1.9vw, 28px);
  --corps: 18px;
  --petit: 16px;
  --face: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --sortie: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--nuit); color: var(--papier); }
body { font-family: var(--face); font-size: var(--corps); line-height: 1.5; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, blockquote, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.t1 { font-size: var(--t1); font-weight: 600; line-height: 1.02; letter-spacing: -0.025em; text-wrap: balance; }
.t2 { font-size: var(--t2); font-weight: 400; line-height: 1.35; }

/* barre, posée sur le premier plan */
.barre { position: absolute; top: 0; left: 0; right: 0; z-index: 20; display: flex; justify-content: space-between; align-items: baseline; padding: 28px var(--marge); color: var(--papier); font-size: var(--petit); font-weight: 600; }
.barre .marque { font-size: 20px; text-decoration: none; letter-spacing: -0.01em; }
.barre nav { display: flex; gap: 28px; }
.barre nav a { text-decoration: none; }
.barre nav a:hover, .barre nav a[aria-current] { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

/* plans : par défaut, des écrans empilés et fixes, le texte sur sa photo */
.stage { position: relative; overflow: hidden; background: var(--nuit); }
.plan { position: relative; height: 100svh; min-height: 560px; overflow: hidden; isolation: isolate; }
.cadre { position: absolute; inset: 0; z-index: 0; }
.cadre img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.plan[data-ton="sombre"]::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(10, 9, 8, .78) 0, rgba(10, 9, 8, .42) 38%, rgba(10, 9, 8, 0) 70%); /* taste-skill-ignore: voile neutre sous le texte, sur photo */ }
.plan[data-ton="sombre"]::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(10, 9, 8, .5) 0, rgba(10, 9, 8, 0) 24%); /* taste-skill-ignore: voile neutre sous la barre, sur photo */ }
/* voile bas seulement, pour une photo claire (mur blanc) qu'un voile latéral rendrait terne */
.plan[data-voile="bas"]::after { background: linear-gradient(0deg, rgba(10, 9, 8, .72) 0, rgba(10, 9, 8, .3) 30%, rgba(10, 9, 8, 0) 52%); /* taste-skill-ignore: voile neutre sous le texte, sur photo */ }
.plan[data-voile="bas"]::before { display: none; }
/* étalonnage doux des photos prises au mur blanc : exposition et balance des blancs seulement */
.etalonne { filter: brightness(.94) contrast(1.06) saturate(.92) sepia(.08); }
.textes { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.plan-txt { position: absolute; left: 0; bottom: 0; display: grid; gap: 18px; width: min(620px, 100%); padding: var(--marge); padding-bottom: clamp(48px, 11vh, 120px); pointer-events: auto; }
.plan-txt[data-ton="clair"] { color: var(--encre); }
.fiche { font-size: var(--petit); line-height: 1.5; max-width: 52ch; }
.credit { font-size: var(--petit); color: var(--brume); }
.plan-txt[data-ton="clair"] .credit { color: var(--doux); }
.bouton { justify-self: start; display: inline-block; padding: 15px 26px; background: var(--papier); color: var(--encre); font-size: var(--petit); font-weight: 600; text-decoration: none; }
.bouton:hover { background: #ffffff; }
.bouton:active { transform: translateY(1px); }
.page .bouton, .bouton.encre { background: var(--encre); color: var(--papier); }
.page .bouton:hover, .bouton.encre:hover { background: #000000; }
.lien { font-size: var(--petit); font-weight: 600; text-underline-offset: 5px; text-decoration-thickness: 1px; justify-self: start; }
.tarifs { display: grid; gap: 8px; font-size: var(--petit); max-width: 460px; }
.tarifs li { display: flex; justify-content: space-between; gap: 24px; }
.tarifs li span:last-child { font-weight: 600; white-space: nowrap; }
[data-off] { visibility: hidden; }

/* sans film, chaque texte reste sur sa photo */
html:not(.anim) .textes { position: static; }
html:not(.anim) .plan-txt { position: relative; margin-top: -100svh; height: 100svh; min-height: 560px; align-content: end; }

/* cotes de la fiche technique, tracées sur la photo de studio */
.cotes { position: absolute; overflow: visible; pointer-events: none; z-index: 2; }
.cotes path { fill: none; stroke: var(--encre); stroke-linecap: round; stroke-linejoin: round; stroke-width: calc(1.5px * var(--k, 1)); }
.cotes .rappel { stroke-width: calc(1px * var(--k, 1)); stroke-dasharray: calc(3px * var(--k, 1)) calc(5px * var(--k, 1)); opacity: .45; }
.cotes text { fill: var(--encre); font-family: var(--face); font-weight: 600; font-size: calc(15px * var(--k, 1)); }

/* pages claires */
.page { background: var(--clair); color: var(--encre); padding: 200px var(--marge) 160px; }
.demarche { display: grid; grid-template-columns: 1fr 1fr; gap: 72px 96px; }
.demarche .t2 { max-width: 40ch; margin-top: 28px; }
.citation { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.3; letter-spacing: -0.015em; max-width: 24ch; }
.citation footer { margin-top: 16px; font-size: var(--petit); color: var(--doux); letter-spacing: 0; }
.registres { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 64px 96px; }
.registres h3 { font-size: var(--petit); font-weight: 600; margin-bottom: 16px; }
.registres ul { display: grid; gap: 10px; font-size: var(--petit); }
.registres li { display: flex; justify-content: space-between; gap: 24px; }
.registres li span:last-child { color: var(--doux); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* index des œuvres : petite liste, grande image qui suit */
.index { position: relative; }
.index-stage { position: relative; background: var(--nuit); }
.index-tete { padding: 0 var(--marge); }
.index-liste { display: grid; gap: 0; padding: 0 var(--marge); }
.index-liste a { display: grid; gap: 4px; padding: 14px 0; text-decoration: none; }
.index-liste .nom { font-size: var(--t2); line-height: 1.25; }
.index-liste .quoi { font-size: var(--petit); color: var(--brume); }
.index-liste figure { margin-top: 16px; }
.index-liste figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: var(--pos, 50% 50%); }
.index-pied { padding: 40px var(--marge) 0; font-size: var(--petit); color: var(--brume); max-width: 60ch; }

/* fiche technique d'une œuvre */
.fiche-oeuvre { display: grid; grid-template-columns: 5fr 7fr; gap: 64px 96px; align-items: start; }
.fiche-oeuvre .t1 { margin-bottom: 20px; }
.donnees { display: grid; grid-template-columns: auto 1fr; gap: 14px 32px; font-size: var(--petit); }
.donnees dt { color: var(--doux); }
.donnees dd { margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; margin-top: 36px; }
.note { margin-top: 20px; font-size: var(--petit); color: var(--doux); max-width: 48ch; }
.autres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 160px; }
.autres h2 { grid-column: 1 / -1; }
.autres a { display: grid; gap: 14px; text-decoration: none; font-size: var(--petit); font-weight: 600; }
.autres img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: var(--pos, 50% 50%); transition: transform 700ms var(--sortie); }
.autres a:hover img { transform: scale(1.03); }
.autres figure { overflow: hidden; }

.contact { background: var(--nuit); color: var(--papier); padding: 160px var(--marge) 120px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px 96px; align-items: end; }
.contact .courriel { font-size: var(--t1); font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; text-decoration: none; display: inline-block; margin-top: 28px; }
.contact .courriel:hover { opacity: .75; }
.contact .infos { display: grid; gap: 14px; font-size: var(--petit); }
.pied { background: var(--nuit); color: var(--brume); padding: 0 var(--marge) 32px; display: flex; justify-content: space-between; gap: 24px; font-size: var(--petit); flex-wrap: wrap; }

/* ---------------- Le film (html.anim seulement) ---------------- */
html.anim .seq { height: calc((var(--h, 1) + 1) * 100svh); }
html.anim .seq > .stage { position: sticky; top: 0; height: 100svh; }
html.anim .plan { position: absolute; inset: 0; height: auto; min-height: 0; }
html.anim .plan + .plan { opacity: var(--r, 0); }
html.anim .plan-txt { opacity: var(--t, 1); transform: translate3d(0, calc((1 - var(--t, 1)) * 28px), 0); }
html.anim .plan-txt > :nth-child(2) { opacity: clamp(0, calc((var(--t, 1) - .2) * 1.25), 1); }
html.anim .plan-txt > :nth-child(3) { opacity: clamp(0, calc((var(--t, 1) - .4) * 1.67), 1); }
html.anim .plan-txt > :nth-child(4) { opacity: clamp(0, calc((var(--t, 1) - .55) * 2.2), 1); }
html.anim .cadre { will-change: transform; }
html.anim [data-cam="pousse"] .cadre { transform: scale(calc(1.04 + var(--l, 0) * .12)); }
html.anim [data-cam="glisse"] .cadre { transform: translate3d(calc(3% - var(--l, 0) * 6%), 0, 0) scale(1.1); }
html.anim [data-cam="recul"] .cadre { transform: scale(calc(1.2 - var(--l, 0) * .18)); transform-origin: 70% 55%; }
html.anim [data-cam="monte"] .cadre { transform: translate3d(0, calc(3% - var(--l, 0) * 6%), 0) scale(1.08); }
html.anim .cotes .cote { stroke-dasharray: 1; stroke-dashoffset: calc(1 - min(1, var(--l, 0) * 2.2)); }
html.anim .cotes .rappel, html.anim .cotes text { opacity: calc(min(1, var(--l, 0) * 3) * .9); }
html.anim .heros-txt { opacity: clamp(0, calc(1.2 - var(--p, 0) * 2.4), 1); transform: translate3d(0, calc(var(--p, 0) * -14vh), 0); }

/* l'index en film : la liste à gauche, l'image de l'œuvre active à droite, en fondu piloté par le défilement */
.index-images { display: none; }
@media (min-width: 761px) {
  html.anim .index-stage { display: grid; grid-template-columns: 38% 62%; }
  html.anim .index-gauche { grid-column: 1; align-self: center; display: grid; gap: 40px; position: relative; z-index: 2; }
  html.anim .index-liste figure { display: none; }
  html.anim .index-liste a { color: var(--brume); transition: color 400ms ease; }
  html.anim .index-liste li[data-actif] a { color: var(--papier); }
  html.anim .index-images { display: block; grid-column: 2; position: relative; height: 100svh; overflow: hidden; }
  html.anim .index-images figure { position: absolute; inset: 0; margin: 0; overflow: hidden; opacity: var(--r, 0); }
  html.anim .index-images figure:first-child { opacity: 1; }
  html.anim .index-images img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transform: scale(calc(1.1 - var(--l, 0) * .08)); }
  html.anim .index-pied { padding-top: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .heros-txt h1 .ligne { display: block; overflow: hidden; padding-bottom: .08em; }
  .heros-txt h1 .mot { display: inline-block; transform: translateY(105%); animation: monter 1100ms var(--sortie) 150ms forwards; }
  .heros-txt > p, .heros-txt > a { animation: lever 900ms var(--sortie) both; }
  .heros-txt > p { animation-delay: 700ms; }
  .heros-txt > a { animation-delay: 820ms; }
  @supports (animation-timeline: view()) {
    [data-entree] > *, .registres li, .donnees > *, .index-tete, .index-liste li, .index-pied { animation: entree linear both; animation-timeline: view(); animation-range: entry 5% entry 85%; }
  }
  .bouton, .lien, .barre nav a, .courriel { transition: background-color 200ms ease, opacity 180ms ease, transform 160ms var(--sortie); }
  .bouton:hover, .courriel:hover { transform: translateY(-2px); }
}
@keyframes monter { to { transform: translateY(0); } }
@keyframes lever { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes entree { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
  :root { --marge: 18px; }
  .barre { padding: 20px var(--marge); }
  .barre nav { gap: 16px; }
  .barre nav a:nth-child(n+3) { display: none; }
  .cadre img { object-position: var(--pos-m, var(--pos, 50% 50%)); }
  .plan[data-ton="sombre"]::after { background: linear-gradient(0deg, rgba(10, 9, 8, .86) 0, rgba(10, 9, 8, .5) 42%, rgba(10, 9, 8, 0) 74%); /* taste-skill-ignore: voile neutre sous le texte, sur photo */ }
  .plan-txt { padding-bottom: 56px; gap: 14px; }
  .plan-txt[data-ton="clair"] { bottom: auto; top: 0; padding-top: 84px; padding-bottom: 0; }
  .page { padding: 120px var(--marge); }
  .demarche, .registres, .contact, .fiche-oeuvre { grid-template-columns: 1fr; gap: 40px; }
  .contact { padding: 120px var(--marge) 72px; }
  .contact .courriel { overflow-wrap: anywhere; }
  .cotes .hauteur { display: none; }
  html.anim .index { height: auto; }
  html.anim .index > .stage { position: relative; height: auto; }
  .index-stage { padding: 120px 0 72px; }
  .index-liste { gap: 56px; }
  .autres { grid-template-columns: 1fr 1fr; margin-top: 96px; gap: 24px 16px; }
}