/* Fullsix, 2010-2011 · page groupée. Habillage portfolio commun : Geist, monochrome (papier clair, scène sombre).
   Idée propre au projet : le « -t » d’APRR, mot de la fin de chaque affiche, sert de sélecteur ; la couleur n'entre que par les travaux montrés. */
@font-face{font-family:"Geist";font-weight:400;font-display:swap;src:url(fonts/geist-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Geist";font-weight:500;font-display:swap;src:url(fonts/geist-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-weight:400;font-display:swap;src:url(fonts/geist-mono-latin-400-normal.woff2) format("woff2")}
:root{
  color-scheme:only light;
  --paper:#ececea; --ink:#121314; --muted:#5d5f64; --line:rgba(18,19,20,.14);
  --stage:#0b0c0d; --stage-ink:#ebebe8; --stage-muted:#9a9da3; --stage-line:rgba(235,235,232,.14);
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);--ease-out:cubic-bezier(.23,1,.32,1);
  --frame:1920px;
  --gutter:max(20px, env(safe-area-inset-left, 0px), calc((100vw - var(--frame)) / 2 + 20px));
  --gutter-r:max(20px, env(safe-area-inset-right, 0px), calc((100vw - var(--frame)) / 2 + 20px));
  --sec:clamp(96px, 12vw, 200px);
}
@media (min-width:861px){:root{--gutter:max(48px, calc((100vw - var(--frame)) / 2 + 48px));--gutter-r:max(64px, calc((100vw - var(--frame)) / 2 + 64px))}}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:clamp(16px, 10px + .45vw, 20px);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:2px}
.wrap{padding-left:var(--gutter);padding-right:var(--gutter-r)}
.mono{font-family:var(--mono);font-size:clamp(12px, 9px + .22vw, 14px);letter-spacing:.01em;line-height:1.45}
.muted{color:var(--muted)}
.line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.line>span{display:block}
section[data-cs-theme=dark]{background:var(--stage);color:var(--stage-ink)}
section[data-cs-theme=dark] .muted{color:var(--stage-muted)}
figure{margin:0}
figcaption,.cap{margin-top:12px;color:var(--muted)}
[data-cs-theme=dark] figcaption,[data-cs-theme=dark] .cap{color:var(--stage-muted)}

