/* Identité Premium 18+ — élégante, sensuelle et sobre */
:root { --bg-color:#100b12; --surface:#1b1117; --surface-2:#261720; --champagne:#d8b77a; --blush:#c98291; --ivory:#f7f0e8; --muted:#b9aeb4; }
body { background:radial-gradient(circle at 50% -10%,#412230 0%,#1a1017 34%,#0d090c 78%); color:var(--ivory); padding:max(18px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom)); }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.18; background:radial-gradient(circle at 15% 20%,rgba(216,183,122,.22),transparent 24%),radial-gradient(circle at 86% 78%,rgba(201,130,145,.18),transparent 28%); }
.screen { max-width:480px; background:linear-gradient(155deg,rgba(42,25,35,.94),rgba(20,13,18,.96)); border:1px solid rgba(216,183,122,.2); border-radius:28px; padding:30px 24px; box-shadow:0 24px 70px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.04); }
h1,h2 { font-family:Georgia,'Times New Roman',serif; text-transform:none; letter-spacing:.02em; color:var(--ivory); background:none; -webkit-text-fill-color:initial; }
h1 { font-size:38px; line-height:1.05; }
h2 { font-size:27px; }
.subtitle { color:var(--champagne); font-style:normal; letter-spacing:.08em; font-size:12px; text-transform:uppercase; }
.game-logo-svg { filter:drop-shadow(0 8px 24px rgba(201,130,145,.3)); }
input[type="text"] { background:rgba(255,255,255,.055); border:1px solid rgba(216,183,122,.2); color:var(--ivory); border-radius:14px; padding:15px; }
button { border-radius:14px; min-height:52px; box-shadow:none; letter-spacing:.02em; }
.btn-primary { color:#201319; background:linear-gradient(115deg,#ead49e,#c99d5b); }
.btn-secondary { background:rgba(255,255,255,.055); border:1px solid rgba(216,183,122,.22); }
.btn-danger { background:transparent; color:var(--muted); border:0; font-size:12px; }
#splash-screen { background:radial-gradient(circle at 50% 38%,#442431 0%,#160e14 48%,#090609 100%); }
.splash-logo { font-family:Georgia,'Times New Roman',serif; text-transform:none; letter-spacing:.04em; color:var(--ivory); background:none; -webkit-text-fill-color:initial; font-weight:400; }
.splash-loader { border-color:rgba(216,183,122,.15); border-top-color:var(--champagne); }
.splash-signature { color:rgba(216,183,122,.5); }
.eyebrow { text-align:center; color:var(--champagne); text-transform:uppercase; letter-spacing:.2em; font-size:10px; font-weight:700; margin-bottom:12px; }
.gate-copy { color:var(--muted); font-size:14px; line-height:1.65; text-align:center; margin:0 auto 22px; max-width:360px; }
.privacy-note { display:flex; gap:11px; align-items:flex-start; margin:18px 0 22px; padding:14px; border-radius:14px; background:rgba(216,183,122,.07); color:#d7ccd1; font-size:12px; line-height:1.5; }
.consent-list { display:grid; gap:11px; margin:18px 0 24px; }
.consent-item { display:flex; gap:12px; align-items:flex-start; padding:14px; border-radius:14px; background:rgba(255,255,255,.04); color:#ded4d8; font-size:13px; line-height:1.5; }
.consent-item span { color:var(--champagne); font-size:17px; }
.option-label { display:block; margin:18px 0 10px; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.14em; }
.choice-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.choice-chip { min-height:44px; padding:9px 6px; margin:0; font-size:12px; background:rgba(255,255,255,.04); color:var(--muted); border:1px solid rgba(255,255,255,.08); }
.choice-chip.selected { color:#21151a; background:linear-gradient(115deg,#ead49e,#c99d5b); border-color:transparent; }
.mode-card { text-align:left; padding:17px; }
.mode-card small { display:block; margin-top:4px; color:inherit; opacity:.72; font-weight:400; }
.connection-panel { padding:16px; margin:14px 0; border-radius:16px; background:rgba(255,255,255,.035); border:1px solid rgba(216,183,122,.13); }
.connection-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:7px; background:#d8b77a; box-shadow:0 0 10px rgba(216,183,122,.65); }
.calibration-grid { display:grid; gap:10px; margin:18px 0 24px; }
.limit-toggle { display:flex; align-items:center; justify-content:space-between; gap:18px; width:100%; min-height:68px; padding:14px 16px; border-radius:18px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); color:var(--ivory); text-align:left; }
.limit-toggle span { display:block; font-size:14px; }.limit-toggle small { display:block; margin-top:4px; color:var(--muted); font-weight:400; line-height:1.35; }
.limit-toggle::after { content:'Non'; flex:0 0 auto; padding:7px 10px; border-radius:999px; color:var(--muted); background:rgba(255,255,255,.07); font-size:11px; }
.limit-toggle.allowed { border-color:rgba(216,183,122,.32); background:rgba(216,183,122,.08); }.limit-toggle.allowed::after { content:'Oui'; color:#21151a; background:var(--champagne); }
.safety-summary { padding:14px 16px; margin-bottom:18px; border-left:2px solid var(--champagne); color:var(--muted); background:rgba(216,183,122,.05); font-size:12px; line-height:1.55; }

/* V3 — expérience immersive */
body { min-height:100dvh; justify-content:flex-start; padding:0; background:#09070a; }
body::after { content:""; position:fixed; inset:0; pointer-events:none; opacity:.14; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); mix-blend-mode:soft-light; }
.screen { width:100%; max-width:none; min-height:100dvh; border:0; border-radius:0; padding:calc(72px + env(safe-area-inset-top)) 22px calc(28px + env(safe-area-inset-bottom)); background:radial-gradient(circle at 50% -5%,rgba(112,51,70,.34),transparent 35%),linear-gradient(180deg,#160e13 0%,#0b080a 68%); box-shadow:none; overflow-y:auto; }
.screen.active { animation:screenEnter .52s cubic-bezier(.22,1,.36,1); }
.screen > * { width:100%; max-width:520px; margin-left:auto; margin-right:auto; }
h1 { font-size:clamp(36px,10vw,52px); font-weight:400; line-height:1.02; letter-spacing:-.035em; }
h2 { font-size:clamp(28px,7vw,38px); font-weight:400; line-height:1.08; letter-spacing:-.025em; }
.audio-fab { color:rgba(231,210,174,.78); background:linear-gradient(145deg,rgba(36,23,30,.82),rgba(11,8,10,.76)); border:1px solid rgba(216,183,122,.2); box-shadow:0 8px 24px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.045); backdrop-filter:blur(16px); opacity:.82; transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease,border-color .2s ease; }
.audio-fab:hover,.audio-fab:focus-visible { opacity:1; border-color:rgba(216,183,122,.42); box-shadow:0 10px 30px rgba(0,0,0,.46),0 0 0 3px rgba(216,183,122,.055); }
.audio-fab:active { transform:scale(.94); }
.audio-fab-dot { width:5px; height:5px; right:5px; bottom:5px; background:#a9c6a2; box-shadow:0 0 7px rgba(169,198,162,.55); }
.audio-fab.all-muted .audio-fab-dot { background:#a65a68; box-shadow:0 0 9px rgba(166,90,104,.65); }
.eyebrow { margin-top:auto; }
#screen-age-gate,#screen-consent { display:none; justify-content:center; }
#screen-age-gate.active,#screen-consent.active { display:flex; flex-direction:column; }
#screen-setup .game-logo-container { margin-bottom:8px; }
#screen-setup .game-logo-svg { width:58px; height:58px; }
input[type=text] { text-align:left; min-height:54px; padding:0 16px; box-shadow:inset 0 1px rgba(255,255,255,.03); }
button { position:relative; overflow:hidden; font-size:15px; transition:transform .18s ease,filter .18s ease,border-color .18s ease; }
button::before { content:""; position:absolute; inset:0; opacity:0; background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.18),transparent 70%); transform:translateX(-110%); }
button:active { transform:scale(.975); }
button:active::before { opacity:1; transform:translateX(110%); transition:transform .48s ease; }
.btn-primary { box-shadow:0 13px 34px rgba(201,157,91,.16); }
.choice-chip { border-radius:999px; }
.mode-card { min-height:72px; border-radius:18px; }
.turn-indicator { display:inline-flex; width:auto; padding:8px 13px; margin:0 auto 18px; border-radius:999px; color:var(--champagne); background:rgba(216,183,122,.08); border:1px solid rgba(216,183,122,.16); font-size:12px; letter-spacing:.04em; }
.cat-grid { gap:12px; }
.cat-btn { min-height:82px; padding:18px 54px 18px 18px; border-radius:20px; border:1px solid rgba(255,255,255,.08); font-family:Georgia,'Times New Roman',serif; font-size:19px; font-weight:400; box-shadow:0 14px 35px rgba(0,0,0,.18); }
.cat-btn small { display:block; margin-top:6px; font-family:Arial,sans-serif; font-size:11px; line-height:1.3; font-weight:400; opacity:.68; letter-spacing:.03em; }
.cat-btn::after { content:'›'; top:50%; right:20px; transform:translateY(-50%); font-size:32px; font-weight:200; opacity:.7; }
.c1 { background:linear-gradient(135deg,#2a1f31,#49324f); }.c2 { background:linear-gradient(135deg,#361b2a,#703247); }.c3 { background:linear-gradient(135deg,#41201f,#7a3d31); }.c4 { background:linear-gradient(135deg,#3a1118,#741b2a); }.c-rand { background:linear-gradient(135deg,#211a1f,#3c3037); }
.choice-buttons { gap:12px; }
.choice-buttons button { min-height:150px; border-radius:24px; font-family:Georgia,'Times New Roman',serif; font-size:20px; font-weight:400; }
.btn-v { background:radial-gradient(circle at 50% 0,rgba(216,183,122,.28),transparent 55%),linear-gradient(145deg,#27202b,#18131b); border:1px solid rgba(216,183,122,.24); }
.btn-a { background:radial-gradient(circle at 50% 0,rgba(201,130,145,.30),transparent 55%),linear-gradient(145deg,#3b1d28,#211118); border:1px solid rgba(201,130,145,.28); }
#screen-gameplay { padding-top:calc(62px + env(safe-area-inset-top)); }
.game-progress { display:flex; align-items:center; gap:12px; margin-bottom:15px; }
.game-progress-track { flex:1; height:4px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.game-progress-fill { width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--blush),var(--champagne)); transition:width .5s ease; }
.game-progress-label { color:var(--muted); font-size:11px; white-space:nowrap; }
.joker-indicator-wrapper { justify-content:flex-end; margin:-46px 0 12px; }
.joker-card { width:42px; height:42px; border-radius:13px; font-size:19px; }
.card-container { height:min(54vh,430px); min-height:340px; margin:8px 0 18px; }
.card { transition:transform .76s cubic-bezier(.2,.8,.2,1); }
.card-face { border-radius:28px; padding:36px 27px; box-shadow:0 28px 80px rgba(0,0,0,.48); }
.card-front { background:radial-gradient(circle at 50% 36%,rgba(216,183,122,.12),transparent 30%),linear-gradient(145deg,#2a1a23,#120d11); box-shadow:0 28px 80px rgba(0,0,0,.48),inset 0 0 0 1px rgba(216,183,122,.22); }
.card-front::before { inset:13px; border:1px solid rgba(216,183,122,.28); border-radius:20px; background:none; }
.card-front h3 { font-family:Georgia,'Times New Roman',serif; font-size:23px; font-weight:400; }
.card-back { font-family:Georgia,'Times New Roman',serif; font-size:clamp(19px,5vw,25px); line-height:1.5; font-weight:400; border:1px solid rgba(255,255,255,.1); }
.card-info { top:25px; color:rgba(255,255,255,.66); letter-spacing:.18em; }
.timer-circle { width:68px; height:68px; border-width:1px; }.timer-svg { width:68px; height:68px; }.timer-display { font-size:20px; }
.btn-fait,.btn-pas-fait,.btn-en-cours,#btn-next { min-height:56px; border-radius:16px; }
.btn-fait { background:linear-gradient(115deg,#5f715e,#91a37d); }.btn-pas-fait { background:linear-gradient(115deg,#6d2934,#9d4650); }.btn-en-cours { background:linear-gradient(115deg,#c49a59,#e2c47e); }
.podium-box { border-radius:24px; padding:22px; }
@keyframes screenEnter { from { opacity:0; transform:translateY(18px); filter:blur(5px); } to { opacity:1; transform:none; filter:none; } }
@media (min-width:600px) { .screen { padding-left:calc((100vw - 520px)/2); padding-right:calc((100vw - 520px)/2); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }

/* V5 — direction artistique Obsidienne : éditoriale, tactile, sans emojis système */
:root { --ink:#080709; --wine:#241118; --cream:#f4ede4; --gold:#c9aa72; --gold-soft:#e5d3ad; --rose:#9c5364; --line:rgba(229,211,173,.18); --cat1-color:#766078; --cat2-color:#9c5364; --cat3-color:#a56f58; --cat4-color:#8e394b; }
#screen-gameplay { position:relative; padding:calc(78px + env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom)); background:radial-gradient(ellipse at 50% 8%,rgba(103,45,61,.25),transparent 38%),linear-gradient(180deg,#120c10 0%,#080709 62%); overflow:hidden auto; }
#screen-gameplay::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg,transparent 0 48%,rgba(255,255,255,.018) 50%,transparent 52% 100%); background-size:170px 170px; }
#screen-gameplay .turn-indicator { display:block; margin:3px auto 7px; padding:0; border:0; background:transparent; color:var(--gold-soft); font:500 10px/1.2 Arial,sans-serif; letter-spacing:.22em; text-transform:uppercase; }
#screen-gameplay .game-progress { margin:0 auto 19px; padding-right:112px; gap:10px; }
#screen-gameplay .game-progress-track { height:2px; background:rgba(255,255,255,.09); }
#screen-gameplay .game-progress-fill { background:linear-gradient(90deg,var(--rose),var(--gold-soft)); box-shadow:0 0 10px rgba(201,170,114,.24); }
#screen-gameplay .game-progress-label { color:rgba(244,237,228,.48); font-size:9px; letter-spacing:.12em; text-transform:uppercase; }
#screen-gameplay .joker-indicator-wrapper { position:absolute; top:calc(78px + env(safe-area-inset-top)); left:20px; width:auto; margin:0; z-index:4; }
#screen-gameplay .joker-card { width:31px; height:31px; border-radius:50%; font-size:0; border:1px solid var(--line); background:rgba(255,255,255,.025); }
#screen-gameplay .joker-card::before { content:'J'; color:rgba(244,237,228,.38); font:italic 14px/1 Georgia,serif; }
#screen-gameplay .joker-card.lit::before { color:#23161a; }
#screen-gameplay .joker-card.lit { background:var(--gold-soft); box-shadow:0 0 22px rgba(201,170,114,.25); }
.game-stage { position:relative; width:100%; max-width:520px; margin:0 auto 16px; }
#screen-gameplay .card-container { height:min(56vh,520px); min-height:390px; margin:0; perspective:1500px; }
#screen-gameplay .card-face { border-radius:30px; padding:48px 34px 40px; overflow:hidden; box-shadow:0 30px 70px rgba(0,0,0,.52),0 1px 0 rgba(255,255,255,.04) inset; }
#screen-gameplay .card-face::after { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 14% 8%,rgba(255,255,255,.055),transparent 24%),linear-gradient(118deg,transparent 30%,rgba(255,255,255,.025) 48%,transparent 67%); }
#screen-gameplay .card-front { background:radial-gradient(circle at 50% 39%,rgba(201,170,114,.09),transparent 27%),linear-gradient(145deg,#21151b,#0f0b0e); border:1px solid rgba(229,211,173,.18); }
#screen-gameplay .card-front::before { inset:12px; border:1px solid rgba(229,211,173,.16); border-radius:22px; }
#screen-gameplay .card-front h3 { color:var(--cream); font-size:25px; letter-spacing:-.02em; }
#screen-gameplay .card-emblem { width:42px; height:42px; margin-bottom:18px; filter:sepia(1) saturate(.55) drop-shadow(0 8px 18px rgba(201,170,114,.22)); animation:none; opacity:.9; }
#screen-gameplay .card-back { --card-accent:var(--rose); background:radial-gradient(circle at 50% 8%,var(--card-accent),transparent 42%),linear-gradient(155deg,#21151a 0%,#100b0e 72%); border:1px solid var(--card-accent); color:var(--cream); }
#screen-gameplay .card-back::before { content:'“'; position:absolute; top:70px; left:0; right:0; color:var(--gold-soft); opacity:.38; font:italic 72px/1 Georgia,serif; }
#screen-gameplay #card-text { position:relative; z-index:2; max-width:410px; text-wrap:balance; font:400 clamp(22px,5.8vw,30px)/1.42 Georgia,'Times New Roman',serif; letter-spacing:-.018em; }
#screen-gameplay .card-info { top:27px; z-index:3; color:var(--gold-soft); opacity:.72; font:600 9px/1 Arial,sans-serif; letter-spacing:.25em; }
#screen-gameplay .timer-wrapper { position:absolute; right:18px; bottom:18px; width:auto; margin:0; z-index:5; }
#screen-gameplay .timer-circle { width:57px; height:57px; border:1px solid var(--line); background:rgba(8,7,9,.78); box-shadow:0 9px 24px rgba(0,0,0,.34); backdrop-filter:blur(10px); }
#screen-gameplay .timer-svg { top:-1px; left:-1px; width:57px; height:57px; }
#screen-gameplay .timer-svg circle { cx:28.5; cy:28.5; r:26; stroke-width:2; stroke:var(--gold-soft); stroke-dasharray:164; }
#screen-gameplay .timer-display { color:var(--cream); font:500 16px/1 Arial,sans-serif; }
.game-actions { display:grid; grid-template-columns:1fr 1.18fr 1fr; gap:8px; width:100%; max-width:520px; margin:0 auto; }
.game-actions[data-mode="single"] { grid-template-columns:1fr; }
.game-actions button { min-width:0; min-height:58px!important; margin:0; padding:8px 5px; border-radius:18px!important; border:1px solid rgba(255,255,255,.09); color:var(--cream); background:rgba(255,255,255,.035); box-shadow:none!important; animation:actionEnter .32s cubic-bezier(.22,1,.36,1)!important; font:600 10px/1.2 Arial,sans-serif; letter-spacing:.11em; text-transform:uppercase; }
.game-actions button::after { display:block; width:16px; height:16px; margin:0 auto 7px; color:currentColor; font:400 17px/16px Arial,sans-serif; }
.game-actions .btn-fait { border-color:rgba(179,194,164,.25); background:linear-gradient(145deg,rgba(130,150,113,.18),rgba(255,255,255,.025)); }
.game-actions .btn-fait::after { content:'✓'; }
.game-actions .btn-en-cours { color:#eadbbd; border-color:rgba(201,170,114,.38); background:linear-gradient(145deg,rgba(201,170,114,.22),rgba(255,255,255,.03)); }
.game-actions .btn-en-cours::after { content:'◷'; }
.game-actions .btn-pas-fait { border-color:rgba(156,83,100,.34); background:linear-gradient(145deg,rgba(156,83,100,.18),rgba(255,255,255,.025)); }
.game-actions .btn-pas-fait::after { content:'×'; }
#screen-gameplay #btn-next { min-height:58px; margin:0 auto 8px; max-width:520px; border-radius:18px; color:#21151a; background:linear-gradient(115deg,#eadbbd,#c9aa72); }
#screen-gameplay #btn-use-joker,#screen-gameplay #btn-back-random { max-width:520px; margin:9px auto 0; min-height:44px; border-radius:14px; font-size:11px; }
#screen-gameplay .penalty-box { max-width:520px; border:1px solid rgba(156,83,100,.32); border-left:2px solid var(--rose); background:rgba(156,83,100,.09); }
#screen-gameplay .penalty-title { color:#dba2ad; font-size:10px; letter-spacing:.12em; }
@keyframes actionEnter { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@media (max-height:760px) { #screen-gameplay { padding-top:calc(68px + env(safe-area-inset-top)); } #screen-gameplay .joker-indicator-wrapper { top:calc(68px + env(safe-area-inset-top)); } #screen-gameplay .card-container { height:50vh; min-height:340px; } #screen-gameplay .card-face { padding:42px 28px 34px; } }

/* Nuit Rouge — direction sensuelle et charnelle */
:root { --velvet:#4d0f24; --desire:#b62e50; --skin:#e7b6a0; --ember:#d55b43; }
body { background:radial-gradient(ellipse at 50% -8%,#54152c 0%,#210d16 35%,#080608 78%); }
body::before { opacity:.3; background:radial-gradient(circle at 18% 22%,rgba(213,91,67,.22),transparent 25%),radial-gradient(circle at 82% 70%,rgba(182,46,80,.2),transparent 30%); animation:intimateBreath 8s ease-in-out infinite alternate; }
#screen-gameplay { isolation:isolate; background:radial-gradient(ellipse at 50% 7%,rgba(182,46,80,.34),transparent 39%),linear-gradient(180deg,#190a11 0%,#070608 65%); }
#screen-gameplay::after { content:""; position:absolute; z-index:-1; width:72vw; height:72vw; max-width:480px; max-height:480px; left:50%; top:26%; transform:translate(-50%,-50%); border-radius:50%; background:rgba(182,46,80,.1); filter:blur(55px); animation:desirePulse 6s ease-in-out infinite; pointer-events:none; }
#screen-gameplay .card-front { background:radial-gradient(circle at 50% 42%,rgba(231,182,160,.13),transparent 29%),linear-gradient(145deg,#32131f,#10080c); border-color:rgba(231,182,160,.22); }
#screen-gameplay .card-back { background:radial-gradient(ellipse at 50% 5%,color-mix(in srgb,var(--card-accent) 60%,#7d1834),transparent 48%),linear-gradient(155deg,#35121e 0%,#12080d 73%); box-shadow:0 30px 80px rgba(0,0,0,.58),0 0 42px rgba(182,46,80,.12); }
#screen-gameplay .card-back::before { color:var(--skin); opacity:.44; }
.turn-access-hint { min-height:17px; margin:0 auto 10px; color:rgba(231,182,160,.62); text-align:center; font:500 10px/1.3 Arial,sans-serif; letter-spacing:.08em; }
.turn-access-hint.mine { color:var(--skin); }
@keyframes intimateBreath { from { transform:scale(1); opacity:.22; } to { transform:scale(1.08); opacity:.38; } }
@keyframes desirePulse { 0%,100% { opacity:.48; transform:translate(-50%,-50%) scale(.88); } 50% { opacity:1; transform:translate(-50%,-50%) scale(1.08); } }
@media (prefers-reduced-motion:reduce) { body::before,#screen-gameplay::after { animation:none; } }

/* Réponses privées — ajout isolé pour préserver l'identité 5.6 Immersion */
.private-response-dock { display:none; width:100%; max-width:520px; margin:11px auto 7px; padding:10px; grid-template-columns:repeat(4,1fr); gap:7px; border:1px solid rgba(216,183,122,.16); border-radius:18px; background:rgba(15,9,13,.76); backdrop-filter:blur(14px); }
.private-response-dock.visible { display:grid; }
.private-response-dock button { min-height:46px; margin:0; padding:8px 5px; border-radius:13px; border:1px solid rgba(216,183,122,.18); background:rgba(255,255,255,.045); color:var(--cream); box-shadow:none; font:600 10px/1.2 Arial,sans-serif; letter-spacing:.08em; text-transform:uppercase; }
.private-response-dock button span { display:block; margin-bottom:4px; color:var(--gold-soft); font-size:18px; }
.private-response-sheet,.private-media-viewer { position:fixed; inset:0; z-index:12000; display:none; align-items:flex-end; justify-content:center; padding:max(18px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom)); background:rgba(3,2,3,.82); backdrop-filter:blur(14px); }
.private-response-sheet.open,.private-media-viewer.open { display:flex; }
.private-sheet-card { width:min(100%,520px); padding:22px; border:1px solid rgba(216,183,122,.24); border-radius:26px; background:linear-gradient(155deg,#2a1923,#100b0e); box-shadow:0 24px 70px rgba(0,0,0,.68); }
.private-sheet-card h3 { margin:0 0 7px; font:400 24px/1.15 Georgia,serif; color:var(--cream); }
.private-sheet-card p { margin:0 0 15px; color:rgba(244,237,228,.62); font-size:12px; line-height:1.45; }
.private-textarea { width:100%; min-height:112px; resize:none; padding:14px; border:1px solid rgba(216,183,122,.2); border-radius:15px; background:rgba(255,255,255,.045); color:var(--cream); font-size:15px; outline:none; }
.private-sheet-actions { display:grid; grid-template-columns:1fr 1.25fr; gap:9px; margin-top:13px; }
.private-sheet-actions button { margin:0; min-height:48px; border-radius:14px; }
.private-capture { width:100%; max-height:52vh; border-radius:18px; background:#050405; object-fit:cover; transform:scaleX(-1); }
.private-record-state { min-height:112px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; border-radius:18px; background:rgba(255,255,255,.035); }
.private-record-dot { width:13px; height:13px; border-radius:50%; background:#ba3659; box-shadow:0 0 16px rgba(186,54,89,.75); animation:privatePulse 1s infinite; }
@keyframes privatePulse { 50% { opacity:.35; transform:scale(.8); } }
.private-media-viewer { align-items:center; }
.private-view-card { width:min(100%,520px); padding:18px; text-align:center; border:1px solid rgba(216,183,122,.25); border-radius:26px; background:#100b0e; }
.private-view-card img { display:none; width:100%; max-height:68vh; object-fit:contain; border-radius:18px; }
.private-view-card audio { display:none; width:100%; margin:14px 0; }
.private-view-card button { margin:10px 0 0; }
.private-security-note { margin-top:10px; color:rgba(244,237,228,.48); font-size:10px; line-height:1.4; }
.private-vault-list { display:grid; gap:9px; max-height:52vh; overflow:auto; margin-top:14px; }
.private-vault-item { width:100%; min-height:54px; margin:0; padding:10px 13px; display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:left; border:1px solid rgba(216,183,122,.16); border-radius:14px; background:rgba(255,255,255,.035); box-shadow:none; color:var(--cream); }
.private-vault-item span { color:var(--gold-soft); font-size:18px; }
.private-vault-item small { margin-left:auto; color:rgba(244,237,228,.46); }
.private-toast { position:fixed; left:50%; bottom:calc(90px + env(safe-area-inset-bottom)); z-index:13000; max-width:calc(100vw - 36px); transform:translate(-50%,18px); opacity:0; pointer-events:none; padding:11px 16px; border:1px solid rgba(216,183,122,.25); border-radius:14px; background:rgba(16,11,14,.94); color:var(--cream); font-size:12px; transition:.25s ease; }
.private-toast.show { opacity:1; transform:translate(-50%,0); }
.audio-settings { position:fixed; left:18px; top:80px; z-index:10004; display:none; width:min(310px,calc(100vw - 36px)); padding:17px; border:1px solid rgba(216,183,122,.22); border-radius:19px; background:rgba(16,11,14,.97); box-shadow:0 18px 55px rgba(0,0,0,.58); backdrop-filter:blur(18px); }
.audio-settings.open { display:block; animation:actionEnter .25s ease; }
.audio-settings-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.audio-settings-head div { display:flex; flex-direction:column; gap:3px; }
.audio-settings-head small { color:var(--gold); font-size:8px; letter-spacing:.18em; text-transform:uppercase; }
.audio-settings-head strong { color:var(--cream); font:400 20px/1.1 Georgia,serif; }
.audio-settings-head button { width:34px; height:34px; min-height:0; margin:0; padding:0; border:1px solid rgba(216,183,122,.16); border-radius:50%; background:rgba(255,255,255,.04); box-shadow:none; color:rgba(244,237,228,.65); font-size:23px; font-weight:300; }
.audio-toggle-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:15px; }
.audio-setting-toggle { min-height:52px; margin:0; padding:9px 11px; display:flex; align-items:center; gap:9px; text-align:left; border:1px solid rgba(216,183,122,.14); border-radius:13px; background:rgba(255,255,255,.035); box-shadow:none; }
.audio-setting-toggle svg { flex:0 0 auto; color:var(--gold-soft); }
.audio-setting-toggle span { display:flex; flex-direction:column; color:var(--cream); font-size:11px; }
.audio-setting-toggle small { margin-top:2px; color:rgba(244,237,228,.42); font-size:9px; text-transform:none; letter-spacing:0; }
.audio-setting-toggle.muted { opacity:.58; }
.audio-settings label { display:block; margin:0 0 13px; color:rgba(244,237,228,.72); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.audio-settings input[type="range"] { width:100%; margin-top:8px; accent-color:var(--gold-soft); }
.audio-settings small { display:block; color:rgba(244,237,228,.42); line-height:1.4; }
.audio-exit-button { min-height:44px; margin:16px 0 0; border:1px solid rgba(166,70,89,.38); border-radius:13px; background:rgba(126,34,52,.16); box-shadow:none; color:#dfa5b0; font-size:10px; letter-spacing:.13em; }
.audio-exit-button:active { background:rgba(126,34,52,.3); }
.chat-typing { min-height:0; padding:0 14px; color:rgba(216,183,122,.62); font-size:11px; opacity:0; transition:.2s; }
.chat-typing.visible { min-height:20px; opacity:1; }
.connection-recovery { position:fixed; inset:0; z-index:14000; display:none; place-items:center; padding:22px; background:rgba(5,3,4,.82); backdrop-filter:blur(16px); }
.connection-recovery.open { display:grid; }
.connection-recovery-card { width:min(100%,430px); padding:27px; text-align:center; border:1px solid rgba(216,183,122,.24); border-radius:26px; background:linear-gradient(155deg,#2a1923,#100b0e); box-shadow:0 25px 80px rgba(0,0,0,.7); }
.connection-recovery-orbit { width:42px; height:42px; margin:0 auto 16px; border:2px solid rgba(216,183,122,.2); border-top-color:var(--gold-soft); border-radius:50%; animation:spin 1s linear infinite; }
.connection-recovery[data-state="connected"] .connection-recovery-orbit { border:0; animation:none; }
.connection-recovery[data-state="connected"] .connection-recovery-orbit::after { content:'✓'; color:var(--gold-soft); font-size:34px; }
.cinematic-cue.act-change strong { font-size:36px; text-shadow:0 0 35px rgba(231,182,160,.35); }
.immersion-hud { width:100%; max-width:520px; margin:0 auto 12px; padding:10px 12px; border:1px solid rgba(231,182,160,.13); border-radius:14px; background:rgba(10,6,8,.42); backdrop-filter:blur(10px); }
.act-row { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:7px; }
.act-label { color:var(--skin); font:600 9px/1 Arial,sans-serif; letter-spacing:.18em; text-transform:uppercase; }
.tension-value { color:rgba(244,237,228,.55); font:500 9px/1 Arial,sans-serif; }
.tension-track { height:4px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.07); }
.tension-fill { width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#7f203c,var(--desire),#e07959); box-shadow:0 0 18px rgba(182,46,80,.45); transition:width .8s cubic-bezier(.22,1,.36,1); }
.ready-panel { display:none; width:100%; max-width:520px; margin:10px auto; padding:14px; border:1px solid rgba(231,182,160,.2); border-radius:17px; background:linear-gradient(145deg,rgba(77,15,36,.42),rgba(12,7,10,.75)); text-align:center; }
.ready-panel.visible { display:block; animation:actionEnter .35s ease; }
.ready-copy { margin-bottom:10px; color:rgba(244,237,228,.72); font:400 12px/1.45 Arial,sans-serif; }
.ready-panel button { min-height:44px; margin:0; background:linear-gradient(110deg,#7f203c,#b62e50); }
.reaction-dock { display:none; grid-template-columns:repeat(5,1fr); gap:6px; width:100%; max-width:520px; margin:11px auto 3px; }
.reaction-dock.visible { display:grid; }
.reaction-dock button { min-width:0; min-height:40px; margin:0; padding:7px 2px; border:1px solid rgba(231,182,160,.12); border-radius:12px; background:rgba(255,255,255,.035); box-shadow:none; font-size:17px; }
.reaction-toast { position:fixed; left:50%; top:42%; z-index:12000; transform:translate(-50%,-50%) scale(.65); opacity:0; pointer-events:none; color:#fff0e9; text-align:center; text-shadow:0 8px 32px #000; font:600 18px/1.25 Georgia,serif; }
.reaction-toast.show { animation:reactionBurst 1.8s ease forwards; }
.cinematic-cue { position:fixed; inset:0; z-index:11000; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:35px; background:radial-gradient(circle at 50% 45%,rgba(128,25,58,.78),rgba(6,4,5,.97) 68%); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .35s ease,visibility .35s; }
.cinematic-cue.show { opacity:1; visibility:visible; }
.cinematic-cue small { color:var(--skin); font:600 10px/1 Arial,sans-serif; letter-spacing:.24em; text-transform:uppercase; }
.cinematic-cue strong { max-width:360px; color:var(--cream); text-align:center; font:400 30px/1.18 Georgia,serif; }
.secret-mission { display:none; max-width:520px; margin:10px auto; padding:13px 15px; border-left:2px solid var(--desire); border-radius:4px 14px 14px 4px; background:rgba(182,46,80,.1); color:rgba(244,237,228,.78); font:400 12px/1.45 Arial,sans-serif; }
.secret-mission.visible { display:block; animation:actionEnter .4s ease; }
@keyframes reactionBurst { 0% { opacity:0; transform:translate(-50%,-50%) scale(.55); } 22% { opacity:1; transform:translate(-50%,-50%) scale(1.18); } 70% { opacity:1; transform:translate(-50%,-58%) scale(1); } 100% { opacity:0; transform:translate(-50%,-85%) scale(.9); } }
/* Expérience relationnelle 5.7 */
:root{--journey-accent:#caa27a;--journey-glow:rgba(202,162,122,.18);--journey-soft:#eee2d7}
body[data-journey="understand"]{--journey-accent:#9b9bd7;--journey-glow:rgba(112,103,177,.2);--journey-soft:#dedcf5}
body[data-journey="unsaid"]{--journey-accent:#bb83a7;--journey-glow:rgba(139,76,116,.22);--journey-soft:#ead7e4}
body[data-journey="desire"]{--journey-accent:#d49168;--journey-glow:rgba(210,99,54,.22);--journey-soft:#f2d4c4}
body[data-journey="hot"]{--journey-accent:#ed684f;--journey-glow:rgba(220,48,29,.25);--journey-soft:#ffd3c9}
body[data-journey="future"]{--journey-accent:#88b49f;--journey-glow:rgba(65,132,105,.2);--journey-soft:#d8eee5}
body[data-journey="surprise"]{--journey-accent:#c0a0d6;--journey-glow:rgba(116,75,162,.22);--journey-soft:#e9dff1}
body::after{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 18%,var(--journey-glow),transparent 42%);transition:background .8s ease;z-index:-1}
.journey-grid{display:grid;grid-template-columns:1fr;gap:10px;margin:22px 0}.journey-card{display:grid;grid-template-columns:42px 1fr;gap:2px 12px;text-align:left;padding:15px 16px;border:1px solid rgba(232,213,191,.12);border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.018));color:#eee4db;box-shadow:inset 0 1px rgba(255,255,255,.04);transition:.25s ease}.journey-card>span{grid-row:1/3;color:var(--journey-accent);font:600 11px/1.2 sans-serif;letter-spacing:.18em;padding-top:3px}.journey-card strong{font:500 18px/1.2 Georgia,serif}.journey-card small{opacity:.64;line-height:1.45}.journey-card.selected{border-color:color-mix(in srgb,var(--journey-accent) 70%,transparent);transform:translateY(-2px);box-shadow:0 16px 45px var(--journey-glow),inset 0 1px rgba(255,255,255,.08)}.journey-hot strong{color:#ffd4ca}.emotional-calibration{margin-top:12px}
.listening-cue{max-width:560px;margin:9px auto 14px;padding:11px 14px;border-left:1px solid var(--journey-accent);color:rgba(239,228,216,.7);font:italic 13px/1.5 Georgia,serif}.immersion-hud,.game-progress{border-color:color-mix(in srgb,var(--journey-accent) 30%,transparent)}.tension-fill,.game-progress-fill{background:linear-gradient(90deg,var(--journey-accent),var(--journey-soft))}.card-back{box-shadow:0 26px 70px var(--journey-glow),inset 0 0 70px rgba(255,255,255,.018)}
.reaction-dock{gap:7px;overflow-x:auto;justify-content:flex-start;padding:8px 2px;scrollbar-width:none}.reaction-dock button{width:auto;min-width:max-content;height:36px;border-radius:18px;padding:0 13px;font-size:11px;letter-spacing:.01em;color:#e9ded5;border:1px solid rgba(236,216,196,.17);background:rgba(255,255,255,.045)}
.private-response-dock{grid-template-columns:repeat(5,1fr)}.private-response-dock button{font-size:10px}.private-media-viewer video{display:none;width:100%;max-height:58vh;border-radius:16px;background:#050506}
.closing-card{display:grid;gap:14px;margin:24px 0}.closing-card label{display:grid;gap:8px;text-align:left;color:#d8c6b6;font-size:12px;letter-spacing:.06em}.closing-card textarea{min-height:110px;resize:none;border:1px solid rgba(233,211,190,.14);border-radius:18px;padding:16px;background:rgba(255,255,255,.035);color:#f5ece4;font:16px/1.5 Georgia,serif}.session-delete-warning{margin:18px 0;padding:14px;border-radius:15px;background:rgba(175,89,73,.1);border:1px solid rgba(218,125,104,.2);color:#deb9ac;font-size:12px;line-height:1.5}.session-closed{text-align:center;padding-top:28vh}
.chat-popup{position:fixed!important;inset:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom)) 12px!important;width:auto!important;height:auto!important;max-width:580px;margin:auto;border-radius:26px!important;background:linear-gradient(155deg,#171215 0%,#0d0b0d 100%)!important;border:1px solid rgba(232,208,186,.16)!important;box-shadow:0 30px 100px rgba(0,0,0,.72)!important;overflow:hidden;z-index:15000!important}.chat-header{padding:18px 20px 13px!important;border-bottom:0!important;display:flex;align-items:center;justify-content:space-between;background:transparent!important}.chat-header div{display:grid;gap:2px}.chat-header small{text-transform:uppercase;letter-spacing:.18em;font-size:9px;color:var(--journey-accent)}.chat-header strong{font:500 22px/1.15 Georgia,serif}.chat-close-btn{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#eee;width:38px;height:38px;border-radius:50%;font-size:22px}.chat-privacy-strip{margin:0 15px 9px;padding:8px 11px;border-radius:10px;background:rgba(110,153,133,.09);color:#9bc5b0;font-size:10px;text-align:center}.chat-context-toggle{margin:0 15px 8px;padding:9px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:transparent;color:#b9aaa0;font-size:11px}.chat-context-toggle.active{color:var(--journey-soft);border-color:var(--journey-accent);background:var(--journey-glow)}.chat-messages{padding:12px 15px!important}.msg-bubble{display:grid;gap:7px}.msg-context{display:block;padding-left:9px;border-left:1px solid var(--journey-accent);opacity:.58;font:italic 11px/1.35 Georgia,serif}.chat-media-tools{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:8px 12px}.chat-media-tools button{border:0;border-radius:11px;background:rgba(255,255,255,.045);color:#cbbcb1;padding:10px 4px;font-size:10px}.chat-input-area{padding:8px 12px 13px!important;background:rgba(0,0,0,.14)!important}.chat-input-area input{border-radius:15px!important;background:rgba(255,255,255,.055)!important;border:1px solid rgba(255,255,255,.09)!important;color:white!important}.chat-input-area button{border-radius:14px!important;background:var(--journey-accent)!important;color:#171112!important}
@media(min-width:600px){.journey-grid{grid-template-columns:1fr 1fr}.journey-card:last-child{grid-column:1/-1}}
/* Installation Safari / iPhone */
.ios-install-card{width:100%;display:flex;align-items:center;gap:13px;margin:17px 0 4px;padding:13px 15px;border:1px solid rgba(202,162,122,.24);border-radius:16px;background:rgba(202,162,122,.075);color:#eee3da;text-align:left}.ios-install-card[hidden]{display:none}.ios-install-card>span{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:rgba(202,162,122,.12);color:#d6ad83;font-size:20px}.ios-install-card div{display:grid;gap:3px}.ios-install-card strong{font-size:13px}.ios-install-card small{opacity:.62;font-size:10px}.pwa-install-guide{position:fixed;inset:0;display:none;place-items:end center;padding:16px 16px max(20px,env(safe-area-inset-bottom));background:rgba(4,3,4,.72);backdrop-filter:blur(14px);z-index:30000}.pwa-install-guide.open{display:grid}.pwa-install-guide-card{position:relative;width:min(100%,460px);padding:25px 22px;border:1px solid rgba(235,214,193,.16);border-radius:25px;background:linear-gradient(150deg,#21171d,#0e0b0d);box-shadow:0 30px 90px rgba(0,0,0,.75)}.pwa-install-guide-card>small{color:#cba77f;letter-spacing:.19em;font-size:9px}.pwa-install-guide-card h3{margin:9px 38px 19px 0;font:500 25px/1.15 Georgia,serif}.pwa-install-guide-card ol{display:grid;gap:13px;padding-left:25px;color:#e8ddd5;font-size:14px;line-height:1.45}.pwa-install-guide-card p{margin-top:18px;color:#a99c94;font-size:11px;line-height:1.5}.pwa-guide-close{position:absolute;right:17px;top:17px;width:36px;height:36px;border:1px solid rgba(255,255,255,.12);border-radius:50%;background:rgba(255,255,255,.04);color:#eee;font-size:22px}.ios-web-app body{padding-top:max(0px,env(safe-area-inset-top));padding-bottom:max(0px,env(safe-area-inset-bottom))}