html,body{margin:0;height:100%;background:#070b12;overflow:hidden}
a{color:#d9b77a}a:hover{color:#efe0bf}
*{box-sizing:border-box}
#app{position:fixed;inset:0;background:#070b12;overflow:hidden;font-family:'Marcellus',Georgia,serif;color:#efe0bf;user-select:none;-webkit-font-smoothing:antialiased}
.screen{position:absolute;inset:0;display:none;overflow:hidden}
.screen.active{display:flex}
.skippable{cursor:pointer}
#fade{position:absolute;inset:0;background:#000;pointer-events:none;opacity:0;transition:opacity .7s ease}
#fade.on{opacity:1}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes kenburns{from{transform:scale(1.14)}to{transform:scale(1.02)}}
@keyframes drift{from{transform:scale(1.02) translateX(0)}to{transform:scale(1.07) translateX(-1%)}}
@keyframes logoIn{0%{opacity:0;transform:scale(1.08);filter:blur(10px)}100%{opacity:1;transform:scale(1);filter:blur(0)}}
@keyframes sweep{0%{transform:translateX(-120%) skewX(-18deg);opacity:0}20%{opacity:1}100%{transform:translateX(260%) skewX(-18deg);opacity:0}}
@keyframes approach{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes glow{0%,100%{opacity:.6;transform:translate(-50%,-50%) scale(.9)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}}
@keyframes flicker{0%,100%{opacity:.85}7%{opacity:.5}9%{opacity:.9}44%{opacity:.75}46%{opacity:1}72%{opacity:.8}}
@keyframes fall{0%{transform:translate(0,-8vh) rotate(0);opacity:0}10%{opacity:1}100%{transform:translate(-14vw,108vh) rotate(560deg);opacity:.8}}
@keyframes fog{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes hint{0%,100%{opacity:.3}50%{opacity:.75}}

.soft-mask{-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%)}
.cover{position:absolute;left:50%;top:50%;width:max(100vw,177.78vh);height:max(100vh,56.25vw);transform:translate(-50%,-50%)}
.cover img{width:100%;height:100%;display:block}
.skip-hint{position:absolute;right:28px;bottom:22px;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:#cdbf9f;animation:hint 2.4s 1.5s ease-in-out infinite both}

/* Accueil */
#screen-consent{align-items:center;justify-content:center;overflow-y:auto;padding:20px 0;animation:fadeIn 1s ease both}
.consent-bg{position:fixed;inset:-20px;width:calc(100% + 40px);height:calc(100% + 40px);object-fit:cover;filter:blur(8px) brightness(.32) saturate(.8)}
.card{position:relative;margin:auto;width:calc(100% - 40px);max-width:560px;padding:44px 44px 36px;background:rgba(12,18,30,.84);border:1px solid rgba(217,183,122,.32);border-radius:4px;display:flex;flex-direction:column;gap:26px;animation:rise .9s .2s ease both}
.card-head{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.eyebrow{font-family:'Cinzel',serif;font-size:13px;letter-spacing:.34em;text-transform:uppercase;color:#d9b77a}
.card-title{margin:0;font-family:'Cinzel',serif;font-size:30px;line-height:1.15;font-weight:600;color:#efe0bf}
.ornament{display:flex;align-items:center;gap:10px;width:60%}
.ornament span{flex:1;height:1px;background:rgba(217,183,122,.5)}
.ornament i{width:7px;height:7px;transform:rotate(45deg);border:1px solid #d9b77a}
.lead{margin:0;font-size:16px;line-height:1.55;color:#cdbf9f;text-wrap:pretty}
.rows{display:flex;flex-direction:column;gap:10px}
.row{display:flex;align-items:center;gap:18px;padding:16px 18px;border:1px solid rgba(217,183,122,.18);border-radius:4px;cursor:pointer;background:rgba(255,255,255,.02)}
.row:hover{background:rgba(217,183,122,.07)}
.row-text{flex:1;display:flex;flex-direction:column;gap:4px}
.row-title{font-size:18px}
.row-desc{font-size:14px;line-height:1.45;color:#a99d84}
.switch{flex:none;width:46px;height:26px;border-radius:13px;position:relative;transition:background .25s;background:rgba(239,224,191,.18)}
.switch .knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#efe0bf;transition:left .25s}
.switch.on{background:#b8935a}
.switch.on .knob{left:23px}
.btn-primary{appearance:none;border:none;cursor:pointer;padding:17px 24px;background:#d9b77a;color:#141b26;font-family:'Cinzel',serif;font-weight:600;font-size:16px;letter-spacing:.24em;text-transform:uppercase;border-radius:3px;transition:background .2s}
.btn-primary:hover{background:#ecd3a0}
.note{font-size:13px;color:#8a8170;text-align:center}
.consent-foot{position:fixed;left:24px;right:24px;bottom:16px;display:flex;justify-content:space-between;gap:16px;font-size:13px;letter-spacing:.06em;color:#a99d84;pointer-events:none}
.consent-foot a{pointer-events:auto;color:#d9b77a;text-decoration:none;border-bottom:1px solid rgba(217,183,122,.4)}
.consent-foot a:hover{color:#efe0bf;border-color:#efe0bf}
@media (max-height:640px){.card{padding:24px 28px 20px;gap:16px}.card-title{font-size:24px}.row{padding:10px 14px}.lead{font-size:15px}}

/* Tercium */
#screen-studio{animation:fadeIn 1.4s ease both}
.kenburns{position:absolute;inset:0;animation:kenburns 9s cubic-bezier(.2,.6,.3,1) both}
@keyframes lineIn{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
@keyframes spread{from{opacity:0;letter-spacing:.15em;filter:blur(4px)}to{opacity:1;letter-spacing:.55em;filter:blur(0)}}
.studio-signal{position:absolute;left:91.1%;top:66.6%;width:5%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,200,110,.9) 0%,rgba(255,140,50,.3) 30%,transparent 70%);mix-blend-mode:screen;animation:glow 3s 1s ease-in-out infinite both}
.studio-shade{position:absolute;inset:0;background:radial-gradient(ellipse 45% 35% at 50% 42%,rgba(7,11,20,.55),transparent 75%);animation:fadeIn 1.5s .6s ease both}
.studio-logo{position:absolute;left:50%;top:41%;width:48%;aspect-ratio:1994/789;transform:translate(-50%,-50%)}
.cover .studio-logo img{width:100%;height:100%;display:block;filter:drop-shadow(0 0 2.2vw rgba(255,190,110,.25));animation:logoIn 2s .9s cubic-bezier(.2,.7,.2,1) both}
.studio-sweep-box{position:absolute;inset:0;overflow:hidden;-webkit-mask-image:url(../assets/logo_intro_seul.png);mask-image:url(../assets/logo_intro_seul.png);-webkit-mask-size:100% 100%;mask-size:100% 100%;mix-blend-mode:overlay;pointer-events:none;animation:fadeIn .1s 2.4s both}
.studio-sweep{position:absolute;top:-20%;bottom:-20%;width:20%;background:linear-gradient(90deg,transparent,rgba(255,245,220,.95),transparent);animation:sweep 1.6s 2.5s ease-in-out both}
.studio-presente{position:absolute;left:50%;top:61%;transform:translateX(-50%);display:flex;align-items:center;gap:1.6vw;width:30%}
.studio-presente span{flex:1;height:1px;background:rgba(239,224,191,.6);animation:lineIn 1.2s 2.6s ease both}
.studio-presente span:first-child{transform-origin:right}
.studio-presente span:last-child{transform-origin:left}
.studio-presente div{font-family:'Cinzel',serif;font-size:max(14px,1.6vw);letter-spacing:.55em;padding-left:.55em;color:#efe0bf;animation:spread 1.6s 2.5s ease both}

/* Logo */
#screen-logo{background:radial-gradient(ellipse at 50% 50%,#132033 0%,#0f1a2a 45%,#070b12 100%);align-items:center;justify-content:center}
.logo-wrap{position:relative;width:min(88vw,150vh);aspect-ratio:2/1;animation:logoIn 2.4s .3s cubic-bezier(.2,.7,.2,1) both}
.logo-wrap img{width:100%;height:100%;display:block}
.logo-headlight{position:absolute;left:53.2%;top:49.3%;width:9%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,226,160,.95) 0%,rgba(255,170,70,.4) 30%,transparent 70%);mix-blend-mode:screen;animation:approach 3.2s 1s ease-out both}
.logo-sweep-box{position:absolute;inset:18% 20%;overflow:hidden;mix-blend-mode:overlay;pointer-events:none}
.logo-sweep{position:absolute;top:-20%;bottom:-20%;width:22%;background:linear-gradient(90deg,transparent,rgba(255,240,210,.85),transparent);animation:sweep 1.8s 2.3s ease-in-out both}

/* Menu */
#screen-menu{animation:fadeIn 1.6s ease both}
.drift{position:absolute;inset:0;animation:drift 40s ease-in-out infinite alternate}
.menu-headlight{position:absolute;left:60.3%;top:57.9%;width:6%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,226,160,.9) 0%,rgba(255,170,70,.35) 30%,transparent 70%);mix-blend-mode:screen;animation:glow 3.5s ease-in-out infinite}
.menu-lamp{position:absolute;left:78.5%;top:29.5%;width:9%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,200,120,.55) 0%,rgba(255,150,60,.18) 35%,transparent 70%);mix-blend-mode:screen;transform:translate(-50%,-50%);animation:flicker 5s linear infinite}
.fog{position:absolute;left:0;bottom:16%;width:200%;height:30%;background:radial-gradient(ellipse 25% 50% at 20% 50%,rgba(170,180,205,.13),transparent 70%),radial-gradient(ellipse 25% 50% at 45% 60%,rgba(170,180,205,.09),transparent 70%),radial-gradient(ellipse 25% 50% at 70% 50%,rgba(170,180,205,.13),transparent 70%),radial-gradient(ellipse 25% 50% at 95% 60%,rgba(170,180,205,.09),transparent 70%);animation:fog 70s linear infinite;pointer-events:none}
.leaves{position:absolute;inset:0;pointer-events:none}
.leaf{position:absolute;top:0;border-radius:0 80% 0 80%;animation-name:fall;animation-timing-function:linear;animation-iteration-count:infinite;animation-fill-mode:both}
.menu-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,11,20,.78) 0%,rgba(7,11,20,.45) 32%,transparent 58%);pointer-events:none}
.ui{position:absolute;left:50%;top:50%;width:min(100vw,177.78vh);height:min(100vh,56.25vw);transform:translate(-50%,-50%);container-type:size}
.menu-logo{position:absolute;left:1.5%;top:3%;width:46%;mix-blend-mode:lighten;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 60%,transparent 100%);animation:rise 1.4s .4s ease both}
.menu{position:absolute;left:8.5%;top:49%;display:flex;flex-direction:column;gap:.5cqh;animation:rise 1.2s .9s ease both}
.item{position:relative;display:flex;align-items:center;gap:1.4cqw;padding:1cqh 4cqw 1cqh 1.6cqw;font-size:max(15px,2.15cqw);letter-spacing:.03em;border-radius:999px;border:1px solid transparent;color:#e6d6b2;cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.item .arrow{width:0;height:0;border-top:.55cqw solid transparent;border-bottom:.55cqw solid transparent;border-left:.75cqw solid #efe0bf;opacity:0;transition:opacity .25s}
.item.active{color:#fff4dc;background:linear-gradient(90deg,rgba(60,40,20,.75),rgba(30,22,16,.55));border-color:rgba(217,183,122,.75)}
.item.active .arrow{opacity:1}
.item.disabled{color:rgba(239,224,191,.38);cursor:default}
.corner{position:absolute;right:2.5%;bottom:3.5%;display:flex;align-items:center;gap:1.6cqw;font-size:max(12px,1cqw);letter-spacing:.14em;text-transform:uppercase;color:#cdbf9f}
.chip{cursor:pointer;padding:.6cqh .8cqw;border:1px solid rgba(217,183,122,.3);border-radius:3px;background:rgba(10,16,28,.6)}
.chip:hover{border-color:#d9b77a}
.version{opacity:.6}

.panel{position:absolute;right:5%;top:10%;bottom:12%;width:40%;padding:3.4cqh 2.6cqw;background:rgba(10,16,28,.9);border:1px solid rgba(217,183,122,.35);border-radius:4px;backdrop-filter:blur(6px);display:flex;flex-direction:column;gap:2.6cqh;animation:rise .45s ease both;overflow:auto}
.panel[hidden]{display:none}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:1cqw}
.panel-title{font-family:'Cinzel',serif;font-weight:600;font-size:max(18px,2.2cqw)}
.panel-close{cursor:pointer;font-size:max(12px,.95cqw);letter-spacing:.16em;text-transform:uppercase;color:#a99d84}
.panel-close:hover{color:#efe0bf}
.rule{height:1px;background:rgba(217,183,122,.3)}
.panel-body{display:none;flex-direction:column;gap:2.4cqh;font-size:max(14px,1.3cqw);line-height:1.5}
.panel-body.active{display:flex}
.panel-body p{margin:0;text-wrap:pretty}
.opt-row{display:flex;align-items:center;justify-content:space-between;gap:1cqw;cursor:pointer}
.opt-stack{display:flex;flex-direction:column;gap:.4cqh}
.opt-slider{display:flex;flex-direction:column;gap:.8cqh}
.opt-line{display:flex;justify-content:space-between}
.opt-slider input{width:100%;accent-color:#d9b77a}
.muted{color:#a99d84}
.small{font-size:max(12px,1cqw)}
.btn-danger{align-self:flex-start;cursor:pointer;padding:1cqh 1.4cqw;border:1px solid rgba(217,120,90,.5);border-radius:3px;color:#e3a48a;font-size:max(12px,1.05cqw)}
.btn-danger:hover{background:rgba(217,120,90,.12)}
.slots{display:flex;flex-direction:column;gap:1.2cqh}
.slot{display:flex;flex-direction:column;gap:.5cqh;padding:1.6cqh 1.4cqw;border:1px solid rgba(217,183,122,.22);border-radius:3px;cursor:pointer}
.slot:hover{background:rgba(217,183,122,.08)}
.slot.empty{opacity:.5;cursor:default}
.slot .label,.credit .label{font-size:max(12px,.95cqw);letter-spacing:.16em;text-transform:uppercase;color:#d9b77a}
.slot .date{font-size:max(12px,1cqw);color:#a99d84}
.credit{display:flex;flex-direction:column;gap:.4cqh}
.quit-actions{display:flex;gap:1cqw}
.btn-gold{cursor:pointer;padding:1.2cqh 2cqw;background:#d9b77a;color:#141b26;border-radius:3px;font-family:'Cinzel',serif;font-weight:600;letter-spacing:.12em}
.btn-gold:hover{background:#ecd3a0}
.btn-ghost{cursor:pointer;padding:1.2cqh 2cqw;border:1px solid rgba(217,183,122,.4);border-radius:3px}
.btn-ghost:hover{background:rgba(217,183,122,.08)}

.ng-step{display:none;flex-direction:column;gap:1.8cqh}
.ng-step.active{display:flex}
.choice{display:flex;flex-direction:column;gap:1cqh;padding:2cqh 1.6cqw;border:1px solid rgba(217,183,122,.28);border-radius:4px;cursor:pointer;transition:background .2s,border-color .2s}
.choice:hover{background:rgba(217,183,122,.08);border-color:#d9b77a}
.choice-title{display:flex;align-items:center;gap:.8cqw;font-size:max(15px,1.45cqw);color:#efe0bf}
.tag{font-size:max(10px,.8cqw);letter-spacing:.14em;text-transform:uppercase;padding:.3cqh .6cqw;border-radius:2px;background:#d9b77a;color:#141b26}
.choice-list{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:.4cqh;font-size:max(12px,1.05cqw);color:#a99d84}
.choice-list .warn{color:#e3a48a}
.choice-cta{align-self:flex-start;font-size:max(12px,.95cqw);letter-spacing:.16em;text-transform:uppercase;color:#d9b77a}
.field{display:flex;flex-direction:column;gap:.6cqh;font-size:max(12px,1cqw);color:#cdbf9f}
.field input{font:inherit;font-size:max(14px,1.2cqw);color:#efe0bf;background:rgba(255,255,255,.04);border:1px solid rgba(217,183,122,.3);border-radius:3px;padding:1.1cqh .9cqw;outline:none;user-select:text}
.field input:focus{border-color:#d9b77a}
.form-error{min-height:1.2em;font-size:max(12px,1cqw);color:#e3a48a}
.login{display:flex;flex-direction:column;gap:1.6cqh;padding-bottom:2.2cqh;border-bottom:1px solid rgba(217,183,122,.2)}
.login p{margin:0}
.account-bar{display:flex;align-items:center;justify-content:space-between;gap:1cqw;padding:1.4cqh 1.2cqw;border:1px solid rgba(217,183,122,.22);border-radius:3px;font-size:max(13px,1.1cqw)}
.account-bar strong{font-weight:400;color:#d9b77a}
.link{cursor:pointer;font-size:max(12px,.95cqw);letter-spacing:.14em;text-transform:uppercase;color:#a99d84}
.link:hover{color:#efe0bf}
.section-label{font-size:max(12px,.95cqw);letter-spacing:.16em;text-transform:uppercase;color:#a99d84;margin-bottom:-1cqh}
button.btn-gold{appearance:none;border:none;font-size:inherit}

/* Chapitre */
#screen-game{background:#070b12;align-items:center;justify-content:center;text-align:center;padding:24px}
.chapter{display:none;flex-direction:column;align-items:center;gap:18px}
.chapter.active{display:flex}
#screen-game:has(.once.active){background:radial-gradient(ellipse 55% 45% at 50% 50%,#132033 0%,#0b111c 60%,#070b12 100%)}
.once{display:none;flex-direction:column;align-items:center;gap:clamp(18px,3vh,32px);transition:opacity 1.2s ease}
.once.active{display:flex}
.once.out{opacity:0}
.once-line{display:flex;align-items:baseline;gap:.32em;font-family:'Cinzel',serif;font-weight:600;font-size:clamp(30px,5vw,72px);letter-spacing:.08em;color:#efe0bf;text-shadow:0 0 28px rgba(217,183,122,.35)}
.once-w{display:inline-block;animation:wordIn 1.4s cubic-bezier(.2,.7,.2,1) both}
.once-line .dot{display:inline-block;color:#d9b77a;animation:dotIn .7s ease both}
.once-last{display:inline-flex}
.once-orn{display:flex;align-items:center;gap:12px;width:min(46vw,520px)}
.once-orn span{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(217,183,122,.7));transform-origin:right;animation:lineIn 1.4s .2s ease both}
.once-orn span:last-child{background:linear-gradient(90deg,rgba(217,183,122,.7),transparent);transform-origin:left}
.once-orn i{width:8px;height:8px;transform:rotate(45deg);border:1px solid #d9b77a;animation:fadeIn 1s .9s ease both}
.once-orn.bottom span{animation-delay:2s}.once-orn.bottom i{animation-delay:2.6s}
@keyframes wordIn{from{opacity:0;transform:translateY(18px);filter:blur(10px);letter-spacing:.3em}to{opacity:1;transform:none;filter:blur(0);letter-spacing:.08em}}
@keyframes dotIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes lineIn{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
.g-eyebrow{font-family:'Cinzel',serif;font-size:14px;letter-spacing:.4em;text-transform:uppercase;color:#d9b77a;animation:rise 1.4s .5s ease both}
.g-title{margin:0;font-family:'Cinzel',serif;font-size:clamp(28px,4.5vw,56px);font-weight:600;animation:rise 1.6s 1s ease both}
.g-sub{font-size:18px;color:#a99d84;animation:rise 1.4s 1.8s ease both}
.g-note{font-size:15px;color:#8a8170;margin-top:18px;animation:fadeIn 1.4s 2.8s ease both}
.g-back{margin-top:10px;cursor:pointer;padding:12px 26px;border:1px solid rgba(217,183,122,.45);border-radius:999px;font-size:16px;animation:fadeIn 1.4s 3.2s ease both}
.g-back:hover{background:rgba(217,183,122,.1)}