/* DropCashCasino — système de design et de mouvement (chargé après app.css et lounge.css, avant les feuilles de
   composants et de pages). Toutes les valeurs dérivent des jetons du kit (tokens.css) : une seule source pour les
   surfaces, dégradés, bordures, élévations, rayons, opacités, durées et courbes. Les feuilles de pages ne font que
   les consommer.

   Règles de mouvement : transform et opacity uniquement, aucune animation qui clignote, aucun contenu masqué sans
   JavaScript (les états « en attente d'apparition » ne sont posés que par app.js), prefers-reduced-motion respecté. */

:root {
  /* ---------- Courbes et durées ---------- */
  --ds-ease-out: cubic-bezier(.22, 1, .36, 1);        /* arrivée douce : apparitions, survols */
  --ds-ease-in-out: cubic-bezier(.65, 0, .35, 1);     /* déplacements symétriques */
  --ds-ease-press: cubic-bezier(.3, 0, .5, 1);        /* appui */
  --ds-ease-spring: cubic-bezier(.34, 1.56, .64, 1);  /* coche, pastille : léger rebond */
  --ds-dur-press: 120ms;
  --ds-dur-fast: 160ms;
  --ds-dur-base: 220ms;
  --ds-dur-slow: 420ms;
  --ds-dur-reveal: 560ms;
  --ds-stagger: 70ms;
  --ds-rise: 14px;

  /* ---------- Espacements ---------- */
  --ds-space-1: 4px; --ds-space-2: 8px; --ds-space-3: 12px; --ds-space-4: 16px;
  --ds-space-5: 24px; --ds-space-6: 32px; --ds-space-7: 48px; --ds-space-8: 64px;

  /* ---------- Rayons ---------- */
  --ds-r-xs: 8px;
  --ds-r-sm: var(--dc-r-control);
  --ds-r-md: var(--dc-r-notice);
  --ds-r-lg: var(--dc-r-card);
  --ds-r-pill: var(--dc-r-pill);

  /* ---------- Opacités ---------- */
  --ds-o-muted: .72;
  --ds-o-disabled: .48;

  /* ---------- Surfaces ---------- */
  --ds-surface-0: var(--dc-nuit);
  --ds-surface-1: var(--dc-velours);
  --ds-surface-2: var(--dc-fumee);
  --ds-surface-glass: color-mix(in srgb, var(--dc-velours) 70%, transparent);
  --ds-surface-raised:
    linear-gradient(180deg, color-mix(in srgb, var(--dc-fumee) 55%, var(--dc-velours)) 0%, var(--dc-velours) 42%, color-mix(in srgb, var(--dc-velours) 82%, var(--dc-nuit)) 100%);
  --ds-surface-sunken: linear-gradient(180deg, color-mix(in srgb, var(--dc-nuit) 90%, var(--dc-velours)), var(--dc-nuit));

  /* ---------- Bordures ---------- */
  --ds-border: 1px solid var(--dc-ligne);
  --ds-border-strong: 1px solid var(--dc-ligne-forte);
  --ds-border-hover: color-mix(in srgb, var(--dc-violet-texte) 50%, var(--dc-ligne-forte));
  --ds-border-proof: color-mix(in srgb, var(--dc-vert) 55%, var(--dc-ligne));

  /* ---------- Reflets et élévations ---------- */
  --ds-highlight: inset 0 1px 0 color-mix(in srgb, var(--dc-lumiere) 9%, transparent);
  --ds-elev-1: var(--ds-highlight), 0 1px 1px color-mix(in srgb, var(--dc-nuit) 60%, transparent), 0 10px 24px -16px color-mix(in srgb, var(--dc-nuit) 95%, transparent);
  --ds-elev-2: var(--ds-highlight), 0 2px 4px color-mix(in srgb, var(--dc-nuit) 55%, transparent), 0 24px 48px -26px color-mix(in srgb, var(--dc-nuit) 100%, transparent);
  --ds-elev-3: var(--ds-highlight), 0 4px 10px color-mix(in srgb, var(--dc-nuit) 50%, transparent), 0 34px 64px -30px color-mix(in srgb, var(--dc-nuit) 100%, transparent), 0 0 0 1px color-mix(in srgb, var(--dc-violet) 14%, transparent);
  --ds-glow-violet: 0 0 0 1px color-mix(in srgb, var(--dc-violet) 30%, transparent), 0 18px 46px -22px color-mix(in srgb, var(--dc-violet) 60%, transparent);

  /* ---------- Dégradés ---------- */
  --ds-grad-primary: linear-gradient(180deg, var(--dc-vert-clair) 0%, var(--dc-vert) 48%, color-mix(in srgb, var(--dc-vert) 84%, var(--dc-nuit)) 100%);
  --ds-grad-primary-hover: linear-gradient(180deg, color-mix(in srgb, var(--dc-vert-clair) 70%, var(--dc-lumiere)) 0%, var(--dc-vert-survol) 50%, var(--dc-vert) 100%);
  --ds-grad-secondary: linear-gradient(180deg, color-mix(in srgb, var(--dc-violet) 14%, var(--dc-velours)) 0%, color-mix(in srgb, var(--dc-velours) 80%, transparent) 100%);
  --ds-grad-sheen: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--dc-lumiere) 55%, transparent) 50%, transparent 80%);
  --ds-grad-edge: linear-gradient(90deg, transparent, color-mix(in srgb, var(--dc-violet-texte) 70%, transparent) 30%, color-mix(in srgb, var(--dc-vert) 60%, transparent) 70%, transparent);

  /* ---------- Focus ---------- */
  --ds-focus: var(--dc-focus);
}

