/* mOst — mon oeil sur terre · site général
   DA « antenne » : l'antenne en direct du terrain (NTS), l'album monographique (Kaleidoscope),
   l'index brut en capitales de taille (Dover Street Market) — dans la palette mOst, sans noir.
   Motif : le demi-disque du « O » du logo (l'œil posé sur la terre). */

@font-face { font-family: "mOst titre"; src: url("fonts/HiraginoKakuGothicStdN-W8-latin.woff2") format("woff2"), local("Hiragino Kaku Gothic StdN W8"), local("HiraKakuStdN-W8"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "mOst texte"; src: url("fonts/LouisGeorgeCafe-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "mOst texte"; src: url("fonts/LouisGeorgeCafe-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "mOst main"; src: url("fonts/BothWays.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  /* couleur : la palette mOst, le bleu tient le rôle du noir */
  --bleu: #00507d;
  --jaune: #fcef87;
  --vert: #c7e4d8;
  --rose: #f3cbe1;
  --blanc: #ffffff;
  --encre: var(--bleu);
  --fond: var(--blanc);
  --trait: rgba(0, 80, 125, .22);
  --voile: rgba(0, 80, 125, .06);
  --sur-bleu: rgba(255, 255, 255, .72);
  --trait-bleu: rgba(255, 255, 255, .26);
  /* typographie */
  --f-titre: "mOst titre", "Hiragino Kaku Gothic StdN", "Hiragino Sans", "Arial Black", system-ui, sans-serif;
  --f-texte: "mOst texte", "Avenir Next", "Avenir", "Century Gothic", system-ui, sans-serif;
  --f-main: "mOst main", "Marker Felt", "Segoe Print", cursive;
  --t-mega: clamp(64px, 12.5vw, 214px);
  --t-h1: clamp(46px, 8vw, 132px);
  --t-h2: clamp(32px, 4.6vw, 72px);
  --t-h3: clamp(22px, 2.2vw, 32px);
  --t-lead: clamp(19px, 1.45vw, 23px);
  --t-body: 18px;
  --t-small: 14.5px;
  --t-label: 13.5px;
  /* mise en page */
  --gut: clamp(16px, 3vw, 44px);
  --maxw: 1680px;
  --top-h: 62px;
  --live-h: 34px;
  --stick: calc(var(--top-h) + var(--live-h));
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--stick) + 12px); }
body { margin: 0; background: var(--fond); color: var(--encre); font: 400 var(--t-body)/1.56 var(--f-texte);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, video, svg { max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--jaune); outline-offset: 2px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--jaune); color: var(--bleu); padding: 8px 14px; font-weight: 700; }
.skip:focus { top: 8px; }
h1, h2, h3, h4, .t { font-family: var(--f-titre); font-weight: 800; letter-spacing: -.025em; line-height: .96; margin: 0; text-wrap: balance; }
.nm { text-transform: none; }
p { margin: 0 0 1em; }
/* texte courant : toujours justifié, dernière ligne au fer à gauche, jamais de césure (règle mOst).
   Exceptions : titres, énoncés en Hiragino (manifeste), écriture manuscrite (Both Ways), boutons et puces. */
html { -webkit-hyphens: none; hyphens: none; }
p, li, dd, figcaption, blockquote, .just, .just p { text-align: justify; text-align-last: left; -webkit-hyphens: none; hyphens: none; overflow-wrap: break-word; }
p { text-wrap: pretty; }
.manifeste, .hand, .main-hand, .avec, .btn, .chip, .eyebrow, .t { text-align: left; text-align-last: auto; }
strong, b { font-weight: 700; }
.main-hand, .hand { font-family: var(--f-main); font-weight: 400; letter-spacing: 0; }
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }

/* ---------------------------------------------------------------- en-tête : barre d'antenne */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 60; background: var(--bleu); color: var(--blanc);
  height: var(--top-h); display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); padding-inline: var(--gut); }
.logo { display: flex; align-items: center; flex: none; }
.logo img { height: 34px; width: auto; display: block; }
.nav { flex: 1; min-width: 0; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(12px, 1.8vw, 28px); }
.nav a { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 15.5px; text-decoration: none; white-space: nowrap; padding: 6px 0; position: relative; }
.nav a::before { content: ""; width: 12px; height: 6px; border-radius: 12px 12px 0 0; background: var(--jaune); transform: scale(0); transform-origin: 50% 100%; transition: transform .25s var(--ease); }
.nav a:hover::before, .nav a[aria-current]::before { transform: scale(1); }
.top-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.btn { display: inline-flex; align-items: center; gap: 8px; font: 700 15px/1 var(--f-texte); text-decoration: none; border-radius: 999px; padding: 10px 17px; border: 1.5px solid currentColor; white-space: nowrap; cursor: pointer; background: transparent; color: inherit; transition: background .2s, color .2s; }
.btn:hover { background: var(--bleu); color: var(--blanc); border-color: var(--bleu); }
.top .btn:hover, .on-bleu .btn:hover { background: var(--blanc); color: var(--bleu); border-color: var(--blanc); }
.btn.jaune { background: var(--jaune); color: var(--bleu); border-color: var(--jaune); }
.btn.jaune:hover { background: var(--blanc); border-color: var(--blanc); color: var(--bleu); }
.btn.plein { background: var(--bleu); color: var(--blanc); border-color: var(--bleu); }
.btn.plein:hover { background: var(--jaune); color: var(--bleu); border-color: var(--jaune); }
.btn .fl { font-family: var(--f-texte); }
.burger { display: none; }

/* ligne « sur le terrain » : deux canaux, comme une radio */
.live { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--top-h)); z-index: 59; background: var(--bleu); color: var(--blanc);
  height: var(--live-h); display: flex; align-items: stretch; border-top: 1px solid var(--trait-bleu); border-bottom: 1px solid var(--trait-bleu);
  font-size: 13.5px; padding-inline: var(--gut); white-space: nowrap; overflow: hidden; }
.live .onair { display: flex; align-items: center; gap: 9px; font-weight: 700; padding-right: 16px; flex: none; }
.live .onair::before { content: ""; width: 14px; height: 7px; border-radius: 14px 14px 0 0; background: var(--jaune); animation: pulse 1.8s ease-in-out infinite; }
.live .chan { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-left: 1px solid var(--trait-bleu); text-decoration: none; min-width: 0; }
.live .chan:hover { background: rgba(255, 255, 255, .08); }
.live .num { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--blanc); font-weight: 700; font-size: 12px; flex: none; }
.live .play { width: 0; height: 0; border-left: 8px solid var(--blanc); border-top: 5px solid transparent; border-bottom: 5px solid transparent; flex: none; }
.live .what { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.live .where { opacity: .7; }
.live .count { margin-left: auto; display: flex; align-items: center; gap: 14px; padding-left: 16px; border-left: 1px solid var(--trait-bleu); opacity: .85; flex: none; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------------------------------------------------------------- en-tête de page (échelle DSM) */
.head { padding-block: clamp(36px, 5vw, 72px) clamp(24px, 3vw, 40px); }
.eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-weight: 700; font-size: var(--t-label); margin-bottom: 18px; }
.eyebrow a { text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; }
.eyebrow .sep { opacity: .45; }
.head h1 { font-size: var(--t-h1); line-height: .86; letter-spacing: -.04em; }
.head h1.mega { font-size: var(--t-mega); }
.head .chapo { margin-top: clamp(20px, 2.4vw, 36px); max-width: 58ch; font-size: var(--t-lead); line-height: 1.45; }
.chapo { font-size: var(--t-lead); line-height: 1.45; }

/* ---------------------------------------------------------------- index latéral (DSM) + contenu */
.cols { display: grid; grid-template-columns: minmax(170px, 230px) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); padding-block: 12px 80px; }
.index { position: sticky; top: calc(var(--stick) + 28px); align-self: start; font-weight: 700; font-size: 15.5px; line-height: 1.32; }
.index h2 { font-family: var(--f-texte); font-size: 13.5px; letter-spacing: .02em; opacity: .6; margin-bottom: 10px; }
.index ul { list-style: none; margin: 0 0 22px; padding: 0; }
.index a { display: inline-block; text-decoration: none; padding: 2px 4px; margin-left: -4px; }
.index a:hover { background: var(--voile); }
.index a[aria-current] { background: var(--jaune); }
.content { min-width: 0; }
.prose { max-width: 70ch; }
.prose h2 { font-size: var(--t-h3); margin: 1.9em 0 .7em; line-height: 1.02; }
.prose h3 { font-family: var(--f-texte); font-weight: 700; font-size: 20px; letter-spacing: 0; margin: 1.6em 0 .5em; }
.prose ul { padding-left: 1.1em; }
.prose li { margin-bottom: .45em; }
.lead-block { font-size: var(--t-lead); line-height: 1.45; }

