/* Sylvain Blanchoud — v4 « Salle par salle ».
   Chaque œuvre est accrochée sur son propre mur de couleur, comme dans les grands salons
   de musée. Tout le site prend la couleur du mur de l'œuvre regardée.
   Une seule famille : Archivo variable (graisse 100–900, chasse 62–125 %). */

@property --mur   { syntax: '<color>'; inherits: true; initial-value: #D4A43C; }
@property --encre { syntax: '<color>'; inherits: true; initial-value: #1b1508; }
@property --doux  { syntax: '<color>'; inherits: true; initial-value: #4a3b17; }
@property --filet { syntax: '<color>'; inherits: true; initial-value: #b88d2f; }

:root {
  --mur: #D4A43C; --encre: #1b1508; --doux: #4a3b17; --filet: #b88d2f;
  --papier: #f7f4ee;           /* le passe-partout reste blanc sur tous les murs */
  --g: clamp(16px, 3.2vw, 48px);
  --duree: 1100ms; --courbe: cubic-bezier(.2,.7,.15,1);
  color-scheme: light dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--mur); transition: --mur var(--duree) var(--courbe); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100svh; background: var(--mur); color: var(--encre);
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif; font-size: 17px; line-height: 1.5;
  font-variation-settings: normal; font-stretch: 100%;
  transition: --mur var(--duree) var(--courbe), --encre var(--duree) var(--courbe), --doux var(--duree) var(--courbe), --filet var(--duree) var(--courbe);
  -webkit-font-smoothing: antialiased; font-kerning: normal;
}
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--encre); outline-offset: 4px; }
::selection { background: var(--encre); color: var(--mur); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement { position: absolute; left: var(--g); top: -80px; z-index: 50; background: var(--encre); color: var(--mur); padding: 8px 14px; }
.evitement:focus { top: 8px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation: none !important; }
}

/* ------------------------------------------------------------ en-tête */
.tete {
  position: absolute; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 20px var(--g); pointer-events: none;
}
.tete > * { pointer-events: auto; }
.marque { font-weight: 800; font-stretch: 125%; letter-spacing: .02em; text-decoration: none; font-size: 15px; text-transform: uppercase; }
.marque span { font-weight: 300; }
.menu { display: flex; align-items: baseline; gap: clamp(12px, 2vw, 28px); list-style: none; margin: 0; padding: 0; font-size: 14px; font-stretch: 112%; white-space: nowrap; }
.menu a { text-decoration: none; }
.menu a:hover, .menu a[aria-current] { text-decoration: underline; }

/* ------------------------------------------------------------ la salle */
.salle {
  position: relative; min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr);
  grid-template-rows: 1fr auto; gap: 0 clamp(24px, 4vw, 72px);
  padding: 88px var(--g) 0;
}
.salle__cadre { grid-row: 1; display: flex; align-items: center; justify-content: center; min-height: 0; position: relative; }
.tirage {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  transition: opacity 700ms var(--courbe), transform 900ms var(--courbe);
}
.tirage { opacity: 0; transform: translateX(2.5%); pointer-events: none; }
.tirage.avant { transform: translateX(-2.5%); }
.tirage.actif { opacity: 1; transform: none; pointer-events: auto; }
.tirage__papier { background: var(--papier); padding: clamp(14px, 2.2vw, 34px); box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 30px 60px -30px rgba(0,0,0,.55), 0 8px 20px -10px rgba(0,0,0,.25); }
.tirage__papier img { max-height: calc(100svh - 300px); max-width: calc((100vw - 2 * var(--g) - clamp(24px, 4vw, 72px)) * 1.35 / 2.35 - 2 * clamp(14px, 2.2vw, 34px)); width: auto; height: auto; }
.tirage a { display: block; }
.salle .salle__cadre { container-type: size; touch-action: pan-y; }
.salle .tirage__papier { --pp: clamp(12px, 2.2vw, 34px); padding: var(--pp); }
/* l'image prend toute la place que le cadre lui laisse, quelle que soit sa taille d'origine */
.salle .tirage__papier img { max-width: none; max-height: none; height: auto;
  width: min(calc(100cqw - 2 * var(--pp) - 8px), calc((100cqh - 2 * var(--pp) - 28px) * var(--ar, 1.5)), 1500px); }
.tirage img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.tirage.tenu { transition: none !important; }

.salle__cartel { grid-row: 1; align-self: center; padding-bottom: 40px; container-type: inline-size; will-change: transform; }
.salle .titre { font-size: clamp(40px, min(7.2vw, 15.5cqi), 128px); }
.compteur { font-stretch: 125%; font-weight: 300; font-size: clamp(15px, 1.3vw, 18px); letter-spacing: .04em; font-variant-numeric: tabular-nums; margin: 0 0 18px; }
.compteur b { font-weight: 800; }
.titre {
  margin: 0 0 18px; font-weight: 800; line-height: .88; letter-spacing: -.02em;
  font-size: clamp(46px, 7.2vw, 128px); font-stretch: var(--chasse, 100%);
  overflow-wrap: anywhere; hyphens: manual;
  transition: font-stretch 520ms var(--courbe), opacity 380ms ease, font-weight 520ms var(--courbe);
}
.titre.souffle { font-stretch: 62%; opacity: 0; font-weight: 200; }
.sous { font-size: clamp(16px, 1.4vw, 20px); font-stretch: 112%; margin: 0 0 4px; color: var(--doux); }
.mur-nom { display: inline-flex; align-items: center; gap: 10px; margin: 22px 0 0; font-size: 13px; font-stretch: 112%; text-transform: uppercase; letter-spacing: .08em; color: var(--doux); }
.mur-nom i { width: 28px; height: 28px; background: var(--mur); border: 1px solid var(--encre); display: inline-block; }
.mur-pourquoi { margin: 6px 0 0; font-size: 14px; color: var(--doux); max-width: 34ch; }
.actions { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 30px; }
.bouton { display: inline-flex; align-items: center; gap: 10px; background: var(--encre); color: var(--mur); text-decoration: none; padding: 14px 22px; font-weight: 700; font-stretch: 115%; font-size: 15px; letter-spacing: .01em; transition: background-color .2s; }
.bouton:hover { text-decoration: underline; }
.lien { font-stretch: 112%; font-size: 15px; }
.prix { font-size: 14px; color: var(--doux); font-variant-numeric: tabular-nums; }

/* le nuancier : un éventail de 13 bandes de couleur, une par mur */
.nuancier { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: flex-end; gap: 0; height: 92px; margin: 0 calc(-1 * var(--g)); list-style: none; padding: 0; }
.nuancier li { flex: 1; height: 100%; display: flex; }
.nuancier button {
  all: unset; box-sizing: border-box; cursor: pointer; flex: 1; align-self: flex-end; height: 44px;
  background: var(--c); color: var(--t); position: relative;
  border-top: 1px solid rgba(0,0,0,.18);
  transition: height 520ms var(--courbe);
  display: flex; align-items: flex-start; padding: 8px 10px; font-size: 11px; font-stretch: 125%; font-weight: 700; letter-spacing: .04em;
}
.nuancier button:focus-visible { height: 70px; }
@media (hover: hover) { .nuancier button:hover { height: 70px; } .nuancier button:hover .nuancier__nom { opacity: .9; } }
.nuancier button[aria-current="true"] { height: 92px; }
.nuancier button span { opacity: .9; }
.nuancier button:focus-visible { outline-offset: -4px; outline-color: var(--t); }
.nuancier__nom { position: absolute; left: 10px; bottom: 8px; font-weight: 400; font-stretch: 100%; letter-spacing: 0; opacity: 0; transition: opacity .3s; white-space: nowrap; }
.nuancier button[aria-current="true"] .nuancier__nom { opacity: .9; }

