/* Alebora FR : feuille de style unique du site. */

:root{
  --bg:#0b0611;
  --bg-2:#150c1e;
  --bg-3:#1e1129;
  --bg-4:#2c1a3b;
  --line:rgba(232,184,74,.18);
  --line-soft:rgba(200,160,220,.10);
  --ink:#f8f0e6;
  --ink-dim:#d9cbbc;
  --muted:#9b87a9;
  --gold:#e8b84a;
  --gold-2:#f6d56a;
  --magenta:#c0246e;
  --pink:#ff4d7a;
  --plum:#7b3ff5;
  --grad:linear-gradient(115deg,#f6d56a 0%,#e8b84a 44%,#c0246e 100%);
  --grad-soft:linear-gradient(115deg,rgba(246,213,106,.16) 0%,rgba(232,184,74,.14) 48%,rgba(192,36,110,.16) 100%);
  --shadow:0 22px 54px rgba(0,0,0,.58);
  --shadow-sm:0 10px 26px rgba(0,0,0,.42);
  --radius:16px;
  --radius-sm:11px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.7;
  color:var(--ink-dim);
  background:var(--bg);
  background-image:
    radial-gradient(1000px 560px at 84% -8%,rgba(123,63,245,.18),transparent 62%),
    radial-gradient(820px 460px at 4% 6%,rgba(192,36,110,.16),transparent 64%),
    radial-gradient(700px 420px at 50% 108%,rgba(232,184,74,.07),transparent 66%);
  background-attachment:fixed;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-2);text-decoration:none}