/* =====================================================================
   1. Liens et focus
   ===================================================================== */
a { transition: color var(--ds-dur-fast) var(--ds-ease-out), text-decoration-color var(--ds-dur-fast) var(--ds-ease-out); }
:focus-visible { transition: box-shadow var(--ds-dur-fast) var(--ds-ease-out); }

/* Lien fléché : soulignement qui se dessine de gauche à droite, flèche qui avance */
.link-arrow {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 9px) / 0 1.5px no-repeat;
  transition: color var(--ds-dur-fast) var(--ds-ease-out), background-size var(--ds-dur-base) var(--ds-ease-out);
}
.link-arrow .icon { transition: transform var(--ds-dur-base) var(--ds-ease-out); }
.link-arrow:hover { text-decoration: none; background-size: calc(100% - 24px) 1.5px; }
.link-arrow:hover .icon { transform: translateX(4px); }
.link-arrow:active .icon { transform: translateX(6px); transition-duration: var(--ds-dur-press); }

/* =====================================================================
   2. Boutons
   ===================================================================== */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  transition:
    transform var(--ds-dur-base) var(--ds-ease-out),
    background-color var(--ds-dur-base) var(--ds-ease-out),
    border-color var(--ds-dur-base) var(--ds-ease-out),
    box-shadow var(--ds-dur-base) var(--ds-ease-out),
    color var(--ds-dur-fast) var(--ds-ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn .icon { transition: transform var(--ds-dur-base) var(--ds-ease-out); }

/* Principal : dégradé vert maîtrisé, lumière interne, bordure fine, balayage lumineux au survol */
.btn--primary {
  background: var(--ds-grad-primary);
  border: 1px solid color-mix(in srgb, var(--dc-vert-clair) 80%, var(--dc-lumiere));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--dc-lumiere) 60%, transparent),
    inset 0 -2px 0 color-mix(in srgb, var(--dc-nuit) 16%, transparent),
    var(--dc-halo-action);
}
.btn--primary::after {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: var(--ds-grad-sheen); transform: translateX(-110%);
}
.btn--primary.btn--quiet {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--dc-lumiere) 60%, transparent),
    inset 0 -2px 0 color-mix(in srgb, var(--dc-nuit) 16%, transparent),
    0 8px 18px -12px color-mix(in srgb, var(--dc-vert) 70%, transparent);
}
.btn--primary:focus-visible { box-shadow: var(--ds-focus), var(--dc-halo-action); }

