/* ============================================================
   pas grand chose · nonsixe
   Feuille de style unique. Mobile d'abord, bascule desktop à 720 px.
   Rendu 3D et chorégraphie repris du prototype validé.
   ============================================================ */

/* ---------- polices auto-hébergées (OFL, via Fontsource) ---------- */
@font-face{
  font-family:'Fraunces';
  src:url(../fonts/fraunces-italic-var.woff2) format('woff2');
  font-style:italic;
  font-weight:300;
  font-display:swap;
}
@font-face{
  font-family:'Fraunces';
  src:url(../fonts/fraunces-roman-var.woff2) format('woff2');
  font-style:normal;
  font-weight:300;
  font-display:swap;
}
@font-face{
  font-family:'Special Elite';
  src:url(../fonts/special-elite.woff2) format('woff2');
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:'Manrope';
  src:url(../fonts/manrope-var.woff2) format('woff2');
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
}

/* ---------- base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --u:clamp(1.9px, 0.3vw + 1.2px, 3px);
  --w:calc(142 * var(--u));
  --h:calc(125 * var(--u));
  --d:calc(10 * var(--u));
  --paper:#f4f7f6;
  --ink:#191b1a;
  --mist:#b8ccc9;
  --mint:#b1c9b6;
  --sage:#748877;
  --slate:#636865;
  --spark:#46d67c;
  --display:'Fraunces', Georgia, 'Times New Roman', serif;
  --mono:'Special Elite', 'Courier New', monospace;
  --body:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
html{scroll-behavior:auto}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{max-width:100%}
::selection{background:var(--mint);color:var(--ink)}
a:focus-visible,button:focus-visible,.btn:focus-visible{outline:2px solid var(--spark);outline-offset:3px}

/* ---------- bascule de langue ---------- */
.lang{position:fixed;top:14px;right:14px;z-index:60;font:12px/1 var(--mono);letter-spacing:.06em;color:var(--slate);background:rgba(244,247,246,.85);padding:8px 10px;border:1px solid var(--mist);border-radius:2px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lang a{text-decoration:none;color:var(--slate)}
.lang a:hover{color:var(--ink)}
.lang a[aria-current="true"]{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ---------- scène 3D sticky ---------- */
.stage-wrap{height:400vh;position:relative}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.halo{position:absolute;left:50%;top:50%;width:96vmin;height:96vmin;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side, rgba(177,201,182,.55), rgba(184,204,201,.28) 48%, rgba(244,247,246,0) 72%)}
.scene{position:absolute;inset:0;perspective:1300px;perspective-origin:50% 50%}
.scene-inner{position:absolute;inset:0;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}
.rig{position:absolute;left:50%;top:50%;width:0;height:0;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;will-change:transform}

.case{position:absolute;left:0;top:0;width:var(--w);height:var(--h);margin-left:calc(var(--w) / -2);margin-top:calc(var(--h) / -2);-webkit-transform-style:preserve-3d;transform-style:preserve-3d}
.face{position:absolute;left:50%;top:50%;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}
.face--front,.face--back{width:var(--w);height:var(--h);margin-left:calc(var(--w) / -2);margin-top:calc(var(--h) / -2);background:#e9efec;box-shadow:0 30px 70px -18px rgba(25,27,26,.28)}
.face--front{transform:translateZ(calc(var(--d) / 2))}
.face--back{transform:rotateY(180deg) translateZ(calc(var(--d) / 2))}
.face--left,.face--right{width:var(--d);height:var(--h);margin-left:calc(var(--d) / -2);margin-top:calc(var(--h) / -2);background:linear-gradient(180deg,#f2f5f3,#e4eae7)}
.face--left{transform:rotateY(-90deg) translateZ(calc(var(--w) / 2))}
.face--right{transform:rotateY(90deg) translateZ(calc(var(--w) / 2))}
.face--top,.face--bottom{width:var(--w);height:var(--d);margin-left:calc(var(--w) / -2);margin-top:calc(var(--d) / -2);
  background:linear-gradient(90deg, rgba(255,255,255,.6), rgba(214,224,220,.75) 16%, rgba(255,255,255,.7) 55%, rgba(196,208,204,.75))}
.face--top{transform:rotateX(90deg) translateZ(calc(var(--h) / 2))}
.face--bottom{transform:rotateX(-90deg) translateZ(calc(var(--h) / 2))}

/* recto : charnière + livret sous couvercle transparent */
.hinge{position:absolute;left:0;top:0;width:calc(22 * var(--u));height:100%;background:linear-gradient(90deg,#dfe6e3,#f0f4f2 45%,#e3e9e6);border-right:1px solid rgba(25,27,26,.14)}
.hinge::before,.hinge::after{content:"";position:absolute;left:50%;width:calc(6 * var(--u));height:calc(3 * var(--u));transform:translateX(-50%);background:rgba(25,27,26,.16);border-radius:1px}
.hinge::before{top:calc(4 * var(--u))}
.hinge::after{bottom:calc(4 * var(--u))}
.spine{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-90deg);white-space:nowrap;font:calc(4.4 * var(--u))/1 var(--mono);letter-spacing:.16em;color:var(--slate)}
.spine b{font-weight:400;color:var(--ink);letter-spacing:.22em;margin-right:1.4em}
.face--right .spine{transform:translate(-50%,-50%) rotate(90deg)}
.booklet{position:absolute;left:calc(22 * var(--u));top:calc(2.5 * var(--u));width:calc(120 * var(--u));height:calc(120 * var(--u));
  background:url(../img/cover-front-800.jpg) center/cover no-repeat;
  background-image:-webkit-image-set(url(../img/cover-front-800.webp) 1x);
  background-image:image-set(url(../img/cover-front-800.webp) type("image/webp"), url(../img/cover-front-800.jpg) type("image/jpeg"))}
.traycard{position:absolute;left:calc(2 * var(--u));top:calc(3.5 * var(--u));width:calc(138 * var(--u));height:calc(118 * var(--u));
  background:url(../img/cover-back-800.jpg) center/cover no-repeat;
  background-image:-webkit-image-set(url(../img/cover-back-800.webp) 1x);
  background-image:image-set(url(../img/cover-back-800.webp) type("image/webp"), url(../img/cover-back-800.jpg) type("image/jpeg"))}
.lid{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.75), inset 0 0 0 2px rgba(25,27,26,.05)}
.lid::before{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,.34) 50%, rgba(255,255,255,0) 62%, rgba(255,255,255,0) 100%);
  background-size:260% 100%;background-position:calc(var(--sheen, .5) * 100%) 0}
.lid::after{content:"";position:absolute;left:calc(22 * var(--u));top:0;bottom:0;width:1px;background:rgba(25,27,26,.12)}
.face--back .lid::after{display:none}
.clip{position:absolute;right:calc(1.2 * var(--u));width:calc(2.6 * var(--u));height:calc(14 * var(--u));background:rgba(255,255,255,.6);border:1px solid rgba(25,27,26,.14);border-radius:1px}
.clip--a{top:calc(12 * var(--u))}
.clip--b{bottom:calc(12 * var(--u))}
.shade{position:absolute;inset:0;pointer-events:none;background:rgba(25,27,26,var(--sh,0))}
.side-sheen{position:absolute;inset:0;background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(255,255,255,.4))}

/* ---------- couches de texte sur la scène ---------- */
.layer{position:absolute;inset:0;pointer-events:none}
.hero-copy{position:absolute;left:7vw;right:7vw;top:auto;bottom:7vh;pointer-events:auto}
.eyebrow{font:13px/1.2 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--slate)}
.title{font-family:var(--display);font-weight:300;font-style:italic;font-variation-settings:"opsz" 144, "SOFT" 70, "WONK" 1;font-size:clamp(42px, 13vw, 64px);line-height:.92;letter-spacing:-.015em;margin:14px 0 14px}
.beads{display:block;width:120px;height:14px;margin:0 0 16px}
.meta{font-size:15px;color:var(--slate)}
.limited{margin-top:20px;font-family:var(--mono);font-size:14px;line-height:1.35;color:var(--ink)}
.limited b{font-family:var(--display);font-weight:300;font-style:italic;font-size:32px;line-height:1;vertical-align:-6px;margin-right:6px}
.btn{display:inline-block;margin-top:24px;padding:14px 22px;border:1px solid var(--ink);border-radius:999px;font:500 14px/1 var(--body);letter-spacing:.04em;text-decoration:none;background:transparent;color:var(--ink);transition:background .2s, color .2s}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn--primary{background:var(--ink);color:var(--paper)}
.btn--primary:hover{background:#000}
.btn[aria-disabled="true"]{opacity:.55;cursor:default}
.btn[aria-disabled="true"]:hover{background:transparent;color:var(--ink)}
.btn--primary[aria-disabled="true"]:hover{background:var(--ink);color:var(--paper)}
.hero-copy .btn{display:none}
.hint{display:none;position:absolute;left:50%;bottom:5vh;transform:translateX(-50%);font:12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--slate);pointer-events:none}
.hint::after{content:"";display:block;width:1px;height:28px;margin:10px auto 0;background:linear-gradient(var(--sage), transparent);animation:drip 1.8s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

.tracks-col{display:none;position:absolute;right:6vw;top:50%;transform:translateY(-50%);width:22vw;max-width:300px;pointer-events:auto}
.tracks{list-style:none;font-family:var(--mono);font-size:13px;line-height:1.7;color:var(--ink)}
.tracks li{display:grid;grid-template-columns:2.2em 1fr auto;gap:8px;border-bottom:1px dotted rgba(116,136,119,.45)}
.tracks .n{color:var(--slate)}
.tracks .d{color:var(--slate)}

.caption{position:absolute;left:50%;bottom:16vh;transform:translate(-50%,12px);font-family:var(--display);font-style:italic;font-weight:300;font-size:22px;white-space:normal;text-align:center;width:84vw;opacity:0;color:var(--ink);pointer-events:none;letter-spacing:-.01em}
.caption small{display:block;margin-top:6px;font:12px/1 var(--mono);font-style:normal;letter-spacing:.2em;text-transform:uppercase;color:var(--slate);text-align:center}

/* ---------- sous la scène ---------- */
.tracks-mobile{display:block;padding:12vh 8vw 4vh}
.tracks-mobile .eyebrow{margin-bottom:14px}

.order{position:relative;padding:12vh 7vw 8vh;display:grid;grid-template-columns:1fr;gap:6vw;max-width:1180px;margin:0 auto}
.price{display:flex;align-items:baseline;gap:16px;margin:18px 0 18px}
.amount{font-family:var(--display);font-size:48px;font-weight:300;line-height:1;letter-spacing:-.02em;white-space:nowrap}
.ship{font-family:var(--mono);font-size:13px;line-height:1.5;color:var(--slate)}
.buy{display:flex;align-items:center;flex-wrap:wrap;gap:14px}
.buy .btn{margin-top:0;padding:16px 26px}
.secure{margin-top:18px;font-family:var(--mono);font-size:12px;color:var(--slate);letter-spacing:.06em}
.listen{align-self:end}
.links{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.links a{font:500 13px var(--body);padding:10px 14px;border:1px solid var(--mist);border-radius:999px;text-decoration:none;background:#fff;transition:border-color .2s}
.links a:hover{border-color:var(--ink)}
.numbered{margin-top:34px;padding:22px 24px;border:1px dotted var(--sage);border-radius:2px;font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--slate);max-width:44ch}
.numbered b{display:block;font-family:var(--display);font-style:italic;font-weight:300;font-size:30px;line-height:1.1;color:var(--ink);margin-bottom:6px}

footer{padding:6vh 6vw calc(8vh + 70px);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;border-top:1px dotted var(--mist);font:12px/1 var(--mono);letter-spacing:.08em;color:var(--slate);max-width:1180px;margin:0 auto}
footer nav a{margin-left:18px;text-decoration:none}
footer nav a:hover{color:var(--ink)}

.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(244,247,246,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--mist);transform:translateY(110%);transition:transform .35s ease}
.mobile-bar.is-on{transform:none}
.mobile-bar .l{font-family:var(--mono);font-size:12px;line-height:1.3;color:var(--slate)}
.mobile-bar .l b{display:block;font-family:var(--display);font-style:italic;font-weight:300;font-size:20px;color:var(--ink)}
.mobile-bar .btn{margin:0;padding:12px 18px}

/* ---------- page merci ---------- */
.thanks{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:14vh 8vw 10vh;gap:0}
.thanks .cover{width:min(240px, 60vw);height:auto;border-radius:2px;box-shadow:0 30px 70px -18px rgba(25,27,26,.28)}
.thanks h1{font-family:var(--display);font-weight:300;font-style:italic;font-variation-settings:"opsz" 144, "SOFT" 70, "WONK" 1;font-size:clamp(44px, 9vw, 76px);line-height:.95;letter-spacing:-.015em;margin:26px 0 14px}
.thanks .lead{max-width:44ch;color:var(--slate)}
.thanks .eyebrow{margin-top:40px}
.thanks .links{justify-content:center}
.thanks .btn{margin-top:36px}

/* ---------- pages légales ---------- */
.legal{max-width:720px;margin:0 auto;padding:10vh 7vw 12vh}
.contract-note{font:12px/1.5 var(--mono);letter-spacing:.06em;color:var(--slate);border:1px dotted var(--mist);border-radius:2px;padding:10px 12px;margin-bottom:36px}
.legal h1{font-family:var(--display);font-weight:300;font-style:italic;font-variation-settings:"opsz" 144, "SOFT" 70, "WONK" 1;font-size:clamp(36px, 7vw, 56px);line-height:.95;letter-spacing:-.015em;margin:0 0 30px}
.legal h2{font:13px/1.2 var(--mono);font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--slate);margin:36px 0 10px}
.legal p,.legal li{font-size:15px;color:var(--ink)}
.legal ul{padding-left:1.2em;margin:8px 0}
.legal p{margin:8px 0}
.legal .todo{background:var(--mint);padding:1px 5px;border-radius:2px;white-space:nowrap}
.legal .back{margin-top:48px}
.legal footer{border-top:1px dotted var(--mist);margin-top:56px;padding:24px 0 0;max-width:none}