/* encadré « exemples de projets » */
.exemples { border-top: 2px solid var(--bleu); padding-top: 16px; margin: 2.2em 0; max-width: 70ch; }
.exemples h3 { margin-top: 0 !important; }
.box { background: var(--vert); padding: clamp(18px, 2.4vw, 30px); margin: 1.8em 0; max-width: 70ch; }
.box.jaune { background: var(--jaune); }
.box.rose { background: var(--rose); }

/* avis rose : ce qui reste à compléter (visible tant que le contenu n'est pas validé) */
.avis { background: var(--rose); color: var(--bleu); font-size: 14px; line-height: 1.4; padding: 9px 13px; margin: 14px 0; max-width: 70ch; border-left: 4px solid var(--bleu); }
.avis b { margin-right: 6px; }

/* puces (genres NTS) */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip { display: inline-flex; align-items: center; border: 1.5px solid currentColor; border-radius: 999px; padding: 4px 11px 5px; font-size: 13.5px; font-weight: 700; line-height: 1.1; text-decoration: none; white-space: nowrap; background: transparent; color: inherit; cursor: pointer; font-family: var(--f-texte); }
a.chip:hover, button.chip:hover { background: var(--bleu); color: var(--blanc); border-color: var(--bleu); }
.on-bleu a.chip:hover { background: var(--blanc); color: var(--bleu); border-color: var(--blanc); }
.chip.vert { background: var(--vert); border-color: var(--vert); }
.chip.rose { background: var(--rose); border-color: var(--rose); }
.chip.jaune { background: var(--jaune); border-color: var(--jaune); }
.chip[aria-pressed="true"] { background: var(--bleu); color: var(--blanc); border-color: var(--bleu); }

/* ---------------------------------------------------------------- images */
figure { margin: 0; }
.ph { position: relative; }
.ph img { display: block; width: 100%; height: auto; background: var(--c, var(--voile)); }
.ph figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font-size: var(--t-small); line-height: 1.35; padding-top: 8px; }
.ph .credit { opacity: .7; }
.lb-link { display: block; cursor: zoom-in; }
.fill .ph, .ph.fill { height: 100%; }
.fill .ph img, .ph.fill img { height: 100%; object-fit: cover; }

/* grilles d'images (catalogue DSM) */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: clamp(28px, 3vw, 48px) clamp(16px, 2vw, 28px); }
.grid.big { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.card { min-width: 0; }
.card > a { display: block; text-decoration: none; }
.card .frame { aspect-ratio: 4 / 5; overflow: hidden; background: var(--voile); }
.card .frame.paysage { aspect-ratio: 3 / 2; }
.card .frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); }
.card > a:hover .frame img { transform: scale(1.035); }
.card .frame.vide { display: grid; place-items: center; background: var(--vert); padding: 20px; text-align: center; font-weight: 700; }
.card h3 { font-family: var(--f-texte); font-weight: 700; font-size: 18px; letter-spacing: 0; line-height: 1.22; margin-top: 12px; }
.card .meta { font-size: var(--t-small); opacity: .78; margin-top: 3px; }
.card .chips { margin-top: 10px; }

/* colonnes d'images (galerie) */
.masonry { columns: 4 260px; column-gap: clamp(12px, 1.6vw, 22px); }
.masonry > * { break-inside: avoid; margin-bottom: clamp(12px, 1.6vw, 22px); }
.masonry figcaption { font-size: 13.5px; }

/* bandeau d'images qui défile à la main */
.strip { display: flex; gap: clamp(10px, 1.4vw, 18px); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 10px; scrollbar-width: thin; }
.strip > * { flex: none; scroll-snap-align: start; }
.strip .ph img { height: clamp(260px, 52vh, 620px); width: auto; max-width: none; }
.strip.small .ph img { height: clamp(160px, 26vh, 280px); }

/* pleine page (album) */
.full { position: relative; }
.full .ph img { width: 100%; max-height: 92vh; object-fit: contain; background: var(--voile); }
.full.cover .ph img { object-fit: cover; height: 86vh; max-height: none; }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); align-items: end; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); align-items: end; }

/* arche : le demi-disque du logo comme fenêtre d'image */
.arche { border-radius: 50vw 50vw 0 0 / 50vw 50vw 0 0; overflow: hidden; }
.arche img { aspect-ratio: 4 / 5; object-fit: cover; }

/* ---------------------------------------------------------------- super 8 : fenêtre de film */
.loop { position: relative; overflow: hidden; background: var(--bleu); }
.loop video { display: block; width: 100%; height: 100%; object-fit: cover; }
.grain { position: absolute; inset: -40px; pointer-events: none; opacity: .16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain .7s steps(5) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-12px, 8px); } 40% { transform: translate(10px, -14px); } 60% { transform: translate(-6px, 16px); } 80% { transform: translate(14px, 4px); } 100% { transform: translate(0, 0); } }
.pellicule { position: relative; background: var(--bleu); padding: 0 clamp(22px, 2.4vw, 34px); }
.pellicule::before, .pellicule::after { content: ""; position: absolute; top: 0; bottom: 0; width: clamp(10px, 1vw, 14px);
  background: repeating-linear-gradient(to bottom, transparent 0 9px, var(--blanc) 9px 23px, transparent 23px 30px); opacity: .9; }
.pellicule::before { left: clamp(6px, .7vw, 10px); }
.pellicule::after { right: clamp(6px, .7vw, 10px); }
.pellicule .loop { aspect-ratio: 1280 / 938; }
.pellicule .legende { display: flex; justify-content: space-between; gap: 12px; color: var(--blanc); font-size: 13px; font-weight: 700; padding: 9px 0 10px; }

/* ---------------------------------------------------------------- accueil */
.home-hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(24px, 3.4vw, 64px); align-items: end; padding-block: clamp(28px, 4.6vw, 70px) clamp(28px, 4vw, 60px); }
.home-hero h1 { font-size: clamp(52px, 8.2vw, 150px); line-height: .84; letter-spacing: -.045em; }
.home-hero .chapo { max-width: 52ch; margin-top: clamp(20px, 2.6vw, 38px); }
.home-hero .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.home-hero .hand { font-size: clamp(20px, 1.8vw, 28px); display: block; margin-top: 10px; }

/* à la une : diaporama plein cadre, cartouche d'émission (NTS) */
.une { position: relative; height: clamp(520px, 84vh, 900px); background: var(--bleu); color: var(--blanc); overflow: hidden; }
.une .slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s var(--ease), visibility 0s .9s; }
.une .slide.on { opacity: 1; visibility: visible; transition: opacity .9s var(--ease); }
.une .slide .ph, .une .slide .ph a { height: 100%; }
.une .slide img { width: 100%; height: 100%; object-fit: cover; }
.une .cart { position: absolute; left: var(--gut); bottom: 78px; background: var(--bleu); color: var(--blanc); padding: 16px 18px 18px; width: min(460px, calc(100% - 2 * var(--gut))); }
.une .cart .k { font-size: 13px; font-weight: 700; opacity: .8; }
.une .cart h2 { font-size: clamp(26px, 2.6vw, 38px); margin: 6px 0 10px; line-height: 1; }
.une .cart p { font-size: 15.5px; line-height: 1.45; margin: 0 0 12px; }
.une .cart .chips { margin-bottom: 14px; }
.une .ctl { position: absolute; left: var(--gut); right: var(--gut); bottom: 26px; display: flex; align-items: center; gap: 16px; font-size: 13.5px; font-weight: 700; }
.une .ctl button { width: 36px; height: 36px; display: grid; place-items: center; border: 1.5px solid var(--blanc); background: transparent; color: var(--blanc); border-radius: 50%; cursor: pointer; font-size: 16px; }
.une .ctl button:hover { background: var(--blanc); color: var(--bleu); }
.une .bar { flex: 1; height: 2px; background: rgba(255, 255, 255, .35); position: relative; }
.une .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--blanc); }
.une .num { font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; }