.top{position:fixed;inset:0 0 auto;z-index:50;display:flex;justify-content:space-between;align-items:center;
  padding:calc(18px + env(safe-area-inset-top,0px)) var(--gutter-r) 18px var(--gutter);color:#fff;mix-blend-mode:difference;pointer-events:none;transition:transform .5s cubic-bezier(.23,1,.32,1)}
.cs-on .top{transform:translateY(-110%)}
.top a{pointer-events:auto;text-decoration:none}
.top .name{font-weight:500;font-size:15px;letter-spacing:-.01em}
.top nav{display:flex;gap:28px;font-size:14px}
@media (max-width:560px){.top nav{gap:16px;font-size:13px}}

/* Titres de chapitre (même système que les autres études) */
.chap{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-bottom:clamp(40px,6vw,88px)}
.chap-n{display:flex;align-items:center;gap:12px;color:var(--muted)}
[data-cs-theme=dark] .chap-n{color:var(--stage-muted)}
.chap-n i{display:block;width:32px;height:1.5px;background:currentColor}
.chap h2{font-weight:500;font-size:clamp(36px, 18px + 3.6vw, 88px);line-height:1;letter-spacing:-.035em;max-width:14ch}
.txt{display:grid;gap:1em;max-width:36em}
.lede{font-size:clamp(19px, 13px + .7vw, 26px);line-height:1.4;letter-spacing:-.012em}
.pair{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:start}
@media (min-width:1100px){.pair{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}.pair.rev{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
section{position:relative;padding-top:var(--sec);padding-bottom:var(--sec)}
@keyframes cue{0%{transform:translateY(-14px)}100%{transform:translateY(30px)}}
.end h2{font-weight:500;font-size:clamp(32px, 16px + 3vw, 72px);letter-spacing:-.035em;line-height:1;max-width:16ch}
.credits{display:grid;gap:12px 28px;margin-top:48px;border-top:1px solid var(--stage-line);padding-top:24px}
@media (min-width:900px){.credits{grid-template-columns:repeat(4,minmax(0,1fr))}}
.credits dt{color:var(--stage-muted)}

/* Apparitions : titres et quelques ensembles seulement */
.js .reveal-lines .line>span{transform:translateY(105%)}
.js .reveal-lines.in .line>span{transform:none;transition:transform .9s var(--ease)}
.js .reveal-lines.in .line:nth-child(2)>span{transition-delay:.08s}
/* Apparition des visuels : jamais d'un coup. Chaque bloc attend que son image soit décodée, puis monte en fondu (une fois). */
.js .rv{opacity:0;transform:translateY(28px)}
.js .rv.in{opacity:1;transform:none;transition:opacity .9s cubic-bezier(.23,1,.32,1) var(--d,0s),transform 1.1s cubic-bezier(.22,1,.36,1) var(--d,0s)}

@media (prefers-reduced-motion:reduce){.js .rv{transform:none}.js .rv.in{transition:opacity .6s ease-out}
  .js .reveal-lines .line>span{transform:none!important;transition:none!important}}


/* ── Ouverture : même modèle que les autres études (scène sombre, photo en fond qui s'efface vers le titre, métadonnées en pied) ── */
.hero{position:relative;height:100vh;height:100svh;min-height:600px;max-height:1300px;padding:0;background:var(--stage);color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0 0 0 clamp(0px,22vw,440px);margin:0;z-index:1}
.hero-ph{position:absolute;inset:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 44%);mask-image:linear-gradient(90deg,transparent 0%,#000 44%)}
.hero-ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:58% 50%}
.hero-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,12,13,.55) 0%,rgba(11,12,13,0) 26%);pointer-events:none}
.hero-title{position:absolute;left:var(--gutter);top:46%;transform:translateY(-50%);max-width:min(40vw,600px);z-index:4}
.hero-title .kick{color:rgba(255,255,255,.56);margin:0 0 22px}
.hero-title h1{font-size:clamp(64px,8.6vw,150px);font-weight:500;letter-spacing:-.05em;line-height:.88;padding-bottom:.04em;margin:0 0 0 -.03em}
.hero-title .desc{margin:28px 0 0;font-size:clamp(17px,1.45vw,22px);line-height:1.38;color:rgba(255,255,255,.74);letter-spacing:-.01em;max-width:21em}
.hero-meta{position:absolute;left:var(--gutter);right:calc(var(--gutter-r) + 160px);bottom:calc(28px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:1.2fr .5fr 1fr 1.2fr;gap:24px;margin:0;color:rgba(255,255,255,.86);z-index:4}
.hero-meta dt{color:rgba(255,255,255,.5);margin-bottom:4px}
.hero-meta dd{margin:0;font-size:15px;line-height:1.35}
.hero-cue{position:absolute;right:var(--gutter-r);bottom:calc(28px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.56);z-index:4}
.hero-cue i{position:relative;display:block;width:1px;height:28px;background:rgba(255,255,255,.18);overflow:hidden}
.hero-cue i::after{content:"";position:absolute;left:0;top:0;width:1px;height:12px;background:#fff;animation:cue 2.2s cubic-bezier(.65,0,.35,1) infinite}
@keyframes cue{0%{transform:translateY(-14px)}100%{transform:translateY(30px)}}
@media (max-width:860px){
  .hero{height:auto;min-height:100svh;max-height:none;display:flex;flex-direction:column;justify-content:flex-end;padding:0 0 calc(28px + env(safe-area-inset-bottom,0px))}
  .hero-bg{inset:0 0 auto 0;height:70svh;min-height:420px}
  .hero-ph{-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
  .hero-ph img{object-position:56% 50%}
  .hero-ph::after{background:linear-gradient(180deg,rgba(11,12,13,.45) 0%,rgba(11,12,13,0) 20%)}
  .hero-title{position:relative;left:auto;top:auto;transform:none;max-width:none;margin-top:58svh;padding:0 var(--gutter-r) 0 var(--gutter)}
  .hero-title .kick{margin-bottom:14px}
  .hero-title h1{font-size:clamp(64px,19vw,104px)}
  .hero-title .desc{margin-top:16px;font-size:16px}
  .hero-meta{position:relative;left:auto;right:auto;bottom:auto;margin-top:28px;padding:0 var(--gutter-r) 0 var(--gutter);grid-template-columns:1fr 1fr;gap:10px 16px}
  .hero-meta dd{font-size:14px}
  .hero-cue{display:none}
}
.js .hero-ph img{transform:scale(1.05);opacity:0}
.js .hero-ph.in img{transform:none;opacity:1;transition:transform 1.8s var(--ease),opacity 1s ease}
.js .hero-title>*,.js .hero-meta{opacity:0;transform:translateY(16px)}
.js .hero.in .hero-title>*,.js .hero.in .hero-meta{opacity:1;transform:none;transition:opacity .8s ease,transform 1s var(--ease)}
.js .hero.in .hero-title>:nth-child(2){transition-delay:.06s}.js .hero.in .hero-title>:nth-child(3){transition-delay:.14s}.js .hero.in .hero-meta{transition-delay:.24s}



/* ── Pièces à plat : le document d'origine, filet discret, ombre teintée. Angles droits partout ── */
.flat{box-shadow:0 0 0 1px var(--line),0 18px 40px -22px rgba(18,19,20,.35)}
[data-cs-theme=dark] .flat{box-shadow:0 0 0 1px var(--stage-line),0 24px 60px -24px rgba(0,0,0,.8)}
.wide{margin-top:clamp(56px,7vw,120px)}
.wide img{width:100%}

/* ── Commandes : un seul vocabulaire pour toute la page, angles vifs comme les pièces.
   Flèches : deux carrés de 44 px soudés par un filet (précédent, suivant), le glyphe de Geist, aucune icône dessinée.
   Survol (pointeur fin seulement) : le carré se remplit d'encre. Appui : 1 px vers le bas. Focus clavier : contour 2 px décalé. ── */
.arr{display:flex;flex:none}
.arr button{display:grid;place-items:center;width:44px;height:44px;font-size:18px;line-height:1;box-shadow:inset 0 0 0 1px var(--line);transition:background-color .2s ease,color .2s ease,box-shadow .2s ease}
.arr button+button{margin-left:-1px}
.arr button:active{transform:translateY(1px)}
@media (hover:hover) and (pointer:fine){.arr button:hover{background:var(--ink);color:var(--paper);box-shadow:inset 0 0 0 1px var(--ink)}}
.arr button:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:0;position:relative;z-index:1}
:focus-visible{border-radius:0}

/* ── Ouverture : l'abribus sur la droite ── */
.hero-ph img{object-position:62% 60%}
@media (max-width:860px){.hero-ph img{object-position:64% 60%}}

/* ── 01 · L'agence : le répertoire des marques, chaque ligne mène à sa section ── */
.rep{list-style:none;margin-top:clamp(56px,7vw,112px);border-top:1px solid var(--line)}
.rep a{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr) auto;gap:8px 24px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line);text-decoration:none;transition:padding .35s var(--ease-out)}
.rep b{font-weight:500;font-size:clamp(20px,14px + .9vw,32px);letter-spacing:-.025em;line-height:1.1}
.rep span{color:var(--muted)}
.rep .mono{text-align:right;white-space:nowrap}
.rep-ar{display:inline-block;margin-left:14px;font-style:normal;font-family:var(--sans);color:var(--ink);transition:transform .35s var(--ease-out)}
@media (hover:hover){.rep a:hover .rep-ar{transform:translateY(4px)}.rep a:hover{padding-left:12px}.rep a:hover b{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}}
@media (max-width:700px){.rep a{grid-template-columns:minmax(0,1fr) auto}.rep a>span:not(.mono){grid-column:1/-1;grid-row:2;font-size:15px}}

