:root {
  /* ======================================================================
     Palette EXTRAITE du CSS de production de celsiuscasino.com
     (styles/main.min.css, 1,3 Mo, recupere le 21/08/2026 via proxy de
     lecture — le domaine est bloque par le FAI sur le poste de build).
     Les valeurs marquees "exact" sont celles du site, au hex pres, avec
     leur nombre d'occurrences dans leur feuille de style.
     ====================================================================== */

  /* ---- Fonds (exact) ---- */
  --bg:        #09153a;   /* fond de page — x113 */
  --bg-2:      #0e1b41;   /* panneaux sombres — x17 */
  --panel:     #121e46;   /* header flottant, sommaire — x17 */
  --surface:   #1a2b5c;   /* cartes, tableaux — x26 */
  --surface-2: #21356a;   /* survol, en-tetes de tableau — x39 */
  --bg-deep:   #071431;   /* creux, ombres internes — exact */

  /* ---- Bordures (exact) ---- */
  --border:        #22345d;   /* x19 */
  --border-strong: #394d84;   /* x30 */

  /* ---- Texte ---- */
  --text:      #ffffff;
  --text-soft: #c3d0f0;   /* eclairci depuis --text-mute : nos pages sont
                             beaucoup plus textuelles que le site d'origine */
  --text-mute: #819cdb;   /* exact — x307, la couleur secondaire dominante */

  /* ---- Accent de marque : le degrade du bouton "S'inscrire" (exact) ---- */
  --accent-1:   #fa365f;   /* x42 */
  --accent-2:   #ec6a47;   /* x18 — variantes du site : #e87a40, #eb6e45 */
  --accent-lt:  #ff9db0;   /* teinte claire derivee, pour les petits libelles */
  --accent-dim: rgba(250, 54, 95, .13);

  /* ---- Liens ---- */
  --link: #58abf2;   /* exact — x17 ; contraste 7,2:1 sur --bg */

  /* ---- CTA = accent de marque (choix du proprietaire, cf. README) ----
     Pour revenir au vert demande par le brief FR-3 §8 :
     --cta-1: #06e70b; --cta-2: #12a75a; --cta-ink: #042415; */
  --cta-1:   #fa365f;
  --cta-2:   #ec6a47;
  --cta-ink: #ffffff;

  /* ---- Vert des gains (exact — x15) ---- */
  --green-1: #06e70b;
  --green-2: #12a75a;

  /* ---- Semantique (jaune du site, exact) ---- */
  --warn:     #fec262;   /* x16 */
  --warn-dim: rgba(254, 194, 98, .10);
  --tip:      #58abf2;
  --tip-dim:  rgba(88, 171, 242, .09);

  /* ---- Degrades des tuiles de categorie, cales sur les teintes du site ---- */
  --grad-orange: linear-gradient(135deg, #b05628, #e87a40);
  --grad-green:  linear-gradient(135deg, #127a3c, #2fae52);
  --grad-purple: linear-gradient(135deg, #7b2fbd, #c82994);
  --grad-blue:   linear-gradient(135deg, #023d7e, #046fe4);

  --radius:    16px;
  --radius-sm: 12px;
  --pill:      999px;
  --maxw:      1200px;
  --readw:     780px;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}


*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
}

html { overflow-x: hidden; overflow-x: clip; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  /* clip decoupe sans creer de conteneur de defilement : la zone de
     reference des elements position:fixed reste le viewport. Avec
     `hidden`, un bloc qui depasse elargit cette zone et la barre basse
     se decentre — c'etait le bug, visible seulement sur / et /fr-fr/
     qui portent les blocs larges (tableaux, carrousels). */
  overflow-x: hidden;
  overflow-x: clip;
}

/* Halo bleu/corail très discret, comme les aplats du site d'origine */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 90vh;
  background:
    radial-gradient(70% 50% at 15% 0%, rgba(4, 111, 228, .26), transparent 70%),
    radial-gradient(45% 45% at 92% 2%, rgba(250, 54, 95, .12), transparent 72%);
  pointer-events: none;
  z-index: 0;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--link); text-decoration: none; }
a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 20px;
  position: relative;
  z-index: 1;
}

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 12px; top: 12px;
  z-index: 100;
  background: var(--green-1); color: #042415;
  padding: 10px 16px; border-radius: 8px; font-weight: 700;
}

.vh {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================ HEADER ============================
   Barre flottante arrondie, détachée des bords — comme sur le site. */

.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 14px 0 6px;
  background: linear-gradient(180deg, var(--bg) 62%, rgba(9, 21, 58, 0));
}

.head-in {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 62px;
  padding: 8px 12px 8px 16px;
  border-radius: var(--radius);
  background: linear-gradient(120deg, #1a2b5c, #121e46 60%, #21356a);
  border: 1px solid var(--border);
  box-shadow: 0 10px 34px rgba(4, 9, 26, .50);
}

/* --- Logo : clin d'œil visuel (rond °C) SANS reprendre le logotype de
       l'opérateur. Le wordmark porte la mention "guide indépendant" :
       ce site n'est pas le site officiel de la marque. --- */
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--text);
  flex: 0 0 auto;
}
.brand:hover { text-decoration: none; color: #fff; }

.brand-mark {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--accent-2), var(--accent-1));
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -.5px;
  box-shadow: 0 4px 16px rgba(250, 54, 95, .40);
}