.band { padding-block: clamp(56px, 7vw, 110px); }
.band.bleu, .on-bleu { background: var(--bleu); color: var(--blanc); }
.band.jaune { background: var(--jaune); }
.band.vert { background: var(--vert); }
.band.rose { background: var(--rose); }
.band-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 32px; margin-bottom: clamp(28px, 3.4vw, 52px); }
.band-head h2 { font-size: var(--t-h2); line-height: .92; }
.band-head .more { font-weight: 700; }
.band-head p { max-width: 54ch; margin: 0; }

/* formats : six tuiles de couleur */
.formats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--bleu); border-left: 2px solid var(--bleu); }
.formats a { display: flex; flex-direction: column; justify-content: space-between; gap: 34px; min-height: clamp(210px, 21vw, 300px); padding: clamp(18px, 2vw, 28px); text-decoration: none; border-right: 2px solid var(--bleu); border-bottom: 2px solid var(--bleu); transition: background .25s; }
.formats a:hover { background: var(--jaune); }
.formats h3 { font-size: clamp(28px, 3.1vw, 52px); line-height: .92; }
.formats p { margin: 0; font-size: 16px; line-height: 1.4; }
.formats .n { font-weight: 700; font-size: 13.5px; display: flex; justify-content: space-between; }

/* liste d'index avec image au survol (DSM, créateurs A–Z) */
.index-list { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid currentColor; }
.index-list li { border-bottom: 1.5px solid currentColor; }
.index-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 16px; padding: clamp(10px, 1.2vw, 16px) 0; text-decoration: none; }
.index-list .l { font-family: var(--f-titre); font-weight: 800; font-size: clamp(28px, 4.4vw, 72px); letter-spacing: -.035em; line-height: .95; }
.index-list .r { font-size: var(--t-small); font-weight: 700; text-align: right; }
.index-list a:hover .l { color: var(--jaune); -webkit-text-stroke: 1.5px var(--bleu); }
.on-bleu .index-list a:hover .l { color: var(--bleu); -webkit-text-stroke: 1.5px var(--blanc); }
.hover-img { position: fixed; z-index: 70; width: min(30vw, 420px); pointer-events: none; opacity: 0; transform: translate(-50%, -110%) scale(.96); transition: opacity .2s, transform .25s var(--ease); }
.hover-img.on { opacity: 1; transform: translate(-50%, -110%) scale(1); }
.hover-img img { width: 100%; display: block; }

/* chiffres */
.chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 2px solid currentColor; }
.chiffres div { padding: 18px 18px 0 0; border-right: 1.5px solid currentColor; }
.chiffres div:last-child { border-right: 0; }
.chiffres b { display: block; font-family: var(--f-titre); font-size: clamp(44px, 6vw, 104px); letter-spacing: -.04em; line-height: .9; font-weight: 800; }
.chiffres span { display: block; font-weight: 700; margin-top: 8px; font-size: 16px; }

/* soutenir : quatre portes */
.portes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); }
.porte { display: flex; flex-direction: column; gap: 16px; justify-content: space-between; padding: clamp(18px, 2vw, 26px); min-height: 280px; text-decoration: none; background: var(--blanc); color: var(--bleu); transition: transform .25s var(--ease); }
.porte:hover { transform: translateY(-4px); }
.porte h3 { font-size: clamp(26px, 2.3vw, 38px); line-height: .95; }
.porte p { margin: 0; font-size: 16px; line-height: 1.4; }
.porte .go { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.porte.vert { background: var(--vert); }
.porte.rose { background: var(--rose); }
.porte.jaune { background: var(--jaune); }

.manifeste { font-family: var(--f-titre); font-size: clamp(34px, 5.4vw, 92px); line-height: .96; letter-spacing: -.035em; max-width: 18ch; }
.manifeste em { font-style: normal; background: var(--jaune); color: var(--bleu); padding: 0 .08em; }

/* ---------------------------------------------------------------- listes, étapes, engagements */
.etapes { list-style: none; counter-reset: e; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 18px; }
.etapes li { counter-increment: e; border-top: 2px solid currentColor; padding-top: 12px; }
.etapes li::before { content: counter(e); font-family: var(--f-titre); font-size: 44px; line-height: 1; display: block; margin-bottom: 10px; }
.etapes b { display: block; font-size: 18px; margin-bottom: 6px; }
.etapes p { font-size: 16px; line-height: 1.45; margin: 0; }
.liste-arche { list-style: none; margin: 0; padding: 0; }
.liste-arche li { position: relative; padding-left: 28px; margin-bottom: .75em; }
.liste-arche li::before { content: ""; position: absolute; left: 0; top: .5em; width: 16px; height: 8px; border-radius: 16px 16px 0 0; background: currentColor; }
.liste-arche li b { display: block; }
.deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 56px); }
.trois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 40px); }
.kv { display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr); gap: 0; border-top: 1.5px solid currentColor; margin: 0; }
.kv dt, .kv dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--trait); font-size: 16px; }
.kv dt { font-weight: 700; padding-right: 16px; }
.on-bleu .kv dt, .on-bleu .kv dd { border-color: var(--trait-bleu); }

/* ---------------------------------------------------------------- fiche projet (album) */
.album-cover { position: relative; background: var(--bleu); color: var(--blanc); }
.album-cover .ph img { width: 100%; height: min(88vh, 980px); object-fit: cover; opacity: .98; }
.album-cover .ttl { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(18px, 3vw, 44px) var(--gut); background: linear-gradient(to top, rgba(0, 80, 125, .82), rgba(0, 80, 125, 0)); }
.album-cover h1 { font-size: clamp(44px, 7.6vw, 140px); line-height: .86; letter-spacing: -.04em; max-width: 16ch; }
.album-cover .cover-credit { font-size: 13px; opacity: .85; margin-top: 12px; }
.album-cover .k { font-weight: 700; font-size: 14.5px; margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.album-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 80px); padding-block: clamp(36px, 5vw, 80px); }
.album-head .chapo { font-size: clamp(21px, 1.9vw, 30px); line-height: 1.32; }
.masthead { font-size: 15.5px; }
.masthead .kv dt, .masthead .kv dd { font-size: 15px; }
.avec { font-family: var(--f-main); font-size: 19px; line-height: 1.5; }
.album-text { columns: 2 340px; column-gap: clamp(24px, 3vw, 56px); max-width: 1180px; }
.album-text p { break-inside: avoid-column; }
.seq { display: grid; gap: clamp(12px, 1.6vw, 22px); margin-block: clamp(28px, 4vw, 64px); }
.suivant { display: block; text-decoration: none; padding-block: clamp(36px, 5vw, 80px); border-top: 2px solid var(--bleu); }
.suivant .k { font-weight: 700; font-size: 14px; }
.suivant .t { font-size: var(--t-h1); line-height: .86; letter-spacing: -.04em; margin-top: 10px; }
.suivant:hover .t { color: var(--jaune); -webkit-text-stroke: 2px var(--bleu); }

/* livret / film */
.objet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(20px, 3vw, 56px); align-items: center; }
.objet .pages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