/* ── 02 · APRR : les quatre mots alignés sur leur « -t », l'affiche choisie à côté ── */
.t-sel{display:grid;gap:clamp(32px,4vw,80px);align-items:center;margin-top:clamp(48px,6vw,96px)}
@media (min-width:1000px){.t-sel{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}}
.t-pick{display:grid;justify-items:end;gap:14px}
.t-lab{color:var(--muted);padding-right:calc(clamp(44px,20px + 5.6vw,128px) * .35)}
@media (max-width:999px){.t-lab{padding-right:0}}
.t-words{display:grid;justify-items:end;gap:0;list-style:none}
.t-words button{display:flex;align-items:baseline;justify-content:flex-end;padding:.02em 0;font-weight:500;font-size:clamp(44px,20px + 5.6vw,128px);line-height:.98;letter-spacing:-.045em;color:#85878c;text-transform:uppercase;transition:color .35s var(--ease-out)}
.t-words button .t{display:inline-block;width:1.15em;text-align:left;text-transform:none;color:var(--ink);letter-spacing:-.02em}
@media (hover:hover){.t-words button:hover{color:var(--muted)}.t-words button:hover .t{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.12em}}
.t-words button[aria-pressed=true]{color:var(--ink)}
.t-words button:active{transform:scale(.99)}
.t-words button:focus-visible{outline-offset:2px}
.t-side{display:grid;gap:16px;justify-items:center}
.t-poster{display:grid;width:min(100%,460px);aspect-ratio:3/4;cursor:pointer;touch-action:pan-y}
.t-poster img{grid-area:1/1;width:100%;height:100%;object-fit:cover}
.js .t-poster img{opacity:0;transition:opacity .4s var(--ease-out)}
.js .t-poster img.on{opacity:1}
.vbar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:14px;width:min(100%,460px);padding-top:14px;border-top:1px solid var(--line)}
.vbar-n{color:var(--muted);font-variant-numeric:tabular-nums;padding-top:2px}
.vbar-n b{font-weight:400;color:var(--ink)}
.t-note{min-height:4.4em;color:var(--muted);padding-top:2px}
.t-note b{font-weight:500;color:var(--ink)}
/* Une colonne : mots et affiche sur le même axe, le « -t » aligné sur le bord droit de l'affiche */
@media (max-width:999px){
  .t-sel{max-width:520px;margin-left:auto;margin-right:auto}
  .t-words button{font-size:clamp(38px,12.5vw,76px)}
  .t-poster,.vbar{width:100%}
  .t-words{margin-right:calc(clamp(38px,12.5vw,76px) * -.35)}
}