.brand-txt { display: flex; flex-direction: column; line-height: 1.2; }
.brand-txt b {
  font-size: 14.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.brand-txt span {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: .16em;
}

.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }

.nav a {
  color: var(--text-soft);
  font-size: 14.5px;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: var(--pill);
}
.nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; }
.nav a[aria-current="page"] {
  color: #fff;
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

.nav-cta { margin-left: 8px; }

.burger {
  display: none;
  margin-left: auto;
  width: 42px; height: 42px;
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, .06);
  border-radius: 12px;
  color: var(--text);
  cursor: pointer;
  padding: 0;
}
.burger span {
  display: block;
  width: 18px; height: 2px;
  margin: 3px auto;
  background: currentColor;
  border-radius: 2px;
}

/* ============================ BOUTONS ============================
   Pilules, comme "S'inscrire" / "Voir tout" sur le site d'origine. */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 15px;
  padding: 12px 22px;
  border-radius: var(--pill);
  border: 1px solid transparent;
  cursor: pointer;
  line-height: 1.25;
  text-align: center;
  transition: filter .15s, transform .15s;
}
.btn:hover { text-decoration: none; }

.btn-cta {
  background: linear-gradient(135deg, var(--cta-1), var(--cta-2));
  color: var(--cta-ink);
  box-shadow: 0 8px 24px rgba(250, 54, 95, .38);
}
.btn-cta:hover { color: var(--cta-ink); filter: brightness(1.08); transform: translateY(-1px); }

/* Variante verte (celle demandée à l'origine par le brief FR-3) —
   disponible si besoin d'un second niveau de bouton. */
.btn-green {
  background: linear-gradient(135deg, var(--green-1), var(--green-2));
  color: #042415;
  box-shadow: 0 8px 24px rgba(18, 167, 90, .32);
}
.btn-green:hover { color: #042415; filter: brightness(1.08); transform: translateY(-1px); }

.btn-lg { font-size: 17px; padding: 17px 32px; width: 100%; justify-content: center; }
@media (min-width: 560px) { .btn-lg { width: auto; } }

.btn-ghost {
  background: rgba(255, 255, 255, .06);
  border-color: var(--border-strong);
  color: var(--text);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .11); color: #fff; }

.cta-block { margin: 34px 0; }
.cta-note {
  margin: 11px 0 0;
  font-size: 13.5px;
  color: var(--text-mute);
  font-style: italic;
}

/* ============================ HERO ============================ */

.hero { padding: 30px 0 8px; }

.crumbs { font-size: 13px; color: var(--text-mute); margin-bottom: 20px; }
.crumbs ol {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0; padding: 0;
}
.crumbs li + li::before { content: "›"; margin-right: 8px; color: rgba(255, 255, 255, .25); }
.crumbs a { color: var(--text-mute); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-lt);
  background: var(--accent-dim);
  border: 1px solid rgba(250, 54, 95, .30);
  padding: 6px 14px;
  border-radius: var(--pill);
  margin-bottom: 18px;
}

h1 {
  font-size: clamp(1.9rem, 4.7vw, 3rem);
  line-height: 1.12;
  letter-spacing: -1px;
  font-weight: 800;
  margin: 0 0 18px;
}

.byline { font-size: 13.5px; color: var(--text-mute); margin: 0 0 26px; }
.byline a { color: var(--text-soft); }

.lede { font-size: 18.5px; color: var(--text-soft); }
.lede strong { color: #fff; }

.anchor-jump { margin: 0 0 22px; font-size: 15px; color: var(--text-soft); }
.anchor-jump a { font-weight: 700; }

/* ============================ CONTENU ============================ */

.article { padding-bottom: 60px; }
/* .article > * { max-width: var(--readw); } */
.article > .full { max-width: none; }

/* Titres de section : petit carré dégradé + texte, comme les en-têtes
   "GROS GAINS RÉCENTS" / "NOUVEAUX JEUX" du site d'origine. */
h2 {
  position: relative;
  font-size: clamp(1.35rem, 2.9vw, 1.8rem);
  line-height: 1.24;
  letter-spacing: -.5px;
  font-weight: 800;
  margin: 56px 0 18px;
  padding-left: 46px;
  scroll-margin-top: 104px;
}
h2::before {
  content: "";
  position: absolute;
  left: 0; top: .12em;
  width: 32px; height: 32px;
  border-radius: 10px;
  background: linear-gradient(140deg, var(--accent-2), var(--accent-1));
  box-shadow: 0 4px 14px rgba(250, 54, 95, .32);
}
h2::after {
  content: "";
  position: absolute;
  left: 11px; top: calc(.12em + 10px);
  width: 10px; height: 10px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .9);
}

h3 {
  font-size: 1.13rem;
  font-weight: 800;
  letter-spacing: -.2px;
  margin: 34px 0 10px;
  color: #fff;
  scroll-margin-top: 104px;
}

p { margin: 0 0 18px; }

.article ul, .article ol { margin: 0 0 20px; padding-left: 22px; }
.article li { margin-bottom: 10px; }
.article li::marker { color: var(--accent-lt); font-weight: 700; }