/* ------------------------------------------------------------ sections */
.section { padding: clamp(72px, 10vw, 160px) var(--g); }
.section--sombre { background: #111; color: #f3efe7; --encre: #f3efe7; --doux: #b9b2a5; --filet: #3a3a3a; }
.section--jaune { background: #D4A43C; color: #1b1508; --encre: #1b1508; --doux: #4a3b17; --filet: #b88d2f; }
.surtitre { font-size: 13px; font-stretch: 125%; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; margin: 0 0 22px; }
.gros { font-size: clamp(40px, 6.4vw, 112px); font-weight: 800; line-height: .9; letter-spacing: -.02em; margin: 0 0 32px; font-stretch: 78%; max-width: 14ch; }
.gros em { font-style: italic; font-weight: 300; font-stretch: 100%; }
.texte { max-width: 60ch; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; }
.texte p { margin: 0 0 1em; }
.colonnes { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 120px); align-items: start; }

/* le mur des murs : toutes les œuvres, chacune sur sa couleur */
.murs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0; list-style: none; margin: 0; padding: 0; }
.murs li { aspect-ratio: 4 / 5; background: var(--c); color: var(--t); position: relative; }
.murs a { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: 18px; text-decoration: none; }
.murs .vignette { min-height: 0; display: flex; align-items: center; justify-content: center; padding: 10% 10%; }
.murs .vignette picture { display: contents; }
.murs .vignette img { max-height: 100%; max-width: 100%; min-height: 0; width: auto; height: auto; background: #f7f4ee; padding: 6px; box-shadow: 0 18px 30px -18px rgba(0,0,0,.6); transition: transform .5s var(--courbe); }
.murs a:hover img { transform: scale(1.03); }
.murs .legende { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; font-stretch: 112%; }
.murs .legende b { font-weight: 800; font-stretch: 125%; }

/* éditions */
.formats { display: flex; align-items: flex-end; flex-wrap: wrap; gap: clamp(20px, 4vw, 64px); margin: 48px 0; }
.format__rect { border: 2px solid var(--encre); background: rgba(255,255,255,.18); }
.format p { margin: 10px 0 0; font-stretch: 112%; font-size: 14px; }
.format b { display: block; font-size: 22px; font-weight: 800; font-stretch: 125%; }
.silhouette svg { display: block; fill: none; stroke: var(--encre); stroke-width: 2; }
.silhouette p { margin: 10px 0 0; font-size: 13px; }
.fiche { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px 48px; margin: 0; }
.fiche dt { font-size: 12px; font-stretch: 125%; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; border-bottom: 2px solid var(--encre); padding-bottom: 8px; margin-bottom: 10px; }
.fiche dd { margin: 0; }

/* expériences */
.exps { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 48px 32px; list-style: none; margin: 0; padding: 0; }
.exps img { aspect-ratio: 16/9; object-fit: cover; width: 100%; margin-bottom: 18px; }
.exps h3 { font-size: 28px; font-stretch: 112%; font-weight: 800; margin: 0 0 8px; line-height: 1.05; }
.exps p { margin: 0 0 14px; color: var(--doux); }

/* lettre + pied */
.lettre form { display: flex; flex-wrap: wrap; gap: 12px; max-width: 640px; margin-top: 28px; }
.lettre input { flex: 1 1 260px; background: transparent; border: 0; border-bottom: 2px solid var(--encre); padding: 12px 0; font: inherit; font-size: 20px; color: var(--encre); border-radius: 0; }
.lettre input::placeholder { color: var(--doux); opacity: 1; }
.pied { padding: 56px var(--g) 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; font-size: 15px; border-top: 2px solid var(--encre); }
.pied address { font-style: normal; }
.pied__grand { grid-column: 1 / -1; font-size: clamp(40px, 9vw, 168px); font-weight: 800; font-stretch: 125%; line-height: .85; letter-spacing: -.03em; margin: 24px 0 0; overflow-wrap: anywhere; }

/* ------------------------------------------------------------ fiche d'œuvre */
.oeuvre { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: clamp(32px, 5vw, 96px); padding: 110px var(--g) 80px; align-items: center; min-height: 100svh; }
.oeuvre .tirage__papier img { max-height: calc(100svh - 230px); max-width: 100%; }
.oeuvre .titre { font-size: clamp(44px, 6vw, 104px); }
.donnees { display: grid; grid-template-columns: max-content 1fr; gap: 6px 22px; margin: 26px 0; font-size: 15px; }
.donnees dt { color: var(--doux); font-stretch: 112%; }
.donnees dd { margin: 0; }
.tableau { width: 100%; border-collapse: collapse; margin: 8px 0 18px; font-variant-numeric: tabular-nums; }
.tableau th, .tableau td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--filet); font-weight: 400; }
.tableau th { font-weight: 800; font-stretch: 112%; }
.tableau td:last-child { text-align: right; font-weight: 700; }
.couleurs { display: flex; gap: 0; margin: 10px 0 4px; height: 36px; }
.couleurs i { flex: var(--p); background: var(--c); }
.couleurs-leg { font-size: 12px; color: var(--doux); margin: 0; }
.voisins { display: grid; grid-template-columns: 1fr 1fr; }
.voisins a { display: flex; flex-direction: column; gap: 6px; padding: 36px var(--g); background: var(--c); color: var(--t); text-decoration: none; min-height: 160px; justify-content: flex-end; }
.voisins a:last-child { text-align: right; align-items: flex-end; }
.voisins small { font-size: 12px; font-stretch: 125%; text-transform: uppercase; letter-spacing: .1em; }
.voisins b { font-size: clamp(24px, 3vw, 44px); font-weight: 800; font-stretch: 112%; line-height: 1; }

