/* Carte bonus — maquettes Bonus.html (1440) et Bonus-mobile.html (390). Composant autonome (page Bonus et accueil) :
   la mise en page dépend de la largeur de la carte (requête de conteneur), pas de la page.
   Étroite : talon en bandeau, puis offre / conditions / statut empilés. Large (≥ 880 px) : talon vertical puis trois zones côte à côte.
   Habillage « Lounge » : ticket détachable — talon néon propre au casino (NeonArt « chip »), perforation en pointillé et
   encoches de part et d'autre de la jonction. La carte allumée (une seule par liste) passe en violet.
   Univers des preuves : offre vérifiée = chiffre et statut en vert, jauge pleine ; offre partielle ou non prouvée =
   chiffre en lumière, statut au contour, jauge partielle ; donnée absente = brume, tiret et souligné pointillé.
   Le wagering ouvre les conditions dans une case dédiée. Élévation au survol : ombre portée par le ticket (la carte
   elle-même n'a ni fond ni bordure, system.css ne doit pas y dessiner de cadre rectangulaire). */

.bonus-card {
  --bc-line: var(--dc-ligne); --bc-perf: var(--dc-ligne-forte); --bc-r: var(--dc-r-card); --notch: 12px;
  position: relative; container-type: inline-size; min-width: 0; border-radius: var(--bc-r);
}
.bonus-card.tint-v { --bc-glow: color-mix(in srgb, var(--dc-violet) 26%, transparent); }
.bonus-card.tint-g { --bc-glow: color-mix(in srgb, var(--dc-vert) 15%, transparent); }
.bonus-card--lit {
  --bc-line: color-mix(in srgb, var(--dc-violet) 85%, var(--dc-ligne-forte)); --bc-perf: color-mix(in srgb, var(--dc-violet) 65%, transparent);
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--dc-violet) 26%, transparent));
}
@media (hover: hover) {
  .bonus-card:hover { border-color: transparent; box-shadow: none; }
  .bonus-card:hover .bonus-card__ticket { box-shadow: 0 4px 10px color-mix(in srgb, var(--dc-nuit) 50%, transparent), 0 34px 64px -30px var(--dc-nuit); }
}
/* Lumière de pointeur (app.js) : posée par-dessus le ticket, en mode écran, pour rester visible sur ses fonds opaques */
.bonus-card > .ds-spot { z-index: 1; mix-blend-mode: screen; }

.bonus-card__ticket {
  display: flex; flex-direction: column; height: 100%; border-radius: var(--bc-r);
  box-shadow: 0 1px 1px color-mix(in srgb, var(--dc-nuit) 60%, transparent), 0 10px 24px -16px var(--dc-nuit);
  transition: box-shadow var(--ds-dur-slow) var(--ds-ease-out);
}
.bonus-card__stub, .bonus-card__body { position: relative; min-width: 0; border: 1px solid var(--bc-line); background-origin: border-box; }

/* Talon : bandeau néon en tête (carte étroite) */
.bonus-card__stub {
  flex: none; height: 78px; overflow: hidden; border-bottom: 0; border-radius: var(--bc-r) var(--bc-r) 0 0;
  background:
    radial-gradient(circle at 0 100%, transparent calc(var(--notch) - .5px), var(--bc-line) var(--notch) calc(var(--notch) + 1px), transparent calc(var(--notch) + 1.5px)),
    radial-gradient(circle at 100% 100%, transparent calc(var(--notch) - .5px), var(--bc-line) var(--notch) calc(var(--notch) + 1px), transparent calc(var(--notch) + 1.5px)),
    radial-gradient(70% 150% at 78% 0%, var(--bc-glow), transparent 72%),
    var(--nl-grain) 0 0 / 128px 128px repeat,
    var(--dc-nuit);
  -webkit-mask: radial-gradient(circle at 0 100%, transparent var(--notch), var(--dc-nuit) calc(var(--notch) + .5px)), radial-gradient(circle at 100% 100%, transparent var(--notch), var(--dc-nuit) calc(var(--notch) + .5px));
  -webkit-mask-composite: source-in;
  mask: radial-gradient(circle at 0 100%, transparent var(--notch), var(--dc-nuit) calc(var(--notch) + .5px)), radial-gradient(circle at 100% 100%, transparent var(--notch), var(--dc-nuit) calc(var(--notch) + .5px));
  mask-composite: intersect;
}
.bonus-card__stub .na { position: absolute; inset: 0; opacity: .82; transition: opacity var(--ds-dur-slow) var(--ds-ease-out), transform var(--ds-dur-reveal) var(--ds-ease-out); }
.bonus-card__stub .na-glow { transition: opacity var(--ds-dur-slow) var(--ds-ease-out); }
@media (hover: hover) {
  .bonus-card:hover .bonus-card__stub .na { opacity: 1; transform: scale(1.04); }
  .bonus-card:hover .bonus-card__stub .na-glow { opacity: .3; }
}

