/* Carte catalogue — composant central (accueil, catalogue, alternatives de fiche).
   Hiérarchie : bannière néon (décor) → tuile logo et nom → instrument de confiance (niveau de preuve, score, couverture)
   → données clés → actions. Trois registres de données, toujours portés par le texte et la forme du sceau :
   prouvée (lumière, sceau plein), déclarée (texte secondaire, sceau contour), non communiquée (brume, souligné pointillé).
   Fiche sans donnée publiée (.casino-card--pending) : même structure, mais bannière éteinte et surface creusée, pour
   qu'aucune fiche vide ne paraisse fiable. Survol (élévation, bordure), appui et lumière de pointeur : system.css. */

.casino-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--ds-space-4); min-width: 0;
  padding: 100px 28px 26px; border-radius: var(--ds-r-lg); border: var(--ds-border);
  background:
    radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--dc-violet) 6%, transparent), transparent 62%),
    var(--nl-card-sheen), var(--ds-surface-raised);
  box-shadow: var(--ds-elev-1);
}
/* Bordure lumineuse : la lumière tombe d'en haut et s'éteint sur les flancs (liseré d'1 px juste sous la bordure) */
.casino-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--dc-lumiere) 16%, transparent), transparent 34%, transparent 78%, color-mix(in srgb, var(--dc-violet) 16%, transparent));
  -webkit-mask: linear-gradient(var(--dc-nuit) 0 0) content-box exclude, linear-gradient(var(--dc-nuit) 0 0);
  mask: linear-gradient(var(--dc-nuit) 0 0) content-box exclude, linear-gradient(var(--dc-nuit) 0 0);
}
/* Filet de lumière en tête de carte, allumé au survol et au focus clavier */
.casino-card::after {
  content: ""; position: absolute; left: 28px; right: 28px; top: 0; height: 1px; pointer-events: none;
  background: var(--ds-grad-edge); opacity: 0;
  transition: opacity var(--ds-dur-slow) var(--ds-ease-out);
}
.casino-card.card--lit { border: 1.5px solid var(--dc-violet); box-shadow: var(--ds-elev-2), var(--dc-halo-carte); }
.casino-card.card--lit::after { opacity: .7; }
.casino-card:has(:focus-visible) { border-color: var(--ds-border-hover); }
.casino-card:has(:focus-visible)::after { opacity: 1; }
@media (hover: hover) { .casino-card:hover::after { opacity: 1; } }

/* Bannière : la composition néon unique du casino, sur velours noir, qui s'efface vers le contenu */
.casino-card__art {
  position: absolute; z-index: -1; inset: 0 0 auto; height: 132px; overflow: hidden;
  background:
    radial-gradient(80% 120% at 80% 0%, var(--cc-glow), transparent 70%),
    linear-gradient(color-mix(in srgb, var(--dc-nuit) 55%, transparent), color-mix(in srgb, var(--dc-nuit) 55%, transparent)),
    var(--nl-grain) 0 0 / 128px 128px repeat,
    var(--dc-nuit);
  -webkit-mask-image: linear-gradient(180deg, var(--dc-nuit) 45%, transparent 96%); mask-image: linear-gradient(180deg, var(--dc-nuit) 45%, transparent 96%);
}
.casino-card.tint-v { --cc-glow: color-mix(in srgb, var(--dc-violet) 22%, transparent); }
.casino-card.tint-g { --cc-glow: color-mix(in srgb, var(--dc-vert) 12%, transparent); }
.casino-card__art .na { opacity: .86; transform-origin: 72% 0; transition: transform var(--ds-dur-reveal) var(--ds-ease-out), opacity var(--ds-dur-slow) var(--ds-ease-out); }
.casino-card__art .na-glow { transition: opacity var(--ds-dur-slow) var(--ds-ease-out); }
@media (hover: hover) {
  .casino-card:hover .casino-card__art .na { opacity: 1; transform: scale(1.035); }
  .casino-card:hover .casino-card__art .na-glow { opacity: .3; }
}

