/* 10 ans de 42 · étude de cas. Habillage portfolio commun (Geist, monochrome, grille 36em) repris des études validées.
   Idée propre au projet : un anniversaire qui éclate (les éclats de l emblème), un collage qui porte toute la campagne. */
@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(13px, 11px + .16vw, 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:12px!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:var(--char)!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}


/* ---------- Projet ---------- */
:root{--char:#141516;--cyan:#2bd4e4;--mint:#7af2c8;--gold:#c8a456;--emb-in:#141516}
section.cmp,section.stk,section.emb{background:var(--char)}

/* Ouverture : grille fine de la campagne, emblème blanc à droite */
.hero{color:#fff}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:64px 64px;-webkit-mask:radial-gradient(70% 70% at 68% 50%,#000 0%,transparent 75%);mask:radial-gradient(70% 70% at 68% 50%,#000 0%,transparent 75%)}
.hero .emb-svg{width:min(100%,820px);height:auto;color:#fff;overflow:visible;--emb-in:var(--char)}
.emb-svg path{transform-box:fill-box;transform-origin:50% 50%}
@media (max-width:860px){.hero-stage{aspect-ratio:auto;margin:36px 0 28px}}

/* 01 · Chronologie */
.occ{padding-top:clamp(100px,12vw,200px);padding-bottom:clamp(80px,10vw,160px)}
.tl{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin-top:clamp(56px,7vw,110px);border-top:1px solid var(--ink)}
.tl li{position:relative;padding:20px 18px 0 0}
.tl li::before{content:"";position:absolute;left:0;top:-5px;width:9px;height:9px;background:var(--ink)}
.tl-m{display:block;font-size:clamp(20px,1.8vw,30px)!important;letter-spacing:-.03em;font-family:var(--sans);font-weight:500;color:var(--ink)}
.tl-d{display:block;margin-top:8px;color:var(--muted)}
.tl-day::before{background:var(--cyan)!important;width:13px!important;height:13px!important;top:-7px!important}
@media (max-width:860px){.tl{grid-template-columns:1fr 1fr;row-gap:28px}}

/* 02 · Emblème */
.emb{padding:clamp(100px,12vw,200px) 0;color:var(--stage-ink)}
.proc{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:12px;margin-top:clamp(48px,6vw,96px)}
.pc-card{background:#fff;aspect-ratio:4/3;display:grid;place-items:center;padding:8%}
.pc-card img{max-height:100%;width:auto;object-fit:contain}
@media (max-width:860px){.proc{grid-template-columns:1fr}}
.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}
.emb-final{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(min(100%,var(--txt-min)),1fr);gap:clamp(32px,5vw,96px);align-items:center;margin-top:clamp(80px,10vw,160px)}
@media (max-width:1180px){.emb-final{grid-template-columns:1fr}}
.emb-stage{position:relative;aspect-ratio:1.25;display:grid;place-items:center;background:#f4f4f1;color:#0d0d0d;--emb-in:#f4f4f1}
.emb-build{width:84%;height:auto;overflow:visible}
.emb-build .gd{stroke:var(--cyan);opacity:0;transition:opacity .5s var(--ease)}
.emb-build .gd line,.emb-build .gd circle{stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset 1.4s var(--ease)}
.guides .emb-build .gd{opacity:1}
.guides .emb-build .gd line,.guides .emb-build .gd circle{stroke-dashoffset:0}
.guides .emb-build .sh,.guides .emb-build .an{opacity:.18;transition:opacity .5s}
.emb-build .sh,.emb-build .an{transition:opacity .5s}
.emb-stage .replay{right:16px;bottom:16px;color:#0d0d0d;border-color:rgba(0,0,0,.25);background:rgba(0,0,0,.04)}
.emb-stage .replay[aria-pressed=true]{background:#0d0d0d;color:#fff}
.emb-txt>*+*{margin-top:20px}
.decl{display:grid;grid-template-columns:1.4fr 1fr;gap:12px;margin-top:36px!important}
.decl figure>img{background:#f4f4f1;padding:14% 10%;width:100%;aspect-ratio:1.6;object-fit:contain}

/* 03 · Visuel clé */
.kv{padding:clamp(100px,12vw,200px) 0}
.kv-txt>*+*{margin-top:22px}
.kv-src{margin-top:32px!important}

/* 04 · Campagne */
.cmp{padding:clamp(100px,12vw,200px) 0;color:var(--stage-ink)}
.cmp-main{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;margin-top:clamp(48px,6vw,96px);align-items:start}
.cmp-side{display:grid;gap:16px}
@media (max-width:860px){.cmp-main{grid-template-columns:1fr}.cmp-side{grid-template-columns:1fr 1fr}}
.cmp img{box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.cmp-banners{margin-top:16px}.cmp-banners figcaption{margin-top:12px}
.cmp-banners p{grid-column:1/-1}
@media (max-width:860px){.cmp-banners{grid-template-columns:1fr}}
.alt{display:grid;grid-template-columns:minmax(min(100%,var(--txt-min)),1fr) minmax(0,2fr);gap:clamp(32px,4vw,80px);align-items:center;margin-top:clamp(100px,12vw,180px);padding-top:clamp(40px,4vw,64px);border-top:1px solid var(--stage-line)}
.alt-txt p:last-child{max-width:var(--measure);color:var(--stage-muted)}
.alt-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.alt-row img{filter:grayscale(.15);opacity:.86}
@media (max-width:1180px){.alt{grid-template-columns:1fr}}

/* 05 · VIP */
.vip{padding-top:clamp(100px,12vw,200px);padding-bottom:clamp(100px,12vw,200px)}
.vip-fig img{box-shadow:0 40px 80px -40px rgba(0,0,0,.45)}
.vip-txt>*+*{margin-top:22px}

/* 06 · Stickers */
.stk{padding:clamp(100px,12vw,200px) 0 0;color:var(--stage-ink)}
.stk-fig{margin-top:clamp(48px,6vw,96px)}
.stk-fig .ph-clip{aspect-ratio:2880/1900}
.stk-fig .ph-clip img{height:112%}
.kv,.emb,.hero{overflow:clip}

/* Passe 2 */
.proc{grid-template-columns:repeat(3,minmax(0,1fr))}
.pc-card{aspect-ratio:4/3;padding:10%}
.pc-card img{width:100%;height:100%;object-fit:contain}
.decl{grid-template-columns:1fr 1fr}
.decl figure>img{aspect-ratio:1.6;padding:12% 10%}
.seq{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(min(100%,var(--txt-min)),1fr);gap:clamp(32px,5vw,96px);align-items:center;margin-top:clamp(48px,6vw,96px)}
@media (max-width:1180px){.seq{grid-template-columns:1fr}}
.seq-frame{position:relative;aspect-ratio:1;background:#0d0e0f;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 50px 100px -50px rgba(0,0,0,.8)}
.seq-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.015);transition:opacity .7s var(--ease),transform 1.2s var(--ease)}
.seq-frame img.on{opacity:1;transform:none}
.seq-steps{list-style:none;border-top:1px solid var(--stage-line)}
.seq-steps li{border-bottom:1px solid var(--stage-line)}
.seq-steps button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:44px 1fr;column-gap:12px;width:100%;padding:18px 0;cursor:pointer;color:var(--stage-muted);transition:color .3s}
.seq-steps button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.seq-steps b{font-weight:500;font-size:clamp(20px,1.7vw,28px);letter-spacing:-.025em;line-height:1.15}
.seq-steps .mono{padding-top:.5em}
.seq-d{grid-column:2;max-height:0;overflow:hidden;opacity:0;transition:max-height .5s var(--ease),opacity .4s,margin .5s;font-size:15px;line-height:1.45}
.seq-steps button[aria-pressed=true]{color:var(--stage-ink)}
.seq-steps button[aria-pressed=true] .seq-d{max-height:6em;opacity:1;margin-top:8px;color:var(--stage-muted)}
.seq-steps button:hover{color:var(--stage-ink)}
.cmp-banners{margin-top:clamp(56px,7vw,110px)}
.stk-fig .ph-clip img{height:106%}
.vip-blk{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(min(100%,var(--txt-min)),1fr);gap:clamp(24px,3vw,48px) clamp(32px,5vw,96px);align-items:center}
.vip-b{grid-column:1/-1}
.vip-blk img{width:100%;box-shadow:0 40px 80px -40px rgba(0,0,0,.45)}
@media (max-width:1180px){.vip-blk{grid-template-columns:1fr}}
@media (max-width:860px){.proc{grid-template-columns:1fr}.pc-card{aspect-ratio:16/9}
  .tl{border-top:0;row-gap:0}.tl li{border-top:1px solid var(--ink);padding:18px 12px 22px 0}}
@media (min-width:1181px){.seq-steps{padding-right:56px}}
.pc-card img[src*=brouillon]{max-width:524px;max-height:465px}

/* V1.1 : cartes des pistes de hauteur égale, jamais d'agrandissement des images */
.pc-card{position:relative}
.pc-card img,.pc-card img[src*=brouillon]{position:absolute;inset:10%;width:80%;height:80%;max-width:none;max-height:none;object-fit:scale-down}
.vip-b{max-width:min(100%,920px);justify-self:end}

/* V1.1 : visuel clé recomposé depuis les calques du PSD (814 × 916 px au canevas d'origine, jamais agrandi au-delà de 1,4×) */
.kv-fig{position:relative;width:100%;max-width:580px;margin:0 auto;aspect-ratio:814/916}
.kvp{position:absolute;height:auto;max-width:none;will-change:transform}
.kvp[data-p="circle"]{left:41.769%;top:10.262%;width:55.405%}
.kvp[data-p="diamond"]{left:0.123%;top:0.109%;width:61.179%}
.kvp[data-p="diamond-in"]{left:7.740%;top:6.878%;width:45.946%}
.kvp[data-p="dot"]{left:9.951%;top:49.454%;width:21.622%}
.kvp[data-p="wave"]{left:20.639%;top:43.122%;width:43.735%}
.kvp[data-p="tower"]{left:44.595%;top:51.747%;width:36.486%}
.kvp[data-p="david"]{left:4.914%;top:11.572%;width:86.118%}
.kvp[data-p="head"]{left:13.882%;top:11.572%;width:58.477%}
.kvp[data-p="scribble"]{left:30.467%;top:73.908%;width:14.251%}
.kvp[data-p="frame"]{left:54.423%;top:42.795%;width:28.624%}
.kvp[data-p="monitor"]{left:52.703%;top:26.419%;width:27.027%}
.kvp[data-p="keyboard"]{left:16.708%;top:49.454%;width:29.607%}