/* ------------------------------------------------------------ téléphone et tablette en portrait */
/* la salle tient dans un écran : le tirage prend toute la place libre, le cartel dessous, le nuancier au pied */
@media (max-width: 860px), (orientation: portrait) and (max-width: 1100px) {
  .salle { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto auto; height: 100svh; min-height: 580px; padding-top: 80px; }
  .salle__cadre { grid-row: 1; min-height: 0; }
  .salle .tirage { align-items: flex-end; padding: 2svh 0 1svh; }
  .salle__cartel { grid-row: 2; align-self: end; padding: 20px 0 26px; }
  .salle .titre { font-size: clamp(40px, 9.5cqi, 104px); }
  .nuancier { grid-row: 3; }
  .colonnes, .oeuvre { grid-template-columns: 1fr; }
  .oeuvre { padding-top: 96px; }
  .oeuvre .tirage__papier img { max-height: 62svh; }
}
@media (max-width: 860px) {
  .tete { padding-top: 16px; align-items: center; }
  .marque { font-size: 13px; line-height: 1.1; }
  .marque span { display: block; }
  .menu { font-size: 13px; gap: 14px; }
  .menu .facultatif { display: none; }
  .salle { padding-top: 70px; }
  .salle .tirage { align-items: center; padding: 0; }
  .salle .titre { font-size: clamp(38px, 12.5cqi, 76px); margin-bottom: 10px; }
  .compteur { margin-bottom: 10px; }
  .mur-nom { margin-top: 12px; }
  .mur-pourquoi { display: none; }
  .actions { margin-top: 18px; gap: 10px 18px; }
  .bouton { padding: 13px 18px; }
  .nuancier { height: 66px; }
  .nuancier button { height: 46px; padding: 6px 2px; font-size: 11px; letter-spacing: 0; }
  .nuancier button[aria-current="true"] { height: 66px; }
  .nuancier button:focus-visible { height: 56px; }
  .nuancier__nom { display: none; }
  .oeuvre { padding-top: 84px; }
  .oeuvre .tirage__papier img { max-height: 54svh; max-width: calc(100vw - 2 * var(--g) - 2 * clamp(14px, 2.2vw, 34px)); }
}
@media (max-width: 600px) { .menu .moyen { display: none; } }
@media (max-width: 360px) { .menu { gap: 10px; font-size: 12px; } }

.murs__fin { grid-column: span 2; aspect-ratio: auto !important; background: #111 !important; color: #f3efe7 !important; }
.murs__fin a { display: flex !important; flex-direction: column; justify-content: space-between; }
.murs__fin b { font-size: clamp(28px, 3vw, 48px); font-weight: 800; font-stretch: 88%; line-height: 1; letter-spacing: -.01em; }
@media (max-width: 600px) { .murs__fin { grid-column: auto; } }

/* ============================================================ VIVANT */
/* la lumière rasante qui suit le regard (ou dérive seule, comme un nuage) */
.lumiere { position: fixed; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: soft-light; overflow: hidden; }
.lumiere b { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; }
.lumiere b:first-child { width: 92vmax; height: 92vmax; margin: -46vmax 0 0 -46vmax; background: radial-gradient(closest-side, rgba(255,250,235,.55), rgba(255,250,235,0) 70%); }
.lumiere b:last-child { width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; background: radial-gradient(closest-side, rgba(0,0,0,.28), rgba(0,0,0,0) 70%); }
/* le souffle : le mur s'éclaire et s'assombrit très légèrement, six secondes par respiration */
.souffle { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: #fff; mix-blend-mode: soft-light; opacity: 0; animation: respirer 6s ease-in-out infinite; }
@keyframes respirer { 0%, 100% { opacity: 0; } 45% { opacity: .16; } }
main, .pied { position: relative; z-index: 2; }
.tirage__papier { animation: flotter 6s ease-in-out infinite; }
@keyframes flotter { 0%, 100% { box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 30px 60px -30px rgba(0,0,0,.55), 0 8px 20px -10px rgba(0,0,0,.25); }
  45% { box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 42px 80px -34px rgba(0,0,0,.6), 0 12px 26px -12px rgba(0,0,0,.28); } }

/* le curseur : un cercle qui s'ouvre sur les œuvres */
.avec-curseur, .avec-curseur a, .avec-curseur button { cursor: none; }
.curseur { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; width: 0; height: 0; }
.curseur span { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--encre);
  display: flex; align-items: center; justify-content: center; color: var(--mur); font: 700 13px/1 'Archivo', sans-serif; font-stretch: 125%;
  letter-spacing: .04em; text-transform: uppercase; overflow: hidden; white-space: nowrap;
  transition: width .35s var(--courbe), height .35s var(--courbe), left .35s var(--courbe), top .35s var(--courbe), background-color .6s; }
.curseur.lien span { width: 44px; height: 44px; left: -22px; top: -22px; background: transparent; border: 1.5px solid var(--encre); }
.curseur.grand span { width: 112px; height: 112px; left: -56px; top: -56px; }

/* la visite : la bande active se remplit pendant que la salle attend */
.nuancier button[aria-current="true"]::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--t); opacity: .8; }
.salle.visite .nuancier button[aria-current="true"]::after { animation: visite var(--visite, 9s) linear forwards; }
@keyframes visite { to { width: 100%; } }
/* le nuancier bat doucement, comme un pouls */
.nuancier button[aria-current="true"] { animation: pouls 6s ease-in-out infinite; }
@keyframes pouls { 0%, 100% { filter: none; } 46% { filter: brightness(1.06); } 50% { filter: brightness(.97); } }

/* le titre cinétique : chaque lettre réagit à la distance du curseur */
.titre .mot { display: inline-block; white-space: nowrap; }
.titre .lettre { display: inline-block; transition: font-weight .5s var(--courbe), font-stretch .5s var(--courbe); }

/* le son */
.son { all: unset; cursor: pointer; font-size: 14px; font-stretch: 112%; }
.son:focus-visible { outline: 2px solid var(--encre); outline-offset: 4px; }