/* Corps du ticket : perforation en tête, encoches dans les coins */
.bonus-card__body {
  flex: 1 1 auto; display: flex; flex-direction: column; border-top: 1.5px dashed var(--bc-perf); border-radius: 0 0 var(--bc-r) var(--bc-r);
  background:
    radial-gradient(circle at 0 0, transparent calc(var(--notch) - .5px), var(--bc-line) var(--notch) calc(var(--notch) + 1px), transparent calc(var(--notch) + 1.5px)),
    radial-gradient(circle at 100% 0, transparent calc(var(--notch) - .5px), var(--bc-line) var(--notch) calc(var(--notch) + 1px), transparent calc(var(--notch) + 1.5px)),
    var(--nl-card-sheen), var(--ds-surface-raised);
  -webkit-mask: radial-gradient(circle at 0 0, transparent var(--notch), var(--dc-nuit) calc(var(--notch) + .5px)), radial-gradient(circle at 100% 0, transparent var(--notch), var(--dc-nuit) calc(var(--notch) + .5px));
  -webkit-mask-composite: source-in;
  mask: radial-gradient(circle at 0 0, transparent var(--notch), var(--dc-nuit) calc(var(--notch) + .5px)), radial-gradient(circle at 100% 0, transparent var(--notch), var(--dc-nuit) calc(var(--notch) + .5px));
  mask-composite: intersect;
}

/* Offre */
.bonus-card__offer { display: flex; flex-direction: column; gap: 8px; padding: 20px; }
.bonus-card__head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bonus-card__head .logo { width: 40px; height: 40px; border-radius: 11px; box-shadow: 0 0 0 3px var(--dc-velours), 0 0 0 4px color-mix(in srgb, var(--dc-lumiere) 7%, transparent); }
.bonus-card__casino { margin: 0; font-weight: 600; font-size: 16px; line-height: 1.3; letter-spacing: 0; }
.bonus-card__casino a { color: var(--dc-lumiere); text-decoration: none; overflow-wrap: anywhere; }
.bonus-card__casino a:hover { color: var(--dc-vert-clair); text-decoration: underline; }
.bonus-card__type {
  align-self: flex-start; margin: 6px 0 0; font-family: var(--dc-font-cond); font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dc-violet-texte);
}
.bonus-card__big { margin: 0; font-size: 56px; line-height: .9; color: var(--dc-lumiere); overflow-wrap: anywhere; }
.bonus-card--verified .bonus-card__big { color: var(--dc-vert); text-shadow: 0 0 26px color-mix(in srgb, var(--dc-vert) 28%, transparent); }
.bonus-card--verified .bonus-card__type { color: var(--dc-vert); }
.bonus-card__rest { margin: 0; font-size: 15px; line-height: 1.45; color: var(--dc-texte-doux); }

