/* ============================================================
   SPINZO — feuille de style des pages guides
   Une seule source pour toutes les pages : casino, machines,
   classements, blog. Modifier ici met a jour tout le site.

   Systeme :
     noir   #06080D   fond
     or     #C9A227   accent unique
     ivoire #F3EEE6   texte
     titres Bodoni Moda   texte Jost

   Boutons — une couleur = une destination :
     .btn-or       Celsius        (seul bouton plein)
     .btn-live     Rumble
     .btn-discord  Discord
     .btn-site     le site
   ============================================================ */

:root{
  --noir:#06080D;
  --noir2:#0A0D14;
  --voile:rgba(233,206,132,.055);
  --trait:rgba(233,206,132,.17);
  --trait2:rgba(243,238,230,.09);
  --or:#C9A227;
  --or-clair:#E9CE84;
  --or-pale:#F3E2B4;
  --ivoire:#F3EEE6;
  --ivoire2:#CFC7BA;
  --gris:#8C8578;
  --vert:#7FCFA4;
  --rouge:#E38B8B;
  --bleu:#9BA6F0;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--noir);color:var(--ivoire2);
  font-family:Jost,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;font-weight:300;line-height:1.78;-webkit-font-smoothing:antialiased}
.w{max-width:780px;margin:0 auto;padding:0 26px}
a{color:var(--or-clair)}

h1,h2,h3,.chiffre b,.serif{font-family:"Bodoni Moda",Georgia,serif;
  color:var(--ivoire);font-weight:400;letter-spacing:-.005em;text-wrap:balance}
h1{font-size:clamp(38px,7vw,68px);line-height:1.03;margin:0 0 22px;font-weight:400}
h2{font-size:clamp(26px,4.2vw,38px);line-height:1.15;margin:0 0 14px;font-weight:400}
h3{font-size:21px;line-height:1.3;margin:34px 0 8px;font-weight:600;color:var(--or-pale)}
p{margin:0 0 17px;max-width:66ch}
strong{color:var(--ivoire);font-weight:500}
code{font-family:Jost,monospace;background:var(--voile);border:1px solid var(--trait);
  border-radius:4px;padding:2px 9px;font-size:.92em;color:var(--or-clair);font-weight:400}

/* --- section : filet dore + capitale --- */
section{padding:64px 0 0}
.chapitre{display:flex;align-items:center;gap:16px;margin:0 0 26px}
.chapitre .num{font-family:"Bodoni Moda",serif;font-size:13px;letter-spacing:.3em;
  color:var(--or);text-transform:uppercase;white-space:nowrap}
.chapitre .filet{flex:1;height:1px;background:linear-gradient(90deg,var(--trait),transparent)}

/* --- entete --- */
header{position:relative;padding:96px 0 58px;overflow:hidden}
header::before{content:"";position:absolute;inset:-40% 0 auto 0;height:120%;
  background:radial-gradient(660px 340px at 50% 0%, rgba(201,162,39,.16), transparent 68%);
  pointer-events:none}
.sur-titre{position:relative;font-size:11.5px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--or);margin:0 0 26px;font-weight:500}
.lede{position:relative;font-size:19.5px;line-height:1.72;color:var(--ivoire2);max-width:60ch;
  font-weight:300}
.signature{position:relative;margin:38px 0 0;padding:18px 0 0;border-top:1px solid var(--trait2);
  font-size:14.5px;color:var(--gris);max-width:60ch}
.signature b{color:var(--or-pale);font-weight:500}

/* --- les trois chiffres : la piece maitresse --- */
.chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:1px;background:var(--trait2);border:1px solid var(--trait2);margin:34px 0}
.chiffre{background:var(--noir);padding:30px 24px;text-align:center}
.chiffre b{display:block;font-size:clamp(34px,5.6vw,46px);line-height:1;
  color:var(--or-clair);font-weight:400;font-variant-numeric:tabular-nums}
.chiffre span{display:block;margin-top:11px;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris);font-weight:400}

/* --- encarts : filet lateral, pas de boite lourde --- */
.note{border-left:1px solid var(--trait);padding:4px 0 4px 24px;margin:28px 0}
.note.rouge{border-left-color:rgba(227,139,139,.45)}
.note.vert{border-left-color:rgba(127,207,164,.4)}
.note h3{margin-top:0}
.note p:last-child,.note ul:last-child{margin-bottom:0}