/* les entrées en scène, pilotées par le défilement (Chrome, Edge, Safari 26+) */
@supports (animation-timeline: view()) {
  .gros, .surtitre, .texte, .formats, .fiche, .exps li, .colonnes > div {
    animation: entrer linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
  @keyframes entrer { from { opacity: 0; transform: translateY(48px); font-stretch: 62%; } to { opacity: 1; transform: none; } }
  .murs li { animation: monter linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  .murs li:nth-child(5n+2) { animation-range: entry 6% cover 34%; }
  .murs li:nth-child(5n+3) { animation-range: entry 12% cover 38%; }
  .murs li:nth-child(5n+4) { animation-range: entry 18% cover 42%; }
  .murs li:nth-child(5n+5) { animation-range: entry 24% cover 46%; }
  @keyframes monter { from { opacity: 0; transform: translateY(80px) scale(.96); } to { opacity: 1; transform: none; } }
  .pied__grand { animation: etirer linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
  @keyframes etirer { from { font-stretch: 62%; letter-spacing: .2em; } to { font-stretch: 125%; letter-spacing: -.03em; } }
  .salle__cadre { animation: reculer linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  @keyframes reculer { to { transform: translateY(18vh) scale(.92); opacity: .5; } }
}

/* passage d'une page à l'autre : le tirage voyage de la salle à sa fiche */
@view-transition { navigation: auto; }
.tirage.actif .tirage__papier, .oeuvre .tirage__papier { view-transition-name: tirage; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .6s; }
::view-transition-group(tirage) { animation-duration: .7s; animation-timing-function: cubic-bezier(.2,.7,.15,1); }

@media (prefers-reduced-motion: reduce) {
  .lumiere, .souffle { display: none; }
  .tirage__papier, .nuancier button { animation: none !important; }
  .avec-curseur, .avec-curseur a, .avec-curseur button { cursor: auto; }
  .curseur { display: none; }
}

/* ============================================================ SPECTACLE */
/* la vague : le nouveau mur se répand comme de la peinture */
.vague { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
html.net, html.net body { transition: none !important; }

/* le tirage arrive comme une épreuve qui sort du révélateur : il pivote, se pose, et l'image passe du blanc à sa densité */
.tirage { opacity: 0; transform: perspective(1400px) translateX(9%) rotateY(-26deg) scale(.86); filter: blur(10px) brightness(1.9);
  transition: opacity .8s var(--courbe), transform 1.15s var(--courbe), filter 1.3s var(--courbe); pointer-events: none; }
.tirage.avant { transform: perspective(1400px) translateX(-9%) rotateY(26deg) scale(.86); }
.tirage.actif { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.tirage__papier { position: relative; display: block; transform: perspective(1200px) translate3d(var(--px, 0px), var(--py, 0px), 0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; will-change: transform; }
.tirage__papier::after { content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgba(255,255,255,.55), rgba(255,255,255,0) 45%); opacity: .9; }

/* le titre entre lettre par lettre */
.titre .lettre { white-space: pre; }
.titre.entre .lettre { animation: lettre-entre .95s cubic-bezier(.2,.75,.15,1) both; animation-delay: calc(var(--i, 0) * 26ms); }
@keyframes lettre-entre { from { opacity: 0; transform: translateY(.55em) rotate(7deg); font-stretch: 62%; font-weight: 200; } }

.bouton, .son { transition: transform .35s var(--courbe), background-color .2s; }

/* le bandeau des murs, poussé par le défilement */
.defile { background: #0e0e0e; overflow: hidden; padding: clamp(28px, 4vw, 56px) 0; display: grid; gap: 6px; }
.defile__piste { display: flex; width: max-content; white-space: nowrap; will-change: transform; }
.defile__piste span { font-size: clamp(56px, 11vw, 190px); font-weight: 800; font-stretch: 125%; line-height: .95; letter-spacing: -.03em; padding-right: .35em; color: var(--c); }
.defile__piste + .defile__piste span { font-weight: 200; font-style: italic; font-stretch: 75%; }

/* l'ouverture : l'éventail du nuancier s'ouvre, puis se lève sur la première salle */
.ouverture { position: fixed; inset: 0; z-index: 80; display: flex; background: #0e0e0e; cursor: pointer; }
.ouverture i { flex: 1; background: var(--c); transform: scaleY(0); transform-origin: bottom; }
.ouverture.joue i { animation: eventail .9s cubic-bezier(.7,0,.15,1) both; animation-delay: calc(var(--k) * 55ms); }
@keyframes eventail { to { transform: scaleY(1); } }
.ouverture p { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; color: #fff; mix-blend-mode: difference;
  font-size: clamp(48px, 13vw, 240px); font-weight: 800; letter-spacing: -.04em; font-stretch: 62%; }
.ouverture.joue p { animation: nom 1.8s cubic-bezier(.2,.7,.15,1) .35s both; }
@keyframes nom { from { font-stretch: 62%; opacity: 0; letter-spacing: .3em; } 60% { opacity: 1; } to { font-stretch: 125%; letter-spacing: -.04em; } }
.ouverture.fini { pointer-events: none; }
.ouverture.fini i { animation: lever .8s cubic-bezier(.7,0,.2,1) both; animation-delay: calc(var(--k) * 35ms); transform: scaleY(1); }
.ouverture.fini { background: transparent; transition: background .1s; }
.ouverture.fini p { animation: none; opacity: 0; transition: opacity .3s; }
@keyframes lever { from { transform: translateY(0); } to { transform: translateY(-101%); } }

@media (prefers-reduced-motion: reduce) {
  .tirage, .tirage.avant { transform: none; filter: none; }
  .tirage__papier { transform: none; }
  .ouverture { display: none; }
}

/* ============================================================ TOUCHER */
/* le curseur se cache dès qu'un doigt touche l'écran (iPad avec trackpad, ordinateurs tactiles) */
.curseur.cache { opacity: 0; }
.curseur { transition: opacity .3s; }
/* la trace du doigt : un cercle d'encre qui s'ouvre et s'efface */
.trace { position: fixed; z-index: 61; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; border: 1.5px solid var(--encre); pointer-events: none; }
/* le son : quatre barres, immobiles quand il est coupé, qui dansent quand il joue */
.son { display: inline-flex; align-items: baseline; gap: 7px; }
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.eq b { width: 2px; background: currentColor; opacity: .38; transition: height .4s var(--courbe), opacity .4s; }
.eq b:nth-child(1) { height: 4px; } .eq b:nth-child(2) { height: 8px; } .eq b:nth-child(3) { height: 5px; } .eq b:nth-child(4) { height: 10px; }
.son[aria-pressed="true"] .eq b { opacity: 1; }
.son[aria-pressed="true"] .eq b { animation: eq .9s ease-in-out infinite alternate; }
.son[aria-pressed="true"] .eq b:nth-child(2) { animation-duration: .7s; animation-delay: -.3s; }
.son[aria-pressed="true"] .eq b:nth-child(3) { animation-duration: 1.1s; animation-delay: -.5s; }
.son[aria-pressed="true"] .eq b:nth-child(4) { animation-duration: .8s; animation-delay: -.2s; }
@keyframes eq { from { height: 3px; } to { height: 11px; } }
/* sans animation-timeline (iOS avant 26, Firefox) : les mêmes entrées, déclenchées à l'apparition */
.sans-timeline :is(.gros, .surtitre, .texte, .formats, .fiche, .exps li, .colonnes > div, .pied__grand) { opacity: 0; transform: translateY(48px); transition: opacity .9s var(--courbe), transform 1.1s var(--courbe), font-stretch 1.1s var(--courbe); }
.sans-timeline .murs li { opacity: 0; transform: translateY(80px) scale(.96); transition: opacity .9s var(--courbe) var(--d, 0ms), transform 1.2s var(--courbe) var(--d, 0ms); }
.sans-timeline :is(.gros, .surtitre, .texte, .formats, .fiche, .exps li, .colonnes > div, .pied__grand, .murs li).vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .trace { display: none; } .eq b { animation: none !important; } }

/* ============================================================ RÉVISION v5
   D'après quatre maisons : Pentagram (le travail d'abord, une voix discrète, des fiches projet nettes),
   Locomotive (un index typographique géant, un sérif de titrage face à une linéale d'information),
   Clay (la confiance par les noms qui comptent, des appels à l'action sans ambiguïté),
   Bakken & Bæck (des mosaïques de détails par projet, une navigation compacte, un rideau de menu). */
:root { --serif: 'Instrument Serif', 'Iowan Old Style', 'Times New Roman', serif; }

/* ---------- l'en-tête : trois zones, un seul appel à l'action */
.tete { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 18px var(--g); }
.tete__nav { justify-self: center; }
.tete__droite { justify-self: end; display: flex; align-items: center; gap: 20px; }
.pastille { background: var(--encre); color: var(--mur); text-decoration: none; font-size: 13px; font-weight: 700; font-stretch: 112%; padding: 9px 14px; letter-spacing: .01em; transition: transform .35s var(--courbe); }
.pastille:hover { text-decoration: underline; }
.menu-btn { all: unset; cursor: pointer; display: none; font-size: 13px; font-weight: 700; font-stretch: 112%; padding: 8px 12px; border: 1.5px solid var(--encre); }
.menu-btn:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }
.marque span { display: inline; }
.menu .facultatif, .menu .moyen { display: list-item; }
@media (max-width: 860px) {
  .tete { grid-template-columns: 1fr auto; padding: 14px var(--g); }
  .tete__nav, .pastille { display: none; }
  .tete__droite { gap: 16px; }
  .menu-btn { display: inline-block; }
  .marque { font-size: 13px; }
  .marque span { display: block; }
}

/* ---------- le rideau : le menu se répand depuis le bouton, comme un nouveau mur */
.rideau { position: fixed; inset: 0; z-index: 90; background: var(--mur); color: var(--encre); overflow-y: auto; overscroll-behavior: contain; }
.rideau-ouvert { overflow: hidden; }
.rideau-ouvert .tete { position: fixed; z-index: 95; }
.rideau-ouvert .tete .son { visibility: hidden; }
.rideau__corps { min-height: 100%; display: flex; flex-direction: column; padding: 96px var(--g) 28px; }
.rideau__liens { list-style: none; margin: 0 0 auto; padding: 0; }
.rideau__liens a { display: inline-block; font-family: var(--serif); font-size: clamp(52px, 12vw, 128px); line-height: 1; text-decoration: none; padding: 4px 0; }
.rideau__liens a:hover, .rideau__liens a:focus-visible { font-style: italic; }
.rideau__label { margin: 40px 0 10px; }
.rideau__murs { list-style: none; margin: 0 calc(-1 * var(--g)); padding: 0; display: grid; grid-template-columns: repeat(13, 1fr); }
.rideau__murs a { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; height: clamp(64px, 14vh, 150px); padding: 8px; background: var(--c); color: var(--t); text-decoration: none; font-size: 11px; font-weight: 700; font-stretch: 112%; }
.rideau__murs a span + span { font-weight: 400; font-stretch: 100%; line-height: 1.15; }
.rideau__adresse { margin: 18px 0 0; font-size: 13px; color: var(--doux); }
@media (max-width: 860px) { .rideau__murs a span + span { display: none; } .rideau__murs a { padding: 6px 3px; font-size: 9px; } }
.rideau:not([hidden]) .rideau__liens li { animation: rideau-monte .9s var(--courbe) both; }
.rideau__liens li:nth-child(1) { animation-delay: .14s !important; } .rideau__liens li:nth-child(2) { animation-delay: .2s !important; }
.rideau__liens li:nth-child(3) { animation-delay: .26s !important; } .rideau__liens li:nth-child(4) { animation-delay: .32s !important; }
@keyframes rideau-monte { from { opacity: 0; transform: translateY(40px); } }

/* ---------- typographie : un sérif de titrage face à la linéale */
.gros { font-family: var(--serif); font-weight: 400; font-stretch: 100%; letter-spacing: -.012em; line-height: .94; font-size: clamp(48px, 7.4vw, 136px); max-width: 15ch; }
.gros em { font-weight: 400; font-style: italic; }
.surtitre { font-size: 12px; letter-spacing: .14em; }

/* ---------- l'index : treize titres géants, chaque ligne prend la couleur de son mur au survol */
.index__tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.index__tete .gros { margin-bottom: 0; }
.index__texte { margin-top: 28px; color: var(--doux); }
.vue { display: inline-flex; border: 1.5px solid var(--encre); }
.vue button { all: unset; cursor: pointer; padding: 9px 16px; font-size: 13px; font-weight: 700; font-stretch: 112%; }
.vue button[aria-pressed="true"] { background: var(--encre); color: var(--mur); }
.vue button:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }
.liste { list-style: none; margin: clamp(40px, 6vw, 80px) 0 0; padding: 0; border-top: 1.5px solid var(--encre); }
.liste li { border-bottom: 1px solid var(--filet); }
.liste a { position: relative; isolation: isolate; display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 260px) 200px; align-items: baseline; gap: 0 24px;
  padding: clamp(10px, 1.4vw, 18px) 0; text-decoration: none; color: inherit; transition: color .45s var(--courbe); }
.liste a::before { content: ''; position: absolute; z-index: -1; inset: 0 calc(-1 * var(--g)); background: var(--c); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .55s var(--courbe); }
.liste a:focus-visible { color: var(--t); outline: none; }
.liste a:focus-visible::before { transform: scaleY(1); }
@media (hover: hover) { .liste a:hover { color: var(--t); } .liste a:hover::before { transform: scaleY(1); } }
.liste__num { font-size: 13px; font-weight: 800; font-stretch: 125%; font-variant-numeric: tabular-nums; }
.liste__titre { font-family: var(--serif); font-size: clamp(40px, 7vw, 124px); line-height: .98; letter-spacing: -.012em; transition: transform .6s var(--courbe); }
@media (hover: hover) { .liste a:hover .liste__titre { transform: translateX(18px); font-style: italic; } }
.liste__meta { font-size: 14px; font-stretch: 105%; }
.liste__mur { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-stretch: 112%; text-transform: uppercase; letter-spacing: .08em; justify-self: end; }
.liste__mur i { width: 14px; height: 14px; background: var(--c); border: 1px solid currentColor; }
.liste__vignette { display: none; }
.murs[hidden], .liste[hidden] { display: none; }
@media (max-width: 860px) {
  .liste a { grid-template-columns: 30px minmax(0, 1fr) 76px; grid-template-rows: auto auto; gap: 4px 12px; align-items: center; padding: 14px 0; }
  .liste__num { align-self: start; padding-top: 6px; }
  .liste__titre { font-size: clamp(30px, 9vw, 54px); }
  .liste__meta { grid-column: 2; grid-row: 2; font-size: 13px; }
  .liste__mur { display: none; }
  .liste__vignette { display: block; grid-column: 3; grid-row: 1 / 3; width: 76px; height: auto; background: var(--papier); padding: 4px; box-shadow: 0 10px 18px -12px rgba(0,0,0,.55); }
}
/* l'aperçu qui suit le pointeur (ordinateur) */
.apercu { position: fixed; left: 0; top: 0; z-index: 30; width: clamp(220px, 22vw, 340px); pointer-events: none; opacity: 0; will-change: transform, opacity; transition: opacity .3s; }
.apercu.visible { opacity: 1; }
.apercu img { display: block; width: 100%; height: auto; background: var(--papier); padding: 10px; box-shadow: 0 30px 60px -28px rgba(0,0,0,.6); }
@media (hover: none), (pointer: coarse) { .apercu { display: none; } }

/* ---------- le métier : les noms qui garantissent l'œuvre (à la place des logos de clients) */
.metier { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1.5px solid var(--encre); border-bottom: 1.5px solid var(--encre); margin: 0 var(--g); }
.metier > div { padding: 26px 24px 30px 0; display: flex; flex-direction: column; gap: 10px; }
.metier > div + div { padding-left: 24px; border-left: 1px solid var(--filet); }
.metier span { font-size: 12px; font-weight: 700; font-stretch: 125%; text-transform: uppercase; letter-spacing: .12em; color: var(--doux); }
.metier b { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2.1vw, 32px); line-height: 1.08; }
@media (max-width: 860px) {
  .metier { grid-template-columns: 1fr 1fr; }
  .metier > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .metier > div:nth-child(n+3) { border-top: 1px solid var(--filet); }
}

/* ---------- la fiche d'œuvre : en-tête net, l'œuvre en grand, puis le détail */
.fo { padding: 112px var(--g) 0; }
.fo__tete .titre { font-size: clamp(52px, 9vw, 168px); margin: 0 0 22px; max-width: 16ch; }
.fo__ligne { display: flex; justify-content: space-between; align-items: center; gap: 18px 40px; flex-wrap: wrap; }
.fo__chapo { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(24px, 2.6vw, 40px); line-height: 1.1; }
.puces { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.puces li { font-size: 12px; font-stretch: 112%; letter-spacing: .04em; padding: 6px 10px; background: color-mix(in srgb, var(--encre) 12%, transparent); }
.fo__mur { display: flex; align-items: center; justify-content: center; padding: clamp(40px, 7vh, 96px) 0; min-height: 80svh; }
.fo .tirage__papier { --pp: clamp(12px, 2vw, 32px); padding: var(--pp); }
.fo .tirage__papier img { max-width: none; max-height: none; height: auto;
  width: min(calc(100vw - 2 * var(--g) - 2 * var(--pp)), calc((84svh - 2 * var(--pp)) * var(--ar, 1.5)), 1500px); }
.fo__plus { border-top: 1.5px solid var(--encre); border-bottom: 1px solid var(--filet); }
.fo__plus summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 22px 0; font-family: var(--serif); font-size: clamp(28px, 3vw, 44px); }
.fo__plus summary::-webkit-details-marker { display: none; }
.fo__plus summary:focus-visible { outline: 2px solid var(--encre); outline-offset: 4px; }
.fo__plus summary i { position: relative; width: 26px; height: 26px; }
.fo__plus summary i::before, .fo__plus summary i::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: currentColor; transition: transform .45s var(--courbe); }
.fo__plus summary i::after { transform: rotate(90deg); }
.fo__plus[open] summary i::after { transform: rotate(0); }
.fo__plus-corps { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(32px, 6vw, 120px); padding: 4px 0 40px; }
.fo__plus-corps > :not(.fo__desc) { grid-column: 2; }
.fo__desc { grid-column: 1; grid-row: 1 / span 4; margin: 0; font-family: var(--serif); font-size: clamp(22px, 2.2vw, 32px); line-height: 1.22; }
.fo__plus .donnees { margin: 0; }
.fo__plus .mur-nom { margin-top: 0; }
.fo__bloc { padding-top: clamp(64px, 9vw, 140px); }
.mosaique { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(170px, 21vw, 360px); gap: 8px; }
.detail { position: relative; margin: 0; overflow: hidden; background: var(--papier); }
.detail picture { display: contents; }
.detail img { width: 100%; height: 100%; object-fit: cover; object-position: var(--x) var(--y); transform: scale(3); transform-origin: var(--x) var(--y); transition: transform 1.4s var(--courbe); }
.detail:hover img { transform: scale(3.4); }
.detail--grand { grid-column: span 2; grid-row: span 2; }
.detail--grand img { transform: scale(1.8); }
.detail--grand:hover img { transform: scale(2.1); }
.detail figcaption { position: absolute; left: 10px; bottom: 10px; background: var(--papier); color: #141414; font-size: 11px; font-weight: 700; font-stretch: 112%; padding: 5px 8px; letter-spacing: .02em; }
.detail--couleurs { display: flex; flex-direction: column; background: transparent; }
.couleurs--haut { flex: 1; height: auto; margin: 0; }
.detail--couleurs figcaption { position: static; align-self: flex-start; margin-top: 8px; background: transparent; color: var(--doux); padding: 0; font-weight: 400; }
.fo__formats { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px clamp(32px, 6vw, 120px); padding-bottom: clamp(64px, 9vw, 140px); }
.fo__formats .tableau { margin-top: 0; }
.fo + .voisins { margin-top: 0; }
@media (max-width: 860px) {
  .fo { padding-top: 92px; }
  .fo__mur { min-height: 0; }
  .fo .tirage__papier img { width: min(calc(100vw - 2 * var(--g) - 2 * var(--pp)), calc((70svh - 2 * var(--pp)) * var(--ar, 1.5))); }
  .fo__plus-corps, .fo__formats { grid-template-columns: 1fr; }
  .fo__plus-corps > * { grid-column: 1 !important; grid-row: auto !important; }
  .mosaique { grid-template-columns: 1fr 1fr; grid-auto-rows: 44vw; }
  .detail--grand { grid-row: span 1; }
}

/* ---------- les nouvelles entrées en scène */
@supports (animation-timeline: view()) {
  .liste li, .metier > div, .detail, .fo__plus, .index__texte { animation: entrer linear both; animation-timeline: view(); animation-range: entry 0% cover 24%; }
}
.sans-timeline :is(.liste li, .metier > div, .detail, .fo__plus, .index__texte) { opacity: 0; transform: translateY(40px); transition: opacity .9s var(--courbe), transform 1.1s var(--courbe); }
.sans-timeline :is(.liste li, .metier > div, .detail, .fo__plus, .index__texte).vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rideau__liens li { animation: none !important; }
  .liste a::before, .liste__titre, .detail img { transition: none; }
}

/* la fiche : le tirage reste en place pendant qu'on descend vers le détail */
.fo .salle__cadre { animation: none !important; }
/* la mosaïque : un grand détail, deux petits, et le nuancier de l'image en bandeau */
.detail--couleurs { margin-top: 8px; }
.detail--couleurs { align-self: start; }
.detail--couleurs .couleurs--haut { height: clamp(56px, 7vw, 110px); flex: none; }

/* ============================================================ LE MUR EN WEBGL */
.mur-gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
html.gl body { background: transparent; }
html.gl .lumiere { display: none; }
html.gl .souffle { opacity: 0; animation: none; }
/* l'ombre portée est calculée sur le mur : le tirage ne garde que son contact */
html.gl .tirage__papier { animation: none; box-shadow: 0 1px 0 rgba(0,0,0,.1), 0 6px 14px -8px rgba(0,0,0,.35); }
.heure { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--doux); }
.heure:empty { display: none; }

/* ============================================================ LE RÉVÉLATEUR */
.revelateur { position: absolute; z-index: 1; pointer-events: none; display: block; }
/* avec le révélateur, le tirage n'a plus besoin du flou blanc d'entrée : c'est le bain qui le fait */
html.revele .tirage { filter: none; }

/* ============================================================ CHEZ VOUS, À L'ÉCHELLE */
.chez-vous { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--filet); }
.chez-vous .surtitre { margin-bottom: 10px; }
.chez-vous__texte { margin: 0 0 18px; font-family: var(--serif); font-size: clamp(22px, 2vw, 30px); line-height: 1.15; }
.chez-vous__ligne { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; }
.chez-vous__aide { margin: 14px 0 0; font-size: 14px; color: var(--doux); max-width: 52ch; }
dialog.ar { width: min(1100px, 100vw - 32px); height: min(820px, 100svh - 32px); max-width: none; max-height: none; padding: 0; border: 0;
  background: var(--mur); color: var(--encre); display: none; flex-direction: column; box-shadow: 0 40px 120px -30px rgba(0,0,0,.6); }
