/* 42.fr · étude de cas : La Piscine (06) et le bento (09), version 2 validée le 23/10, finalisée.
   Source et archive : proposition-etape2-v2/.
   La Piscine en deux compositions photographiques (portable posé, téléphone en main) et un lecteur compact pour les autres vues ;
   le bento en six cases. Les interfaces sont projetées sur l'écran de chaque photo (matrix3d calculée depuis les 4 coins mesurés). */
@font-face{font-family:"Jost";font-weight:400;font-display:swap;src:url(fonts/jost-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-weight:700;font-display:swap;src:url(fonts/jost-latin-700-normal.woff2) format("woff2")}
#piscine,#realisations{--nuit:#000c16;--petrole:#04809f;--turq:#00babc;--menthe:#36f3b9}

/* ---------- Mondes d'interface (calques Figma 2x) ---------- */
.scr{position:relative;overflow:hidden;background:#000;isolation:isolate}
.world{position:absolute;left:0;top:0;transform-origin:0 0}
.cam{position:absolute;left:0;top:0;width:100%;will-change:transform}
.sec{position:absolute;left:0;width:100%;overflow:hidden}
.sec>.bg{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover}
.w{position:absolute;overflow:hidden}
.w>.i{position:absolute;inset:0;will-change:transform}
.veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.8) 0,rgba(0,0,0,.3) 100%)}
.phw{position:absolute;inset:0;overflow:hidden;background:#000c16}
/* les photos sont recadrées par object-fit : aucun bord clair ne peut apparaître, même à une échelle fractionnaire */
.phw>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:60% 50%}