/* --- tableaux : filets fins, beaucoup d'air --- */
.tw{overflow-x:auto;margin:30px 0}
table{border-collapse:collapse;width:100%;font-size:15.5px;min-width:500px}
th{text-align:left;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--or);font-weight:500;padding:0 20px 13px 0;
  border-bottom:1px solid var(--trait);white-space:nowrap}
td{padding:15px 20px 15px 0;border-bottom:1px solid var(--trait2);vertical-align:top;
  color:var(--ivoire2)}
tr:last-child td{border-bottom:none}
td:first-child{color:var(--ivoire);font-weight:400}
td.n{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--or-clair);font-weight:500}
td.ok{color:var(--vert);white-space:nowrap;font-weight:500}
td.non{color:var(--rouge);white-space:nowrap;font-weight:500}

ul{padding-left:20px;max-width:66ch;list-style:none}
li{margin:11px 0;position:relative}
ul li::before{content:"";position:absolute;left:-20px;top:.72em;width:6px;height:1px;
  background:var(--or)}

/* --- puces moyens de paiement --- */
.puces{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0 22px}
.puce{border:1px solid var(--trait2);border-radius:2px;padding:7px 15px;
  font-size:13px;letter-spacing:.05em;color:var(--ivoire2);font-weight:400}

/* --- l'appel principal : or plein, contraste maximal --- */
.appel{margin:40px 0;padding:38px 34px;text-align:center;
  border:1px solid var(--trait);background:
   radial-gradient(420px 200px at 50% 0%, rgba(201,162,39,.11), transparent 70%)}
.appel h3{margin:0 0 6px;color:var(--ivoire);font-size:25px;font-weight:400}
.appel p{margin:0 auto 22px;color:var(--gris);font-size:15px;max-width:44ch}
.cta{display:inline-block;background:linear-gradient(180deg,var(--or-pale),var(--or));
  color:#1B1403;font-family:Jost,sans-serif;font-weight:600;font-size:15px;
  letter-spacing:.13em;text-transform:uppercase;text-decoration:none;
  padding:17px 46px;border-radius:2px;transition:transform .18s ease,box-shadow .18s ease;
  box-shadow:0 6px 30px rgba(201,162,39,.2)}
.cta:hover{transform:translateY(-2px);box-shadow:0 10px 40px rgba(201,162,39,.32)}
.mention{margin:20px auto 0!important;font-size:12.5px;color:var(--gris);max-width:50ch;
  line-height:1.62}


/* --- gains : preuve sociale --- */
.gains{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  gap:1px;background:var(--trait2);border:1px solid var(--trait2);margin:30px 0}
.gain{background:var(--noir);padding:22px 22px 19px;position:relative}
.gain .mult{font-family:"Bodoni Moda",Georgia,serif;font-size:38px;line-height:1;
  color:var(--or-clair);font-weight:400;font-variant-numeric:tabular-nums;
  display:block;margin:0 0 10px}
.gain .machine{display:block;color:var(--ivoire);font-size:16.5px;font-weight:400;
  line-height:1.3;margin:0 0 3px}
.gain .editeur{display:block;color:var(--gris);font-size:12.5px;letter-spacing:.06em;
  margin:0 0 15px}
.gain .detail{display:block;font-size:12.5px;color:var(--or-clair);margin:0 0 13px;
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
.gain .qui{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-top:13px;border-top:1px solid var(--trait2);font-size:12.5px;color:var(--gris)}
.gain .qui b{color:var(--ivoire2);font-weight:500}
.sceau{display:inline-block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  padding:4px 9px;border-radius:2px;font-weight:500;white-space:nowrap}
.sceau.verifie{color:#9BDCB8;border:1px solid rgba(127,207,164,.4);
  background:rgba(127,207,164,.07)}
.sceau.partage{color:var(--ivoire2);border:1px solid var(--trait2)}
.legende{display:flex;flex-wrap:wrap;gap:10px 22px;margin:16px 0 0;font-size:13px;
  color:var(--gris);line-height:1.5}
.legende span{display:flex;align-items:center;gap:8px}

/* ===== SYSTEME DE BOUTONS — une couleur = une destination ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:Jost,sans-serif;font-weight:600;font-size:14.5px;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;padding:16px 34px;border-radius:2px;
  border:1px solid transparent;position:relative;overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease}
.btn:hover{transform:translateY(-2px)}

/* OR — le casino. Le seul bouton plein. */
.btn-or{background:linear-gradient(180deg,var(--or-pale),var(--or));color:#1B1403;
  box-shadow:0 6px 26px rgba(201,162,39,.22)}
.btn-or:hover{box-shadow:0 12px 42px rgba(201,162,39,.38)}
.btn-or::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);
  transform:skewX(-18deg);animation:balayage 5s ease-in-out infinite;pointer-events:none}
