/* ============================================================
   BARZ LIFE — feuille de style
   ============================================================ */
:root{
  --bg:#08090c; --bg2:#0e1016; --card:#14161e; --card2:#191c26;
  --bd:#252936; --bd2:#333849;
  --tx:#e9ecf3; --tx2:#98a0b3; --tx3:#7b8398;
  --or:#f2b63c; --or2:#ffd77a;
  --vert:#4fcf8b; --rouge:#f2604f; --bleu:#6aa8f5; --violet:#b487f7; --gris:#8b93a6;
  --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--tx);
  font:15px/1.55 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  min-height:100vh;padding:0 0 env(safe-area-inset-bottom);
  background-image:radial-gradient(1100px 620px at 50% -8%,#1b1a24 0%,transparent 62%);
}
#app{min-height:100vh}
b,strong{font-weight:650}
h1,h2,h3,.mdn,.fin-t,.fiche-n,.logo h1,.page-t,.res-titre,.verdict{
  font-family:"Space Grotesk",Inter,-apple-system,BlinkMacSystemFont,sans-serif}
h2{font-size:19px;font-weight:700;letter-spacing:-.3px;margin:0 0 10px}
h2.rouge{color:var(--rouge)}

/* ---------- 1. LE TÉLÉPHONE ---------- */
.phone{
  max-width:440px;margin:0 auto;min-height:100vh;
  background:var(--bg2);
  border-left:1px solid var(--bd);border-right:1px solid var(--bd);
  display:flex;flex-direction:column;
  padding-bottom:70px;
}
.phone.alerte{box-shadow:inset 0 0 0 1px rgba(242,96,79,.35)}

