:root { --black:#080708; --black-soft:#111011; --ink:#191516; --red:#ae1d32; --red-low:#671321; --white:#f1eeea; --muted:#908988; --line:rgba(241,238,234,.16); --display:"Space Grotesk",Arial,sans-serif; --mono:"DM Mono",monospace; }
* { box-sizing:border-box; } html { background:var(--black); } body { min-width:320px; margin:0; overflow-x:hidden; color:var(--white); background:var(--black); font-family:var(--display); } button,input { font:inherit; } button { cursor:pointer; } button:focus-visible,input:focus-visible { outline:1px solid var(--red); outline-offset:4px; }.ambient-canvas { position:fixed; z-index:0; inset:0; pointer-events:none; opacity:.96; }.cursor-light { position:fixed; z-index:1; width:280px; height:280px; pointer-events:none; border-radius:50%; background:radial-gradient(circle,rgba(174,29,50,.08),transparent 68%); transition:transform .1s linear; }.film-grain { position:fixed; z-index:20; inset:0; pointer-events:none; opacity:.06; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.8'/%3E%3C/svg%3E"); mix-blend-mode:soft-light; }
.site-header { position:fixed; z-index:10; top:0; left:0; width:100%; display:flex; align-items:center; justify-content:space-between; padding:1.35rem 5vw; }.monogram { width:1.7rem; height:1.7rem; padding:0; border:0; color:var(--white); background:transparent; font:700 1rem var(--display); }.section-indicator { margin:0; color:#b6afaa; font:.56rem var(--mono); letter-spacing:.13em; }.sound-control { display:none; }.chapter-tabs { position:fixed; z-index:11; top:4.5rem; right:5vw; display:flex; gap:1rem; }.chapter-tabs button { padding:0; border:0; color:var(--muted); background:transparent; font:500 .52rem var(--mono); letter-spacing:.07em; text-transform:uppercase; transition:color .2s; }.chapter-tabs button:hover,.chapter-tabs button[aria-current="page"] { color:var(--white); }.chapter-tabs button[aria-current="page"]::after { content:""; display:block; width:1rem; margin-top:.35rem; border-top:1px solid var(--red); }
main { position:relative; z-index:2; }.page { position:relative; min-height:100svh; padding:7.5rem 7vw 3.5rem; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }.page[hidden] { display:none; }.eyebrow,.login-kicker,.password-kicker { margin:0 0 1rem; color:var(--muted); font:.56rem var(--mono); letter-spacing:.14em; text-transform:uppercase; }.eyebrow::before { content:""; display:inline-block; width:1.7rem; margin:0 .65rem .2rem 0; border-top:1px solid var(--red); }h1,h2,h3 { margin:0; font-family:var(--display); text-transform:uppercase; letter-spacing:-.075em; line-height:.86; } h1 { font-size:clamp(3.8rem,15vw,10rem); font-weight:700; } h2 { font-size:clamp(2.75rem,10vw,6.5rem); font-weight:600; } h1 em,h2 em { color:var(--red); font-style:normal; }.button { display:inline-flex; align-items:center; gap:.7rem; width:max-content; margin-top:1.8rem; padding:.78rem 0; border:0; color:var(--white); background:transparent; font:500 .59rem var(--mono); letter-spacing:.12em; text-transform:uppercase; transition:gap .22s,color .22s; }.button::before { content:""; width:2.1rem; border-top:1px solid var(--red); }.button:hover { gap:1.1rem; color:#fff; }.button span { color:var(--red); font-size:1rem; }
#access { align-items:center; justify-content:center; min-height:100svh; text-align:center; background:radial-gradient(circle at 50% 43%,rgba(96,11,28,.19),transparent 28rem); }.login-shell { max-width:38rem; animation:rise-in 1.2s cubic-bezier(.2,.8,.2,1) both; transition:opacity .6s,transform .7s; }.login-shell.is-leaving { pointer-events:none; opacity:0; transform:scale(.96) translateY(-18px); }.login-kicker { color:#b8b0aa; }.login-pretitle { margin:0 0 1.25rem; color:var(--muted); font-size:.7rem; letter-spacing:.02em; }.login-title { display:flex; flex-direction:column; align-items:center; color:var(--white); }.login-title span { margin-top:.4rem; color:var(--red); font-size:clamp(.85rem,2.2vw,1.2rem); font-weight:500; letter-spacing:.22em; }.login-copy { max-width:20rem; margin:2rem auto 0; color:#a9a19c; font-size:.72rem; line-height:1.75; }.invitation-button { position:relative; margin-top:2.3rem; padding:.95rem 1.25rem; overflow:hidden; border:1px solid rgba(241,238,234,.36); color:var(--white); background:transparent; font:500 .61rem var(--mono); letter-spacing:.11em; text-transform:uppercase; transition:border-color .25s,color .25s; }.invitation-button::before { content:""; position:absolute; inset:0; transform:translateX(-102%); background:var(--red); transition:transform .35s cubic-bezier(.7,0,.3,1); }.invitation-button:hover { border-color:var(--red); }.invitation-button:hover::before { transform:none; }.invitation-button span,.invitation-button { isolation:isolate; }.invitation-button span { position:relative; margin-left:.8rem; }.invitation-button { color:var(--white); }.invitation-button::after { content:"Ouvrir l’invitation"; position:absolute; z-index:1; inset:0; display:grid; place-items:center; pointer-events:none; }.invitation-button span { z-index:2; }.password-card { width:min(90vw,27rem); margin-top:0; padding:2.25rem 2rem; border:1px solid var(--line); background:rgba(12,10,11,.65); text-align:left; opacity:0; transform:translateY(18px) scale(.98); transition:opacity .6s,transform .6s; backdrop-filter:blur(12px); }.password-card.is-visible { opacity:1; transform:none; }.password-card[hidden] { display:none; }.password-card label { display:block; max-width:18rem; margin-bottom:1rem; color:var(--white); font-size:.92rem; font-weight:500; letter-spacing:-.025em; }.password-card input { width:100%; padding:.8rem 0; border:0; border-bottom:1px solid var(--line); border-radius:0; outline:0; color:var(--white); background:transparent; font-size:.86rem; }.password-card input::placeholder { color:#716a67; }.password-card input:focus { border-color:var(--red); }.form-message { min-height:1.15rem; margin:.6rem 0 0; color:#d8909b; font:.58rem var(--mono); }.password-hint { margin:1rem 0 0; color:var(--muted); font-size:.58rem; line-height:1.55; }.password-card.shake { animation:shake .4s linear; }
.page-scarf { background:linear-gradient(112deg,rgba(14,11,12,.58),rgba(14,11,12,.16)); }.page-scarf::after,.page-final::after { content:""; position:absolute; right:-11rem; bottom:-12rem; z-index:-1; width:34rem; height:34rem; border-radius:50%; background:radial-gradient(circle,rgba(125,12,32,.18),transparent 66%); filter:blur(12px); }.chapter-copy { max-width:42rem; }.chapter-copy blockquote { max-width:34rem; margin:0; font-size:clamp(1.3rem,3.2vw,2.25rem); font-weight:500; line-height:1.25; letter-spacing:-.05em; text-transform:uppercase; }.caption { margin:1.3rem 0 0; color:var(--muted); font-size:.67rem; }.video-placeholder { position:relative; display:grid; min-height:15rem; width:100%; margin-top:2.8rem; overflow:hidden; place-items:center; border:1px solid var(--line); background:linear-gradient(125deg,rgba(49,14,21,.86),rgba(6,6,7,.76)); }.video-placeholder::before { content:""; position:absolute; width:140%; height:2px; transform:rotate(-18deg); background:linear-gradient(90deg,transparent,rgba(194,25,49,.95),transparent); box-shadow:0 12px 60px 12px rgba(174,29,50,.32); }.scarf-shape { display:none; }.play-button { position:relative; z-index:1; display:grid; width:3.8rem; height:3.8rem; place-items:center; padding-left:.15rem; border:1px solid var(--white); border-radius:50%; color:var(--white); background:rgba(8,7,8,.38); transition:transform .25s,background .25s; }.play-button:hover { transform:scale(1.07); background:var(--red); }.play-button span { font-size:.7rem; }.video-meta { position:absolute; right:1rem; bottom:1rem; left:1rem; display:flex; justify-content:space-between; color:#b7aaa8; font:.53rem var(--mono); letter-spacing:.1em; }.video-placeholder>p { position:absolute; top:1rem; left:1rem; margin:0; color:#b7aaa8; font:.53rem var(--mono); letter-spacing:.08em; }
.page-laura { justify-content:flex-start; background:rgba(8,7,8,.54); }.chapter-heading { max-width:35rem; }.chapter-heading>p:not(.eyebrow) { max-width:24rem; margin:1.4rem 0 0; color:var(--muted); font-size:.72rem; line-height:1.7; }.evidence-grid { display:grid; grid-template-columns:1fr; max-width:42rem; margin-top:3.3rem; border-top:1px solid var(--line); }.evidence-card { display:grid; grid-template-columns:4rem 1fr 1rem; align-items:center; min-height:5.25rem; padding:0; border:0; border-bottom:1px solid var(--line); color:var(--white); background:transparent; text-align:left; transition:padding .25s,background .25s; }.evidence-card:hover { padding-left:.7rem; background:rgba(255,255,255,.035); }.file-number { color:var(--red); font:.54rem var(--mono); letter-spacing:.08em; }.evidence-card strong { font-size:1.02rem; font-weight:500; letter-spacing:-.045em; }.card-arrow { color:var(--muted); }.stamp { display:block; margin-top:.24rem; color:var(--muted); font:.48rem var(--mono); letter-spacing:.1em; }.photo-shelf { display:grid; grid-template-columns:repeat(3,1fr); gap:.65rem; max-width:42rem; margin-top:3.4rem; }.photo-slot { position:relative; display:flex; flex-direction:column; justify-content:space-between; min-height:9rem; padding:.8rem; overflow:hidden; border:1px solid var(--line); color:var(--muted); background:linear-gradient(145deg,#211718,#0e0c0d); transition:transform .25s,border-color .25s; }.photo-slot:hover { transform:translateY(-.35rem); border-color:rgba(174,29,50,.75); }.photo-slot::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 5%,rgba(174,29,50,.2),transparent 50%); }.photo-slot span,.photo-slot p { position:relative; z-index:1; }.photo-slot span { font:.49rem var(--mono); letter-spacing:.1em; text-transform:uppercase; }.photo-slot p { margin:0; font-size:.72rem; }.photo-slot-tall { transform:translateY(-1rem); }.photo-slot-tall:hover { transform:translateY(-1.35rem); }.hidden-file { max-width:32rem; margin-top:2rem; padding:1rem 0 1rem 1.2rem; border-left:1px solid var(--red); color:var(--muted); font-size:.72rem; line-height:1.7; }.hidden-file .eyebrow { margin-bottom:.5rem; }.hidden-file p:last-child { margin:0; }.finale-button { margin-top:2.5rem; }
.page-final { background:linear-gradient(128deg,rgba(19,10,12,.85),rgba(8,7,8,.42)); }.final-copy { max-width:40rem; }.final-message { max-width:29rem; margin:2rem 0; color:#c6bfba; font-size:1rem; line-height:1.7; }.signature { color:var(--red); font-size:.72rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; }.signature span { color:var(--white); }.surprise { max-width:31rem; margin-top:1.4rem; padding-top:1rem; border-top:1px solid var(--line); color:var(--muted); font-size:.8rem; line-height:1.6; }.memory-strip { display:flex; gap:1rem; margin-top:4rem; }.memory-strip article { width:8.5rem; padding-top:.7rem; border-top:1px solid var(--line); }.memory-strip span { color:var(--red); font:.55rem var(--mono); }.memory-strip p { margin:.65rem 0 0; color:var(--muted); font-size:.68rem; line-height:1.5; }
.modal { width:min(88vw,30rem); padding:2.2rem; border:1px solid var(--line); color:var(--white); background:#121011; box-shadow:0 2rem 8rem rgba(0,0,0,.65); }.modal::backdrop { background:rgba(0,0,0,.76); backdrop-filter:blur(6px); }.modal h3 { margin:.5rem 0 1.2rem; font-size:1.9rem; }.modal p:last-child { color:#b8b1ac; font-size:.78rem; line-height:1.75; }.modal-close { position:absolute; top:.7rem; right:.8rem; border:0; color:var(--white); background:transparent; font-size:1.5rem; }
body.is-unlocking #access { animation:unlock .75s cubic-bezier(.7,0,.3,1) both; } @keyframes unlock { to { opacity:0; transform:scale(1.04); filter:blur(4px); } } @keyframes rise-in { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } } @keyframes shake { 25% { transform:translateX(-7px); } 75% { transform:translateX(7px); } } @media (prefers-reduced-motion:no-preference) { .page.is-active:not(#access) > * { animation:reveal .75s .08s cubic-bezier(.2,.8,.2,1) both; } @keyframes reveal { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } } } @media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } .ambient-canvas,.cursor-light { display:none; } }
@media (min-width:720px) { .site-header { padding:1.5rem 4vw; }.page { padding:8rem 12vw 4rem; }.chapter-tabs { top:1.75rem; right:8vw; }.page-scarf { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(20rem,.95fr); gap:8vw; align-items:center; }.video-placeholder { min-height:29rem; margin:0; }.page-laura { padding-top:10rem; }.evidence-grid { grid-template-columns:1fr 1fr; column-gap:3rem; }.evidence-card { grid-column:auto; }.memory-strip { margin-top:5rem; }.memory-strip article { width:10rem; } }

/* Le bouton reste volontairement calme : le mouvement vient de la lumière, pas d'un effet gadget. */
.invitation-button::before,.invitation-button::after { display:none; }.login-shell.is-leaving { position:absolute; }

/* Le parcours s'inspire d'une carte d'anniversaire à étapes, mais reste noir, feutré et personnel. */
#access { background:radial-gradient(circle at 50% 42%,rgba(86,10,27,.12),transparent 32rem); }.prelude { position:relative; display:grid; width:min(100%,44rem); min-height:29rem; place-items:center; }.gate-scene { width:100%; text-align:center; }.gate-scene[hidden] { display:none; }.gate-scene.is-active { animation:scene-in .72s cubic-bezier(.2,.8,.2,1) both; }.scene-number { margin:0 0 1.1rem; color:var(--muted); font:.55rem var(--mono); letter-spacing:.14em; }.scene-whisper { max-width:23rem; margin:0 auto 1.3rem; color:#aaa29d; font-size:.72rem; line-height:1.7; }.gate-scene h1,.gate-scene h2 { color:var(--white); }.gate-scene h1 { display:flex; flex-direction:column; align-items:center; }.gate-scene h1 span { margin-top:.45rem; color:var(--red); font-size:clamp(.78rem,2vw,1.05rem); font-weight:500; letter-spacing:.25em; }.scene-button { display:inline-flex; align-items:center; gap:.85rem; margin-top:2.1rem; padding:.9rem 0; border:0; color:var(--white); background:transparent; font:500 .61rem var(--mono); letter-spacing:.13em; text-transform:uppercase; transition:gap .22s,color .22s; }.scene-button::before { content:""; width:2.2rem; border-top:1px solid var(--red); }.scene-button:hover { gap:1.2rem; color:#fff; }.scene-button span { color:var(--red); font-size:.9rem; }.scene-button-quiet { color:var(--muted); }.scene-button-quiet::before { border-color:var(--muted); }.record-button { position:relative; display:grid; width:8.4rem; height:8.4rem; margin:1.8rem auto 0; place-items:center; border:1px solid rgba(241,238,234,.42); border-radius:50%; color:var(--white); background:radial-gradient(circle at 50% 50%,#571222 0 8%,#160f11 9% 57%,#47101d 58% 60%,#120d0e 61%); transition:transform .3s,box-shadow .3s; }.record-button::before { content:""; position:absolute; inset:.6rem; border:1px solid rgba(241,238,234,.14); border-radius:50%; }.record-button:hover { transform:scale(1.04); box-shadow:0 0 3rem rgba(174,29,50,.18); }.record-button.is-playing { animation:spin-record 2.2s linear infinite; }.record-center { position:relative; z-index:1; display:grid; width:2.25rem; height:2.25rem; place-items:center; border-radius:50%; color:#261113; background:var(--white); font-size:.65rem; }.audio-message,.cake-message { min-height:1rem; margin:.9rem 0 0; color:var(--muted); font:.58rem var(--mono); }.cake { position:relative; width:10.5rem; height:8.8rem; margin:1.6rem auto 0; }.cake-base { position:absolute; right:0; bottom:0; left:0; height:4.6rem; border-radius:1.3rem 1.3rem .55rem .55rem; background:linear-gradient(90deg,#411019,#8d172b 48%,#4e101b); box-shadow:inset 0 .45rem rgba(255,255,255,.1),0 1rem 3rem rgba(174,29,50,.16); }.cake-icing { position:absolute; z-index:1; right:0; bottom:4rem; left:0; height:1.2rem; border-radius:1.2rem 1.2rem .2rem .2rem; background:#efddd2; }.candle { position:absolute; z-index:2; bottom:5.05rem; width:.55rem; height:2rem; border-radius:.15rem; background:repeating-linear-gradient(135deg,#e7d8c9 0 .22rem,#a71d31 .22rem .42rem); }.candle::before { content:""; position:absolute; top:-.8rem; left:-.17rem; width:.9rem; height:1.05rem; border-radius:55% 45% 55% 45%; background:#ee9e42; box-shadow:0 0 1.3rem .2rem rgba(238,158,66,.68); animation:flicker .9s ease-in-out infinite alternate; }.candle-one { left:2.3rem; }.candle-two { left:5rem; }.candle-three { right:2.3rem; }.cake.candles-out .candle::before { opacity:0; transform:scale(.15); animation:none; }.cake.candles-out .candle::after { content:""; position:absolute; top:-.9rem; left:.1rem; width:.5rem; height:.8rem; border-radius:50%; background:rgba(173,170,163,.25); filter:blur(4px); animation:smoke 1.5s ease-out both; }.confetti { position:absolute; z-index:5; left:50%; top:3.5rem; width:.36rem; height:.72rem; animation:confetti-pop 1.45s cubic-bezier(.12,.72,.28,1) both; }.quiz-panel { max-width:36rem; margin:0 auto; }.quiz-panel h2 { max-width:32rem; margin:0 auto; font-size:clamp(2.1rem,7vw,4.75rem); }.quiz-options { display:grid; gap:.55rem; max-width:25rem; margin:2.1rem auto 0; }.quiz-option { display:flex; align-items:center; justify-content:space-between; width:100%; padding:1rem 0; border:0; border-top:1px solid var(--line); color:var(--white); background:transparent; font:500 .67rem var(--mono); letter-spacing:.09em; text-align:left; transition:padding .2s,background .2s; }.quiz-option:last-child { border-bottom:1px solid var(--line); }.quiz-option:hover { padding-left:.75rem; background:rgba(255,255,255,.035); }.quiz-option:disabled { opacity:.5; }.quiz-option span { color:var(--red); font-size:1rem; }.quiz-reply { min-height:1rem; margin:1rem 0 0; color:var(--red); font:.58rem var(--mono); }.gate-scene .password-card { margin:1.3rem auto 0; text-align:left; }.gate-scene.is-active .password-card { opacity:1; transform:none; }.lights-on .ambient-canvas { opacity:1; filter:brightness(1.35) saturate(1.2); transition:filter 1.5s,opacity 1.5s; }.lights-on #access { background:radial-gradient(circle at 50% 42%,rgba(145,16,43,.22),transparent 32rem); transition:background 1.4s; }
@keyframes scene-in { from { opacity:0; transform:translateY(22px) scale(.985); } to { opacity:1; transform:none; } } @keyframes spin-record { to { transform:rotate(360deg); } } @keyframes flicker { from { transform:scale(.82) rotate(-5deg); } to { transform:scale(1.08) rotate(4deg); } } @keyframes smoke { to { opacity:0; transform:translateY(-2rem) scale(1.9); } } @keyframes confetti-pop { to { opacity:0; transform:translate(var(--x),var(--y)) rotate(var(--r)); } }

/* Couleurs de fête : le site reste de nuit, mais il a maintenant une vraie humeur d'anniversaire. */
:root { --red:#ef2c5c; --red-low:#a7193d; --gold:#ffd166; --pink:#ff4f8e; --purple:#9b7bff; --teal:#51d6c6; --display:"Barlow Condensed",Arial,sans-serif; }.celebration-layer { position:fixed; z-index:1; inset:0; overflow:hidden; pointer-events:none; }.balloon { position:absolute; left:var(--x); top:var(--y); width:var(--size); height:calc(var(--size) * 1.2); border-radius:50% 50% 47% 47%; opacity:0; background:radial-gradient(circle at 31% 25%,rgba(255,255,255,.78) 0 6%,transparent 7%),var(--color); box-shadow:0 0 1.7rem color-mix(in srgb,var(--color) 45%,transparent); transform:translate(-50%,-50%); animation:float-balloon var(--duration) ease-in-out var(--delay) infinite paused; }.balloon::before { content:""; position:absolute; left:50%; bottom:-.38rem; width:.5rem; height:.6rem; transform:translateX(-50%); background:var(--color); clip-path:polygon(0 0,100% 0,50% 100%); }.balloon::after { content:""; position:absolute; left:50%; top:100%; width:1px; height:4rem; background:linear-gradient(var(--color),transparent); }.sparkle { position:absolute; left:var(--x); top:var(--y); width:3px; height:3px; border-radius:50%; opacity:0; background:var(--gold); box-shadow:0 0 8px 2px rgba(255,209,102,.7); animation:twinkle 2.6s ease-in-out var(--delay) infinite paused; }.lights-on .balloon,.lights-on .sparkle { opacity:.82; animation-play-state:running; }.lights-on .balloon:nth-child(3n) { opacity:.55; }.lights-on .cursor-light { width:380px; height:380px; background:radial-gradient(circle,rgba(255,79,142,.14),transparent 68%); }.lights-on #access { background:radial-gradient(circle at 45% 40%,rgba(255,79,142,.18),transparent 23rem),radial-gradient(circle at 65% 60%,rgba(155,123,255,.14),transparent 29rem),#090708; }.lights-on .ambient-canvas { filter:brightness(1.75) saturate(1.5) hue-rotate(-10deg); }.page { background-color:rgba(8,7,8,.36); }.page-scarf::after,.page-final::after { background:radial-gradient(circle,rgba(255,79,142,.25),transparent 66%); }.scene-number { color:var(--gold); }.scene-button::before { border-color:var(--gold); }.scene-button span,.quiz-option span { color:var(--pink); }.scene-button:hover { color:var(--gold); }.record-button { border-color:rgba(255,209,102,.72); background:radial-gradient(circle at 50% 50%,#ffd166 0 8%,#27111a 9% 57%,#ff4f8e 58% 60%,#140b10 61%); }.record-button:hover { box-shadow:0 0 4rem rgba(255,79,142,.4); }.cake-base { background:linear-gradient(90deg,#5a1435,#ff4f8e 48%,#7a225a); box-shadow:inset 0 .45rem rgba(255,255,255,.22),0 1rem 3rem rgba(255,79,142,.35); }.cake-icing { background:linear-gradient(90deg,#ffd166,#fff1c8,#ffd166); }.candle { background:repeating-linear-gradient(135deg,#fff1c8 0 .22rem,#9b7bff .22rem .42rem); }.candle::before { background:var(--gold); box-shadow:0 0 1.7rem .25rem rgba(255,209,102,.85); }.quiz-reply { color:var(--gold); }.photo-slot:nth-child(1) { border-color:rgba(255,79,142,.42); }.photo-slot:nth-child(2) { border-color:rgba(255,209,102,.45); }.photo-slot:nth-child(3) { border-color:rgba(155,123,255,.45); }h1 { font-size:clamp(3.2rem,12vw,7.4rem); }h2 { font-size:clamp(2.45rem,8vw,5.2rem); } .gate-scene h1 span { color:var(--gold); font-size:clamp(.68rem,1.7vw,.95rem); }.quiz-panel h2 { font-size:clamp(2rem,6.2vw,4rem); }.chapter-copy blockquote { font-size:clamp(1.15rem,2.7vw,1.85rem); letter-spacing:-.035em; }.evidence-card strong { font-size:.93rem; letter-spacing:-.02em; }.final-message { font-size:.9rem; }.login-title,.login-shell { letter-spacing:normal; }
@keyframes float-balloon { 0%,100% { transform:translate(-50%,-50%) rotate(-3deg); } 50% { transform:translate(calc(-50% + 14px),calc(-50% - 34px)) rotate(4deg); } } @keyframes twinkle { 0%,100% { transform:scale(.4); opacity:.16; } 50% { transform:scale(1.4); opacity:1; } }
@media (prefers-reduced-motion:reduce) { .balloon,.sparkle { display:none; } }

/* Révélation cadeau : volontairement sobre, comme une vraie carte glissée à la fin. */
.gift-reveal-button { margin-top:2.2rem; }.gift-reveal { margin-top:1.2rem; perspective:1000px; }.zara-card { width:min(100%,22rem); aspect-ratio:1.58/1; padding:0; border:0; background:transparent; perspective:1000px; }.zara-card-inner { position:relative; display:block; width:100%; height:100%; transform-style:preserve-3d; transition:transform .75s cubic-bezier(.2,.8,.2,1); }.zara-card.is-flipped .zara-card-inner { transform:rotateY(180deg); }.zara-card-face { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:1.2rem; overflow:hidden; backface-visibility:hidden; color:#fff; background:#0a0a0a; text-align:left; }.zara-card-front { border:1px solid rgba(255,255,255,.75); }.zara-card-front::after { content:""; position:absolute; right:-20%; bottom:-55%; width:13rem; height:13rem; border:1px solid rgba(255,255,255,.16); border-radius:50%; }.zara-card-front strong { position:relative; z-index:1; align-self:center; margin:auto 0; font:600 clamp(3.6rem,15vw,6rem)/.8 var(--display); letter-spacing:-.1em; }.gift-label,.gift-for { position:relative; z-index:1; font:.5rem var(--mono); letter-spacing:.12em; }.gift-for { color:#c6c6c6; }.zara-card-back { justify-content:center; border:1px solid var(--gold); background:linear-gradient(135deg,#161213,#3d1125); transform:rotateY(180deg); font-size:1.1rem; font-weight:500; line-height:1.3; }.zara-card-back small { position:absolute; bottom:1rem; color:#d2c7c5; font:.48rem var(--mono); letter-spacing:.07em; }

.red-scarf-video { position:absolute; z-index:0; inset:0; width:100%; height:100%; object-fit:cover; background:#100b0c; }.video-placeholder:has(.red-scarf-video) { background:#100b0c; }.video-placeholder:has(.red-scarf-video)::before { z-index:1; opacity:.35; }.video-placeholder .play-button,.video-placeholder .video-meta,.video-placeholder>p { z-index:2; }.video-placeholder .play-button.is-playing { opacity:0; transform:scale(.86); }.video-placeholder:hover .play-button.is-playing { opacity:1; transform:scale(1); }

/* Retour à une palette nocturne : noir, ivoire et un seul rouge profond. */
:root { --red:#8f1326; --red-low:#48101a; --gold:#d8d0c5; --pink:#8f1326; --purple:#25161a; --teal:#bdb5ad; --display:"Bodoni Moda",Georgia,serif; }.light-flash { position:fixed; z-index:30; inset:0; pointer-events:none; opacity:0; background:#fff8ec; }.light-flash.is-on { animation:room-light .75s ease-out both; }.celebration-layer { opacity:.65; }.balloon { box-shadow:0 0 1.5rem rgba(143,19,38,.24); }.sparkle { background:#eee8df; box-shadow:0 0 8px 2px rgba(238,232,223,.45); }.lights-on .balloon,.lights-on .sparkle { opacity:.38; }.lights-on .balloon:nth-child(3n) { opacity:.22; }.lights-on .cursor-light { width:330px; height:330px; background:radial-gradient(circle,rgba(143,19,38,.12),transparent 68%); }.lights-on #access { background:radial-gradient(circle at 50% 35%,rgba(238,232,223,.14),transparent 12rem),radial-gradient(circle at 50% 55%,rgba(143,19,38,.13),transparent 28rem),#080708; }.lights-on .ambient-canvas { filter:brightness(1.2) saturate(.75); }.scene-number { color:#aaa29d; }.scene-button::before { border-color:var(--red); }.scene-button:hover { color:#e9e2d9; }.scene-button span,.quiz-option span { color:#b84557; }.record-button { border-color:rgba(238,232,223,.48); background:radial-gradient(circle at 50% 50%,#e7dfd4 0 8%,#1b1113 9% 57%,#741426 58% 60%,#0e0b0c 61%); }.record-button:hover { box-shadow:0 0 4rem rgba(143,19,38,.28); }.cake-base { background:linear-gradient(90deg,#361019,#8f1326 48%,#40111d); box-shadow:inset 0 .45rem rgba(255,255,255,.14),0 1rem 3rem rgba(143,19,38,.26); }.cake-icing { background:linear-gradient(90deg,#d4c9bc,#f0e8dc,#d4c9bc); }.candle { background:repeating-linear-gradient(135deg,#f1eadf 0 .22rem,#8f1326 .22rem .42rem); }.candle::before { background:#e8d1a0; box-shadow:0 0 1.7rem .25rem rgba(232,209,160,.72); }.quiz-reply { color:#d8d0c5; }.photo-slot:nth-child(1),.photo-slot:nth-child(2),.photo-slot:nth-child(3) { border-color:var(--line); }h1,h2 { font-family:var(--display); font-weight:500; letter-spacing:-.055em; line-height:.9; }h1 { font-size:clamp(3.4rem,11vw,6.1rem); }h2 { font-size:clamp(2.45rem,7.4vw,4.6rem); }.gate-scene h1 { letter-spacing:.02em; }.gate-scene h1 span { display:none; }.quiz-panel h2 { font-family:"Barlow Condensed",Arial,sans-serif; font-size:clamp(1.95rem,5.8vw,3.4rem); font-weight:600; letter-spacing:-.035em; }.chapter-copy blockquote { font-family:"Barlow Condensed",Arial,sans-serif; font-size:clamp(1.1rem,2.4vw,1.65rem); font-weight:500; }.evidence-card strong { font-family:"Barlow Condensed",Arial,sans-serif; font-size:1rem; }.zara-card-front strong { font-family:"Barlow Condensed",Arial,sans-serif; }.scene-whisper { color:#9d9690; }.prelude::before { content:""; position:absolute; inset:-8rem; z-index:-1; opacity:.75; background:radial-gradient(ellipse at 50% 55%,rgba(143,19,38,.17),transparent 38%); transition:opacity 1.2s,background 1.2s; }.lights-on .prelude::before { opacity:1; background:radial-gradient(ellipse at 50% 45%,rgba(238,232,223,.12),transparent 18%),radial-gradient(ellipse at 50% 55%,rgba(143,19,38,.18),transparent 42%); }
@keyframes room-light { 0% { opacity:0; } 12% { opacity:.92; } 25% { opacity:.3; } 39% { opacity:.68; } 100% { opacity:0; } }

/* Suspense avant chaque révélation, sans ralentir inutilement le parcours. */
.suspense-overlay { position:fixed; z-index:40; inset:0; display:grid; place-items:center; pointer-events:none; opacity:0; background:#050405; transition:opacity .24s; }.suspense-overlay.is-active { opacity:1; }.suspense-overlay p { position:relative; z-index:1; margin:0; color:#eee8df; font:.62rem var(--mono); letter-spacing:.22em; }.suspense-overlay span { position:absolute; width:min(72vw,28rem); height:1px; background:linear-gradient(90deg,transparent,#8f1326,#eee8df,#8f1326,transparent); animation:suspense-scan .68s ease-in-out infinite; }.photo-slot-real { cursor:pointer; border-color:rgba(238,232,223,.35); text-align:left; }.photo-slot-real img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.68; filter:saturate(.6) contrast(1.08); transition:transform .6s,opacity .35s; }.photo-slot-real::after { background:linear-gradient(0deg,rgba(5,4,5,.9),transparent 70%); }.photo-slot-real:hover img { opacity:.92; transform:scale(1.06); }.modal-image { display:block; width:100%; max-height:52vh; margin:1rem 0; object-fit:contain; border:1px solid rgba(238,232,223,.18); background:#090708; }.modal-image[hidden] { display:none; }@keyframes suspense-scan { 0% { transform:scaleX(.1); opacity:0; } 30% { transform:scaleX(1); opacity:1; } 100% { transform:scaleX(.1); opacity:0; } }

.photo-codes .photo-slot { background:linear-gradient(145deg,#110e0f,#080708); }.photo-codes .photo-slot::before { content:"✦"; position:absolute; top:50%; left:50%; color:#8f1326; font-size:1.15rem; transform:translate(-50%,-50%); }.memory-vault { margin-top:1rem; }.memory-vault>p { margin:0 0 1.1rem; color:#aaa29d; font-size:.72rem; line-height:1.65; }.vault-codes { border-top:1px solid var(--line); }.vault-codes button { display:flex; align-items:center; justify-content:space-between; width:100%; padding:.95rem 0; border:0; border-bottom:1px solid var(--line); color:var(--white); background:transparent; font:.62rem var(--mono); letter-spacing:.11em; text-align:left; transition:padding .2s,background .2s; }.vault-codes button:hover { padding-left:.6rem; background:rgba(255,255,255,.035); }.vault-codes span { color:#8f1326; font-size:1rem; }

.modal-next { display:inline-flex; align-items:center; gap:.65rem; margin-top:1.5rem; padding:.8rem 0; border:0; color:#eee8df; background:transparent; font:.58rem var(--mono); letter-spacing:.12em; text-transform:uppercase; }.modal-next::before { content:""; width:1.8rem; border-top:1px solid #8f1326; }.modal-next span { color:#b84557; font-size:1rem; }.modal-next[hidden] { display:none; }

.piece-two-stage { margin-top:1rem; }.piece-two-stage[hidden],.piece-two-photos[hidden] { display:none; }.piece-two-stage video { display:block; width:100%; max-height:23rem; object-fit:cover; border:1px solid rgba(238,232,223,.18); background:#080708; }.piece-two-stage>p { margin:1rem 0 0; color:#aaa29d; font-size:.72rem; }.piece-two-photos { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; margin-top:1.1rem; }.piece-two-photos img { width:100%; aspect-ratio:3/4; object-fit:cover; border:1px solid rgba(238,232,223,.16); animation:photo-arrive .55s both; }.piece-two-photos img:nth-child(2) { animation-delay:.08s; }.piece-two-photos img:nth-child(3) { animation-delay:.16s; }.piece-two-photos img:nth-child(4) { animation-delay:.24s; }@keyframes photo-arrive { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

.piece-three-quiz { margin-top:1.25rem; }.piece-three-quiz[hidden] { display:none; }.piece-three-progress { margin:0 0 .8rem; color:#aaa29d; font:.52rem var(--mono); letter-spacing:.12em; }.piece-three-quiz h3 { margin:0; font-family:"Barlow Condensed",Arial,sans-serif; font-size:clamp(1.8rem,7vw,3rem); font-weight:600; letter-spacing:-.035em; line-height:.98; }.piece-three-options { margin-top:1.4rem; border-top:1px solid var(--line); }.piece-three-options button { display:flex; align-items:center; justify-content:space-between; width:100%; padding:.82rem 0; border:0; border-bottom:1px solid var(--line); color:#eee8df; background:transparent; font:.63rem var(--mono); letter-spacing:.08em; text-align:left; transition:padding .2s,color .2s,background .2s; }.piece-three-options button:hover { padding-left:.5rem; background:rgba(255,255,255,.035); }.piece-three-options button:disabled { opacity:.42; }.piece-three-options button.is-wrong { color:#d87583; transform:translateX(.35rem); }.piece-three-options span { color:#b84557; font-size:.95rem; }.piece-three-feedback { min-height:1.2rem; margin:1rem 0 0; color:#d8d0c5; font:.6rem var(--mono); line-height:1.5; }

.final-audio { margin-top:1.8rem; }.final-audio .button { margin-top:0; }.final-audio p { margin:.25rem 0 0; color:#aaa29d; font-size:.66rem; }

.final-audio { max-width:31rem; padding:1.25rem; border:1px solid rgba(238,232,223,.24); background:linear-gradient(135deg,rgba(143,19,38,.22),rgba(10,8,9,.84)); }.final-audio .button { width:100%; justify-content:center; gap:1rem; padding:1.2rem 1rem; border:1px solid rgba(238,232,223,.65); color:#fff; font-size:.74rem; }.final-audio .button::before { width:0; }.final-audio .button:hover { border-color:#8f1326; background:#8f1326; }.final-audio p { margin:.75rem 0 0; text-align:center; font-size:.7rem; }

.evidence-grid[hidden],.finale-button[hidden] { display:none; }