/* Secondaire : verre sombre, bordure violette fine, accent au survol */
.btn--secondary, .btn--ghost {
  background: var(--ds-grad-secondary);
  border: 1px solid color-mix(in srgb, var(--dc-violet) 80%, var(--dc-ligne-forte));
  box-shadow: var(--ds-highlight), var(--dc-halo-secondaire);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn--outline-light { box-shadow: var(--ds-highlight); }

@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); }
  .btn--primary:hover {
    background: var(--ds-grad-primary-hover);
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--dc-lumiere) 70%, transparent),
      inset 0 -2px 0 color-mix(in srgb, var(--dc-nuit) 12%, transparent),
      var(--dc-halo-action-survol);
  }
  .btn--primary.btn--quiet:hover { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--dc-lumiere) 70%, transparent), var(--dc-halo-action-doux); }
  .btn--primary:hover::after { transform: translateX(110%); transition: transform 720ms var(--ds-ease-out); }
  .btn:hover .icon { transform: translateX(2px); }
  .btn--secondary:hover, .btn--ghost:hover {
    border-color: var(--dc-violet-texte);
    background: linear-gradient(180deg, color-mix(in srgb, var(--dc-violet) 26%, var(--dc-velours)), color-mix(in srgb, var(--dc-violet) 10%, var(--dc-velours)));
    box-shadow: var(--ds-highlight), var(--dc-halo-secondaire-survol);
  }
}
/* Appui : retour immédiat */
.btn:active { transform: translateY(0) scale(.975); transition-duration: var(--ds-dur-press); transition-timing-function: var(--ds-ease-press); }
.btn--primary:active { background: var(--dc-vert); box-shadow: inset 0 2px 6px color-mix(in srgb, var(--dc-nuit) 30%, transparent), var(--dc-halo-action-doux); }

/* Désactivé : plat, sans relief ni balayage */
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--dc-ligne); border-color: var(--dc-ligne); color: var(--dc-inactif); box-shadow: none; transform: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.btn[disabled]::after, .btn[aria-disabled="true"]::after { display: none; }

/* Chargement réel (formulaire envoyé) : libellé estompé, anneau qui tourne ; posé par app.js, retiré au retour arrière */
.btn[aria-busy="true"] { pointer-events: none; color: transparent !important; }
.btn[aria-busy="true"] .icon { opacity: 0; }
.btn[aria-busy="true"]::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--dc-nuit) 30%, transparent); border-top-color: var(--dc-nuit);
  animation: ds-spin 700ms linear infinite;
}
.btn--secondary[aria-busy="true"]::before, .btn--ghost[aria-busy="true"]::before { border-color: color-mix(in srgb, var(--dc-lumiere) 25%, transparent); border-top-color: var(--dc-lumiere); }
@keyframes ds-spin { to { transform: rotate(1turn); } }

/* =====================================================================
   3. Contrôles de formulaire
   ===================================================================== */
.field-input, .filters select, .search-form input {
  background: var(--ds-surface-sunken);
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--dc-nuit) 70%, transparent);
  transition: border-color var(--ds-dur-fast) var(--ds-ease-out), box-shadow var(--ds-dur-base) var(--ds-ease-out), background-color var(--ds-dur-base) var(--ds-ease-out);
}
.field-input:hover, .filters select:hover { border-color: var(--dc-ligne-forte); }

