:root{--bg:#0d1210;--fg:#efe9d8;--mut:#a8a58f;--gold:#d8b45e;--leaf:#7fae8a;--card:#16201b;--line:#2b3a32}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font-family:Georgia,"Times New Roman",serif;overflow:hidden}
.slide{position:absolute;inset:0;padding:5vh 6vw 20vh 6vw;display:none;gap:3vw;align-items:center;animation:in .6s}
.slide.on{display:flex}
@keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.txt{flex:1.1;display:flex;flex-direction:column;gap:2vh;min-width:0}
.vis{flex:1;display:flex;align-items:center;justify-content:center;min-width:0}
.vis svg,.vis video{width:100%;max-height:68vh}
video.ex{background:#000;border-radius:14px;border:1px solid var(--line);max-height:62vh}
h1{font-size:clamp(32px,4.6vw,66px);line-height:1.08;margin:0;color:var(--gold);font-weight:400}
h2{font-size:clamp(26px,3.3vw,46px);margin:0;color:var(--gold);font-weight:400}
p,li{font-size:clamp(17px,1.9vw,27px);line-height:1.45;margin:.2em 0}
ul{margin:0;padding-left:1.1em}
.kicker{font-family:system-ui,sans-serif;text-transform:uppercase;letter-spacing:.2em;color:var(--leaf);font-size:clamp(12px,1.1vw,16px)}
.mut{color:var(--mut)}
.tag{display:inline-block;font-family:system-ui,sans-serif;font-size:clamp(12px,1.1vw,15px);padding:.2em .8em;border:1px solid var(--gold);color:var(--gold);border-radius:99px;margin-right:.5em}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.6vh 1.6vw}
.warn{border-color:#a8573f;background:#1f1612}
table{border-collapse:collapse;width:100%}th,td{border-bottom:1px solid var(--line);padding:1vh .8vw;text-align:left;font-size:clamp(13px,1.4vw,20px);vertical-align:top}
th{color:var(--leaf);font-family:system-ui,sans-serif;font-weight:500;text-transform:uppercase;font-size:clamp(11px,1vw,14px);letter-spacing:.08em}
.full{flex-direction:column;align-items:stretch;justify-content:center}
.ph{color:#e8a87c;border-bottom:1px dashed #e8a87c}
/* avatar */
.slide{padding-left:calc(40vh + 8vw)}
#av{position:fixed;left:3vw;top:7vh;height:78vh;aspect-ratio:9/16;border-radius:20px;overflow:hidden;border:2px solid var(--gold);background:#000;z-index:5;transition:box-shadow .4s}
#av.talk{animation:pulse 1.4s infinite}
#av.talk img{animation:kb 14s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.02) translateY(0)}to{transform:scale(1.12) translateY(-1.5%)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(216,180,94,.55)}70%{box-shadow:0 0 0 18px rgba(216,180,94,0)}100%{box-shadow:0 0 0 0 rgba(216,180,94,0)}}
#av img,#av video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
#av video{z-index:2}
#who{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:1.2em .6em .5em;text-align:center;font-family:system-ui,sans-serif;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);background:linear-gradient(transparent,rgba(0,0,0,.8))}
@media (max-aspect-ratio:1/1){.slide{padding-left:6vw;padding-top:36vh;flex-direction:column}#av{left:50%;transform:translateX(-50%);top:2vh;height:30vh}#cap{position:fixed;left:calc(40vh + 8vw);right:4vw;bottom:6.4vh;max-height:15vh;overflow:hidden;font-family:Georgia,serif;font-size:clamp(13px,1.25vw,19px);line-height:1.35;color:var(--gold);font-style:italic;z-index:4;text-align:center}}
.hud{position:fixed;bottom:2vh;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:0 3vw;font-family:system-ui,sans-serif;font-size:13px;color:var(--mut);z-index:6}
.hud button{background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:99px;padding:.4em 1em;cursor:pointer;font-size:13px}
.bar{position:fixed;top:0;left:0;height:3px;background:var(--gold);transition:width .3s;z-index:7}
#cap{position:fixed;left:6vw;right:22vw;bottom:5.2vh;font-family:system-ui,sans-serif;font-size:13px;color:var(--mut);font-style:italic;z-index:4}
#start{position:fixed;inset:0;background:rgba(5,8,6,.94);z-index:20;display:flex;flex-direction:column;gap:3vh;align-items:center;justify-content:center;text-align:center;padding:6vw}
#start img{height:46vh;border-radius:16px;border:2px solid var(--gold)}
#start button{font-size:20px;padding:.7em 1.6em;border-radius:99px;border:1px solid var(--gold);background:transparent;color:var(--gold);cursor:pointer}
.big{width:100%}
.rv{opacity:0;transform:translateY(16px);transition:opacity .8s,transform .8s}
.rv.in{opacity:1;transform:none}
.vis.rv{transform:scale(.94)}.vis.rv.in{transform:none}
#ph{position:fixed;top:2.2vh;right:3vw;z-index:8;font-family:system-ui,sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:.35em 1em;border-radius:99px;border:1px solid var(--gold);color:var(--gold);background:rgba(13,18,16,.85)}
#ph.ex{background:var(--gold);color:#0d1210}

.exbox{width:100%;display:flex;flex-direction:column;gap:1.2vh;align-items:center}
.exbox video.ex{width:100%;max-height:56vh;object-fit:contain}
.chips{display:flex;gap:.5vw;flex-wrap:wrap;justify-content:center}
.chips span{font-family:system-ui,sans-serif;font-size:clamp(11px,1vw,14px);padding:.25em .8em;border:1px solid var(--line);border-radius:99px;color:var(--mut)}
.chips span.cur{border-color:var(--gold);color:var(--gold);background:rgba(216,180,94,.12)}
.chips span.done{opacity:.5}
.opts{display:flex;gap:.6vw;flex-wrap:wrap;justify-content:center}
.opts button{font-family:system-ui,sans-serif;font-size:clamp(12px,1.1vw,15px);background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:99px;padding:.4em 1.1em;cursor:pointer}
.opts button.on{border-color:var(--gold);color:var(--gold)}
.steps{list-style:none;padding:0}.steps li{border-bottom:1px solid var(--line);padding:.5vh 0}.steps b{color:var(--gold);display:inline-block;min-width:4.2em;font-family:system-ui,sans-serif}
#av.calm img{animation:kb 14s ease-in-out infinite alternate}
#av video{object-fit:cover;object-position:50% 20%}
.hud button.act{border-color:var(--gold);color:var(--gold)}
.bar{cursor:pointer}

.backlink{position:fixed;top:1.6vh;left:3vw;z-index:9;font-family:system-ui,sans-serif;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);text-decoration:none}.backlink:hover{color:var(--gold)}

/* ===== Lisibilité téléphone (portrait) ===== */
@media (max-aspect-ratio:1/1){
  #av{left:50%;transform:translateX(-50%);top:34px;height:24vh;border-radius:16px}
  #who{font-size:11px}
  .slide{inset:calc(34px + 24vh + 12px) 0 148px 0;padding:6px 5vw 14px;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:14px;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .txt,.vis{flex:none;width:100%}
  h1{font-size:28px;line-height:1.15}
  h2{font-size:23px;line-height:1.2}
  p,li{font-size:17px;line-height:1.5}
  .kicker{font-size:12px}
  .card{padding:12px 14px}
  .vis svg,.vis video{max-height:40vh}
  video.ex,.exbox video.ex{max-height:34vh}
  table{display:block;overflow-x:auto}
  th,td{font-size:14px;padding:8px}
  th{font-size:11px}
  .chips span,.opts button,.tag{font-size:13px}
  .opts button{min-height:40px;padding:.5em 1em}
  #cap{display:none}
  #ph{top:6px;right:8px;font-size:11px}
  .backlink{top:10px;left:10px;font-size:11px}
  .hud{bottom:0;padding:10px 8px calc(8px + env(safe-area-inset-bottom));flex-wrap:wrap;justify-content:center;gap:6px;background:linear-gradient(transparent,var(--bg) 25%)}
  #n{width:100%;text-align:center;font-size:12px}
  .hud span:last-child{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;font-size:0}
  .hud button{min-height:42px;font-size:14px;padding:.4em .9em}
  #start button{font-size:18px}
}
/* ===== Téléphone en paysage ===== */
@media (max-height:520px) and (min-aspect-ratio:1/1){
  #av{height:66vh;top:12vh}
  .slide{padding-left:calc(34vh + 6vw);padding-bottom:20vh}
  h1{font-size:26px}h2{font-size:21px}
  p,li{font-size:15px}
  .hud button{min-height:34px;font-size:12px}
  #cap{display:none}
}