/* ---------------------------------------------------------------- index des projets (chronologie) */
.chrono { width: 100%; border-collapse: collapse; font-size: 16px; }
.chrono th { text-align: left; font-size: 13px; padding: 8px 12px 8px 0; border-bottom: 2px solid var(--bleu); }
.chrono td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--trait); vertical-align: top; }
.chrono tr:hover td { background: var(--voile); }
.chrono .an { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.chrono .ti { font-weight: 700; }
.chrono .ti a { text-decoration: none; }
.chrono .ti a:hover { text-decoration: underline; }
.table-wrap { overflow-x: auto; }

/* ---------------------------------------------------------------- galerie */
.filters { display: grid; gap: 12px; padding: 16px 0 24px; position: sticky; top: calc(var(--stick) - 1px); background: var(--fond); z-index: 20; border-bottom: 1.5px solid var(--bleu); margin-bottom: 26px; }
.filters .row { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.filters .row > span { font-weight: 700; font-size: 13.5px; min-width: 88px; }
.filters .count { font-size: 14px; font-weight: 700; }
[data-hide] { display: none !important; }

/* ---------------------------------------------------------------- map mOst */
.map-shell { background: var(--bleu); color: var(--blanc); }
.map-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px var(--gut); border-bottom: 1px solid var(--trait-bleu); }
.map-bar .chips .chip { border-color: var(--blanc); }
.map-bar .chips .chip[aria-pressed="true"] { background: var(--jaune); color: var(--bleu); border-color: var(--jaune); }
.map-bar .aide { font-size: 13.5px; opacity: .8; }
.map-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); min-height: calc(100vh - var(--stick) - 58px); }
.map-stage { position: relative; min-width: 0; overflow: hidden; }
.map-stage svg { display: block; width: 100%; height: 100%; min-height: 520px; }
.map-stage .land { fill: #0f6394; stroke: rgba(255, 255, 255, .38); stroke-width: .7; }
.map-stage .hi { fill: var(--vert); fill-opacity: .26; }
.map-stage .fr { fill: var(--vert); fill-opacity: .24; stroke: var(--blanc); stroke-opacity: .7; stroke-width: 1.2; }
.map-stage .grat { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: .8; }
.map-stage .ring { fill: none; stroke: rgba(255, 255, 255, .3); stroke-width: 1; stroke-dasharray: 2 5; }
.map-stage .ring-l { fill: var(--sur-bleu); font: 700 13px var(--f-texte); }
.map-stage .arc { fill: none; stroke: var(--rose); stroke-width: 2; stroke-dasharray: 7 7; animation: flow 1.4s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -28; } }
.map-stage .pt { cursor: pointer; outline: none; }
.map-stage .pt .dot { fill: var(--jaune); stroke: var(--bleu); stroke-width: 2; transition: transform .2s; transform-box: fill-box; transform-origin: 50% 100%; }
.map-stage .pt .halo { fill: var(--jaune); opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.map-stage .pt:hover .dot, .map-stage .pt:focus-visible .dot, .map-stage .pt.on .dot { transform: scale(1.35); fill: var(--blanc); }
.map-stage .pt.on .halo { opacity: .25; }
.map-stage .pt text { fill: var(--blanc); font: 700 15px var(--f-texte); paint-order: stroke; stroke: var(--bleu); stroke-width: 4px; stroke-linejoin: round; }
.map-stage .pt .sub { font-size: 12px; font-weight: 400; fill: var(--sur-bleu); }
.map-stage .pt.agg text { font-family: var(--f-titre); font-size: 22px; }
.map-stage .centre { fill: none; stroke: var(--blanc); stroke-width: 1.5; }
.map-stage .centre-l { fill: var(--blanc); font: 800 20px var(--f-titre); }
.map-panel { background: var(--blanc); color: var(--bleu); overflow-y: auto; max-height: calc(100vh - var(--stick) - 58px); position: sticky; top: calc(var(--stick) + 58px); }
.map-panel .inner { padding: 24px 24px 40px; }
.map-panel h2 { font-size: clamp(38px, 3.6vw, 58px); line-height: .9; }
.map-panel .k { font-size: 13.5px; font-weight: 700; margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 6px 12px; }
.map-panel p { font-size: 16px; line-height: 1.5; }
.map-panel h3 { font-family: var(--f-texte); font-size: 14px; font-weight: 700; letter-spacing: .02em; margin: 22px 0 8px; opacity: .7; }
.map-panel .pl { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--bleu); }
.map-panel .pl li { border-bottom: 1px solid var(--trait); }
.map-panel .pl a, .map-panel .pl span.x { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 10px; padding: 9px 0; text-decoration: none; font-size: 15.5px; line-height: 1.3; }
.map-panel .pl a:hover { background: var(--voile); }
.map-panel .pl b { font-variant-numeric: tabular-nums; }
.map-panel .photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.map-panel .photos .ph img { aspect-ratio: 1; object-fit: cover; }
.map-panel .vide { background: var(--vert); padding: 14px; font-size: 15px; }
.map-panel .loop { aspect-ratio: 1280 / 938; margin-top: 8px; }
.map-panel .close { float: right; border: 1.5px solid var(--bleu); background: none; color: var(--bleu); border-radius: 50%; width: 34px; height: 34px; cursor: pointer; font-size: 18px; }
.map-list { padding-block: 56px 90px; }
.map-list .pays { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 30px 28px; }
.map-list h3 { font-family: var(--f-texte); font-weight: 700; font-size: 14px; border-bottom: 2px solid currentColor; padding-bottom: 6px; margin-bottom: 8px; }
.map-list ul { list-style: none; margin: 0; padding: 0; }
.map-list li button { font: inherit; background: none; border: 0; color: inherit; cursor: pointer; padding: 3px 0; text-align: left; }
.map-list li button b { font-family: var(--f-titre); font-size: 26px; letter-spacing: -.03em; }
.map-list li button:hover b { background: var(--jaune); }
.map-list li small { display: block; font-size: 13.5px; opacity: .75; }

/* ---------------------------------------------------------------- visionneuse */
.lb { position: fixed; inset: 0; z-index: 120; background: rgba(0, 62, 97, .97); color: var(--blanc); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.lb[hidden] { display: none; }
.lb .lb-top { display: flex; justify-content: space-between; align-items: center; padding: 12px var(--gut); font-size: 14px; font-weight: 700; }
.lb .lb-stage { display: grid; place-items: center; padding: 0 clamp(8px, 5vw, 80px); min-height: 0; }
.lb img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.lb .lb-cap { padding: 12px var(--gut) 18px; font-size: 15px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; }
.lb button { background: none; border: 1.5px solid var(--blanc); color: var(--blanc); border-radius: 50%; width: 42px; height: 42px; cursor: pointer; font-size: 18px; }
.lb button:hover { background: var(--blanc); color: var(--bleu); }
.lb .nav-l, .lb .nav-r { position: absolute; top: 50%; transform: translateY(-50%); }
.lb .nav-l { left: 14px; }
.lb .nav-r { right: 14px; }

/* ---------------------------------------------------------------- pied de page */
.foot { background: var(--bleu); color: var(--blanc); padding-block: clamp(48px, 6vw, 90px) 28px; }
.foot .logo-big { display: block; width: min(100%, 1180px); height: auto; margin-bottom: clamp(36px, 5vw, 72px); }
.foot .cols4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; font-size: 15.5px; }
.foot h2 { font-family: var(--f-texte); font-weight: 700; font-size: 13.5px; letter-spacing: .02em; opacity: .7; margin-bottom: 10px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 5px; }
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot .soutiens { margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--trait-bleu); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; font-size: 14px; }
.foot .soutiens .slot { border: 1.5px dashed var(--trait-bleu); padding: 14px 18px; min-width: 150px; text-align: center; opacity: .75; }
.foot .bas { margin-top: 26px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 13.5px; opacity: .75; }

