/* Accueil v3 — hero épinglé, cartes empilées, index à aperçu flottant.
   Se charge APRÈS site-v2.css (réutilise ses variables, header, about, footer). */

:root { --ink-2:#000; --paper-2:#f6f1ea; --gutter:28px; }

.home3 { background:var(--paper); overflow-x:clip; }
html:has(.home3) { overflow-x:clip; }

/* Header fixe, inversé automatiquement selon le fond (clair/sombre) */
.home3 .site-header { position:fixed; inset:0 0 auto 0; z-index:20; color:#fff; mix-blend-mode:difference; }
.home3 .brand-dot { color:inherit; }

/* ───────────── HERO ───────────── */
.stage { height:380vh; position:relative; }
.stage-pin { background:#000; height:100svh; overflow:hidden; perspective:1600px; position:sticky; top:0; }

.stage-title { color:var(--paper-2); left:var(--gutter); pointer-events:none; position:absolute; right:var(--gutter); top:15svh; will-change:transform,opacity; }
.ln { display:block; overflow:hidden; padding-bottom:.06em; }
.ln > span { animation:rise 1.2s cubic-bezier(.16,1,.3,1) both; display:block; }
.ln--big { font-size:clamp(40px,17vw,300px); font-weight:400; letter-spacing:-.075em; line-height:.86; }
.ln--sub { color:rgba(246,241,234,.58); font-size:clamp(24px,3.7vw,64px); font-weight:400; letter-spacing:-.05em; line-height:1.02; }
.ln--big > span { animation-delay:.15s; }
.ln--sub:nth-of-type(2) > span { animation-delay:.32s; }
.ln--sub:nth-of-type(3) > span { animation-delay:.42s; }
.ln--big { margin-bottom:.22em; }
@keyframes rise { from { transform:translate3d(0,108%,0); } }

.stage-window { background:#201f1d; border-radius:10px; bottom:7%; display:block; left:48%; overflow:hidden; position:absolute; right:5%; top:56%; will-change:left,top,right,bottom; }
.stage-window > img { height:100%; object-fit:cover; transform:scale(1.06); width:100%; will-change:transform; }
.stage-window::after { background:linear-gradient(to top, rgba(15,15,14,.78), transparent 55%); content:""; inset:0; position:absolute; pointer-events:none; }
.stage-label { bottom:var(--gutter); color:var(--paper-2); display:flex; flex-direction:column; gap:14px; left:var(--gutter); opacity:0; position:absolute; z-index:1; }
.stage-label span, .stage-label em { font-family:"DM Mono",monospace; font-size:10px; font-style:normal; letter-spacing:.01em; text-transform:uppercase; }
.stage-label strong { font-size:clamp(34px,6vw,104px); font-weight:400; letter-spacing:-.065em; line-height:.9; }
.stage-label em { opacity:.7; }

.stage-hud { align-items:flex-end; bottom:var(--gutter); color:rgba(246,241,234,.7); display:flex; font-family:"DM Mono",monospace; font-size:10px; justify-content:space-between; left:var(--gutter); letter-spacing:.01em; pointer-events:none; position:absolute; right:var(--gutter); text-transform:uppercase; }
.stage-hud .cue { align-items:center; display:flex; gap:12px; }
.stage-hud .cue i { background:rgba(246,241,234,.25); display:block; height:1px; overflow:hidden; position:relative; width:46px; }
.stage-hud .cue i::after { animation:cue 2s cubic-bezier(.65,0,.35,1) infinite; background:var(--paper-2); content:""; inset:0; position:absolute; }
@keyframes cue { 0% { transform:translateX(-100%); } 60%,100% { transform:translateX(100%); } }

/* ───────────── DÉROULÉ (cartes empilées) ───────────── */
.reel { background:var(--paper); border-radius:28px 28px 0 0; margin-top:-7svh; padding:130px var(--gutter) 160px; position:relative; z-index:2; }
.reel-head { display:grid; gap:18px; grid-template-columns:repeat(12,1fr); margin-bottom:90px; }
.reel-head .eyebrow { grid-column:1 / span 2; margin:0; }
.reel-head h2 { font-size:clamp(36px,5.2vw,88px); font-weight:400; grid-column:3 / span 7; letter-spacing:-.065em; line-height:.9; }
.reel-head > p:last-child { color:var(--soft); font-size:13px; grid-column:10 / span 3; line-height:1.4; }

.stack { list-style:none; margin:0 auto; max-width:1180px; }
.card { height:min(62svh,540px); margin-bottom:48svh; position:sticky; top:calc(15svh + var(--i) * 14px); transform-origin:50% 0; will-change:transform; }
.card:last-child { margin-bottom:0; }
.card > a { background:var(--bg); border-radius:22px; box-shadow:0 -24px 60px -20px rgba(0,0,0,.28); color:var(--fg); display:grid; grid-template-columns:5fr 7fr; height:100%; overflow:hidden; position:relative; }
.card > a::after { background:#000; content:""; inset:0; opacity:var(--dim,0); pointer-events:none; position:absolute; }
.card-copy { display:flex; flex-direction:column; justify-content:space-between; padding:clamp(22px,2.6vw,40px); }
.card-n { -webkit-text-stroke:1px currentColor; color:transparent; font-size:clamp(80px,10vw,170px); font-weight:400; letter-spacing:-.08em; line-height:.8; }
.card h3 { font-size:clamp(30px,3.6vw,60px); font-weight:400; letter-spacing:-.06em; line-height:.92; margin-bottom:14px; }
.card p { font-size:13px; line-height:1.4; opacity:.7; }
.card .go { display:inline-block; font-family:"DM Mono",monospace; font-size:10px; margin-top:26px; position:relative; text-transform:uppercase; }
.card .go::after { background:currentColor; bottom:-4px; content:""; height:1px; left:0; position:absolute; right:100%; transition:right .4s cubic-bezier(.16,1,.3,1); }
.card > a:hover .go::after { right:0; }
.card-img { overflow:hidden; }
.card-img img { height:100%; object-fit:cover; transition:transform 1s cubic-bezier(.2,.7,.2,1); width:100%; }
.card > a:hover .card-img img { transform:scale(1.045); }

/* ───────────── INDEX ───────────── */
.idx { background:var(--ink-2); color:var(--paper-2); padding:140px var(--gutter) 150px; position:relative; z-index:2; }
.idx-head { display:grid; gap:18px; grid-template-columns:repeat(12,1fr); margin-bottom:70px; }
.idx-head .eyebrow { color:rgba(246,241,234,.5); grid-column:1 / span 2; margin:0; }
.idx-head h2 { font-size:clamp(36px,5.2vw,88px); font-weight:400; grid-column:3 / span 7; letter-spacing:-.065em; line-height:.9; }
.idx-head > p:last-child { color:rgba(246,241,234,.5); font-size:13px; grid-column:10 / span 3; line-height:1.4; }

.idx-list { list-style:none; }
.idx-group { border-top:1px solid rgba(246,241,234,.16); color:rgba(246,241,234,.5); font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.01em; padding:46px 0 14px; text-transform:uppercase; }
.idx-group:first-child { padding-top:15px; }
.idx-row { align-items:baseline; border-top:1px solid rgba(246,241,234,.1); display:grid; gap:18px; grid-template-columns:3.5rem 1fr minmax(0,26%) 2rem; padding:clamp(14px,1.7vw,24px) 0; position:relative; transition:opacity .3s ease, padding .5s cubic-bezier(.16,1,.3,1); }
.idx-row .n { color:var(--accent); font-family:"DM Mono",monospace; font-size:11px; }
.idx-row .name { font-size:clamp(28px,4.6vw,80px); font-weight:400; letter-spacing:-.06em; line-height:.95; transition:transform .5s cubic-bezier(.16,1,.3,1); }
.idx-row .type { color:rgba(246,241,234,.5); font-family:"DM Mono",monospace; font-size:10px; text-align:right; text-transform:uppercase; }
.idx-row .arrow { font-family:"DM Mono",monospace; justify-self:end; opacity:0; transform:translate(-8px,8px); transition:opacity .3s ease, transform .4s cubic-bezier(.16,1,.3,1); }
.idx-thumb { display:none; }

@media (hover:hover) and (pointer:fine) {
  .idx-list:hover .idx-row:not(:hover) { opacity:.28; }
  .idx-row:hover .name { transform:translateX(18px); }
  .idx-row:hover .arrow { opacity:1; transform:none; }
}

.peek { aspect-ratio:4 / 3; background:#201f1d; border-radius:6px; box-shadow:0 30px 60px -20px rgba(0,0,0,.6); height:auto; left:0; opacity:0; overflow:hidden; pointer-events:none; position:fixed; top:0; transition:opacity .25s ease; width:clamp(220px,24vw,380px); z-index:15; will-change:transform; }
.peek.on { opacity:1; }
.peek img { height:100%; object-fit:cover; width:100%; }

/* ───────────── About / footer : sur papier ───────────── */
.home3 .about { background:var(--paper); position:relative; z-index:2; }
.home3 footer { position:relative; z-index:2; }

/* ───────────── Responsive ───────────── */
@media (max-width:900px) {
  .reel-head, .idx-head { grid-template-columns:1fr; }
  .reel-head > *, .idx-head > * { grid-column:1 !important; }
  .card > a { grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; }
  .card { height:min(72svh,560px); margin-bottom:36svh; }
  .card-copy { flex-direction:row; align-items:flex-end; justify-content:space-between; order:2; padding:16px; }
  .card-n { font-size:clamp(70px,22vw,120px); }
  .card-img { order:1; }
  .card .go { display:none; }
}
@media (max-width:720px) {
  :root { --gutter:16px; }
  .stage-window { bottom:9%; left:6%; right:6%; top:62%; }
  .reel { border-radius:20px 20px 0 0; padding:90px var(--gutter) 110px; }
  .card { top:calc(12svh + var(--i) * 10px); }
  .idx { padding:100px var(--gutter); }
}
@media (prefers-reduced-motion:reduce) {
  .stage { height:100svh; }
  .ln > span, .stage-hud .cue i::after { animation:none; }
  .ln > span { transform:none; }
}

/* Index tactile : image déployée sur la ligne centrée à l'écran */
@media (hover:none), (max-width:720px) {
  .peek { display:none; }
  .idx-row { grid-template-columns:2.2rem 1fr 1.6rem; row-gap:0; transition:opacity .4s ease; }
  .idx-row .name { grid-column:2; }
  .idx-row .type { grid-column:2; grid-row:2; margin-top:6px; text-align:left; }
  .idx-row .arrow { display:block; grid-column:3; grid-row:1; opacity:.5; transform:none; }
  .idx-thumb { aspect-ratio:auto; border-radius:6px; display:block; grid-column:2 / -1; grid-row:3; height:0; margin-top:0; object-fit:cover; opacity:0; transition:height .6s cubic-bezier(.16,1,.3,1), margin .6s cubic-bezier(.16,1,.3,1), opacity .5s ease; width:100%; }
  .idx-list:has(.is-active) .idx-row:not(.is-active) { opacity:.4; }
  .idx-row.is-active .idx-thumb { height:clamp(150px,42vw,260px); margin:14px 0 6px; opacity:1; }
  .idx-row.is-active .n, .idx-row.is-active .arrow { opacity:1; }
}