/* ============================================================
   SPINZO — FEUILLE COMPARATEUR (DA claire)
   Ivoire + encre + or · Bodoni Moda (titres) · Jost (corps).
   Couvre TOUTES les classes des guides casino : le basculement
   depuis spinzo-guide.css se fait en changeant une seule ligne.
   ============================================================ */

:root{
  --fond:#F7F4ED; --carte:#FFFFFF; --encre:#171A21; --encre2:#5A6070;
  --or:#C9A227; --or-txt:#8F7212; --or-pale:#F6EED7;
  --trait:#E5DFD0; --trait2:#EFEAE0;
  --vert:#147A3D; --vert-p:#E7F3EB;
  --rouge:#B03A3A; --rouge-p:#F9ECEC;
  --marine:#0B0E14; --bleu:#5865F2; --live:#0E5E2F;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--fond);color:var(--encre);
  font:400 17px/1.75 "Jost",system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
.w{max-width:960px;margin:0 auto;padding:0 22px}
body.classement .w{max-width:920px}

h1,h2,h3,h4{font-family:"Bodoni Moda",Georgia,serif;line-height:1.18;text-wrap:balance}
h1{font-size:clamp(34px,5.4vw,54px);font-weight:700}
h2{font-size:clamp(25px,3.4vw,33px);font-weight:600;margin:0 0 16px}
h3{font-size:20px;font-weight:600;margin:26px 0 10px}
p{margin:0 0 16px}
a{color:var(--or-txt)}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--or);outline-offset:2px}
section{margin:54px 0}
ul,ol{padding-left:22px}
li{margin:7px 0}
code{background:var(--trait2);padding:2px 7px;font-size:15px;border-radius:4px}
strong,b{font-weight:600}
em{font-style:italic}

/* ---------- EN-TÊTE ---------- */
header{background:var(--carte);border-bottom:1px solid var(--trait);padding:58px 0 46px}
.sur-titre{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--or-txt);margin-bottom:16px}
.lede{font-size:19px;color:var(--encre2);margin:18px 0 20px;max-width:46em}
.signature{font-size:15px;color:var(--encre2);border-left:3px solid var(--or);padding-left:14px;max-width:44em}
.signature b{color:var(--encre)}

/* ---------- CHAPITRES ---------- */
.chapitre{display:flex;align-items:center;gap:16px;margin:0 0 14px}
.chapitre .num{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--or-txt);white-space:nowrap}
.chapitre .filet{flex:1;height:1px;background:var(--trait)}

/* ---------- SOMMAIRE ---------- */
.sommaire{background:var(--carte);border:1px solid var(--trait);border-radius:10px;padding:24px 28px;margin:36px 0}
.sommaire b{font-family:"Bodoni Moda",Georgia,serif;font-size:19px}
.sommaire ol{margin:12px 0 2px;padding-left:20px;columns:2;column-gap:42px}
.sommaire li{margin:7px 0;font-size:15.5px}
.sommaire a{color:var(--encre);text-decoration:none;border-bottom:1px solid var(--trait)}
.sommaire a:hover{border-bottom-color:var(--or)}
@media(max-width:640px){.sommaire ol{columns:1}}

/* ---------- CHIFFRES-CLÉS ---------- */
.chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:24px 0}
.chiffre{background:var(--carte);border:1px solid var(--trait);border-radius:10px;padding:16px 18px;text-align:center}
.chiffre b{font-family:"Bodoni Moda",Georgia,serif;font-size:24px;display:block;color:var(--encre)}
.chiffre span{font-size:13.5px;color:var(--encre2);display:block;margin-top:3px}

/* ---------- CARTES CASINO ---------- */
.classementCasinos{display:flex;flex-direction:column;gap:18px;margin:28px 0}
.casino{background:var(--carte);border:1px solid var(--trait);border-radius:12px;
  box-shadow:0 1px 2px rgba(23,26,33,.04),0 8px 26px rgba(23,26,33,.05);overflow:hidden}