/* Identité : la tuile logo chevauche la bannière, sertie comme une plaque vissée */
.casino-card__head { display: flex; align-items: center; gap: var(--ds-space-4); }
.casino-card__head .logo {
  box-shadow: 0 0 0 4px var(--dc-velours), 0 0 0 5px color-mix(in srgb, var(--dc-lumiere) 8%, transparent), 0 12px 24px -10px var(--dc-nuit);
}
.casino-card__id { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.casino-card__name { margin: 0; font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: -.01em; }
.casino-card__name a { color: var(--dc-lumiere); text-decoration: none; }
.casino-card__name a:hover { color: var(--dc-vert-clair); }
.casino-card__operator { margin: 0; font-size: 14px; line-height: 1.4; color: var(--dc-brume); overflow-wrap: anywhere; }

/* Instrument de confiance : niveau de preuve et score, puis jauge de couverture, dans un panneau creusé */
.casino-card__proof {
  display: flex; flex-direction: column; gap: var(--ds-space-3); margin: 0 -10px; padding: 14px 14px 16px; border-radius: var(--ds-r-md);
  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);
}
.casino-card__level {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-2) var(--ds-space-3); flex-wrap: wrap;
  padding-bottom: var(--ds-space-3); border-bottom: 1px solid var(--dc-ligne);
}
/* Le score reste calé à droite, même quand un niveau long (« Tested with real money ») le renvoie à la ligne */
.casino-card__level > .score, .casino-card__level > .score-none { margin-left: auto; }
.casino-card__proof .coverage { gap: 10px; }
.casino-card__proof .coverage__label { font-size: 13px; }

/* Données clés : prouvée > déclarée > non communiquée */
.casino-card__data { margin-top: 2px; }
.casino-card .dl-rows .compare-field { padding: 11px 0; }
.casino-card .dl-rows .compare-field__label { font-size: 14px; }
.casino-card .compare-field--proven .compare-field__value { color: var(--dc-lumiere); font-weight: 600; }
.casino-card .compare-field--declared .compare-field__value { color: var(--dc-texte-2); font-weight: 500; }
.casino-card .compare-field--plain .compare-field__value { color: var(--dc-texte-2); }
.casino-card .compare-field--unknown .compare-field__value { color: var(--dc-brume); font-weight: 400; }

/* Volet « Voir N données de plus » */
.casino-card__more { margin-top: -8px; }
.casino-card__more > summary {
  display: inline-flex; align-items: center; gap: var(--ds-space-2); min-height: 44px; list-style: none; cursor: pointer;
  color: var(--dc-violet-texte); font-weight: 600; font-size: 15px; border-radius: var(--ds-r-xs);
  transition: color var(--ds-dur-fast) var(--ds-ease-out);
}
.casino-card__more > summary::-webkit-details-marker { display: none; }
.casino-card__more > summary .icon { width: 16px; height: 16px; transition: transform var(--ds-dur-base) var(--ds-ease-out); }
.casino-card__more > summary:hover { color: var(--dc-lumiere); }
.casino-card__more > summary:hover .icon { transform: translateY(2px); }
.casino-card__more[open] > summary .icon { transform: rotate(180deg); }
.casino-card__more .dl-rows { margin-top: 4px; }

/* Actions */
.casino-card__foot {
  display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: var(--ds-space-4);
  border-top: 1px solid var(--dc-ligne);
}
.casino-card.card--lit .casino-card__foot, .casino-card__foot:has(.cta) { border-top: 0; padding-top: 0; }
.casino-card__foot .link-arrow { align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.casino-card__foot .cta-off { padding-top: 2px; }
/* Lien partenaire autorisé : bouton, mention « Lien partenaire · 18+ » centrée juste dessous, puis le lien vers la fiche */
.casino-card__foot .cta { gap: 8px; }
.casino-card__foot .cta--block .cta__note { text-align: center; }

/* Fiche sans donnée publiée : enseigne éteinte (elle s'allumera au fil des preuves), surface creusée, aucun relief */
.casino-card--pending {
  background: var(--nl-card-sheen), var(--ds-surface-sunken);
  box-shadow: var(--ds-highlight);
}
.casino-card--pending::before { opacity: .55; }
.casino-card.casino-card--pending { --cc-glow: color-mix(in srgb, var(--dc-lumiere) 4%, transparent); }
.casino-card--pending .casino-card__art { filter: grayscale(.9); }
.casino-card--pending .casino-card__art .na { opacity: .34; }
.casino-card--pending .casino-card__proof { background: color-mix(in srgb, var(--dc-nuit) 60%, transparent); box-shadow: inset 0 0 0 1px var(--dc-ligne); }
@media (hover: hover) {
  .casino-card--pending:hover .casino-card__art .na { opacity: .55; }
}

@media (max-width: 767px) {
  .casino-card { padding: 76px 18px 18px; border-radius: var(--dc-r-card-m); gap: 14px; }
  .casino-card::after { left: 18px; right: 18px; }
  .casino-card__art { height: 112px; }
  .casino-card__name { font-size: 19px; }
  .casino-card__proof { margin: 0 -6px; padding: 12px 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .casino-card::after, .casino-card__art .na, .casino-card__art .na-glow, .casino-card__more > summary .icon { transition: none; }
  .casino-card:hover .casino-card__art .na { transform: none; }
}