/* ---------- Mockups photographiques ---------- */
.mk{position:relative;overflow:hidden;background:#050607;isolation:isolate}
.mk-ph,.mk-gl,.mk-ov,.mk-bgp{position:absolute;left:0;top:0;max-width:none;pointer-events:none;user-select:none}
/* parallaxe du portable : le décor (photo sans l’appareil, retouchée) glisse derrière ; l’appareil et son écran avancent d’un même bloc, sans déformation */
.mk-fg{position:absolute;inset:0;transform-origin:50% 72%}
.mk-bgp{transform-origin:50% 50%}
.mk-scr{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;background:#000;backface-visibility:hidden}
.mk-scr>.scr{width:100%;height:100%}
/* le verre : le reflet vient de la photo elle-même (même image, découpée sur l'écran, en mode écran) */
.mk-gl{mix-blend-mode:screen;opacity:.9}
.mk-ov{z-index:3}
.mk-scr .glass{position:absolute;inset:0;pointer-events:none;z-index:5;
  background:linear-gradient(112deg,rgba(255,255,255,.10) 0,rgba(255,255,255,.03) 34%,rgba(255,255,255,0) 52%),radial-gradient(120% 90% at 50% 50%,rgba(0,0,0,0) 60%,rgba(0,0,0,.18) 100%)}
.mk-scr>.pg{position:absolute;left:0;top:0;width:100%;height:auto}
.iph-page{position:absolute;left:0;top:0;width:100%;will-change:transform}
.iph-page img{width:100%;height:auto}

/* ---------- La Piscine ---------- */
.pz{padding:clamp(72px,8vw,128px) 0 clamp(80px,9vw,140px);overflow:hidden}
.pz .chap{margin-bottom:clamp(20px,2.4vw,36px)}
.pz-lede{display:block;margin-left:calc((100% + 24px) / 12 * 2);max-width:56ch;color:#cfd0cc}
.cap2{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px;color:var(--stage-muted);min-height:44px}
.cap2 b{font-weight:500;color:var(--stage-ink);margin-right:10px}
.replay{min-height:44px;padding:0 18px;border:1px solid var(--stage-line);border-radius:999px;background:none;color:var(--stage-ink);cursor:pointer;flex:none;transition:border-color .2s ease}
.replay:hover{border-color:rgba(235,235,232,.42)}
.replay:active{transform:translateY(1px)}

.sc-a{margin-top:clamp(40px,5vw,80px)}
.mk-lap{aspect-ratio:16/9;border-radius:2px}

.pz-duo{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;margin-top:clamp(56px,6vw,104px);align-items:end}
.sc-b{grid-column:1/6}
.mk-tel{aspect-ratio:5/7;border-radius:2px}
.vw{grid-column:6/13}
.vw-note{max-width:44ch;color:var(--stage-muted);margin-bottom:clamp(28px,4vw,64px)}
.vw-tabs{display:flex;gap:0;border-bottom:1px solid var(--stage-line);margin-bottom:14px;overflow-x:auto;scrollbar-width:none}
.vw-tabs::-webkit-scrollbar{display:none}
.vw-tabs button{flex:none;min-height:44px;padding:0 18px 0 0;margin-right:22px;border:0;background:none;color:var(--stage-muted);cursor:pointer;position:relative;white-space:nowrap}
.vw-tabs button::after{content:"";position:absolute;left:0;right:18px;bottom:-1px;height:1px;background:var(--stage-ink);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--ease)}
.vw-tabs button[aria-selected=true]{color:var(--stage-ink)}
.vw-tabs button[aria-selected=true]::after{transform:scaleX(1)}
.vw-tabs button:hover{color:var(--stage-ink)}
.vw-scr{position:relative;aspect-ratio:16/10;border-radius:6px;overflow:hidden;background:#000c16;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 80px -40px rgba(0,0,0,.9)}
.vw-p{position:absolute;inset:0}
.vw-p[hidden]{display:none}
.vw-p>.scr{width:100%;height:100%}

/* ---------- Le bento ---------- */
.bz{padding:clamp(72px,8vw,128px) 0 clamp(88px,10vw,160px);border-top:1px solid var(--stage-line)}
.bx{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:clamp(360px,42vw,780px) clamp(260px,31vw,560px) clamp(96px,7.5vw,132px);gap:12px}
.tl{position:relative;overflow:hidden;border-radius:4px;background:#050607;margin:0}
.tl>.mk{position:absolute;inset:0}
.tc{position:absolute;left:18px;bottom:16px;z-index:6;color:rgba(255,255,255,.8);display:flex;gap:10px;align-items:baseline;text-shadow:0 1px 12px rgba(0,0,0,.5);pointer-events:none}
.tc b{font-weight:500;color:#fff}
.tc-top{top:16px;bottom:auto}
.t-camp{grid-column:1/9;grid-row:1;background:#000}
.t-camp>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 46%}
.t-camp::after,.t-tab::after,.t-mob::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;background:linear-gradient(0deg,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 26%)}
.gl{position:absolute;inset:0;width:100%;height:100%;display:none;z-index:2}
.t-mob{grid-column:9/13;grid-row:1}
.t-tab{grid-column:1/7;grid-row:2}
.t-logo{grid-column:7/10;grid-row:2;background:#000}
.lg2{position:absolute;left:50%;top:50%;width:52%;transform:translate(-50%,-50%);overflow:visible}
.lg2 .p{fill:#fff}
.t-pic{grid-column:10/13;grid-row:2;background:var(--nuit)}
.pics{position:absolute;left:14%;right:14%;top:50%;transform:translateY(-44%);display:grid;grid-template-columns:repeat(3,1fr);gap:16% 12%}
.pics svg{width:100%;height:auto;overflow:visible}
.pics path{fill:#fff;stroke:none}
.t-col{grid-column:1/13;grid-row:3;background:var(--nuit)}
/* la palette : quatre aplats posés sur la grille du bento (mêmes 12 colonnes, même gouttière) ;
   Pétrole tombe sous le logo, Turquoise et Menthe sous les pictos : la case se lit comme un nuancier */
.pal{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:12px}
.pf{position:relative;margin:0;background:var(--c);color:var(--k)}
.pf b,.pf em{position:absolute;left:18px;font-style:normal;white-space:nowrap}
/* nom et valeur sur une même ligne de pied, dans les quatre champs */
.pf b{bottom:32px;font:500 13px/1.2 var(--sans);letter-spacing:-.005em}
.pf em{bottom:15px;font-size:11px;line-height:1;opacity:.78}
.pf-n{grid-column:1/7;--c:var(--nuit);--k:#fff}
.pf-p{grid-column:7/10;--c:var(--petrole);--k:#fff}
.pf-t{grid-column:10/12;--c:var(--turq);--k:var(--nuit)}
.pf-m{grid-column:12/13;--c:var(--menthe);--k:var(--nuit)}

@media (max-width:1240px){.pf-p b,.pf-p em,.pf-t b,.pf-t em,.pf-m b,.pf-m em{left:12px}}
/* ---------- 1023 et moins ---------- */
@media (max-width:1023px){
  .bx{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:auto;grid-template-areas:"camp camp" "mob logo" "mob pic" "tab tab" "col col"}
  .t-camp{grid-area:camp;aspect-ratio:16/10}
  .t-mob{grid-area:mob}
  .t-logo{grid-area:logo;aspect-ratio:1}
  .t-pic{grid-area:pic;aspect-ratio:1}
  .t-tab{grid-area:tab;aspect-ratio:3/2}
  .t-col{grid-area:col;aspect-ratio:5/1;min-height:110px}
  /* 8 colonnes : la cinquième commence exactement sur la seconde colonne du bento */
  .pal{grid-template-columns:repeat(8,minmax(0,1fr))}
  .pf-n{grid-column:1/5}.pf-p{grid-column:5/7}.pf-t{grid-column:7/8}.pf-m{grid-column:8/9}
  .pf em{display:none}.pf-n em{display:block}
  /* les champs étroits portent leur nom sur la tranche, comme un nuancier */
  .pf-t b,.pf-m b,.pf-p b{writing-mode:vertical-rl;transform:rotate(180deg);bottom:14px;left:auto;right:50%;margin-right:-.6em;font-size:12px}
  .sc-b{grid-column:1/7}.vw{grid-column:7/13}
  .mk-tel{aspect-ratio:3/4.4}
}
/* ---------- mobile ---------- */
@media (max-width:767px){
  .pz-lede{margin-left:0}
  .mk-lap{aspect-ratio:3/2}
  .pz-duo{display:block}
  .vw{margin-top:40px}
  .vw-note{margin-bottom:24px}
  .mk-tel{aspect-ratio:4/5}
  .cap2{align-items:flex-start}
  .vw-tabs button{margin-right:16px;padding-right:12px}
  .vw-tabs button::after{right:12px}
  .bx{gap:8px}
  .t-camp{aspect-ratio:1/1.05}
  .t-col{aspect-ratio:auto;height:116px}
  .pal{column-gap:8px}
  .pf-n b{left:12px;bottom:26px;font-size:12px}
  .pf-n em{left:12px;bottom:11px}
  .pf-t b,.pf-m b,.pf-p b{bottom:11px;font-size:11px}
  .tc-top>span,.tc-top{font-size:11px}
  .t-logo .tc,.t-pic .tc{max-width:none}
  .t-logo .tc span,.t-pic .tc span,.t-col .tc span{display:none}
  .tc{left:12px;bottom:10px;font-size:11px;flex-wrap:wrap;gap:0 8px;max-width:calc(100% - 24px)}
  .tc-top{top:10px}
}
@media (prefers-reduced-motion:reduce){.w>.i,.cam,.iph-page{will-change:auto}}

/* intégration dans l’étude de cas : la frange du bento reste posée sur le bord haut */
#realisations.bz{position:relative;border-top:0}