/* Étapes de la procédure (les numéros sont dans le texte des H3) */
.steps h3 { position: relative; padding-left: 18px; margin-top: 32px; }
.steps h3::before {
  content: "";
  position: absolute;
  left: 0; top: .35em;
  width: 4px; height: 1.05em;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--accent-1), var(--accent-2));
}
.steps > p { padding-left: 18px; }

/* Encarts */
.callout {
  border: 1px solid var(--border);
  border-left: 3px solid var(--link);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  margin: 0 0 26px;
  font-size: 15.5px;
  color: var(--text-soft);
}
.callout :last-child { margin-bottom: 0; }
.callout strong { color: #fff; }
.callout-warn { border-left-color: var(--warn); background: var(--warn-dim); }
.callout-tip  { border-left-color: var(--tip);  background: var(--tip-dim); }

/* Tableaux */
.tbl-wrap {
  overflow-x: auto;
  margin: 0 0 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}
table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
thead th {
  background: var(--surface-2);
  text-align: left;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-soft);
  padding: 14px 16px;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: var(--text-soft);
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: rgba(255, 255, 255, .03); }
tbody td:first-child { color: #fff; font-weight: 600; }

/* Sommaire */
.toc {
  border: 1px solid var(--border);
  background: linear-gradient(140deg, var(--panel), var(--bg-2));
  border-radius: var(--radius);
  padding: 22px 24px;
  margin: 8px 0 44px;
}
.toc-title {
  margin: 0 0 14px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-lt);
}
.toc ol {
  margin: 0; padding-left: 20px;
  columns: 2; column-gap: 34px;
  font-size: 14.5px;
}
.toc li { margin-bottom: 8px; break-inside: avoid; }
.toc li::marker { color: var(--text-mute); }
.toc a { color: var(--text-soft); }
@media (max-width: 640px) { .toc ol { columns: 1; } }

/* FAQ */
.faq { margin-top: 8px; }
.faq-item {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  margin-bottom: 12px;
}
.faq-item:hover { border-color: var(--border-strong); }
.faq-q { margin: 0 0 8px; font-size: 16.5px; font-weight: 800; color: #fff; }
.faq-item p:last-child { margin-bottom: 0; color: var(--text-soft); }

/* Cartes */
.cards {
  display: grid; gap: 16px;
  grid-template-columns: 1fr;
  margin: 30px 0 40px;
}
@media (min-width: 720px) { .cards { grid-template-columns: 1fr 1fr; } }

.card {
  display: block;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 22px;
  color: var(--text);
  transition: transform .15s, background .15s, border-color .15s;
}
.card:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
  text-decoration: none;
  transform: translateY(-2px);
}
.card b { display: block; font-size: 17px; margin-bottom: 6px; color: #fff; }
.card span { font-size: 14.5px; color: var(--text-mute); }

/* Lien vers la section suivante — pilule sombre */
.next-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 15.5px;
  color: #fff;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--pill);
  padding: 11px 20px;
  transition: background .15s, transform .15s;
}
.next-link:hover {
  background: var(--surface-2);
  text-decoration: none;
  transform: translateX(2px);
}

/* Bloc "jeu responsable" */
.legal-block {
  margin-top: 58px;
  padding: 26px 26px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
}
.legal-block h3 { margin: 0 0 14px; font-size: 1.1rem; color: #fff; }
.legal-block ul { font-size: 15px; color: var(--text-soft); }
.legal-block li::marker { color: var(--text-mute); }

.age-badge {
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid var(--warn);
  color: var(--warn);
  font-weight: 900;
  font-size: 12px;
  flex: 0 0 auto;
}

/* ============================ FOOTER ============================ */

.site-foot {
  border-top: 1px solid var(--border);
  background: var(--bg-2);
  margin-top: 40px;
  padding: 46px 0 34px;
  font-size: 14.5px;
  color: var(--text-mute);
}
.foot-grid {
  display: grid; gap: 34px;
  grid-template-columns: 1fr;
  margin-bottom: 34px;
}
@media (min-width: 800px)  { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1080px) { .foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1.1fr; } }

.site-foot h3 {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--accent-lt);
  margin: 0 0 14px;
}
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-bottom: 9px; }
.site-foot a { color: var(--text-mute); }
.site-foot a:hover { color: #fff; }
.site-foot p { margin: 0 0 12px; line-height: 1.6; }
.site-foot strong { color: var(--text-soft); }

.foot-warn {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border: 1px solid rgba(254, 194, 98, .22);
  background: var(--warn-dim);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  color: var(--text-soft);
  font-size: 14px;
  margin-bottom: 30px;
}
.foot-warn p { margin: 0; }

.foot-legal {
  border-top: 1px solid var(--border);
  padding-top: 22px;
  font-size: 13px;
  line-height: 1.65;
}

/* ============================ REDIRECTION /go/ ============================ */

.go-page { min-height: 100vh; display: grid; place-items: center; padding: 40px 20px; text-align: center; }
.go-card {
  max-width: 520px;
  border: 1px solid var(--border);
  background: linear-gradient(150deg, var(--panel), var(--bg-2));
  border-radius: 20px;
  padding: 42px 32px;
  box-shadow: 0 20px 50px rgba(4, 9, 26, .55);
}
.go-card h1 { font-size: 1.6rem; }
.spinner {
  width: 38px; height: 38px;
  margin: 0 auto 24px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .12);
  border-top-color: var(--accent-1);
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
  html { scroll-behavior: auto; }
  .btn, .card, .next-link { transition: none; }
}

