@import './fonts.css';

/* ─── RESET ─────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

/* ─── UNITÉS D'ACCESSIBILITÉ (2026-08-15) ────────────────────────────────
   font-size, padding/margin/gap et les dimensions d'éléments d'IHM (boutons,
   popins, cibles, icônes, border-radius) sont exprimés en rem plutôt qu'en
   px — 1rem suit la taille de police racine du navigateur/OS, que les
   réglages d'accessibilité ("taille du texte") peuvent faire varier sans
   zoom de page complet ; du px figé, non. Plancher `font-size` à 0.75rem
   (12px) — voir tout en bas de ce fichier, même principe que Daídalos
   (`www/games/daidalos/CLAUDE.md` § Accessibilité), plancher légèrement
   plus bas ici car Décide-moi ! ne cible pas spécifiquement un public
   enfant. Restent volontairement en px (pas une question d'échelle de
   texte) : épaisseurs de bordure/outline (1-2px), rayons de flou
   box-shadow/text-shadow/filter (effet visuel), dimensions de l'ascenseur
   thémé (widget OS), le motif `.sr-only`/`.choice-label` (1px, idiome
   standard "visually hidden" — voir plus bas), les transforms d'animation
   (translateY de #toast/@keyframes fadeUp — mouvement, pas une mesure de
   mise en page), et `canvas#wheel` dans les media queries (taille d'affichage
   pixel-précise du canvas, résolution interne fixée à 400×400 par
   `index.html`, indépendante du texte). Voir `CLAUDE.md` racine §
   Accessibilité pour la portée site-wide. */

/* ─── ASCENSEUR THÉMÉ ───────────────────────────────────────────────────
   scrollbar-color est une propriété héritée : une seule déclaration ici
   couvre le scroll de page ET tout panel interne sans règle plus spécifique
   (#choices-list, #history-list…) — voir docs/scrollbar-theme-spec.md.
   Thumb dérivé de --border2, renforcé en opacité via color-mix() :
   --border2 est conçue comme un liseré translucide (alpha ~0.2-0.3 dans
   tous les thèmes, cf. decidemoi-theme-data.js) — bien pour une bordure de
   carte, quasi invisible comme thumb d'ascenseur (retour utilisateur du
   2026-08-06, constaté sur TicTic, même variable/même défaut ici). --text
   étant toujours opaque, le mélange garantit un thumb visible sans changer
   --border2 elle-même (reste correcte pour son usage d'origine). */
:root {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--border2) 35%, var(--text) 65%) transparent;
}

/* Fallback WebKit/Blink historique (::-webkit-scrollbar* n'est pas hérité
   nativement comme scrollbar-color — sélecteur universel pour le même effet
   pratique sur tout élément qui scrolle, sans cibler chaque id). Dimensions
   du widget d'ascenseur lui-même — laissées en px (voir note d'en-tête). */
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--border2) 35%, var(--text) 65%);
  border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--accent2, var(--border2));
}

/* ─── SCREEN-READER ONLY ─────────────────────────────── */
/* Idiome standard "visually hidden" — 1px délibéré (pas 0), pour rester
   perçu par certains lecteurs d'écran qui ignorent un élément à taille
   nulle. Sans rapport avec l'échelle de texte — laissé en px. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── FOCUS VISIBLE ─────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r);
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--accent);
  /* var(--bg), pas #fff figé : --accent a une marge de contraste garantie
     contre --bg (calculé puis vérifié pour les 9 thèmes) mais pas forcément
     contre du blanc pur sur les thèmes à accent clair — audit Lighthouse
     2026-08-12, voir CLAUDE.md. */
  color: var(--bg);
  padding: 0.5rem 1rem;
  border-radius: 0 0 var(--r) var(--r);
  font-size: 0.8125rem;
  font-weight: 600;
  z-index: 999;
  text-decoration: none;
  transition: top .15s;
}

.skip-link:focus {
  top: 0;
}