.casino.premier{border-color:var(--or);box-shadow:0 1px 2px rgba(23,26,33,.05),0 10px 30px rgba(201,162,39,.14)}
.casino .tete{display:grid;grid-template-columns:auto 96px 1fr auto;gap:16px 20px;align-items:center;padding:20px 22px 14px}
.casino .rang{font-family:"Bodoni Moda",Georgia,serif;font-size:26px;color:var(--or-txt);width:34px;text-align:center}
.casino .logo{width:96px;height:64px;border-radius:9px;background:var(--marine);
  display:flex;align-items:center;justify-content:center;padding:9px}
.casino .logo img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.casino .nom{font-family:"Bodoni Moda",Georgia,serif;font-size:22px;font-weight:600;display:block}
.casino .accroche{display:block;font-size:15px;color:var(--encre2);margin-top:3px;max-width:36em}
.casino .chiffres{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--trait2);
  border-top:1px solid var(--trait2);border-bottom:1px solid var(--trait2);margin:0;border-radius:0}
.casino .chiffre{background:var(--carte);padding:13px 20px;border:none;border-radius:0}
.casino .chiffre b{font-size:21px}
.casino .btns{padding:16px 22px 20px;margin:0}
.casino .actions{padding:16px 22px 20px;display:flex;gap:12px;flex-wrap:wrap}
.note10{text-align:center;line-height:1.05}
.note10 b{font-family:"Bodoni Moda",Georgia,serif;font-size:31px;color:var(--or-txt);display:block}
.note10 span{font-size:12px;color:var(--encre2);letter-spacing:.08em}
.badge{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 10px;border-radius:99px;margin-bottom:7px}
.badge.vert{background:var(--vert-p);color:var(--vert)}
.badge.or{background:var(--or-pale);color:var(--or-txt)}
@media(max-width:700px){
  .casino .tete{grid-template-columns:auto 1fr auto}
  .casino .logo{display:none}
  .casino .chiffre{padding:11px 8px}
}

/* conditions dépliables (pages existantes) */
.conditions{border-top:1px solid var(--trait2);padding:4px 22px 14px}
.condition{display:flex;justify-content:space-between;gap:16px;padding:9px 0;
  border-bottom:1px solid var(--trait2);font-size:15px}
.condition:last-child{border-bottom:none}
.condition b{font-variant-numeric:tabular-nums;white-space:nowrap}
.condition .ok{color:var(--vert);font-weight:600}
.condition .non{color:var(--rouge);font-weight:600}

/* ---------- BOUTONS ---------- */
.btns,.actions{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0}
.btn{display:inline-block;font:600 15px/1 "Jost",sans-serif;letter-spacing:.04em;
  padding:15px 26px;border-radius:9px;text-decoration:none;
  transition:transform .12s ease,box-shadow .12s ease;border:none;cursor:pointer}
