/* 42 Global Games 2025 · étude de cas. Habillage portfolio commun (Geist, monochrome, grille 36em) repris de Global Seminar.
   Idée propre au projet : les codes d'une compétition (tableau des scores, accréditations, entrée des délégations). */
@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";font-weight:600;font-display:swap;src:url(fonts/geist-sans-latin-600-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);
  --nuit:#060b17;
  --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);
  --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));
}
@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}
: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)}
.muted-d{color:var(--stage-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)}
figure{margin:0}
figcaption{margin-top:10px}

.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}

.chap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start;margin-bottom:clamp(40px,5vw,80px)}
.chap-n{grid-column:1/3;display:flex;align-items:center;gap:10px;padding-top:.9em;color:var(--muted)}
.chap-d .chap-n{color:var(--stage-muted)}
.chap-n i{display:block;width:10px;height:10px;background:currentColor}
.chap h2{grid-column:3/12;font-size:clamp(38px,5.4vw,92px);line-height:.98;font-weight:500;letter-spacing:-.04em;text-wrap:balance}
@media (max-width:860px){.chap{display:block}.chap-n{padding:0 0 18px}.chap h2{font-size:clamp(34px,9vw,52px)}}

.credit{font-size:11px!important;color:var(--stage-muted)}
.credit a{color:inherit}
.ph-clip{overflow:hidden;position:relative}
.ph-clip img{width:100%;height:118%;object-fit:cover;will-change:transform}

/* Grille éditoriale commune.
   Règle : un texte ne prend jamais une fraction de colonnes, il prend une mesure (36em pour le courant, 30em pour un chapeau).
   Dans un couple texte et visuel, la colonne de texte a un minimum de 27em ; sous 1180 px le couple s'empile, texte pleine mesure. */
:root{--measure:36em;--lede:30em;--txt-min:27em}
.txt{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:20px}
.txt>*{grid-column:3/13;max-width:var(--measure)}
.txt>.lede{max-width:var(--lede)}
@media (min-width:861px) and (max-width:1180px){.txt>*{grid-column:1/13}}
.pair{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(min(100%,var(--txt-min)),1fr);column-gap:clamp(32px,4vw,80px);align-items:center}
@media (max-width:1180px){.pair{grid-template-columns:minmax(0,1fr);row-gap:clamp(28px,4vw,48px)}}
.lede{font-size:clamp(19px,1.5vw,26px);line-height:1.38;letter-spacing:-.012em}
@media (max-width:860px){.txt{display:block}.txt>*+*{margin-top:18px}}
.replay{position:absolute;z-index:5;background:rgba(255,255,255,.08);color:inherit;border:1px solid rgba(255,255,255,.22);border-radius:99px;padding:8px 14px;min-height:36px;cursor:pointer;font-size:11px!important;transition:background .3s,opacity .4s}
.replay:hover{background:rgba(255,255,255,.16)}

/* Ouverture : même système que les autres études (titre à gauche à mi-hauteur, informations en bas, repère à droite) */
.hero{position:relative;height:100vh;height:100svh;min-height:600px;background:#050b17!important;color:#fff;overflow:hidden}
.hero-stage{position:absolute;top:0;bottom:0;right:var(--gutter-r);left:calc(var(--gutter) + min(40vw,600px) + 4vw);display:grid;place-items:center}
.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}
.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:.7fr .7fr 1fr 1.3fr;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{from{transform:translateY(-12px)}to{transform:translateY(28px)}}
.hero .replay{right:0;bottom:calc(84px + env(safe-area-inset-bottom,0px))}
@media (max-width:860px){
  .hero{height:auto;min-height:100svh;display:flex;flex-direction:column;padding:calc(84px + env(safe-area-inset-top,0px)) 0 calc(28px + env(safe-area-inset-bottom,0px))}
  .hero-title{order:1;position:static;transform:none;max-width:none;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-stage{order:2;position:relative;left:auto;right:auto;width:100%;aspect-ratio:16/9;margin:20px 0;padding:0 var(--gutter-r) 0 var(--gutter)}
  .hero .replay{right:var(--gutter-r);bottom:0}
  .hero-meta{order:3;position:static;margin-top:auto;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}
}
.end{padding-top:clamp(100px,12vw,180px);padding-bottom:clamp(60px,8vw,120px);border-top:1px solid var(--line)}
.end-t{font-size:clamp(28px,3.4vw,56px);line-height:1.05;font-weight:500;letter-spacing:-.03em;max-width:22ch}
.end-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px;max-width:1200px}
@media (max-width:860px){.end-grid{grid-template-columns:1fr}}
.next{display:flex;justify-content:space-between;align-items:baseline;margin-top:clamp(60px,8vw,120px);padding-top:20px;border-top:1px solid var(--line)}
.next a{text-decoration:none;font-size:clamp(28px,3vw,48px);font-weight:500;letter-spacing:-.03em;display:flex;gap:14px}