/* ─── VARIABLES PAR DÉFAUT (remplacées dynamiquement par theme-switcher.js) ── */
:root {
  --bg:         #F5F0E8;
  --bg2:        #EDE4D4;
  --surface:    #FFFFFF;
  --text:       #2A2015;
  --text2:      #5A4A38;
  --text3:      #8A7860;
  --accent:     #C93A08;
  --accent2:    #E85D5D;
  --accent-bg:  rgba(201,58,8,0.08);
  --border:     rgba(42,32,21,0.12);
  --border2:    rgba(42,32,21,0.22);
  --shadow:     rgba(42,32,21,0.12);
  --shadow2:    rgba(42,32,21,0.06);
  --font-display: 'Cinzel', serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
  --r:            0.5rem;
  --r-lg:         0.875rem;
  --spin-shadow:       0 4px 20px rgba(201,58,8,0.35);
  --spin-shadow-hover: 0 6px 30px rgba(201,58,8,0.55);
}

/* ─── BASE ─────────────────────────────── */
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  transition: background .3s, color .3s, font-family .3s;
}

/* ─── MAIN LAYOUT ─────────────────────────────── */
main {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 20rem;
  max-width: 68.75rem;
  margin: 0 auto;
  width: 100%;
  padding: 2.5rem 2rem;
  align-items: start;
  position: relative;
  z-index: 1;
}

/* ─── LEFT ─────────────────────────────── */
#left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  padding-right: 3rem;
}

.wheel-title {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 4vw, 2.5rem);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.03em;
  text-align: center;
  line-height: 1.1;
}

.wheel-title em {
  font-style: normal;
  color: var(--accent);
}

[data-theme="dev"] .wheel-title {
  font-size: clamp(1rem, 2.2vw, 1.375rem);
  font-weight: 600;
  letter-spacing: .01em;
}

[data-theme="dev"] .wheel-title::before {
  display: block;
  content: '// tirage en cours...';
  font-size: 0.75rem;
  color: var(--text3);
  font-weight: 400;
  margin-bottom: 0.5rem;
  letter-spacing: .04em;
}

.wheel-subtitle {
  font-size: 0.875rem;
  color: var(--text3);
  text-align: center;
  font-weight: 300;
  margin-top: -1.25rem;
}

[data-theme="dev"] .wheel-subtitle {
  display: none;
}

/* ─── WHEEL WRAP ─────────────────────────────── */
#wheel-wrap {
  position: relative;
  display: inline-block;
}

canvas#wheel {
  display: block;
  cursor: pointer;
  transition: filter .2s;
  border-radius: 50%;
  box-shadow: 0 8px 40px var(--shadow), 0 2px 8px var(--shadow2);
}

canvas#wheel:hover {
  filter: brightness(1.05);
}

canvas#wheel:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 6px;
}

[data-theme="dev"] canvas#wheel {
  box-shadow: 0 0 0 1px rgba(61, 214, 96, 0.2), 0 0 30px rgba(61, 214, 96, 0.08);
}

#pointer-wrap {
  position: absolute;
  top: 50%;
  right: -1.25rem;
  transform: translateY(-50%);
  pointer-events: none;
}

#pointer-wrap svg {
  width: 2.25rem;
  height: 2.25rem;
  filter: drop-shadow(0 2px 4px var(--shadow));
  display: block;
}

[data-theme="dev"] #pointer-wrap svg {
  filter: drop-shadow(0 0 6px var(--accent));
}

/* ─── SPIN BUTTON ─────────────────────────────── */
#spin-btn {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.01em;
  background: var(--accent);
  /* var(--bg) plutôt qu'un blanc figé : --accent est calibré pour un
     contraste ≥4.5:1 contre --bg sur les 9 thèmes (calculé puis vérifié),
     pas nécessairement contre du blanc pur — sakura/cosmos/abysses/blueprint/
     dev descendaient jusqu'à 1.91:1 avec #fff (audit Lighthouse 2026-08-12,
     voir CLAUDE.md). Remplace aussi la surcharge [data-theme="dev"] dédiée
     ci-dessous (devenue redondante : --bg du thème dev vaut déjà #0D1117). */
  color: var(--bg);
  border: none;
  border-radius: var(--r-lg);
  padding: 0.875rem 3.25rem;
  cursor: pointer;
  transition: background .15s, transform .1s, box-shadow .15s;
  box-shadow: var(--spin-shadow);
}

