/* OUI MON GUIDE SUPREME */
:root{
  --fond:#100e0c; --papier:#1a1714; --papier2:#221d19; --ligne:#3a322b;
  --or:#c9a227; --or-clair:#e8ce6a; --bordeaux:#a12a3c; --bordeaux-clair:#d24b5e;
  --texte:#ece4d7; --texte2:#a89c8c; --texte3:#6f665c;
  --ok:#4caf72; --half:#e0a83c; --ko:#e0483c;
  --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:var(--fond); color:var(--texte);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  font-size:16px; line-height:1.5; overflow:hidden;
}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea{font-family:inherit;font-size:inherit}
.serif{font-family:Georgia,"Times New Roman",serif}

/* ---------- ecrans ---------- */
.ecran{display:none;height:100dvh;overflow:hidden}
.ecran.on{display:flex;flex-direction:column}

/* ---------- accueil ---------- */
#accueil,#salon{align-items:center;justify-content:center;overflow-y:auto;padding:24px 16px}
.boite{width:100%;max-width:430px;background:var(--papier);border:1px solid var(--ligne);
  border-radius:var(--r);padding:26px 22px}
.logo{text-align:center;margin-bottom:26px}
.logo h1{font-family:Georgia,serif;font-size:33px;line-height:1.1;color:var(--or);
  letter-spacing:.5px;font-weight:700}
.logo h1 small{display:block;font-size:15px;color:var(--bordeaux-clair);letter-spacing:3px;
  margin-bottom:6px;font-weight:400}
.logo p{color:var(--texte2);font-size:14px;margin-top:10px;font-style:italic}
label{display:block;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--texte3);margin:16px 0 6px}
.champ{width:100%;background:var(--fond);border:1px solid var(--ligne);border-radius:10px;
  padding:12px 14px;color:var(--texte);outline:none}
.champ:focus{border-color:var(--or)}
.champ.code{text-align:center;letter-spacing:10px;font-size:26px;font-family:Georgia,serif;
  text-transform:uppercase;padding-left:24px}
.btn{display:block;width:100%;background:var(--bordeaux);color:#fff;border-radius:10px;
  padding:13px;font-weight:700;letter-spacing:.4px;margin-top:14px;transition:.15s}