/* ============================ AUTEUR ============================ */

.author-card {
  display: flex; flex-wrap: wrap; align-items: center; gap: 22px;
  border: 1px solid var(--border);
  background: linear-gradient(140deg, var(--panel), var(--surface));
  border-radius: var(--radius);
  padding: 26px;
  margin-bottom: 34px;
}
.author-ava {
  width: 78px; height: 78px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 26px; font-weight: 900;
  color: #fff;
  background: linear-gradient(140deg, var(--accent-2), var(--accent-1));
  box-shadow: 0 6px 20px rgba(250, 54, 95, .35);
  flex: 0 0 auto;
}
.author-card b { display: block; font-size: 20px; color: #fff; }
.author-card span { font-size: 14.5px; color: var(--text-mute); }

/* Code inline */
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1px 6px;
  color: var(--accent-lt);
}

.hero .cards { max-width: 940px; }

/* ============================ RESPONSIVE ============================ */

@media (max-width: 900px) {
  .burger { display: block; }
  .nav {
    position: absolute;
    left: 20px; right: 20px; top: 84px;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 16px 40px rgba(4, 9, 26, .60);
    padding: 14px;
    margin: 0;
    display: none;
  }
  .nav.open { display: flex; }
  .nav a { padding: 13px 16px; font-size: 16px; border-radius: 12px; }
  .nav-cta { margin: 8px 0 0; justify-content: center; }
  body { font-size: 16.5px; }
  h2 { padding-left: 40px; margin-top: 46px; }
  h2::before { width: 28px; height: 28px; border-radius: 9px; }
  h2::after { left: 9px; top: calc(.12em + 9px); }
  .legal-block { padding: 22px 20px 8px; }
}

/* ==========================================================================
   RAIL LATÉRAL — barre d'icônes fixe à gauche, comme sur celsiuscasino.com.
   Repliée : icônes seules + libellé en infobulle. Dépliée : icônes + libellés.
   Masquée sous 1024 px : le burger du header prend le relais.
   ========================================================================== */

.rail { display: none; }

@media (min-width: 1024px) {

  body { padding-left: 92px; }

  .rail {
    position: fixed;
    left: 14px;
    top: 14px;
    bottom: 14px;
    width: 64px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 10px 8px;
    border-radius: 18px;
    background: linear-gradient(180deg, #1a2b5c, #121e46 55%, #21356a);
    border: 1px solid var(--border);
    box-shadow: 0 12px 40px rgba(4, 9, 26, .55);
    transition: width .18s ease;
  }
  .rail.open { width: 246px; }

  /* Bouton hamburger du rail */
  .rail-toggle {
    flex: 0 0 auto;
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, .05);
    border-radius: 13px;
    color: var(--text-soft);
    cursor: pointer;
    padding: 0;
  }
  .rail-toggle:hover { background: rgba(255, 255, 255, .11); color: #fff; }
  .rail-toggle svg { width: 20px; height: 20px; }

  /* Zone defilante : le rail contient maintenant assez d'entrees pour
     depasser la hauteur d'ecran sur un petit portable. */
  .rail-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 2px -2px 0;
    padding: 0 2px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .18) transparent;
  }
  .rail-scroll::-webkit-scrollbar { width: 5px; }
  .rail-scroll::-webkit-scrollbar-track { background: transparent; }
  .rail-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .16);
    border-radius: 3px;
  }

  .rail-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  /* Separateur de groupe : simple filet quand le rail est replie,
     libelle en capitales quand il est deplie. */
  .rail-sep {
    margin: 12px 0 7px;
    padding: 0;
    line-height: 1;
  }
  .rail-sep:first-child { margin-top: 4px; }
  .rail-sep span {
    display: block;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-mute);
    padding-left: 14px;
    white-space: nowrap;
    overflow: hidden;
  }
  .rail:not(.open) .rail-sep {
    margin: 10px 8px 8px;
    height: 1px;
    background: rgba(255, 255, 255, .1);
  }
  .rail:not(.open) .rail-sep span { display: none; }

  .rail-foot {
    flex: 0 0 auto;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, .09);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  /* Élément générique du rail */
  .rail a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    height: 42px;
    padding: 0 12px;
    border-radius: 13px;
    color: var(--text-soft);
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
  }
  .rail a svg { width: 20px; height: 20px; flex: 0 0 auto; }
  .rail a:hover { background: rgba(255, 255, 255, .09); color: #fff; text-decoration: none; }

  .rail a[aria-current="page"] {
    color: #fff;
    background: rgba(255, 255, 255, .1);
    box-shadow: inset 0 0 0 1px var(--border-strong);
  }
  /* Liseré corail sur l'élément actif, comme le rail d'origine */
  .rail a[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: -8px; top: 9px;
    width: 3px; height: 24px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--accent-1), var(--accent-2));
  }

  /* CTA du rail : corail, comme "S'inscrire" */
  .rail-cta {
    color: #fff !important;
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
    box-shadow: 0 6px 18px rgba(250, 54, 95, .35);
  }
  .rail-cta:hover { filter: brightness(1.08); background: linear-gradient(135deg, var(--accent-1), var(--accent-2)); }

  /* Rappel 18+ */
  .rail-age em {
    display: grid; place-items: center;
    width: 20px; height: 20px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1.5px solid var(--warn);
    color: var(--warn);
    font-size: 8.5px;
    font-weight: 900;
    font-style: normal;
  }
  .rail-age { color: var(--text-mute); font-size: 13.5px; }

  /* --- Libellés : cachés quand le rail est replié, infobulle au survol --- */
  .rail:not(.open) a span {
    position: absolute;
    left: 56px;
    padding: 7px 13px;
    border-radius: 10px;
    background: #121e46;
    border: 1px solid var(--border-strong);
    box-shadow: 0 8px 22px rgba(4, 9, 26, .60);
    color: #fff;
    font-size: 13.5px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s;
  }
  .rail:not(.open) a:hover span,
  .rail:not(.open) a:focus-visible span { opacity: 1; }

  .rail.open a { padding: 0 14px; }
  .rail.open .rail-toggle { width: 100%; justify-items: start; padding-left: 13px; }
}

