/* Pexal : système visuel du site (aucune ressource externe, aucun cookie) */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0e0a1a;
  --surface:#171224;
  --surface-2:#1e1730;
  --line:#2c2344;
  --text:#ece7f7;
  --muted:#9d93bd;
  --faint:#6f6591;
  --violet:#a06bff;
  --violet-deep:#6d3df5;
  --gold:#f5b942;
  --green:#4ade80;
  --red:#f87171;
  --radius-step:polygon(0 8px,8px 8px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 8px),0 calc(100% - 8px));
  --font-display:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,"Liberation Mono",monospace;
  --max:72rem;
}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-display);
  background:var(--bg);color:var(--text);
  line-height:1.65;font-size:1.02rem;
  min-height:100vh;display:flex;flex-direction:column;
  overflow-x:hidden;
}
body::before{ /* grain discret, statique */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.05;
  background-image:radial-gradient(rgba(160,107,255,.55) 1px,transparent 1.4px);
  background-size:26px 26px;
}
main{flex:1;position:relative;z-index:1}
::selection{background:var(--violet-deep);color:#fff}
a{color:var(--violet)}
img,svg{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:2px}

/* ── Conteneur ── */
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(1.1rem,4vw,2.5rem)}
section.block{padding:clamp(2.5rem,6vw,4.5rem) 0}
.prose{max-width:46rem}
.prose p+p,.prose ul+p,.prose p+ul{margin-top:1rem}
.prose ul{padding-left:1.2rem}
.prose li{margin:.35rem 0}
.prose li::marker{color:var(--violet)}

/* ── En-tête ── */
.site-head{
  position:sticky;top:0;z-index:50;
  background:rgba(14,10,26,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-head .wrap{display:flex;align-items:center;gap:1.4rem;min-height:4.2rem}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--text);margin-right:auto}
.brand-logo{width:30px;height:30px;image-rendering:pixelated;border-radius:7px;flex:none}
.foot-brand .brand-logo{width:26px;height:26px}
.brand-name{font-weight:800;font-size:1.25rem;letter-spacing:-.02em}
.brand-name em{font-style:normal;color:var(--violet)}
.nav{display:flex;align-items:center;gap:.2rem}
.nav a{
  color:var(--muted);text-decoration:none;font-weight:600;font-size:.95rem;
  padding:.55rem .8rem;border-radius:.5rem;white-space:nowrap;
}
.nav a:hover{color:var(--text);background:var(--surface-2)}
.nav a[aria-current="page"]{color:var(--text)}
.nav a[aria-current="page"]::before{content:"| ";color:var(--violet);font-weight:800}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:.5rem;color:var(--text);font-size:1.2rem;padding:.35rem .7rem;cursor:pointer}
@media(max-width:62rem){
  .burger{display:block}
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    background:var(--surface);border-bottom:1px solid var(--line);padding:.7rem 1.1rem 1rem;gap:.1rem;
  }
  .nav.open{display:flex}
}