.btn:hover{background:var(--bordeaux-clair)}
.btn.or{background:var(--or);color:#20180a}
.btn.or:hover{background:var(--or-clair)}
.btn.vide{background:none;border:1px solid var(--ligne);color:var(--texte2)}
.btn.vide:hover{border-color:var(--or);color:var(--or)}
.btn:disabled{opacity:.4;cursor:default}
.sep{display:flex;align-items:center;gap:12px;color:var(--texte3);font-size:12px;margin:20px 0}
.sep::before,.sep::after{content:"";flex:1;height:1px;background:var(--ligne)}
.err{background:#3a1a1e;border:1px solid var(--bordeaux);color:#f0b8c0;padding:10px 12px;
  border-radius:8px;font-size:14px;margin-top:14px}
.reglage{display:flex;align-items:flex-start;gap:10px;margin-top:14px;
  background:var(--papier2);padding:12px;border-radius:10px}
.reglage input{margin-top:4px;accent-color:var(--or)}
.reglage b{display:block;font-size:14px}
.reglage span{font-size:12.5px;color:var(--texte2);line-height:1.35}

/* ---------- salon ---------- */
.codebox{text-align:center;background:var(--papier2);border:1px dashed var(--or);
  border-radius:12px;padding:16px;margin-bottom:18px}
.codebox .c{font-family:Georgia,serif;font-size:44px;letter-spacing:12px;color:var(--or);
  padding-left:12px}
.codebox small{color:var(--texte2);font-size:12.5px}
.jlist{display:flex;flex-direction:column;gap:8px;margin:6px 0 4px}
.jrow{display:flex;align-items:center;gap:10px;background:var(--papier2);
  border:1px solid var(--ligne);border-radius:10px;padding:10px 12px}
.jrow .pt{width:9px;height:9px;border-radius:50%;background:var(--texte3);flex:none}
.jrow.pret .pt{background:var(--ok)}
.jrow .nom{font-weight:700}
.jrow .rl{font-size:11.5px;color:var(--or);letter-spacing:1px;text-transform:uppercase}
.jrow .st{margin-left:auto;font-size:12px;color:var(--texte3)}
.vide{color:var(--texte3);font-style:italic;text-align:center;padding:14px;
  border:1px dashed var(--ligne);border-radius:10px}

/* ---------- jeu : entete ---------- */
#jeu{display:none}
#jeu.on{display:flex;flex-direction:column}
.top{flex:none;background:var(--papier);border-bottom:1px solid var(--ligne);padding:8px 12px 6px}

.prog{position:relative;height:22px;margin-bottom:8px;cursor:pointer}
.prog .rail{position:absolute;top:8px;left:0;right:0;height:6px;background:var(--papier2);
  border-radius:3px;overflow:hidden;display:flex;gap:2px}
.prog .seg{flex:1;background:#2a2420;border-radius:2px;position:relative;overflow:hidden}
.prog .seg i{position:absolute;inset:0 100% 0 0;background:var(--or);transition:right .4s}
.prog .chaos{position:absolute;top:8px;left:0;height:6px;background:var(--ko);opacity:.5;
  border-radius:3px;transition:width .4s;pointer-events:none}
.prog .cur{position:absolute;top:2px;width:3px;height:18px;background:var(--texte);
  border-radius:2px;transition:left .4s;box-shadow:0 0 6px rgba(0,0,0,.8)}
.prog .mark{position:absolute;top:4px;width:2px;height:14px;opacity:.75}
.prog .mark.rec{background:var(--or-clair)}
.prog .mark.monde{background:#7f9bd6}
.prog .lbl{position:absolute;top:-1px;font-size:8.5px;letter-spacing:1px;color:var(--texte3);
  transform:translateX(-50%);white-space:nowrap}

.ligne1{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--texte3);
  letter-spacing:1px;text-transform:uppercase;margin-bottom:7px}
.ligne1 .ere{color:var(--or);font-weight:700}
.ligne1 .chrono{margin-left:auto;font-family:Georgia,serif;font-size:19px;color:var(--texte);
  letter-spacing:0;min-width:34px;text-align:right}
.ligne1 .chrono.urgent{color:var(--ko)}

.jauges{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.jg{background:var(--papier2);border:1px solid var(--ligne);border-radius:9px;padding:5px 6px;
  text-align:center;position:relative;overflow:hidden}
.jg .n{font-size:8.5px;letter-spacing:.6px;color:var(--texte3);white-space:nowrap;overflow:hidden}
.jg .v{font-family:Georgia,serif;font-size:18px;line-height:1.15}
.jg .v.f{font-size:11px;font-family:inherit;color:var(--texte2);font-style:italic;padding:4px 0 3px}
.jg .bar{position:absolute;bottom:0;left:0;height:3px;background:var(--or);transition:width .4s}
.jg.danger{border-color:var(--ko)}
.jg.danger .v{color:var(--ko)}
.jg.danger .bar{background:var(--ko)}
.jg.flou{opacity:.72;border-style:dashed}

.duo{display:flex;align-items:center;gap:8px;margin-top:7px;font-size:11px;color:var(--texte3)}
.duo .lien{flex:1;height:3px;background:var(--papier2);border-radius:2px;overflow:hidden}
.duo .lien i{display:block;height:100%;background:var(--ok);transition:width .4s,background .4s}
.duo b{color:var(--texte2);font-weight:600}

/* ---------- jeu : corps ---------- */
.corps{flex:1;overflow-y:auto;padding:14px 12px 16px;display:flex;flex-direction:column;gap:12px}
.corps::-webkit-scrollbar{width:6px}
.corps::-webkit-scrollbar-thumb{background:var(--ligne);border-radius:3px}

.modebar{display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:10px;
  font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;font-weight:700}
.modebar.conseil{background:#1e2c33;color:#7fc4d8;border:1px solid #2f4a55}
.modebar.decret{background:#331e1e;color:#e08a8a;border:1px solid #55302f}
.modebar.schisme{background:#2b2233;color:#bb90dd;border:1px solid #48345a}
.modebar.epreuve{background:#332c1e;color:#dcbb6a;border:1px solid #554a2f}
.modebar .aide{margin-left:auto;font-size:10px;letter-spacing:.4px;text-transform:none;
  opacity:.75;font-weight:400;text-align:right}

.carte{background:var(--papier);border:1px solid var(--ligne);border-radius:var(--r);
  padding:16px 15px;position:relative}
.carte.jalon{border-color:var(--or);box-shadow:0 0 0 1px rgba(201,162,39,.18)}
.carte .tete{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.carte .emo{font-size:27px;line-height:1}
.carte .cat{font-size:10.5px;letter-spacing:2px;color:var(--or);text-transform:uppercase}
.carte .perso{font-size:13px;color:var(--texte2);font-style:italic}
.carte .txt{font-family:Georgia,serif;font-size:17px;line-height:1.6}
.carte .att{font-family:Georgia,serif;font-size:17px;line-height:1.6;color:var(--texte2);
  font-style:italic;text-align:center;padding:16px 6px}
.carte .att .pt{display:block;font-size:30px;margin-bottom:10px;opacity:.5}

.opts{display:flex;flex-direction:column;gap:8px}
.opt{display:block;width:100%;text-align:left;background:var(--papier);
  border:1px solid var(--ligne);border-radius:12px;padding:11px 13px;transition:.12s}
.opt:hover:not(:disabled){border-color:var(--texte2);transform:translateX(2px)}
.opt .d{font-size:10.5px;font-weight:700;letter-spacing:1.4px;display:block;margin-bottom:2px}
.opt .t{font-size:15.5px;line-height:1.35}
.opt .r{font-size:11.5px;color:var(--texte3);font-style:italic;margin-top:4px}
.opt.moi{border-color:var(--or);background:#241f16}
.opt.lui{box-shadow:inset 3px 0 0 var(--bordeaux-clair)}
.opt.accord{border-color:var(--ok);background:#16251c}
.opt:disabled{opacity:.5;cursor:default}
.opt .tags{float:right;font-size:10px;color:var(--texte3);letter-spacing:1px}

.avis{font-size:12.5px;color:var(--texte3);text-align:center;font-style:italic;padding:2px}
.supp{width:100%;border:1px solid var(--bordeaux);color:var(--bordeaux-clair);
  border-radius:10px;padding:11px;font-weight:700;letter-spacing:1px;font-size:13px}
.supp:disabled{opacity:.35}
.suppflash{position:fixed;inset:0;background:rgba(161,42,60,.34);z-index:60;
  display:flex;align-items:center;justify-content:center;pointer-events:none;
  font-family:Georgia,serif;font-size:min(9vw,44px);color:#fff;text-align:center;
  text-shadow:0 3px 20px #000;animation:flash 1.4s ease-out forwards}
@keyframes flash{0%{opacity:0;transform:scale(.9)}12%{opacity:1;transform:scale(1)}
  70%{opacity:1}100%{opacity:0}}

/* ---------- outcome ---------- */
.res{background:var(--papier);border:1px solid var(--ligne);border-radius:var(--r);padding:18px 16px}
.cachet{text-align:center;margin-bottom:12px}
.cachet .rond{display:inline-block;border:3px solid;border-radius:50%;padding:9px 20px;
  font-family:Georgia,serif;font-size:15px;letter-spacing:3px;transform:rotate(-7deg);
  animation:tampon .4s cubic-bezier(.2,1.6,.4,1)}
@keyframes tampon{0%{transform:rotate(-24deg) scale(2.4);opacity:0}
  60%{transform:rotate(-5deg) scale(.95);opacity:1}100%{transform:rotate(-7deg) scale(1)}}
.cachet.ok .rond{color:var(--ok);border-color:var(--ok)}
.cachet.half .rond{color:var(--half);border-color:var(--half)}
.cachet.ko .rond{color:var(--ko);border-color:var(--ko)}
.res .rtxt{font-family:Georgia,serif;font-size:16.5px;line-height:1.6;margin-bottom:12px}
.res .qui{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:5px}
.deltas{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.dl{font-size:12.5px;padding:3px 9px;border-radius:20px;background:var(--papier2);
  border:1px solid var(--ligne)}
.dl.p{color:var(--ok);border-color:#2c4636}
.dl.n{color:var(--ko);border-color:#4a2b28}
.presque{background:#2a2317;border:1px solid #55462a;color:var(--or-clair);border-radius:10px;
  padding:9px 12px;font-size:13.5px;font-style:italic;margin-top:10px}
.rue{border-left:3px solid var(--ligne);padding:2px 0 2px 12px;margin-top:14px;
  color:var(--texte2);font-style:italic;font-size:14px}
.reveal{display:flex;gap:8px;margin-bottom:12px}
.reveal>div{flex:1;background:var(--papier2);border:1px solid var(--ligne);border-radius:10px;
  padding:9px;text-align:center}
.reveal .q{font-size:10px;letter-spacing:1.2px;color:var(--texte3);text-transform:uppercase}
.reveal .a{font-size:13.5px;margin-top:3px}
.reveal.acc>div{border-color:var(--ok)}
.reveal.des>div{border-color:var(--ko)}

/* ---------- journal officiel ---------- */
.jo{background:#e8e2d4;color:#14110f;border-radius:var(--r);padding:20px 18px;
  font-family:Georgia,serif}
.jo .ent{text-align:center;border-bottom:3px double #14110f;padding-bottom:9px;margin-bottom:14px}
.jo .ent .t{font-size:12px;letter-spacing:5px;text-transform:uppercase}
.jo .ent .d{font-size:11px;color:#5c5346;margin-top:3px;font-family:inherit}
.jo h2{font-size:27px;line-height:1.15;text-align:center;margin:8px 0 16px;letter-spacing:-.5px}
.jo h3{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:#7a2230;
  border-bottom:1px solid #b9b0a0;padding-bottom:3px;margin:18px 0 9px}
.jo p{font-size:15px;line-height:1.55}
.jog{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;text-align:center}
.jog .c{border:1px solid #b9b0a0;border-radius:8px;padding:6px 3px}
.jog .n{font-size:8.5px;letter-spacing:.5px;color:#5c5346;font-family:sans-serif}
.jog .v{font-size:16px}
.jog .e{font-size:11px;font-family:sans-serif}
.jog .e.p{color:#1d6b3f}.jog .e.n{color:#a02020}
.enc{border:2px solid #7a2230;border-radius:10px;padding:11px 13px;margin-top:9px}
.enc .q{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#7a2230;
  font-family:sans-serif}
.enc .w{font-size:16px;line-height:1.4;margin-top:4px}
.enc .k{font-size:12px;color:#5c5346;font-family:sans-serif;margin-top:3px}
.barres{display:flex;flex-direction:column;gap:7px}
.brow{display:flex;align-items:center;gap:8px}
.brow .who{font-size:10px;letter-spacing:1px;width:74px;font-family:sans-serif;color:#5c5346;
  text-transform:uppercase;flex:none}
.brow .bs{flex:1;display:flex;height:13px;border-radius:7px;overflow:hidden;background:#cfc7b6}
.brow .bs i{display:block;height:100%}
.carnet li{font-size:14px;margin-left:17px;margin-bottom:3px}
.jo .cite{font-style:italic;font-size:16px;text-align:center;padding:6px 10px}

/* ---------- fin ---------- */
.fin{background:var(--papier);border:1px solid var(--or);border-radius:var(--r);padding:24px 18px;
  text-align:center}
.fin .rang{font-family:Georgia,serif;font-size:60px;color:var(--or);line-height:1}
.fin h2{font-family:Georgia,serif;font-size:26px;margin:6px 0 4px}
.fin .st{font-size:12px;letter-spacing:2px;color:var(--bordeaux-clair);text-transform:uppercase;
  margin-bottom:14px}
.fin .txt{font-family:Georgia,serif;font-size:16px;line-height:1.6;text-align:left;
  color:var(--texte);margin-bottom:16px}
.fin .score{font-family:Georgia,serif;font-size:42px;color:var(--or)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.mini{background:var(--papier2);border:1px solid var(--ligne);border-radius:10px;padding:10px;
  text-align:left}
.mini .q{font-size:9.5px;letter-spacing:1.4px;color:var(--texte3);text-transform:uppercase}
.mini .a{font-size:14px;margin-top:2px}
.mini.ok{border-color:var(--ok)}.mini.no{border-color:var(--ligne);opacity:.65}

/* ---------- barre du bas ---------- */
.bas{flex:none;display:flex;gap:7px;padding:8px 10px;background:var(--papier);
  border-top:1px solid var(--ligne);align-items:center}
.icb{width:42px;height:42px;flex:none;border:1px solid var(--ligne);border-radius:11px;
  font-size:18px;display:flex;align-items:center;justify-content:center;transition:.15s}
.icb:hover{border-color:var(--or)}
.icb.actif{background:var(--ok);border-color:var(--ok);color:#0d1a12}
.icb.rouge{background:var(--bordeaux);border-color:var(--bordeaux);color:#fff}
.icb .pastille{position:absolute;margin:-22px 0 0 22px;background:var(--bordeaux);color:#fff;
  border-radius:9px;font-size:10px;padding:0 5px;line-height:15px}
.bas .msg{flex:1;background:var(--fond);border:1px solid var(--ligne);border-radius:11px;
  padding:11px 13px;color:var(--texte);outline:none;min-width:0}
.bas .msg:focus{border-color:var(--or)}

/* ---------- chat ---------- */
.chat{position:fixed;right:0;bottom:0;top:0;width:min(340px,86vw);background:var(--papier);
  border-left:1px solid var(--ligne);z-index:50;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .22s}
.chat.on{transform:translateX(0)}
.chat .h{padding:13px 14px;border-bottom:1px solid var(--ligne);display:flex;align-items:center;
  gap:8px;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--or)}
.chat .h button{margin-left:auto;font-size:20px;color:var(--texte3)}
.chat .l{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:9px}
.msgline .w{font-size:10.5px;letter-spacing:1px;color:var(--or);text-transform:uppercase}
.msgline .b{background:var(--papier2);border:1px solid var(--ligne);border-radius:10px;
  padding:8px 11px;font-size:14.5px;line-height:1.4;margin-top:2px}
.msgline.moi .w{color:var(--texte3)}
.msgline.moi .b{background:#241f16;border-color:#453a26}
.msgline.sys .b{background:none;border:none;padding:2px 0;color:var(--texte3);font-style:italic;
  font-size:13px}
.voile{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:49;display:none}
.voile.on{display:block}

.pied{text-align:center;font-size:11px;color:var(--texte3);margin-top:16px}
.pied b{color:var(--texte2)}
@media(max-width:400px){
  .jauges{gap:4px}.jg .v{font-size:16px}.carte .txt{font-size:16px}
  .logo h1{font-size:27px}
}