/* ==========================================================================
   TUILES DE NAVIGATION — reprise des tuiles de catégorie colorées du site
   d'origine (orange / vert / violet / bleu) pour les liens internes.
   ========================================================================== */

.next-link.tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: var(--readw);
  padding: 20px 24px;
  border: 0;
  border-radius: var(--radius);
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 10px 28px rgba(4, 9, 26, .40);
}
.next-link.tile::after { content: "→"; font-size: 20px; opacity: .85; }
.next-link.tile:hover { transform: translateY(-2px); filter: brightness(1.07); }

.t-orange { background: var(--grad-orange); }
.t-green  { background: var(--grad-green); }
.t-purple { background: var(--grad-purple); }
.t-blue   { background: var(--grad-blue); }

/* Cartes colorées (page 404) */
.card.t-orange, .card.t-green, .card.t-purple, .card.t-blue { border-color: transparent; }
.card.t-orange:hover, .card.t-green:hover,
.card.t-purple:hover, .card.t-blue:hover { filter: brightness(1.08); background-blend-mode: normal; }
.card.t-orange span, .card.t-green span,
.card.t-purple span, .card.t-blue span { color: rgba(255, 255, 255, .82); }

/* ==========================================================================
   BARRE BASSE FLOTTANTE — reprise de la barre de navigation basse du site
   d'origine, mais affichée sur TOUTES les tailles d'écran (desktop inclus).
   ========================================================================== */

body { padding-bottom: 104px; }

.botbar {
  /* Centrage : boite etiree sur toute la largeur (left:0/right:0) puis
     margin-inline:auto sur une largeur max-content.
     PAS de "left:50% + translateX(-50%)" : avec un seul bord ancre, la
     largeur d'un element fixed se calcule en shrink-to-fit sur l'espace
     restant (viewport - left), soit la moitie de l'ecran. Le flex ne rentre
     pas, deborde a droite et la barre part de travers sur mobile. */
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: max-content;
  margin-inline: auto;
  z-index: 70;
  display: flex;
  align-items: stretch;
  gap: 2px;
  max-width: calc(100% - 24px);
  padding: 7px;
  border-radius: var(--pill);
  background: rgba(26, 43, 92, .84);
  border: 1px solid var(--border-strong);
  box-shadow: 0 14px 40px rgba(4, 9, 26, .60);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
}

.botbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  gap: 4px;
  min-width: 64px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--pill);
  background: none;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  color: var(--text-mute);
  cursor: pointer;
  white-space: nowrap;
}
.botbar-item svg { width: 21px; height: 21px; }
.botbar-item span { display: block; }

.botbar-item:hover { background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; }

.botbar-item[aria-current="page"] {
  color: #fff;
  background: rgba(255, 255, 255, .11);
}

/* CTA central, corail — l'équivalent du "S'inscrire" de la barre d'origine */
.botbar-cta {
  flex: 0 0 auto;          /* ne se comprime jamais : le libelle doit tenir */
  color: #fff;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  box-shadow: 0 6px 18px rgba(250, 54, 95, .40);
  padding-inline: 20px;
}
.botbar-cta:hover {
  color: #fff;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  filter: brightness(1.08);
}

/* Sur desktop la barre est recentrée par rapport à la colonne de contenu,
   qui est décalée par le rail latéral. */
@media (min-width: 1024px) {
  /* Le rail occupe 92 px a gauche : on decale la zone de centrage d'autant
     pour que la barre soit centree sur la colonne de contenu, pas sur
     le viewport. Remplace l'ancien hack margin-left qui cassait
     margin-inline: auto. */
  .botbar { left: 92px; }
}

/* Écrans étroits : libellés masqués sauf sur le CTA, police et icônes
   un cran plus petites pour que la pilule garde son libellé entier. */