/* ── 03 · Corbières ── */
.corb{display:grid;gap:clamp(32px,4vw,72px);align-items:start;margin-top:clamp(56px,7vw,120px)}
@media (min-width:1000px){.corb{grid-template-columns:minmax(0,4fr) minmax(0,6fr)}.corb-flat{position:sticky;top:120px}}
.corb-flat img{width:100%}
.corb-txt{display:grid;gap:1em;align-content:start;max-width:34em}
.corb-ph img{width:100%}

/* ── 04 · Eurostar : le minisite pièce par pièce. Les pièces sont des onglets attachés sous l'écran (numéro, nom, ce qu'on y fait),
   visibles d'emblée sur tous les écrans ; les flèches et le balayage disent qu'on peut passer de l'une à l'autre. ── */
.eu{display:grid;margin-top:clamp(56px,7vw,120px);max-width:1268px}
.eu-screen{display:grid;aspect-ratio:1268/693;cursor:pointer;touch-action:pan-y}
.eu-screen img{grid-area:1/1;width:100%;height:100%}
.js .eu-screen img{opacity:0;transition:opacity .35s var(--ease-out)}
.js .eu-screen img.on{opacity:1}
.eu-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;border-bottom:1px solid var(--line)}
.eu-steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.eu-steps button{position:relative;display:grid;align-content:start;gap:2px;width:100%;height:100%;min-height:44px;padding:18px 16px 18px 0;text-align:left;color:var(--muted);transition:color .2s ease}
.eu-steps button::before{content:"";position:absolute;left:0;right:12px;top:0;height:2px;background:rgba(18,19,20,.16);transition:height .3s var(--ease-out),background-color .3s ease}
.eu-steps button[aria-pressed=true]{color:var(--ink)}
.eu-steps button[aria-pressed=true]::before{height:3px;background:var(--ink)}
.eu-steps .mono{font-size:12px;margin-bottom:6px}
.eu-steps b{font-weight:500;font-size:16px;line-height:1.25}
.eu-steps small{font-size:14px;line-height:1.35}
@media (hover:hover){.eu-steps button:hover{color:var(--ink)}.eu-steps button:hover::before{background:var(--ink)}}
.eu-bar .arr{align-self:center;padding-left:clamp(12px,2vw,32px)}
/* Défilement automatique : le filet de l'onglet actif se remplit pendant la durée de la pièce */
.eu-steps button::after{content:"";position:absolute;left:0;right:12px;top:0;height:3px;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;opacity:0}
.eu.playing .eu-steps button[aria-pressed=true]::before{background:rgba(18,19,20,.16)}
.eu.playing .eu-steps button[aria-pressed=true]::after{opacity:1;animation:euFill var(--eu-t,5s) linear forwards}
.eu.hold .eu-steps button[aria-pressed=true]::after{animation-play-state:paused}
@keyframes euFill{to{transform:scaleX(1)}}
/* Pause / lecture : deux barres ou un triangle, dessinés en CSS */
.play span{position:relative;display:block;width:10px;height:12px}
.play span::before,.play span::after{content:"";position:absolute;top:0;width:3px;height:12px;background:currentColor}
.play span::before{left:1px}.play span::after{right:1px}
.play.paused span::before{left:2px;width:0;height:0;background:none;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor}
.play.paused span::after{display:none}
.eu-now{display:none}
.eu-cap{margin:14px 0 0;color:var(--muted)}
@media (max-width:899px){
  .eu-steps button{padding:0;height:44px;align-content:center}
  .eu-steps button::before,.eu-steps button::after{right:6px}
  .eu-steps b,.eu-steps small{display:none}
  .eu-steps .mono{margin:0;font-size:13px}
  .eu-now{display:block;margin-top:10px;font-size:15px;line-height:1.4;color:var(--muted)}
  .eu-now b{font-weight:500;color:var(--ink)}
}