#spin-btn:hover {
  background: var(--accent2);
  box-shadow: var(--spin-shadow-hover);
}

#spin-btn:active {
  transform: scale(.97);
}

#spin-btn:disabled {
  background: var(--text3);
  box-shadow: none;
  cursor: not-allowed;
  opacity: .6;
}

[data-theme="dev"] #spin-btn {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

[data-theme="dev"] #spin-btn::before {
  content: '$ ';
}

/* ─── RESULT BOX ─────────────────────────────── */
#result-box {
  width: 100%;
  max-width: 27.5rem;
  min-height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text3);
  border: 1.5px dashed var(--border2);
  border-radius: var(--r-lg);
  padding: 0.75rem 1.5rem;
  background: transparent;
  transition: all .35s cubic-bezier(.34, 1.56, .64, 1);
  text-align: center;
}

#result-box.win {
  border: 2px solid var(--accent);
  background: var(--accent-bg);
  color: var(--accent);
}

[data-theme="dev"] #result-box {
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: .04em;
}

[data-theme="dev"] #result-box::before {
  content: 'stdout: ';
  font-size: 0.75rem;
  color: var(--text3);
  margin-right: 0.125rem;
}

[data-theme="dev"] #result-box.win::before {
  color: var(--accent);
}

#result-box .result-icon {
  font-size: 1.25rem;
  display: none;
}

#result-box.win .result-icon {
  display: inline;
}

[data-theme="dev"] #result-box .result-icon {
  display: none !important;
}

/* ─── RIGHT PANEL ─────────────────────────────── */
#right {
  border-left: 1px solid var(--border);
  padding-left: 2rem;
  display: flex;
  flex-direction: column;
}

.panel-section {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border);
}

.panel-section:last-child {
  border-bottom: none;
}

.panel-label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .10em;
  margin-bottom: 0.75rem;
}

/* Ligne label + bouton d'action (ex. "vider l'historique") — le label garde
   son margin-bottom normal quand il n'est pas dans une .panel-label-row. */
.panel-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.panel-label-row .panel-label {
  margin-bottom: 0;
}

/* Même langage visuel que .del-btn (icône, contour, survol destructif),
   en plus petit — bouton d'action de section, pas de ligne de choix. */
.history-clear-btn {
  width: 1.375rem;
  height: 1.375rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--r) - 0.25rem);
  background: none;
  color: var(--text3);
  cursor: pointer;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .15s;
  line-height: 1;
}

.history-clear-btn:hover {
  background: rgba(220, 50, 50, 0.1);
  border-color: rgba(220, 50, 50, 0.4);
  color: #c0392b;
}

[data-theme="dev"] .panel-label::before {
  content: '# ';
  color: var(--accent);
}

/* presets */
.presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.preset-btn {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid var(--border2);
  border-radius: 1.25rem;
  background: var(--surface);
  color: var(--text2);
  cursor: pointer;
  padding: 0.25rem 0.75rem;
  transition: all .15s;
}

.preset-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

[data-theme="dev"] .preset-btn {
  border-radius: var(--r);
  background: var(--bg2);
}

[data-theme="dev"] .preset-btn:hover {
  background: rgba(61, 214, 96, 0.12);
  color: var(--accent);
  border-color: rgba(61, 214, 96, 0.4);
}

/* choices */
#choices-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  max-height: 12.5rem;
  overflow-y: auto;
  /* scrollbar-width/scrollbar-color hérités du :root (voir en tête de fichier) */
}

.choice-row {
  display: flex;
  gap: 0.375rem;
  align-items: center;
}

.choice-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  flex-shrink: 0;
}