@media (max-width: 560px) {
  .botbar { gap: 0; padding: 6px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .botbar-item { min-width: 0; padding: 8px 10px; }
  .botbar-item svg { width: 20px; height: 20px; }
  .botbar-item span { display: none; }
  .botbar-cta { padding-inline: 16px; gap: 3px; }
  .botbar-cta svg { width: 18px; height: 18px; }
  .botbar-cta span { display: block; font-size: 10.5px; letter-spacing: -.1px; }
  body { padding-bottom: 88px; }
}

/* Très petits écrans : le CTA passe en icône seule, comme les autres */
@media (max-width: 390px) {
  .botbar-item { padding: 8px 9px; }
  .botbar-cta { padding-inline: 13px; }
  .botbar-cta span { display: none; }
  .botbar-cta svg { width: 20px; height: 20px; }
}

/* ==========================================================================
   BLOCS VISUELS DE L'ACCUEIL — reprise de la mise en page du site d'origine
   (bannière, tuiles de catégorie, grilles de jeux, studios, paiements,
   sports, flux de mises).

   IMAGES : chaque bloc porte un dégradé de secours ET une variable --img.
   Tant qu'aucun fichier n'est déposé dans /assets/img/, le dégradé s'affiche
   seul — aucune image cassée. Dès que le fichier existe, il se superpose.
   Voir IMAGES.md pour la liste, les tailles et les prompts.
   ========================================================================== */

/* --- En-tête de bloc : petit libellé capitales + carré dégradé.
       Volontairement PAS un <h2>/<h3> : le squelette de titres est figé
       par le brief FR-3 et ne doit pas bouger. --- */
.block-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 46px 0 18px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.block-head::before {
  content: "";
  width: 26px; height: 26px;
  flex: 0 0 auto;
  border-radius: 8px;
  background: linear-gradient(140deg, var(--accent-2), var(--accent-1));
  box-shadow: 0 3px 12px rgba(250, 54, 95, .30);
}
.block-head em {
  font-style: normal;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--text-mute);
  font-size: 12.5px;
}

/* --- Bannière large --- */
.banner {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 5;
  min-height: 190px;
  margin: 6px 0 30px;
  /* Illustration a droite, texte a gauche — comme les slides du site
     d'origine. Le visuel est un recadrage de leur banniere "retraits",
     texte anglais retire (voir IMAGES.md). */
  background:
    var(--img, none) right center / auto 100% no-repeat,
    linear-gradient(110deg, #0e1b41 0%, #1a2b5c 38%, #4a2a52 66%, #8a4a28 100%);
  border: 1px solid var(--border);
  box-shadow: 0 14px 40px rgba(4, 9, 26, .45);
  display: flex;
  align-items: center;
  padding: 26px clamp(22px, 4vw, 48px);
}
.banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(9, 21, 58, .96) 0%, rgba(9, 21, 58, .80) 40%,
    rgba(9, 21, 58, .28) 68%, transparent 100%);
}
.banner-txt { position: relative; z-index: 1; max-width: 30ch; }
.banner-txt b {
  display: block;
  font-size: clamp(1.15rem, 2.6vw, 1.75rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.5px;
  color: #fff;
  margin-bottom: 8px;
}
.banner-txt span { font-size: 14.5px; color: var(--text-soft); }

/* --- Grille de tuiles (2 ou 4 colonnes) --- */
.tiles {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, 1fr);
  margin: 0 0 34px;
}
@media (min-width: 860px) { .tiles-4 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 480px) { .tiles { grid-template-columns: 1fr; } }

.tile-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 104px;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  color: #fff;
  font-weight: 800;
  font-size: 15.5px;
  line-height: 1.2;
  letter-spacing: -.2px;
  background: var(--img, none) center / cover no-repeat, var(--grad, var(--grad-blue));
  box-shadow: 0 8px 22px rgba(4, 9, 26, .35);
}
.tile-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(7, 20, 49, .74) 100%);
}
.tile-card > span { position: relative; z-index: 1; }
.tile-card small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  opacity: .85;
  letter-spacing: 0;
}
a.tile-card:hover { color: #fff; text-decoration: none; filter: brightness(1.08); transform: translateY(-2px); }
a.tile-card { transition: filter .15s, transform .15s; }

/* --- Rangée défilante de vignettes de jeu (portrait, comme l'original) --- */
.rail-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 148px;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 12px;
  margin: 0 0 32px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .18) transparent;
}
.rail-row::-webkit-scrollbar { height: 6px; }
.rail-row::-webkit-scrollbar-track { background: transparent; }
.rail-row::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 3px; }

.game-card {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-sm);
  overflow: hidden;
  scroll-snap-align: start;
  display: flex;
  align-items: flex-end;
  padding: 12px;
  background: var(--img, none) center / cover no-repeat, var(--grad, var(--grad-purple));
  box-shadow: 0 6px 18px rgba(4, 9, 26, .35);
}
.game-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(7, 20, 49, .82) 100%);
}
.game-card b {
  position: relative; z-index: 1;
  font-size: 13.5px;
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}

/* --- Studios / moyens de paiement : puces texte, sans logos.
       Les logos sont des marques déposées : ils viennent du media kit
       de l'opérateur, jamais d'une génération d'image. --- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0 0 14px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--pill);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-soft);
}
.chip i {
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--accent-lt);
}
.chip-note { font-size: 13.5px; color: var(--text-mute); margin: 0 0 30px; }

.pay-panel {
  border: 1px solid var(--border);
  background: linear-gradient(140deg, var(--panel), var(--bg-2));
  border-radius: var(--radius);
  padding: 22px 24px 10px;
  margin: 0 0 32px;
}
.pay-panel h4 {
  margin: 0 0 12px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent-lt);
}
.pay-panel h4 + .chips { margin-bottom: 22px; }

/* --- Flux de mises (démonstration) --- */
.bets-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid rgba(254, 194, 98, .22);
  background: var(--warn-dim);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin: 0 0 16px;
  font-size: 13.5px;
  color: var(--text-soft);
}
.bets-note p { margin: 0; }
.bets-note strong { color: #fff; }

table.bets { min-width: 640px; font-variant-numeric: tabular-nums; }
table.bets td { white-space: nowrap; }
table.bets .g { color: var(--green-1); font-weight: 700; }
table.bets .m { color: var(--accent-lt); font-weight: 700; }
table.bets .p { color: var(--text-mute); font-size: 13px; }
table.bets tbody tr { animation: betIn .35s ease both; }
@keyframes betIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  table.bets tbody tr { animation: none; }
}
.bets-empty { color: var(--text-mute); font-size: 14px; }