/* --- barre du haut --- */
.ph-top{
  position:sticky;top:0;z-index:20;
  background:rgba(14,16,22,.93);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--bd);
  padding:calc(10px + env(safe-area-inset-top)) 14px 9px;
}
.ph-l1{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.ph-date{font-size:12.5px;color:var(--tx2);letter-spacing:.2px}
.ph-date b{color:var(--tx);font-weight:650}
.ph-argent{font-size:15px;font-weight:700;color:var(--vert);font-variant-numeric:tabular-nums}
.ph-argent.neg{color:var(--rouge)}
.ph-pal{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.7px;color:var(--or)}
.ph-next{color:var(--tx3);flex-shrink:0}
.ph-bar{flex:1;height:4px;border-radius:4px;background:#232734;overflow:hidden}
.ph-bar i{display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,var(--or),var(--or2));transition:width .5s ease}
.ph-stats{display:flex;gap:6px;margin-top:9px}
.mn{flex:1;background:var(--card);border:1px solid var(--bd);border-radius:9px;
  padding:5px 4px;text-align:center;min-width:0}
.mn span{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.5px;color:var(--tx3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mn b{font-size:15px;font-variant-numeric:tabular-nums}

/* --- corps --- */
.ph-main{padding:16px 14px 6px}

/* --- le fil --- */
.ph-fil{margin:14px 14px 16px;margin-top:auto;border-top:1px solid var(--bd);padding-top:10px}
.fil-t{font-size:9.5px;text-transform:uppercase;letter-spacing:1.1px;color:var(--tx3);margin-bottom:6px}
.fil-e{display:flex;gap:8px;align-items:baseline;padding:4px 0;font-size:12.5px;color:var(--tx2);
  border-bottom:1px solid rgba(37,41,54,.5)}
.fil-e:last-child{border-bottom:0}
.fi{flex-shrink:0}
.fx{flex:1;min-width:0}
.fd{flex-shrink:0;font-size:10px;color:var(--tx3);white-space:nowrap}

/* --- nav du bas --- */
.ph-nav{
  position:fixed;bottom:0;left:0;right:0;z-index:30;
  max-width:440px;margin:0 auto;display:flex;
  background:rgba(14,16,22,.95);backdrop-filter:blur(14px);
  border-top:1px solid var(--bd);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
}
.ph-nav button{
  flex:1;background:none;border:0;color:var(--tx3);font:inherit;font-size:10.5px;
  padding:6px 2px;cursor:pointer;border-radius:8px;letter-spacing:.2px
}
.ph-nav button:hover{color:var(--tx2);background:rgba(255,255,255,.04)}
.ph-nav button.on{color:#17130a;background:var(--or);font-weight:700}
.ph-nav button.on:hover{background:var(--or2);color:#17130a}
.retour{
  display:block;width:100%;margin:0 0 14px;
  background:var(--card2);border:1px solid var(--bd2);border-radius:11px;
  color:var(--or2);font:inherit;font-size:13.5px;font-weight:600;
  padding:11px 14px;text-align:left;cursor:pointer;transition:.12s
}
.retour:hover{border-color:var(--or);background:rgba(242,182,60,.1)}

/* ---------- 2. ÉCRANS HORS JEU ---------- */
.solo{max-width:560px;margin:0 auto;padding:26px 16px calc(40px + env(safe-area-inset-bottom))}
.logo{text-align:center;padding:34px 0 20px}
.logo h1{font-size:44px;font-weight:800;letter-spacing:2px;line-height:1.05;color:var(--or);
  text-shadow:0 0 28px color-mix(in srgb, var(--or) 30%, transparent)}
.logo h1 span{color:var(--violet);display:inline;text-shadow:0 0 28px rgba(180,135,247,.35)}
.pitch{color:var(--tx2);font-size:14px;margin-top:16px;max-width:430px;margin-inline:auto}
.page-t{font-size:27px;font-weight:800;letter-spacing:-.8px;margin-bottom:6px}
.page-t span{color:var(--or)}
.menu-row{display:flex;gap:10px;margin-top:10px}
.menu-row .btn{flex:1}
.nav{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.nav .btn{flex:1;min-width:130px}

/* ---------- 3. BLOCS COMMUNS ---------- */
.intro{color:var(--tx2);font-size:13.5px;margin-bottom:14px}
.centre{text-align:center}
.recit{color:var(--tx2);font-size:14px;margin-bottom:14px}
.recit.mt,.mt{margin-top:12px}
.incident{
  background:var(--card);border-left:3px solid var(--or);border-radius:0 10px 10px 0;
  padding:12px 14px;font-size:14px;color:var(--tx);margin-bottom:14px
}
.suite{
  background:rgba(242,182,60,.08);border:1px solid rgba(242,182,60,.28);border-radius:10px;
  padding:10px 12px;font-size:13px;color:var(--or2);margin-bottom:12px
}
.carte{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:15px;margin-bottom:12px;
  box-shadow:0 1px 3px rgba(0,0,0,.25)}
.bt{font-size:9.5px;text-transform:uppercase;letter-spacing:1.1px;color:var(--tx3);margin-bottom:9px}
.meta{display:block;color:var(--tx3);font-size:11.5px;margin-top:3px}
.profil{font-size:15px;line-height:1.55}
.pastilles{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap}
.lbl{display:block;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--tx3);margin-bottom:8px}
input[type=text],input:not([type]){
  width:100%;background:var(--bg);border:1px solid var(--bd2);border-radius:10px;
  color:var(--tx);font:inherit;font-size:17px;padding:12px 13px;outline:none
}
input:focus{border-color:var(--or)}
input.err{border-color:var(--rouge)}

/* --- boutons --- */
.btn{
  background:var(--card2);border:1px solid var(--bd2);color:var(--tx);
  font:inherit;font-weight:600;font-size:14px;padding:12px 16px;border-radius:11px;cursor:pointer;
  transition:.12s
}
.btn:hover{border-color:var(--tx3);background:#1f2331}
.btn.or{background:var(--or);border-color:var(--or);color:#17130a}
.btn.or:hover{background:var(--or2);border-color:var(--or2)}
.btn.grand{display:block;width:100%;font-size:16px;padding:15px}

/* --- options cliquables --- */
.opts{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.opt{
  background:var(--card);border:1px solid var(--bd);border-radius:12px;
  padding:13px 15px;cursor:pointer;
  transition:transform .18s cubic-bezier(.4,0,.2,1),border-color .18s,background .18s,box-shadow .18s
}
.opt:active{transform:scale(.99)}
.opt:hover{border-color:var(--or);background:var(--card2);transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(0,0,0,.3)}
.opt.off{opacity:.34;pointer-events:none}
.ot{font-size:14.5px;font-weight:600;line-height:1.35}
.od{font-size:12.5px;color:var(--tx2);margin-top:4px}

/* --- tags --- */
.tag{
  display:inline-block;font-size:10.5px;font-weight:650;letter-spacing:.2px;
  padding:2.5px 7px;border-radius:6px;margin:2px 3px 0 0;white-space:nowrap;
  background:#232734;color:var(--tx2);vertical-align:middle
}
.t-or{background:rgba(242,182,60,.15);color:var(--or2)}
.t-vert{background:rgba(79,207,139,.14);color:var(--vert)}
.t-rouge{background:rgba(242,96,79,.14);color:var(--rouge)}
.t-bleu{background:rgba(106,168,245,.14);color:var(--bleu)}
.t-violet{background:rgba(180,135,247,.14);color:var(--violet)}
.t-ce{background:rgba(120,220,220,.13);color:#7fd8d8}
.t-gris{background:#232734;color:var(--tx2)}

/* --- jauges --- */
.jauge{margin-bottom:9px}
.jl{display:flex;justify-content:space-between;font-size:11.5px;color:var(--tx2);margin-bottom:4px}
.jl b{color:var(--tx);font-variant-numeric:tabular-nums}
.jb{height:6px;border-radius:6px;background:#232734;overflow:hidden}
.jb i{display:block;height:100%;border-radius:6px;background:var(--gris);transition:width .4s}
.jb i.or{background:linear-gradient(90deg,var(--or),var(--or2))}
.jb i.vert{background:var(--vert)}
.jb i.bleu{background:var(--bleu)}
.jb i.rouge{background:var(--rouge)}
.barre{height:7px;border-radius:7px;background:#232734;overflow:hidden;margin:12px 0 18px}
.barre i{display:block;height:100%;background:linear-gradient(90deg,var(--or),var(--or2))}

/* --- couleurs utilitaires --- */
.or{color:var(--or)} .vert{color:var(--vert)} .rouge{color:var(--rouge)} .bleu{color:var(--bleu)}
b.or{color:var(--or2)}

/* ---------- 4. PROJET EN COURS ---------- */
.ep{
  background:linear-gradient(135deg,#1a1723,#14161e);
  border:1px solid var(--bd);border-left:3px solid var(--or);
  border-radius:12px;padding:11px 13px;margin-bottom:14px
}
.ept{font-size:15px;font-weight:700;letter-spacing:-.2px}
.epp{font-size:12.5px;color:var(--tx2);margin-top:2px;font-style:italic}
.epm{font-size:11px;color:var(--tx3);margin-top:5px;font-variant-numeric:tabular-nums}

/* --- tracklist --- */
.tl{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:6px 12px;margin-bottom:14px}
.tlr{display:flex;justify-content:space-between;gap:10px;padding:7px 0;font-size:13px;
  border-bottom:1px solid rgba(37,41,54,.6)}
.tlr:last-child{border-bottom:0}
.tln{font-weight:600;min-width:0}
.tlm{color:var(--tx3);font-size:11.5px;text-align:right;flex-shrink:0;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:48%}
.retenu{font-size:13px;color:var(--or2);margin-bottom:10px}

/* --- promo --- */
.promos{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:14px}
.pm{background:var(--card);border:1px solid var(--bd);border-radius:11px;padding:9px 10px;cursor:pointer;transition:.12s}
.pm:hover{border-color:var(--bd2)}
.pm.on{border-color:var(--or);background:rgba(242,182,60,.09)}
.pm.off{opacity:.33;pointer-events:none}
.pmn{font-size:13px;font-weight:650}
.pmd{font-size:11px;color:var(--tx3);margin-top:2px;line-height:1.35}
.pmp{font-size:11.5px;font-weight:650;color:var(--or2);margin-top:5px;font-variant-numeric:tabular-nums}

/* ---------- 5. SEMAINE DE SORTIE ---------- */
.res-head{text-align:center;margin-bottom:12px}
.res-titre{font-size:23px;font-weight:800;letter-spacing:-.6px;line-height:1.15}
.res-pitch{font-size:13px;color:var(--tx2);font-style:italic;margin-top:4px}
.res-meta{margin-top:8px}
.verdict{
  text-align:center;font-size:16px;font-weight:800;letter-spacing:.4px;
  padding:13px 12px;border-radius:12px;margin-bottom:14px;border:1px solid
}
.v-or{background:rgba(242,182,60,.12);border-color:rgba(242,182,60,.45);color:var(--or2)}
.v-vert{background:rgba(79,207,139,.11);border-color:rgba(79,207,139,.42);color:var(--vert)}
.v-bleu{background:rgba(106,168,245,.11);border-color:rgba(106,168,245,.42);color:var(--bleu)}
.v-violet{background:rgba(180,135,247,.11);border-color:rgba(180,135,247,.42);color:var(--violet)}
.v-rouge{background:rgba(242,96,79,.11);border-color:rgba(242,96,79,.42);color:var(--rouge)}
.v-gris{background:#191c26;border-color:var(--bd2);color:var(--tx2)}

.timeline{
  background:var(--card);border:1px solid var(--bd);border-radius:var(--r);
  padding:6px 14px;margin-bottom:12px
}
.tlj{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid rgba(37,41,54,.6);position:relative}
.tlj:last-child{border-bottom:0}
.tji{flex-shrink:0;width:26px;text-align:center;font-size:16px;line-height:1.35}
.tlj b{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:1px;color:var(--tx3);margin-bottom:2px}
.tlj p{font-size:13.5px;color:var(--tx);line-height:1.45}
.tlj p b{display:inline;font-size:inherit;text-transform:none;letter-spacing:0;color:var(--or2)}

.notes{display:flex;gap:8px;margin-bottom:10px}
.note{flex:1;background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:11px;text-align:center}
.nl{font-size:9.5px;text-transform:uppercase;letter-spacing:.9px;color:var(--tx3)}
.nv{font-size:30px;font-weight:800;line-height:1.1;margin-top:2px;font-variant-numeric:tabular-nums}
.ns{font-size:11px;color:var(--tx2);margin-top:2px}

.chiffres{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.ch{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:10px 12px}
.cl{font-size:9.5px;text-transform:uppercase;letter-spacing:.9px;color:var(--tx3)}
.cv{font-size:19px;font-weight:750;margin-top:2px;font-variant-numeric:tabular-nums}

.conseil{
  background:rgba(106,168,245,.08);border:1px solid rgba(106,168,245,.25);
  border-radius:11px;padding:11px 13px;font-size:13px;color:#b9d2f7;margin-bottom:10px
}
.monte{
  background:rgba(242,182,60,.1);border:1px solid rgba(242,182,60,.35);
  border-radius:11px;padding:11px 13px;font-size:13.5px;color:var(--or2);margin-bottom:10px
}
.prix,.selec,.rature{
  background:var(--card);border:1px solid var(--bd);border-radius:10px;
  padding:9px 12px;font-size:13px;margin-bottom:7px
}
.prix{border-color:rgba(242,182,60,.4);color:var(--or2)}
.rature{border-color:rgba(180,135,247,.4);color:var(--violet)}
.deltas{display:flex;flex-wrap:wrap;gap:4px;margin:10px 0 12px}
.deltas .tag{font-size:11.5px;padding:4px 9px}
.newb{background:rgba(242,182,60,.07);border:1px dashed rgba(242,182,60,.4);
  border-radius:11px;padding:10px 12px;margin-bottom:12px}
.nbl{font-size:9.5px;text-transform:uppercase;letter-spacing:1px;color:var(--or);margin-bottom:5px}

/* ---------- 6. BEEF ---------- */
.beefbar{
  position:relative;height:8px;border-radius:8px;margin:14px 0 6px;
  background:linear-gradient(90deg,var(--rouge),#333849 45%,#333849 55%,var(--vert))
}
.beefbar i{
  position:absolute;top:50%;width:14px;height:14px;border-radius:50%;
  background:var(--tx);border:2px solid var(--bg2);transform:translate(-50%,-50%);transition:left .4s
}
.beefl{display:flex;justify-content:space-between;font-size:10px;color:var(--tx3);margin-bottom:14px}
.beefl span:nth-child(2){color:var(--tx2);font-weight:600}

/* ---------- 7. CONTRAT ---------- */
.contrat{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:6px 14px;margin-bottom:14px}
.cl2{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:13px;
  border-bottom:1px solid rgba(37,41,54,.6)}
.cl2:last-child{border-bottom:0}
.cl2 span{color:var(--tx2)}
.cl2 b{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- 8. PROFIL / DISCO / PROCHES ---------- */
.axe{margin-bottom:11px}
.axl{display:flex;justify-content:space-between;font-size:10.5px;color:var(--tx3);margin-bottom:5px}
.axb{position:relative;height:5px;border-radius:5px;background:#232734}
.axb i{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;
  background:var(--or);transform:translate(-50%,-50%)}
.prox{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;font-size:13.5px;
  border-bottom:1px solid rgba(37,41,54,.6)}
.prox:last-child{border-bottom:0}
.prox i{display:block;font-style:normal;font-size:11px;color:var(--tx3)}
.prox b{font-variant-numeric:tabular-nums;font-size:15px}
.lp{padding:10px 0;border-bottom:1px solid rgba(37,41,54,.6)}
.lp:last-child{border-bottom:0}
.lpn{font-size:14.5px;font-weight:650;display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
.lpv{font-size:10px;font-weight:700;padding:3px 7px;border-radius:6px;border:1px solid;white-space:nowrap}
.lpm{font-size:11.5px;color:var(--tx3);margin-top:3px}
.lpt{font-size:11.5px;color:var(--tx2);margin-top:4px;font-style:italic;line-height:1.45}

/* ---------- 9. BADGES ---------- */
.badges{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.bg{display:flex;gap:6px;align-items:center;background:var(--bg);border:1px solid var(--bd);
  border-radius:9px;padding:8px 9px;font-size:11.5px;color:var(--tx3)}
.bg.on{border-color:rgba(242,182,60,.4);color:var(--or2);background:rgba(242,182,60,.06)}
.bg span{min-width:0}

/* ---------- 10. FIN ---------- */
.fin-h{text-align:center;padding:26px 6px 20px}
.fin-t{font-size:29px;font-weight:800;letter-spacing:-1px;line-height:1.1;color:var(--or)}
.fin-n{font-size:16px;font-weight:650;margin-top:8px}
.fin-s{font-size:12px;color:var(--tx3);margin-top:3px;text-transform:uppercase;letter-spacing:.8px}
.fin-e{font-size:14px;color:var(--tx2);margin-top:14px;max-width:440px;margin-inline:auto}

/* ---------- petits écrans ---------- */
@media (max-width:400px){
  .promos,.chiffres,.badges{grid-template-columns:1fr}
  .logo h1{font-size:32px}
  .mn b{font-size:14px}
}

/* ---------- 11. AFFAIRES EN COURS ---------- */
.dossier{
  background:var(--bg);border:1px solid var(--bd);border-left:3px solid var(--rouge);
  border-radius:0 11px 11px 0;padding:10px 12px;margin-bottom:8px
}
.dos-h{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap;font-size:13.5px}
.dos-e{font-size:10.5px;color:var(--tx3);white-space:nowrap}
.dos-e.rouge{color:var(--rouge);font-weight:650}
.dos-d{font-size:12px;color:var(--tx2);margin-top:4px;line-height:1.45}
.dos-t{margin-top:6px}
.dos-t .tag{font-size:10px}

/* ---------- 12. ALERTES ---------- */
.alertes{margin-bottom:14px;display:flex;flex-direction:column;gap:6px}
.al{font-size:12.5px;line-height:1.45;padding:9px 12px;border-radius:10px;border-left:3px solid}
.al-danger{background:rgba(242,96,79,.1);border-color:var(--rouge);color:#ffc5bd}
.al-warn{background:rgba(242,182,60,.09);border-color:var(--or);color:var(--or2)}
.al-info{background:rgba(106,168,245,.09);border-color:var(--bleu);color:#bfd6f8}

/* ---------- 13. SAUVEGARDE ---------- */
.sauve{
  position:fixed;left:50%;bottom:78px;transform:translateX(-50%);z-index:60;
  background:rgba(20,22,30,.95);border:1px solid var(--bd2);color:var(--tx3);
  font-size:11px;letter-spacing:.3px;padding:7px 14px;border-radius:20px;
  animation:sauveIn 2.2s ease forwards;pointer-events:none
}
@keyframes sauveIn{0%{opacity:0;transform:translate(-50%,8px)}12%{opacity:1;transform:translate(-50%,0)}80%{opacity:1}100%{opacity:0}}
.sv-info{font-size:12px;color:var(--tx3);text-align:center;margin:8px 0 14px}
.btn.pt{width:100%;font-size:13px;padding:10px 14px;color:var(--tx2)}

/* ---------- 14. CONFIRMATION ---------- */
.confirme{margin-bottom:4px}

/* ---------- 15. CE QU'IL MANQUE / CE QUI A PESÉ ---------- */
.ph-manque{font-size:10.5px;color:var(--tx3);margin-top:6px;line-height:1.4}
.ph-manque b{color:var(--or2)}
.pese{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:0;margin-bottom:10px;overflow:hidden}
.pese summary{
  padding:11px 13px;font-size:12.5px;color:var(--tx2);cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center
}
.pese summary::-webkit-details-marker{display:none}
.pese summary::after{content:"▾";color:var(--tx3);font-size:11px;transition:transform .2s}
.pese[open] summary::after{transform:rotate(180deg)}
.pese[open] summary{border-bottom:1px solid var(--bd)}
.pese-l{padding:8px 13px 2px}
.pf{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:12.5px;
  border-bottom:1px solid rgba(37,41,54,.6)}
.pf:last-child{border-bottom:0}
.pf span{color:var(--tx2);min-width:0}
.pf b{font-variant-numeric:tabular-nums;flex-shrink:0}
.pese .recit{padding:0 13px 12px;font-size:11.5px}

/* ---------- 16. TUTORIEL ---------- */
.tuto-fond{
  position:fixed;inset:0;z-index:2000;animation:tfIn .2s ease
}
.tuto-fond.plein{background:rgba(4,5,8,.78)}
/* le projecteur : l'ombre géante assombrit tout SAUF le rectangle visé */
.tuto-halo{
  position:fixed;border-radius:12px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(4,5,8,.80), 0 0 0 2px var(--or) inset;
  transition:all .2s ease
}
@keyframes tfIn{from{opacity:0}to{opacity:1}}
.tuto-b{
  position:fixed;left:50%;transform:translateX(-50%);z-index:2001;
  width:min(400px,calc(100vw - 28px));
  background:var(--card2);border:1px solid var(--or);border-radius:14px;
  padding:16px 17px;box-shadow:0 18px 50px rgba(0,0,0,.6);
  top:50%;animation:tbIn .24s ease
}
.tuto-b[style*="bottom"]{top:auto}
@keyframes tbIn{from{opacity:0;transform:translateX(-50%) translateY(6px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.tuto-t{font-size:15.5px;font-weight:700;color:var(--or2);margin-bottom:7px}
.tuto-d{font-size:13.5px;line-height:1.55;color:var(--tx)}
.tuto-d b{color:var(--or2)}
.tuto-nav{display:flex;gap:8px;margin-top:14px;align-items:center}
.tuto-skip{
  background:none;border:0;color:var(--tx3);font:inherit;font-size:12px;
  cursor:pointer;padding:9px 2px;text-decoration:underline;text-underline-offset:3px
}
.tuto-ok{
  margin-left:auto;background:var(--or);border:0;color:#17130a;font:inherit;
  font-weight:700;font-size:13.5px;padding:9px 18px;border-radius:10px;cursor:pointer
}
.tuto-ok:hover{background:var(--or2)}
/* la cible n'est plus remontée dans la pile : c'est le projecteur qui
   l'éclaire. On ne garde qu'un léger halo pour la repérer. */
.tuto-vise{border-radius:12px}
@keyframes vise{0%,100%{opacity:1}50%{opacity:1}}
.bienv .recit{font-size:14px}

/* ---------- 17. RETOURS VISUELS ---------- */
.mn b.orange{color:#f2a03c}
.mn.mn-bas{border-color:rgba(242,96,79,.45);background:rgba(242,96,79,.06)}
.ph-argent.bas{color:#f2a03c}
.ph-reste{display:block;font-size:9.5px;color:var(--tx3);letter-spacing:.3px;margin-top:1px}
.ph-age{height:2px;border-radius:2px;background:#1c1f2a;margin:7px 0 2px;overflow:hidden}
.ph-age i{display:block;height:100%;background:var(--bd2);transition:width .5s ease}

.opt.grave{border-color:rgba(242,96,79,.5)}
.opt.grave::after{
  content:"point de non-retour";position:absolute;right:12px;bottom:8px;
  font-size:9px;letter-spacing:.6px;text-transform:uppercase;color:var(--rouge);opacity:.75
}
.opt.grave{position:relative;padding-bottom:24px}
.opt.grave:hover{border-color:var(--rouge);background:rgba(242,96,79,.06)}

/* ---------- 18. CÉLÉBRATION ---------- */
.fete-fond{
  position:fixed;inset:0;z-index:250;display:flex;align-items:center;justify-content:center;
  background:rgba(4,5,8,.78);backdrop-filter:blur(3px);animation:tfIn .2s ease;cursor:pointer
}
.fete{
  text-align:center;padding:30px 26px;max-width:min(360px,calc(100vw - 40px));
  background:linear-gradient(160deg,#2a2214,#191c26);
  border:1px solid var(--or);border-radius:18px;
  box-shadow:0 0 60px rgba(242,182,60,.25);animation:feteIn .45s cubic-bezier(.2,1.3,.4,1)
}
@keyframes feteIn{0%{opacity:0;transform:scale(.7)}100%{opacity:1;transform:scale(1)}}
.fete-i{font-size:54px;line-height:1;margin-bottom:12px;animation:feteFlot 1.6s ease-in-out infinite}
@keyframes feteFlot{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.fete-t{font-size:21px;font-weight:800;letter-spacing:-.4px;color:var(--or2);line-height:1.2}
.fete-s{font-size:13.5px;color:var(--tx2);margin-top:8px;line-height:1.5}

/* ---------- 19. FILET DE SÉCURITÉ ---------- */
.issue{
  margin-top:14px;background:rgba(242,96,79,.08);border:1px dashed var(--rouge);
  border-radius:12px;padding:14px
}
.issue-t{font-size:14px;font-weight:700;color:var(--rouge);margin-bottom:5px}
.issue-d{font-size:12.5px;color:var(--tx2);line-height:1.5}
.tuto-b{cursor:default}

/* ---------- 20. ONGLET SCÈNE ---------- */
.scn{display:grid;grid-template-columns:18px 1fr 64px 30px;gap:9px;align-items:center;
  padding:8px 0;border-bottom:1px solid rgba(37,41,54,.6);font-size:13.5px}
.scn:last-child{border-bottom:0}
.scn.moi{background:rgba(242,182,60,.06);border-radius:8px;padding:8px 7px;margin:0 -7px}
.scn-r{font-size:11px;color:var(--tx3);text-align:right;font-variant-numeric:tabular-nums}
.scn-n{min-width:0;font-weight:600}
.scn.moi .scn-n{color:var(--or2)}
.scn-n i{display:block;font-style:normal;font-size:10.5px;color:var(--tx3);font-weight:400;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scn-b{height:5px;border-radius:5px;background:#232734;overflow:hidden}
.scn-b i{display:block;height:100%;border-radius:5px;background:var(--gris)}
.scn-b i.or{background:linear-gradient(90deg,var(--or),var(--or2))}
.scn-b i.vert{background:var(--vert)} .scn-b i.bleu{background:var(--bleu)}
.scn-b i.rouge{background:var(--rouge)} .scn-b i.gris{background:#3a4051}
.scn-b i.moi{background:linear-gradient(90deg,var(--or),var(--or2))}
.scn b{font-size:13px;text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:400px){.scn{grid-template-columns:16px 1fr 44px 28px;gap:7px}}

/* ---------- 21. COTE ---------- */
.ph-cote{
  float:right;margin-left:10px;text-align:center;line-height:1;
  background:var(--card);border:1px solid var(--bd2);border-radius:9px;padding:4px 8px
}
.ph-cote b{display:block;font-size:17px;color:var(--or2);font-variant-numeric:tabular-nums}
.ph-cote span{font-size:8px;letter-spacing:.8px;text-transform:uppercase;color:var(--tx3)}
.cote-svg{display:block;width:100%;height:56px;margin:4px 0}

/* ---------- 22. MOMENT DÉCISIF ---------- */
.mdt{
  display:inline-block;font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;
  background:rgba(180,135,247,.16);color:var(--violet);border:1px solid rgba(180,135,247,.4);
  border-radius:20px;padding:4px 11px;margin-bottom:9px
}
.mdt.ok{background:rgba(79,207,139,.14);color:var(--vert);border-color:rgba(79,207,139,.4)}
.mdt.ko{background:rgba(242,96,79,.14);color:var(--rouge);border-color:rgba(242,96,79,.4)}
.mdn{font-size:21px;font-weight:800;letter-spacing:-.3px;margin-bottom:11px}

/* ---------- 23. ATTENTE ET UNE ---------- */
.epa{font-size:11px;color:var(--or2);margin-top:5px;line-height:1.4}
.une{
  text-align:center;font-size:15px;font-style:italic;font-weight:600;line-height:1.45;
  color:var(--tx);background:var(--card);border-left:3px solid var(--or);
  border-radius:0 11px 11px 0;padding:12px 14px;margin-bottom:12px
}
.att{font-size:12.5px;padding:10px 12px;border-radius:10px;margin-bottom:12px;line-height:1.45}
.att.ok{background:rgba(79,207,139,.1);color:var(--vert);border:1px solid rgba(79,207,139,.3)}
.att.ko{background:rgba(242,96,79,.1);color:var(--rouge);border:1px solid rgba(242,96,79,.3)}

/* ---------- 24. TRAITS ET FICHE DE FIN ---------- */
.trait{
  display:inline-block;font-size:11.5px;font-weight:650;padding:4px 10px;border-radius:20px;
  background:rgba(180,135,247,.13);color:var(--violet);border:1px solid rgba(180,135,247,.35);
  margin:0 5px 5px 0
}
.fiche{
  background:linear-gradient(165deg,#221d2e,#14161e);border:1px solid var(--or);
  border-radius:18px;padding:20px 18px;margin-bottom:18px;text-align:center;
  box-shadow:0 0 50px rgba(242,182,60,.12)
}
.fiche-r{
  display:inline-block;font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase;font-weight:700;
  background:rgba(242,182,60,.16);color:var(--or2);border:1px solid rgba(242,182,60,.45);
  border-radius:20px;padding:4px 13px;margin-bottom:14px
}
.fiche-h{display:flex;gap:14px;align-items:center;justify-content:center;text-align:left}
.fiche-c{
  flex-shrink:0;text-align:center;background:var(--bg);border:1px solid var(--or);
  border-radius:12px;padding:9px 13px;line-height:1
}
.fiche-c b{display:block;font-size:31px;font-weight:800;color:var(--or2);font-variant-numeric:tabular-nums}
.fiche-c span{font-size:8px;letter-spacing:.7px;text-transform:uppercase;color:var(--tx3)}
.fiche-n{font-size:19px;font-weight:800;letter-spacing:-.3px}
.fiche-m{font-size:11.5px;color:var(--tx2);margin-top:2px}
.fiche-s{font-size:19px;font-style:italic;font-weight:700;color:var(--violet);margin:15px 0 4px;line-height:1.3}
.fiche-d{font-size:11.5px;color:var(--tx3)}
.fiche-tr{margin-top:12px}
.fiche-co{margin-top:12px}
.fiche-cl{display:flex;justify-content:space-between;font-size:9.5px;color:var(--tx3)}
.fiche-g{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.fiche-g div{background:var(--bg);border:1px solid var(--bd);border-radius:10px;padding:8px 4px}
.fiche-g b{display:block;font-size:14px;font-variant-numeric:tabular-nums}
.fiche-g span{font-size:8.5px;letter-spacing:.4px;text-transform:uppercase;color:var(--tx3)}
@media (max-width:400px){.fiche-g{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   25. ORDINATEUR — le téléphone garde sa place, une colonne
   d'information l'accompagne. Sur mobile, elle disparaît.
   ============================================================ */
.scene-app{display:block}
.flanc{display:none}

@media (min-width:1080px){
  .scene-app{
    display:grid;grid-template-columns:440px 372px;gap:26px;
    justify-content:center;align-items:start;
    max-width:1180px;margin:0 auto;padding:22px 20px 40px
  }
  .phone{
    border:1px solid var(--bd);border-radius:20px;min-height:0;
    box-shadow:0 24px 70px rgba(0,0,0,.5);overflow:hidden;
    padding-bottom:0;position:sticky;top:22px;max-height:calc(100vh - 44px)
  }
  .phone .ph-main{overflow-y:auto}
  .ph-top{border-radius:20px 20px 0 0}
  .ph-nav{position:static;max-width:none;border-radius:0 0 20px 20px;margin:0}
  .flanc{display:block;padding-top:2px}
  .logo h1{font-size:46px}
}
@media (min-width:1080px) and (max-height:820px){
  .phone{position:static;max-height:none}
}

.fh{display:flex;align-items:baseline;gap:10px;margin-bottom:14px;padding-left:2px}
.fhn{
  font-family:"Space Grotesk",sans-serif;font-size:22px;font-weight:800;letter-spacing:-.5px;
  background:linear-gradient(135deg,var(--or),var(--or2));-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent
}
.fhs{font-size:12.5px;color:var(--tx3)}

.fc{
  background:var(--card);border:1px solid var(--bd);border-radius:14px;
  padding:14px 15px;margin-bottom:12px;box-shadow:0 1px 3px rgba(0,0,0,.25)
}
.fct{font-size:9.5px;text-transform:uppercase;letter-spacing:1.1px;color:var(--tx3);margin-bottom:11px}
.fco{text-align:center;margin-bottom:13px}
.fco b{
  display:block;font-family:"Space Grotesk",sans-serif;font-size:40px;font-weight:800;
  line-height:1;color:var(--or2);font-variant-numeric:tabular-nums
}
.fco span{display:block;font-size:10.5px;color:var(--tx3);margin-top:4px}

.fj{margin-bottom:9px}
.fjl{display:flex;justify-content:space-between;font-size:11.5px;color:var(--tx2);margin-bottom:4px}
.fjl b{color:var(--tx);font-variant-numeric:tabular-nums}
.fjb{height:5px;border-radius:5px;background:#232734;overflow:hidden}
.fjb i{display:block;height:100%;border-radius:5px;transition:width .5s cubic-bezier(.4,0,.2,1)}
.fjb i.or{background:linear-gradient(90deg,var(--or),var(--or2))}
.fjb i.vert{background:var(--vert)} .fjb i.orange{background:#f2a03c}
.fjb i.rouge{background:var(--rouge)} .fjb i.bleu{background:var(--bleu)}

.fcl{display:flex;justify-content:space-between;gap:10px;padding:6px 0;font-size:12.5px;
  border-bottom:1px solid rgba(37,41,54,.55)}
.fcl:last-child{border-bottom:0}
.fcl span{color:var(--tx2)}
.fcl b{text-align:right;font-variant-numeric:tabular-nums}
.fcl.mt{margin-top:6px;border-top:1px solid var(--bd);border-bottom:0;padding-top:9px}

.fsr{display:flex;align-items:center;gap:12px;padding:2px 0 8px}
.fsr b{font-family:"Space Grotesk",sans-serif;font-size:32px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.fsr.ok b{color:var(--vert)} .fsr.ko b{color:var(--rouge)}
.fsr span{font-size:12px;color:var(--tx2);line-height:1.35}

.fg{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0;font-size:12.5px;
  border-bottom:1px solid rgba(37,41,54,.55)}
.fg:last-of-type{border-bottom:0}
.fg span{font-weight:600;min-width:0}
.fg i{display:block;font-style:normal;font-size:10px;color:var(--tx3);font-weight:400}
.fg b{font-variant-numeric:tabular-nums}
.fb{font-size:12.5px;color:var(--tx);padding:4px 0}
.fp{font-size:11.5px;color:var(--tx3);line-height:1.45;margin-top:3px}
.sign{font-size:13px;color:var(--tx3);margin-top:8px;letter-spacing:.3px}

/* ---------- 26. DÉFIS CACHÉS ---------- */
.defi{
  text-align:center;padding:26px 20px;margin-bottom:14px;border-radius:18px;
  background:linear-gradient(165deg,color-mix(in srgb,var(--dc) 14%,transparent),var(--card));
  border:1px solid var(--dc);box-shadow:0 0 44px color-mix(in srgb,var(--dc) 22%,transparent)
}
.defi-r{
  display:inline-block;font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;
  color:var(--dc);border:1px solid var(--dc);border-radius:20px;padding:3px 12px;margin-bottom:14px
}
.defi-i{font-size:52px;line-height:1;margin-bottom:10px;animation:feteFlot 2s ease-in-out infinite}
.defi-n{font-family:"Space Grotesk",sans-serif;font-size:22px;font-weight:800;letter-spacing:-.3px;color:var(--dc)}
.defi-d{font-size:13.5px;color:var(--tx2);margin-top:8px;line-height:1.5}
.defi-p{font-size:16px;font-weight:700;color:var(--vert);margin-top:12px;font-variant-numeric:tabular-nums}
.defi-m{font-size:11.5px;color:var(--tx3);margin-top:10px;font-style:italic}
.fiche-df{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin-top:12px}
.dfc{
  font-size:11px;font-weight:650;padding:4px 10px;border-radius:20px;
  color:var(--dc);border:1px solid color-mix(in srgb,var(--dc) 55%,transparent);
  background:color-mix(in srgb,var(--dc) 10%,transparent)
}
.dfl{display:flex;justify-content:space-between;gap:12px;padding:8px 0;font-size:13px;
  border-bottom:1px solid rgba(37,41,54,.6)}
.dfl:last-of-type{border-bottom:0}
.dfl i{display:block;font-style:normal;font-size:11.5px;color:var(--tx3);margin-top:2px}
.dfl > b{flex-shrink:0;font-size:10px;text-transform:uppercase;letter-spacing:.6px}

/* ---------- 27. BOUTON SON ---------- */
.ph-son{
  background:none;border:0;font-size:14px;cursor:pointer;padding:0 0 0 9px;
  opacity:.5;transition:opacity .15s;line-height:1;min-width:36px;min-height:36px
}
.ph-son:hover{opacity:1}

/* 28. sur ordinateur, la colonne de droite remplace les mini-jauges du bandeau */
@media (min-width:1080px){
  .ph-stats{display:none}
  .ph-fil{display:none}          /* le fil vit dans la colonne de droite */
  .phone .ph-main{padding-bottom:16px}
}
.fc-fil .ffe{display:grid;grid-template-columns:18px 1fr;gap:0 8px;padding:7px 0;border-top:1px solid var(--bd)}
.fc-fil .ffe:first-of-type{border-top:0;padding-top:0}
.ffi{font-size:12px;line-height:1.5}
.ffx{font-size:12.5px;color:var(--tx2);line-height:1.45}
.ffd{grid-column:2;font-size:10.5px;color:var(--tx3);margin-top:2px}

/* ============================================================
   29. LE RIVAL — portrait dessiné, humeur, historique
   ============================================================ */
.portrait{display:block;border-radius:14px;box-shadow:0 4px 14px rgba(0,0,0,.4)}

.riv-scene{display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:start;margin-bottom:6px}
.riv-p{text-align:center}
.riv-pn{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:14px;margin-top:9px}
.riv-pe{font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;margin-top:3px;color:var(--tx3)}
.riv-pe.rouge{color:var(--rouge)} .riv-pe.orange{color:var(--orange)} .riv-pe.vert{color:var(--vert)}
.riv-t{padding-top:2px}
@media (max-width:420px){
  .riv-scene{grid-template-columns:1fr;justify-items:center;text-align:center}
  .riv-t{text-align:left}
}

.riv-carte .riv-tete{display:flex;gap:14px;align-items:center;margin-bottom:11px}
.riv-n{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:16px}
.riv-e{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--tx3);margin:3px 0 7px}
.riv-e.rouge{color:var(--rouge)} .riv-e.orange{color:var(--orange)} .riv-e.vert{color:var(--vert)}
.riv-b{height:5px;background:var(--bd);border-radius:3px;overflow:hidden;width:130px}
.riv-b i{display:block;height:100%;border-radius:3px}
.riv-b i.ko{background:var(--rouge)} .riv-b i.ok{background:var(--vert)}
.riv-d{font-size:12.5px;color:var(--tx2);line-height:1.5}
.riv-h{margin-top:13px;border-top:1px solid var(--bd);padding-top:11px}
.riv-ht{font-size:9.5px;text-transform:uppercase;letter-spacing:1.1px;color:var(--tx3);margin-bottom:8px}
.riv-he{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:12.5px}
.riv-he span{color:var(--tx2)}
.riv-he i{font-style:normal;font-size:11px;color:var(--tx3);white-space:nowrap}

/* ============================================================
   30. L'HÉRITAGE — ce qu'une carrière de légende laisse
   ============================================================ */
.her{text-align:center;padding:18px 4px 6px;margin-bottom:6px}
.her-t{
  display:inline-block;font-size:10px;text-transform:uppercase;letter-spacing:1.6px;
  color:var(--or);border:1px solid color-mix(in srgb, var(--or) 45%, transparent);
  border-radius:999px;padding:5px 13px;margin-bottom:14px
}
.her .mdn{margin-bottom:10px}
.her .intro,.her .recit{max-width:420px;margin-left:auto;margin-right:auto}

/* ============================================================
   31. LA FIN EN TROIS TEMPS
   ============================================================ */
.cine{min-height:78vh;display:flex;align-items:center;justify-content:center}
.cine-in{width:100%;max-width:460px;text-align:center}
.cine-1{font-size:20px;line-height:1.75;color:var(--tx2);animation:cineIn .9s ease both}
.cine-1 b{font-family:"Space Grotesk",sans-serif;font-size:27px;color:var(--tx);font-weight:800}
.cine-l{text-align:left;margin-bottom:8px}
.cine-m{
  display:grid;grid-template-columns:76px 1fr;gap:14px;align-items:baseline;
  padding:13px 0;border-top:1px solid var(--bd);opacity:.45;transition:opacity .5s
}
.cine-m:first-child{border-top:0}
.cine-m.neuf{opacity:1;animation:cineIn .6s ease both}
.cine-a{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--tx3)}
.cine-x{font-size:15.5px;line-height:1.5}
.cine-m.neuf .cine-x{color:var(--tx)}
.cine-t{
  font-family:"Space Grotesk",sans-serif;font-size:34px;font-weight:800;letter-spacing:-.6px;
  color:var(--or);margin-bottom:14px;animation:cineIn .8s ease both
}
.cine-2{font-size:15.5px;line-height:1.7;color:var(--tx2);animation:cineIn 1.1s ease both}
@keyframes cineIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .cine-1,.cine-m.neuf,.cine-t,.cine-2{animation:none}
}

/* ============================================================
   32. LA CARTE À GARDER
   ============================================================ */
.part{margin-top:22px;text-align:center}
.part-b{width:100%;max-width:400px}
.part-d{font-size:12px;color:var(--tx3);margin-top:10px;line-height:1.5;max-width:400px;margin-left:auto;margin-right:auto}

/* « Aucune promo » est un choix exclusif, pas une case de plus */
.pm.seul{border-style:dashed}
.pm.seul .pmn::after{content:" — exclut tout le reste";font-weight:400;color:var(--tx3);font-size:11.5px}

/* ============================================================
   33. REPÈRES — un chiffre et ce qu'il veut dire, en clair
   ============================================================ */
.reperes{
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;
  background:var(--card);border:1px solid var(--bd);border-radius:14px;
  padding:14px 16px;margin:0 0 16px
}
.rep{text-align:center;min-width:72px}
.rep b{
  display:block;font-family:"Space Grotesk",sans-serif;font-size:32px;font-weight:800;
  line-height:1;color:var(--or);font-variant-numeric:tabular-nums
}
.rep span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.9px;color:var(--tx3);margin-top:5px}
.rep-d{font-size:13px;line-height:1.5;color:var(--tx2)}

/* ============================================================
   34. LE LEXIQUE — un chiffre, une explication, en un clic
   ============================================================ */
.q{cursor:pointer;border-bottom:1px dotted var(--tx3);position:relative}
.q i{
  font-style:normal;font-size:9px;font-weight:700;vertical-align:super;
  color:var(--or);margin-left:2px;opacity:.75
}
.q:hover{border-bottom-color:var(--or)}
.q:hover i{opacity:1}
.lex-fond{
  position:fixed;inset:0;z-index:2200;background:rgba(4,5,8,.82);
  display:flex;align-items:center;justify-content:center;padding:20px;
  animation:tfIn .18s ease
}
.lex{
  background:var(--card2);border:1px solid var(--or);border-radius:16px;
  padding:20px 21px;width:min(430px,100%);box-shadow:0 20px 60px rgba(0,0,0,.65);
  animation:tbIn .22s ease;cursor:default
}
.lex-h{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:11px}
.lex-n{font-family:"Space Grotesk",sans-serif;font-size:20px;font-weight:700;color:var(--or2)}
.lex-v{
  font-family:"Space Grotesk",sans-serif;font-size:34px;font-weight:800;line-height:1;
  color:var(--or);font-variant-numeric:tabular-nums
}
.lex-d{font-size:14px;line-height:1.6;color:var(--tx);margin-bottom:16px}
.lex-l{margin-bottom:13px}
.lex-s{font-size:10.5px;text-transform:uppercase;letter-spacing:.9px;display:block;margin-bottom:4px}
.lex-s.vert{color:var(--vert)} .lex-s.rouge{color:var(--rouge)}
.lex-l p{font-size:13px;line-height:1.5;color:var(--tx2)}
.lex-ok{width:100%;margin-top:6px}

/* ============================================================
   35. LA COURBE — trois repères, des axes, une légende
   ============================================================ */
.trois{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:12px}
.tr{text-align:center;flex:1}
.tr b{
  display:block;font-family:"Space Grotesk",sans-serif;font-size:26px;font-weight:800;
  line-height:1;font-variant-numeric:tabular-nums;color:var(--tx)
}
.tr b.or{color:var(--or)} .tr b.vert{color:var(--vert)} .tr b.rouge{color:var(--rouge)}
.tr span{display:block;font-size:10.5px;color:var(--tx3);margin-top:6px;line-height:1.35}
.tr-f{color:var(--tx3);font-size:15px;padding-bottom:16px}
.legende{font-size:11.5px;line-height:1.5;color:var(--tx3);margin-top:9px}
.cote-svg{width:100%;height:auto;display:block;overflow:visible}
.lg-haut{margin:-2px 0 12px}

/* ============================================================
   36. TROIS ONGLETS — plus gros, les actions en premier
   ============================================================ */
.ph-nav button{padding:8px 4px}
.ph-nav button b{display:block;font-size:13px;font-weight:700;letter-spacing:0}
.ph-nav button i{display:block;font-style:normal;font-size:9.5px;color:var(--tx3);margin-top:2px}
.ph-nav button.on i{color:rgba(23,19,10,.62)}
.ph-nav button:hover i{color:var(--tx3)}

/* le bloc d'actions, tout en haut de chaque onglet */
.bloc-a{
  background:color-mix(in srgb, var(--or) 6%, var(--card));
  border:1px solid color-mix(in srgb, var(--or) 30%, transparent);
  border-radius:16px;padding:14px 13px 4px;margin-bottom:18px
}
.bt-a{
  font-size:10.5px;text-transform:uppercase;letter-spacing:1.2px;
  color:var(--or2);margin-bottom:11px;padding-left:2px
}
.alerte-v{
  background:color-mix(in srgb, var(--rouge) 12%, transparent);
  border-left:3px solid var(--rouge);border-radius:0 10px 10px 0;
  padding:11px 14px;margin-bottom:16px;font-size:13.5px;color:var(--tx)
}
/* le résumé en trois ou quatre chiffres, en tête d'onglet */
.resume{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:18px}
.res-c{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:12px 6px;text-align:center}
.res-c b{
  display:block;font-family:"Space Grotesk",sans-serif;font-size:21px;font-weight:800;
  line-height:1;font-variant-numeric:tabular-nums;color:var(--tx)
}
.res-c span{display:block;font-size:9.5px;color:var(--tx3);margin-top:6px;letter-spacing:.3px}

/* le son se choisit à l'accueil, pas derrière un pictogramme */
.son-choix{margin-bottom:16px}
.son-deux{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:13px}
.son-b{font-size:14px;padding:12px 8px}
.son-b.on{background:var(--or);color:#17130a;border-color:var(--or);font-weight:700}
.ph-son.on{color:var(--or)}

/* ============================================================
   37. LE RYTHME — les blocs arrivent l'un après l'autre
   ============================================================ */
.arrive{animation:arrive .36s cubic-bezier(.22,.9,.3,1) both;animation-delay:calc(var(--i) * .07s)}
@keyframes arrive{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .arrive{animation:none} }

/* un pavé qu'on ouvre si on veut */
.repli{
  background:var(--card);border:1px solid var(--bd);border-radius:14px;
  margin-bottom:14px;overflow:hidden
}
.repli summary{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 15px;cursor:pointer;list-style:none;
  font-size:10.5px;text-transform:uppercase;letter-spacing:1.1px;color:var(--tx3);
  transition:background .15s
}
.repli summary::-webkit-details-marker{display:none}
.repli summary:hover{background:rgba(255,255,255,.03)}
.repli summary i{
  font-style:normal;font-size:11px;text-transform:none;letter-spacing:0;
  color:var(--or2);border:1px solid color-mix(in srgb, var(--or) 40%, transparent);
  border-radius:999px;padding:3px 11px;white-space:nowrap
}
.repli[open] summary i::before{content:"replier"}
.repli[open] summary i{font-size:0}
.repli[open] summary i::before{font-size:11px}
.repli-c{padding:0 15px 14px}
.repli-c .timeline{margin-top:0}

/* ============================================================
   38. LES MICRO-DÉCISIONS — deux secondes, deux boutons
   ============================================================ */
.micro{padding:26px 2px 8px;text-align:center}
.micro-t{
  display:inline-block;font-size:9.5px;text-transform:uppercase;letter-spacing:1.8px;
  color:var(--or);border:1px solid color-mix(in srgb, var(--or) 40%, transparent);
  border-radius:999px;padding:4px 12px;margin-bottom:22px
}
.micro-q{
  font-family:"Space Grotesk",sans-serif;font-size:21px;line-height:1.45;font-weight:600;
  color:var(--tx);margin-bottom:28px;max-width:400px;margin-left:auto;margin-right:auto
}
.opt.micro-o{text-align:center}
.opt.micro-o .ot{font-size:15.5px;justify-content:center}

/* le cadre d'un contrat, lisible d'un coup d'œil */
.ct-n{
  font-family:"Space Grotesk",sans-serif;font-size:16px;font-weight:700;
  margin-bottom:11px;padding-bottom:10px;border-bottom:1px solid var(--bd)
}
.ct-n i{font-style:normal;font-size:12px;font-weight:400;color:var(--or2)}

/* ============================================================
   39. LES INTERVIEWS — chaque titre a une ligne
   ============================================================ */
.itw-h{
  background:var(--card);border:1px solid var(--bd);border-left:3px solid var(--or);
  border-radius:0 14px 14px 0;padding:13px 15px;margin-bottom:16px
}
.itw-l{font-size:9.5px;text-transform:uppercase;letter-spacing:1.3px;color:var(--or2);margin-bottom:5px}
.itw-n{font-family:"Space Grotesk",sans-serif;font-size:19px;font-weight:700}
.itw-d{font-size:12.5px;color:var(--tx2);line-height:1.5;margin-top:6px}
.itw-e{
  background:color-mix(in srgb, var(--or) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--or) 35%, transparent);
  border-radius:11px;padding:11px 14px;margin-top:14px;font-size:13px;color:var(--tx2);line-height:1.5
}

/* ============================================================
   40. LES MOMENTS MAJEURS — plein écran, un chiffre qui monte
   ============================================================ */
.fete-fond.majeur{background:rgba(4,5,8,.9);backdrop-filter:blur(6px)}
.fete.majeure{
  max-width:min(420px,calc(100vw - 32px));padding:34px 26px 26px;
  background:radial-gradient(120% 90% at 50% 0%,#2e2417 0%,#151320 55%,#0e1016 100%);
  border-color:var(--or);box-shadow:0 0 90px rgba(242,182,60,.32),0 0 0 1px rgba(242,182,60,.2) inset;
  animation:feteIn .55s cubic-bezier(.2,1.25,.4,1)
}
.fete-k{
  display:inline-block;font-size:9.5px;letter-spacing:2px;text-transform:uppercase;font-weight:700;
  color:var(--or2);border:1px solid rgba(242,182,60,.5);border-radius:999px;padding:4px 12px;margin-bottom:16px
}
.fete.majeure .fete-i{font-size:44px;margin-bottom:6px;animation:none}
.fete-n{
  font-family:"Space Grotesk",sans-serif;font-size:clamp(32px,10.5vw,56px);font-weight:800;letter-spacing:-2px;line-height:1;white-space:nowrap;
  color:var(--or);font-variant-numeric:tabular-nums;margin:6px 0 10px;
  text-shadow:0 0 40px rgba(242,182,60,.45);animation:feteNum .9s cubic-bezier(.2,1.2,.4,1) both
}
@keyframes feteNum{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.fete.majeure .fete-t{font-size:26px;letter-spacing:.5px;color:var(--tx)}
.fete.majeure .fete-s{font-size:14px;margin-top:10px}
.fete-c{font-size:10.5px;color:var(--tx3);margin-top:22px;letter-spacing:.8px;text-transform:uppercase;animation:cineIn 1.6s ease both}
@media (prefers-reduced-motion:reduce){.fete,.fete-n,.fete-i,.fete-c{animation:none}}

/* ============================================================
   41. CE QUI A CHANGÉ — en tête de trimestre
   ============================================================ */
.chg{margin:-4px 0 16px}
.chg-l{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.chg-l .tag{font-size:11.5px;padding:5px 10px;border-radius:999px;border-bottom:0}
.chg-l .tag.q i{display:none}
.chg-s{background:var(--card);border:1px solid var(--bd);border-radius:12px;overflow:hidden}
.chg-s summary{
  display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 13px;cursor:pointer;list-style:none;
  font-size:12.5px;color:var(--tx2)
}
.chg-s summary::-webkit-details-marker{display:none}
.chg-s summary b{font-variant-numeric:tabular-nums;font-size:14px}
.chg-s summary::after{content:"▾";color:var(--tx3);font-size:11px;margin-left:-6px;transition:transform .2s}
.chg-s[open] summary::after{transform:rotate(180deg)}
.chg-d{padding:2px 13px 10px;border-top:1px solid var(--bd)}
.chg-d div{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:12.5px;border-bottom:1px solid rgba(37,41,54,.5)}
.chg-d div span{color:var(--tx2)} .chg-d div b{font-variant-numeric:tabular-nums}
.chg-d .chg-t{border-bottom:0;border-top:1px solid var(--bd2);margin-top:2px;padding-top:8px;font-weight:700}
.chg-o{
  display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-top:8px;
  font-size:12.5px;padding:8px 13px;border-radius:12px;
  background:rgba(180,135,247,.08);border:1px solid rgba(180,135,247,.25)
}
.chg-o span{color:var(--violet);font-weight:650} .chg-o i{font-style:normal;color:var(--tx2);text-align:right}

/* ============================================================
   42. LA CRÉATION — une histoire qui commence
   ============================================================ */
.crea .crea-h{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:22px}
.crea-n{font-size:10.5px;text-transform:uppercase;letter-spacing:1.3px;color:var(--tx3)}
.crea-pts{display:flex;gap:5px}
.crea-pts i{width:7px;height:7px;border-radius:50%;background:var(--bd2);display:block;transition:background .2s}
.crea-pts i.ok{background:var(--or)} .crea-pts i.on{background:var(--or2);box-shadow:0 0 0 3px rgba(242,182,60,.25)}
.crea-q{font-size:26px;font-weight:800;letter-spacing:-.6px;line-height:1.15;margin-bottom:12px;animation:cineIn .5s ease both}
.crea-l{font-size:12.5px;color:var(--tx3);margin-bottom:16px;line-height:1.5}
.crea-l b{color:var(--or2)}
.crea-nav{justify-content:space-between}
.crea-nav .btn.pt{flex:1;width:auto}
.crea .opt{min-height:52px}
.prof-a{
  font-family:"Space Grotesk",sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:700;
  color:var(--violet);margin-bottom:8px
}
.profil-c{border-color:rgba(180,135,247,.35)}
.btn.alea{margin-top:10px;text-align:left;padding:13px 16px}
.btn.alea i{display:block;font-style:normal;font-size:12px;font-weight:400;color:var(--tx3);margin-top:2px}
.menu-row .btn i{font-style:normal;font-weight:400;color:var(--tx3);font-size:12px}
.menu-her{
  display:block;width:100%;margin-top:12px;text-align:left;cursor:pointer;
  background:rgba(180,135,247,.09);border:1px solid rgba(180,135,247,.3);border-radius:12px;
  color:var(--tx2);font:inherit;font-size:13px;padding:11px 14px
}
.menu-her b{color:var(--violet)} .menu-her i{font-style:normal;color:var(--violet);float:right}
.menu .pitch{font-size:13.5px}
.violet{color:var(--violet)}

/* ============================================================
   43. LE CONTRAT SIGNÉ, LES GRAINES, LE BEEF RACONTÉ
   ============================================================ */
.ctr-big{
  background:linear-gradient(160deg,#241d14,#14161e);border:1px solid var(--or);border-radius:18px;
  padding:20px 18px;margin-bottom:14px;text-align:center;box-shadow:0 0 50px rgba(242,182,60,.14);
  animation:feteIn .45s cubic-bezier(.2,1.2,.4,1) both
}
.ctr-k{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--or2);font-weight:700}
.ctr-n{font-family:"Space Grotesk",sans-serif;font-size:24px;font-weight:800;margin:6px 0 14px}
.ctr-g{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ctr-g div{background:var(--bg);border:1px solid var(--bd);border-radius:10px;padding:10px 4px}
.ctr-g b{display:block;font-family:"Space Grotesk",sans-serif;font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
.ctr-g span{display:block;font-size:9px;letter-spacing:.6px;text-transform:uppercase;color:var(--tx3);margin-top:3px}
.ctr-w{margin-top:12px;font-size:12.5px;color:var(--or2);line-height:1.5;text-align:left;
  background:rgba(242,182,60,.08);border-radius:10px;padding:9px 12px}
@media (max-width:400px){.ctr-g{grid-template-columns:repeat(2,1fr)}}
.graine-av{
  font-size:13px;color:var(--tx2);line-height:1.5;margin-bottom:12px;padding:10px 13px;
  background:rgba(180,135,247,.08);border-left:3px solid var(--violet);border-radius:0 10px 10px 0
}
.graine-av b{color:var(--violet)}
.beef-echo{font-size:12.5px;color:var(--tx2);line-height:1.5;margin:-4px 0 14px;padding:9px 12px;
  background:var(--card);border:1px dashed var(--bd2);border-radius:10px}
.beef-echo b{color:var(--tx);margin-right:4px}
.morceau-id{display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--bd);border-radius:11px;padding:10px 13px;margin-bottom:10px}
.mi-n{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:15px}
.mi-m{font-size:11.5px;color:var(--tx3)}

/* ============================================================
   44. LA TIMELINE, LES MORCEAUX QUI COMPTENT
   ============================================================ */
.tlc{position:relative}
.tlm2{display:grid;grid-template-columns:44px 22px 1fr;gap:0 8px;align-items:baseline;padding:7px 0;
  border-bottom:1px solid rgba(37,41,54,.55);font-size:13px}
.tlm2:last-child{border-bottom:0}
.tlm2 span{font-size:10.5px;color:var(--tx3);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
.tlm2 i{font-style:normal;font-size:13px;text-align:center}
.tlm2 b{font-weight:500;color:var(--tx2);line-height:1.45}
.tlm2.maj b{font-weight:650;color:var(--tx)}
.tlm2.maj span{color:var(--or)}
.mimp{padding:9px 0;border-bottom:1px solid rgba(37,41,54,.55)}
.mimp:last-of-type{border-bottom:0}
.mimp-h{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.mimp-n{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:14.5px}
.mimp-h b{font-size:12px;color:var(--or2);font-variant-numeric:tabular-nums;white-space:nowrap}
.mimp-d{font-size:12.5px;color:var(--tx2);margin-top:3px;line-height:1.45}
.fcl b .fcl-i{display:block;font-style:normal;font-weight:400;font-size:10.5px;color:var(--tx3)}

/* ============================================================
   45. LA FIN — ton histoire, puis ton héritage
   ============================================================ */
.fin-k{
  text-align:center;font-size:10.5px;letter-spacing:2.2px;text-transform:uppercase;font-weight:700;
  color:var(--or);margin:8px 0 14px
}
.fiche-a{font-family:"Space Grotesk",sans-serif;font-size:10.5px;letter-spacing:1.8px;text-transform:uppercase;font-weight:700;color:var(--violet);margin-top:3px}
.fiche-ph{font-size:14px;color:var(--tx2);margin-top:6px;line-height:1.5}
.fiche-l{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-top:12px}
.fiche-l .tag{font-size:11px;padding:4px 9px;border-radius:999px}
.obj-fin{border-radius:14px;padding:14px 16px;margin-bottom:16px;border:1px solid;display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center}
.obj-fin.ok{background:rgba(79,207,139,.08);border-color:rgba(79,207,139,.4)}
.obj-fin.ko{background:rgba(242,96,79,.08);border-color:rgba(242,96,79,.4)}
.obj-k{font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--tx3);grid-column:1/-1}
.obj-n{font-family:"Space Grotesk",sans-serif;font-size:17px;font-weight:700}
.obj-v{font-family:"Space Grotesk",sans-serif;font-size:19px;font-weight:800;white-space:nowrap}
.obj-fin.ok .obj-v{color:var(--vert)} .obj-fin.ko .obj-v{color:var(--rouge)}
.obj-d{grid-column:1/-1;font-size:12.5px;color:var(--tx2);line-height:1.45}
.obj-d i{font-style:normal;color:var(--tx3)}
.part-b2{width:100%;max-width:400px;margin-top:8px;color:var(--tx2)}
.her-fin{
  margin-top:26px;padding:20px 16px 6px;border-top:1px solid var(--bd);
  background:linear-gradient(180deg,rgba(180,135,247,.06),transparent);border-radius:18px 18px 0 0
}
.her-l{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.her-i{background:var(--card);border:1px solid rgba(180,135,247,.3);border-radius:12px;padding:11px 13px}
.her-i b{display:block;font-family:"Space Grotesk",sans-serif;font-size:13px;letter-spacing:1px;color:var(--violet)}
.her-i span{display:block;font-size:12.5px;color:var(--tx2);margin-top:3px;line-height:1.45}
.fin-actions{margin-top:22px}
.fin-actions .btn.grand{margin-bottom:10px}
.fin .repli .lp:first-child{padding-top:0}

/* ============================================================
   46. LE HALL OF FAME
   ============================================================ */
.hof{background:var(--card);border:1px solid var(--bd);border-radius:14px;margin-bottom:10px;overflow:hidden}
.hof summary{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:13px 15px;cursor:pointer;list-style:none}
.hof summary::-webkit-details-marker{display:none}
.hof-r{grid-column:1/-1;font-size:9px;letter-spacing:1.6px;text-transform:uppercase;color:var(--or);font-weight:700}
.hof-n{font-family:"Space Grotesk",sans-serif;font-size:17px;font-weight:800}
.hof-t{font-size:10.5px;font-weight:700;color:var(--or2);text-align:right;align-self:center;text-transform:uppercase;letter-spacing:.4px}
.hof-m{grid-column:1/-1;font-size:11.5px;color:var(--tx3)}
.hof-c{padding:0 15px 14px;border-top:1px solid var(--bd)}
.hof-s{font-size:15px;font-style:italic;font-weight:700;color:var(--violet);margin:12px 0 4px}
.hof-p{font-size:13px;color:var(--tx2);margin-bottom:10px}
.hof-l{margin-top:10px}
.hof-j{margin-top:12px;border-top:1px solid var(--bd);padding-top:6px}
.hof .fiche-g{margin-top:6px}
.hof .fiche-g div{text-align:center}

/* ============================================================
   47. LA COLLECTION DE BADGES
   ============================================================ */
.coll-h{text-align:center;margin-top:6px}
.coll-h b{font-family:"Space Grotesk",sans-serif;font-size:48px;font-weight:800;color:var(--or);letter-spacing:-2px;line-height:1}
.coll-h span{font-size:16px;color:var(--tx3);margin-left:4px}
.coll{background:var(--card);border:1px solid var(--bd);border-radius:14px;margin-bottom:10px;overflow:hidden}
.coll summary{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;padding:13px 15px;cursor:pointer;list-style:none}
.coll summary::-webkit-details-marker{display:none}
.coll-n{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:15px}
.coll-c{font-size:12px;color:var(--tx3)} .coll-c b{color:var(--tx);font-size:15px}
.coll-b{grid-column:1/-1;display:block;height:4px;border-radius:4px;background:#232734;overflow:hidden}
.coll-b b{display:block;height:100%;background:linear-gradient(90deg,var(--or),var(--or2))}
.coll-g{padding:6px 15px 14px;border-top:1px solid rgba(37,41,54,.6)}
.coll-g .bt{margin:8px 0}
.bg.neuf{border-color:var(--or);box-shadow:0 0 0 1px rgba(242,182,60,.4)}

/* ============================================================
   48. CLAVIER, DOIGTS, PETITS ÉCRANS
   ============================================================ */
.opt:focus-visible,.pm:focus-visible,.btn:focus-visible,.ph-nav button:focus-visible,.retour:focus-visible,summary:focus-visible,.menu-her:focus-visible{
  outline:2px solid var(--or2);outline-offset:2px
}
.opt{min-height:48px}
.btn{min-height:44px}
.ph-nav button{min-height:48px}
.tag.q{cursor:pointer}
@media (max-width:360px){
  .ph-main{padding:14px 11px 6px}
  .ctr-g{grid-template-columns:repeat(2,1fr)}
  .crea-q{font-size:22px}
  .fete.majeure .fete-t{font-size:22px}
  .fete-n{font-size:34px}
  .resume{grid-template-columns:repeat(2,1fr)}
  .tlm2{grid-template-columns:40px 20px 1fr}
}
/* téléphone couché : la barre du haut ne doit pas manger l'écran */
@media (max-height:480px) and (max-width:1079px){
  .ph-stats{display:none}
  .ph-top{padding-top:6px;padding-bottom:6px}
  .ph-fil{display:none}
}
/* tablette : le téléphone reste centré, un peu plus large */
@media (min-width:600px) and (max-width:1079px){
  .phone{max-width:520px;border-radius:0}
  .ph-nav{max-width:520px}
}

/* ============================================================
   49. V2 — LES CHOIX : ce que tu fais, puis ce que ça risque
   ============================================================ */
.oc{margin-top:7px;display:flex;flex-wrap:wrap;gap:3px}
.oc .tag{margin:0}
.od{margin-top:4px}
.opt{padding:13px 15px 12px}
/* ta situation, en tête de trimestre */
.sit{margin:0 0 14px;padding:12px 14px;background:linear-gradient(135deg,#171522,var(--card));border:1px solid var(--bd);border-radius:14px}
.sit-k{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:1.3px;color:var(--or);margin-bottom:6px}
.sit p{font-size:14px;line-height:1.5;color:var(--tx);margin:0}
.sit p+p{margin-top:5px;color:var(--tx2)}
/* le premier mot du résultat */
.accroche{text-align:center;padding:18px 8px 6px;animation:cineIn .5s ease both}
.accroche b{display:block;font-family:"Space Grotesk",sans-serif;font-size:30px;font-weight:800;letter-spacing:-.6px;line-height:1.05}
.accroche span{display:block;font-size:13.5px;color:var(--tx2);margin-top:8px}
.accroche.ok b{color:var(--vert)} .accroche.ko b{color:var(--rouge)} .accroche.mi b{color:var(--or2)}
/* ça te rattrape */
.rattrape{padding:34px 6px 18px;text-align:center}
.rat-k{display:inline-block;font-family:"Space Grotesk",sans-serif;font-size:22px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--violet);margin-bottom:22px;animation:cineIn .5s ease both}
.rat-1{font-size:17px;line-height:1.6;color:var(--tx);animation:cineIn .7s ease both}
.rat-1 b{color:var(--violet)}
.rat-2{font-size:14px;line-height:1.6;color:var(--tx2);margin-top:16px;font-style:italic;animation:cineIn 1s ease both}

/* ============================================================
   50. V2 — LE DERNIER CHAPITRE, LE TOURNANT, LE MORCEAU SIGNATURE
   ============================================================ */
.cine-k{font-size:10.5px;letter-spacing:2.2px;text-transform:uppercase;color:var(--or);font-weight:700;margin-bottom:22px}
.cine-0{font-family:"Space Grotesk",sans-serif;font-size:34px;font-weight:800;letter-spacing:-.8px;color:var(--tx);margin-bottom:16px;animation:cineIn .9s ease both}
.cine-tr{text-align:left;background:var(--card);border:1px solid rgba(180,135,247,.4);border-radius:16px;padding:18px 18px;animation:cineIn .7s ease both}
.cine-trt{font-family:"Space Grotesk",sans-serif;font-size:19px;font-weight:700;line-height:1.35;margin:8px 0 12px;color:var(--tx)}
.cine-trs{font-size:14.5px;line-height:1.6;color:var(--tx2)}
.cine-skip{flex:0 0 auto;min-width:0}
.tourn{border-color:rgba(180,135,247,.4);background:linear-gradient(160deg,#1c1726,var(--card))}
.tourn-a{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--violet);margin-bottom:4px}
.tourn-t{font-family:"Space Grotesk",sans-serif;font-size:17px;font-weight:700;line-height:1.35}
.tourn-s{font-size:13.5px;color:var(--tx2);line-height:1.55;margin-top:8px}
.sig{border-color:rgba(242,182,60,.4)}
.sig-n{font-family:"Space Grotesk",sans-serif;font-size:24px;font-weight:800;letter-spacing:-.5px;line-height:1.15}
.sig-m{font-size:12px;color:var(--tx3);margin-top:4px}
.sig-e{font-family:"Space Grotesk",sans-serif;font-size:30px;font-weight:800;color:var(--or);margin-top:10px;line-height:1;font-variant-numeric:tabular-nums}
.sig-e span{font-size:12px;color:var(--tx3);font-weight:400;font-family:Inter,sans-serif;margin-left:4px}
.sig-d{font-size:13.5px;color:var(--tx2);margin-top:8px;line-height:1.5}
.sig .mimp{margin-top:6px}
.part-row{margin-top:8px}
.part-row .btn{width:auto}
.part-tx{margin-top:10px;text-align:left}
.part-tx pre{white-space:pre-wrap;font:13px/1.55 Inter,sans-serif;color:var(--tx2);margin:0}

/* ============================================================
   51. V2 — TON ŒUVRE : les projets comme des objets
   ============================================================ */
.oeuvre-a{margin-bottom:16px}
.oeuvre-a .recit{margin-bottom:6px}
.oeuvre-l{font-size:12px;color:var(--tx3);line-height:1.5}
.oeuvre-bt{margin:6px 0 10px}
.proj{background:var(--card);border:1px solid var(--bd);border-radius:14px;margin-bottom:8px;overflow:hidden;border-left-width:3px}
.proj.ok{border-left-color:var(--vert)} .proj.ko{border-left-color:var(--rouge)}
.proj summary{padding:12px 14px;cursor:pointer;list-style:none}
.proj summary::-webkit-details-marker{display:none}
.proj-h{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
.proj-n{font-family:"Space Grotesk",sans-serif;font-size:16px;font-weight:700}
.proj-m{font-size:11.5px;color:var(--tx3);margin-top:3px}
.proj-b{display:grid;grid-template-columns:1fr 28px 1fr 28px;gap:6px;align-items:center;margin-top:8px}
.proj-b span{height:4px;border-radius:4px;background:#232734;overflow:hidden;display:block}
.proj-b span i{display:block;height:100%;background:var(--gris)} .proj-b span i.or{background:var(--or)} .proj-b span i.bleu{background:var(--bleu)}
.proj-b b{font-size:11px;font-variant-numeric:tabular-nums;color:var(--tx2)}
.proj-c{padding:4px 14px 14px;border-top:1px solid var(--bd)}
.proj-p{font-size:13px;font-style:italic;color:var(--tx2);margin:10px 0 8px}
.proj-g{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:8px 0 6px}
.proj-g div{background:var(--bg);border:1px solid var(--bd);border-radius:9px;padding:7px 6px;text-align:center}
.proj-g span{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.6px;color:var(--tx3)}
.proj-g b{font-size:14px;font-variant-numeric:tabular-nums}
.proj-une{font-size:13px;font-style:italic;color:var(--tx);border-left:3px solid var(--or);padding:6px 10px;margin:10px 0}
.proj-tl{display:flex;flex-wrap:wrap;gap:4px;margin-top:10px}
.proj-tl span{font-size:11.5px;background:var(--bg);border:1px solid var(--bd);border-radius:8px;padding:4px 8px;color:var(--tx2)}
.proj-tl span.single{border-color:rgba(242,182,60,.4);color:var(--tx)}
.proj-tl span.sig{border-color:var(--or);color:var(--or2)}
.proj-tl i{font-style:normal;color:var(--tx3)} .proj-tl em{font-style:normal;color:var(--violet);font-weight:650} .proj-tl small{color:var(--tx3);font-size:10px}
@media (max-width:360px){.proj-g{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   52. V2 — LA SCÈNE, LE HALL OF FAME, LE MENU
   ============================================================ */
.bouge-l{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:13px;border-bottom:1px solid rgba(37,41,54,.6)}
.bouge-l:last-child{border-bottom:0}
.bouge-l span{color:var(--tx2);flex-shrink:0} .bouge-l b{text-align:right}
.riv-traj{display:flex;align-items:center;gap:12px;margin:2px 0 10px}
.spark{flex-shrink:0;max-width:55%}
.riv-traj span{font-size:11.5px;color:var(--tx3)}
.hof{display:block;cursor:pointer;padding:14px 15px;transition:border-color .15s,transform .15s}
.hof:hover{border-color:var(--bd2);transform:translateY(-1px)}
.hof.or{border-color:rgba(242,182,60,.55);background:linear-gradient(160deg,#241d14,var(--card));box-shadow:0 0 30px rgba(242,182,60,.1)}
.hof.argent{border-color:rgba(180,135,247,.4)}
.hof-top{display:flex;justify-content:space-between;gap:10px;margin-bottom:4px}
.hof-d{font-size:10.5px;color:var(--tx3)}
.hof-n{font-family:"Space Grotesk",sans-serif;font-size:20px;font-weight:800;letter-spacing:-.3px}
.hof.or .hof-n{color:var(--or2)}
.hof-t{font-size:11px;font-weight:700;color:var(--tx2);text-transform:uppercase;letter-spacing:.5px;margin-top:4px}
.hof-t i{font-style:normal;color:var(--violet)}
.hof-g{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px}
.hof-g span{font-size:10px;color:var(--tx3);text-transform:uppercase;letter-spacing:.5px}
.hof-g b{display:block;font-size:15px;color:var(--tx);font-variant-numeric:tabular-nums;letter-spacing:0;text-transform:none}
.hof-m{font-size:11.5px;color:var(--tx3);margin-top:8px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.hof-go{font-style:normal;color:var(--or2)}
.hof .hof-s{margin:2px 0 0;font-size:13px}
.how{padding:12px 0;border-bottom:1px solid var(--bd)}
.how:last-of-type{border-bottom:0}
.how b{display:block;font-family:"Space Grotesk",sans-serif;font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:var(--or);margin-bottom:5px}
.how p{font-size:14.5px;line-height:1.55;color:var(--tx)}
.menu .sign{font-size:15px;color:var(--tx2);letter-spacing:.2px}
.menu-sec{margin-top:14px}
.menu-sec .btn{padding:12px 8px;font-size:13px}
.menu-how{margin-top:10px}
.menu-p{font-size:13px;color:var(--tx3);text-align:center;margin-top:18px;line-height:1.55}
.menu .btn.grand+.btn.grand{margin-top:10px}
@media (max-width:360px){.menu-sec{flex-wrap:wrap}.menu-sec .btn{flex:1 1 45%}}

/* ============================================================
   53. V2 — FIL HIÉRARCHISÉ, FLASH, ÉPOQUE, CONTRATS, CRÉATION
   ============================================================ */
.fil-e.fil-imp .fx,.ffe.fil-imp .ffx{color:var(--tx)}
.fil-e.fil-maj,.ffe.fil-maj{background:rgba(242,182,60,.07);border-radius:8px;padding:5px 7px;margin:2px -7px}
.fil-e.fil-maj .fx,.ffe.fil-maj .ffx{color:var(--or2);font-weight:600}
.fil-e.fil-gr,.ffe.fil-gr{background:rgba(180,135,247,.08);border-radius:8px;padding:5px 7px;margin:2px -7px}
.fil-e.fil-gr .fx,.ffe.fil-gr .ffx{color:var(--violet);font-weight:600}
.flash{
  position:fixed;top:calc(12px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:900;
  font-family:"Space Grotesk",sans-serif;font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  background:rgba(20,22,30,.96);border:1px solid var(--bd2);color:var(--tx2);padding:8px 16px;border-radius:999px;
  box-shadow:0 10px 30px rgba(0,0,0,.5);animation:flashIn 2.4s ease both;pointer-events:none;white-space:nowrap;max-width:calc(100vw - 32px);overflow:hidden;text-overflow:ellipsis
}
@media (max-width:1079px){.flash{top:calc(64px + env(safe-area-inset-top))}}
.flash.or{color:var(--or2);border-color:rgba(242,182,60,.5)} .flash.violet{color:var(--violet);border-color:rgba(180,135,247,.5)} .flash.riv{color:var(--rouge);border-color:rgba(242,96,79,.45)}
@keyframes flashIn{0%{opacity:0;transform:translate(-50%,-8px)}12%{opacity:1;transform:translate(-50%,0)}80%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.flash{animation:none}}
.epoque-h{text-align:center;padding:18px 6px 14px}
.epoque-n{font-family:"Space Grotesk",sans-serif;font-size:30px;font-weight:800;letter-spacing:-.6px;color:var(--or);line-height:1.1;margin-top:4px}
.epoque-s{font-size:14px;color:var(--tx2);margin-top:8px;font-style:italic}
.veut{display:block;color:var(--or2);font-weight:500;margin-top:5px;font-size:12.5px}
.ct-v{font-size:12.5px;color:var(--or2);padding:8px 0 4px;line-height:1.45}
.crea-s{font-size:14px;color:var(--tx2);line-height:1.5;margin:-4px 0 12px}
.chg-g{margin-top:8px;font-size:12.5px;color:var(--violet);padding:8px 13px;border-radius:12px;background:rgba(180,135,247,.07);border:1px dashed rgba(180,135,247,.3)}
.riv-res p{font-size:13.5px;color:var(--tx);line-height:1.55;margin:0 0 6px}
.detail-fin{margin-top:6px}
.fin-actions .fin-k{margin-top:6px}
.fin-actions .recit.centre{max-width:400px;margin:0 auto 14px}

/* ============================================================
   v4 — POURQUOI, LE MONDE, LE RIVAL, LES PRESQUE, LES ACTES
   Même grammaire que le reste : cartes sombres, or pour ce qui
   compte, violet pour le rival et les défis. Rien qui clignote.
   ============================================================ */
/* pourquoi : l'explication du résultat, juste sous les notes */
.pourquoi{background:linear-gradient(135deg,#191622,var(--card));border:1px solid var(--bd2);border-left:3px solid var(--or);
  border-radius:0 12px 12px 0;padding:12px 14px;margin-bottom:12px}
.pq-k,.reac-k,.presque-k,.duel-k,.pct-k{font-size:9.5px;text-transform:uppercase;letter-spacing:1.3px;color:var(--or);margin-bottom:6px;font-weight:650}
.pourquoi p{font-size:14px;line-height:1.5;color:var(--tx);margin:0}
.pourquoi p + p{margin-top:7px;padding-top:7px;border-top:1px solid var(--bd)}
/* le monde réagit */
.reac{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:12px 14px;margin-bottom:12px}
.reac-l{display:grid;grid-template-columns:96px 1fr;gap:10px;padding:7px 0;border-top:1px solid var(--bd);font-size:13px;line-height:1.45}
.reac-l:first-of-type{border-top:0}
.reac-l b{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--tx3);padding-top:2px;overflow-wrap:anywhere}
.reac-l span{color:var(--tx2)}
.reac-riv b{color:var(--violet)} .reac-riv span{color:var(--tx)}
@media (max-width:360px){.reac-l{grid-template-columns:1fr;gap:2px}}
/* à ça du but */
.presque{background:rgba(180,135,247,.08);border:1px dashed rgba(180,135,247,.45);border-radius:12px;padding:12px 14px;margin-bottom:12px}
.presque .presque-k{color:var(--violet);font-size:12px;letter-spacing:1px}
.presque p{font-size:14px;color:var(--tx);margin:0}
.presque p + p{margin-top:6px}
.presque b{color:var(--or2)}
.presque-s{font-size:12.5px !important;color:var(--tx3) !important;margin-top:9px !important;font-style:italic}
/* le duel avec le rival */
.duel{border:1px solid var(--bd2);border-radius:12px;padding:12px 14px;margin-bottom:12px;text-align:center;background:var(--card)}
.duel.ok{border-color:rgba(79,207,139,.45)} .duel.ko{border-color:rgba(242,96,79,.45)}
.duel .duel-k{color:var(--violet)}
.duel-g{display:flex;align-items:center;justify-content:center;gap:18px;margin:6px 0}
.duel-g div{display:flex;flex-direction:column;min-width:84px}
.duel-g b{font-family:"Space Grotesk",sans-serif;font-size:26px;font-weight:800}
.duel-g span{font-size:11px;color:var(--tx3);text-transform:uppercase;letter-spacing:.8px}
.duel-g i{font-style:normal;color:var(--tx3);font-size:12px}
.duel.ok .duel-g div:first-child b{color:var(--vert)} .duel.ko .duel-g div:last-child b{color:var(--rouge)}
.duel p{font-size:13px;color:var(--tx2);margin:0}
/* les actes */
.acte-b{font-size:9.5px;text-transform:uppercase;letter-spacing:1.4px;color:var(--tx3);margin:-2px 0 10px}
.acte-h{text-align:center;padding:26px 6px 16px}
.acte-k{font-size:11px;text-transform:uppercase;letter-spacing:1.4px;color:var(--tx3)}
.acte-n{font-family:"Space Grotesk",sans-serif;font-size:15px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:var(--or);margin-top:14px;animation:cineIn .5s ease both}
.acte-t{font-family:"Space Grotesk",sans-serif;font-size:34px;font-weight:800;letter-spacing:-.8px;line-height:1.05;margin-top:4px;animation:cineIn .8s ease both}
@media (prefers-reduced-motion:reduce){.acte-n,.acte-t{animation:none}}
/* pendant ce temps */
.pct{margin:0 0 14px;padding:10px 13px;border:1px solid var(--bd);border-radius:12px;background:var(--bg2)}
.pct .pct-k{color:var(--tx3)}
.pct p{font-size:13px;color:var(--tx2);margin:4px 0 0;display:flex;gap:8px}
.pct p i{font-style:normal;flex:none}
/* le journal du monde */
.journal .jr{display:grid;grid-template-columns:22px 1fr auto;gap:8px;align-items:start;padding:7px 0;border-top:1px solid var(--bd);font-size:13px;line-height:1.45}
.journal .jr:first-of-type{border-top:0}
.jr-t{color:var(--tx2)} .jr-moi .jr-t{color:var(--tx)}
.jr-k{font-size:9.5px;text-transform:uppercase;letter-spacing:.7px;padding-top:3px;white-space:nowrap}
.jr-k.or{color:var(--or)} .jr-k.violet{color:var(--violet)} .jr-k.bleu{color:var(--bleu)} .jr-k.vert{color:var(--vert)}
/* le contrat, lu en entier */
.ct-lu{background:var(--card);border:1px solid var(--bd2);border-radius:10px;padding:10px 12px;font-size:13px;color:var(--tx2);margin-bottom:12px}
.ct-lu b{color:var(--tx)}
/* les modes de création, le défi */
.opt.mode-o .ot{font-size:16px}
.err-m{color:var(--rouge);font-size:13px;margin-top:9px}
#code-in{text-transform:uppercase;letter-spacing:2px;font-family:"Space Grotesk",monospace;text-align:center}
.apercu .ap-riv,.defi-recu .ap-riv{display:flex;gap:12px;align-items:center}
.ap-riv span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--tx3)}
.ap-riv b{display:block;font-family:"Space Grotesk",sans-serif;font-size:21px;color:var(--violet);line-height:1.2}
.ap-riv i{display:block;font-style:normal;font-size:12.5px;color:var(--tx2)}
.ap-riv .portrait{flex:none;border-radius:12px}
/* le grand moment : un bouton pour le partager */
.fete-p{margin-top:18px;font-size:13px;padding:10px 16px;border-color:rgba(242,182,60,.45);color:var(--or2);background:rgba(242,182,60,.08)}
.fete-p:hover{background:rgba(242,182,60,.16)}
.fete-fond.sombre .fete.majeure{box-shadow:0 0 70px rgba(242,96,79,.28);border-color:rgba(242,96,79,.45)}
.fete-fond.sombre .fete-n{color:var(--rouge);text-shadow:0 0 40px rgba(242,96,79,.4)}
/* la fin : les moments à partager, les défis, la comparaison, le code */
.epq{display:grid;grid-template-columns:28px 1fr 44px;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--bd)}
.epq:first-of-type{border-top:0}
.epq-i{font-size:21px;text-align:center}
.epq-t b{display:block;font-size:13.5px;letter-spacing:.3px}
.epq-t i{display:block;font-style:normal;font-size:11.5px;color:var(--tx3)}
.epq-b{padding:9px 0;font-size:16px;min-height:44px}
.defis-fin .dfn{display:flex;gap:11px;align-items:flex-start;padding:10px 12px;border:1px solid var(--dc);border-radius:11px;margin-bottom:8px;background:rgba(255,255,255,.02)}
.dfn > span{font-size:24px;line-height:1}
.dfn b{display:block;font-size:13px;letter-spacing:.4px;color:var(--dc)}
.dfn i{display:block;font-style:normal;font-size:13px;color:var(--tx2);margin-top:2px}
.rumeur{margin-top:12px;padding:10px 12px;border-left:3px solid var(--violet);background:rgba(180,135,247,.07);border-radius:0 10px 10px 0}
.rumeur span{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:1.2px;color:var(--violet)}
.rumeur p{margin:4px 0 0;font-size:14px;font-style:italic;color:var(--tx)}
.cmp-h,.cmp-l{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:8px;align-items:baseline;padding:6px 0;border-top:1px solid var(--bd);font-size:13px}
.cmp-h{border-top:0;font-size:12px}
.cmp-h b{overflow-wrap:anywhere} .cmp-h i{display:block;font-style:normal;font-size:10.5px;color:var(--tx3);font-weight:400}
.cmp-l span{color:var(--tx2)} .cmp-l b{font-variant-numeric:tabular-nums}
.defi-monde{text-align:center;margin:18px 0 8px;padding:16px 14px;border:1px solid rgba(180,135,247,.35);border-radius:14px;background:linear-gradient(135deg,#1a1624,#121019)}
.defi-monde .fin-k{color:var(--violet)}
.code-m{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;margin:10px 0 4px}
.code-m b{font-family:"Space Grotesk",monospace;font-size:19px;letter-spacing:2px;color:var(--tx);background:var(--bg);border:1px solid var(--bd2);border-radius:10px;padding:10px 12px;user-select:all;overflow-wrap:anywhere}
.code-m .btn{min-height:44px}
/* focus clavier visible partout */
.opt:focus-visible,.btn:focus-visible,[data-go]:focus-visible,.pm:focus-visible,.q:focus-visible{outline:2px solid var(--or2);outline-offset:2px}
/* la cohérence du disque en construction */
.coh{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:11px;color:var(--tx3);flex-wrap:wrap}
.coh span{text-transform:uppercase;letter-spacing:.9px;font-size:9.5px}
.coh i{display:flex;gap:3px}
.coh i b{width:14px;height:6px;border-radius:3px;background:var(--bd2)}
.coh i b.on{background:var(--or)}
.coh em{font-style:normal;color:var(--tx2)}
.heure{font-family:"Space Grotesk",monospace;font-size:12px;letter-spacing:1.4px;color:var(--tx3);margin:2px 0 6px;text-transform:uppercase}
/* une explication, une seule fois */
.appris{display:flex;gap:9px;align-items:flex-start;background:rgba(106,168,245,.07);border:1px solid rgba(106,168,245,.3);border-radius:11px;padding:10px 12px;margin-bottom:12px;font-size:13px;line-height:1.5;color:#c3d7f5}
.appris b{flex:none}
.btn.btn-alea{margin-top:10px;background:linear-gradient(135deg,#221a33,#191422);border-color:rgba(180,135,247,.5);color:var(--tx)}
.btn.btn-alea i{display:block;font-style:normal;font-weight:400;font-size:12px;color:var(--tx2);margin-top:3px}
.btn.btn-alea:hover{border-color:var(--violet)}

/* ============================================================
   v5 — BARZ LIFE : résultat en un coup d'œil, rythme rapide
   ============================================================ */
.res1{text-align:center;padding:18px 12px 14px;margin:2px 0 10px;border-radius:var(--r);background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--bd);animation:cineIn .45s ease both}
.res1.ok{border-color:rgba(79,207,139,.45);box-shadow:0 0 0 1px rgba(79,207,139,.12),0 10px 30px -18px rgba(79,207,139,.5)}
.res1.ko{border-color:rgba(242,96,79,.45)}
.res1.mi{border-color:rgba(242,182,60,.4)}
.res1-k{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--tx3)}
.res1-t{font-family:"Space Grotesk",Inter,sans-serif;font-size:22px;font-weight:700;letter-spacing:-.4px;margin:2px 0 10px;line-height:1.2}
.res1-n{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.res1-n>div{background:rgba(255,255,255,.03);border-radius:10px;padding:8px 2px}
.res1-n b{display:block;font-family:"Space Grotesk",Inter,sans-serif;font-size:28px;line-height:1.1;color:var(--or2)}
.res1-n span{font-size:11px;color:var(--tx2)}
.res1-a{margin-top:10px;font-family:"Space Grotesk",Inter,sans-serif;font-weight:700;font-size:15px;letter-spacing:.6px}
.res1.ok .res1-a{color:var(--vert)} .res1.ko .res1-a{color:var(--rouge)} .res1.mi .res1-a{color:var(--or)}
.dls{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px;justify-content:center}
.dl{display:inline-flex;align-items:center;gap:5px;font-size:13px;padding:6px 10px;border-radius:999px;background:var(--card);border:1px solid var(--bd);color:var(--tx2)}
.dl i,.dl em{font-style:normal}
.dl.up b{color:var(--vert)} .dl.down b{color:var(--rouge)}
.faits{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:0 0 10px}
.fait{font-size:12.5px;padding:5px 10px;border-radius:8px;background:var(--card);border:1px solid var(--bd);color:var(--tx)}
.fait.or{border-color:rgba(242,182,60,.5);color:var(--or2)} .fait.ok{color:var(--vert)} .fait.ko{color:var(--rouge)}
.duel-l,.presque-l{font-size:14px;padding:10px 12px;border-radius:10px;margin:0 0 10px;background:rgba(180,135,247,.09);border:1px solid rgba(180,135,247,.35)}
.duel-l.ok{background:rgba(79,207,139,.08);border-color:rgba(79,207,139,.35)} .duel-l.ko{background:rgba(242,96,79,.08);border-color:rgba(242,96,79,.35)}
.presque-l{background:rgba(242,182,60,.08);border-color:rgba(242,182,60,.4)}
.prev{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:12.5px;padding:8px 12px;margin:0 0 10px;border-radius:10px;background:var(--card);border:1px solid var(--bd);color:var(--tx2)}
.prev>span{width:100%;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--tx3)}
.prev b{font-weight:600;color:var(--tx)} .prev em{font-style:normal;font-weight:700;margin-left:auto}
.prev.ko{border-color:rgba(242,96,79,.45)}
.reste-l{font-size:13px;color:var(--tx2);margin:-4px 0 10px}
.rg{margin:0 0 10px}
.rg-k{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--tx3);margin-bottom:5px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:inherit;font-size:13px;color:var(--tx);background:var(--card);border:1px solid var(--bd2);border-radius:10px;padding:8px 10px;min-height:44px;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;line-height:1.2;text-align:left}
.chip i{font-style:normal;font-size:11px;color:var(--tx3);margin-top:2px}
.chip.on{border-color:var(--or);background:rgba(242,182,60,.12);color:var(--or2)}
.chip.off{opacity:.4;pointer-events:none}
.chip:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.res1 + .dls + .faits{margin-top:-2px}
/* le monde, avant la carrière */
.monde-code{font-family:"Space Grotesk",ui-monospace,monospace;font-size:34px;font-weight:700;letter-spacing:3px;text-align:center;color:var(--or2);padding:14px 8px;margin:6px 0 10px;border:1px dashed rgba(242,182,60,.5);border-radius:var(--r);background:rgba(242,182,60,.05);user-select:all}
.monde-l{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
.monde-in{display:flex;gap:8px}
.monde-in input{flex:1;min-width:0}
.rythme{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 12px}
.rythme .chip{align-items:center;text-align:center;padding:10px 6px}
.cmp{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:6px}
.cmp th,.cmp td{padding:7px 6px;border-bottom:1px solid var(--bd);text-align:center}
.cmp th:first-child,.cmp td:first-child{text-align:left;color:var(--tx2);font-weight:500}
.cmp th{font-family:"Space Grotesk",Inter,sans-serif;color:var(--or2)}
.cmp td.w{color:var(--vert);font-weight:650}
@media (max-width:380px){.res1-n b{font-size:23px}.monde-code{font-size:28px;letter-spacing:2px}.chip{font-size:12.5px;padding:7px 8px}}
.band{padding:10px 12px;margin:0 0 10px;border-radius:10px;background:var(--card);border-left:3px solid var(--or);animation:cineIn .35s ease both}
.band.ko{border-left-color:var(--rouge)}
.band-k{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--tx3);margin-bottom:3px}
.band p{font-size:14px;line-height:1.45}
.band .deltas{margin-top:6px}
details.plus{margin-top:2px}
details.plus>summary{list-style:none;cursor:pointer;font-size:13px;color:var(--tx2);padding:10px 12px;border:1px dashed var(--bd2);border-radius:10px;text-align:center;min-height:44px}
details.plus>summary::-webkit-details-marker{display:none}
details.plus[open]>summary{margin-bottom:8px}
details.plus .opt{margin-top:8px}
.cmp-box{margin-top:10px;text-align:left}
.cmp-box input{font:inherit;font-size:13px;width:100%;padding:10px;border-radius:10px;border:1px solid var(--bd2);background:var(--bg);color:var(--tx);min-height:44px}
.cmp-e{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;font-size:12.5px}
.cmp-e div{display:flex;flex-direction:column;gap:3px}
.cmp-e span{color:var(--tx2)}
.ap-riv.mini{justify-content:center;margin:0 0 6px}
.rattrape.court{padding:12px 14px;margin-bottom:10px}
.rattrape.court .rat-1{font-size:14.5px;margin:4px 0 0}

/* v6 — les célébrations se lisent : barre de temps, pause au survol, et les importantes attendent */
.fete-bar{height:3px;border-radius:2px;background:rgba(255,255,255,.08);margin:14px auto 0;max-width:180px;overflow:hidden}
.fete-bar i{display:block;height:100%;background:var(--or);transform-origin:left;animation:feteBar linear forwards}
.fete-fond.pause .fete-bar i{animation-play-state:paused}
@keyframes feteBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.fete-ok{margin-top:16px;min-width:180px}
@media (prefers-reduced-motion: reduce){.fete-bar i{animation:none}}
.fete .fete-ok,.fete .fete-p{display:block;margin-left:auto;margin-right:auto}
.rappel{display:block;font-size:12.5px;color:var(--violet);margin:0 0 8px;font-style:italic}
.galere{font-family:"Space Grotesk",Inter,sans-serif;font-weight:700;color:var(--rouge);font-size:14px;letter-spacing:.3px;margin:0 0 6px}
.riv-l{display:flex;gap:10px;align-items:center;padding:8px 10px;margin:0 0 10px;border-radius:10px;background:rgba(180,135,247,.07);border:1px solid rgba(180,135,247,.3)}
.riv-l svg,.riv-l img{flex:0 0 auto;border-radius:8px}
.riv-l b{color:var(--violet);font-family:"Space Grotesk",Inter,sans-serif} .riv-l i{font-style:normal;font-size:11px;color:var(--tx3)}
.riv-l span{display:block;font-size:13.5px;color:var(--tx)}
/* v6.1 — écran de résultat sur mobile : le résultat, l'impact, le pourquoi, puis Continuer, sans faire défiler */
@media (max-width:480px){
  .res1{padding:10px 10px 9px;margin:0 0 8px}
  .res1-k{font-size:10px}
  .res1-t{font-size:19px;margin:0 0 6px}
  .res1-n{gap:5px}
  .res1-n>div{padding:4px 2px}
  .res1-n b{font-size:22px}
  .res1-n span{font-size:10.5px}
  .res1-a{margin-top:6px;font-size:13.5px}
  .dls .fait{font-size:11.5px;padding:4px 8px;border-radius:999px}
  .dls{gap:4px;margin-bottom:8px;flex-wrap:nowrap}
  .dls .dl em{display:none}
  .dls .dl{flex:0 1 auto;white-space:nowrap}
  .dl{font-size:12px;padding:4px 8px;gap:3px}
  .faits{gap:4px;margin-bottom:8px}
  .fait{font-size:11.5px;padding:3px 8px}
  .pourquoi{padding:10px 12px}
  .pourquoi p{font-size:13.5px;line-height:1.45}
  .riv-l{padding:6px 9px;margin-bottom:8px;gap:8px}
  .riv-l svg,.riv-l img{width:28px;height:28px}
  .riv-l span{font-size:12.5px;line-height:1.4}
}
.dls .fait{border-radius:999px}
.flash.long{white-space:normal;text-align:center;border-radius:14px;width:max-content;line-height:1.45;letter-spacing:1px}

/* Hawkins Games — retour au hub, discret, sous le menu */
.menu-hub{display:block;margin:22px auto 4px;width:max-content;max-width:100%;padding:10px 6px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx3);text-decoration:none}
.menu-hub:hover,.menu-hub:focus-visible{color:var(--tx)}