@keyframes balayage{0%,70%{left:-130%}100%{left:180%}}

/* VERT — le live Rumble */
.btn-live{background:rgba(133,199,66,.09);color:#B6E58A;border-color:rgba(133,199,66,.42)}
.btn-live:hover{background:rgba(133,199,66,.17);border-color:#85C742;color:#D2F2B4;
  box-shadow:0 8px 30px rgba(133,199,66,.16)}

/* BLEU — le Discord */
.btn-discord{background:rgba(88,101,242,.1);color:#B7C0FF;border-color:rgba(88,101,242,.42)}
.btn-discord:hover{background:rgba(88,101,242,.19);border-color:#7C8AF5;color:#D6DBFF;
  box-shadow:0 8px 30px rgba(88,101,242,.18)}

/* IVOIRE — le site */
.btn-site{background:transparent;color:var(--ivoire);border-color:var(--trait2)}
.btn-site:hover{border-color:var(--ivoire2);background:rgba(243,238,230,.05)}

.btns{display:flex;flex-wrap:wrap;gap:13px;margin:26px 0}

/* relance dorée compacte, posée après un argument qui vend */
.relance{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;
  margin:32px 0;padding:24px 26px;border:1px solid var(--trait);
  background:radial-gradient(520px 160px at 12% 0%, rgba(201,162,39,.09), transparent 70%)}
.relance p{margin:0;flex:1 1 260px;font-size:15.5px;color:var(--ivoire2);max-width:none;
  line-height:1.6}
.relance p b{color:var(--or-pale);font-weight:500}

/* barre fixe mobile */
.barre{display:none}
@media (max-width:720px){
  .barre{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;
    align-items:center;gap:12px;padding:11px 16px calc(11px + env(safe-area-inset-bottom));
    background:rgba(6,8,13,.94);backdrop-filter:blur(12px);
    border-top:1px solid var(--trait)}
  .barre span{flex:1;font-size:12.5px;color:var(--gris);line-height:1.35}
  .barre .btn{padding:12px 22px;font-size:12.5px;letter-spacing:.1em}
  body{padding-bottom:78px}
}

/* --- aide Discord : discret, jamais concurrent de l'or --- */
.aide{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;
  border-top:1px solid var(--trait2);border-bottom:1px solid var(--trait2);
  padding:19px 0;margin:32px 0;font-size:15px;color:var(--gris)}
.aide p{margin:0;max-width:none;flex:1 1 280px;line-height:1.6}
.aide a{color:var(--bleu);text-decoration:none;font-weight:500;font-size:14px;
  letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
  border-bottom:1px solid rgba(155,166,240,.35);padding-bottom:3px}
.aide a:hover{color:#C3CBFF;border-bottom-color:#C3CBFF}

/* --- reseaux --- */
.reseaux{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:1px;background:var(--trait2);border:1px solid var(--trait2);margin:30px 0}
.reseau{background:var(--noir);padding:20px 18px;text-decoration:none;
  color:var(--ivoire);display:block;transition:background .2s ease}
.reseau:hover{background:var(--voile)}
.reseau b{display:block;font-family:"Bodoni Moda",serif;font-size:18px;font-weight:400}
.reseau span{display:block;margin-top:4px;font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gris)}

/* --- mentions legales --- */
.legal{border:1px solid var(--trait2);padding:24px 26px;margin:34px 0;
  font-size:14.5px;color:var(--gris);line-height:1.7}
.legal b{color:var(--or-pale);font-weight:500}
.legal p:last-child{margin-bottom:0}

footer{margin-top:76px;padding:34px 0 72px;border-top:1px solid var(--trait2);
  color:var(--gris);font-size:13.5px}
footer a{color:var(--ivoire2)}
.src{font-size:12.5px;color:#6E685D;margin:12px 0 0;line-height:1.65}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}
  .btn-or::after{display:none}}

/* ============================================================
   VARIANTES PAR TYPE DE PAGE
   A poser sur <body class="...">. Memes couleurs, meme
   typographie — seule l'intensite change.
   ============================================================ */

/* --- ARTICLE DE BLOG : lecture longue, colonne etroite,
       un seul appel en fin de page --- */
body.article .w{max-width:700px}
body.article{font-size:17.5px;line-height:1.85}
body.article h1{font-size:clamp(34px,5.6vw,52px)}
body.article header{padding:80px 0 46px}
body.article .relance{display:none}          /* pas de relance en cours de lecture */
body.article .barre{display:none!important}  /* pas de barre fixe : ca gene la lecture */
body.article .appel{margin-top:56px}

/* --- FICHE MACHINE : la donnee prime, peu de boutons --- */
body.machine .chiffres{margin:26px 0}
body.machine .gains{grid-template-columns:repeat(auto-fill,minmax(196px,1fr))}
body.machine .relance{padding:20px 22px}

/* --- CLASSEMENT : le tableau occupe toute la place --- */
body.classement .w{max-width:920px}
body.classement table{font-size:15px}
body.classement td{padding:13px 18px 13px 0}
body.classement .relance{margin:38px 0}

/* --- IMPRESSION --- */
@media print{
  body{background:#fff;color:#111}
  .btn,.barre,.relance,.aide,.reseaux{display:none!important}
  h1,h2,h3{color:#111}
}

/* ============================================================
   CARTES CASINO — le comparatif
   Structure : identifiant, chiffre-cle, conditions depliables,
   deux appels (principal or, secondaire ivoire).
   Le <details> natif : aucun JavaScript, fonctionne partout,
   et Google lit le contenu meme replie.
   ============================================================ */

.classementCasinos{display:flex;flex-direction:column;gap:14px;margin:30px 0}

.casino{border:1px solid var(--trait2);background:
   linear-gradient(180deg, rgba(233,206,132,.02), transparent 40%);
  transition:border-color .22s ease}
.casino:hover{border-color:var(--trait)}
.casino.premier{border-color:var(--trait);
  background:radial-gradient(560px 180px at 8% 0%, rgba(201,162,39,.075), transparent 72%)}

.casino .tete{display:grid;grid-template-columns:auto 1fr auto;gap:18px 22px;
  align-items:center;padding:22px 24px}

.casino .rang{font-family:"Bodoni Moda",Georgia,serif;font-size:30px;line-height:1;
  color:var(--or);width:42px;text-align:center;font-variant-numeric:tabular-nums}
.casino.premier .rang{color:var(--or-clair)}

.casino .nom{display:block;font-family:"Bodoni Moda",Georgia,serif;font-size:23px;
  color:var(--ivoire);line-height:1.2;margin:0 0 5px}
.casino .accroche{display:block;font-size:14px;color:var(--gris);line-height:1.5}
.casino .mesure{display:block;margin-top:9px;font-size:13px;color:var(--or-clair);
  font-variant-numeric:tabular-nums;letter-spacing:.02em}

.casino .actions{display:flex;flex-direction:column;gap:9px;min-width:196px}
.casino .actions .btn{width:100%;padding:14px 22px;font-size:13px}

/* --- conditions depliables : le detail sans la surcharge --- */
.casino details{border-top:1px solid var(--trait2)}
.casino summary{list-style:none;cursor:pointer;padding:13px 24px;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gris);
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.casino summary::-webkit-details-marker{display:none}
.casino summary:hover{color:var(--or-clair)}
.casino summary::after{content:"+";font-family:"Bodoni Moda",serif;font-size:19px;
  line-height:1;color:var(--or)}
.casino details[open] summary::after{content:"\2212"}
.casino .conditions{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:1px;background:var(--trait2);border-top:1px solid var(--trait2)}
.casino .condition{background:var(--noir);padding:15px 20px}
.casino .condition b{display:block;font-size:16px;color:var(--or-clair);
  font-variant-numeric:tabular-nums;font-weight:500;line-height:1.3}
.casino .condition span{display:block;margin-top:3px;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gris)}
.casino .condition.alerte b{color:var(--rouge)}

@media (max-width:640px){
  .casino .tete{grid-template-columns:auto 1fr;padding:19px 18px}
  .casino .actions{grid-column:1 / -1;min-width:0;flex-direction:row}
  .casino .actions .btn{flex:1;padding:13px 14px;font-size:12px;letter-spacing:.08em}
  .casino .rang{font-size:25px;width:32px}
}

/* --- bandeau methodologie : ce qui nous distingue --- */
.methode{border:1px solid var(--trait);padding:24px 26px;margin:30px 0;
  background:radial-gradient(600px 170px at 50% 0%, rgba(201,162,39,.06), transparent 72%)}
.methode h3{margin:0 0 10px}
.methode ol{margin:0;padding-left:20px;list-style:decimal;color:var(--ivoire2)}
.methode ol li{margin:8px 0}
.methode ol li::before{display:none}