/* --- Tuile dont l'image est un objet detoure (fond transparent) : il se pose
       a droite du degrade, exactement comme les tuiles du site d'origine. --- */
.tile-card.tile-obj {
  align-items: center;
  background: var(--img, none) right center / auto 116% no-repeat,
              var(--grad, var(--grad-blue));
}
.tile-card.tile-obj::after {
  background: linear-gradient(90deg,
    rgba(7, 20, 49, .55) 0%, rgba(7, 20, 49, .12) 58%, transparent 100%);
}

/* --- Vignette carree dont le titre est deja incruste dans l'image :
       le libelle reste dans le DOM pour les lecteurs d'ecran, mais n'est
       pas affiche deux fois. --- */
.game-card.game-sq { aspect-ratio: 1 / 1; }
.game-card.game-sq::after { display: none; }
.game-card.game-sq b {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Puces avec logo (moyens de paiement) --- */
.chip img { display: block; height: 22px; width: auto; }
.chip-logo { padding: 9px 15px; }
.chip-coin img { height: 20px; width: 20px; }

/* Rangée de vignettes carrées : colonnes un peu plus larges */
.rail-row.rail-sq { grid-auto-columns: 156px; }

/* --- Tuile dont l'image est un glyphe SVG maison : filigrane a droite --- */
.tile-card.tile-glyph {
  align-items: center;
  background: var(--img, none) right 14px center / auto 68% no-repeat,
              var(--grad, var(--grad-blue));
}
.tile-card.tile-glyph::after { display: none; }

/* --- Vignette de sport : glyphe centre, libelle en bas --- */
.game-card.game-glyph {
  background: var(--img, none) center 38% / auto 42% no-repeat,
              var(--grad, var(--grad-blue));
}

/* ==========================================================================
   CARROUSELS — barre de titre avec fleches, molette horizontale.
   ========================================================================== */

.block-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 46px 0 18px;
}
.block-bar .block-head { margin: 0; flex: 1 1 auto; min-width: 0; }

.row-nav { display: flex; gap: 8px; flex: 0 0 auto; }

.row-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  border-radius: 50%;
  color: var(--text-soft);
  cursor: pointer;
  padding: 0;
  transition: background .15s, color .15s, opacity .15s;
}
.row-btn:hover:not(:disabled) { background: var(--surface-2); color: #fff; }
.row-btn:disabled { opacity: .32; cursor: default; }
.row-btn svg { width: 18px; height: 18px; }

/* La rangee elle-meme : focusable au clavier, defilement doux */
.rail-row {
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
}
.rail-row:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}
@media (prefers-reduced-motion: reduce) {
  .rail-row { scroll-behavior: auto; }
}

/* --- Tuile dont le visuel est un recadrage de banniere : il remplit la
       tuile, le libelle passe par-dessus avec un voile a gauche. --- */
.tile-card.tile-shot {
  align-items: center;
  background: var(--img, none) right center / cover no-repeat,
              var(--grad, var(--grad-blue));
}
.tile-card.tile-shot::after {
  background: linear-gradient(90deg,
    rgba(6, 14, 38, .92) 0%, rgba(6, 14, 38, .62) 46%,
    rgba(6, 14, 38, .18) 78%, transparent 100%);
}

/* Vignette de sport : personnage detoure en bas, libelle par-dessus */
.game-card.game-photo {
  background: var(--img, none) center bottom / auto 92% no-repeat,
              var(--grad, var(--grad-blue));
}
.game-card.game-photo::after {
  background: linear-gradient(180deg, transparent 45%, rgba(6, 14, 38, .88) 100%);
}

/* Dégradé sarcelle, pour la tuile "retraits" (fond de la bannière d'origine) */
:root { --grad-teal: linear-gradient(135deg, #0e5e5a, #1f9e86); }

/* ==========================================================================
   HERO PROMOTIONNEL — image de fond, offre au premier plan, CTA.
   Placé tout en haut de <main>, avant le fil d'Ariane et le H1.
   ========================================================================== */

.promo {
  position: relative;
  display: flex;
  align-items: center;
  width: calc(100% - 40px);
  max-width: var(--maxw);
  margin: 16px auto 4px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 16px 44px rgba(4, 9, 26, .5);
  isolation: isolate;
}

.promo picture,
.promo img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: -1;
}
.promo img { object-fit: cover; object-position: 72% center; }

/* Voile : la moitié gauche reste lisible, la droite laisse voir l'image */
.promo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(95deg,
    rgba(6, 13, 38, .95) 0%, rgba(6, 13, 38, .86) 38%,
    rgba(6, 13, 38, .48) 66%, rgba(6, 13, 38, .12) 100%);
}