/* ---------- desktop ---------- */
@media (min-width: 720px){
  .stage-wrap{height:440vh}
  .booklet{background:url(../img/cover-front.jpg) center/cover no-repeat;
    background-image:-webkit-image-set(url(../img/cover-front.webp) 1x);
    background-image:image-set(url(../img/cover-front.webp) type("image/webp"), url(../img/cover-front.jpg) type("image/jpeg"))}
  .traycard{background:url(../img/cover-back.jpg) center/cover no-repeat;
    background-image:-webkit-image-set(url(../img/cover-back.webp) 1x);
    background-image:image-set(url(../img/cover-back.webp) type("image/webp"), url(../img/cover-back.jpg) type("image/jpeg"))}
  .hero-copy{left:6vw;right:auto;top:50%;bottom:auto;transform:translateY(-50%);max-width:22vw}
  .title{font-size:clamp(44px, 5.4vw, 86px)}
  .limited b{font-size:38px}
  .hero-copy .btn{display:inline-block}
  .hint{display:block}
  .tracks-col{display:block}
  .tracks-mobile{display:none}
  .caption{bottom:10vh;font-size:clamp(22px, 2.6vw, 38px);white-space:nowrap;text-align:left;width:auto}
  .order{grid-template-columns:1.1fr .9fr;padding:16vh 6vw 12vh}
  .amount{font-size:60px}
  .mobile-bar{display:none}
  footer{padding-bottom:8vh}
}

/* ---------- accessibilité : mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce){
  .hint::after{animation:none}
  .mobile-bar{transition:none}
}