a:hover{color:#fde9b0}
h1,h2,h3,h4{color:#fff;font-weight:750;line-height:1.22;margin:0 0 .6em;letter-spacing:-.015em}
h1{font-size:clamp(1.95rem,5vw,3.05rem)}
h2{font-size:clamp(1.5rem,3.2vw,2.15rem)}
h3{font-size:clamp(1.12rem,1.9vw,1.34rem)}
h4{font-size:1.03rem}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.1em;padding-left:1.15em}
li{margin-bottom:.45em}
strong,b{color:#fff;font-weight:700}
small{font-size:.86rem}
:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px;border-radius:5px}
::selection{background:var(--magenta);color:#fff}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.center{text-align:center}
.accent{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Structure ---------- */
.wrap,.wrap-narrow{width:min(1210px,100% - 2.2rem);margin-inline:auto}
/* Le texte courant occupe toute la largeur du conteneur : pas de bride de
   longueur de ligne, un paragraphe cale sur la moitie gauche laissait un
   grand vide a droite. */

/* Un conteneur imbrique dans un autre ne doit pas ajouter une seconde
   gouttiere, sinon le contenu se decale d'une demi-gouttiere par niveau. */
.wrap .wrap-narrow,.wrap-narrow .wrap,.wrap .wrap,.wrap-narrow .wrap-narrow{
  width:100%;margin-inline:0;
}

/* Rythme vertical : aucun bloc de contenu ne doit toucher le suivant.
   Les composants portent leur marge basse, le dernier enfant la reprend a
   zero pour ne pas gonfler le bas de section. */
.band .chips,
.band .table-scroll,
.band .verdict,
.band .pros-cons,
.band .steps,
.band .faq,
.band .grid,
.band .promos,
.band .provs,
.band .notice,
.band .form,
.band .cta-box{margin-bottom:clamp(1.2rem,2.2vw,1.7rem)}
.band .table-scroll + p,
.band .chips + p,
.band .pros-cons + p{margin-top:0}
.band > .wrap > *:last-child,
.band > .wrap-narrow > *:last-child,
.band .wrap-narrow > *:last-child{margin-bottom:0}

.band{padding:clamp(1.6rem,3vw,2.6rem) 0;position:relative}
/* Sections du lobby : rythme resserre, on enchaine les rangees sans blanc inutile. */
.band-tight{padding:clamp(.7rem,1.5vw,1.05rem) 0}
.band-alt{background:linear-gradient(180deg,rgba(30,17,41,0),rgba(30,17,41,.78) 12%,rgba(30,17,41,.78) 88%,rgba(30,17,41,0))}
/* margin-block et non le raccourci margin : sur les pages ou .band-head
   partage l element avec .wrap, le raccourci remettait margin-inline a 0
   et le bloc cessait d etre centre. */
.band-head{margin-block:0 clamp(1.1rem,2.2vw,1.7rem)}
.band-head.center{margin-inline:auto;text-align:center}
.band-head .kicker{
  display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-2);margin-bottom:.7rem;
}
.band-head h2{margin-bottom:.35rem}
.band-head p{color:var(--muted);margin-bottom:0}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.72rem 1.35rem;border-radius:999px;font-weight:700;font-size:.94rem;
  line-height:1.2;border:1px solid transparent;cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease;
  text-align:center;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--grad);color:#1a0f22;box-shadow:0 10px 26px rgba(232,184,74,.28)}
.btn-primary:hover{color:#1a0f22;box-shadow:0 14px 32px rgba(232,184,74,.4)}
.btn-ghost{background:rgba(255,255,255,.05);color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:rgba(255,255,255,.1);color:#fff}
.btn-lg{padding:.92rem 1.9rem;font-size:1.02rem}
.btn-block{display:flex;width:100%}

/* ---------- Barre laterale ---------- */
.side{
  position:fixed;top:0;left:0;bottom:0;width:236px;z-index:80;
  background:var(--bg-2);border-right:1px solid var(--line-soft);
  overflow-y:auto;overscroll-behavior:contain;
  padding:.85rem .7rem 2rem;
  transform:translateX(-102%);transition:transform .24s ease;
}
.side.is-open{transform:none}
.side-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7rem}
.side-head img{width:118px;height:38px;object-fit:contain}
.side-close{
  width:38px;height:38px;border-radius:9px;border:1px solid var(--line);
  background:rgba(255,255,255,.05);color:var(--ink);font-size:1.2rem;line-height:1;cursor:pointer;
}
.side-promos{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:.7rem}
.side-promo{
  position:relative;display:flex;align-items:flex-end;min-height:58px;
  padding:.5rem .55rem;border-radius:12px;border:1px solid var(--line);
  background:linear-gradient(150deg,rgba(232,184,74,.16),rgba(192,36,110,.14));
  font-size:.74rem;font-weight:700;line-height:1.25;color:var(--ink);
}
.side-promo:hover{border-color:rgba(232,184,74,.55);color:#fff}
.side-promo img{position:absolute;right:.4rem;top:.35rem;width:18px;height:18px;object-fit:contain}
.side-nav{display:grid;gap:.34rem}
.side-link{
  display:flex;align-items:center;gap:.6rem;padding:.62rem .7rem;
  border-radius:11px;border:1px solid var(--line-soft);
  background:rgba(255,255,255,.035);
  font-size:.875rem;font-weight:600;color:var(--ink-dim);
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.side-link:hover{background:rgba(232,184,74,.13);border-color:rgba(232,184,74,.42);color:#fff}
.side-link.is-here{background:rgba(232,184,74,.17);border-color:rgba(232,184,74,.5);color:#fff}
.side-link img{width:18px;height:18px;flex:0 0 18px;object-fit:contain;opacity:.85}
.side-link .chev{margin-left:auto;opacity:.45;font-size:.68rem}
.side-sep{height:1px;background:var(--line-soft);margin:.75rem .2rem}
.side-foot{
  margin-top:1.1rem;padding-top:.85rem;border-top:1px solid var(--line-soft);
  display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--muted);
}
.side-foot .val{margin-left:auto;color:var(--ink-dim);font-weight:600}
.side-note{
  margin-top:.9rem;padding:.7rem .75rem;border-radius:11px;
  border:1px solid var(--line-soft);background:rgba(255,255,255,.03);
  font-size:.72rem;line-height:1.5;color:var(--muted);
}
.side-note b{display:block;color:var(--gold-2);font-size:.75rem;margin-bottom:.2rem}

/* ---------- Header ---------- */
.topbar{position:sticky;top:0;z-index:60;background:rgba(11,6,17,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft)}
.topbar-inner{display:flex;align-items:center;gap:.6rem;min-height:66px}
.brandmark{display:flex;align-items:center;flex:0 0 auto}
.brandmark img{width:132px;height:42px;object-fit:contain}
.topbar-actions{display:flex;align-items:center;gap:.55rem;margin-left:auto}
.topbar-actions .btn{padding:.58rem 1.1rem;font-size:.88rem}
.burger{
  display:none;width:42px;height:42px;border-radius:10px;border:1px solid var(--line);
  background:rgba(255,255,255,.05);cursor:pointer;position:relative;flex:0 0 auto;
}
.burger span,.burger::before,.burger::after{
  content:"";position:absolute;left:11px;width:20px;height:2px;border-radius:2px;background:var(--ink);
}
.burger::before{top:14px}
.burger span{top:20px}
.burger::after{top:26px}
.scrim{position:fixed;inset:0;z-index:70;background:rgba(4,2,8,.66);opacity:0;pointer-events:none;transition:opacity .24s ease}
.scrim.is-open{opacity:1;pointer-events:auto}

/* ---------- Decalage du contenu par la sidebar ---------- */
@media (min-width:1100px){
  .side{transform:none}
  .topbar,.appmain,.sitefoot{margin-left:236px}
  .burger,.scrim,.side-close{display:none}
}
@media (max-width:1099.98px){
  .burger{display:block}
}

/* ---------- Bandeau promotionnel ---------- */
.banner{
  position:relative;overflow:hidden;border-radius:16px;
  display:flex;align-items:center;min-height:clamp(230px,25vw,340px);
  border:1px solid var(--line);
}
.banner picture,.banner img{position:absolute;inset:0;width:100%;height:100%}
.banner img{object-fit:cover;object-position:76% 50%}
.banner::after{
  content:"";position:absolute;inset:0;
  /* Le voile ne couvre plus que la colonne de texte : il tient jusqu'a 30 %,
     chute vite et libere totalement l'illustration a partir de 72 %, logo
     compris. Contrastes mesures sur le visuel, tous au-dessus des seuils AA. */
  background:linear-gradient(90deg,rgba(11,6,17,.95) 0%,rgba(11,6,17,.92) 30%,rgba(11,6,17,.62) 46%,rgba(11,6,17,.14) 62%,rgba(11,6,17,0) 72%);
}
.banner-copy{
  position:relative;z-index:1;max-width:640px;
  padding:clamp(1.2rem,3vw,2.2rem) clamp(1.1rem,3vw,2rem);
  margin-left:clamp(.4rem,2vw,1.6rem);border-left:3px solid var(--gold);
}
.banner-brand{
  margin:0 0 .3rem;text-transform:uppercase;letter-spacing:-.01em;font-weight:800;
  font-size:clamp(1.7rem,5vw,3.1rem);line-height:1.03;color:var(--gold-2);
}
.banner-hed{
  margin:0 0 .55rem;text-transform:uppercase;letter-spacing:.14em;font-weight:700;
  font-size:clamp(.8rem,1.5vw,.95rem);line-height:1.3;color:var(--ink-dim);
}
.banner-offer{
  margin:0 0 1rem;font-weight:800;color:#fff;line-height:1.2;
  font-size:clamp(1rem,2.7vw,1.7rem);
}
.banner-cta{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.banner-note{margin:.85rem 0 0;font-size:.78rem;color:var(--muted)}
.banner-dots{position:absolute;left:50%;bottom:.9rem;transform:translateX(-50%);z-index:2;display:flex;gap:.4rem}
.banner-dots i{width:7px;height:7px;border-radius:99px;background:rgba(255,255,255,.32)}
.banner-dots i:first-child{width:22px;background:var(--gold)}

/* ---------- Tuiles de categories ---------- */
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:.75rem}
.tile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  padding:1.15rem .6rem;border-radius:14px;border:1px solid var(--line);
  background:linear-gradient(170deg,rgba(44,26,59,.8),rgba(21,12,30,.9));
  font-size:.8rem;font-weight:600;color:var(--ink-dim);text-align:center;
  transition:transform .15s ease,border-color .15s ease,color .15s ease;
}
.tile:hover{transform:translateY(-2px);border-color:rgba(232,184,74,.55);color:#fff}
.tile img{width:30px;height:30px;object-fit:contain}

/* ---------- Rangees de jeux defilantes ---------- */
.rail-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.85rem}
.rail-head h2{margin:0;font-size:clamp(1rem,1.7vw,1.12rem);display:flex;align-items:center;gap:.45rem;letter-spacing:-.01em}
.rail-head .more{
  margin-left:auto;flex:0 0 auto;padding:.38rem .85rem;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.045);
  font-size:.79rem;font-weight:700;color:var(--ink-dim);
}
.rail-head .more:hover{color:#fff;border-color:rgba(232,184,74,.5)}
.rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:clamp(118px,13.4vw,152px);
  gap:.75rem;overflow-x:auto;padding-bottom:.5rem;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;scrollbar-color:rgba(232,184,74,.35) transparent;
}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:rgba(232,184,74,.35);border-radius:99px}
.rail::-webkit-scrollbar-track{background:transparent}
.rail .game{scroll-snap-align:start}

/* ---------- Jeux ---------- */
.games{display:grid;grid-template-columns:repeat(6,1fr);gap:.85rem}
.game{display:block;border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-3);border:1px solid var(--line);transition:transform .16s ease,border-color .16s ease}
.game:hover{transform:translateY(-3px);border-color:rgba(232,184,74,.55)}
.game img{width:100%;aspect-ratio:1/1;object-fit:cover}
.game-meta{padding:.55rem .6rem .65rem}
.game-name{display:block;font-size:.83rem;font-weight:700;color:#fff;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.game-prov{display:block;font-size:.73rem;color:var(--muted)}

/* ---------- Cartes de promotion ---------- */
.promos{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem}
.promo{
  display:flex;flex-direction:column;padding:1.15rem 1.2rem;border-radius:14px;
  border:1px solid var(--line);background:linear-gradient(165deg,rgba(44,26,59,.85),rgba(21,12,30,.92));
}
.promo .kicker{font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2);margin-bottom:.45rem}
.promo h3{font-size:1.05rem;margin-bottom:.4rem}
.promo p{font-size:.88rem;color:var(--muted);margin:0 0 1rem}
.promo .btn{margin-top:auto;align-self:flex-start}

/* ---------- Gains en direct (bandeau defilant) ---------- */
.wins-online{
  margin-left:auto;display:inline-flex;align-items:center;gap:.42rem;
  padding:.36rem .85rem;border-radius:999px;white-space:nowrap;
  border:1px solid rgba(232,184,74,.4);background:rgba(232,184,74,.1);
  font-size:.8rem;color:var(--muted);
}
.wins-online b{color:#4ade80;font-weight:800}
.wins{
  position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent);
}
.wins-track{display:flex;width:max-content;animation:winsroll 64s linear infinite}
.wins-copy{display:flex}
.wins:hover .wins-track,.wins:focus-within .wins-track{animation-play-state:paused}
@keyframes winsroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.win{
  flex:0 0 auto;display:flex;align-items:center;gap:.7rem;width:272px;margin-right:.7rem;padding:.6rem;
  border-radius:14px;border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(44,26,59,.85),rgba(21,12,30,.92));
  transition:border-color .16s ease;
}
.win:hover{border-color:rgba(232,184,74,.6)}
.win:first-child{
  border-color:rgba(232,184,74,.62);
  box-shadow:0 0 0 1px rgba(232,184,74,.22),0 8px 24px rgba(232,184,74,.16);
}
.win img{width:62px;height:62px;flex:0 0 62px;border-radius:11px;object-fit:cover}
.win-body{display:flex;flex-direction:column;min-width:0}
.win-who{display:flex;align-items:center;gap:.4rem;font-size:.75rem;color:var(--muted);line-height:1.4}
.win-av{
  width:19px;height:19px;flex:0 0 19px;border-radius:50%;font-style:normal;
  display:grid;place-items:center;background:var(--grad);color:#1a0f22;
  font-size:.62rem;font-weight:800;
}
.win-game{font-size:.9rem;font-weight:700;color:#fff;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win-amounts{display:flex;gap:1rem;margin-top:.2rem}
.win-amt{display:flex;flex-direction:column;font-size:.85rem;font-weight:700;color:var(--ink);line-height:1.3}
.win-amt small{font-size:.61rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);line-height:1.4}
.win-amt-out{color:#4ade80}
.wins-note{margin:.75rem 0 0;font-size:.76rem;color:var(--muted)}

/* ---------- Bandeau de reassurance ---------- */
.assure{border-bottom:1px solid var(--line-soft);background:rgba(30,17,41,.6)}
.assure-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem;padding:1.1rem 0}
.assure-item{display:flex;flex-direction:column;gap:.12rem}
.assure-item .k{font-size:1.12rem;font-weight:800;color:#fff}
.assure-item .v{font-size:.83rem;color:var(--muted)}

/* ---------- Cartes ---------- */
.card{
  background:linear-gradient(170deg,rgba(44,26,59,.82),rgba(21,12,30,.9));
  border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem 1.3rem;
  box-shadow:var(--shadow-sm);
}
.card h3{margin-bottom:.45rem}
.card p:last-child{margin-bottom:0}
.grid{display:grid;gap:1rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.perk{display:flex;gap:.9rem;align-items:flex-start}
.perk .ico{
  flex:0 0 auto;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:var(--grad-soft);border:1px solid var(--line);font-size:1.15rem;
}
.perk h3,.perk .perk-title{font-size:1.05rem;font-weight:750;color:#fff;line-height:1.22;letter-spacing:-.015em;margin:0 0 .25rem}
.perk p{font-size:.92rem;margin:0;color:var(--muted)}

/* ---------- Tableaux ---------- */
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:rgba(21,12,30,.7)}
table{width:100%;border-collapse:collapse;min-width:560px;font-size:.92rem}
caption{text-align:left;padding:.9rem 1rem 0;color:var(--muted);font-size:.86rem}
th,td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top}
thead th{background:rgba(232,184,74,.1);color:#fff;font-size:.83rem;text-transform:uppercase;letter-spacing:.06em}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(255,255,255,.025)}

/* ---------- Chips (paiements, studios) ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.55rem}
.chip{
  display:inline-flex;align-items:center;gap:.45rem;padding:.48rem 1rem;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);
  font-size:.86rem;font-weight:600;color:var(--ink-dim);
}
.chip img{height:14px;width:auto;opacity:.9}

/* ---------- Fournisseurs (logos) ---------- */
.provs{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:.7rem}
.prov{display:grid;place-items:center;padding:1rem .8rem;border-radius:var(--radius-sm);border:1px solid var(--line-soft);background:rgba(255,255,255,.035);transition:border-color .16s ease}
.prov:hover{border-color:rgba(232,184,74,.45)}
.prov img{max-height:24px;width:auto;opacity:.78}
.prov:hover img{opacity:1}

/* ---------- Bandeau partenaires (bas de page d'accueil) ---------- */
#partenaires .chips{justify-content:center;margin-bottom:clamp(1.2rem,2.2vw,1.7rem)}
#partenaires .kicker{
  display:block;text-align:center;margin:0 0 1rem;
  font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
#partenaires .provs{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
#partenaires .prov{min-height:58px;font-size:.82rem;font-weight:700;color:var(--gold-2)}

/* ---------- Avis joueurs ---------- */
.review{display:flex;flex-direction:column;gap:.7rem}
.review-head{display:flex;align-items:center;gap:.7rem}
.avatar{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  background:var(--grad);color:#1a0f22;font-weight:800;font-size:.95rem;
}
.review-who{font-weight:700;color:#fff;font-size:.94rem;line-height:1.3}
.review-when{font-size:.78rem;color:var(--muted)}
.stars{color:var(--gold);font-size:.9rem;letter-spacing:.1em}
.review p{font-size:.94rem;margin:0}

/* ---------- Verdict / notes ---------- */
.verdict{display:grid;grid-template-columns:230px 1fr;gap:1.6rem;align-items:start}
.score{text-align:center;padding:1.4rem 1rem;border-radius:var(--radius);border:1px solid rgba(232,184,74,.3);background:var(--grad-soft)}
.score .n{font-size:3rem;font-weight:800;color:#fff;line-height:1}
.score .n span{font-size:1.1rem;color:var(--muted);font-weight:600}
.score .l{font-size:.84rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-top:.3rem}
.bars{display:grid;gap:.7rem;margin-top:.2rem;text-align:left}
.bar-row{font-size:.82rem}
.bar-row .lab{display:flex;justify-content:space-between;color:var(--ink-dim);margin-bottom:.22rem}
.bar{height:6px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:var(--grad)}
.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.pros-cons ul{list-style:none;padding:0;margin:0}
.pros-cons li{position:relative;padding-left:1.5rem;font-size:.93rem}
.pros li::before{content:"+";position:absolute;left:0;top:0;color:var(--gold-2);font-weight:800}
.cons li::before{content:"!";position:absolute;left:0;top:0;color:#ff8a8a;font-weight:800}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:.7rem}
details.qa{border:1px solid var(--line);border-radius:var(--radius-sm);background:rgba(21,12,30,.72);overflow:hidden}
details.qa[open]{border-color:rgba(232,184,74,.42)}
details.qa summary{
  list-style:none;cursor:pointer;padding:.95rem 2.6rem .95rem 1.1rem;position:relative;
  font-weight:700;color:#fff;font-size:.98rem;
}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary::after{content:"+";position:absolute;right:1.1rem;top:50%;transform:translateY(-50%);color:var(--gold-2);font-size:1.25rem;font-weight:700;line-height:1}
details.qa[open] summary::after{content:"\2212"}
details.qa .qa-body{padding:0 1.1rem 1.05rem;font-size:.94rem;color:var(--ink-dim)}
details.qa .qa-body p:last-child{margin-bottom:0}

/* ---------- Etapes ---------- */
.steps{counter-reset:step;display:grid;gap:.9rem}
.step{position:relative;padding-left:3.1rem}
.step::before{
  counter-increment:step;content:counter(step);
  position:absolute;left:0;top:0;width:2.2rem;height:2.2rem;border-radius:50%;
  display:grid;place-items:center;background:var(--grad);color:#1a0f22;font-weight:800;font-size:.95rem;
}
.step h3,.step .step-title{font-size:1.02rem;font-weight:750;color:#fff;line-height:1.22;letter-spacing:-.015em;margin:0 0 .2rem}
.step p{font-size:.93rem;margin:0;color:var(--muted)}

/* ---------- Encart CTA ---------- */
.cta-box{
  text-align:center;padding:clamp(1.6rem,3.4vw,2.6rem);border-radius:var(--radius);
  border:1px solid rgba(232,184,74,.28);background:var(--grad-soft);box-shadow:var(--shadow-sm);
}
.cta-box img{width:74px;margin:0 auto .9rem}
.cta-box h2{margin-bottom:.4rem}
.cta-box p{max-width:60ch;margin:0 auto 1.2rem;color:var(--ink-dim)}

/* ---------- Formulaire (connexion) ---------- */
.form{display:grid;gap:.95rem;max-width:420px}
.field label{display:block;font-size:.85rem;font-weight:600;color:var(--ink);margin-bottom:.35rem}
.field input{
  width:100%;padding:.75rem .95rem;border-radius:10px;font-size:.95rem;font-family:inherit;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--ink);
}
.field input::placeholder{color:#7d6f8a}
.field input:focus{outline:2px solid var(--gold-2);outline-offset:1px}
.form-row{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;gap:.6rem;flex-wrap:wrap}

/* ---------- Notices ---------- */
.notice{
  border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--radius-sm);
  padding:.95rem 1.1rem;background:rgba(232,184,74,.06);font-size:.92rem;
}
.notice p:last-child{margin-bottom:0}

/* ---------- Footer ---------- */
.sitefoot{border-top:1px solid var(--line-soft);background:rgba(11,6,17,.88);margin-top:1rem}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:1.8rem;padding:2.4rem 0 1.8rem}
.foot-brand img{width:120px;height:auto;margin-bottom:.9rem}
.foot-brand p{font-size:.88rem;color:var(--muted);max-width:38ch}
.foot-col .foot-title{font-size:.82rem;font-weight:750;text-transform:uppercase;letter-spacing:.12em;color:#fff;margin:0 0 .8rem}
.foot-col ul{list-style:none;padding:0;margin:0}
.foot-col li{margin-bottom:.42rem}
.foot-col a{font-size:.9rem;color:var(--ink-dim)}
.foot-col a:hover{color:#fff}
.foot-legal{border-top:1px solid var(--line-soft);padding:1.4rem 0 2.2rem;font-size:.82rem;color:var(--muted)}
.foot-legal p{margin-bottom:.7rem}
.foot-legal p:last-child{margin-bottom:0}
.foot-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.1rem}
.badge{
  display:inline-flex;align-items:center;padding:.34rem .75rem;border-radius:7px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);font-size:.78rem;font-weight:700;color:var(--ink-dim);
}
.badge-18{border-color:rgba(255,120,120,.4);color:#ffb3b3}

/* ---------- Pages autonomes (403, 404, redirection) ---------- */
.gate{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2.5rem 1.4rem}
.gate__mark{width:auto;height:110px;margin-bottom:1.1rem}
.gate__code{font-weight:800;line-height:1;font-size:clamp(4.5rem,18vw,10rem);letter-spacing:-.03em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.gate__hed{font-size:clamp(1.4rem,4vw,2.1rem);margin:.35em 0 .5em}
.gate__lede{color:var(--muted);max-width:46ch;margin:0 0 1.6rem}

/* ---------- Responsive ---------- */
@media (max-width:1099.98px){
  /* une seule ligne : la rangee defile horizontalement plutot que de passer
     sur plusieurs rangs */
  .tiles{
    display:flex;overflow-x:auto;scroll-snap-type:x proximity;
    padding-bottom:.4rem;scrollbar-width:none;
  }
  .tiles::-webkit-scrollbar{display:none}
  .tile{flex:0 0 auto;width:clamp(104px,26vw,140px);scroll-snap-align:start}
  .promos{grid-template-columns:1fr 1fr}
  .games{grid-template-columns:repeat(4,1fr)}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .foot-top{grid-template-columns:1fr 1fr;gap:1.6rem}
  .verdict{grid-template-columns:1fr}
}
@media (max-width:820px){
  .assure-grid{grid-template-columns:repeat(2,1fr)}
  /* La barre haute garde le burger, la marque et le seul bouton d'action. */
  .topbar-actions .btn-ghost{display:none}
}
@media (max-width:680px){
  body{font-size:16px}
  .promos,.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .games{grid-template-columns:repeat(3,1fr)}
  .pros-cons{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr}
  .rail-head{flex-wrap:wrap}
  .wins-online{margin-left:0}
  .win{width:250px}
  /* L'illustration portrait est construite en trois zones : le logo occupe son
     tiers haut, le milieu est laisse vide pour du contenu, les ornements sont
     en bas. On cadre donc sur le haut, on allonge le bandeau et on pousse le
     texte en pied de bloc : le logo reste visible au-dessus de l'accroche.
     Le voile est presque nul sur le logo et se densifie sous le texte. */
  .banner{min-height:clamp(480px,142vw,620px);align-items:flex-end}
  /* zoom de 20 % sur l illustration seule, ancre en haut pour que le logo
     grossisse sans sortir du cadre. Le conteneur garde sa taille. */
  .banner img{object-position:50% 0;transform:scale(1.2);transform-origin:50% 0}
  .banner::after{background:linear-gradient(180deg,rgba(11,6,17,.12) 0%,rgba(11,6,17,.18) 32%,rgba(11,6,17,.72) 52%,rgba(11,6,17,.92) 100%)}
  .banner-copy{margin-left:0;border-left-width:2px}
  /* le texte est desormais cale en bas du bandeau, les puces du carrousel
     viendraient buter dessus */
  .banner-dots{display:none}
}
@media (prefers-reduced-motion:reduce){
  .wins{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .wins-copy{display:none}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}