dialog.ar[open] { display: flex; animation: ar-entre .6s var(--courbe) both; }
dialog.ar::backdrop { background: rgba(10,10,10,.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
@keyframes ar-entre { from { opacity: 0; transform: translateY(24px) scale(.98); } }
.ar__tete { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--filet); }
.ar__tete p { margin: 0; font-family: var(--serif); font-size: clamp(20px, 2vw, 28px); line-height: 1.1; }
.ar__fermer { all: unset; cursor: pointer; font-size: 13px; font-weight: 700; font-stretch: 112%; padding: 8px 12px; border: 1.5px solid var(--encre); }
.ar__fermer:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }
.ar__scene { flex: 1; min-height: 0; position: relative; }
.ar__scene model-viewer { width: 100%; height: 100%; --poster-color: transparent; background: transparent; }
.ar__bouton { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); }
.ar__note { margin: 0; padding: 12px 20px 16px; font-size: 14px; color: var(--doux); border-top: 1px solid var(--filet); }
@media (max-width: 860px) { dialog.ar { width: 100vw; height: 100svh; } }
@media (prefers-reduced-motion: reduce) { dialog.ar[open] { animation: none; } }

/* ============================================================ LA GALERIE 3D */
.page-galerie { overflow: hidden; height: 100svh; }
.page-galerie .pied, .page-galerie .lumiere, .page-galerie .souffle { display: none; }
.galerie { position: fixed; inset: 0; z-index: 2; background: var(--mur); color: var(--encre); transition: color .8s; }
.galerie__scene { position: absolute; inset: 0; cursor: grab; touch-action: none; }
.galerie__scene canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s var(--courbe); }
.galerie.prete .galerie__scene canvas { opacity: 1; }
.page-galerie .tete { background: var(--mur); color: var(--encre); padding-top: 14px; padding-bottom: 14px; box-shadow: 0 10px 30px -24px rgba(0,0,0,.6); transition: background-color .9s var(--courbe), color .9s; }
.galerie__cartel { position: absolute; left: var(--g); bottom: 92px; max-width: min(520px, calc(100vw - 2 * var(--g)));
  background: var(--mur); color: var(--encre); padding: 20px 22px 22px; box-shadow: 0 24px 60px -30px rgba(0,0,0,.6);
  transition: background-color .9s var(--courbe), color .9s var(--courbe); }
