/* site-design.css — habillage commun des pages publiques, chargé en dernier.
 *
 * Direction (inspirée des sites de grandes marques d'électronique) : fonds pleins (noir ou
 * blanc), titres gros et gras, boutons en pilule noir ou blanc, cartes plates sans bordure aux
 * grands rayons, beaucoup d'air. Le vert de la marque reste un accent (logo, prix, coches),
 * il ne colore plus les boutons principaux.
 *
 * Ce fichier ne fait que surcharger : chaque page garde ses propres styles en dessous.
 * Les sélecteurs commencent par « html:root body » pour passer devant les règles !important
 * déjà présentes dans les pages et dans site-light.css.
 */

/* ── Fonds pleins ── */
html:root body{background:#000!important}
html:root body::before,html:root body::after{display:none!important}
html:root[data-theme=light] body{background:#fff!important}
html:root[data-theme=light] body::before{display:none!important}

/* ── Titres : gros, gras, serrés ── */
html:root body h1{font-weight:700!important;letter-spacing:-.04em!important;line-height:1.04!important}
html:root body h2{font-weight:700!important;letter-spacing:-.035em!important;line-height:1.08!important}
html:root body h3{font-weight:700!important;letter-spacing:-.02em!important}
html:root body .hero-title{font-size:clamp(42px,6.4vw,92px)!important}
html:root body .hero-grad,html:root body .grad{background:none!important;-webkit-text-fill-color:currentColor!important;color:inherit!important}
html:root body .hero-sub,html:root body .ap-lead{font-size:clamp(16px,1.35vw,20px)!important;line-height:1.5!important}

/* Surtitres : discrets, neutres */
html:root body .section-tag,html:root body .eyebrow,html:root body .gh-eyebrow{color:#8a8a8e!important;font-weight:600!important;letter-spacing:.02em!important;text-transform:none!important;font-size:14px!important}
html:root[data-theme=light] body .section-tag,html:root[data-theme=light] body .eyebrow{color:#6e6e73!important}

/* ── Navigation : barre pleine, sans flou ── */
html:root body nav{background:#000!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-bottom:1px solid rgba(255,255,255,.1)!important}
html:root body .nav-links a{color:#fff!important;font-weight:600!important;font-size:14px!important;opacity:.82}
html:root body .nav-links a:hover,html:root body .nav-links a.active{opacity:1}
html:root[data-theme=light] body nav{background:#fff!important;border-bottom:1px solid rgba(0,0,0,.08)!important}
html:root[data-theme=light] body .nav-links a{color:#000!important}

/* ── Boutons : pilules. Principal blanc sur noir (ou noir sur blanc), secondaire au contour ── */
html:root body .btn{border-radius:999px!important;font-weight:700!important;letter-spacing:-.005em;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;transition:background .18s,color .18s,border-color .18s,transform .18s!important}
html:root body .btn-lg{padding:15px 30px!important;font-size:15px!important}
html:root body .btn-dark,html:root body .btn-green,html:root body .cta-primary,html:root body .hero-cta-primary{background:#fff!important;color:#000!important;border:1px solid #fff!important}
html:root body .btn-dark:hover,html:root body .btn-green:hover,html:root body .cta-primary:hover,html:root body .hero-cta-primary:hover{background:#d9d9de!important;border-color:#d9d9de!important;color:#000!important;transform:none!important}
html:root body .btn-outline,html:root body .btn-ghost{background:transparent!important;color:#fff!important;border:1px solid rgba(255,255,255,.55)!important}
html:root body .btn-outline:hover,html:root body .btn-ghost:hover{background:#fff!important;color:#000!important;border-color:#fff!important}
html:root[data-theme=light] body .btn-dark,html:root[data-theme=light] body .btn-green,html:root[data-theme=light] body .cta-primary,html:root[data-theme=light] body .hero-cta-primary{background:#000!important;color:#fff!important;border-color:#000!important}
html:root[data-theme=light] body .btn-dark:hover,html:root[data-theme=light] body .btn-green:hover,html:root[data-theme=light] body .cta-primary:hover,html:root[data-theme=light] body .hero-cta-primary:hover{background:#2b2b2e!important;border-color:#2b2b2e!important;color:#fff!important}
html:root[data-theme=light] body .btn-outline,html:root[data-theme=light] body .btn-ghost{background:transparent!important;color:#000!important;border-color:#000!important}
html:root[data-theme=light] body .btn-outline:hover,html:root[data-theme=light] body .btn-ghost:hover{background:#000!important;color:#fff!important}
/* Boutons posés sur une image sombre (haut des pages de jeu) : toujours clairs */
html:root body .ghero .btn-green,html:root body .ghero .btn-dark{background:#fff!important;color:#000!important;border-color:#fff!important}
html:root body .ghero .btn-ghost,html:root body .ghero .btn-outline{background:transparent!important;color:#fff!important;border-color:rgba(255,255,255,.6)!important}
html:root body .ghero .btn-ghost:hover,html:root body .ghero .btn-outline:hover{background:#fff!important;color:#000!important}

/* ── Cartes : plates, sans bordure, grands rayons ── */
html:root body .ft-card,html:root body .plan-card,html:root body .gp-card,html:root body .ap-card,html:root body .nw-card,html:root body .pro-card,html:root body .tpl-card,html:root body details{
  background:#141416!important;border:0!important;border-radius:26px!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html:root body .ft-card:hover,html:root body .plan-card:hover,html:root body .gp-card:hover,html:root body .tpl-card:hover{background:#1c1c1f!important;transform:none!important;box-shadow:none!important}
html:root[data-theme=light] body .ft-card,html:root[data-theme=light] body .plan-card,html:root[data-theme=light] body .gp-card,html:root[data-theme=light] body .ap-card,html:root[data-theme=light] body .nw-card,html:root[data-theme=light] body .pro-card,html:root[data-theme=light] body .tpl-card,html:root[data-theme=light] body details{background:#f4f4f6!important}
html:root[data-theme=light] body .ft-card:hover,html:root[data-theme=light] body .plan-card:hover,html:root[data-theme=light] body .gp-card:hover,html:root[data-theme=light] body .tpl-card:hover{background:#ebebee!important}
html:root body details{padding-left:24px!important;padding-right:24px!important;margin-bottom:10px!important}
html:root body .gc-poster{border-radius:26px!important;border:0!important}

/* Sections : plus de filets ni de fonds teintés entre les blocs */
html:root body section{border-top-color:transparent!important;border-bottom-color:transparent!important}
html:root body .section,html:root body section.section{background:transparent!important}

/* Appel final : bloc plein */
/* Seul le bloc lui-même reçoit le fond : ses lignes internes (boutons, partage, mentions) restent
   transparentes, sinon elles recouvrent la lueur du bloc et dessinent une coupure nette */
html:root body .cta-box{border-radius:32px!important;border:0!important;box-shadow:none!important;background-color:#141416!important}
html:root[data-theme=light] body .cta-box{background-color:#f4f4f6!important}

/* Pied de page */
html:root body .site-footer{background:#000!important;border-top:1px solid rgba(255,255,255,.1)!important}
html:root[data-theme=light] body .site-footer{background:#f4f4f6!important;border-top:0!important}

/* Bandeau d'essai gratuit sous la navigation */
html:root body .trial-bar,html:root body #trialBar{background:#141416!important;border:0!important;color:#fff!important}
html:root[data-theme=light] body .trial-bar,html:root[data-theme=light] body #trialBar{background:#f4f4f6!important;color:#000!important}

/* Titre d'accroche : une seule couleur pleine, sans dégradé */
html:root body h1.hero-title,html:root body h1.hero-title span,html:root body h1.hero-title .hero-grad,html:root body h1 .grad{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;-webkit-text-fill-color:#fff!important;color:#fff!important}
html:root[data-theme=light] body h1.hero-title,html:root[data-theme=light] body h1.hero-title span,html:root[data-theme=light] body h1.hero-title .hero-grad,html:root[data-theme=light] body h1 .grad{-webkit-text-fill-color:#000!important;color:#000!important}
html:root body h1,html:root body h2{color:#fff!important}
html:root[data-theme=light] body h1,html:root[data-theme=light] body h2{color:#000!important}
html:root body .ghero h1,html:root body .ghero h2{color:#fff!important}

/* Quatrième formule (Performance) : même carte plate que les trois autres */
html:root body .gp-perf{background:none!important;padding:0!important;border:0!important;box-shadow:none!important;border-radius:26px!important}
html:root body .gp-perf-in{background:#141416!important;border:0!important;border-radius:26px!important;box-shadow:none!important}
html:root[data-theme=light] body .gp-perf-in{background:#f4f4f6!important}