/* Conditions : une donnée par compare-field (libellé Barlow, valeur Outfit, pastille de preuve) */
.bonus-card__terms {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; align-content: center;
  padding: 16px 20px; border-top: 1px solid var(--dc-ligne);
}
.bonus-card__term { min-width: 0; }
.bonus-card__terms .compare-field__label {
  font-family: var(--dc-font-cond); font-weight: 700; font-size: 12px; line-height: 1.25; letter-spacing: .12em; text-transform: uppercase; color: var(--dc-brume);
}
.bonus-card__terms .compare-field__value { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 15px; line-height: 1.35; }
.bonus-card__terms .compare-field__value .seal { margin-left: 0; width: 16px; height: 16px; }
.bonus-card .compare-field--proven .compare-field__value { color: var(--dc-lumiere); font-weight: 600; }
.bonus-card .compare-field--declared .compare-field__value { color: var(--dc-texte-2); font-weight: 500; }
.bonus-card .compare-field--unknown .compare-field__value { font-weight: 400; color: var(--dc-brume); }
/* tiret devant « Non communiqué » ; le code promo (« Aucun code requis ») n'en a pas */
.bonus-card__term:not(.bonus-card__term--promo_code) .compare-field--unknown .compare-field__value::before { content: "—"; color: var(--dc-muet); }
/* Wagering : la condition décisive, dans une case creusée sur toute la largeur */
.bonus-card__term--wagering {
  grid-column: 1 / -1; padding: 12px 14px; border-radius: var(--ds-r-sm);
  background: var(--ds-surface-sunken); box-shadow: inset 0 0 0 1px var(--dc-ligne), inset 0 1px 3px color-mix(in srgb, var(--dc-nuit) 70%, transparent);
}
.bonus-card__term--wagering .compare-field { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.bonus-card__term--wagering .compare-field__value { font-size: 18px; }
.bonus-card__term--wagering:has(.compare-field--proven) { box-shadow: inset 0 0 0 1px var(--ds-border-proof), inset 0 1px 3px color-mix(in srgb, var(--dc-nuit) 70%, transparent); }

/* Statut de vérification + lien partenaire */
.bonus-card__status {
  flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 16px 20px 20px;
  border-top: 1px solid var(--dc-ligne); border-radius: 0 0 var(--bc-r) var(--bc-r);
  background: linear-gradient(180deg, color-mix(in srgb, var(--dc-nuit) 45%, transparent), color-mix(in srgb, var(--dc-nuit) 25%, transparent));
}
/* Jauge des conditions prouvées (décorative) */
.bonus-card__meter { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; max-width: 168px; }
.bonus-card__meter-seg { height: 5px; border-radius: 2px; background: var(--dc-ligne); }
.bonus-card__meter-seg.is-on { background: linear-gradient(180deg, var(--dc-vert-clair), var(--dc-vert)); }
.bonus-card--verified .bonus-card__meter-seg.is-on { box-shadow: 0 0 6px color-mix(in srgb, var(--dc-vert) 45%, transparent); }
.bonus-card__state {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; height: 28px; margin: 0; padding: 0 11px 0 8px; border-radius: var(--ds-r-pill);
  font-family: var(--dc-font-cond); font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  box-shadow: var(--ds-highlight);
}
.bonus-card__state .icon { width: 14px; height: 14px; stroke-width: 2.6; }
.bonus-card__state--verified {
  background: linear-gradient(180deg, var(--dc-vert-clair), var(--dc-vert)); color: var(--dc-nuit);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--dc-lumiere) 55%, transparent), var(--dc-halo-prouve);
}
.bonus-card__state--partial { border: 1.5px solid var(--dc-lumiere); color: var(--dc-lumiere); }
.bonus-card__state--unproven { border: 1.5px dashed var(--dc-muet); color: var(--dc-texte-2); background: color-mix(in srgb, var(--dc-nuit) 50%, transparent); }
.bonus-card__remaining { margin: 0; font-size: 14px; line-height: 1.45; color: var(--dc-texte-2); }
.bonus-card__status .compare-field { flex-direction: row; flex-wrap: wrap; gap: 0 6px; font-size: 14px; }
.bonus-card__status .compare-field__label { font-size: 14px; color: var(--dc-texte-2); }
.bonus-card__status .compare-field__value { font-size: 14px; font-weight: 600; color: var(--dc-texte-2); }
.bonus-card__terms-link { align-self: flex-start; min-height: 40px; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; }
.bonus-card__terms-link .icon { width: 15px; height: 15px; }
.bonus-card__terms-link:hover .icon { transform: translate(2px, -2px); }
.bonus-card .cta-off { font-size: 13px; }
.bonus-card .cta--block .cta__note { text-align: center; font-size: 12px; }
.bonus-card .btn--primary { font-size: 16px; }
.bonus-card:not(.bonus-card--lit) .btn--primary { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--dc-lumiere) 60%, transparent); }
.bonus-card:not(.bonus-card--lit) .btn--primary:hover { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--dc-lumiere) 70%, transparent), var(--dc-halo-action-doux); }