/* ── 05 · LCL : trois écrans du jeu, alignés en haut ── */
.lcl3{display:grid;gap:clamp(16px,2.4vw,40px);margin-top:clamp(56px,7vw,120px);align-items:start}
@media (min-width:900px){.lcl3{grid-template-columns:repeat(3,minmax(0,1fr))}.lcl3 figure:nth-child(2){margin-top:clamp(40px,6vw,110px)}}
.lcl3 img{width:100%;max-width:758px}

/* ── 06 · Le courant : deux familles, chacune à une même échelle. Emailings (700 px d'origine) sur trois colonnes, pages d'offre
   (1 000 px environ) sur deux : les largeurs gardent à peu près le rapport d'origine. Hauteur propre à chaque pièce, jamais recadrée ;
   les colonnes d'emailings sont équilibrées par fs.js (la plus longue pièce d'abord dans la colonne la plus courte). ── */
.em-how{margin-top:clamp(40px,5vw,72px);color:var(--muted)}
.em-h{margin:clamp(28px,3vw,44px) 0 18px;font-weight:500;font-size:clamp(17px,13px + .4vw,22px);letter-spacing:-.01em}
.em-h+*{margin-top:0}
.em-mails{columns:3;column-gap:clamp(16px,2.2vw,32px)}
.em-mails .em-it{break-inside:avoid;margin-bottom:clamp(24px,3vw,40px)}
.js .em-mails.cols{columns:auto;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:0 clamp(16px,2.2vw,32px);align-items:start}
.em-col{display:grid;gap:clamp(24px,3vw,40px)}
.em-col .em-it{margin:0}
.em-pages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,40px) clamp(16px,2.2vw,32px);align-items:start}
.em-open{display:block;width:100%;cursor:zoom-in;background:#fff;box-shadow:0 0 0 1px var(--line),0 18px 40px -22px rgba(18,19,20,.35);transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.em-open img{width:100%}
.em-open:active{transform:translateY(1px)}
.em-it figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:12px}
.em-z{flex:none;color:var(--ink);background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s var(--ease-out)}
@media (hover:hover){.em-it:hover .em-open{transform:translateY(-3px);box-shadow:0 0 0 1px var(--line),0 26px 50px -24px rgba(18,19,20,.42)}.em-it:hover .em-z{background-size:100% 1px}}
.em-open:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
@media (max-width:699px){
  .em-mails{columns:2}.em-pages{grid-template-columns:minmax(0,1fr)}
  .em-z{display:none}
  .em-it figcaption{font-size:12px}
}
/* Lecture en taille réelle */
.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--paper);color:var(--ink);overscroll-behavior:contain}
.lb::backdrop{background:var(--paper)}
.lb[open]{display:grid;grid-template-rows:auto minmax(0,1fr)}
.lb-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:calc(10px + env(safe-area-inset-top,0px)) var(--gutter-r) 10px var(--gutter);border-bottom:1px solid var(--line)}
.lb-bar p{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.lb-body{overflow:auto;overscroll-behavior:contain;padding:clamp(16px,4vw,56px) var(--gutter-r) clamp(32px,6vw,80px) var(--gutter)}
.lb-body img{margin:0 auto;box-shadow:0 0 0 1px var(--line),0 18px 40px -22px rgba(18,19,20,.35);background:#fff}
@media (prefers-reduced-motion:no-preference){.lb[open]{animation:lbIn .28s var(--ease-out)}@keyframes lbIn{from{opacity:0}}}

/* ── Fin ── */
.end{padding-top:clamp(80px,10vw,160px)}
@media (min-width:900px){.end .credits{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tbc{border-bottom:1px dashed currentColor}

@media (prefers-reduced-motion:reduce){
  .t-poster img,.eu-screen img,.rep a,.t-words button{transition:none!important}
  .hero-cue i::after{animation:none}
}
.nw{white-space:nowrap}
/* Mises en situation sur fond clair dans une scène sombre : pleine largeur, pour se lire comme une photo et non comme une carte */
[data-cs-theme=dark] .wide{margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter-r) * -1)}

/* Navigation des études : angles vifs et cellules séparées par des filets pleine hauteur, comme un onglet d'index.
   Surcharge locale du composant commun ; à reporter dans case-nav.css de toutes les études à l'harmonisation finale. */
.cs-head{border-radius:2px;padding:0;height:40px}
.cs-head a,.cs-head button{border-radius:0;height:40px}
.cs-back{padding:0 14px 0 12px}
.cs-name{height:40px;padding:0 14px;font-weight:500;border-left:1px solid var(--cs-line);border-right:1px solid var(--cs-line)}
.cs-sec{padding:0 12px 0 12px}
.cs-menu{border-radius:2px;padding:4px 0}
.cs-menu a{border-radius:0!important;padding:0 14px}
.cs-menu a[aria-current=true]{background:none;box-shadow:inset 2px 0 0 var(--cs-ink)}
@media (hover:hover) and (pointer:fine){.cs-menu a:hover{background:var(--cs-line)}}
.cs-rail ol{border-radius:2px}
.cs-rail:not(.open) a.flash .cs-rl{border-radius:2px}
@media (max-width:520px){.cs-back{padding:0;min-width:44px;justify-content:center}.cs-name{padding:0 12px}}
html.lb-on{overflow:hidden}
.lb-x{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;margin-right:-14px;font-size:15px}
@media (hover:hover) and (pointer:fine){.lb-x:hover{background:var(--ink);color:var(--paper)}}