[data-theme="dev"] .choice-dot {
  border-radius: 0.125rem;
}

/* Idiome "visually hidden" — voir .sr-only en tête de fichier, même
   raisonnement (1px délibéré, laissé en px). */
.choice-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.choice-input {
  flex: 1;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.4375rem 0.625rem;
  background: var(--surface);
  color: var(--text);
  outline: none;
  transition: border-color .15s;
}

.choice-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-bg);
}

[data-theme="dev"] .choice-input {
  background: var(--bg2);
}

.del-btn {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--r) - 0.125rem);
  background: none;
  color: var(--text3);
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .15s;
  line-height: 1;
}

.del-btn:hover {
  background: rgba(220, 50, 50, 0.1);
  border-color: rgba(220, 50, 50, 0.4);
  color: #c0392b;
}

#add-btn {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  margin-top: 0.5rem;
  border: 1.5px dashed var(--border2);
  border-radius: var(--r);
  background: none;
  color: var(--text3);
  cursor: pointer;
  padding: 0.5rem;
  width: 100%;
  transition: all .15s;
}

#add-btn:hover {
  background: var(--bg2);
  border-color: var(--accent);
  color: var(--accent);
}

[data-theme="dev"] #add-btn::before {
  content: '+ ';
}

/* import */
textarea#bulk-import {
  width: 100%;
  height: 4.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.5rem 0.625rem;
  background: var(--surface);
  color: var(--text);
  resize: none;
  outline: none;
  transition: border-color .15s;
  margin-bottom: 0.5rem;
}

textarea#bulk-import:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-bg);
}

textarea#bulk-import::placeholder {
  color: var(--text3);
  opacity: .7;
}

[data-theme="dev"] textarea#bulk-import {
  background: var(--bg2);
}

#import-btn {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  border: 1px solid var(--border2);
  border-radius: var(--r);
  background: var(--bg2);
  color: var(--text2);
  cursor: pointer;
  padding: 0.4375rem;
  width: 100%;
  transition: all .15s;
}

#import-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

/* history */
#history-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-height: 6.25rem;
  overflow-y: auto;
}

.hist-item {
  font-size: 0.78125rem;
  color: var(--text2);
  padding: 0.1875rem 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hist-num {
  font-size: 0.75rem;
  color: var(--text3);
  font-weight: 500;
  min-width: 1rem;
}

[data-theme="dev"] .hist-num {
  display: none;
}

[data-theme="dev"] .hist-item::before {
  content: attr(data-idx);
  font-size: 0.75rem;
  color: var(--text3);
  min-width: 1.75rem;
}

.hist-dot {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  flex-shrink: 0;
}

[data-theme="dev"] .hist-dot {
  border-radius: 0.125rem;
}

/* Pas d'opacity supplémentaire : --text3 est déjà la teinte "tertiaire" du
   thème, la diluer davantage pouvait tomber sous 4.5:1 sur plusieurs thèmes
   (audit Lighthouse 2026-08-12, voir CLAUDE.md). */
.hist-empty {
  font-size: 0.75rem;
  color: var(--text3);
  font-style: italic;
}

[data-theme="dev"] .hist-empty {
  font-style: normal;
}

[data-theme="dev"] .hist-empty::before {
  content: '// ';
}

/* ─── BOUTON PARTAGER (panneau droit) ─────────────────────────────── */
#share-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text2);
  background: none;
  border: 1px solid var(--border2);
  border-radius: var(--r);
  padding: 0.5625rem 1rem;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}

#share-btn:hover {
  background: var(--accent-bg);
  color: var(--accent);
  border-color: var(--accent);
}

#share-btn svg {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

/* ─── TOAST ─────────────────────────────── */
#toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--text);
  color: var(--bg);
  padding: 0.625rem 1.25rem;
  border-radius: var(--r);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  opacity: 0;
  transition: opacity .2s, transform .2s;
  pointer-events: none;
  white-space: nowrap;
  z-index: 999;
}

[data-theme="dev"] #toast {
  background: var(--accent);
  color: #0D1117;
}

