/* Maquette 5 — tunnel 3D de témoignages (prompt « perspective tunnel hero »), palette Aureus */
html{overflow-x:clip}
.tn-track{position:relative;height:520vh;background:var(--ink)}
.tn-scene{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:var(--ink);perspective:1200px;transform-style:preserve-3d;user-select:none}
.tn-ciel{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.tn-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 50% at 50% 48%,rgba(198,162,80,.10) 0%,rgba(198,162,80,.03) 45%,transparent 75%)}
.tn-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 90% 90% at 50% 50%,transparent 60%,rgba(11,16,26,.7) 100%)}

.tn-title{position:relative;z-index:0;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 24px;max-width:760px;pointer-events:none;will-change:transform,opacity}
.tn-kicker{font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:2.4px;color:var(--gold);margin-bottom:26px;white-space:nowrap}
.tn-title h1{font-family:var(--serif);font-weight:500;font-size:clamp(56px,9.4vw,138px);line-height:.94;letter-spacing:-.03em;color:var(--ivory);text-wrap:balance}
.tn-title h1 em{font-style:italic;font-weight:500;color:var(--gold-light)}
.tn-title .w{display:inline-block;opacity:0;transform:translateY(.35em);filter:blur(6px);animation:tn-word 1.1s cubic-bezier(.2,.8,.2,1) forwards}
.tn-title .w:nth-child(1){animation-delay:.15s}.tn-title .w:nth-child(2){animation-delay:.32s}.tn-title .w:nth-child(4){animation-delay:.5s}.tn-title .w:nth-child(5){animation-delay:.72s}
@keyframes tn-word{to{opacity:1;transform:none;filter:blur(0)}}
.tn-title p{opacity:0;animation:tn-word 1.1s 1.05s cubic-bezier(.2,.8,.2,1) forwards}
.tn-title .tn-kicker{opacity:0;animation:tn-word 1s .05s cubic-bezier(.2,.8,.2,1) forwards}
.tn-title p{margin-top:22px;max-width:42ch;font-size:clamp(14px,1.1vw,17px);font-weight:400;color:#c9c6bd;line-height:1.6}
.tn-hint{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);z-index:20;display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;color:var(--gold);pointer-events:none}
.tn-hint i{display:block;width:1px;height:26px;background:linear-gradient(180deg,var(--gold),transparent)}

.tn-space{position:absolute;inset:0;pointer-events:none;transform-style:preserve-3d}
.tn-card{position:absolute;left:50%;top:50%;pointer-events:auto;cursor:pointer;will-change:transform,opacity;transform-style:preserve-3d}
.tn-card figure{position:relative;width:100%;overflow:hidden;border-radius:18px;background:#0e1420;
  box-shadow:0 30px 80px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.14);transition:box-shadow .5s}
.tn-card:hover figure{box-shadow:0 30px 90px rgba(198,162,80,.28),0 0 0 1px rgba(220,192,130,.75)}
.tn-card img{display:block;width:100%;height:auto;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.tn-card:hover img{transform:scale(1.08)}
.tn-card figcaption{position:absolute;inset:0;display:flex;align-items:flex-end;padding:14px 16px;background:linear-gradient(0deg,rgba(0,0,0,.82),rgba(0,0,0,.08) 45%,transparent);
  font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gold-light);text-shadow:0 1px 6px rgba(0,0,0,.6)}

/* appel final, quand le tunnel est traversé */
.tn-final{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px;opacity:0;pointer-events:none;will-change:transform,opacity}
.tn-final.on{pointer-events:auto}
.tn-final .tn-kicker{margin-bottom:22px}
.tn-final h2{font-family:var(--serif);font-weight:500;font-size:clamp(38px,5.4vw,82px);line-height:1;letter-spacing:-1.5px;max-width:18ch;text-wrap:balance;color:var(--ivory)}
.tn-final h2 em{color:var(--gold-light)}
.tn-cta{position:relative;display:inline-flex;align-items:center;gap:16px;margin-top:38px;padding:20px 34px;border-radius:999px;background:var(--gold);color:#11151b;font-weight:800;font-size:13px;letter-spacing:.3px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,230,170,.5) inset,0 18px 60px rgba(198,162,80,.35);transition:background .25s,transform .25s}
.tn-cta:hover{background:var(--gold-light);transform:translateY(-2px)}
.tn-cta::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);transform:translateX(-120%);animation:tn-sweep 3.4s ease-in-out infinite}
@keyframes tn-sweep{0%,55%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
.tn-cta .icon{width:20px;height:20px}
.tn-note{margin-top:22px;font-size:11px;letter-spacing:1.8px;font-weight:700;color:var(--muted)}
.tn-note b{color:var(--gold-light);font-weight:700}

/* fondu vers la landing du designer */
.tn-after{position:relative;z-index:1;margin-top:-22vh}
.tn-after::before{content:"";position:absolute;left:0;right:0;top:-1px;height:22vh;background:linear-gradient(180deg,rgba(11,16,26,0),var(--ink));pointer-events:none}
.tn-after>.container{position:relative;background:var(--ink)}
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}

@media (max-width:767px){
  .tn-track{height:560vh}
  .tn-scene{perspective:900px}
  .tn-kicker{font-size:9px;letter-spacing:2px;white-space:normal}
  .tn-title h1{font-size:clamp(50px,15vw,68px)}
  .tn-title p{font-size:14px}
  .tn-card figure{border-radius:12px}
  .tn-card figcaption{padding:10px 12px;font-size:8px}
  .tn-final h2{font-size:clamp(32px,9vw,44px)}
  .tn-cta{padding:17px 24px;font-size:12px;margin-top:28px}
}
@media (prefers-reduced-motion:reduce){
  .tn-track{height:auto}
  .tn-scene{position:relative;height:auto;min-height:100vh;perspective:none;flex-direction:column;padding:120px 24px 60px}
  .tn-space{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:40px;pointer-events:auto;transform:none}
  .tn-card{position:static;width:200px !important;transform:none !important;opacity:1 !important}
  .tn-title{transform:none !important;opacity:1 !important}
  .tn-title .w,.tn-title p,.tn-title .tn-kicker{animation:none;opacity:1;transform:none;filter:none}
  .tn-final{position:relative;opacity:1 !important;transform:none !important;pointer-events:auto;padding:80px 24px}
  .tn-hint{display:none}
  .tn-after{margin-top:0}
  .rv{opacity:1;transform:none}
}