.galerie__cartel .compteur { margin-bottom: 8px; }
.galerie__titre { margin: 0 0 6px; font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4.2vw, 64px); line-height: .98; letter-spacing: -.01em; }
.galerie__sous { margin: 0; font-size: 14px; color: var(--doux); }
.galerie__cartel .actions { margin-top: 18px; }
.galerie__nav { position: absolute; right: var(--g); bottom: 104px; display: flex; gap: 8px; }
.galerie__nav button { all: unset; cursor: pointer; width: 54px; height: 54px; display: grid; place-items: center; font-size: 22px;
  background: var(--mur); color: var(--encre); box-shadow: 0 14px 30px -18px rgba(0,0,0,.6); transition: background-color .9s, transform .3s var(--courbe); }
.galerie__nav button:hover { transform: translateY(-2px); }
.galerie__nav button:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }
.galerie__aide { position: absolute; left: 50%; top: 84px; transform: translateX(-50%); margin: 0; font-size: 12px; font-stretch: 112%; letter-spacing: .04em;
  color: #f6f2ea; mix-blend-mode: difference; white-space: nowrap; animation: aide-part 1s 7s forwards; }
@keyframes aide-part { to { opacity: 0; visibility: hidden; } }
.si-doigt { display: none; }
@media (pointer: coarse) { .si-souris { display: none; } .si-doigt { display: inline; } }
.galerie__nuancier { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; height: 64px; }
.galerie__nuancier button { height: 30px; }
.galerie__nuancier button[aria-current="true"] { height: 64px; }
.galerie__sans3d { display: none; position: absolute; inset: 0; place-content: center; text-align: center; padding: var(--g); gap: 18px; font-family: var(--serif); font-size: 28px; }
.galerie.sans-3d .galerie__sans3d { display: grid; }
.galerie.sans-3d .galerie__cartel, .galerie.sans-3d .galerie__nav, .galerie.sans-3d .galerie__aide { display: none; }
@media (max-width: 860px) {
  .galerie__cartel { left: 12px; right: 12px; bottom: 70px; max-width: none; padding: 14px 16px 16px; }
  .galerie__titre { font-size: 32px; }
  .galerie__cartel .actions { margin-top: 12px; }
  .galerie__nav { top: 120px; bottom: auto; right: 12px; }
  .galerie__nav button { width: 46px; height: 46px; }
  .galerie__aide { top: 76px; font-size: 11px; white-space: normal; text-align: center; width: 80%; }
  .galerie__nuancier { height: 52px; }
  .galerie__nuancier button[aria-current="true"] { height: 52px; }
}
/* la carte « La galerie » de l'accueil : les treize murs en bandes */
.exps__bandes { display: flex; aspect-ratio: 16 / 9; margin-bottom: 18px; overflow: hidden; }
.exps__bandes i { flex: 1; background: var(--c); transition: flex .6s var(--courbe); }
.exps__bandes:hover i:nth-child(odd) { flex: 1.6; }

/* ============================================================ NEUCHÂTEL EN DIRECT */
.bulletin { position: absolute; z-index: 3; left: var(--g); right: var(--g); top: 62px; margin: 0; display: flex; align-items: baseline; gap: 10px;
  font-size: 12px; font-stretch: 108%; letter-spacing: .02em; color: var(--doux); pointer-events: none; }
.bulletin i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; transform: translateY(-1px); animation: direct 2.4s ease-in-out infinite; }
@keyframes direct { 50% { opacity: .25; } }
.salle .salle__cadre { margin-top: 18px; }
@media (max-width: 860px) { .bulletin { top: 58px; font-size: 11px; line-height: 1.35; } .salle .salle__cadre { margin-top: 30px; } }
@media (prefers-reduced-motion: reduce) { .bulletin i { animation: none; } }