/* apparitions */
.js .rv{opacity:0;transform:translateY(24px)}
.st .rv{opacity:1!important;transform:none!important}
.hero .replay{display:none}

/* 01 · Tableau des scores */
.enjeu{padding-top:clamp(100px,12vw,200px);padding-bottom:clamp(80px,10vw,160px)}
.score{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(56px,7vw,120px);border-top:1px solid var(--ink)}
.score li{padding:22px 24px 0 0;border-right:1px solid var(--line)}
.score li+li{padding-left:24px}
.score li:last-child{border-right:0}
.score-n{display:block;font-size:clamp(72px,11vw,200px)!important;line-height:.9;letter-spacing:-.06em!important;font-variant-numeric:tabular-nums;font-weight:400}
.score-l{display:block;margin-top:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em!important}
.score-src{margin-top:24px}
@media (max-width:600px){.score{grid-template-columns:1fr}.score li{border-right:0;border-bottom:1px solid var(--line);padding:18px 0!important}}

/* 02 · Emblème : processus puis emblème animé */
.emb{padding:clamp(100px,12vw,200px) 0}
.proc{margin-top:clamp(56px,7vw,110px);display:grid;gap:clamp(56px,7vw,120px)}
.proc-k{display:flex;align-items:center;gap:12px;margin-bottom:18px;color:var(--stage-muted)}
.proc-k span{display:inline-grid;place-items:center;width:24px;height:24px;border:1px solid currentColor;font-size:11px}
.proc-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.proc-paper figure{background:#fff}
.proc-three{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.proc-note{margin-top:20px;max-width:var(--measure);color:var(--stage-ink)}
@media (max-width:860px){.proc-pair,.proc-three{grid-template-columns:1fr}}
.emb-final{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(min(100%,var(--txt-min)),1fr);gap:clamp(32px,5vw,96px);align-items:center;margin-top:clamp(80px,10vw,180px)}
@media (max-width:1180px){.emb-final{grid-template-columns:1fr}}
.emb-stage{position:relative;aspect-ratio:1;display:grid;place-items:center;background:radial-gradient(60% 60% at 50% 55%,#1a1a1d 0%,#0b0c0d 70%);color:#fff}
.emb-svg{width:68%;height:auto;overflow:visible}
.emb-svg path,.emb-svg polygon{transform-box:fill-box}
.emb-stage .replay{right:16px;bottom:16px}
.emb-txt>*+*{margin-top:20px}
.emb-hint{margin-top:28px!important}

/* 03 · Badges */
.bdg{padding-top:clamp(100px,12vw,200px);padding-bottom:clamp(100px,12vw,200px)}
.bdg-txt>*+*{margin-top:22px}
.fields{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.fields li{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:99px;padding:6px 12px;transition:background .4s,color .4s,border-color .4s}
.fields i{width:6px;height:6px;border-radius:50%;background:currentColor}
.fields li.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* 04 · Écrans des nations */
.nat{padding:clamp(100px,12vw,200px) 0 clamp(60px,8vw,120px);overflow:hidden}
.onair{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;box-shadow:0 0 0 1px var(--stage-line)}
.onair img{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .9s var(--ease)}
.onair img.on{opacity:1}
.onair-tag{position:absolute;left:14px;top:14px;display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.55);color:#fff;padding:5px 10px;font-size:11px!important;text-transform:uppercase;letter-spacing:.1em!important}
.onair-tag i{width:7px;height:7px;border-radius:50%;background:#ff3b3b;animation:blink 1.6s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}
.nat-txt>*+*{margin-top:20px}
.tick{margin-top:clamp(56px,7vw,110px);display:grid;gap:10px}
.tick-row{display:flex;gap:10px;width:max-content;will-change:transform}
.tick-row img{width:clamp(240px,22vw,400px);height:auto;aspect-ratio:16/9;flex:none}
.tick:hover .tick-row{animation-play-state:paused}
.tick-row[data-dir="1"]{animation:tickL 120s linear infinite}
.tick-row[data-dir="-1"]{animation:tickR 120s linear infinite}
@keyframes tickL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes tickR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.tick-note{margin-top:20px}

/* 07 · Sur place */
.sp{padding-top:clamp(100px,12vw,200px);padding-bottom:clamp(80px,10vw,160px)}
.sp-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;align-items:start}
.sp-a{grid-column:1/8}.sp-b{grid-column:8/13;margin-top:22%}.sp-c{grid-column:2/7;margin-top:2%}.sp-d{grid-column:7/13;margin-top:7%}
.sp-grid .ph-clip{aspect-ratio:3/2}
.sp-grid .ph-clip img{height:112%}
.sp-cap{margin-top:28px}
@media (max-width:860px){.sp-grid{grid-template-columns:1fr}.sp-grid figure{grid-column:auto!important;margin-top:0!important}}



/* ================= V2.1 ================= */

/* Ouverture : la photo devient le fond de scène. Pas de bord : elle naît du noir par un masque à gauche et en bas */
.hero{background:#060606!important}
.hero-bg{position:absolute;inset:0 0 0 clamp(0px,16vw,320px);margin:0;z-index:1}
.hero-ph{position:absolute;inset:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 46%);mask-image:linear-gradient(90deg,transparent 0%,#000 46%)}
.hero-ph picture,.hero-ph img{display:block;width:100%;height:100%}
.hero-ph img{object-fit:cover;object-position:50% 28%;transform-origin:62% 40%;will-change:transform}
.hero-ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(6,6,6,.78) 0%,rgba(6,6,6,.38) 34%,rgba(6,6,6,0) 58%),linear-gradient(0deg,#060606 0%,rgba(6,6,6,.6) 16%,rgba(6,6,6,0) 40%),linear-gradient(180deg,rgba(6,6,6,.55) 0%,rgba(6,6,6,0) 18%)}
.hero-bg .credit{position:absolute;right:var(--gutter-r);top:calc(84px + env(safe-area-inset-top,0px));z-index:2;color:rgba(255,255,255,.55);margin:0}
@media (max-width:860px){
  .hero{display:flex;flex-direction:column;justify-content:flex-end;padding-top:0}
  .hero-bg{position:absolute;inset:0 0 auto 0;height:72svh;min-height:440px}
  .hero-ph{-webkit-mask-image:linear-gradient(180deg,#000 52%,transparent 100%);mask-image:linear-gradient(180deg,#000 52%,transparent 100%)}
  .hero-ph img{object-position:50% 18%}
  .hero-ph::after{background:linear-gradient(180deg,rgba(6,6,6,.5) 0%,rgba(6,6,6,0) 22%),linear-gradient(0deg,rgba(6,6,6,.7) 0%,rgba(6,6,6,0) 45%)}
  .hero-bg .credit{top:calc(64px + env(safe-area-inset-top,0px));right:var(--gutter-r)}
  .hero-title{position:relative;left:auto;z-index:4;margin-top:56svh}
  .hero-meta{margin-top:28px}
}

/* A · Moodboards : deux plans qui se composent, vignettes posées une à une */
.mb-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,32px)}
.mb-board{position:relative;aspect-ratio:9252/5826;perspective:1400px;perspective-origin:50% 0%;container-type:inline-size}
.mb-plane{position:absolute;inset:0;background:#141414;transform-style:preserve-3d;transform-origin:50% 100%;box-shadow:0 0 0 1px var(--stage-line)}
.mb-t{position:absolute;margin:0;overflow:hidden;background:#1d1d1f;backface-visibility:hidden;box-shadow:0 10px 24px -14px rgba(0,0,0,.9)}
.mb-t img{width:100%;height:100%;object-fit:cover}
.mb-lbl{position:absolute;font-size:4.1cqw;font-weight:500;font-style:italic;letter-spacing:-.02em;line-height:1;color:#c9c9cc;text-transform:uppercase;white-space:nowrap}
.mb-or{position:absolute;font-size:1.75cqw;font-weight:600;font-style:italic;line-height:1.15;color:#ebebe8;text-transform:uppercase}
.mb figcaption{margin-top:10px}
.mb-keys{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:14px;margin-top:clamp(28px,3vw,44px)}
.mb-keys>*{grid-column:1/13}
.mb-q{font-size:clamp(17px,1.3vw,22px);line-height:1.38;max-width:var(--lede)}
.mb-q q{quotes:"« " " »";color:#fff}
.mb-list{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.mb-list li{border:1px solid var(--stage-line);border-radius:99px;padding:6px 12px;color:var(--stage-ink)}
.mb-src{max-width:var(--measure)}
@media (max-width:860px){.mb-pair{grid-template-columns:1fr}}

/* B · Croquis : la planche d'origine, trois notes lues de près */
.sk-blk{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(16px,2vw,28px);align-items:start}
.sk-page{position:relative;margin:0;background:#fff}
.sk-page img{width:100%}
.sk-mark{position:absolute;border:1.5px solid #4a3a9c;border-radius:3px;pointer-events:none}
.sk-zooms{display:grid;gap:clamp(14px,1.6vw,22px)}
.sk-z{margin:0}
.sk-z img{width:100%;background:#fff}
.sk-z figcaption{margin-top:8px;color:var(--stage-ink)}
.sk .proc-note{margin-top:24px}
@media (max-width:860px){.sk-blk{grid-template-columns:1fr}}

/* 03 · Badges : l'objet (cartes en éventail) et le système (champs du premier plan) */
.bdg{overflow-x:clip}
.card{position:absolute;aspect-ratio:1400/851;background:#fff;border-radius:3.7%/6%;overflow:hidden}
.card img{width:100%;height:100%}
.bdg-photo{margin:0}
.bdg-photo .ph-clip{aspect-ratio:4/3}
.bdg-file{position:relative;width:100%;max-width:440px;border-radius:2.4%/4%;box-shadow:0 0 0 1px rgba(0,0,0,.09)}
.zone{position:absolute;border:1.5px solid #4a3a9c;border-radius:4px;opacity:0;transform:scale(1.06);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.zone.on{opacity:1;transform:none}
.fields li{cursor:default}

/* 05 · Drapeaux : les quinze explorations, légère ondulation */
.flg{padding:clamp(100px,12vw,200px) 0}
.flags{align-items:flex-end;margin-top:clamp(56px,7vw,110px);display:flex;gap:clamp(6px,.8vw,14px);padding:0 var(--gutter-r) 0 var(--gutter);overflow-x:auto;scrollbar-width:none}
.flags::-webkit-scrollbar{display:none}
.flag{flex:1 0 clamp(64px,5.4vw,104px);transform-origin:50% 100%}
.flag img{width:100%;aspect-ratio:1785/6904;object-fit:cover;border-radius:40% 40% 0 0 / 6% 6% 0 0;box-shadow:0 14px 26px -18px rgba(0,0,0,.45)}
.flag.final{flex-basis:clamp(84px,7vw,136px)}
.flag.final::after{content:"Imprimé";display:block;margin-top:10px;font:11px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;text-align:center}
.flg-cap{margin-top:20px}

/* 06 · Programme : livret, feuilles de match et écran en mises en situation photographiques */
.prog{padding-top:clamp(100px,12vw,200px);padding-bottom:clamp(100px,12vw,200px)}
.pg-hero{margin-top:clamp(56px,7vw,110px)}
.pg-hero .ph-clip{aspect-ratio:3/2}
.pg-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.pg-hero figcaption,.pg-duo figcaption{margin-top:10px}
.pg-duo img{width:100%;aspect-ratio:4/3;object-fit:cover}
.pg-note{margin-top:22px;max-width:var(--measure)}
@media (max-width:860px){.pg-duo{grid-template-columns:1fr}}

/* Mouvement réduit : tout est posé, rien ne boucle */
@media (prefers-reduced-motion:reduce){.hero-cue i::after,.tick-row,.onair-tag i{animation:none!important}.tick{overflow-x:auto}.zone{transition:none}}