/* ── Boutons ── */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-weight:800;font-size:1rem;text-decoration:none;cursor:pointer;border:0;
  padding:.85rem 1.5rem;color:#14101f;background:var(--violet);
  clip-path:var(--radius-step);
}
.btn:hover{background:#b183ff}
.btn.ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 2px var(--line)}
.btn.ghost:hover{box-shadow:inset 0 0 0 2px var(--violet);color:#fff}
.btn.gold{background:var(--gold)}
.btn.gold:hover{background:#ffc95e}
.btn-row{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.6rem}

/* ── Hero ── */
.hero{padding:clamp(3rem,8vw,6rem) 0 clamp(2.5rem,6vw,4rem)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:center}
@media(max-width:62rem){.hero-grid{grid-template-columns:1fr}}
.kicker{display:flex;align-items:center;gap:.6rem;color:var(--muted);font-weight:600;font-size:.95rem;margin-bottom:1rem}
.kicker .bar{color:var(--violet);font-weight:800}
.dot{width:.6rem;height:.6rem;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
.dot.off{background:var(--red);box-shadow:0 0 10px var(--red)}
.hero h1{
  font-size:clamp(2.4rem,6vw,4.3rem);line-height:1.04;font-weight:800;letter-spacing:-.025em;
  margin-bottom:1.1rem;text-wrap:balance;
}
.hero h1 .vox{color:var(--violet)}
.lead{font-size:clamp(1.05rem,2vw,1.25rem);color:var(--muted);max-width:34rem}
.copy-ip{
  display:flex;align-items:stretch;gap:0;margin-top:1.8rem;max-width:30rem;
  background:var(--surface);border:1px solid var(--line);clip-path:var(--radius-step);
}
.copy-ip code{
  font-family:var(--font-mono);font-size:1.05rem;padding:.85rem 1.1rem;flex:1;
  color:var(--gold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.copy-ip button{
  font-family:var(--font-display);font-weight:800;font-size:.9rem;cursor:pointer;
  background:var(--surface-2);color:var(--text);border:0;border-left:1px solid var(--line);
  padding:0 1.2rem;
}
.copy-ip button:hover{background:var(--violet-deep);color:#fff}
.copy-hint{font-size:.85rem;color:var(--faint);margin-top:.5rem}

/* Voxel hero : trois cubes CSS purs */
.voxel{display:flex;justify-content:center;padding:1rem 0}
.cube-stack{display:grid;gap:0;filter:drop-shadow(0 24px 48px rgba(109,61,245,.35))}
.cube{width:9rem;height:9rem;position:relative}
.cube i{position:absolute;inset:0}
.cube .top{background:linear-gradient(135deg,#c4a4ff,#a06bff);clip-path:polygon(50% 0,100% 28%,100% 72%,50% 100%,0 72%,0 28%)}
.cube .left{background:linear-gradient(180deg,#6d3df5,#4b26b8);clip-path:polygon(0 28%,50% 50%,50% 100%,0 72%)}
.cube .right{background:linear-gradient(180deg,#8a5cf0,#5d31d6);clip-path:polygon(100% 28%,50% 50%,50% 100%,100% 72%)}
.cube.gold .top{background:linear-gradient(135deg,#ffe1a1,#f5b942)}
.cube.gold .left{background:linear-gradient(180deg,#c78d1e,#8f620d)}
.cube.gold .right{background:linear-gradient(180deg,#e0a83a,#a97816)}
.cube.small{width:6.5rem;height:6.5rem;margin:-1.4rem auto 0}
.cube.tiny{width:4.5rem;height:4.5rem;margin:-1rem auto 0;opacity:.9}
@media (prefers-reduced-motion:no-preference){
  .hero-grid{animation:rise .5s ease-out both}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}

/* ── Sections ── */
.sec-head{margin-bottom:1.8rem;max-width:46rem}
.sec-head h2{font-size:clamp(1.6rem,3.4vw,2.3rem);letter-spacing:-.02em;line-height:1.15}
.sec-head h2::before{content:"| ";color:var(--violet);font-weight:800}
.sec-head p{color:var(--muted);margin-top:.5rem}

/* Cartes */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:1.1rem}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:.9rem;
  padding:1.4rem;display:flex;flex-direction:column;gap:.6rem;text-decoration:none;color:var(--text);
}
a.card:hover{border-color:var(--violet)}
.card h3{font-size:1.15rem;letter-spacing:-.01em}
.card p{color:var(--muted);font-size:.94rem;flex:1}
.card .meta{font-family:var(--font-mono);font-size:.78rem;color:var(--faint)}
.card .go{color:var(--violet);font-weight:700;font-size:.92rem}
.gem{width:2.6rem;height:2.6rem;flex:none}
.card-head{display:flex;align-items:center;gap:.8rem}

/* Bandeau statut */
.status-band{background:var(--surface);border-block:1px solid var(--line)}
.status-band .wrap{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;align-items:center;padding-top:1.1rem;padding-bottom:1.1rem}
.stat{display:flex;flex-direction:column}
.stat b{font-family:var(--font-mono);font-size:1.3rem;color:var(--text)}
.stat span{font-size:.82rem;color:var(--muted)}

/* Liste de faits (pages jeux) */
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1rem;margin:1.8rem 0}
.fact{background:var(--surface);border:1px solid var(--line);border-radius:.8rem;padding:1rem 1.2rem}
.fact b{display:block;font-size:.82rem;color:var(--faint);font-weight:600;margin-bottom:.15rem}
.fact span{font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:.55rem;margin:1.2rem 0}
.chip{
  font-family:var(--font-mono);font-size:.82rem;color:var(--text);
  background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:.3rem .9rem;
}

/* Tableau grades */
table.grades{width:100%;border-collapse:collapse;margin:1.6rem 0;font-size:.95rem}
table.grades th,table.grades td{text-align:left;padding:.8rem 1rem;border-bottom:1px solid var(--line);vertical-align:top}
table.grades th{color:var(--faint);font-weight:600;font-size:.85rem}
table.grades td:first-child{font-weight:800;white-space:nowrap}
.grade-mvp{color:var(--gold)}
.grade-vipp{color:var(--violet)}
.grade-vip{color:#7dd3fc}
.grade-mini{color:var(--green)}
@media(max-width:46rem){
  table.grades thead{display:none}
  table.grades tr{display:block;border:1px solid var(--line);border-radius:.8rem;margin-bottom:.9rem;padding:.4rem .6rem}
  table.grades td{display:block;border:0;padding:.35rem .6rem}
}

/* FAQ */
details.faq{background:var(--surface);border:1px solid var(--line);border-radius:.8rem;margin-bottom:.8rem}
details.faq summary{cursor:pointer;font-weight:700;padding:1rem 1.3rem;list-style:none;display:flex;gap:.7rem;align-items:baseline}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::before{content:"+";color:var(--violet);font-weight:800;font-size:1.2rem;line-height:1}
details.faq[open] summary::before{content:"–"}
details.faq .answer{padding:0 1.3rem 1.2rem 2.7rem;color:var(--muted)}
details.faq .answer p+p{margin-top:.6rem}

/* Légal */
.legal h1{font-size:clamp(1.9rem,4vw,2.8rem);letter-spacing:-.02em;margin:.6rem 0 1rem}
.legal h2{font-size:1.3rem;margin:2.2rem 0 .6rem}
.legal h2::before{content:"| ";color:var(--violet);font-weight:800}
.legal p,.legal li{color:#cfc8e6}
.legal .updated{color:var(--faint);font-size:.88rem;margin-top:2.5rem}
.backlink{display:inline-block;margin-bottom:1rem;color:var(--muted);text-decoration:none;font-weight:600}
.backlink:hover{color:var(--text)}

/* Pied de page */
footer.site-foot{border-top:1px solid var(--line);background:#0b0716;position:relative;z-index:1}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:2rem;padding:3rem 0 2rem}
@media(max-width:62rem){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:36rem){.foot-grid{grid-template-columns:1fr}}
.foot-grid h3{font-size:.85rem;color:var(--faint);font-weight:600;margin-bottom:.8rem}
.foot-grid ul{list-style:none}
.foot-grid li{margin:.35rem 0}
.foot-grid a{color:var(--muted);text-decoration:none}
.foot-grid a:hover{color:var(--text)}
.foot-brand p{color:var(--muted);font-size:.9rem;margin-top:.7rem;max-width:22rem}
.foot-base{border-top:1px solid var(--line);padding:1.1rem 0;display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;align-items:center;font-size:.85rem;color:var(--faint)}
.foot-base nav{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
.foot-base a{color:var(--faint)}
.foot-base a:hover{color:var(--text)}

/* Page héros compacte (sous-pages) */
.page-hero{padding:clamp(2.2rem,5vw,3.5rem) 0 .5rem}
.page-hero h1{font-size:clamp(2rem,5vw,3.2rem);letter-spacing:-.025em;line-height:1.08;text-wrap:balance}
.page-hero h1::before{content:"| ";color:var(--violet)}
.page-hero .lead{margin-top:.8rem}
.crumb{font-size:.85rem;color:var(--faint);margin-bottom:.8rem}
.crumb a{color:var(--faint)}