/* 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(--encre); }
.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 : une colonne, un plan et son texte par rangée */
html:not(.anim) .stage:not(.index-stage) { display: grid; grid-template-columns: 100%; }
html:not(.anim) .textes { display: contents; }
html:not(.anim) .stage > .plan, html:not(.anim) .plan-txt { grid-column: 1; }
html:not(.anim) .stage > .plan:nth-child(1), html:not(.anim) .plan-txt:nth-child(1) { grid-row: 1; }
html:not(.anim) .stage > .plan:nth-child(2), html:not(.anim) .plan-txt:nth-child(2) { grid-row: 2; }
html:not(.anim) .stage > .plan:nth-child(3), html:not(.anim) .plan-txt:nth-child(3) { grid-row: 3; }
html:not(.anim) .stage > .plan:nth-child(4), html:not(.anim) .plan-txt:nth-child(4) { grid-row: 4; }
html:not(.anim) .plan-txt { position: relative; z-index: 4; align-self: end; }
/* crédits et petits textes posés sur une photo claire par endroits */
.plan-txt:not([data-ton="clair"]) { text-shadow: 0 0 24px rgba(10, 9, 8, .45); /* taste-skill-ignore: lisibilité du texte sur photo */ }
.plan-txt:not([data-ton="clair"]) .credit { color: var(--papier); text-shadow: 0 1px 2px rgba(10, 9, 8, .7), 0 0 16px rgba(10, 9, 8, .6); /* taste-skill-ignore: lisibilité du crédit sur photo */ }

/* 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; }
.demarche h3.t2 { font-weight: 600; margin-top: 56px; }
.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); flex-wrap: wrap; gap: 6px 16px; }
  .barre nav { gap: 6px 14px; flex-wrap: wrap; font-size: 15px; }
  .cadre img { object-position: var(--pos-m, var(--pos, 50% 50%)); }
  .plan-txt { padding-bottom: 56px; gap: 14px; }
  .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; }
  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; }
}
/* écran en hauteur (téléphone, tablette debout) : voile par le bas, photo de studio verticale, texte clair en haut */
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
  .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 */ }
  .cadre[data-cotes] img { object-position: var(--pos-m, var(--pos, 50% 50%)); }
  /* la pièce occupe toute la largeur : recul à peine marqué, centré, pour garder pièce et cotes dans l'écran */
  html.anim [data-cam="recul"] .cadre[data-cotes] { transform: scale(calc(1.03 - var(--l, 0) * .03)); transform-origin: 50% 60%; }
  .plan-txt[data-ton="clair"] { bottom: auto; top: 0; padding-top: 84px; padding-bottom: 0; }
  html:not(.anim) .plan-txt[data-ton="clair"] { align-self: start; }
  .cotes .hauteur { display: none; }
}