/* Cases à cocher et boutons radio : coche dessinée, point qui s'agrandit, rebond léger */
input[type="checkbox"], input[type="radio"] {
  -webkit-appearance: none; appearance: none; position: relative; display: inline-grid; place-items: center; flex: none;
  width: 20px; height: 20px; margin: 0; border: 1.5px solid var(--dc-ligne-forte); background: var(--ds-surface-sunken); cursor: pointer;
  transition: border-color var(--ds-dur-fast) var(--ds-ease-out), background-color var(--ds-dur-fast) var(--ds-ease-out), box-shadow var(--ds-dur-base) var(--ds-ease-out);
}
input[type="checkbox"] { border-radius: 6px; }
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]::before {
  content: ""; width: 11px; height: 6px; margin-top: -3px; border: solid var(--dc-nuit); border-width: 0 0 2.4px 2.4px;
  transform: rotate(-45deg) scale(0); transition: transform var(--ds-dur-base) var(--ds-ease-spring);
}
input[type="radio"]::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dc-nuit);
  transform: scale(0); transition: transform var(--ds-dur-base) var(--ds-ease-spring);
}
input[type="checkbox"]:checked, input[type="radio"]:checked {
  border-color: var(--dc-vert); background: var(--dc-vert);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--dc-vert) 14%, transparent), 0 0 14px -2px color-mix(in srgb, var(--dc-vert) 60%, transparent);
}
input[type="checkbox"]:checked::before { transform: rotate(-45deg) scale(1); }
input[type="radio"]:checked::before { transform: scale(1); }
@media (hover: hover) {
  input[type="checkbox"]:not(:checked):not(:disabled):hover, input[type="radio"]:not(:checked):not(:disabled):hover { border-color: var(--dc-violet-texte); }
}
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { box-shadow: var(--ds-focus); }
input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: var(--ds-o-disabled); cursor: not-allowed; }
.check { transition: color var(--ds-dur-fast) var(--ds-ease-out); }

/* Menus déroulants natifs (sélecteurs) */
select { transition: border-color var(--ds-dur-fast) var(--ds-ease-out), box-shadow var(--ds-dur-base) var(--ds-ease-out); }

/* =====================================================================
   4. Puces (filtres, catégories)
   ===================================================================== */
.chip {
  background: var(--ds-grad-secondary);
  box-shadow: var(--ds-highlight);
  transition: border-color var(--ds-dur-fast) var(--ds-ease-out), background-color var(--ds-dur-base) var(--ds-ease-out), color var(--ds-dur-fast) var(--ds-ease-out), transform var(--ds-dur-base) var(--ds-ease-out), box-shadow var(--ds-dur-base) var(--ds-ease-out);
}
@media (hover: hover) { .chip:hover { transform: translateY(-1px); border-color: var(--ds-border-hover); } }
.chip:active { transform: scale(.97); transition-duration: var(--ds-dur-press); }
.chip[aria-current="page"], .chip[aria-pressed="true"] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--dc-vert) 16%, var(--dc-velours)), var(--dc-vert-10));
  box-shadow: var(--ds-highlight), 0 0 18px -6px color-mix(in srgb, var(--dc-vert) 55%, transparent);
}

/* =====================================================================
   5. Badges de statut (sceaux, niveaux, vigilance, score)
   ===================================================================== */
.seal-pill, .level, .vig, .score-none { box-shadow: var(--ds-highlight); }
.seal-pill--proven {
  background: linear-gradient(180deg, var(--dc-vert-clair), var(--dc-vert));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--dc-lumiere) 55%, transparent), var(--dc-halo-prouve);
}
.seal-pill--declared { background: color-mix(in srgb, var(--dc-lumiere) 5%, transparent); }
.seal-pill--unknown, .score-none { background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--dc-muet) 10%, transparent) 6px 7px); }
.level--tested { background: linear-gradient(180deg, color-mix(in srgb, var(--dc-or) 80%, var(--dc-lumiere)), var(--dc-or)); }
.level--partial { background: linear-gradient(180deg, color-mix(in srgb, var(--dc-violet) 70%, var(--dc-violet-fond)), var(--dc-violet-fond)); }
.level--unverified { background: linear-gradient(180deg, color-mix(in srgb, var(--dc-fumee) 80%, var(--dc-ligne)), var(--dc-fumee)); }
.seal--proven { box-shadow: 0 0 10px -2px color-mix(in srgb, var(--dc-vert) 70%, transparent); }

