/* TRUvector.net · styles des pages simples (fiche d'un jeu, carnet) */
:root{--nuit:#0B0820;--nuit2:#151038;--facade:#1B1542;--joint:#2C2362;--violet:#8F6BFF;--cyan:#3FE0F5;--or:#F2C14E;--lampe:#FFD98A;--encre:#ECE8FF;--brume:#9C94C8;
  --titre:"Chakra Petch","Segoe UI",system-ui,sans-serif;--texte:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--nuit);color:var(--encre);font:400 1.0625rem/1.7 var(--texte)}
a{color:var(--lampe)}
:focus-visible{outline:2px solid var(--or);outline-offset:3px}
h1,h2,h3{font-family:var(--titre);line-height:1.12;margin:0}
.wrap{max-width:62rem;margin:0 auto;padding:0 1.4rem}
.barre{display:flex;gap:1.4rem;align-items:center;padding:1.2rem 0;font:600 .95rem var(--titre);white-space:nowrap}
.barre a{color:var(--brume);text-decoration:none}.barre a:hover{color:var(--encre)}
.barre .fin{margin-left:auto}
.teinte-or{--t:var(--or);--t2:var(--lampe)}.teinte-cyan{--t:var(--cyan);--t2:#8FEFFA}.teinte-violet{--t:var(--violet);--t2:#B9A2FF}
.fiche-haut{padding:3rem 0 2.6rem;display:grid;grid-template-columns:minmax(0,1fr) 16rem;gap:2.4rem;align-items:center;border-bottom:1px solid var(--joint)}
.fiche-haut .sur{font:600 .9rem var(--titre);color:var(--t);margin:0 0 .8rem;letter-spacing:.08em;text-transform:uppercase}
.fiche-haut h1{font-size:clamp(2.4rem,6vw,4rem)}
.fiche-haut .accroche{font-size:1.2rem;color:var(--brume);margin:1rem 0 1.6rem;max-width:34rem}
.fenetre{width:12rem;height:15rem;border:8px solid #0E0A26;position:relative;justify-self:center;
  background:radial-gradient(ellipse at 50% 30%,#FFF6DD 0%,var(--t2) 40%,var(--t) 100%);box-shadow:0 0 60px color-mix(in srgb,var(--t) 55%,transparent),0 0 160px color-mix(in srgb,var(--t) 25%,transparent)}
.fenetre::before{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,transparent calc(50% - 4px),#0E0A26 calc(50% - 4px) calc(50% + 4px),transparent calc(50% + 4px)),
  linear-gradient(0deg,transparent calc(42% - 4px),#0E0A26 calc(42% - 4px) calc(42% + 4px),transparent calc(42% + 4px))}
.fenetre.chantier{background:repeating-linear-gradient(45deg,#0D0A24 0 14px,#16103a 14px 18px);box-shadow:none}
.fenetre video,.fenetre img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.jouer{display:inline-flex;gap:.8rem;align-items:center;text-decoration:none;color:#1a1208;font:700 1.1rem var(--titre);padding:.95rem 1.6rem;
  background:radial-gradient(ellipse at 50% 30%,#FFF6DD,var(--t2) 45%,var(--t));border:4px solid #0E0A26;box-shadow:0 0 30px color-mix(in srgb,var(--t) 45%,transparent)}
.jouer.inactif{background:var(--nuit2);color:var(--brume);box-shadow:none;border-color:var(--joint);cursor:default}
.infos{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:1.4rem;padding:2.4rem 0;border-bottom:1px solid var(--joint)}
.infos div{border-left:3px solid var(--t);padding-left:1rem}
.infos dt{color:var(--brume);font-size:.9rem}.infos dd{margin:.2rem 0 0;font-weight:700}
.bloc{padding:2.6rem 0;border-bottom:1px solid var(--joint)}
.bloc h2{font-size:1.6rem;margin-bottom:1rem}
.bloc p{max-width:40rem;margin:0 0 1rem}
.succes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(12rem,42vw),1fr));gap:.7rem}
.succes li{border:2px solid #0E0A26;background:#0D0A24;padding:.7rem .9rem;color:var(--brume)}
.succes li b{display:block;font:600 1rem var(--titre);color:var(--brume)}
.succes li small{font-size:.82rem}
.succes li.on{background:color-mix(in srgb,var(--t) 12%,#0D0A24);border-color:color-mix(in srgb,var(--t) 55%,transparent)}
.succes li.on b{color:var(--t2)}
.jeu-carnet{padding:2.2rem 0;border-bottom:1px solid var(--joint)}
.jeu-carnet .tete{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;align-items:baseline;margin-bottom:1rem}
.jeu-carnet h2{font-size:1.5rem}
.jeu-carnet .compte{color:var(--brume)}
.jauge{height:6px;background:var(--nuit2);margin:0 0 1.2rem;max-width:30rem}
.jauge i{display:block;height:100%;background:var(--t);box-shadow:0 0 12px var(--t)}
.btn-sec{background:none;border:1px solid var(--joint);color:var(--brume);padding:.45rem .9rem;cursor:pointer;font:inherit;font-size:.9rem}
.btn-sec:hover{color:var(--encre);border-color:var(--brume)}
footer{padding:2rem 0 3rem;color:var(--brume);font-size:.95rem}
@media (max-width:760px){.barre{gap:1rem;font-size:.88rem}.succes li{padding:.6rem .7rem}.succes li b{font-size:.92rem}.fiche-haut{grid-template-columns:1fr;padding-top:1.6rem}.fenetre{width:9rem;height:11rem;order:-1;justify-self:start}}

/* affiche du jeu dans la fenêtre : le croisillon reste par-dessus */
.fenetre.avec-affiche{width:16rem;height:13rem;background:#07051A}
.fenetre.avec-affiche::before{z-index:2}
.fenetre.avec-affiche img{filter:saturate(1.1) brightness(1.08)}
@media (max-width:760px){.fenetre.avec-affiche{width:100%;max-width:22rem;height:12rem}}