/* Carte large : talon vertical à gauche, perforation verticale, trois zones côte à côte */
@container (min-width: 880px) {
  .bonus-card__ticket { flex-direction: row; }
  .bonus-card__stub {
    width: 120px; height: auto; border: 1px solid var(--bc-line); border-right: 0; border-radius: var(--bc-r) 0 0 var(--bc-r);
    background:
      radial-gradient(circle at 100% 0, transparent calc(var(--notch) - .5px), var(--bc-line) var(--notch) calc(var(--notch) + 1px), transparent calc(var(--notch) + 1.5px)),
      radial-gradient(circle at 100% 100%, transparent calc(var(--notch) - .5px), var(--bc-line) var(--notch) calc(var(--notch) + 1px), transparent calc(var(--notch) + 1.5px)),
      radial-gradient(150% 60% at 50% 0%, var(--bc-glow), transparent 72%),
      var(--nl-grain) 0 0 / 128px 128px repeat,
      var(--dc-nuit);
    -webkit-mask: radial-gradient(circle at 100% 0, transparent var(--notch), var(--dc-nuit) calc(var(--notch) + .5px)), radial-gradient(circle at 100% 100%, transparent var(--notch), var(--dc-nuit) calc(var(--notch) + .5px));
    -webkit-mask-composite: source-in;
    mask: radial-gradient(circle at 100% 0, transparent var(--notch), var(--dc-nuit) calc(var(--notch) + .5px)), radial-gradient(circle at 100% 100%, transparent var(--notch), var(--dc-nuit) calc(var(--notch) + .5px));
    mask-composite: intersect;
  }
  .bonus-card__body {
    flex-direction: row; align-items: stretch; border-top: 1px solid var(--bc-line); border-left: 1.5px dashed var(--bc-perf); border-radius: 0 var(--bc-r) var(--bc-r) 0;
    background:
      radial-gradient(circle at 0 0, transparent calc(var(--notch) - .5px), var(--bc-line) var(--notch) calc(var(--notch) + 1px), transparent calc(var(--notch) + 1.5px)),
      radial-gradient(circle at 0 100%, transparent calc(var(--notch) - .5px), var(--bc-line) var(--notch) calc(var(--notch) + 1px), transparent calc(var(--notch) + 1.5px)),
      var(--nl-card-sheen), var(--ds-surface-raised);
    -webkit-mask: radial-gradient(circle at 0 0, transparent var(--notch), var(--dc-nuit) calc(var(--notch) + .5px)), radial-gradient(circle at 0 100%, transparent var(--notch), var(--dc-nuit) calc(var(--notch) + .5px));
    -webkit-mask-composite: source-in;
    mask: radial-gradient(circle at 0 0, transparent var(--notch), var(--dc-nuit) calc(var(--notch) + .5px)), radial-gradient(circle at 0 100%, transparent var(--notch), var(--dc-nuit) calc(var(--notch) + .5px));
    mask-composite: intersect;
  }
  .bonus-card__offer { flex: 1 1 250px; gap: 12px; padding: 30px 28px; border-right: 1px solid var(--dc-ligne); }
  .bonus-card__head .logo { width: 44px; height: 44px; border-radius: 12px; }
  .bonus-card__casino { font-size: 17px; }
  .bonus-card__type { margin-top: 8px; font-size: 15px; }
  .bonus-card__big { font-size: 68px; }
  .bonus-card__rest { font-size: 16px; }
  .bonus-card__terms {
    flex: 2 1 360px; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 18px 24px; padding: 26px 26px; border-top: 0;
  }
  .bonus-card__terms .compare-field { gap: 6px; }
  .bonus-card__terms .compare-field__label { font-size: 13px; letter-spacing: .14em; }
  .bonus-card__terms .compare-field__value { font-size: 17px; gap: 4px 8px; }
  .bonus-card__terms .compare-field__value .seal { width: 18px; height: 18px; }
  .bonus-card__term--wagering { padding: 12px 16px; }
  .bonus-card__term--wagering .compare-field__value { font-size: 20px; }
  .bonus-card__status { flex: 1 1 290px; gap: 12px; padding: 26px 24px; border-top: 0; border-left: 1px solid var(--dc-ligne); border-radius: 0 var(--bc-r) var(--bc-r) 0; }
  .bonus-card__status .btn { padding: 0 18px; }
  .bonus-card .cta--block .cta__note { text-align: left; font-size: 13px; }
}

@media (max-width: 767px) {
  .bonus-card { --bc-r: var(--dc-r-card-m); --notch: 11px; }
  .bonus-card__stub { height: 64px; }
  .bonus-card--lit { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--dc-violet) 24%, transparent)); }
}
@media (prefers-reduced-motion: reduce) {
  .bonus-card__ticket, .bonus-card__stub .na, .bonus-card__stub .na-glow { transition: none; }
  .bonus-card:hover .bonus-card__stub .na { transform: none; }
}
@media print {
  .bonus-card__stub { display: none; }
  .bonus-card--lit { filter: none; }
  .bonus-card__ticket { box-shadow: none; }
}