/* Données : distinction nette entre information disponible, prouvée et en attente (le texte porte toujours le sens) */
.compare-field--unknown .compare-field__value {
  color: var(--dc-brume); font-weight: 500;
  text-decoration: underline dashed color-mix(in srgb, var(--dc-muet) 70%, transparent) 1px; text-underline-offset: 5px;
}
.compare-field--proven .compare-field__value { color: var(--dc-lumiere); }

/* =====================================================================
   6. Indicateur de progression (jauge de couverture)
   ===================================================================== */
.coverage__seg { transition: background-color var(--ds-dur-base) var(--ds-ease-out); }
.coverage__seg.is-on { background: linear-gradient(180deg, var(--dc-vert-clair), var(--dc-vert)); }
/* Allumage progressif quand la jauge entre à l'écran (classes posées par app.js uniquement) */
.coverage.js-cov .coverage__seg.is-on { opacity: .18; transform: scaleY(.5); }
.coverage.js-cov.is-lit .coverage__seg.is-on {
  opacity: 1; transform: none;
  transition: opacity 380ms var(--ds-ease-out), transform 380ms var(--ds-ease-spring);
  transition-delay: calc(var(--seg, 0) * 38ms);
}
.coverage__seg:nth-child(2) { --seg: 1; } .coverage__seg:nth-child(3) { --seg: 2; } .coverage__seg:nth-child(4) { --seg: 3; }
.coverage__seg:nth-child(5) { --seg: 4; } .coverage__seg:nth-child(6) { --seg: 5; } .coverage__seg:nth-child(7) { --seg: 6; }
.coverage__seg:nth-child(8) { --seg: 7; } .coverage__seg:nth-child(9) { --seg: 8; } .coverage__seg:nth-child(10) { --seg: 9; }
.coverage__seg:nth-child(11) { --seg: 10; } .coverage__seg:nth-child(12) { --seg: 11; } .coverage__seg:nth-child(13) { --seg: 12; }
.coverage__seg:nth-child(14) { --seg: 13; } .coverage__seg:nth-child(15) { --seg: 14; } .coverage__seg:nth-child(16) { --seg: 15; }

/* =====================================================================
   7. Cartes : surface, élévation, survol, lumière qui suit le pointeur
   ===================================================================== */
.casino-card, .guide-card, .bonus-card, .compare-card, .pending-row, a.card {
  transition:
    transform var(--ds-dur-slow) var(--ds-ease-out),
    border-color var(--ds-dur-base) var(--ds-ease-out),
    box-shadow var(--ds-dur-slow) var(--ds-ease-out),
    background-color var(--ds-dur-base) var(--ds-ease-out);
}
@media (hover: hover) {
  .casino-card:hover, .guide-card:hover, .compare-card:hover, a.card:hover {
    transform: translateY(-3px);
    border-color: var(--ds-border-hover);
    box-shadow: var(--ds-elev-3);
  }
  .pending-row:hover { transform: translateY(-2px); border-color: var(--ds-border-hover); box-shadow: var(--ds-elev-2); }
  .casino-card.card--lit:hover, .guide-card.card--lit:hover { box-shadow: var(--ds-elev-3), var(--dc-halo-carte); }
}
.casino-card:active, .guide-card:active, a.card:active { transform: translateY(-1px); transition-duration: var(--ds-dur-press); }