/* ---------------------------------------------------------------- menu mobile */
.menu { position: fixed; inset: 0; z-index: 90; background: var(--bleu); color: var(--blanc); overflow-y: auto; padding: calc(var(--top-h) + 18px) var(--gut) 40px; }
.menu[hidden] { display: none; }
.menu h2 { font-size: 34px; margin: 22px 0 8px; }
.menu h2 a { text-decoration: none; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu li a { display: block; padding: 5px 0; text-decoration: none; font-weight: 700; font-size: 18px; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1180px) {
  .nav ul { gap: 14px; }
  .nav a { font-size: 14.5px; }
  .live .count { display: none; }
  .formats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot .cols4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  :root { --top-h: 56px; }
  .nav, .top-actions .btn-contact { display: none; }
  .top { justify-content: space-between; }
  .burger { display: inline-flex; }
  .live { position: static; }
  .live .chan:nth-of-type(3) { display: none; }
  .cols { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .index { position: static; display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
  .index h2 { display: none; }
  .index ul { display: flex; gap: 8px; margin: 0; }
  .index a { border: 1.5px solid currentColor; border-radius: 999px; padding: 4px 12px; white-space: nowrap; margin: 0; }
  .home-hero, .album-head, .objet, .deux { grid-template-columns: minmax(0, 1fr); }
  .trois { grid-template-columns: minmax(0, 1fr); }
  .map-main { grid-template-columns: minmax(0, 1fr); }
  .map-panel { position: static; max-height: none; }
  .map-stage svg { min-height: 380px; }
  .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chiffres div:nth-child(2) { border-right: 0; }
  .chiffres div { padding-bottom: 18px; border-bottom: 1.5px solid currentColor; }
  .filters { position: static; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .formats, .portes, .foot .cols4 { grid-template-columns: minmax(0, 1fr); }
  .duo, .trio { grid-template-columns: minmax(0, 1fr); }
  .live .chan:nth-of-type(2) .where { display: none; }
  .top-actions .btn.jaune { padding: 8px 12px; font-size: 14px; }
  .une .cart { bottom: 74px; }
  .kv { grid-template-columns: minmax(0, 1fr); }
  .kv dt { border-bottom: 0; padding-bottom: 0; }
  .masonry { columns: 2 150px; }
  .album-text { columns: 1; }
  .strip .ph img { height: 46vh; }
  .index-list a { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .index-list .r { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* traduction des titres étrangers (fiches projets) */
.album-cover .trad, .band .trad { font-family: var(--f-texte); font-size: clamp(15px, 1.4vw, 20px); line-height: 1.35; margin-top: 12px; max-width: 60ch; opacity: .92; }

/* ils nous soutiennent / ils fabriquent les projets avec nous : logos en blanc sur le bleu mOst */
.logos-mOst { color: #fff; }
.logos-mOst .logos { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(20px, 3vw, 44px); }
.logos-mOst .logo-soutien { display: inline-flex; align-items: center; }
.logos-mOst .logo-soutien img { width: auto; max-width: min(240px, 42vw); object-fit: contain; }
.logos-mOst .groupe + .groupe { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .25); }
.logos-mOst.compact { display: flex; flex-wrap: wrap; gap: 22px 44px; align-items: flex-start; }
.logos-mOst.compact .groupe + .groupe { margin-top: 0; padding-top: 0; border-top: 0; }
.logos-mOst.compact .groupe h3 { font-size: 12.5px; margin-bottom: 10px; }
.logos-mOst.compact .logos { gap: 16px 26px; }
.logos-mOst .groupe h3 { font-family: var(--f-texte); font-weight: 700; font-size: 13.5px; letter-spacing: .02em; opacity: .8; margin-bottom: 12px; }
.bande-logos { background: var(--bleu); color: #fff; padding: clamp(20px, 3vw, 36px); }
.foot .soutiens + .soutiens { margin-top: 26px; }
.foot .soutiens { display: block; }
.foot .soutiens > span { display: block; margin-bottom: 10px; }

.soutiens-blanc .groupe + .groupe { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--trait); }
.soutiens-blanc .groupe h3 { font-family: var(--f-texte); font-weight: 700; font-size: 13.5px; letter-spacing: .02em; opacity: .75; margin-bottom: 10px; }
.logos-mOst.compact .groupe { flex: 0 0 auto; max-width: 100%; }

/* bloc-marque de l'État : couleur, sur son fond blanc */
.logos-mOst .logo-soutien.couleur img { background: #fff; }
.foot .tous-partenaires { margin: 22px 0 0; font-weight: 700; font-size: 15.5px; }
.foot .tous-partenaires a { text-decoration: underline; text-underline-offset: .22em; }

/* page contact : les personnes */
.contacts { list-style: none; margin: 0 0 22px; padding: 0; border-top: 1.5px solid currentColor; max-width: 820px; }
.contacts li { display: grid; grid-template-columns: minmax(150px, 230px) minmax(0, 1fr); gap: 2px 18px; padding: 10px 0; border-bottom: 1px solid var(--trait); text-align: left; }
.contacts b { font-weight: 700; }

/* le mur des partenaires : tous les noms, territoire par territoire (affiche de programmation) */
.mur-band { padding: clamp(28px, 4vw, 56px) clamp(18px, 3vw, 44px); }
.mur-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 14px 40px; align-items: end; margin-bottom: clamp(22px, 3vw, 40px); }
.mur-head h2 { font-size: var(--t-h2); line-height: .92; }
.mur-head p { margin: 0; max-width: 60ch; }
.mur { border-top: 2px solid var(--bleu); }
.mur-ville { display: grid; grid-template-columns: minmax(130px, 200px) minmax(0, 1fr); gap: 6px 28px; padding: 14px 0 16px; border-bottom: 1.5px solid var(--bleu); }
.mur-ville h3 { font-family: var(--f-texte); font-weight: 700; font-size: 14.5px; letter-spacing: .01em; padding-top: 6px; }
.mur-noms { margin: 0; font-family: var(--f-titre); font-weight: 800; font-size: clamp(19px, 1.9vw, 30px); line-height: 1.12; letter-spacing: -.02em; }
.mur-noms span { display: inline; }
.mur-noms small { font-family: var(--f-texte); font-weight: 700; font-size: .5em; letter-spacing: .01em; vertical-align: .22em; opacity: .85; }
.mur-noms span + span::before { content: ""; display: inline-block; width: .62em; height: .31em; margin: 0 .42em .12em; border-radius: .62em .62em 0 0; background: var(--bleu); vertical-align: middle; }
@media (max-width: 980px) { .mur-head { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .mur-ville, .contacts li { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- films en entier : lecteur et sous-titres */
.film { margin: 0; }
.film-cadre { position: relative; background: var(--bleu); }
.film-cadre video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #003a5c; }
.film-cadre video::cue { font-family: var(--f-texte); font-size: 1.05em; line-height: 1.3; color: #fff; background: rgba(0, 58, 92, .78); }
.film-go { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; border: 0; background: rgba(0, 80, 125, .38);
  color: #fff; cursor: pointer; font: 700 clamp(18px, 2vw, 28px)/1.1 var(--f-texte); }
.film-go small { font-size: 14px; opacity: .9; }
.film-go .tri { width: 0; height: 0; border-left: 34px solid var(--jaune); border-top: 20px solid transparent; border-bottom: 20px solid transparent; margin-left: 8px; }
.film-go:hover { background: rgba(0, 80, 125, .2); }
.film.lance .film-go { display: none; }
.film-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 18px; padding: 12px 0 0; font-size: 14.5px; font-weight: 700; }
.film-bar .st { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.film-bar .st > span { opacity: .75; margin-right: 4px; }
.film-bar .st button { font: 700 13px/1 var(--f-texte); border: 1.5px solid currentColor; border-radius: 999px; padding: 6px 11px; background: none; color: inherit; cursor: pointer; }
.film-bar .st button[aria-pressed="true"] { background: var(--jaune); color: var(--bleu); border-color: var(--jaune); }

/* ---------------------------------------------------------------- le hall d'expo */
.hall-prog { position: fixed; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + var(--stick)); height: 3px; z-index: 58; background: rgba(0, 80, 125, .12); }
.hall-prog i { display: block; height: 100%; width: 0; background: var(--jaune); }
.hall-entree { position: relative; min-height: calc(100vh - var(--stick)); background: var(--bleu); color: #fff; display: grid; align-items: end; overflow: hidden; }
.hall-entree .hall-video { position: absolute; inset: 0; }
.hall-entree .hall-video .loop { height: 100%; }
.hall-entree .hall-video video { height: 100%; object-fit: cover; opacity: .5; }
.hall-entree-txt { position: relative; z-index: 1; padding-block: 16vh 9vh; }
.hall-entree h1 { font-size: var(--t-mega); line-height: .84; letter-spacing: -.045em; }
.hall-entree .chapo { max-width: 58ch; margin: 26px 0 24px; }
.salle { position: relative; }
.salle.fond-bleu { background: var(--bleu); color: #fff; }
.salle.fond-jaune { background: var(--jaune); }
.salle.fond-vert { background: var(--vert); }
.salle.fond-rose { background: var(--rose); }
.salle-ouv { position: relative; height: 100vh; min-height: 560px; overflow: hidden; background: var(--bleu); }
.salle-img, .salle-img .ph, .salle-img .lb-link { position: absolute; inset: 0; height: 100%; }
.salle-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.07); transition: transform 1.8s var(--ease); }
.salle.vu .salle-img img { transform: scale(1); }
.salle-ttl { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(18px, 3vw, 48px) var(--gut); color: #fff; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 80, 125, .88), rgba(0, 80, 125, .35) 55%, rgba(0, 80, 125, 0)); }
.salle-num { font-weight: 700; font-size: 14px; letter-spacing: .04em; margin: 0 0 10px; }
.salle-ttl h2 { font-size: clamp(54px, 11vw, 204px); line-height: .84; letter-spacing: -.045em; max-width: 13ch; }
.salle-ttl h2.long { font-size: clamp(42px, 7.2vw, 132px); max-width: 17ch; }
.salle-lieu { margin: 14px 0 0; font-weight: 700; font-size: clamp(15px, 1.3vw, 19px); }
.salle-corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 96px); padding-block: clamp(40px, 6vw, 100px); align-items: start; }
.salle-cartel p { max-width: 58ch; }
.salle-cartel p:first-child { font-size: var(--t-lead); line-height: 1.45; }
.salle-expo b { display: block; font-size: 13.5px; letter-spacing: .02em; opacity: .75; }
.salle-mot { margin: 0; }
.salle-mot p { font-family: var(--f-main); font-size: clamp(30px, 3.6vw, 60px); line-height: 1.1; text-align: left; margin: 0; }
.salle-mot footer { font-weight: 700; font-size: 14px; margin-top: 16px; opacity: .8; }
.salle-mur { position: relative; padding-bottom: clamp(36px, 5vw, 80px); }
.mur-rail { display: flex; gap: clamp(10px, 1.4vw, 22px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gut) 14px; scrollbar-width: thin; }
.mur-rail:focus-visible { outline-offset: -3px; }
.mur-rail .ph { flex: none; scroll-snap-align: center; }
.mur-rail .ph img { height: clamp(300px, 70vh, 780px); width: auto; max-width: none; }
.mur-rail figcaption { max-width: 60ch; }
.mur-nav { display: flex; gap: 10px; justify-content: flex-end; padding: 8px var(--gut) 0; }
.mur-nav button { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid currentColor; background: none; color: inherit; font-size: 18px; cursor: pointer; }
.mur-nav button:hover { background: var(--bleu); color: #fff; border-color: var(--bleu); }
.fond-bleu .mur-nav button:hover { background: #fff; color: var(--bleu); border-color: #fff; }
.salle-film { padding-bottom: clamp(40px, 6vw, 100px); }
.salle-film .pellicule { max-width: 1120px; margin-inline: auto; }
.salle-lien { text-align: center; margin-top: 18px; }
.hall-plan { position: fixed; right: 14px; top: 50%; transform: translateY(-50%); z-index: 45; background: rgba(0, 80, 125, .93); color: #fff; padding: 12px 14px; border-radius: 14px; font-size: 13px; font-weight: 700; }
.hall-plan p { margin: 0 0 6px; font-size: 12px; opacity: .7; }
.hall-plan ol { list-style: none; margin: 0; padding: 0; }
.hall-plan a { display: flex; gap: 8px; padding: 3px 0; text-decoration: none; opacity: .55; text-align: left; }
.hall-plan a .n { font-variant-numeric: tabular-nums; }
.hall-plan a .t { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .35s var(--ease); }
.hall-plan:hover a .t, .hall-plan:focus-within a .t { max-width: 240px; }
.hall-plan a[aria-current] { opacity: 1; }
.hall-plan a[aria-current] .n { color: var(--jaune); }
.hall-sortie { padding-block: clamp(56px, 7vw, 110px); }
.hall-sortie h2 { font-size: var(--t-h2); margin-bottom: 18px; }
.hall-sortie p { max-width: 62ch; }
.home-hall .hall-porte { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px); text-decoration: none; }
.home-hall .hall-porte > div { min-width: 0; }
.home-hall .hall-porte img { display: block; aspect-ratio: 3 / 4; width: 100%; height: auto; object-fit: cover; }
.home-hall .hall-porte b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--jaune); color: var(--bleu); padding: 14px 24px; border-radius: 999px;
  font-size: clamp(16px, 1.7vw, 24px); white-space: nowrap; transition: transform .25s var(--ease); }
.home-hall .hall-porte:hover b { transform: translate(-50%, -50%) scale(1.05); }
@media (max-width: 980px) {
  .hall-plan { display: none; }
  .hall-prog { top: calc(env(safe-area-inset-top, 0px) + var(--top-h)); }
  .salle-corps { grid-template-columns: minmax(0, 1fr); }
  .salle-ouv { height: 84vh; }
}
@media (max-width: 640px) { .mur-rail .ph img { height: 58vh; } }

/* ---------------------------------------------------------------- langues : fr · pt · en · es */
.langues { display: flex; align-items: center; gap: 2px; margin-right: 4px; font-size: 13px; font-weight: 700; }
.langues a { text-decoration: none; padding: 5px 7px; border-radius: 999px; opacity: .72; line-height: 1; }
.langues a:hover { opacity: 1; }
.langues a[aria-current] { background: var(--blanc); color: var(--bleu); opacity: 1; }
.langues-menu { margin: 0 0 18px; font-size: 16px; gap: 6px; }
.langues-menu a { border: 1.5px solid var(--trait-bleu); padding: 7px 12px; }
@media (max-width: 640px) { .top .langues { display: none; } }
@media (min-width: 641px) { .langues-menu { display: none; } }

/* robustesse des en-têtes de bande et de la porte du hall (petits écrans, moteurs sans flex complet) */
.band-head > * { min-width: 0; max-width: 100%; }
@media (max-width: 640px) {
  .band-head { display: block; }
  .band-head > * + * { margin-top: 14px; }
}
.home-hall .hall-porte b { left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: max-content; height: max-content; transform: none; }
.home-hall .hall-porte:hover b { transform: scale(1.05); }

/* ---------------------------------------------------------------- en-tête : 7 rubriques sans débordement */
@media (max-width: 1320px) {
  .nav a { gap: 0; }
  .nav a::before { position: absolute; left: 50%; bottom: -4px; margin-left: -6px; }
}
@media (max-width: 1180px) {
  .nav { display: none; }
  .top { justify-content: space-between; }
  .burger { display: inline-flex; }
}

/* ---------------------------------------------------------------- le cinéma mOst (sous-site) */
body.cine { --nuit: #003a5c; background: var(--bleu); color: var(--blanc); transition: background .8s var(--ease); }
body.cine.noir { background: var(--nuit); }
.contour { display: block; font-family: var(--f-titre); font-weight: 800; letter-spacing: -.05em; line-height: .8; text-transform: lowercase; }
@supports (-webkit-text-stroke: 1px) { .contour { color: transparent; -webkit-text-stroke: 2px var(--blanc); } }
.cine-top { position: fixed; top: 0; left: 0; right: 0; z-index: 80; display: flex; align-items: center; gap: 10px clamp(14px, 2.4vw, 36px);
  padding: 14px var(--gut); color: var(--blanc); background: linear-gradient(to bottom, rgba(0, 58, 92, .85), rgba(0, 58, 92, 0));
  transition: opacity .6s var(--ease), transform .6s var(--ease); }
.cine-top .marque { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.cine-top .marque img { height: 30px; width: auto; display: block; }
.cine-top .marque b { font-family: var(--f-titre); font-size: 22px; letter-spacing: -.03em; }
.cine-top nav { flex: 1; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px clamp(14px, 2vw, 30px); font-weight: 700; font-size: 15px; }
.cine-top nav a { text-decoration: none; opacity: .82; white-space: nowrap; }
.cine-top nav a:hover, .cine-top nav a[aria-current] { opacity: 1; text-decoration: underline; text-underline-offset: .3em; }
.cine-top .top-actions { flex: none; display: flex; align-items: center; }
body.cine.noir .cine-top { opacity: 0; transform: translateY(-100%); pointer-events: none; }
body.cine .apres-ecran, body.cine .foot { transition: opacity .8s var(--ease); }
body.cine.noir .apres-ecran, body.cine.noir .foot { opacity: .1; }
body.cine .foot { background: var(--nuit); }
/* la salle : écran d'accueil */
.cine-hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: var(--nuit); }
.cine-boucles, .cine-boucle { position: absolute; inset: 0; }
.cine-boucle { opacity: 0; transition: opacity 1.8s ease; }
.cine-boucle.on { opacity: 1; }
.cine-boucle .loop { height: 100%; }
.cine-boucle video { width: 100%; height: 100%; object-fit: cover; }
.cine-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 58, 92, .92) 0%, rgba(0, 58, 92, .2) 55%, rgba(0, 58, 92, .5) 100%); }
.cine-hero-txt { position: absolute; left: 0; right: 0; bottom: 6vh; z-index: 2; padding: 0 var(--gut); }
.cine-hero-txt .k { font-weight: 700; margin: 0 0 10px; }
.cine-hero h1.contour { font-size: clamp(92px, 23vw, 400px); -webkit-text-stroke-width: 2.5px; }
.cine-hero .ligne { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 18px 40px; margin-top: 22px; }
.cine-hero .ligne p { flex: 1 1 300px; min-width: 0; max-width: 56ch; margin: 0; font-size: var(--t-lead); line-height: 1.4; }
/* à l'affiche : la liste des séances, façon générique */
.cine-affiche-bloc { padding-block: clamp(70px, 9vw, 150px) 30px; }
.cine-affiche-bloc .band-head h2, .cine-bobines-band .band-head h2 { font-size: var(--t-h1); }
.seances { border-top-color: rgba(255, 255, 255, .6); }
.seances li { border-bottom-color: rgba(255, 255, 255, .6); }
.seances a { grid-template-columns: 64px minmax(0, 1.6fr) minmax(0, 1fr) 36px; gap: 20px; padding: clamp(16px, 2vw, 28px) 0; }
.seances .n { font-weight: 700; font-variant-numeric: tabular-nums; }
.seances .t { font-family: var(--f-titre); font-weight: 800; font-size: clamp(34px, 6vw, 108px); line-height: .9; letter-spacing: -.045em; transition: color .3s; }
.seances .m { font-size: 15px; font-weight: 700; opacity: .88; line-height: 1.45; }
.seances .go { font-size: 28px; transition: transform .3s var(--ease); }
@supports (-webkit-text-stroke: 1px) { .seances a:hover .t, .seances a:focus-visible .t { color: transparent; -webkit-text-stroke: 1.5px var(--blanc); } }
.seances a:hover .go { transform: translate(4px, -4px); }
.seance-img { position: fixed; z-index: 70; top: 0; left: 0; width: min(34vw, 460px); aspect-ratio: 3 / 2; pointer-events: none; opacity: 0;
  transition: opacity .25s; background: var(--nuit) center / cover no-repeat; }
.seance-img.on { opacity: 1; }
.cine-affiches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 22px); padding-block: 40px clamp(60px, 8vw, 120px); }
.cine-affiche { position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; text-decoration: none; background: var(--nuit); }
.cine-affiche img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.cine-affiche:hover img { transform: scale(1.05); }
.cine-affiche .c { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px; display: grid; gap: 8px;
  background: linear-gradient(to top, rgba(0, 58, 92, .95), rgba(0, 58, 92, 0)); }
.cine-affiche .c b { font-family: var(--f-titre); font-size: clamp(26px, 2.6vw, 44px); line-height: .92; letter-spacing: -.03em; }
.cine-affiche .k { font-size: 13.5px; font-weight: 700; }
.cine-bobines-band { background: var(--jaune); color: var(--bleu); padding-block: clamp(56px, 7vw, 110px); }
.cine-notes { padding-block: clamp(56px, 7vw, 110px); }
/* la séance */
.cine-ecran { background: var(--nuit); padding-top: 64px; }
.cine-ecran .film-cadre { background: var(--nuit); }
.cine-ecran .film-cadre video { aspect-ratio: auto; width: 100%; height: min(calc(100vh - 128px), 56.25vw); object-fit: contain; background: var(--nuit); }
.cine-ecran .film-go { background: rgba(0, 58, 92, .35); font-size: clamp(20px, 2.6vw, 38px); }
.cine-ecran .film-go .tri { border-left-width: 54px; border-top-width: 32px; border-bottom-width: 32px; }
.cine-ecran .film-bar { padding: 12px var(--gut) 16px; color: var(--blanc); }
.cine-ecran .film-bar .t { font-family: var(--f-titre); font-size: 18px; }
.film-bar .plein { font: 700 13px/1 var(--f-texte); border: 1.5px solid currentColor; border-radius: 999px; padding: 6px 12px; background: none; color: inherit; cursor: pointer; }
.cine-titre { padding-block: clamp(40px, 6vw, 100px) 10px; }
.cine-titre .k { font-weight: 700; margin: 0 0 14px; }
.cine-titre h1 { font-size: clamp(52px, 10vw, 180px); line-height: .84; letter-spacing: -.045em; max-width: 14ch; }
.cine-titre h1.contour { -webkit-text-stroke-width: 2.5px; font-size: clamp(90px, 20vw, 340px); max-width: none; }
.cine-titre .trad { font-size: clamp(16px, 1.5vw, 21px); margin-top: 14px; opacity: .9; }
.cine-titre .chapo { max-width: 60ch; margin-top: 28px; font-size: var(--t-lead); line-height: 1.45; }
.cine-cartel { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 96px); padding-block: clamp(30px, 4vw, 70px); }
.cine-cartel .synopsis .chapo { font-size: clamp(21px, 1.9vw, 30px); line-height: 1.34; }
.cine-cartel .kv { border-top-color: rgba(255, 255, 255, .6); }
.cine-cartel .kv dt, .cine-cartel .kv dd { border-bottom-color: rgba(255, 255, 255, .22); }
.cine-photogrammes { padding-block: 10px clamp(40px, 5vw, 80px); }
.cine-photogrammes .mur-rail .ph img { height: clamp(240px, 62vh, 720px); width: auto; }
.cine-suite { display: grid; gap: 30px; padding-bottom: clamp(50px, 6vw, 90px); }
.cine-suite > .btn { justify-self: start; }
@supports (-webkit-text-stroke: 1px) { .cine-suite .suivant:hover .t { color: transparent; -webkit-text-stroke: 2px var(--blanc); } }
/* les bobines */
.cine-titre-bobines { padding-top: 130px; }
.cine-bobine { padding-block: 20px 50px; }
.cine-bobine .pellicule { max-width: min(100%, calc(86vh * 1280 / 938 + 68px)); margin-inline: auto; }
.cine-bobine-txt { padding-top: 18px; }
.cine-bobine-txt .k { font-weight: 700; margin: 0 0 6px; }
.cine-bobine-txt h2 { font-size: var(--t-h2); }
/* les portes du cinéma : fiches et accueil */
.cine-porte { position: relative; display: block; text-decoration: none; color: var(--blanc); overflow: hidden; }
.cine-porte .ph { margin: 0; }
.cine-porte .ph img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 1.4s var(--ease); }
.cine-porte:hover .ph img { transform: scale(1.03); }
.cine-porte-go { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center;
  background: rgba(0, 58, 92, .42); font: 700 clamp(18px, 2.2vw, 32px)/1.15 var(--f-texte); padding: 20px; }
.cine-porte-go .tri { width: 0; height: 0; border-left: 40px solid var(--jaune); border-top: 24px solid transparent; border-bottom: 24px solid transparent; margin-left: 10px; }
.cine-porte-go small { font-size: 14px; }
.home-cine a { position: relative; display: block; color: var(--blanc); text-decoration: none; overflow: hidden; background: #003a5c; }
.home-cine img { display: block; width: 100%; height: min(86vh, 900px); object-fit: cover; opacity: .85; transition: transform 1.6s var(--ease); }
.home-cine a:hover img { transform: scale(1.03); }
.home-cine-txt { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(20px, 3vw, 48px) var(--gut); display: grid; gap: 14px;
  background: linear-gradient(to top, rgba(0, 58, 92, .9), rgba(0, 58, 92, 0)); }
.home-cine .contour { font-size: clamp(76px, 18vw, 320px); -webkit-text-stroke-width: 2.5px; }
.home-cine .l { font-weight: 700; font-size: clamp(16px, 1.5vw, 22px); }
@media (max-width: 980px) {
  .seances a { grid-template-columns: 40px minmax(0, 1fr) 28px; gap: 6px 14px; }
  .seances .m { grid-column: 2 / 3; grid-row: 2; }
  .seances .go { grid-column: 3; grid-row: 1; }
  .cine-affiches, .cine-cartel { grid-template-columns: minmax(0, 1fr); }
  .cine-affiche { aspect-ratio: 4 / 5; }
  .seance-img { display: none; }
}
@media (max-width: 860px) {
  .cine-top { flex-wrap: wrap; padding-block: 10px 12px; }
  .cine-top .marque { order: 1; }
  .cine-top .top-actions { order: 2; margin-left: auto; }
  .cine-top nav { order: 3; flex: 1 0 100%; justify-content: flex-start; font-size: 14px; gap: 4px 16px; }
  .cine-ecran { padding-top: 96px; }
  .cine-ecran .film-cadre video { height: auto; aspect-ratio: 16 / 9; }
  .cine-titre-bobines { padding-top: 120px; }
}

/* chiffres longs (+100 000) : la taille suit la colonne, identique pour les quatre */
.chiffres.long div { container-type: inline-size; }
.chiffres.long b { font-size: clamp(26px, 3.9vw, 84px); font-size: clamp(26px, 18cqi, 104px); }

/* la restitution en grand (fiche projet : bloc « au musée sauvage ») */
.restit { margin-block: clamp(48px, 7vw, 120px); }
.restit-tete { margin-bottom: clamp(18px, 2.4vw, 34px); }
.restit-tete h2 { font-size: var(--t-h2); margin: 4px 0 14px; }
.restit-tete p.just { max-width: 62ch; }
.restit-une img, .restit-large img { display: block; width: 100%; height: auto; }
.restit-trio, .restit-large, .restit-mur { margin-top: clamp(12px, 1.6vw, 22px); }
.restit-mur { columns: 3 280px; }
.restit-credit { font-size: 14px; opacity: .75; margin-top: 12px; }

/* quatre bobines super 8 : deux par ligne */
.quatre { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 40px); }
@media (max-width: 640px) { .quatre { grid-template-columns: minmax(0, 1fr); } }

/* 30/09 · la grande image (la carte collective), les voix d'un quartier, l'exposition mur par mur */
.grand { background: var(--vert); padding-block: clamp(48px, 6vw, 100px); margin-block: clamp(36px, 5vw, 80px); }
.grand-tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 56px; align-items: end; margin-bottom: clamp(20px, 2.4vw, 36px); }
.grand-tete h2 { font-size: var(--t-h1); line-height: .9; }
.grand-tete p.just { margin: 0; max-width: 60ch; }
.grand-img img { display: block; width: 100%; height: auto; }
.grand-mots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 40px); margin-top: clamp(26px, 3vw, 48px); }
.grand-mot { margin: 0; }
.grand-mot p { font-family: var(--f-main); font-size: clamp(25px, 2.3vw, 38px); line-height: 1.12; text-align: left; text-align-last: auto; margin: 0; }
.grand-src, .grand-credit { font-size: 14px; opacity: .75; margin: 12px 0 0; }
.grand-src { font-weight: 700; opacity: .85; }

.voix { background: var(--bleu); color: var(--blanc); padding-block: clamp(56px, 7vw, 120px); margin-block: clamp(36px, 5vw, 80px); }
.voix-tete h2 { font-size: var(--t-mega); line-height: .86; letter-spacing: -.045em; margin: 6px 0 22px; }
.voix-tete p.just { max-width: 62ch; font-size: var(--t-lead); line-height: 1.45; }
.voix-tout .l-stop, .voix-tout[aria-pressed="true"] .l-go { display: none; }
.voix-tout[aria-pressed="true"] .l-stop { display: inline; }
.voix-liste { list-style: none; margin: clamp(36px, 5vw, 72px) 0 0; padding: 0; }
.piste { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 18px clamp(22px, 3.4vw, 64px); padding-block: clamp(24px, 2.8vw, 40px); border-top: 1px solid var(--trait-bleu); }
.piste:last-child { border-bottom: 1px solid var(--trait-bleu); }
.piste-tete { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 10px 16px; }
.piste-go { width: 58px; height: 58px; border-radius: 50%; border: 0; background: var(--jaune); cursor: pointer; position: relative; flex: none; }
.piste-go::before { content: ""; position: absolute; left: 23px; top: 18px; border-left: 18px solid var(--bleu); border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.piste-go[aria-pressed="true"]::before { left: 20px; top: 19px; width: 6px; height: 20px; border: 0; background: var(--bleu); box-shadow: 12px 0 0 var(--bleu); }
.piste-go:hover { background: var(--blanc); }
.piste-n { font-family: var(--f-titre); font-weight: 800; font-size: 15px; opacity: .6; font-variant-numeric: tabular-nums; }
.piste-t { font-size: var(--t-h3); line-height: 1.02; text-wrap: balance; }
.piste-tete, .piste-tete *, .piste-mot, .piste-mot p, .cartel-t, .xmur-n { text-align: left; text-align-last: auto; }
.piste-d { grid-column: 3; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; opacity: .75; }
.piste-onde { position: relative; height: clamp(54px, 5vw, 76px); margin: 18px 0 16px; cursor: pointer; touch-action: none; }
.piste-onde svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: rgba(255, 255, 255, .34); }
.piste-onde .onde-p { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--p, 0%)) 0 0); }
.piste-onde .onde-p svg { fill: var(--jaune); }
.piste-onde:focus-visible { outline-offset: 6px; }
.piste audio { display: block; width: 100%; margin: 0 0 16px; }
.voix.js .piste audio { display: none; }
.piste-mot { margin: 6px 0 0; }
.piste-mot p { font-family: var(--f-titre); font-weight: 800; font-size: clamp(21px, 2.1vw, 34px); line-height: 1.08; letter-spacing: -.02em; text-align: left; text-align-last: auto; margin: 0; }
.piste.on .piste-t, .piste.on .piste-mot p { color: var(--jaune); }
.piste-txt { padding-top: 4px; }
.piste-txt p { font-size: 17px; line-height: 1.6; margin: 0 0 .55em; padding: 3px 9px; margin-left: -9px; border-radius: 4px; transition: background .25s, color .25s; }
.voix.js .piste-txt p { cursor: pointer; }
.voix.js .piste-txt p:hover { background: rgba(255, 255, 255, .08); }
.piste-txt p.q { font-style: italic; opacity: .72; }
.piste-txt p.on, .voix.js .piste-txt p.on:hover { background: var(--jaune); color: var(--bleu); opacity: 1; }
.voix-credit { font-size: 14px; opacity: .75; margin: 22px 0 0; }
@media (max-width: 980px) { .piste { grid-template-columns: minmax(0, 1fr); } .grand-tete, .grand-mots { grid-template-columns: minmax(0, 1fr); } }