/* ============================================================ PAGES DE TEXTE, 404, LANGUE, LETTRE */
.page-texte { padding-top: 140px; max-width: 980px; }
.page-texte h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.4vw, 34px); margin: 1.6em 0 .3em; }
.page-404 { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: 120px; }
.langue { font-size: 13px; font-weight: 700; font-stretch: 112%; text-decoration: none; letter-spacing: .04em; }
.langue:hover { text-decoration: underline; }
.lettre__form { display: flex; flex-wrap: wrap; gap: 12px; max-width: 640px; margin-top: 28px; }
.lettre__etat { flex-basis: 100%; margin: 4px 0 0; font-size: 15px; min-height: 1.4em; }
.lettre__rgpd { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--doux); }
.lettre input[aria-invalid="true"] { border-bottom-color: currentColor; border-bottom-style: dashed; }
@media (max-width: 860px) { .langue { display: none; } .rideau__langue { display: inline-block; } }

/* cibles tactiles d'au moins 24 px dans le pied de page (WCAG 2.2) */
.pied p a, .pied address a { display: inline-block; padding: 3px 0; }
@media (max-width: 860px) { .salle__cartel { min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; } }

/* ============================================================ JOUR / NUIT (light-dark, OKLCH) */
/* Chaque élément porte ses deux jeux de couleurs (--mur-j / --mur-n…) ; color-scheme choisit. */
[style*="--mur-j"] {
  --mur: light-dark(var(--mur-j), var(--mur-n)); --encre: light-dark(var(--encre-j), var(--encre-n));
  --doux: light-dark(var(--doux-j), var(--doux-n)); --filet: light-dark(var(--filet-j), var(--filet-n));
}
@supports not (color: light-dark(red, red)) {
  [style*="--mur-j"] { --mur: var(--mur-j); --encre: var(--encre-j); --doux: var(--doux-j); --filet: var(--filet-j); }
}
:root[data-theme="jour"] { color-scheme: light; }
:root[data-theme="nuit"] { color-scheme: dark; }
.section--jaune { background: var(--mur); color: var(--encre); }
/* la nuit, le passe-partout reste blanc, mais un peu moins éclatant */
@media (prefers-color-scheme: dark) { :root:not([data-theme="jour"]) { --papier: #ece8e0; } }
:root[data-theme="nuit"] { --papier: #ece8e0; }
/* la bascule : un disque à moitié dans l'ombre */
.theme { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-stretch: 112%; min-height: 24px; }
.theme i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); transition: transform .6s var(--courbe); }
.theme[aria-pressed="true"] i { transform: rotate(180deg); background: currentColor; }
.theme:focus-visible { outline: 2px solid var(--encre); outline-offset: 4px; }
@media (max-width: 860px) { .theme span { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
/* un survol plus juste, calculé dans l'espace OKLCH */
@supports (color: oklch(from red l c h)) {
  .bouton:hover { background: oklch(from var(--encre) calc(l + (0.5 - l) * .12) c h); }
}

/* ============================================================ GRILLE DES MURS : :has() + container queries */
/* La grille se règle sur sa propre largeur, et chaque tuile sur le format réel de son image. */
.murs { container-type: inline-size; grid-auto-flow: dense; }
@container (min-width: 900px) {
  .murs li:has([data-format="paysage"]) { grid-column: span 2; aspect-ratio: 8 / 5; }
  .murs li:has([data-format="pano"]) { grid-column: span 3; aspect-ratio: 3 / 1; }
  .murs li:has([data-format="portrait"]) { grid-row: span 1; aspect-ratio: 3 / 4; }
}
.murs li:has(a:focus-visible) { outline: 2px solid var(--t); outline-offset: -6px; z-index: 1; }
/* l'index : en survolant un titre, les autres s'effacent un peu */
@media (hover: hover) {
  .liste:has(a:hover) a:not(:hover) { opacity: .42; }
  .liste a { transition: color .45s var(--courbe), opacity .45s var(--courbe); }
}

/* ============================================================ LA VISIONNEUSE (plein écran + View Transition) */
.agrandir { all: unset; cursor: pointer; position: absolute; right: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 8px;
  background: rgba(18,18,18,.72); color: #f6f2ea; font-size: 12px; font-weight: 700; font-stretch: 112%; letter-spacing: .03em; padding: 8px 12px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.agrandir:focus-visible { outline: 2px solid #f6f2ea; outline-offset: 3px; }
.fo .tirage__papier { cursor: zoom-in; }
dialog.plein { width: 100vw; height: 100svh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #0b0b0b; color: #f1ede6; overflow: hidden; }
dialog.plein[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
dialog.plein::backdrop { background: #0b0b0b; }
.plein__scene { position: relative; overflow: hidden; display: grid; place-items: center; touch-action: pinch-zoom; cursor: zoom-in; }
.plein__scene.zoom { cursor: zoom-out; }
.plein__scene img { max-width: calc(100vw - 48px); max-height: calc(100svh - 110px); width: auto; height: auto; display: block;
  transform-origin: var(--ox, 50%) var(--oy, 50%); transition: transform .55s var(--courbe); }
.plein__scene.zoom img { transform: scale(2.6); transition: transform .55s var(--courbe), transform-origin .12s linear; }
.plein__bas { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 20px 16px; font-size: 13px; }
.plein__bas p { margin: 0; color: #b9b3a8; }
.plein__fermer { all: unset; cursor: pointer; font-size: 13px; font-weight: 700; padding: 8px 12px; border: 1.5px solid #f1ede6; }
.plein__fermer:focus-visible { outline: 2px solid #f1ede6; outline-offset: 3px; }
::view-transition-group(plein) { animation-duration: .6s; animation-timing-function: cubic-bezier(.2,.7,.15,1); }
@media (prefers-reduced-motion: reduce) { .plein__scene img { transition: none; } }
/* les étiquettes : un filet plutôt qu'un fond, pour garder le contraste du texte sur tous les murs */
.puces li { background: transparent; border: 1px solid color-mix(in oklch, var(--encre) 38%, transparent); }

/* ---------------------------------------------------------------- RÉVISION après audit (oct. 2026) */
/* les flèches précédent / suivant de la salle : visibles au doigt, et au clavier ; discrètes à la souris */
.fleches { position: absolute; left: 0; right: 0; top: 50%; z-index: 3; display: flex; justify-content: space-between; padding: 0 max(6px, calc(var(--g) - 12px)); pointer-events: none; transform: translateY(-50%); }
.fleches button { pointer-events: auto; width: 48px; height: 48px; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--encre) 35%, transparent); background: color-mix(in oklab, var(--mur) 72%, transparent); color: var(--encre); font: 700 20px/1 var(--sans); cursor: pointer; opacity: 0; transition: opacity .35s, transform .35s var(--courbe); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.fleches button:hover, .fleches button:focus-visible { opacity: 1; transform: scale(1.06); }
.fleches button:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }
@media (hover: none), (max-width: 860px) { .fleches button { opacity: .85; } }
@media (max-width: 860px) { .fleches { top: auto; bottom: 8px; transform: none; } }
/* les zones de lecture : le mur reste vivant derrière le tirage, et se calme presque jusqu'à l'uni derrière les textes */
.fo__lecture, .index, .page-texte { position: relative; }
.fo__lecture::before, .index::before, .page-texte::before { content: ''; position: absolute; inset: 0 calc(-1 * var(--g)); z-index: -1; background: color-mix(in oklab, var(--mur) 86%, transparent); transition: background .8s; }
.fo__lecture::before { inset: 0 calc(-1 * var(--g)) -40px; }
html.gl .fo, html.gl .index, html.gl .page-texte { isolation: isolate; }
/* le bouton jour / nuit : une cible de 44 px au doigt (le libellé est caché sur téléphone) */
@media (max-width: 860px) { .theme { min-width: 44px; min-height: 44px; justify-content: center; margin: -10px -8px; padding: 10px 8px; box-sizing: border-box; } .theme i { width: 16px; height: 16px; } }