/* Lumière de pointeur : un halo très doux sous le curseur, injecté par app.js (souris uniquement) */
.ds-spot-host { isolation: isolate; }
.ds-spot {
  position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background:
    radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--dc-violet) 13%, transparent), transparent 62%),
    radial-gradient(140px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--dc-vert) 6%, transparent), transparent 70%);
  transition: opacity var(--ds-dur-slow) var(--ds-ease-out);
}
.ds-spot-host:hover > .ds-spot { opacity: 1; }

/* Accordéons : contenu qui glisse à l'ouverture */
details[open] > :not(summary) { animation: ds-unfold var(--ds-dur-base) var(--ds-ease-out); }
@keyframes ds-unfold { from { opacity: 0; transform: translateY(-6px); } }
summary { -webkit-tap-highlight-color: transparent; }

/* =====================================================================
   8. Titres de section : filet lumineux sous le sur-titre
   ===================================================================== */
.section-head .eyebrow, .home-method__head .eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.section-head .eyebrow::after, .home-method__head .eyebrow::after {
  content: ""; width: 36px; height: 1px; background: linear-gradient(90deg, currentColor, transparent); opacity: .8;
}

/* =====================================================================
   9. États vides
   ===================================================================== */
.empty { background: var(--ds-surface-sunken); box-shadow: var(--ds-highlight); }
.empty__art { animation: ds-float 22s var(--ds-ease-in-out) infinite alternate; }
@keyframes ds-float { from { transform: translateY(0); } to { transform: translateY(-6px); } }

/* =====================================================================
   10. Navigation
   ===================================================================== */
/* En-tête : bordure et ombre qui s'affirment une fois la page défilée (classe posée par app.js) */
.site-header { transition: border-color var(--ds-dur-slow) var(--ds-ease-out), box-shadow var(--ds-dur-slow) var(--ds-ease-out); }
.site-header.is-scrolled { border-bottom-color: var(--dc-ligne-forte); box-shadow: 0 12px 30px -18px color-mix(in srgb, var(--dc-nuit) 100%, transparent); }

/* Lien actif : un trait lumineux qui glisse d'une page à l'autre (View Transitions) ; aperçu au survol */
.site-nav__link { position: relative; box-shadow: none !important; transition: color var(--ds-dur-fast) var(--ds-ease-out), background-color var(--ds-dur-base) var(--ds-ease-out); }
.site-nav__link:hover { background: color-mix(in srgb, var(--dc-fumee) 70%, transparent); }
.site-nav__link::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0;
  background: var(--dc-texte-2); opacity: 0; transform: scaleX(.3);
  transition: transform var(--ds-dur-base) var(--ds-ease-out), opacity var(--ds-dur-base) var(--ds-ease-out);
}
.site-nav__link:hover::after { opacity: .5; transform: scaleX(.6); }
.site-nav__link[aria-current="page"]::after { display: none; }
.site-nav__ink {
  position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--dc-vert);
  box-shadow: 0 0 12px 1px color-mix(in srgb, var(--dc-vert) 70%, transparent), 0 -6px 16px -4px color-mix(in srgb, var(--dc-vert) 45%, transparent);
  view-transition-name: nav-ink;
}

/* Recherche de l'en-tête : la loupe s'allume au focus */
.header-search__go { transition: color var(--ds-dur-fast) var(--ds-ease-out), background-color var(--ds-dur-fast) var(--ds-ease-out), transform var(--ds-dur-base) var(--ds-ease-out); }
.header-search:focus-within .header-search__go { color: var(--dc-vert); }
.header-search__go:hover { background: var(--dc-fumee); color: var(--dc-lumiere); }
.header-search__go:active { transform: scale(.92); }
.header-search input::placeholder { transition: opacity var(--ds-dur-base) var(--ds-ease-out); }
.header-search input:focus::placeholder { opacity: .5; }