.murs-x { margin-block: clamp(48px, 7vw, 120px); }
.murs-tete { margin-bottom: clamp(20px, 2.6vw, 40px); }
.murs-tete h2 { font-size: var(--t-h2); margin: 4px 0 14px; }
.murs-tete p.just { max-width: 62ch; margin: 0; }
.xmur { padding-block: clamp(30px, 4.4vw, 72px); }
.xmur.fond-bleu { background: var(--bleu); color: var(--blanc); }
.xmur.fond-jaune { background: var(--jaune); }
.xmur.fond-vert { background: var(--vert); }
.xmur.fond-rose { background: var(--rose); }
.xmur-n { display: flex; flex-wrap: wrap; gap: 6px 12px; font-weight: 700; font-size: 13.5px; margin: 0 0 16px; text-align: left; text-align-last: auto; }
.xmur-n .sep { opacity: .5; }
.xmur-rang { display: flex; gap: clamp(14px, 2.2vw, 40px); align-items: flex-start; }
.xmur-mots { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(16px, 2.4vw, 40px); margin-top: clamp(18px, 2.6vw, 44px); }
.xmur-mots p { margin: 0; font-size: 1.02rem; line-height: 1.55; text-align: justify; text-align-last: left; hyphens: none; }
.xmur-rang + .xmur-rang { margin-top: clamp(18px, 2.6vw, 44px); }
.xmur-f { flex: var(--r) 1 0%; min-width: 0; }
.xmur-rang.un .xmur-f { flex: none; width: min(100%, calc(78vh * var(--r))); }
.xmur-f figure.ph { margin: 0; }
.xmur-f img { display: block; width: 100%; height: auto; }
.cartel { margin-top: 12px; max-width: 48ch; }
.cartel-t { font-family: var(--f-titre); font-weight: 800; font-size: clamp(17px, 1.35vw, 22px); line-height: 1.1; letter-spacing: -.015em; text-align: left; text-align-last: auto; margin: 0 0 6px; }
.cartel-l { font-size: 15px; line-height: 1.5; margin: 0; }
.murs-credit { font-size: 14px; opacity: .75; margin: 14px 0 0; }
@media (max-width: 700px) { .xmur-rang { flex-direction: column; } .xmur-f, .xmur-rang.un .xmur-f { flex: none; width: 100%; } }