#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ─── POPIN DE CONFIRMATION (remplace confirm() natif) ───
   Thémée via les mêmes variables que le reste de l'app — voir
   CLAUDE.md racine § convention de thème theme-switcher.js. */
#confirm-popin {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  padding: 1.25rem;
  box-sizing: border-box;
}

#confirm-popin.open {
  display: flex;
}

#confirm-box {
  background: var(--bg2, var(--surface));
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  max-width: 22.5rem;
  width: 100%;
  box-shadow: 0 8px 40px var(--shadow), 0 2px 8px var(--shadow2);
}

#confirm-box h2 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.625rem;
  color: var(--text);
}

#confirm-box p {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--text2);
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

#confirm-actions {
  display: flex;
  gap: 0.625rem;
  justify-content: flex-end;
}

#confirm-cancel,
#confirm-ok {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: var(--r);
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  transition: all .15s;
}

#confirm-cancel:hover {
  border-color: var(--border2);
  background: var(--bg2);
}

/* Action destructive (seul usage actuel : vider l'historique) — même rouge
   que .del-btn:hover, pour rester cohérent avec le reste de l'app. */
#confirm-ok {
  background: #c0392b;
  border-color: #c0392b;
  color: #fff;
}

#confirm-ok:hover {
  background: #a5311f;
  border-color: #a5311f;
}

[data-theme="dev"] #confirm-box {
  border-radius: var(--r);
}

/* ─── PUB (optionnelle, house uniquement — voir CLAUDE.md § Pub) ───────
   house.js lit directement --bg2/--text/--border/--accent (convention
   theme-switcher.js déjà respectée par cette app, pas de pont de variables
   nécessaire — contrairement à Daídalos). Seul le CTA de la carte a besoin
   d'une surcharge : house.js dérive son fond d'un color-mix() à partir de
   --text et sa couleur de --accent2/--accent, non paramétrable finement par
   variable CSS — sur les thèmes à la marge de contraste la plus courte,
   cette dérivation retombe sous 4.5:1 (audit Lighthouse 2026-08-12, voir
   CLAUDE.md). Remplacé par le même motif que #spin-btn ci-dessus (fond
   --accent plein, texte --bg) plutôt que de dépendre du color-mix() interne
   de house.js — house.js lui-même non modifié, reste agnostique de toute
   page hôte. #ad-slot-banner (ID réel du conteneur, voir index.html) donne
   la spécificité nécessaire pour l'emporter sur les règles de house.js. */
#ad-slot-banner .house-ad-card-cta {
  background: var(--accent);
  color: var(--bg);
}

/* ─── REDUCED MOTION ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }

  canvas#wheel {
    transition: none;
  }
}

/* ─── RESPONSIVE ─────────────────────────────── */
@media (max-width: 760px) {
  main {
    grid-template-columns: 1fr;
    padding: 1.5rem 1rem;
  }

  #left {
    padding-right: 0;
    gap: 1.25rem;
  }

  #right {
    border-left: none;
    border-top: 1px solid var(--border);
    padding-left: 0;
    padding-top: 0.5rem;
  }

  /* Taille d'affichage du canvas — pixel-précise (résolution interne fixée
     à 400×400 par index.html), laissée en px, voir note d'en-tête. */
  canvas#wheel {
    width: 290px !important;
    height: 290px !important;
  }
}

@media (max-width: 420px) {
  canvas#wheel {
    width: 248px !important;
    height: 248px !important;
  }

  #spin-btn {
    padding: 0.75rem 2rem;
    font-size: 0.9375rem;
  }
}

/* ─── ANIMATIONS ─────────────────────────────── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.wheel-title {
  animation: fadeUp .5s ease both;
}

.wheel-subtitle {
  animation: fadeUp .5s .05s ease both;
}

#wheel-wrap {
  animation: fadeUp .5s .10s ease both;
}

#spin-btn {
  animation: fadeUp .5s .18s ease both;
}

#result-box {
  animation: fadeUp .5s .22s ease both;
}