.btn:hover{transform:translateY(-1px)}
.btn-or{background:var(--or);color:#171304;box-shadow:0 6px 16px rgba(201,162,39,.3)}
.btn-site{background:var(--carte);color:var(--encre);border:1.5px solid var(--trait)}
.btn-discord{background:var(--bleu);color:#fff}
.btn-live{background:var(--live);color:#fff}

/* ---------- TABLEAUX ---------- */
.tw{overflow-x:auto;margin:22px 0;border:1px solid var(--trait);border-radius:10px;background:var(--carte)}
table{border-collapse:collapse;width:100%;font-size:15.5px}
body.classement table{font-size:15px}
th{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--encre2);
  text-align:left;padding:13px 18px;border-bottom:1px solid var(--trait)}
td{padding:13px 18px;border-bottom:1px solid var(--trait2);vertical-align:top}
tr:last-child td{border-bottom:none}
tbody tr:nth-child(odd) td{background:#FBF9F4}
td.n,.n{font-variant-numeric:tabular-nums;white-space:nowrap}
td.ok{color:var(--vert);font-weight:600}
td.non{color:var(--rouge);font-weight:600}

/* ---------- ENCADRÉS ---------- */
.note{background:var(--carte);border:1px solid var(--trait);border-left:4px solid var(--or);
  border-radius:0 10px 10px 0;padding:18px 22px;margin:22px 0}
.note.vert{border-left-color:var(--vert)}
.note.rouge{border-left-color:var(--rouge)}
.note h3{margin:0 0 8px;font-size:18px}
.alerte{background:var(--rouge-p);border:1px solid #EFD5D5;border-left:4px solid var(--rouge);
  border-radius:0 10px 10px 0;padding:16px 20px;margin:20px 0;font-size:15.5px}
.methode{background:var(--carte);border:1px solid var(--trait);border-radius:10px;padding:18px 22px;margin:22px 0}
.mesure{background:var(--carte);border:1px solid var(--trait);border-radius:10px;padding:14px 18px;margin:14px 0}
.appel{background:linear-gradient(135deg,#FDFBF5,var(--or-pale));border:1px solid #EADFC0;
  border-radius:10px;padding:22px 26px;margin:26px 0}
.appel h3{margin:0 0 8px}
.relance{background:linear-gradient(135deg,#FDFBF5,var(--or-pale));border:1px solid #EADFC0;border-radius:10px;
  padding:20px 24px;margin:26px 0;display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.relance p{margin:0}
.aide{background:var(--carte);border:1px dashed var(--trait);border-radius:10px;padding:18px 22px;margin:26px 0;
  display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.aide p{margin:0;color:var(--encre2)}
.legal{background:var(--carte);border:1px solid var(--trait);border-radius:10px;padding:18px 22px;margin:22px 0;
  font-size:15px;color:var(--encre2)}
.legal b{color:var(--encre)}
.mention{font-size:13.5px;color:var(--encre2);margin-top:10px}

/* pour / contre */
.pc{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0}
.pc>div{background:var(--carte);border:1px solid var(--trait);border-radius:10px;padding:16px 20px}
.pc h4{margin:0 0 10px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-family:"Jost",sans-serif}
.pc .pour h4{color:var(--vert)}
.pc .contre h4{color:var(--rouge)}
.pc ul{margin:0;padding-left:18px}
.pc li{margin:6px 0;font-size:15px}
@media(max-width:640px){.pc{grid-template-columns:1fr}}

/* ---------- PUCES ---------- */
.puces{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 18px}
.puce{background:var(--carte);border:1px solid var(--trait);border-radius:99px;
  padding:6px 14px;font-size:14px;color:var(--encre2)}

/* ---------- GAINS (preuves) ---------- */
.gains{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin:24px 0}
.gain{background:var(--carte);border:1px solid var(--trait);border-radius:10px;padding:16px 18px}
.gain .mult{font-family:"Bodoni Moda",Georgia,serif;font-size:27px;color:var(--or-txt);display:block;line-height:1.1}
.gain .machine{display:block;font-weight:600;margin-top:4px}
.gain .editeur{display:block;font-size:13.5px;color:var(--encre2)}
.gain .detail{display:block;font-size:14px;margin-top:6px;font-variant-numeric:tabular-nums}
.gain .qui{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;font-size:13.5px;color:var(--encre2)}
.sceau{display:inline-block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 9px;border-radius:99px;background:var(--vert-p);color:var(--vert);font-weight:600}
.sceau.verifie{background:var(--vert-p);color:var(--vert)}
.legende{display:flex;flex-wrap:wrap;gap:16px;font-size:13.5px;color:var(--encre2);margin:12px 0 0}
.legende span{display:flex;align-items:center;gap:7px}

/* ---------- RÉSEAUX + PIED ---------- */
.reseaux{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:34px 0}
.reseau{background:var(--carte);border:1px solid var(--trait);border-radius:10px;padding:13px 16px;
  text-decoration:none;color:var(--encre);transition:border-color .15s}
.reseau:hover{border-color:var(--or)}
.reseau b{display:block;font-size:15px}
.reseau span{font-size:13px;color:var(--encre2)}
footer{border-top:1px solid var(--trait);margin-top:60px;padding:26px 0 90px;font-size:14px;color:var(--encre2)}
footer p{margin:0 0 8px}
footer .src,footer .src a{color:var(--encre2);font-size:13.5px}

/* ---------- BARRE COLLANTE ---------- */
.barre{position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.96);
  backdrop-filter:blur(6px);border-top:1px solid var(--trait);padding:10px 18px;
  display:flex;gap:16px;align-items:center;justify-content:center;z-index:50}
.barre span{font-size:14px;color:var(--encre2)}
.barre .btn{padding:11px 22px}

/* ---------- ACCESSIBILITÉ / IMPRESSION ---------- */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn:hover{transform:none}}
@media print{
  body{background:#fff}
  .btn,.barre,.relance,.aide,.reseaux{display:none!important}
}