/* Sélecteur de langue et menus : ouverture en fondu depuis le déclencheur, fermeture animée par app.js */
.lang-switch summary { transition: border-color var(--ds-dur-fast) var(--ds-ease-out), background-color var(--ds-dur-fast) var(--ds-ease-out); }
.lang-switch summary:hover { background: var(--dc-fumee); }
.lang-switch__list {
  transform-origin: top right;
  background: color-mix(in srgb, var(--dc-velours) 92%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: var(--ds-elev-2), 0 0 0 1px color-mix(in srgb, var(--dc-violet) 12%, transparent);
}
.lang-switch[open] .lang-switch__list { animation: ds-pop var(--ds-dur-base) var(--ds-ease-out); }
.lang-switch.is-closing .lang-switch__list { animation: ds-pop-out var(--ds-dur-fast) var(--ds-ease-press) forwards; }
.lang-switch__list a { transition: background-color var(--ds-dur-fast) var(--ds-ease-out), padding var(--ds-dur-base) var(--ds-ease-out); }
.lang-switch__list a:hover { padding-left: 16px; }
@keyframes ds-pop { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
@keyframes ds-pop-out { to { opacity: 0; transform: translateY(-4px) scale(.98); } }

.header-icon-btn { transition: border-color var(--ds-dur-fast) var(--ds-ease-out), background-color var(--ds-dur-fast) var(--ds-ease-out), transform var(--ds-dur-base) var(--ds-ease-out); }
.header-icon-btn:hover { background: var(--dc-fumee); border-color: var(--dc-ligne-forte); }
.header-icon-btn:active { transform: scale(.92); transition-duration: var(--ds-dur-press); }
.mobile-nav[open] > summary .icon--close { animation: ds-turn var(--ds-dur-base) var(--ds-ease-out); }
@keyframes ds-turn { from { transform: rotate(-90deg); opacity: 0; } }

/* Menu mobile : le panneau se pose, puis les liens arrivent l'un après l'autre */
.mobile-nav[open] .mobile-nav__panel { animation: ds-panel var(--ds-dur-slow) var(--ds-ease-out); }
.mobile-nav.is-closing .mobile-nav__panel { animation: ds-panel-out var(--ds-dur-base) var(--ds-ease-press) forwards; }
@keyframes ds-panel { from { opacity: 0; transform: translateY(-10px); } }
@keyframes ds-panel-out { to { opacity: 0; transform: translateY(-8px); } }
.mobile-nav[open] .mobile-nav__links a, .mobile-nav[open] .mobile-nav__extra, .mobile-nav[open] .mobile-nav__langs {
  animation: ds-item var(--ds-dur-slow) var(--ds-ease-out) both;
}
.mobile-nav[open] .mobile-nav__links a:nth-child(2) { animation-delay: 30ms; }
.mobile-nav[open] .mobile-nav__links a:nth-child(3) { animation-delay: 60ms; }
.mobile-nav[open] .mobile-nav__links a:nth-child(4) { animation-delay: 90ms; }
.mobile-nav[open] .mobile-nav__links a:nth-child(5) { animation-delay: 120ms; }
.mobile-nav[open] .mobile-nav__links a:nth-child(6) { animation-delay: 150ms; }
.mobile-nav[open] .mobile-nav__links a:nth-child(7) { animation-delay: 180ms; }
.mobile-nav[open] .mobile-nav__extra { animation-delay: 210ms; }
.mobile-nav[open] .mobile-nav__langs { animation-delay: 240ms; }
@keyframes ds-item { from { opacity: 0; transform: translateX(-12px); } }
.mobile-nav__links a { transition: color var(--ds-dur-fast) var(--ds-ease-out), padding var(--ds-dur-base) var(--ds-ease-out); }
.mobile-nav__links a:active { padding-left: 6px; color: var(--dc-vert-clair); }
.mobile-nav__langs a { transition: border-color var(--ds-dur-fast) var(--ds-ease-out), background-color var(--ds-dur-fast) var(--ds-ease-out); }

/* Pied de page : liens qui glissent légèrement */
.footer-nav a { transition: color var(--ds-dur-fast) var(--ds-ease-out), transform var(--ds-dur-base) var(--ds-ease-out); }
@media (hover: hover) { .footer-nav a:hover { transform: translateX(3px); } }

/* Haut de page : anneau de progression de lecture (défilement), flèche qui monte au survol */
.to-top {
  background: color-mix(in srgb, var(--dc-velours) 86%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: var(--ds-elev-2);
  transform: translateY(8px);
  transition: opacity var(--ds-dur-base) var(--ds-ease-out), transform var(--ds-dur-slow) var(--ds-ease-out), border-color var(--ds-dur-fast) var(--ds-ease-out);
}
.to-top.is-visible { transform: none; }
.to-top .icon { transition: transform var(--ds-dur-base) var(--ds-ease-out); }
.to-top:hover .icon { transform: translateY(-3px); }
.to-top:active { transform: scale(.94); }
.to-top::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; padding: 1.5px;
  background: conic-gradient(var(--dc-vert) calc(var(--scroll, 0) * 1turn), transparent 0);
  -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);
  opacity: .9;
}
@property --scroll { syntax: "<number>"; inherits: true; initial-value: 0; }
@supports (animation-timeline: scroll()) {
  .to-top { animation: ds-scroll-progress linear both; animation-timeline: scroll(root); }
}
@keyframes ds-scroll-progress { from { --scroll: 0; } to { --scroll: 1; } }

/* Barre de progression de lecture (articles, méthodologie) : injectée par app.js, pilotée par le défilement */
.read-progress {
  position: fixed; z-index: 51; left: 0; right: 0; top: var(--dc-header-h); height: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--dc-violet), var(--dc-vert));
  box-shadow: 0 0 10px color-mix(in srgb, var(--dc-vert) 50%, transparent);
  transform-origin: 0 50%; transform: scaleX(var(--read, 0));
}
@media (max-width: 1199px) { .read-progress { top: var(--dc-header-h-m); } }
@supports (animation-timeline: scroll()) {
  .read-progress { animation: ds-read linear both; animation-timeline: scroll(root); }
}
@keyframes ds-read { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* =====================================================================
   11. Apparition au défilement (classes posées par app.js, jamais dans le HTML)
   ===================================================================== */
.rv-wait { opacity: 0; transform: translate3d(0, var(--ds-rise), 0); }
.rv-in {
  opacity: 1; transform: none;
  transition: opacity var(--ds-dur-reveal) var(--ds-ease-out), transform var(--ds-dur-reveal) var(--ds-ease-out) !important;
  transition-delay: calc(var(--rv-i, 0) * var(--ds-stagger)) !important;
}

/* =====================================================================
   12. Transitions entre pages (View Transitions, navigateurs compatibles ; sinon navigation classique)
   ===================================================================== */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: ds-vt-out 180ms var(--ds-ease-press) both; }
::view-transition-new(root) { animation: ds-vt-in 340ms var(--ds-ease-out) both; }
::view-transition-group(nav-ink) { animation-duration: 360ms; animation-timing-function: var(--ds-ease-out); }
@keyframes ds-vt-out { to { opacity: 0; } }
@keyframes ds-vt-in { from { opacity: 0; transform: translateY(10px); } }

/* =====================================================================
   13. Mouvement réduit et impression
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .rv-wait { opacity: 1; transform: none; }
  .coverage.js-cov .coverage__seg.is-on { opacity: 1; transform: none; }
  .btn:hover, .chip:hover, .casino-card:hover, .guide-card:hover, .bonus-card:hover, .compare-card:hover, .pending-row:hover, a.card:hover { transform: none; }
  .ds-spot { display: none; }
  .empty__art { animation: none; }
  .read-progress, .to-top { animation: none; }
}
@media print {
  .rv-wait { opacity: 1 !important; transform: none !important; }
  .read-progress, .ds-spot { display: none; }
}