.promo-in {
  padding: clamp(24px, 4vw, 46px);
  max-width: 640px;
}

.promo-kicker {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-lt);
  background: var(--accent-dim);
  border: 1px solid rgba(250, 54, 95, .32);
  padding: 6px 14px;
  border-radius: var(--pill);
  margin-bottom: 16px;
}

.promo-title {
  margin: 0 0 12px;
  font-size: clamp(1.6rem, 4.2vw, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.8px;
  color: #fff;
}
.promo-title b {
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 900;
}

.promo-sub {
  margin: 0 0 22px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--text-soft);
  max-width: 52ch;
}

.promo-btn { margin-bottom: 14px; }

.promo-note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-mute);
  max-width: 58ch;
}

@media (max-width: 620px) {
  .promo img { object-position: 78% center; }
  .promo::before {
    background: linear-gradient(180deg,
      rgba(6, 13, 38, .70) 0%, rgba(6, 13, 38, .90) 45%, rgba(6, 13, 38, .97) 100%);
  }
  .promo-in { padding: 26px 22px 24px; }
  .promo-sub { font-size: 15px; }
}

/* Vignette de jeu cliquable (lien partenaire). Le libellé est déjà dans
   l'image ; le <b> visuellement masqué sert de texte accessible au lien. */
a.game-card {
  display: flex;
  color: inherit;
  cursor: pointer;
  transition: transform .15s, filter .15s, box-shadow .15s;
}
a.game-card:hover,
a.game-card:focus-visible {
  text-decoration: none;
  transform: translateY(-3px);
  filter: brightness(1.08);
  box-shadow: 0 12px 26px rgba(4, 9, 26, .55);
}
a.game-card:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  a.game-card { transition: none; }
  a.game-card:hover, a.game-card:focus-visible { transform: none; }
}

/* ==========================================================================
   GARDE-FOUS ANTI-DEBORDEMENT HORIZONTAL
   Les blocs larges de l'accueil (tableaux, carrousels, panneaux) doivent
   rester dans la colonne. Sans ca, la page devient plus large que l'ecran :
   le contenu semble correct grace au rognage, mais tout element
   position:fixed centre se decale. Voir la regle overflow-x plus haut.
   ========================================================================== */

.tbl-wrap,
.rail-row,
.pay-panel,
.banner,
.bets-block,
.toc { max-width: 100%; }

/* Un conteneur de defilement ne doit jamais imposer sa largeur intrinseque */
.tbl-wrap,
.rail-row { min-width: 0; }

/* Enfants de flex : autoriser la compression sous la largeur min-content */
.bets-note p,
.block-bar .block-head,
.banner-txt,
.promo-in,
.author-card > div,
.foot-warn p { min-width: 0; }

/* Les cellules en nowrap restent dans leur conteneur defilant */
.tbl-wrap table { max-width: none; }

/* ==========================================================================
   CHARGEMENT DIFFERE DES FONDS (voir assets/js/lazy-bg.js)
   L'URL est dans data-bg ; --img n'est posee qu'a l'approche du viewport.
   ========================================================================== */

/* Le titre des jeux est incruste dans l'image. Tant que l'image n'est pas
   la — chargement en cours, ou JavaScript absent — on remontre le libelle
   texte, sinon la vignette serait une tuile de couleur muette. */
.game-card.game-sq:not(.bg-on) b {
  position: static;
  width: auto; height: auto;
  margin: 0; padding: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
}

/* Reserve la place : pas de saut de mise en page quand le fond arrive. */
[data-bg] { background-color: rgba(255, 255, 255, .02); }

/* ==========================================================================
   HERO PROMO — flou de l'image de fond pour la lisibilité du texte.
   Bloc ajouté en fin de feuille : il surcharge les règles .promo ci-dessus
   (même spécificité, déclaration plus tardive). Pour régler l'intensité,
   ne toucher qu'aux valeurs blur() ci-dessous.
   ========================================================================== */

.promo img {
  /* scale() est indispensable : filter: blur() échantillonne au-delà des
     bords et laisse un liseré translucide. En agrandissant l'image de 8 %,
     ces bords sortent du cadre, que .promo rogne déjà (overflow: hidden). */
  filter: blur(6px) brightness(.82) saturate(1.05);
  transform: scale(1.08);
  transform-origin: center;
}

/* Voile renforcé : le flou seul ne suffit pas si l'image est claire
   (rayons dorés, billets). Le dégradé garantit le contraste du texte. */
.promo::before {
  background: linear-gradient(95deg,
    rgba(6, 13, 38, .93) 0%, rgba(6, 13, 38, .84) 42%,
    rgba(6, 13, 38, .62) 70%, rgba(6, 13, 38, .44) 100%);
}

@media (max-width: 620px) {
  /* Sur mobile le texte passe par-dessus toute l'image : flou et voile
     plus marqués, sinon les titres deviennent illisibles. */
  .promo img { filter: blur(5px) brightness(.70) saturate(1.05); transform: scale(1.10); }
  .promo::before {
    background: linear-gradient(180deg,
      rgba(6, 13, 38, .80) 0%, rgba(6, 13, 38, .92) 45%, rgba(6, 13, 38, .97) 100%);
  }
}