/* ===== Polices auto-hebergees ===== */
/* v5.41.1 — Police Zrnic (Typodermic, fournie par Guillaume) pour le theme CD Techno
   32-bit. Auto-hebergee (pas de CDN, licence perso fournie par Guillaume) : le fichier
   doit etre place manuellement a assets/fonts/zrnic-rg.otf (extraction du zip impossible
   depuis l environnement, bac a sable indisponible sur plusieurs sessions -- Guillaume a
   le fichier localement, il n a qu a le deposer dans ce dossier de son propre projet, pas
   besoin de deploiement separe pour cette etape). Fallback Orbitron (deja chargee
   site-wide) tant que le fichier n est pas present -- @font-face echoue silencieusement
   si la source est absente, aucun risque de casse. */
@font-face {
  font-family: 'Zrnic';
  src: url('../fonts/zrnic-rg.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ===== Variables CSS — Thèmes ===== */

/* v5.40.0 — Themes minimal/cyberpunk/apple retires (remplaces par les 4 themes
   a collectionner du Vestiaire : theme_crt/theme_cartouche/theme_neon/theme_pixel_ex,
   cf plus bas). California reste la base/theme par defaut, y compris en fallback
   sur le selecteur :root nu (securite si data-theme est absent pour une raison
   quelconque). */
/* ============================================================ */
/* Thème CALIFORNIA — premium hype 2026                          */
/* Active TOUTES les features modernes (gated sur ce theme)      */
/* ============================================================ */
:root,
:root[data-theme="california"] {
  --bg: #fafaf9;
  --bg2: #ffffff;
  --bg3: #f5f5f4;
  --panel: #ffffff;
  --border: #e7e5e4;
  --accent: #0ea5e9;       /* Pacific blue */
  --accent2: #f97316;      /* Sunset orange */
  --accent3: #ef4444;      /* Coral red */
  --purple: #a855f7;       /* Violet */
  --text: #1c1917;
  --text2: #57534e;
  --text3: #a8a29e;
  --glow: 0 8px 32px rgba(15, 23, 42, 0.08);
  --grid-overlay-opacity: 0;
  --scanline-opacity: 0;

  /* Signature California gradients */
  --gradient-sunset: linear-gradient(135deg, #f97316 0%, #ec4899 50%, #8b5cf6 100%);
  --gradient-ocean:  linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);

  /* Surfaces & helpers via color-mix() */
  --glass-bg:     color-mix(in srgb, white 70%, transparent);
  --glass-border: color-mix(in srgb, var(--text) 8%, transparent);
  --hover-bg:     color-mix(in srgb, var(--accent) 8%, transparent);
  --focus-ring:   color-mix(in srgb, var(--accent) 25%, transparent);
}

/* ============================================================
   v4.57.0 — MODE NUIT (data-mode="night") sur le theme California.
   Fond sombre ; on conserve le degrade sunset (il ressort tres bien sur le noir).
   ============================================================ */
:root[data-theme="california"][data-mode="night"] {
  --bg: #14111c;
  --bg2: #1c1726;
  --bg3: #181320;
  --panel: #1c1726;
  --border: #2f2942;
  --text: #ece9f5;
  --text2: #b4aec6;
  --text3: #837c97;
  --glow: 0 10px 34px rgba(0, 0, 0, 0.5);
  --glass-bg:     color-mix(in srgb, #1c1726 72%, transparent);
  --glass-border: color-mix(in srgb, white 12%, transparent);
  --hover-bg:     color-mix(in srgb, var(--accent) 16%, transparent);
  /* Degrade "nuit" : violet -> indigo -> teal/vert (au lieu du sunset orange) */
  --gradient-sunset: linear-gradient(135deg, #a855f7 0%, #6366f1 50%, #14b8a6 100%);
}
:root[data-theme="california"][data-mode="night"] header {
  background: #181320 !important; border-bottom-color: #2f2942 !important;
}
:root[data-theme="california"][data-mode="night"] .nav-group-btn {
  background: #221c30 !important; color: #cdc7db !important; border-color: #332d47 !important;
}
:root[data-theme="california"][data-mode="night"] .nav-group-btn:hover,
:root[data-theme="california"][data-mode="night"] .nav-group-open .nav-group-btn {
  background: #2c2640 !important; border-color: #ec4899 !important; color: #f9c8dd !important;
}
:root[data-theme="california"][data-mode="night"] .nav-group-active .nav-group-btn {
  background: var(--gradient-sunset) !important; color: #fff !important; border-color: transparent !important;
}
:root[data-theme="california"][data-mode="night"] .nav-group-menu {
  background: #1c1726 !important; border-color: #2f2942 !important;
}
:root[data-theme="california"][data-mode="night"] .nav-group-item { color: #ece9f5 !important; }
:root[data-theme="california"][data-mode="night"] .nav-group-item:hover { background: rgba(255, 255, 255, 0.06) !important; }
:root[data-theme="california"][data-mode="night"] .nav-group-sep { color: #c77dde !important; border-top-color: #332d47 !important; }

/* ============================================================
   v5.40.0 — THEMES A COLLECTIONNER (Vestiaire, kind='theme', Phase 3).
   Remplacent l ancien selecteur direct minimal/cyberpunk/apple/california.
   Ce sont des RESKINS du theme California (meme squelette de fonctionnalites
   modernes -- cmdk, PWA, filter chips... -- gatees sur $IS_CALIFORNIA qui reste
   VRAI pour ces 5 themes, cf includes/header.php), pas des themes degrades comme
   l etaient minimal/cyberpunk/apple. Chaque bloc redefinit les variables CSS
   (--bg/--bg2/--bg3/--panel/--border/--accent/--accent2/--accent3/--purple/
   --text/--text2/--text3/--glow + les helpers color-mix() introduits par
   California) ET quelques regles ciblees hors-variables (police, rayons de
   bordure, ombres, boutons) quand le systeme de variables seul ne suffit pas a
   changer d ambiance. Toutes les regles hors-variables reprennent la meme liste
   d exclusion de boutons que California/Apple pour ne pas casser les composants
   speciaux (pills de navigation, cmdk, chips...).

   v5.42.0 — MODE JOUR/NUIT sur les 5 themes (retour Guillaume : aucun n avait de
   variante claire). Meme mecanisme que California (data-mode="night" sur <html>,
   toggle existant includes/header.php #rvDayNight, rien a changer cote JS). Pour
   chaque theme : le selecteur SANS [data-mode="night"] est desormais le jour, et
   [data-mode="night"] est la nuit. Pour CRT/Neon/Techno32bit (identite native
   sombre), la palette nuit = le rendu original inchange, jour = nouvelle palette
   claire. Pour Cartouche/Pixel Art (identite native claire), la palette jour =
   le rendu original inchange, nuit = nouvelle palette sombre. Les regles hors-
   variables qui utilisaient une couleur hex figee (texte de bouton, ombres,
   grille) sont repassees sur var(--bg)/var(--accent)/var(--border) + color-mix()
   pour s adapter automatiquement aux deux modes sans dupliquer chaque regle.
   ============================================================ */

/* ---------- Theme CRT PHOSPHORE (terminal vert, ambiance retro-tech) ----------
   Jour : ecran phosphore vu en pleine lumiere / listing papier vert-et-blanc
   (fond clair, encre verte foncee, pas de glow ni de scanlines qui salissent un
   fond clair). Nuit : ecran phosphore original (fond noir, vert vif, scanlines +
   grille, glow neon) -- INCHANGE, c etait deja l unique rendu avant le v5.42.0. */
:root[data-theme="theme_crt"] {
  --bg: #eef3e4;
  --bg2: #f7faf0;
  --bg3: #e4ecd6;
  --panel: #f7faf0;
  --border: #8fb87a;
  --accent: #1f7a34;
  --accent2: #c98a12;
  --accent3: #c1442b;
  --purple: #2f9e6e;
  --text: #1c3d1f;
  --text2: #3f6b3f;
  --text3: #7a9370;
  --glow: 0 3px 14px rgba(31, 122, 52, 0.18);
  --grid-overlay-opacity: 0.03;
  --scanline-opacity: 0;
  --gradient-sunset: linear-gradient(135deg, #1f7a34 0%, #c98a12 100%);
  --gradient-ocean:  linear-gradient(135deg, #2f9e6e 0%, #1f7a34 100%);
  --glass-bg:     color-mix(in srgb, #f7faf0 78%, transparent);
  --glass-border: color-mix(in srgb, #1f7a34 12%, transparent);
  --hover-bg:     color-mix(in srgb, var(--accent) 10%, transparent);
  --focus-ring:   color-mix(in srgb, var(--accent) 30%, transparent);
}
:root[data-theme="theme_crt"][data-mode="night"] {
  --bg: #0a1408;
  --bg2: #0f2410;
  --bg3: #0f2410;
  --panel: #0f2410;
  --border: #2c6e2f;
  --accent: #39ff6a;
  --accent2: #ffcc33;
  --accent3: #ff5555;
  --purple: #66ffb3;
  --text: #7cff9a;
  --text2: #3fae52;
  --text3: #2c6e2f;
  --glow: 0 0 20px rgba(57, 255, 106, 0.45);
  --grid-overlay-opacity: 0.05;
  --scanline-opacity: 0.07;
  --gradient-sunset: linear-gradient(135deg, #39ff6a 0%, #7cff9a 100%);
  --gradient-ocean:  linear-gradient(135deg, #2c6e2f 0%, #39ff6a 100%);
  --glass-bg:     color-mix(in srgb, #0f2410 72%, transparent);
  --glass-border: color-mix(in srgb, #39ff6a 14%, transparent);
  --hover-bg:     color-mix(in srgb, var(--accent) 10%, transparent);
  --focus-ring:   color-mix(in srgb, var(--accent) 30%, transparent);
}
/* Police terminal (systeme, pas de dependance externe), les deux modes */
:root[data-theme="theme_crt"] body {
  font-family: 'Courier New', 'Share Tech Mono', monospace !important;
}
/* Jour : pas de scanlines/grille sombres qui salissent un fond clair */
:root[data-theme="theme_crt"] body::before,
:root[data-theme="theme_crt"] body::after { display: none !important; }
/* Nuit : grille phosphore verte + scanlines (rendu original) */
:root[data-theme="theme_crt"][data-mode="night"] body::before { display: block !important; }
:root[data-theme="theme_crt"][data-mode="night"] body::after {
  display: block !important;
  background-image:
    linear-gradient(rgba(57, 255, 106, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57, 255, 106, 0.05) 1px, transparent 1px);
}
:root[data-theme="theme_crt"] .panel,
:root[data-theme="theme_crt"] .stat-card,
:root[data-theme="theme_crt"] .jeu-card,
:root[data-theme="theme_crt"] .login-box {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
}
:root[data-theme="theme_crt"] button:not(.btn-link):not(.hamburger-btn):not(.aq-tab):not(.cmdk-item):not(.cali-chip):not(.upcoming-wish-btn):not(.btn-mini):not(.emoji-btn):not(.color-btn):not(.btn-ghost):not(.sub-modal-x):not(.btn-approve):not(.nav-group-btn):not(.page-btn):not(.rvpv-alpha-btn),
:root[data-theme="theme_crt"] input[type="submit"] {
  background: var(--accent) !important;
  color: var(--bg) !important;
  border: 1px solid var(--accent) !important;
  border-radius: 2px !important;
  text-shadow: none !important;
  box-shadow: var(--glow) !important;
}
:root[data-theme="theme_crt"] input:focus,
:root[data-theme="theme_crt"] textarea:focus,
:root[data-theme="theme_crt"] select:focus {
  box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 50%, transparent) !important;
}

/* ---------- Theme CARTOUCHE VINTAGE (beige/orange chaud, plastique jouet) ----------
   Jour : palette originale INCHANGEE (deja claire par nature). Nuit (v5.42.0) :
   meme cartouche vue sous une lampe le soir -- brun bois fonce, memes tons
   or/orange en accent (clin d oeil : le texte/fond jour et nuit sont inverses,
   #f4e4c8 <-> #6b4423, pour rester dans la meme famille chromatique). */
:root[data-theme="theme_cartouche"] {
  --bg: #f4e4c8;
  --bg2: #fbf3e2;
  --bg3: #fbf3e2;
  --panel: #fbf3e2;
  --border: #d9b077;
  --accent: #d9822b;
  --accent2: #c9a227;
  --accent3: #a13d2b;
  --purple: #7c5c3e;
  --text: #6b4423;
  --text2: #a07a4a;
  --text3: #b89a72;
  --glow: 0 3px 12px rgba(107, 68, 35, 0.18);
  --grid-overlay-opacity: 0;
  --scanline-opacity: 0;
  --gradient-sunset: linear-gradient(135deg, #d9822b 0%, #c9a227 100%);
  --gradient-ocean:  linear-gradient(135deg, #a13d2b 0%, #d9822b 100%);
  --glass-bg:     color-mix(in srgb, #fbf3e2 78%, transparent);
  --glass-border: color-mix(in srgb, #6b4423 10%, transparent);
  --hover-bg:     color-mix(in srgb, var(--accent) 10%, transparent);
  --focus-ring:   color-mix(in srgb, var(--accent) 25%, transparent);
}
:root[data-theme="theme_cartouche"][data-mode="night"] {
  --bg: #2b1d10;
  --bg2: #3a2717;
  --bg3: #33220f;
  --panel: #3a2717;
  --border: #6b4423;
  --accent: #e8973a;
  --accent2: #d9b34f;
  --accent3: #c0553a;
  --purple: #a88a63;
  --text: #f4e4c8;
  --text2: #d9b077;
  --text3: #8a6f4e;
  --glow: 0 3px 16px rgba(0, 0, 0, 0.4);
  --grid-overlay-opacity: 0;
  --scanline-opacity: 0;
  --gradient-sunset: linear-gradient(135deg, #e8973a 0%, #d9b34f 100%);
  --gradient-ocean:  linear-gradient(135deg, #c0553a 0%, #e8973a 100%);
  --glass-bg:     color-mix(in srgb, #3a2717 75%, transparent);
  --glass-border: color-mix(in srgb, #f4e4c8 10%, transparent);
  --hover-bg:     color-mix(in srgb, var(--accent) 14%, transparent);
  --focus-ring:   color-mix(in srgb, var(--accent) 30%, transparent);
}
/* Pas d'overlay scanlines/grille : medium physique (cartouche), pas un ecran -- vrai jour et nuit */
:root[data-theme="theme_cartouche"] body::before,
:root[data-theme="theme_cartouche"] body::after { display: none !important; }
:root[data-theme="theme_cartouche"] .panel,
:root[data-theme="theme_cartouche"] .stat-card,
:root[data-theme="theme_cartouche"] .jeu-card,
:root[data-theme="theme_cartouche"] .login-box {
  border-radius: 14px !important;
  box-shadow: var(--glow) !important;
}
:root[data-theme="theme_cartouche"] button:not(.btn-link):not(.hamburger-btn):not(.aq-tab):not(.cmdk-item):not(.cali-chip):not(.upcoming-wish-btn):not(.btn-mini):not(.emoji-btn):not(.color-btn):not(.btn-ghost):not(.sub-modal-x):not(.btn-approve):not(.nav-group-btn):not(.page-btn):not(.rvpv-alpha-btn),
:root[data-theme="theme_cartouche"] input[type="submit"] {
  background: var(--accent) !important;
  color: #fff8ec !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(107, 68, 35, 0.28) !important;
}

/* ---------- Theme ARCADE NEON (magenta/cyan, cabinet arcade) ----------
   Jour (v5.42.0) : poster synthwave pastel vu en pleine lumiere -- fond
   lavande/rose tres clair, accents magenta/cyan desatures pour rester lisibles
   sur du blanc. Nuit : cabinet d arcade original (fond violet tres sombre,
   neons vifs) -- INCHANGE, c etait deja l unique rendu avant le v5.42.0. */
:root[data-theme="theme_neon"] {
  --bg: #fdf1fb;
  --bg2: #ffffff;
  --bg3: #f7e8fa;
  --panel: #ffffff;
  --border: #e8a6dd;
  --accent: #d6169e;
  --accent2: #0891a8;
  --accent3: #d9930a;
  --purple: #7c3aed;
  --text: #3b1550;
  --text2: #7c4a99;
  --text3: #b98fc7;
  --glow: 0 4px 18px rgba(214, 22, 158, 0.18);
  --grid-overlay-opacity: 0.02;
  --scanline-opacity: 0;
  --gradient-sunset: linear-gradient(135deg, #d6169e 0%, #0891a8 100%);
  --gradient-ocean:  linear-gradient(135deg, #7c3aed 0%, #d6169e 100%);
  --glass-bg:     color-mix(in srgb, white 78%, transparent);
  --glass-border: color-mix(in srgb, #d6169e 12%, transparent);
  --hover-bg:     color-mix(in srgb, var(--accent) 10%, transparent);
  --focus-ring:   color-mix(in srgb, var(--accent) 30%, transparent);
}
:root[data-theme="theme_neon"][data-mode="night"] {
  --bg: #160a24;
  --bg2: #241338;
  --bg3: #241338;
  --panel: #241338;
  --border: #5a2e8a;
  --accent: #ff4fd8;
  --accent2: #00e5ff;
  --accent3: #ffe14d;
  --purple: #b388ff;
  --text: #7ef9ff;
  --text2: #c79bff;
  --text3: #8a6bb0;
  --glow: 0 0 22px rgba(255, 79, 216, 0.45);
  --grid-overlay-opacity: 0.05;
  --scanline-opacity: 0.05;
  --gradient-sunset: linear-gradient(135deg, #ff4fd8 0%, #00e5ff 100%);
  --gradient-ocean:  linear-gradient(135deg, #5a2e8a 0%, #ff4fd8 100%);
  --glass-bg:     color-mix(in srgb, #241338 72%, transparent);
  --glass-border: color-mix(in srgb, #ff4fd8 14%, transparent);
  --hover-bg:     color-mix(in srgb, var(--accent) 10%, transparent);
  --focus-ring:   color-mix(in srgb, var(--accent) 30%, transparent);
}
/* Jour : pas de scanlines/grille sombres sur le fond pastel clair */
:root[data-theme="theme_neon"] body::before,
:root[data-theme="theme_neon"] body::after { display: none !important; }
/* Nuit : grille + scanlines (rendu original du cabinet d arcade) */
:root[data-theme="theme_neon"][data-mode="night"] body::before,
:root[data-theme="theme_neon"][data-mode="night"] body::after { display: block !important; }
:root[data-theme="theme_neon"] .panel,
:root[data-theme="theme_neon"] .stat-card,
:root[data-theme="theme_neon"] .jeu-card,
:root[data-theme="theme_neon"] .login-box {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent), 0 0 18px color-mix(in srgb, var(--purple) 35%, transparent) !important;
}
:root[data-theme="theme_neon"] button:not(.btn-link):not(.hamburger-btn):not(.aq-tab):not(.cmdk-item):not(.cali-chip):not(.upcoming-wish-btn):not(.btn-mini):not(.emoji-btn):not(.color-btn):not(.btn-ghost):not(.sub-modal-x):not(.btn-approve):not(.nav-group-btn):not(.page-btn):not(.rvpv-alpha-btn),
:root[data-theme="theme_neon"] input[type="submit"] {
  background: linear-gradient(135deg, var(--accent) 0%, var(--purple) 100%) !important;
  color: var(--bg) !important;
  border: none !important;
  font-weight: 700 !important;
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 50%, transparent) !important;
}

/* ---------- Theme PIXEL ART (palette NES saturee, bordures nettes en relief) ----------
   Choix Guillaume valide sur mockup : coins nets (border-radius:0) PARTOUT pour ce theme
   uniquement, ombres "plates" sans flou (hard shadow façon sprite pixel art, jamais de
   blur). Police : v5.40.0 -- aucune CSP bloquante ni precedent limitant trouve dans le
   projet (Orbitron/Share Tech Mono/Inter deja charges depuis Google Fonts/rsms.me sans
   restriction), donc chargement conditionnel de "Press Start 2P" (Google Fonts) pour les
   titres/logo uniquement (cf includes/header.php, injecte SEULEMENT si
   data-theme="theme_pixel_ex") -- le corps de texte reste sur la police mono standard du
   site pour la lisibilite.
   v5.42.0 -- Mode jour/nuit. Jour : palette originale INCHANGEE (deja claire). Nuit :
   meme cartouche NES sous la lumiere de la TV, palette sombre, accents primaires
   rendus plus vifs pour ressortir sur le fond fonce. Toutes les regles "encre" figees
   en #1a1a2e sont repassees sur var(--border) pour que la nuit (ou #1a1a2e serait
   invisible sur un fond sombre) puisse la redefinir en une teinte claire "glow" sans
   dupliquer chaque regle. */
:root[data-theme="theme_pixel_ex"] {
  --bg: #f4f1e8;
  --bg2: #ffffff;
  --bg3: #f0ecd8;
  --panel: #ffffff;
  --border: #1a1a2e;
  --accent: #4caf50;
  --accent2: #c6392f;
  --accent3: #ffb300;
  --purple: #7b5ea7;
  --text: #2d3561;
  --text2: #3b5dc9;
  --text3: #6b6f8a;
  --glow: 4px 4px 0 var(--border);
  --grid-overlay-opacity: 0;
  --scanline-opacity: 0;
  --gradient-sunset: linear-gradient(135deg, #4caf50 0%, #7b5ea7 100%);
  --gradient-ocean:  linear-gradient(135deg, #3b5dc9 0%, #4caf50 100%);
  --glass-bg:     color-mix(in srgb, white 85%, transparent);
  --glass-border: color-mix(in srgb, #1a1a2e 12%, transparent);
  --hover-bg:     color-mix(in srgb, var(--accent) 12%, transparent);
  --focus-ring:   color-mix(in srgb, var(--accent) 30%, transparent);
}
:root[data-theme="theme_pixel_ex"][data-mode="night"] {
  --bg: #14162b;
  --bg2: #1c1f3d;
  --bg3: #191b35;
  --panel: #1c1f3d;
  --border: #d8dcff;
  --accent: #6fdc76;
  --accent2: #ff6f5e;
  --accent3: #ffd166;
  --purple: #b79aef;
  --text: #dfe3ff;
  --text2: #8fb0ff;
  --text3: #7d82ab;
  --glow: 4px 4px 0 var(--border);
  --grid-overlay-opacity: 0;
  --scanline-opacity: 0;
  --gradient-sunset: linear-gradient(135deg, #6fdc76 0%, #b79aef 100%);
  --gradient-ocean:  linear-gradient(135deg, #8fb0ff 0%, #6fdc76 100%);
  --glass-bg:     color-mix(in srgb, #1c1f3d 82%, transparent);
  --glass-border: color-mix(in srgb, #d8dcff 14%, transparent);
  --hover-bg:     color-mix(in srgb, var(--accent) 14%, transparent);
  --focus-ring:   color-mix(in srgb, var(--accent) 30%, transparent);
}
:root[data-theme="theme_pixel_ex"] body::before,
:root[data-theme="theme_pixel_ex"] body::after { display: none !important; }
/* Coins nets partout (voulu, cf commentaire ci-dessus) */
:root[data-theme="theme_pixel_ex"] * {
  border-radius: 0 !important;
}
:root[data-theme="theme_pixel_ex"] .panel,
:root[data-theme="theme_pixel_ex"] .stat-card,
:root[data-theme="theme_pixel_ex"] .jeu-card,
:root[data-theme="theme_pixel_ex"] .login-box {
  background: var(--panel) !important;
  border: 3px solid var(--border) !important;
  box-shadow: 4px 4px 0 var(--border) !important;
}
:root[data-theme="theme_pixel_ex"] input[type="text"],
:root[data-theme="theme_pixel_ex"] input[type="email"],
:root[data-theme="theme_pixel_ex"] input[type="password"],
:root[data-theme="theme_pixel_ex"] input[type="search"],
:root[data-theme="theme_pixel_ex"] input[type="number"],
:root[data-theme="theme_pixel_ex"] input[type="date"],
:root[data-theme="theme_pixel_ex"] textarea,
:root[data-theme="theme_pixel_ex"] select {
  background: var(--panel) !important;
  border: 3px solid var(--border) !important;
  box-shadow: 2px 2px 0 var(--border) !important;
}
:root[data-theme="theme_pixel_ex"] button:not(.btn-link):not(.hamburger-btn):not(.aq-tab):not(.cmdk-item):not(.cali-chip):not(.upcoming-wish-btn):not(.btn-mini):not(.emoji-btn):not(.color-btn):not(.btn-ghost):not(.sub-modal-x):not(.btn-approve):not(.nav-group-btn):not(.page-btn):not(.rvpv-alpha-btn),
:root[data-theme="theme_pixel_ex"] input[type="submit"] {
  background: var(--accent) !important;
  color: #0d2b0f !important;
  border: 3px solid var(--border) !important;
  box-shadow: 3px 3px 0 var(--border) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  transition: transform 0.08s, box-shadow 0.08s !important;
}
:root[data-theme="theme_pixel_ex"] button:not(.btn-link):not(.hamburger-btn):not(.aq-tab):not(.cmdk-item):not(.cali-chip):not(.upcoming-wish-btn):not(.nav-group-btn):not(.page-btn):not(.rvpv-alpha-btn):hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--border) !important;
}
:root[data-theme="theme_pixel_ex"] button:not(.btn-link):not(.hamburger-btn):not(.aq-tab):not(.cmdk-item):not(.cali-chip):not(.upcoming-wish-btn):not(.nav-group-btn):not(.page-btn):not(.rvpv-alpha-btn):active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--border) !important;
}
:root[data-theme="theme_pixel_ex"] h1,
:root[data-theme="theme_pixel_ex"] h2,
:root[data-theme="theme_pixel_ex"] h3,
:root[data-theme="theme_pixel_ex"] .panel-title,
:root[data-theme="theme_pixel_ex"] .page-title,
:root[data-theme="theme_pixel_ex"] .login-logo {
  font-family: 'Press Start 2P', 'Courier New', monospace !important;
  text-shadow: none !important;
  letter-spacing: 0 !important;
  line-height: 1.5 !important;
}
:root[data-theme="theme_pixel_ex"] .stat-label,
:root[data-theme="theme_pixel_ex"] label {
  color: var(--accent2) !important;
}

/* ---------- Theme CD TECHNO 32-BIT (boot console fin 90s, Saturn/PS1/Dreamcast) ----------
   v5.41.0 -- 6e theme, ajoute suite a la fourniture par Guillaume de la police Zrnic
   (Typodermic, sans-serif anguleuse/modulaire, decoupes evoquant les circuits imprimes).
   Extraction du .zip impossible cette session (bac a sable indisponible), donc repli
   temporaire sur Orbitron -- deja chargee site-wide sans condition (cf <head>, meme famille
   d esprit geometrique/tech) -- a remplacer par la vraie police Zrnic auto-hebergee des
   qu elle sera extraite (voir assets/fonts/ a creer). Signature visuelle : degrade diagonal
   violet -> teal (au lieu d un fond plein comme les 4 autres), panels/boutons a coins
   COUPES a 45 deg (clip-path) au lieu d arrondis -- motif tres caracteristique des UI
   tech de boot console 32-bit -- accent orange (clin d oeil logo tourbillon Dreamcast).
   v5.42.0 -- Mode jour/nuit. Jour : boitier de CD pose sur une visionneuse lumineuse --
   degrade lavande/menthe clair (au lieu du violet->teal sombre), memes accents
   orange/teal assombris pour rester lisibles sur fond clair. Nuit : boot console
   original -- INCHANGE, c etait deja l unique rendu avant le v5.42.0. */
:root[data-theme="theme_techno32bit"] {
  --bg: #eef0fb;
  --bg2: #ffffff;
  --bg3: #e3f5f2;
  --panel: #ffffff;
  --border: #0d9488;
  --accent: #e8720f;
  --accent2: #0d9488;
  --accent3: #d99a00;
  --purple: #7c6bb0;
  --text: #241a3d;
  --text2: #0d7a70;
  --text3: #8b83ab;
  --glow: 0 4px 16px rgba(13, 148, 136, 0.16);
  --grid-overlay-opacity: 0.02;
  --scanline-opacity: 0;
  --gradient-sunset: linear-gradient(160deg, #dbe4ff 0%, #d3f3ee 100%);
  --gradient-ocean:  linear-gradient(135deg, #0d9488 0%, #7c6bb0 100%);
  --glass-bg:     color-mix(in srgb, white 82%, transparent);
  --glass-border: color-mix(in srgb, #0d9488 14%, transparent);
  --hover-bg:     color-mix(in srgb, var(--accent) 10%, transparent);
  --focus-ring:   color-mix(in srgb, var(--accent) 30%, transparent);
}
:root[data-theme="theme_techno32bit"][data-mode="night"] {
  --bg: #1a1030;
  --bg2: #0f0a20;
  --bg3: #150d28;
  --panel: #0f0a20;
  --border: #14b8a6;
  --accent: #ff8a3d;
  --accent2: #14b8a6;
  --accent3: #ffd23f;
  --purple: #4a3a6e;
  --text: #e8f4f2;
  --text2: #7dd8cf;
  --text3: #8a7ab0;
  --glow: 0 0 18px rgba(20, 184, 166, 0.32);
  --grid-overlay-opacity: 0.04;
  --scanline-opacity: 0;
  --gradient-sunset: linear-gradient(160deg, #241448 0%, #0d2a2e 100%);
  --gradient-ocean:  linear-gradient(135deg, #14b8a6 0%, #4a3a6e 100%);
  --glass-bg:     color-mix(in srgb, #0f0a20 80%, transparent);
  --glass-border: color-mix(in srgb, #14b8a6 16%, transparent);
  --hover-bg:     color-mix(in srgb, var(--accent) 10%, transparent);
  --focus-ring:   color-mix(in srgb, var(--accent) 30%, transparent);
}
:root[data-theme="theme_techno32bit"] body {
  background: var(--gradient-sunset) !important;
  background-attachment: fixed !important;
}
:root[data-theme="theme_techno32bit"] body::before,
:root[data-theme="theme_techno32bit"] body::after { display: none !important; }
/* Coins coupes a 45deg (au lieu d'arrondis) sur les panels -- signature UI boot console */
:root[data-theme="theme_techno32bit"] .panel,
:root[data-theme="theme_techno32bit"] .stat-card,
:root[data-theme="theme_techno32bit"] .jeu-card,
:root[data-theme="theme_techno32bit"] .login-box {
  border-radius: 0 !important;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  border: 1px solid var(--border) !important;
  box-shadow: var(--glow) !important;
}
:root[data-theme="theme_techno32bit"] button:not(.btn-link):not(.hamburger-btn):not(.aq-tab):not(.cmdk-item):not(.cali-chip):not(.upcoming-wish-btn):not(.btn-mini):not(.emoji-btn):not(.color-btn):not(.btn-ghost):not(.sub-modal-x):not(.btn-approve):not(.nav-group-btn):not(.page-btn):not(.rvpv-alpha-btn),
:root[data-theme="theme_techno32bit"] input[type="submit"] {
  background: var(--accent) !important;
  color: #1a1030 !important;
  border: none !important;
  border-radius: 0 !important;
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
  font-weight: 700 !important;
  font-family: 'Zrnic', 'Orbitron', sans-serif !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  box-shadow: 0 2px 10px rgba(255, 138, 61, 0.35) !important;
}
:root[data-theme="theme_techno32bit"] input:focus,
:root[data-theme="theme_techno32bit"] textarea:focus,
:root[data-theme="theme_techno32bit"] select:focus {
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent2) 50%, transparent) !important;
}
:root[data-theme="theme_techno32bit"] h1,
:root[data-theme="theme_techno32bit"] h2,
:root[data-theme="theme_techno32bit"] h3,
:root[data-theme="theme_techno32bit"] .panel-title,
:root[data-theme="theme_techno32bit"] .page-title,
:root[data-theme="theme_techno32bit"] .login-logo {
  font-family: 'Zrnic', 'Orbitron', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-shadow: none !important;
}

/* Bouton jour/nuit (span role=button, pour echapper au style des <button> California) */
.rv-daynight {
  background: transparent; border: 1px solid var(--border); color: var(--text2);
  min-width: 38px; height: 38px; padding: 0 10px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 1rem; line-height: 1; user-select: none;
  transition: background .15s, color .15s, border-color .15s;
}
.rv-daynight:hover { color: var(--text); border-color: var(--text3); background: var(--hover-bg); }

/* v5.21.33 — Icone dediee messagerie dans .rv-nav-utils (meme conteneur que jour/nuit
   et langue) : visible en ligne sur desktop, et dans le menu deplie sur mobile, sans
   FAB supplementaire. Meme gabarit visuel que .rv-daynight pour rester coherent. */
.rv-nav-msg {
  position: relative;
  background: transparent; border: 1px solid var(--border); color: var(--text2);
  min-width: 38px; height: 38px; padding: 0 10px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem; line-height: 1; text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.rv-nav-msg:hover { color: var(--text); border-color: var(--text3); background: var(--hover-bg); }
.rv-nav-msg-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 16px; padding: 0 4px; border-radius: 99px;
  background: #ef4444; color: #fff; font-size: 0.62rem; font-weight: 700;
  line-height: 16px; text-align: center;
}

/* v5.7.14 — Selecteur de langue dans le menu de l app connectee (meme composant que
   les pages publiques). Ne pas stretcher en pleine largeur sur mobile (colonne empilee).
   v5.26.8 — regle generale inchangee (toujours utilisee telle quelle sur les pages
   publiques) ; le cas particulier dans .rv-nav-utils est surcharge juste apres. */
.rv-lang-nav-wrap { display: inline-flex; align-self: center; }
@media (max-width: 768px) {
  .rv-lang-nav-wrap { align-self: flex-start; margin: 0.3rem 0; }
}

/* v5.9.1 — Conteneur jour/nuit + langue (+ messagerie depuis v5.21.33), detache par un
   filet vertical. v5.26.8 — deplace hors du <nav> des pastilles de menu, dans
   rv-identity-chip-row aux cotes de la puce identite : a une largeur intermediaire, ce
   bloc partait seul a la ligne en laissant un vide a droite des pastilles (signale par
   Guillaume). Reste desormais TOUJOURS visible en ligne (desktop et mobile), plus besoin
   de version "empilee dans le menu deplie" : le mobile garde son comportement actuel car
   ce bloc est hors du <nav> que le hamburger affiche/masque. */
.rv-nav-utils {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-right: 0.75rem;
  border-right: 1px solid var(--border);
}
.rv-nav-utils .rv-lang-nav-wrap { align-self: center; margin: 0; }
@media (max-width: 480px) {
  /* Sur tres petit ecran, le filet separateur peut flotter bizarrement si le bloc
     entier passe a la ligne (rv-identity-chip-row est en flex-wrap) -> on l enleve. */
  .rv-nav-utils { border-right: none; padding-right: 0; }
}

/* v5.13.0 — Compteur discret « le site en direct » (jeux/consoles/accessoires/
   collectionneurs). v5.13.1 : flex-basis:100% pour forcer sa propre ligne
   TOUJOURS (au lieu de se faire ecraser au hasard des retours a la ligne des
   pills de menu, ou il finissait coince sous le logo) - place en dessous du
   menu, aligne a droite, avec un filet de separation. Tres petit et en gris
   muted pour rester volontairement discret (survol = detail complet en infobulle). */
/* v5.13.4 — Retour a la structure simple deja eprouvée par .rv-nav-utils juste
   au-dessus (inline-flex + align-items:center, sans line-height force) : la
   tentative v5.13.3 (line-height:1 + inline-flex sur chaque span) donnait un
   resultat pire (texte colle en haut). align-items:center seul suffit, comme
   pour 🌙 + Francais dans .rv-nav-utils qui s affiche correctement. */
.rv-site-stats-inline {
  display: flex;
  flex-basis: 100%;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  margin: 0.5rem 0 0 0;
  padding: 0.5rem 0 0 0;
  border-top: 1px solid var(--border);
  font-size: 0.7rem;
  color: var(--text3);
  white-space: nowrap;
  cursor: default;
}
.rv-site-stats-label {
  font-weight: 500;
  color: var(--text2);
}
/* v5.23.0 — Chiffre collectionneurs cliquable pour l admin (popup presence live) */
#rv-presence-trigger {
  cursor: pointer;
  border-radius: 6px;
  padding: 1px 4px;
  margin: -1px -4px;
  transition: background 0.15s, color 0.15s;
}
#rv-presence-trigger:hover,
#rv-presence-trigger:focus-visible {
  background: var(--bg3, var(--bg));
  color: var(--text);
  outline: none;
}
@media (max-width: 768px) {
  .rv-site-stats-inline {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

/* === View Transitions API (cross-document, navigation-driven) === */
/* v5.20.11 — Restauree (diagnostic v5.20.10 : n'etait pas en cause, cf includes/header.php). */
@view-transition { navigation: auto; }
:root[data-theme="california"]::view-transition-old(root),
:root[data-theme="california"]::view-transition-new(root) {
  animation-duration: 0.32s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* === Pas d'overlays scanlines/grille === */
:root[data-theme="california"] body::before,
:root[data-theme="california"] body::after { display: none !important; }

/* === Police système Inter / SF Pro === */
:root[data-theme="california"] body {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "SF Pro Display",
               "Segoe UI", Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  background: var(--bg) !important;
  color: var(--text) !important;
  letter-spacing: -0.005em;
}

/* === Titres bold + text-wrap balance === */
:root[data-theme="california"] h1,
:root[data-theme="california"] h2,
:root[data-theme="california"] h3,
:root[data-theme="california"] .panel-title,
:root[data-theme="california"] .page-title,
:root[data-theme="california"] .login-logo {
  font-family: inherit !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  text-wrap: balance;
  text-shadow: none !important;
  color: var(--text) !important;
}
:root[data-theme="california"] .page-title {
  font-size: 2.2rem;
  font-weight: 800 !important;
}
:root[data-theme="california"] p { text-wrap: pretty; }

/* === Stat values en gradient sunset (signature) === */
/* Container query : la taille du chiffre s'adapte à la largeur de la carte
   pour ne JAMAIS dépasser une seule ligne (même avec "999 999 €") */
:root[data-theme="california"] .stat-card {
  container-type: inline-size;
  min-width: 0;
}
:root[data-theme="california"] .stat-value {
  background: var(--gradient-sunset);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800 !important;
  font-size: clamp(1.4rem, 12cqi, 2.1rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.03em !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: block;
}
:root[data-theme="california"] .stat-label {
  font-size: 0.7rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  color: var(--text3) !important;
  font-weight: 600 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:root[data-theme="california"] .stat-sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* === Header frosted glass sticky === */
/* v3.6.5 — blur réduit de 24→12px : le reblur GPU à chaque frame de scroll
   était la cause #1 du jank ressenti sur l'accueil (audit perf 2026-05-16).
   12px reste très lisible esthétiquement, ~50% moins coûteux en composite.
   + will-change/translateZ pour forcer la promotion en couche GPU dédiée
   (= le header est composé indépendamment, ne re-paint pas le contenu sous lui). */
:root[data-theme="california"] header {
  background: var(--glass-bg) !important;
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--glass-border) !important;
  position: sticky; top: 0; z-index: 50;
  will-change: transform;
  transform: translateZ(0);
}
:root[data-theme="california"] header a[href*="index.php"] {
  color: var(--text) !important;
  letter-spacing: -0.025em;
}
:root[data-theme="california"] nav a {
  color: var(--text) !important;
  font-family: inherit !important;
  font-weight: 500 !important;
  font-size: 0.85rem !important;
  border-radius: 980px;
  padding: 0.35rem 0.75rem !important;
  transition: background 0.15s, color 0.15s;
}
:root[data-theme="california"] nav a:hover {
  background: var(--hover-bg);
  color: var(--accent) !important;
}
:root[data-theme="california"] nav a.nav-active {
  background: var(--gradient-sunset) !important;
  color: white !important;
}

/* === Cards : ombre premium + hover lift === */
:root[data-theme="california"] .panel,
:root[data-theme="california"] .stat-card,
:root[data-theme="california"] .jeu-card,
:root[data-theme="california"] .discover-card,
:root[data-theme="california"] .upcoming-card,
:root[data-theme="california"] .wishlist-card {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  /* v3.6.5 — Une seule ombre au lieu de 2 (composite + paint plus légers).
     Transition limitée à transform pour éviter l'animation des box-shadow au hover
     (= 0 paint au hover, juste un compositing GPU). */
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1);
}
:root[data-theme="california"] .jeu-card:hover,
:root[data-theme="california"] .discover-card:hover,
:root[data-theme="california"] .upcoming-card:hover {
  transform: translateY(-4px);
}

/* === Boutons gradient sunset (primaires) ===
   PLAT-4/5 : exclusions ajoutées pour .btn-mini, .emoji-btn, .color-btn (boutons utilitaires compacts)
   v7.5.1 : exclusions ajoutées pour les boutons compacts de la Collection TCG (admin/tcg.php) --
   rv-tcg-card-del/rv-tcg-card-open (icones sur les tuiles carte) et rv-tcg-classeur-btn (actions
   sur l arborescence des classeurs) etaient ecrases par ce theme malgre leurs propres !important,
   car ce selecteur est plus specifique (attribut + element) qu une simple classe.
   v7.8.3 : meme probleme signale sur l icone AR (rv-tcg-card-ar) et le bouton fermer des popups
   TCG (rv-tcg-modal-x, cf admin/tcg.php) -- ajoutes a la liste d exclusion. */
:root[data-theme="california"] button:not(.btn-link):not(.hamburger-btn):not(.aq-tab):not(.theme-card):not(.cmdk-item):not(.cali-chip):not(.upcoming-wish-btn):not(.btn-mini):not(.emoji-btn):not(.color-btn):not(.btn-ghost):not(.sub-modal-x):not(.btn-approve):not(.nav-group-btn):not(.page-btn):not(.rvpv-alpha-btn):not(.rv-appnav-tab):not(.rv-appnav-plus-close):not(.rv-tcg-card-del):not(.rv-tcg-card-open):not(.rv-tcg-classeur-btn):not(.rv-tcg-card-ar):not(.rv-tcg-modal-x):not(.rv-tcg-wall-ar-btn),
:root[data-theme="california"] input[type="submit"] {
  background: var(--gradient-sunset) !important;
  color: white !important;
  border: none !important;
  border-radius: 980px !important;
  padding: 0.55rem 1.2rem !important;
  font-family: inherit !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  letter-spacing: -0.01em !important;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(249,115,22,0.22);
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}
:root[data-theme="california"] button:not(.btn-link):not(.hamburger-btn):not(.aq-tab):not(.theme-card):not(.cmdk-item):not(.cali-chip):not(.upcoming-wish-btn):not(.nav-group-btn):not(.page-btn):not(.rvpv-alpha-btn):not(.rv-appnav-tab):not(.rv-appnav-plus-close):not(.rv-tcg-card-del):not(.rv-tcg-card-open):not(.rv-tcg-classeur-btn):not(.rv-tcg-card-ar):not(.rv-tcg-modal-x):not(.rv-tcg-wall-ar-btn):hover {
  box-shadow: 0 4px 16px rgba(249,115,22,0.35);
  transform: translateY(-1px);
}
:root[data-theme="california"] button:not(.btn-link):not(.hamburger-btn):not(.aq-tab):not(.theme-card):not(.cmdk-item):not(.cali-chip):not(.upcoming-wish-btn):not(.nav-group-btn):not(.page-btn):not(.rvpv-alpha-btn):not(.rv-appnav-tab):not(.rv-appnav-plus-close):not(.rv-tcg-card-del):not(.rv-tcg-card-open):not(.rv-tcg-classeur-btn):not(.rv-tcg-card-ar):not(.rv-tcg-modal-x):not(.rv-tcg-wall-ar-btn):active {
  transform: scale(0.98);
}
:root[data-theme="california"] button:disabled { opacity: 0.4 !important; cursor: not-allowed; }

/* btn-link : ghost arrondi */
:root[data-theme="california"] .btn-link {
  background: var(--bg2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 980px !important;
  padding: 0.4rem 0.95rem !important;
  font-weight: 500 !important;
  font-family: inherit !important;
}
:root[data-theme="california"] .btn-link:hover {
  background: var(--hover-bg) !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* === Inputs avec focus ring === */
:root[data-theme="california"] input[type="text"],
:root[data-theme="california"] input[type="email"],
:root[data-theme="california"] input[type="password"],
:root[data-theme="california"] input[type="search"],
:root[data-theme="california"] input[type="number"],
:root[data-theme="california"] input[type="date"],
:root[data-theme="california"] input[type="file"],
:root[data-theme="california"] textarea,
:root[data-theme="california"] select {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 0.6rem 0.9rem !important;
  font-family: inherit !important;
  font-size: 0.9rem !important;
  color: var(--text) !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}
:root[data-theme="california"] input:focus,
:root[data-theme="california"] textarea:focus,
:root[data-theme="california"] select:focus {
  outline: none;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px var(--focus-ring) !important;
}
:root[data-theme="california"] label {
  color: var(--text2) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
}

/* === Scroll-driven animations sur cards === */
/* v3.6.5 — Retiré .discover-card et .upcoming-card (cards de l'accueil) :
   ces 2 grilles sont denses (20-30 cards) et chaque card animait opacity+transform
   à chaque frame de scroll → recalculs style/composite en continu → scroll jank.
   On garde uniquement .jeu-card (la grille jeux.php où l'effet d'entrée est subtil
   car les cards arrivent plus espacées et les animations sont moins nombreuses). */
@keyframes cali-fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@supports (animation-timeline: view()) {
  :root[data-theme="california"] .jeu-card {
    animation: cali-fadeUp linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 25%;
  }
}

/* === Skeleton loaders (shimmer) === */
@keyframes cali-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
:root[data-theme="california"] .skeleton {
  background: linear-gradient(90deg,
    var(--bg3) 0%,
    color-mix(in srgb, var(--bg3) 40%, white) 50%,
    var(--bg3) 100%);
  background-size: 200% 100%;
  animation: cali-shimmer 1.4s ease-in-out infinite;
  border-radius: 8px;
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}

/* === Popover natif (modals) avec @starting-style === */
:root[data-theme="california"] [popover] {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--bg2);
  box-shadow: 0 24px 64px rgba(0,0,0,0.18);
  padding: 0;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.2s ease, transform 0.2s ease,
              overlay 0.2s allow-discrete, display 0.2s allow-discrete;
}
:root[data-theme="california"] [popover]:popover-open {
  opacity: 1;
  transform: scale(1);
}
@starting-style {
  :root[data-theme="california"] [popover]:popover-open {
    opacity: 0;
    transform: scale(0.96);
  }
}
:root[data-theme="california"] [popover]::backdrop {
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* === Filter chips amovibles === */
:root[data-theme="california"] .cali-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 0 1rem;
}
:root[data-theme="california"] .cali-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 980px;
  padding: 4px 6px 4px 12px;
  font-size: 0.8rem;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
:root[data-theme="california"] .cali-chip:hover {
  background: var(--hover-bg);
  border-color: var(--accent);
}
:root[data-theme="california"] .cali-chip-x {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--text3);
  color: white;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; line-height: 1;
}

/* === Command Palette ⌘K === */
/* v5.9.1 — Fix positionnement : inset: unset cassait le centrage (le popover natif a
   besoin de inset: 0 comme ancre pour que margin: auto le centre horizontalement ;
   sans ca, il retombait en haut a gauche du viewport). */
:root[data-theme="california"] #cmdk-modal {
  width: min(640px, 92vw);
  max-height: 70vh;
  margin: 12vh auto auto;
  inset: 0;
}

/* v4.0.2 — Fallback iOS Safari < 17 : l'API popover n'est pas supportée,
   le JS bascule sur .cmdk-fallback-open qui force tout le styling. Sans ce
   bloc, le bouton 🔍 Rechercher cliquait dans le vide sur iPhone X. */
#cmdk-modal.cmdk-fallback-open {
  display: block !important;
  position: fixed !important;
  top: 8vh !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(640px, 92vw) !important;
  max-height: 80vh !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  border: 1px solid var(--border, rgba(0,0,0,0.1)) !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.4) !important;
  z-index: 99999 !important;
  overflow: hidden;
}
/* Overlay derrière le modal fallback (créé via box-shadow pour éviter d'ajouter un DOM node) */
#cmdk-modal.cmdk-fallback-open::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
}
/* Sur mobile : le modal occupe quasi tout l'écran avec une marge minimale */
@media (max-width: 600px) {
  #cmdk-modal.cmdk-fallback-open {
    top: 4vh !important;
    width: 94vw !important;
    max-height: 90vh !important;
  }
}
:root[data-theme="california"] #cmdk-input {
  width: 100%;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 18px 18px 0 0 !important;
  padding: 1.1rem 1.4rem !important;
  font-size: 1rem !important;
  background: transparent !important;
}
:root[data-theme="california"] #cmdk-input:focus { box-shadow: none !important; }
:root[data-theme="california"] #cmdk-results {
  max-height: 50vh;
  overflow-y: auto;
  padding: 0.5rem;
}
:root[data-theme="california"] .cmdk-section-label {
  padding: 0.5rem 0.8rem 0.3rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text3);
  font-weight: 600;
}
:root[data-theme="california"] .cmdk-item {
  display: flex; align-items: center; gap: 10px;
  padding: 0.55rem 0.8rem;
  border-radius: 10px;
  background: transparent !important;
  border: none !important;
  color: var(--text) !important;
  font-family: inherit !important;
  width: 100%; text-align: left;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  cursor: pointer;
  text-decoration: none;
  box-shadow: none !important;
}
:root[data-theme="california"] .cmdk-item.cmdk-active,
:root[data-theme="california"] .cmdk-item:hover {
  background: var(--hover-bg) !important;
}
:root[data-theme="california"] .cmdk-item-cover {
  width: 28px; height: 36px;
  border-radius: 4px;
  object-fit: cover;
  background: var(--bg3);
  flex-shrink: 0;
}
:root[data-theme="california"] .cmdk-item-meta { flex: 1; min-width: 0; }
:root[data-theme="california"] .cmdk-item-title {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
:root[data-theme="california"] .cmdk-item-sub {
  font-size: 0.72rem; color: var(--text2); font-weight: 400;
}
:root[data-theme="california"] .cmdk-kbd {
  font-size: 0.7rem;
  background: var(--bg3);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--text2);
  border: 1px solid var(--border);
  font-family: ui-monospace, "SF Mono", monospace;
}

/* Trigger button "⌘K" dans la nav */
:root[data-theme="california"] #cmdk-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 980px !important;
  padding: 0.3rem 0.5rem 0.3rem 0.85rem !important;
  font-size: 0.8rem !important;
  color: var(--text2) !important;
  cursor: pointer;
  font-weight: 400 !important;
  transition: border-color 0.15s, background 0.15s;
  font-family: inherit !important;
}
:root[data-theme="california"] #cmdk-trigger:hover {
  background: var(--hover-bg) !important;
  border-color: var(--accent) !important;
}

/* === Bandeau batch glassy === */
:root[data-theme="california"] #rv-batch-banner {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 16px !important;
  border-color: var(--border) !important;
  box-shadow: 0 16px 32px rgba(0,0,0,0.12);
}

/* === On this day widget === */
:root[data-theme="california"] .on-this-day {
  background: var(--gradient-sunset);
  color: white;
  border-radius: 18px;
  padding: 1rem 1.25rem;
  display: flex; align-items: center; gap: 1rem;
  box-shadow: 0 8px 24px rgba(249,115,22,0.18);
  text-decoration: none;
}
:root[data-theme="california"] .on-this-day img {
  width: 60px; height: 80px; border-radius: 8px; object-fit: cover; flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
:root[data-theme="california"] .on-this-day .otd-meta { flex: 1; }
:root[data-theme="california"] .on-this-day .otd-label {
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85;
}
:root[data-theme="california"] .on-this-day .otd-title {
  font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; margin-top: 2px;
}
:root[data-theme="california"] .on-this-day .otd-sub { font-size: 0.85rem; opacity: 0.9; margin-top: 4px; }

/* === AI summary card === */
:root[data-theme="california"] .ai-summary-card {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--bg2);
  padding: 1.2rem;
  position: relative;
  overflow: hidden;
}
:root[data-theme="california"] .ai-summary-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--gradient-sunset);
}
:root[data-theme="california"] .ai-summary-text {
  font-size: 0.95rem; line-height: 1.55; color: var(--text); text-wrap: pretty;
}

/* === Cover wall (mosaïque colonnes) === */
.cover-wall {
  column-count: 8;
  column-gap: 6px;
  padding: 8px;
  background: #0a0a0a;
}
@media (max-width: 1200px) { .cover-wall { column-count: 6; } }
@media (max-width: 768px)  { .cover-wall { column-count: 4; } }
@media (max-width: 500px)  { .cover-wall { column-count: 3; } }
.cover-wall img {
  width: 100%; margin-bottom: 6px;
  break-inside: avoid; -webkit-column-break-inside: avoid;
  border-radius: 4px; display: block;
  transition: transform 0.3s, box-shadow 0.3s;
}
.cover-wall img:hover {
  transform: scale(1.04);
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  position: relative; z-index: 10;
}
@media print {
  .cover-wall { column-count: 6; background: white; padding: 0; }
  body > header, body > footer, .container > h1, .container > p { display: none !important; }
}

/* === Heatmap calendar === */
.heatmap-wrap { overflow-x: auto; padding: 8px 0; }
.heatmap {
  display: grid; grid-auto-flow: column;
  grid-template-rows: repeat(7, 12px);
  gap: 3px; min-width: max-content;
}
.heatmap-cell {
  width: 12px; height: 12px;
  border-radius: 3px;
  background: var(--bg3);
  position: relative;
  cursor: pointer;
}
:root[data-theme="california"] .heatmap-cell[data-level="1"] { background: color-mix(in srgb, var(--accent) 25%, var(--bg3)); }
:root[data-theme="california"] .heatmap-cell[data-level="2"] { background: color-mix(in srgb, var(--accent) 50%, var(--bg3)); }
:root[data-theme="california"] .heatmap-cell[data-level="3"] { background: color-mix(in srgb, var(--accent) 75%, var(--bg3)); }
:root[data-theme="california"] .heatmap-cell[data-level="4"] { background: var(--accent); }
:root:not([data-theme="california"]) .heatmap-cell[data-level="1"] { background: rgba(0,245,212,0.25); }
:root:not([data-theme="california"]) .heatmap-cell[data-level="2"] { background: rgba(0,245,212,0.5); }
:root:not([data-theme="california"]) .heatmap-cell[data-level="3"] { background: rgba(0,245,212,0.75); }
:root:not([data-theme="california"]) .heatmap-cell[data-level="4"] { background: var(--accent); }
.heatmap-cell:hover { outline: 1px solid var(--accent); }

/* === Scrollbar discret === */
:root[data-theme="california"] ::-webkit-scrollbar { width: 10px; height: 10px; }
:root[data-theme="california"] ::-webkit-scrollbar-track { background: transparent; }
:root[data-theme="california"] ::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.15); border-radius: 980px;
  border: 2px solid transparent; background-clip: padding-box;
}

/* ===== Reset et Base ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Share Tech Mono', monospace;
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.07) 2px, rgba(0,0,0,0.07) 4px);
  pointer-events: none;
  z-index: 9999;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,245,212,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,245,212,0.015) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

/* ===== Login Screen ===== */
#login-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.login-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 360px;
  position: relative;
  z-index: 1;
  animation: fadeIn 0.4s ease;
  box-shadow: 0 0 60px rgba(0, 245, 212, 0.05);
}

.login-logo {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 1.7rem;
  color: var(--accent);
  text-shadow: 0 0 30px rgba(0, 245, 212, 0.5);
  text-align: center;
  margin-bottom: 0.3rem;
}

.login-logo span {
  color: var(--accent2);
}

.login-sub {
  text-align: center;
  font-size: 0.65rem;
  color: var(--text2);
  margin-bottom: 2rem;
  letter-spacing: 0.1em;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== Dashboard Layout ===== */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem;
  box-sizing: border-box;
  width: 100%;
}

/* Forcer le centrage du <main> (chargé via header.php) */
main {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  padding: 1rem 1.25rem;
  box-sizing: border-box;
  display: block;
}

/* Sécurité : tous les enfants directs de main respectent la largeur */
main > *,
.container > * { max-width: 100%; }
.dash-row { max-width: 100%; box-sizing: border-box; }

/* En-tête de page cohérent partout */
.page-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.6rem;
  color: var(--accent);
  margin: 0 0 0.3rem;
}
.page-sub {
  color: var(--text2);
  font-size: 0.85rem;
  margin: 0 0 1.2rem;
}

/* Active link dans la nav (auto via classe .nav-active sur le <a> du header) */
header nav a.nav-active {
  color: var(--accent) !important;
  position: relative;
}
header nav a.nav-active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

.dash-row {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* minmax(0, 1fr) : empêche l'expansion des colonnes par contenu intrinsèque large
   (ex: Splide en autoWidth, tableau avec colonnes wide, etc.) */
.dash-row.cols-1 {
  grid-template-columns: minmax(0, 1fr);
}

.dash-row.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dash-row.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dash-row.cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .dash-row.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .dash-row.cols-4 { grid-template-columns: 1fr; }
}

@media (max-width: 1100px) {
  .dash-row.cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .dash-row.cols-3,
  .dash-row.cols-2 {
    grid-template-columns: 1fr;
  }
}

/* ===== Stat Cards ===== */
.panel {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.stat-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
}

.stat-card.c1::before {
  background: linear-gradient(90deg, var(--accent), transparent);
}

.stat-card.c2::before {
  background: linear-gradient(90deg, var(--accent2), transparent);
}

.stat-card.c3::before {
  background: linear-gradient(90deg, var(--accent3), transparent);
}

.stat-card.c4::before {
  background: linear-gradient(90deg, var(--purple), transparent);
}

.stat-label {
  font-size: 0.58rem;
  color: var(--text2);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

.stat-value {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.7rem;
  font-weight: 900;
  color: var(--text);
}

.stat-sub {
  font-size: 0.6rem;
  color: var(--text3);
  margin-top: 0.2rem;
}

.stat-icon {
  position: absolute;
  right: 0.7rem;
  top: 0.7rem;
  font-size: 1.3rem;
  opacity: 0.1;
}

/* ===== Region Badges ===== */
/* v3.16.7 : nouveau badge région en rond drapeau SVG inline (remplace les anciennes pills texte).
   La classe .region-badge reste pour rétro-compatibilité (fallback CSS si helper absent). */
.region-flag-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.97);
  border: 0.5px solid rgba(0, 0, 0, 0.18);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  vertical-align: middle;
  flex-shrink: 0;
}
.region-flag-badge svg {
  display: block;
}

/* v3.16.7 : overlay région en haut-droite des cards de l'accueil "À (re)découvrir" */
.discover-region-overlay {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  pointer-events: none;
}

.region-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.56rem;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.04em;
}

.region-pal {
  background: rgba(0, 120, 255, 0.15);
  color: #4da6ff;
  border: 1px solid rgba(0, 120, 255, 0.2);
}

.region-ntsc-u {
  background: rgba(220, 30, 30, 0.15);
  color: #ff6666;
  border: 1px solid rgba(220, 30, 30, 0.2);
}

/* UI-1 : NTSC-J et JAP unifiés visuellement (rouge japonais) — étaient white-on-white */
.region-ntsc-j,
.region-jap {
  background: rgba(220, 30, 30, 0.12);
  color: #d63232;
  border: 1px solid rgba(220, 30, 30, 0.25);
}

/* ===== Jeux Grid ===== */
.jeux-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.jeu-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
}

.jeu-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--glow);
}

.jeu-card img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

/* ===== Formulaires ===== */
form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

label {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--text2);
  font-family: 'Share Tech Mono', monospace;
}

input, select, textarea, button {
  padding: 0.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  font-family: 'Share Tech Mono', monospace;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 5px rgba(0, 245, 212, 0.3);
}

button {
  background: var(--accent);
  border: none;
  color: var(--bg);
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  cursor: pointer;
  transition: box-shadow 0.3s;
}

button:hover {
  box-shadow: var(--glow);
}

/* ===== Tables ===== */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

th, td {
  padding: 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

th {
  color: var(--text2);
  font-family: 'Orbitron', sans-serif;
}

tr:hover {
  background: rgba(0, 245, 212, 0.05);
}

/* ===== Upcoming/Wishlist Grid ===== */
.upcoming-grid, .wishlist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.upcoming-card, .wishlist-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem;
  text-align: center;
  position: relative;
}

.upcoming-card img, .wishlist-card img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

/* ===== Responsive — Phase 8 audit complet ===== */
@media (max-width: 1024px) {
  .dash-row.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-row.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .container { padding: 1rem; }
  main { padding: 0.7rem 0.8rem; }
}

/* Nav header par défaut (desktop) */
.main-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* v5.15.0 — Puce identite collectionneur (avatar + pseudo + badges + niveau) en haut a
   droite du header, sur toute page de l app connectee. flex-basis:100% force la ligne
   suivante (nav + moon + langue) a passer sous cette puce, sans toucher a leur CSS. */
/* v5.26.8 — align-items/gap/flex-wrap ajoutes : la ligne accueille desormais aussi
   .rv-nav-utils (messagerie/nuit/langue, ex-dans le <nav>) en plus de la puce identite ;
   flex-wrap en filet de securite sur les tres petits ecrans (evite tout debordement). */
.rv-identity-chip-row { flex: 0 0 100%; display: flex; justify-content: flex-end; align-items: center; gap: 0.6rem; flex-wrap: wrap; row-gap: 0.4rem; }
.rv-identity-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 3px; border-radius: 999px;
  background: var(--bg2, rgba(127,127,127,0.12));
  border: 1px solid var(--border);
  text-decoration: none; color: var(--text); max-width: 100%;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.rv-identity-chip:hover { border-color: var(--accent, #ec4899); background: var(--bg3, rgba(127,127,127,0.18)); }
.rv-identity-chip .rv-identity-name { font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
@media (max-width: 640px) {
  .rv-identity-chip .rv-identity-name { display: none; }
}

/* === Menu groupes (dropdowns) === */
/* v4.56.0 — Logo d en-tete : carre RV + nom en degrade (comme la page de connexion) */
.rv-brand { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.rv-brand-logo {
  width: 80px; height: 80px; flex: none; display: block; object-fit: contain;
}
.rv-brand-name {
  font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 1.3rem; letter-spacing: -0.01em;
  background: var(--gradient-sunset, linear-gradient(135deg, #f97316 0%, #ec4899 50%, #8b5cf6 100%));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.nav-group {
  position: relative;
  margin: 0 0.15rem;
}
.nav-group-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.88rem;
  padding: 0.45rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.nav-group-btn:hover {
  background: var(--bg);
  border-color: var(--border);
}
.nav-group-active .nav-group-btn {
  color: var(--accent);
  background: var(--bg);
  border-color: var(--accent);
}
.nav-caret {
  font-size: 0.7rem;
  opacity: 0.7;
  transition: transform 0.2s;
}
.nav-group-open .nav-caret {
  transform: rotate(-180deg);
}
.nav-group-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  min-width: 240px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  padding: 0.4rem;
  z-index: 1000;
}
.nav-group-open .nav-group-menu {
  display: block;
}
.nav-group-item {
  display: block;
  padding: 0.5rem 0.7rem;
  color: var(--text) !important;
  text-decoration: none;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 0.85rem !important;
  margin: 0 !important;
  border-radius: 5px;
  white-space: nowrap;
}
.nav-group-item:hover {
  background: var(--bg3);
  color: var(--accent) !important;
}
.nav-group-item-active {
  background: var(--bg3);
  color: var(--accent) !important;
  font-weight: 700;
}
/* v5.21.22 — Separateur de sous-bloc dans un groupe de menu (ex: "STEAM"/"GOG" dans
   Demat'), gere depuis admin/menus.php (table menu_separators). Jamais cliquable. */
.nav-group-sep {
  padding: 0.5rem 0.7rem 0.2rem;
  margin-top: 0.2rem;
  border-top: 1px solid var(--border);
  color: var(--text3);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.68rem !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav-group-sep:first-child {
  margin-top: 0;
  border-top: none;
  padding-top: 0.5rem;
}
.nav-logout {
  color: var(--accent3) !important;
  text-decoration: none;
  margin: 0 0 0 0.7rem !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 0.88rem !important;
  padding: 0.45rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 6px;
}
.nav-logout:hover {
  background: rgba(255,77,109,0.1);
  border-color: var(--accent3);
}

/* v3.20.1 / v3.20.2 / v3.20.3 / v3.20.4 — Déconnexion en FAB top-right.
   v3.20.4 : intervertit avec le FAB Rechercher. Déconnexion est maintenant tout
   à droite (right: 1.25rem) et le FAB Rechercher (.cmdk-fab) est positionné
   à gauche de Déconnexion via right: calc(1.25rem + 140px) côté CSS inline
   du header.php. v3.20.3 : style par défaut = fond rouge léger + bordure
   rouge solide pour rester lisible sur fonds clair ET sombre. */
.nav-logout-fab {
  position: fixed !important;
  top: 1rem !important; /* v4.59.15 : pas d offset — la pille est DANS le header (transforme par California) donc deja relative au header, qui est lui-meme pousse par le bandeau */
  right: 1.25rem !important;
  z-index: 948;
  margin: 0 !important;
  background: rgba(255, 77, 109, 0.10);
  border: 1px solid var(--accent3) !important;
  box-shadow: 0 4px 14px rgba(255, 77, 109, 0.15);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.nav-logout-fab:hover {
  background: rgba(255, 77, 109, 0.22);
  border-color: var(--accent3) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(255, 77, 109, 0.25);
}
@media (max-width: 900px) {
  .nav-logout-fab {
    right: 0.8rem !important;
  }
}
/* v4.0.1 — Sur mobile (≤768px), la pill FAB top-right entrait en collision
   visuelle avec le bouton burger menu. On la cache complètement et on s'appuie
   sur le lien .nav-logout-mobile qui apparaît DANS le burger menu (voir plus bas). */
@media (max-width: 768px) {
  .nav-logout-fab {
    display: none !important;
  }
}

/* v4.0.1 — Lien Déconnexion intégré au burger menu : caché sur desktop
   (la pill .nav-logout-fab fait le job), visible uniquement sur mobile. */
.nav-logout-mobile {
  display: none;
  color: var(--accent3) !important;
  text-decoration: none;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 0.88rem !important;
  padding: 0.6rem 0.8rem !important;
  border: 1px solid var(--accent3);
  border-radius: 6px;
  margin: 0.6rem 0 0.3rem !important;
  background: rgba(255, 77, 109, 0.08);
  text-align: center;
  font-weight: 600;
}
.nav-logout-mobile:hover {
  background: rgba(255, 77, 109, 0.18);
}
@media (max-width: 768px) {
  .nav-logout-mobile {
    display: block;
  }
}

/* California : dropdowns avec glassmorphism */
/* v4.56.0 — Nav "pills claires" (variant A) : boutons neutres, degrade reserve a l onglet actif.
   On surcharge en !important car le theme California applique un degrade a tous les <button>. */
:root[data-theme="california"] .nav-group-btn {
  font-family: inherit !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  border-radius: 980px;
  padding: 0.5rem 1rem !important;
  background: #ffffff !important;
  color: #44403c !important;
  border: 1px solid #ece6e0 !important;
  box-shadow: none !important;
  transition: background .15s, border-color .15s, color .15s, transform .15s !important;
}
:root[data-theme="california"] .nav-group-btn:hover {
  background: #fff5f9 !important;
  border-color: #f3c6da !important;
  color: #9d174d !important;
  transform: translateY(-1px);
}
:root[data-theme="california"] .nav-group-open .nav-group-btn {
  background: #fff5f9 !important;
  border-color: #f3c6da !important;
  color: #9d174d !important;
}
:root[data-theme="california"] .nav-group-active .nav-group-btn {
  background: var(--gradient-sunset) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(236, 72, 153, 0.28) !important;
}
:root[data-theme="california"] .nav-group-menu {
  /* Fond solide blanc (pas glass) pour empêcher la lecture du contenu derrière */
  background: #ffffff !important;
  border-radius: 14px !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 24px 48px rgba(0,0,0,0.18), 0 8px 16px rgba(0,0,0,0.08) !important;
  z-index: 1000;
}
:root[data-theme="california"] .nav-group-item {
  font-family: inherit !important;
  border-radius: 8px;
}
:root[data-theme="california"] .nav-group-item-active {
  background: var(--gradient-sunset) !important;
  color: white !important;
}
:root[data-theme="california"] .nav-group-sep {
  color: #c0468e !important;
  border-top-color: #f3c6da !important;
}

@media (max-width: 768px) {
  /* Header devient hamburger */
  header > div {
    flex-wrap: wrap;
  }
  /* On masque la nav par défaut sur mobile, le clic hamburger ajoute .mobile-open */
  .main-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    background: var(--bg);
    padding: 0.5rem;
    border-radius: 6px;
    margin-top: 0.5rem;
    border: 1px solid var(--border);
  }
  .main-nav.mobile-open {
    display: flex;
    /* v5.20.27 — bug remonte (Guigui, iPhone) : menu deplie (ex: Systeme, ~14 items)
       depasse la hauteur d ecran et le header sticky empechait tout scroll pour voir
       la suite. Le menu devient son propre panneau scrollable, independant du scroll
       de page bloque par le sticky.
       v5.20.31 — CORRECTIF CRITIQUE : le .main-nav de base (desktop, hors media query)
       impose flex-wrap:wrap, jamais reinitialise ici. Combine a flex-direction:column +
       max-height, ca creait une DEUXIEME COLONNE hors ecran des que le contenu depassait
       la hauteur (au lieu de scroller) -> menu inutilisable, glisse hors champ a droite. */
    flex-wrap: nowrap;
    max-height: calc(100vh - 130px);
    max-height: calc(100dvh - 130px);
    overflow-y: auto;
    overflow-x: hidden; /* v5.20.30 — filet de securite anti-scroll horizontal, cf .nav-group-item plus bas */
    -webkit-overflow-scrolling: touch;
  }
  header nav a {
    margin: 0.3rem 0 !important;
    padding: 0.5rem 0.7rem;
    border-radius: 4px;
    text-align: left;
  }
  header nav a:hover, header nav a.nav-active {
    background: var(--bg3);
  }

  /* Dropdowns en mobile : groupes empilés, sous-items expandés inline */
  .nav-group {
    margin: 0;
    width: 100%;
  }
  .nav-group-btn {
    width: 100%;
    text-align: left;
    justify-content: space-between;
    padding: 0.6rem 0.8rem !important;
  }
  .nav-group-menu {
    position: static !important;
    display: none;   /* fermé par défaut sur mobile aussi */
    width: 100%;
    box-shadow: none !important;
    margin-top: 0.2rem !important;
    background: var(--bg) !important;
    padding-left: 0.8rem;
  }
  .nav-group-open .nav-group-menu {
    display: block;
  }
  /* v5.20.30 — bug remonte (Guigui, iPhone) : .nav-group-item herite du white-space:nowrap
     desktop (pense pour un dropdown flottant), qui force les libelles longs (ex: Gestion
     des menus + badge NEW) a depasser la largeur d ecran -> tout le menu mobile devenait
     scrollable horizontalement, coupant le debut des libellés. Sur mobile les items
     passent a la ligne normalement, plus besoin de scroll horizontal. */
  .nav-group-item {
    white-space: normal !important;
    width: 100%;
    box-sizing: border-box;
  }
  .nav-logout {
    display: block;
    margin: 0.4rem 0 !important;
    padding: 0.6rem 0.8rem !important;
  }
  .hamburger-btn {
    display: inline-flex !important;
    position: relative; /* v5.21.18 — ancre la pastille .hamburger-badge en coin */
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0.4rem 0.7rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
  }
  /* v5.21.18 — Pastille cumulee (notifs + signalements + demandes de compte + messages,
     meme total que le badge du groupe "Systeme" deplie) posee directement sur le bouton
     ferme, pour qu on la voie sans avoir a ouvrir le menu mobile. */
  .hamburger-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 16px;
    padding: 0 4px;
    border-radius: 99px;
    background: #ef4444;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    box-shadow: 0 0 0 2px var(--bg);
  }

  .dash-row.cols-3, .dash-row.cols-2, .dash-row.cols-4 {
    grid-template-columns: 1fr !important;
  }
  .jeux-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }
  .upcoming-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }

  .page-head { flex-direction: column; align-items: flex-start; }
  .page-head-actions { width: 100%; }

  /* Filtres en colonne sur mobile */
  .filters-grid { grid-template-columns: 1fr; }
  .f-col { width: 100%; }

  /* Tableaux : conteneur scrollable horizontal */
  .table-jeux, table {
    font-size: 0.78rem;
  }
  .panel:has(table) { overflow-x: auto; }

  /* Cartes consoles physiques sur 1 col mobile */
  .cp-grid { grid-template-columns: 1fr; }

  /* Modale plein écran */
  .modal-box { max-width: 100%; max-height: 95vh; padding: 1rem; }

  /* Discovery suggestions plus petites */
  .suggestion { font-size: 0.7rem; padding: 0.25rem 0.6rem; }

  /* Bandeau batch plus petit en mobile */
  #rv-batch-banner {
    bottom: 0.5rem !important;
    right: 0.5rem !important;
    left: 0.5rem !important;
    min-width: auto !important;
    max-width: none !important;
  }
}

/* Hamburger toujours caché en desktop */
.hamburger-btn { display: none; }

/* PRINT — Phase 11 */
@media print {
  body { background: white !important; color: black !important; }
  body::before, body::after { display: none !important; }
  header, footer, .no-print, #rv-batch-banner, .page-head-actions, button, .btn-link, form { display: none !important; }
  /* v4.52.2 — Boutons flottants (FABs) et popups jamais imprimes :
     Ajout rapide / RetroVault IA, Bug-idee, Recherche, Deconnexion, Tamagotchi, popup IA.
     Selecteurs prefixes par body (specificite > aux regles !important des <style> des FABs,
     charges apres style.css) + IDs (qui battent les classes) pour gagner a coup sur. */
  body .rv-qfab, #rvQfabAdd, #rvQfabAi,
  body .fb-fab, #fbModal,
  body .cmdk-fab, #cmdk-modal,
  body .nav-logout-fab, body .nav-logout-mobile,
  #rvTama, #rvTamaPopup,
  #rvAiModal { display: none !important; }
  main { max-width: 100%; padding: 0; }
  .container { padding: 0; max-width: 100%; }
  .panel, .stat-card { background: white !important; border: 1px solid #ddd !important; box-shadow: none !important; page-break-inside: avoid; }
  table { font-size: 10pt; page-break-inside: auto; }
  table tr { page-break-inside: avoid; page-break-after: auto; }
  thead { display: table-header-group; }
  .panel-title, .page-title, h1, h2, h3 { color: black !important; text-shadow: none !important; }
  .text2, .text-mut { color: #555 !important; }
  .text3, .text-dim { color: #888 !important; }
  a { color: black !important; text-decoration: none !important; }
}

/* =============== JEU_DETAIL — Phase 3 =============== */
.detail-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 700px) {
  .detail-grid { grid-template-columns: 1fr; }
}

.detail-cover {
  width: 100%;
  aspect-ratio: 3/4;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.detail-cover img { width: 100%; height: 100%; object-fit: cover; }
.cover-placeholder {
  color: var(--text3);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.8rem;
  text-align: center;
  padding: 1rem;
}

.detail-actions {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.btn-link {
  display: inline-block;
  width: 100%;
  padding: 0.5rem 0.8rem;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  text-decoration: none;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.8rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-link:hover { border-color: var(--accent); color: var(--accent); }
.btn-link:disabled, .btn-link[disabled] { opacity: 0.4; cursor: not-allowed; }
.btn-danger {
  padding: 0.5rem 0.8rem;
  background: transparent;
  border: 1px solid var(--accent3);
  border-radius: 4px;
  color: var(--accent3);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-danger:hover { background: var(--accent3); color: var(--bg); }

.detail-rating {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--accent2);
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
}

/* Badges */
.badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.2rem;
}
/* v3.12.5 : harmonisation visuelle de TOUS les badges meta (CIB / PAL / WISHLIST / DAY ONE /
   ACB G / ESRB E / Tu l'as aussi sur Steam / Modifier liaison Steam / etc.) →
   tous au format pill (border-radius 980px), même hauteur, même padding, même line-height,
   alignement vertical du texte centré. Avant : .bdg et .rating-badge étaient en inline-block
   sans line-height → baseline non aligné avec .bdg-edition (qui était déjà en inline-flex). */
.bdg {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  padding: 0.25rem 0.55rem;
  border-radius: 980px;
  letter-spacing: 0.02em;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  background: var(--bg3);
  color: var(--text2);
  border: 1px solid var(--border);
}
.bdg.cib      { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.bdg.sealed   { background: var(--accent2); color: var(--bg); border-color: var(--accent2); }
.bdg.wishlist { background: var(--accent3); color: var(--bg); border-color: var(--accent3); }
.bdg.neutral  { background: var(--purple); color: #fff; border-color: var(--purple); }

.rating-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  padding: 0.25rem 0.55rem;
  border-radius: 980px;
  letter-spacing: 0.02em;
  font-family: 'Share Tech Mono', monospace;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  background: rgba(123, 47, 255, 0.15);
  color: #b388ff;
  border: 1px solid rgba(123, 47, 255, 0.3);
}

/* Méta-bloc principal */
.meta-block { margin-bottom: 1.5rem; }
.meta-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 0.8rem;
  padding: 0.4rem 0;
  border-bottom: 1px dashed rgba(30, 30, 58, 0.5);
  font-size: 0.85rem;
  align-items: baseline;
}
.meta-row .k {
  color: var(--text3);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}
.meta-row .v { color: var(--text); }

.meta-section { margin-top: 1.5rem; }
.meta-section h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.95rem;
  color: var(--accent);
  margin-bottom: 0.7rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--border);
}

/* Conditions étoilées */
.conditions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.4rem;
}
.condition-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.8rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.8rem;
}
.cond-label {
  color: var(--text);
  font-family: 'Share Tech Mono', monospace;
}
.cond-stars {
  color: var(--accent2);
  letter-spacing: 0.1em;
  font-size: 0.85rem;
}

/* Refs (SKU, EAN, UPC...) */
.refs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.4rem;
}
.ref-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.4rem 0.6rem;
  font-size: 0.75rem;
}
.ref-type {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  padding: 1px 6px;
  border-radius: 2px;
  margin-right: 0.5rem;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.65rem;
}
.ref-val {
  color: var(--text);
  font-family: 'Share Tech Mono', monospace;
  word-break: break-all;
}

/* Tags */
.tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.tag-pill {
  display: inline-block;
  padding: 3px 10px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text2);
  font-size: 0.7rem;
  font-family: 'Share Tech Mono', monospace;
  text-decoration: none;
  transition: all 0.15s;
}
.tag-pill:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Jeux similaires */
.similar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.6rem;
}
.similar-card {
  display: block;
  padding: 0.7rem;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  text-decoration: none;
  color: var(--text);
  transition: all 0.15s;
}
.similar-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.similar-title {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.85rem;
  margin-bottom: 0.3rem;
  color: var(--text);
}
.similar-meta {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  font-size: 0.7rem;
}

/* Numérique aligné droite (utilisé dans les tableaux) */
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* =============== JEUX.PHP — Phase 4 =============== */
.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.7rem;
}
.page-head-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.view-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.vt-btn {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  background: var(--bg3);
  color: var(--text2);
  text-decoration: none;
  font-family: 'Share Tech Mono', monospace;
  font-size: 1rem;
  border-right: 1px solid var(--border);
}
.vt-btn:last-child { border-right: none; }
.vt-btn.active { background: var(--accent); color: var(--bg); }
.vt-btn:hover { color: var(--accent); }
.vt-btn.active:hover { color: var(--bg); }

.filters-panel {
  margin-bottom: 1rem;
}
.filters-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: stretch;
  margin-bottom: 0.7rem;
}
.f-col {
  flex: 1 1 140px;
  display: flex;
  flex-direction: column;
}
.f-col label {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: var(--text3);
  margin-bottom: 0.2rem;
  font-family: 'Orbitron', sans-serif;
}
.f-col input,
.f-col select {
  padding: 0.45rem 0.5rem;
  font-size: 0.85rem;
}

.sort-bar {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--border);
}
.sort-link {
  font-size: 0.7rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  color: var(--text2);
  font-family: 'Share Tech Mono', monospace;
  transition: all 0.15s;
}
.sort-link:hover { border-color: var(--accent); color: var(--accent); }
.sort-link.active { background: var(--accent); color: var(--bg); border-color: var(--accent); }

/* Vue grille — déjà existante, juste un fallback cover */
.jeu-card .cover-fallback,
.cover-fallback {
  width: 100%;
  aspect-ratio: 3/4;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text3);
  font-size: 0.7rem;
  border-radius: 4px;
  margin-bottom: 0.5rem;
  font-family: 'Share Tech Mono', monospace;
}

/* Vue tableau */
.table-jeux {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.table-jeux thead th {
  text-align: left;
  padding: 0.6rem 0.8rem;
  background: var(--bg);
  color: var(--text3);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
}
.table-jeux tbody td {
  padding: 0.5rem 0.8rem;
  border-bottom: 1px solid rgba(30, 30, 58, 0.4);
  vertical-align: middle;
}
.table-jeux tbody tr:hover {
  background: rgba(0, 245, 212, 0.05);
}
.row-thumb {
  width: 35px;
  height: 47px;
  object-fit: cover;
  border-radius: 3px;
  display: block;
  background: var(--bg);
}
.row-thumb.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text3);
  font-size: 0.7rem;
  border: 1px dashed var(--border);
}

/* Pagination */
.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.3rem;
  margin: 1.5rem 0;
}
.page-btn {
  display: inline-block;
  padding: 0.35rem 0.7rem;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  text-decoration: none;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.8rem;
  min-width: 35px;
  text-align: center;
}
.page-btn:hover { border-color: var(--accent); color: var(--accent); }
.page-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  font-weight: bold;
}
.page-btn.disabled {
  opacity: 0.4;
  pointer-events: none;
}
.page-gap {
  color: var(--text3);
  padding: 0 0.3rem;
}
.page-info {
  margin-left: 0.7rem;
  color: var(--text2);
  font-size: 0.8rem;
  font-family: 'Share Tech Mono', monospace;
}

@media (max-width: 700px) {
  .table-jeux { font-size: 0.75rem; }
  .table-jeux thead th, .table-jeux tbody td { padding: 0.4rem 0.5rem; }
  .table-jeux thead th:nth-child(7),
  .table-jeux tbody td:nth-child(7),
  .table-jeux thead th:nth-child(8),
  .table-jeux tbody td:nth-child(8) { display: none; } /* masque genre + franchise sur mobile */
}

/* =============== THÈME SWITCHER — Phase 7 =============== */
.theme-card {
  display: block;
  width: 220px;
  padding: 0.7rem;
  border: 2px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  background: var(--bg);
}
.theme-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.theme-card-active {
  border-color: var(--accent);
  box-shadow: 0 0 12px rgba(0, 245, 212, 0.25);
}
.theme-card-active::before {
  content: '✓';
  display: inline-block;
  width: 18px;
  height: 18px;
  background: var(--accent);
  color: var(--bg);
  border-radius: 50%;
  text-align: center;
  line-height: 18px;
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}
.theme-preview {
  height: 60px;
  border-radius: 4px;
  padding: 0.6rem;
  margin-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.theme-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.85rem;
  color: var(--text);
  margin-bottom: 0.2rem;
}
.theme-desc {
  font-size: 0.7rem;
  color: var(--text3);
}

/* =============== PRIX (PriceCharting) — UX-4 =============== */
.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 0.5rem;
}
.price-card {
  padding: 0.5rem 0.7rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
}
.price-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.2rem;
}
.price-value {
  font-family: 'Share Tech Mono', monospace;
  font-size: 1rem;
  color: var(--text);
}
.price-loose  .price-label { color: var(--text2); }
.price-cib    .price-label { color: var(--accent); }
.price-cib    .price-value { color: var(--accent); }
.price-sealed .price-label { color: var(--accent2); }
.price-sealed .price-value { color: var(--accent2); }

/* v3.14.2 — extension des codes couleurs pour les consoles physiques.
   v3.14.5 — ajout 2 prix natifs Item & Box (teal) et Item & Manual (sarcelle clair).
   Palette finale 7 prix : Loose gris · Item & Box teal · Item & Manual sarcelle ·
   CIB vert accent · Neuf bleu accent2 · Box only ambré · Manual only violet. */
.price-new          .price-label { color: var(--accent2); }
.price-new          .price-value { color: var(--accent2); }
.price-box-only     .price-label { color: #f59e0b; }
.price-box-only     .price-value { color: #f59e0b; }
.price-manual-only  .price-label { color: #a855f7; }
.price-manual-only  .price-value { color: #a855f7; }
.price-item-box     .price-label { color: #14b8a6; }
.price-item-box     .price-value { color: #14b8a6; }
.price-item-manual  .price-label { color: #06b6d4; }
.price-item-manual  .price-value { color: #06b6d4; }

/* v3.14.2 — highlight de la card prix qui correspond à la complétude saisie de l'item
   (bordure + glow doux + scale léger pour attirer l'œil). Utilisé sur la fiche console
   pour pointer le prix qui est "le bon" en fonction de l'état déclaré. */
.price-card.is-current {
  border-color: var(--accent);
  border-width: 1.5px;
  box-shadow: 0 0 0 1px var(--accent), 0 0 12px rgba(var(--accent-rgb, 16, 185, 129), 0.25);
  position: relative;
}
.price-card.is-current::before {
  /* v5.15.2 : texte traduit EN/ES/DE via attribut data-current-label pose cote PHP
     (content CSS ne peut pas appeler t(), donc on concatene le libelle litteral avec un attr()). */
  content: '◉ ' attr(data-current-label);
  position: absolute;
  top: -8px;
  right: 6px;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  background: var(--accent);
  color: var(--bg);
  padding: 1px 6px;
  border-radius: 980px;
  font-weight: 700;
  font-family: 'Orbitron', sans-serif;
}

/* =============== HARDWARE / CONSOLES PHYSIQUES — UX-2 =============== */
/* v3.14.0 : largeur min des cards passée de 240px à 290px pour laisser de la place
   à la cotation PriceCharting (loose / CIB / new) affichée sur la card. */
.cp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1rem;
}
.cp-card {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: all 0.15s;
}
.cp-card:hover {
  border-color: var(--accent);
}

/* v3.16.0-alpha4 : translate au hover déplacé sur le wrapper extérieur (cp-card-overlay-wrap)
   au lieu de la card seule. Sinon les overlays positionnés en absolute dans le wrapper
   (bouton ✎ Éditer, pill rareté) restaient figés pendant que la card se translatait,
   créant une désynchronisation visuelle. */
.cp-card-overlay-wrap {
  position: relative;
  transition: transform 0.15s;
}
.cp-card-overlay-wrap:hover {
  transform: translateY(-2px);
}
.cp-card-photo {
  width: 100%;
  height: 160px;
  background: var(--bg2);
  position: relative;
  overflow: hidden;
}
.cp-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cp-photo-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text3);
  font-size: 0.8rem;
}
.cp-photo-count {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0,0,0,0.6);
  color: var(--accent);
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 10px;
  font-family: 'Share Tech Mono', monospace;
}
.cp-card-body {
  padding: 0.7rem;
}
.cp-plateforme {
  font-size: 0.7rem;
  color: var(--text3);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-family: 'Orbitron', sans-serif;
  margin-bottom: 0.2rem;
}
.cp-modele {
  font-size: 0.95rem;
  color: var(--text);
  font-family: 'Share Tech Mono', monospace;
  margin-bottom: 0.4rem;
}
.cp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  font-size: 0.7rem;
  color: var(--text2);
  margin-bottom: 0.4rem;
}
.cp-meta span { white-space: nowrap; }
.cp-buy {
  font-size: 0.85rem;
  color: var(--accent);
  font-family: 'Share Tech Mono', monospace;
}

/* ============================================
   PLAT-4 : Actions hardware compactes (table plateformes admin)
   ============================================ */
.hw-action-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}
.hw-action-form {
  display: inline-flex;
  margin: 0;
  padding: 0;
}
/* Override agressif du button { ... } global cyber-théme pour rester compact */
.btn-mini,
button.btn-mini,
a.btn-mini {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  max-width: 100%;
  white-space: nowrap;
  font-size: 0.72rem !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif !important;
  font-weight: 500 !important;
  padding: 0.3rem 0.6rem !important;
  border-radius: 6px !important;
  border: 1px solid var(--border) !important;
  background: var(--bg2, var(--bg)) !important;
  color: var(--text) !important;
  cursor: pointer;
  text-decoration: none !important;
  transition: background 0.15s, border-color 0.15s, transform 0.05s, box-shadow 0.15s;
  line-height: 1.2 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.btn-mini:hover,
button.btn-mini:hover,
a.btn-mini:hover {
  background: var(--bg3, #f5f5f4) !important;
  border-color: var(--accent) !important;
  box-shadow: none !important;
}
.btn-mini:active { transform: scale(0.97); }
.btn-mini.btn-danger,
button.btn-mini.btn-danger {
  color: #fff !important;
  background: var(--accent3, #ef4444) !important;
  border-color: var(--accent3, #ef4444) !important;
}
.btn-mini.btn-danger:hover,
button.btn-mini.btn-danger:hover {
  filter: brightness(1.08);
  background: var(--accent3, #ef4444) !important;
}

/* ============================================
   PLAT-4 : Sous-collections (cards thématiques)
   ============================================ */
.sub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.8rem;
}
.sub-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--bg2, var(--bg));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.sub-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  border-color: var(--accent);
}
.sub-card-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.sub-icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.sub-card-info { flex: 1; min-width: 0; }
.sub-nom {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sub-count {
  font-size: 0.75rem;
  color: var(--text3);
  margin-top: 0.1rem;
}
.sub-desc {
  font-size: 0.8rem;
  color: var(--text2);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sub-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border);
}
/* Pas de flex:1 — laisser les boutons à leur taille naturelle pour éviter débordement */

/* Modal commune (subcollections + subcollection picker) */
.sub-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.sub-modal[hidden] { display: none; }
.sub-modal-bg {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
}
.sub-modal-box {
  position: relative;
  background: var(--bg2, #fff);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
.sub-modal-box h2 {
  margin-top: 0;
  font-size: 1.2rem;
}
.sub-modal-x {
  position: absolute; top: 0.6rem; right: 0.6rem;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0;
  border: none; background: transparent;
  font-size: 1.1rem; color: var(--text3);
  cursor: pointer; border-radius: 50%;
}
.sub-modal-x:hover { background: var(--bg3, var(--bg)); color: var(--text); }

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}
@media (max-width: 540px) {
  .form-row-2 { grid-template-columns: 1fr; }
}

.emoji-presets, .color-presets {
  display: flex; flex-wrap: wrap; gap: 0.25rem;
  margin-top: 0.4rem;
}
.emoji-btn {
  width: 32px; height: 32px;
  font-size: 1rem;
  background: var(--bg3, var(--bg));
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.emoji-btn:hover { border-color: var(--accent); }
/* v5.21.24 — Placeholder du mini-editeur WYSIWYG de la messagerie (contenteditable n a
   pas d attribut placeholder natif, on l emule via :empty + attr(data-placeholder)). */
#composeBody:empty:before {
  content: attr(data-placeholder);
  color: var(--text3);
  pointer-events: none;
}
#composeBody b, #composeBody strong { font-weight: 700; }
#composeBody i, #composeBody em { font-style: italic; }
.color-btn {
  width: 24px; height: 24px;
  border: 2px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
}
.color-btn:hover { border-color: var(--text); transform: scale(1.1); }

/* Picker fullscreen (page subcollection.php "Ajouter des jeux") */
.picker-list {
  border: 1px solid var(--border);
  border-radius: 8px;
  max-height: 50vh;
  min-height: 200px;
}
.picker-row {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.1s;
}
.picker-row:hover { background: var(--bg3, var(--bg)); }
.picker-row input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
.picker-titre { font-weight: 500; color: var(--text); }
.picker-meta { font-size: 0.78rem; color: var(--text3); white-space: nowrap; }
@media (max-width: 540px) {
  .picker-row { grid-template-columns: 26px 1fr; }
  .picker-meta { grid-column: 2; }
}

/* games-grid utilisée par subcollection.php */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.8rem;
}
.game-card {
  background: var(--bg2, var(--bg));
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  transition: transform 0.15s, box-shadow 0.15s;
}
.game-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.08); }
.game-card-link {
  display: block; color: inherit; text-decoration: none;
}
.game-card-cover {
  width: 100%; aspect-ratio: 3/4;
  background: var(--bg3, var(--bg));
  overflow: hidden;
}
.game-card-cover img {
  width: 100%; height: 100%; object-fit: cover;
}
.game-cover-empty {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem; color: var(--text3);
}
.game-card-body {
  padding: 0.6rem 0.7rem;
}
.game-titre {
  font-weight: 500;
  font-size: 0.85rem;
  margin-bottom: 0.3rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
}
.game-meta {
  display: flex; flex-wrap: wrap; gap: 0.3rem;
  font-size: 0.7rem;
}
.btn-detach {
  position: absolute;
  top: 0.4rem; right: 0.4rem;
  opacity: 0;
  transition: opacity 0.15s;
}
.game-card:hover .btn-detach { opacity: 1; }

/* ============================================
   PLAT-5 D : Mode sélection multi sur jeux.php
   ============================================ */
.multi-select-mode .jeu-card {
  cursor: pointer !important;
}
.multi-select-mode .jeu-card .ms-checkbox {
  position: absolute;
  top: 6px; left: 6px;
  z-index: 5;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 1.05rem;
  line-height: 1;
  user-select: none;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.multi-select-mode .ms-selected {
  outline: 3px solid var(--accent, #0ea5e9);
  outline-offset: -3px;
}
.multi-select-mode .table-jeux .ms-selected {
  background: rgba(14,165,233,0.08);
}
.multi-select-mode .ms-checkbox-cell {
  user-select: none;
}
.multi-select-mode .ms-checkbox-cell .ms-box {
  font-size: 1.1rem;
  line-height: 1;
}

/* Barre flottante en bas */
#multiSelectBar {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  background: var(--bg2, #fff);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15), 0 4px 12px rgba(0,0,0,0.08);
  padding: 0.7rem 1rem;
  max-width: calc(100% - 2rem);
}
#multiSelectBar[hidden] { display: none; }
.multi-select-content {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.multi-count {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  padding: 0 0.3rem;
}
.multi-select-input {
  min-width: 220px;
  max-width: 100%;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.85rem;
}
@media (max-width: 640px) {
  #multiSelectBar { left: 0.5rem; right: 0.5rem; transform: none; max-width: calc(100% - 1rem); }
  .multi-select-input { min-width: 0; flex: 1 1 100%; }
}

/* PLAT-5 A : pilules cochables pour ranger un jeu dans des sous-collec depuis le form d'ajout */
.sub-pick-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem 0.35rem 0.5rem;
  border: 1.5px solid var(--border);
  border-radius: 980px;
  cursor: pointer;
  font-size: 0.82rem;
  background: var(--bg);
  transition: background 0.15s, border-color 0.15s;
}
.sub-pick-pill:hover { background: var(--bg3, var(--bg2, var(--bg))); }
.sub-pick-pill input[type="checkbox"] { width: 14px; height: 14px; cursor: pointer; }
.sub-pick-pill > span:first-of-type {
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 6px;
  font-size: 0.95rem;
}
.sub-pick-pill:has(input:checked) {
  background: var(--bg2, var(--bg));
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* Badge BETA pour features en cours de stabilisation (scan, OCR) */
.beta-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 1px 6px;
  border-radius: 980px;
  background: linear-gradient(135deg, #f97316, #ec4899);
  color: white;
  margin-left: 0.35rem;
  vertical-align: middle;
  text-transform: uppercase;
}

/* Badge NEW (vert) : signale une fonctionnalite recente mais stable (vs BETA orange/rose) */
.new-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 1px 6px;
  border-radius: 980px;
  background: linear-gradient(135deg, #10b981, #06b6d4);
  color: white;
  margin-left: 0.35rem;
  vertical-align: middle;
  text-transform: uppercase;
}

/* ============================================
   PLAT-7 : cartes d'approbation de console (admin/console_approvals.php)
   ============================================ */
.approval-card {
  background: var(--bg2, var(--bg));
  border: 1px solid var(--border);
  border-left: 4px solid #a855f7;
  border-radius: 10px;
  padding: 1rem 1.2rem;
  margin-bottom: 0.8rem;
}
.approval-card-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  margin-bottom: 0.6rem;
}
.approval-nom {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.approval-meta {
  font-size: 0.8rem;
  color: var(--text2);
  line-height: 1.5;
}
.approval-meta code {
  background: var(--bg3, var(--bg));
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.85em;
}
.approval-suggestions {
  display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center;
  padding: 0.5rem 0.7rem;
  margin: 0.5rem 0 0.7rem;
  background: var(--bg3, rgba(168,85,247,0.04));
  border-radius: 8px;
}
.approval-actions {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  margin-top: 0.5rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--border);
}
.btn-approve {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white !important;
  border: none;
  padding: 0.45rem 0.9rem !important;
  border-radius: 8px !important;
  cursor: pointer;
  font-weight: 600 !important;
}
.btn-approve:hover { filter: brightness(1.1); }

/* PLAT-5 C : bouton 📁 hover sur jeu-card pour ranger sans ouvrir la fiche */
.card-sub-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 4;
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.95rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, transform 0.1s, background 0.15s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  user-select: none;
}
.jeu-card:hover .card-sub-btn,
.card-sub-btn:focus,
.card-sub-btn:focus-visible {
  opacity: 1;
}
.card-sub-btn:hover {
  transform: scale(1.08);
  background: #fff;
  border-color: var(--accent);
}
/* Sur mobile/touch, toujours visible car pas de hover */
@media (hover: none) {
  .card-sub-btn { opacity: 0.85; }
}
/* En mode sélection multi, on cache le bouton 📁 pour éviter le conflit visuel */
.multi-select-mode .card-sub-btn { display: none; }

/* ============================================
   PLAT-6 : harmonisation hauteur cards jeu (jeux.php)
   - Chaque section (cover, titre, méta, sous-collec) a une hauteur fixe
   - Tous les jeux s'alignent verticalement même si méta partielle
   ============================================ */
.jeux-grid .jeu-card {
  display: flex !important;
  flex-direction: column;
  height: 100%;
}
.jeux-grid .jeu-card > img,
.jeux-grid .jeu-card > .cover-fallback {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.jeu-card-title {
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 0.85rem !important;
  color: var(--text) !important;
  margin: 0.5rem 0 0.3rem !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
  line-height: 1.2;
}
.jeu-card-meta {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
  font-size: 0.65rem;
  color: var(--text2);
  min-height: 1.6rem;
  margin-bottom: 0.2rem;
}
.jeu-card-console {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.jeu-card-year { white-space: nowrap; }
.jeu-card-subs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  align-items: center;
  margin-top: auto; /* push vers le bas pour aligner tous les bandeaux subs */
  padding-top: 0.4rem;
  min-height: 1.7rem;
}
.jeu-card-subs:empty,
.jeu-card-subs > *:only-child:empty {
  /* Garde la hauteur même si vide */
}
.sub-badge-mini {
  font-size: 0.62rem !important;
  padding: 0.1rem 0.45rem !important;
  border: 1px solid var(--border);
}
.jeu-card-subs-more {
  font-size: 0.62rem;
  color: var(--text3);
  padding: 0.1rem 0.3rem;
  align-self: center;
}

/* Force California à respecter notre structure flex */
:root[data-theme="california"] .jeux-grid .jeu-card {
  padding: 0;
  overflow: hidden;
}
:root[data-theme="california"] .jeu-card-title,
:root[data-theme="california"] .jeu-card-meta,
:root[data-theme="california"] .jeu-card-subs {
  padding-left: 0.6rem;
  padding-right: 0.6rem;
}
:root[data-theme="california"] .jeux-grid .jeu-card > img,
:root[data-theme="california"] .jeux-grid .jeu-card > .cover-fallback {
  border-radius: 0;
}
:root[data-theme="california"] .jeu-card-subs {
  padding-bottom: 0.6rem;
}

/* PLAT-5 B : badges sous-collections (fiche jeu + cards futures) */
.sub-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.55rem;
  border-radius: 980px;
  font-size: 0.72rem;
  font-weight: 500;
  text-decoration: none !important;
  white-space: nowrap;
  line-height: 1.3;
  transition: transform 0.1s, filter 0.1s;
}
.sub-badge:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

/* Form ajout/édition console physique */
.cp-form .form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
}
@media (max-width: 700px) { .cp-form .form-grid { grid-template-columns: 1fr; } }
/* v7.1.5 — hotfix v7.1.4 (ticket Guigui, mode smartphone, contenu qui se chevauche) :
   plusieurs .form-row ont un style inline grid-column:span 2 (Lieu d achat, Notes,
   Quick facts, URL de cote). Sur mobile, .form-grid n a plus qu 1 piste EXPLICITE
   (1fr ci-dessus), mais span 2 exige 2 pistes : la grille cree alors une piste
   IMPLICITE supplementaire (dimensionnee sur le contenu, via grid-auto-columns:auto
   par defaut) pour satisfaire ce span. Resultat : la grille reste a 2 colonnes
   (une 1fr + une auto) et TOUS les form-row (pas seulement ceux en span 2) se
   recasent en 2 colonnes inegales par l auto-placement — c est ce qui causait
   deja le debordement corrige en v7.1.4, et que le width:100% (juste en dessous)
   a rendu visible sous forme de chevauchement de labels au lieu d un debordement
   silencieux. Fix : sur mobile, on neutralise TOUT span pour ne garder qu 1
   colonne reelle (!important necessaire pour l emporter sur le style inline). */
@media (max-width: 700px) { .cp-form .form-row { grid-column: 1 / -1 !important; } }
/* v7.1.4 — hotfix mobile (ticket Christian Roche, /console_physique_form.php) :
   .form-row est un item de grille CSS, donc sa largeur minimale automatique
   (min-width: auto) reprend la largeur de CONTENU de ses enfants — un <select>
   sans width explicite se dimensionne sur son option la plus longue (nom de
   plateforme). Resultat sur certains Android : le champ deborde le viewport,
   invisible jusqu'a taper dedans (le navigateur scroll alors horizontalement
   pour le reveler). Meme classe de bug deja corrigee sur add_quick.php via
   .aq-grid-2col (v4.0.11) mais jamais propagee ici. min-width:0 autorise la
   piste de grille a retrecir, width/max-width:100% cadrent le champ dedans. */
.cp-form .form-row { min-width: 0; }
.cp-form .form-row input,
.cp-form .form-row select,
.cp-form .form-row textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.cp-form .form-row label {
  display: block;
  font-size: 0.7rem;
  color: var(--text3);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
  font-family: 'Orbitron', sans-serif;
}

/* Galerie photos */
.cp-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}
.cp-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.cp-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cp-photo-del {
  position: absolute;
  top: 3px;
  right: 3px;
  background: rgba(0,0,0,0.7);
  border: 1px solid var(--accent3);
  color: var(--accent3);
  font-size: 0.7rem;
  padding: 0 5px;
  border-radius: 3px;
  cursor: pointer;
}
.cp-photo-del:hover { background: var(--accent3); color: var(--bg); }
.cp-photo-upload {
  border: 2px dashed var(--border);
  border-radius: 6px;
  padding: 1.2rem;
  text-align: center;
  color: var(--text2);
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.15s;
}
.cp-photo-upload:hover { border-color: var(--accent); color: var(--accent); }

/* =============== DASHBOARD — UX-3 =============== */
.panel-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 1rem;
  color: var(--accent);
  margin: 0 0 0.8rem;
}
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.8rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.panel-head .panel-title { margin: 0; }

/* Bar lists (top consoles/genres/franchises) */
.bar-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.bar-row {
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.3rem 0.4rem;
  border-radius: 4px;
  text-decoration: none;
  color: var(--text);
  transition: background 0.15s;
}
.bar-row:hover { background: rgba(0, 245, 212, 0.06); }
.bar-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.78rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar-track {
  display: block;
  height: 6px;
  background: var(--bg);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.bar-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.3s;
}
/* v5.47.0 — marqueur generique pour assets/js/rv_stat_animate.js : barre qui grandit de 0
   a sa largeur finale au premier passage a l ecran. Duree/easing unifies sur toutes les
   pages (prime sur un eventuel transition plus courte deja definie sur la classe locale). */
.rv-anim-bar {
  transition: width 0.7s cubic-bezier(0.22, 0.8, 0.32, 1);
}
/* v5.47.2 — force l etat "zero" AVANT meme la premiere peinture (evite le flash de la
   vraie valeur puis retour a 0 signale par Guillaume sur sante.php). La classe
   rv-anim-ready est posee sur <html> de facon synchrone par rv_stat_animate.js (script
   bloquant dans <head>, s execute avant que le <body> ne soit parse) : ces regles
   s appliquent donc des l apparition de chaque element, jamais apres. rv_stat_animate.js
   leve le forcage en ajoutant .rv-anim-in au moment ou l element entre dans le viewport ;
   la largeur/opacite reelle (deja en inline style ou en texte) prend le relais et anime
   via la transition ci-dessus. Sans JS (ou navigateur sans IntersectionObserver), la
   classe rv-anim-ready n est jamais posee : ces regles ne s appliquent pas, tout reste
   affiche normalement (safe-by-default). */
html.rv-anim-ready .rv-anim-bar:not(.rv-anim-in) {
  width: 0% !important;
}
html.rv-anim-ready .rv-anim-counter {
  opacity: 0;
  transition: opacity 0.2s ease;
}
html.rv-anim-ready .rv-anim-counter.rv-anim-in {
  opacity: 1;
}
.bar-val {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.75rem;
  color: var(--text2);
  font-variant-numeric: tabular-nums;
  min-width: 32px;
  text-align: right;
}

/* À (re)découvrir */
.discover-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.7rem;
}

/* === Widget anniversaires de sortie === */
.anniv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.7rem;
}
.anniv-card {
  display: flex;
  text-decoration: none;
  color: inherit;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  min-width: 0;
}
.anniv-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.anniv-cover {
  position: relative;
  flex: 0 0 70px;
  background: var(--bg3);
}
.anniv-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.anniv-age {
  position: absolute;
  top: 4px;
  left: 4px;
  background: var(--accent);
  color: var(--bg);
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  white-space: nowrap;
}
.anniv-meta {
  flex: 1;
  padding: 0.5rem 0.7rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.anniv-title {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.anniv-sub {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.72rem;
  color: var(--text2);
  margin-top: 2px;
}
.anniv-tags {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.65rem;
  color: var(--text3);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* California : anniv-card avec gradient signature sur l'âge + design plus premium */
:root[data-theme="california"] .anniv-card {
  border-radius: 14px !important;
  border: 1px solid var(--border) !important;
  background: var(--bg2) !important;
}
:root[data-theme="california"] .anniv-card:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08) !important;
}
:root[data-theme="california"] .anniv-age {
  background: var(--gradient-sunset) !important;
  color: white !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  border-radius: 980px !important;
  padding: 3px 9px !important;
  box-shadow: 0 2px 6px rgba(249,115,22,0.3);
}
:root[data-theme="california"] .anniv-title {
  font-family: inherit !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em;
}
:root[data-theme="california"] .anniv-sub,
:root[data-theme="california"] .anniv-tags {
  font-family: inherit !important;
}
.discover-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.15s;
}
.discover-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.discover-cover {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--bg2);
  overflow: hidden;
}
.discover-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.discover-meta { padding: 0.4rem 0.5rem 0.5rem; }
.discover-title {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.75rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.2rem;
}
.discover-sub {
  font-size: 0.65rem;
  color: var(--text3);
}

/* Prochaines sorties */
.upcoming-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.7rem;
  /* hauteur uniforme des cards par ligne */
  grid-auto-rows: 1fr;
}
.upcoming-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 0.15s;
  /* layout vertical : cover en haut, meta qui s'étire, bouton en bas */
  display: flex;
  flex-direction: column;
  height: 100%;
}
.upcoming-card:hover { border-color: var(--accent2); }
.upcoming-cover {
  width: 100%;
  height: 90px;
  background: var(--bg2);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.upcoming-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.upcoming-cover .placeholder {
  color: var(--text3);
  font-size: 0.7rem;
}
.upcoming-meta {
  padding: 0.4rem 0.5rem 0.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.upcoming-title {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.78rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.upcoming-date {
  font-size: 0.7rem;
  color: var(--accent2);
  margin: 0.2rem 0 0.3rem;
}
.upcoming-plats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  margin-bottom: 0.4rem;
}
.upcoming-wish-btn {
  width: 100%;
  padding: 0.4rem 0.5rem;
  background: var(--bg3);
  border: 1px solid var(--accent3);
  color: var(--accent3);
  border-radius: 4px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 0.15s;
  /* TOUJOURS en bas de la card, peu importe la longueur du titre/des plateformes */
  margin-top: auto;
}
.upcoming-wish-btn:hover { background: var(--accent3); color: #fff; }
.upcoming-wish-btn:disabled { cursor: default; opacity: 1; }
.up-plat {
  font-size: 0.6rem;
  padding: 1px 5px;
  background: var(--bg3);
  border-radius: 3px;
  color: var(--text2);
  white-space: nowrap;
}
/* v5.27.1 — gros titres (hype IGDB > 0) mis en avant : bordure accent + etoile sur la jaquette */
.upcoming-card-notable {
  border-color: var(--accent2);
  box-shadow: 0 0 0 1px var(--accent2);
}
.up-notable {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 0.75rem;
  color: #ffd54a;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
}
.upcoming-cover {
  position: relative;
}

/* =============== CARROUSEL — UX-1 (jaquettes compactes) =============== */
#carrousel-derniers-jeux {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  display: block;
}
#carrousel-derniers-jeux .splide__track {
  overflow: hidden;
  width: 100%;
}
.carousel-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  padding: 0.4rem;
  border: 1px solid transparent;
  border-radius: 6px;
  transition: all 0.15s;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}
.carousel-card:hover {
  border-color: var(--accent);
  background: rgba(0, 245, 212, 0.05);
}
.carousel-cover {
  width: 130px;        /* taille FIXE petite et carrée-portrait */
  height: 170px;
  background: var(--bg);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.4rem;
  box-shadow: var(--glow);
}
.carousel-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.carousel-meta {
  text-align: center;
  width: 130px;
  /* UI-3 : hauteur uniforme pour aligner les badges région
     quel que soit le nombre de lignes du titre (1 ou 2 lignes max) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 3.2rem;
}
.carousel-title {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.72rem;
  line-height: 1.15;
  color: var(--text);
  margin: 0 0 0.35rem;
  /* UI-3 : titre clamped à 2 lignes max — single-line OU double-line
     prennent toujours la même hauteur (2 × line-height) → badges alignés */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  min-height: calc(2 * 0.72rem * 1.15);  /* réserve la place de 2 lignes */
  width: 100%;
}

/* =============== BANDEAU CONSOLES — UX-1 =============== */
.consoles-bar {
  margin-bottom: 1rem;
}
.consoles-bar-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--text3);
  margin-bottom: 0.6rem;
}
/* v6.10.3 — jeux.php mode app : les blocs plateforme/sous-collec/filtres passent
   en <details>/<summary> (repli par defaut en mode app uniquement, cf $rvAppNavOn
   cote PHP). .consoles-bar-label sert desormais aussi de <summary> quand c'est le
   cas — on lui ajoute juste le curseur + on masque le triangle natif du navigateur
   au profit du chevron maison (.rv-collapsible-caret, memes conventions que
   .nav-caret dans le menu desktop) pour rester visuellement identique quand le
   bloc est deja ouvert (desktop/mobile classique, comportement inchange). */
summary.consoles-bar-label,
.rv-filters-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
summary.consoles-bar-label::-webkit-details-marker,
.rv-filters-summary::-webkit-details-marker {
  display: none;
}
.rv-filters-summary {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text);
  padding: 0.7rem 0.9rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 0.6rem;
}
details.rv-collapsible[open] > summary .rv-collapsible-caret,
.rv-collapsible-caret {
  transition: transform 0.15s;
}
details.rv-collapsible[open] > summary .rv-collapsible-caret {
  transform: rotate(180deg);
}
/* Le <form class="filters-panel"> garde son style .panel habituel ; seul le
   <summary> ci-dessus porte la bordure/fond pour servir de "poignee" cliquable
   quand le bloc est referme. */
details.rv-collapsible > .filters-panel {
  margin-top: 0;
}
.consoles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.5rem;
}
.console-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 0.4rem;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  transition: all 0.15s;
  cursor: pointer;
  min-height: 90px;
  position: relative;
}
.console-tile:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 0 12px rgba(0, 245, 212, 0.15);
}
.console-tile.active {
  border-color: var(--accent);
  background: rgba(0, 245, 212, 0.08);
  box-shadow: 0 0 12px rgba(0, 245, 212, 0.2);
}
.console-tile .logo-wrap {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border-radius: 4px;
  padding: 4px;
  margin-bottom: 0.5rem;
  box-sizing: border-box;
}
.console-tile .logo-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,0.85))
    drop-shadow(0 0 4px rgba(255,255,255,0.5))
    drop-shadow(0 1px 0 rgba(0,0,0,0.6));
}
.console-tile .tile-badge {
  display: inline-block;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  margin-bottom: 0.4rem;
  letter-spacing: 0.05em;
}
.console-tile .tile-name {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.7rem;
  color: var(--text2);
  text-align: center;
  line-height: 1.2;
}
.console-tile .tile-count {
  position: absolute;
  top: 4px;
  right: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1px 6px;
  font-size: 0.6rem;
  color: var(--text2);
  font-family: 'Share Tech Mono', monospace;
}
.console-tile.active .tile-count {
  border-color: var(--accent);
  color: var(--accent);
}
.console-tile.tile-all .tile-badge {
  background: var(--bg);
  color: var(--accent);
  border: 1px dashed var(--accent);
}

/* =============== DISCOVERY — Phase 5 =============== */
.suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.7rem;
}
.suggestion {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: 14px;
  color: var(--text2);
  font-size: 0.75rem;
  font-family: 'Share Tech Mono', monospace;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}
.suggestion:hover {
  border-style: solid;
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(0, 245, 212, 0.05);
}

/* =============== MODAL — Phase 6++ =============== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 920px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.7);
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--border);
}
.modal-header h2 {
  font-family: 'Orbitron', sans-serif;
  color: var(--accent);
  font-size: 1.1rem;
  margin: 0;
}
.modal-close {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text2);
  border-radius: 4px;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  font-family: 'Share Tech Mono', monospace;
}
.modal-close:hover { color: var(--accent3); border-color: var(--accent3); }

.modal-status {
  text-align: center;
  padding: 2rem;
  color: var(--text2);
  font-family: 'Share Tech Mono', monospace;
}

.cover-candidates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.cover-candidate {
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cover-candidate:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 0 20px rgba(0, 245, 212, 0.2);
}
.cover-candidate.selected {
  border-color: var(--accent);
  background: rgba(0, 245, 212, 0.05);
}
.cover-candidate img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: contain;
  background: var(--bg2);
  border-radius: 4px;
  margin-bottom: 0.5rem;
}
.cover-candidate .src-badge {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  padding: 2px 8px;
  border-radius: 3px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.3rem;
}
.cover-candidate .src-badge.rawg  { background: var(--accent2); }
.cover-candidate .src-badge.igdb  { background: var(--purple); color: #fff; }
.cover-candidate .src-method {
  font-size: 0.7rem;
  color: var(--text3);
  font-family: 'Share Tech Mono', monospace;
  text-align: center;
}
.cover-candidate .img-error {
  width: 100%;
  aspect-ratio: 3/4;
  background: var(--bg2);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text3);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.7rem;
  margin-bottom: 0.5rem;
}

/* =============== Widget « 8 dernières rentrées » — Feature 6 (v3.3) =============== */
.recent-acq-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
}
.recent-acq-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--text2);
  cursor: pointer;
  user-select: none;
}
.recent-acq-toggle input { cursor: pointer; margin: 0; }
.recent-acq-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.7rem;
}
@media (max-width: 1100px) { .recent-acq-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px)  { .recent-acq-grid { grid-template-columns: repeat(2, 1fr); } }
.recent-acq-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.recent-acq-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  border-color: var(--accent);
}
.recent-acq-cover {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
  background: var(--bg3);
}
.recent-acq-cover-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--text3);
}
.recent-acq-new-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: #10b981;
  color: white;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.4);
}
.recent-acq-meta {
  padding: 0.5rem 0.55rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-height: 3.4em;
}
.recent-acq-title {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 2.4em;
}
.recent-acq-sub {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  color: var(--text3);
  margin-top: auto;
}
.recent-acq-console {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.recent-acq-date {
  white-space: nowrap;
  color: var(--text2);
  font-weight: 500;
}
.recent-acq-empty {
  text-align: center;
  color: var(--text3);
  font-size: 0.85rem;
  padding: 1.5rem;
  font-style: italic;
}

/* =============== Badge édition normalisée — Feature 4 (v3.3) =============== */
/* Inline avec les badges CIB/SEALED/WISHLIST sur la fiche détail.
   Cliquable → filtre jeux.php?edition_normalized=X. La couleur de fond est
   injectée inline depuis edition_helpers.php (getEditionColor). */
.bdg-edition {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.55rem;
  border-radius: 980px;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.bdg-edition:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

/* ============================================================
   v3.11.1 — ACHIEVEMENTS BADGES ANIMÉS
   Chaque badge = 1 emoji unique (cf. includes/achievements_catalog.php)
   + 1 contour coloré selon le tier
   + 1 animation CSS selon la catégorie (14 anims thématiques)
   Utilisé sur : index.php (accueil 5 badges) + achievements.php (50 cards)
   ============================================================ */

/* Container du badge — pill circulaire avec contour coloré par tier */
.ach-badge {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  line-height: 1;
  border-radius: 50%;
  flex-shrink: 0;
  border-width: 2px;
  border-style: solid;
  background-clip: padding-box;
  cursor: default;
  user-select: none;
  /* GPU hint pour les anims */
  will-change: transform, filter, opacity;
}

/* Variantes de tier (contour + dégradé de fond) */
.ach-tier-bronze    { background: linear-gradient(135deg, #FAEEDA, #BA7517); border-color: #BA7517; }
.ach-tier-silver    { background: linear-gradient(135deg, #F1EFE8, #888780); border-color: #888780; }
.ach-tier-gold      { background: linear-gradient(135deg, #FAEEDA, #FFD700); border-color: #FFD700; }
.ach-tier-platinum  { background: linear-gradient(135deg, #E1F5EE, #5DCAA5); border-color: #5DCAA5; }
.ach-tier-legendary { background: linear-gradient(135deg, #EEEDFE, #7F77DD); border-color: #7F77DD; }

/* Variante "locked" pour la page achievements (gris/dépoli, pas d'anim) */
.ach-badge.is-locked {
  filter: grayscale(0.9) brightness(0.85);
  opacity: 0.55;
  animation: none !important;
}

/* Pause au hover (laisse le temps de lire le contenu) */
.ach-badge:hover { animation-play-state: paused; }

/* v3.11.1 (révision) : la règle prefers-reduced-motion = reduce a été retirée car
   Windows 11 l'active souvent par défaut, ce qui désactivait les anims sans que
   l'utilisateur le sache. Les achievements étant un élément festif/visuel, on
   préfère qu'ils animent toujours. Si tu es sensible aux animations et veux
   les désactiver, ajoute manuellement à ton browser :
     .ach-badge { animation: none !important; } */

/* ========================================================================
   v4.0.6 — Densification accueil mobile (iPhone X ~375px et tout ≤480px)
   ========================================================================
   3 fixes ciblés pour gagner ~50px utiles sur l'accueil mobile :
   1) Container padding : 1.25rem → 0.75rem (gagne ~16px de chaque côté)
   2) Welcome banner padding compact + gap réduit
   3) Achievements badges accueil : 38×38 → 32×32 (passe de 6 à 7 par ligne)

   Note : le tamagotchi adaptatif est dans includes/tamagotchi.php
   (50×50 + position 0.7rem au lieu de 70×70 + 1.2rem).
   ======================================================================== */
@media (max-width: 480px) {
  /* 1) Container : padding latéral réduit pour gagner de la place */
  .container {
    padding: 1rem 0.75rem !important;
  }
  main {
    padding: 0.75rem 0.75rem !important;
  }

  /* 2) Welcome banner : padding réduit + emoji wave plus petit + gap serré.
     Cible le wrapper inline-style avec class .welcome-banner injecté par
     index.php (cf. <div class="welcome-banner" style="…">). Les styles
     inline ont la priorité, donc on doit override avec !important. */
  .welcome-banner {
    padding: 0.7rem 0.9rem !important;
    gap: 0.55rem !important;
    border-radius: 12px !important;
  }
  /* Emoji 👋 wave : 2rem → 1.5rem */
  .welcome-banner > span:first-child {
    font-size: 1.5rem !important;
  }

  /* 3) Badges achievements DANS le bandeau Bienvenue uniquement
     (les badges sur achievements.php restent en 56×56 pleine taille).
     Inline style était 38×38 + font 20px → on passe à 32×32 + font 17px. */
  .welcome-banner .ach-badge {
    width: 32px !important;
    height: 32px !important;
    font-size: 17px !important;
  }

  /* v4.0.7 — Fix 4 : Prochaines sorties en 2 colonnes mobile.
     La règle de base ligne ~3321 fait `repeat(auto-fill, minmax(160px, 1fr))`
     et apparaît APRÈS la règle mobile ligne ~1692 → desktop gagnait dans la
     cascade. On force ici 2 cols exactes avec !important + gap réduit +
     cover plus courte pour densifier davantage. */
  .upcoming-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }
  .upcoming-cover {
    height: 80px !important;
  }

  /* v4.0.7 — Fix 5 : Widget Mouvements de prix qui débordait à droite du
     viewport sur iPhone X. Cause : la flex card avait des enfants sans
     min-width:0 explicite donc le contenu (titres longs, prix, badges drapeau)
     poussait la card au-delà du viewport. Fixe défensif en 3 couches :
     a) overflow-x:hidden sur le panel pour bloquer tout débordement résiduel ;
     b) min-width:0 sur card + meta pour permettre le shrink propre ;
     c) padding compact des cards pour gagner ~10px.
     v4.0.8 : v4.0.7 ne suffisait pas, les deltas absolus (+4,74€) étaient
     coupés silencieusement à droite. Gain supplémentaire ~25px : panel
     padding 1rem→0.5rem, cover 40→36px, card padding/gap encore plus serrés. */
  .panel {
    overflow-x: hidden;
    padding: 0.6rem 0.5rem !important;  /* v4.0.8 : 1rem → 0.5rem latéral (gain 16px) */
  }
  .price-mv-card {
    min-width: 0;
    padding: 0.4rem 0.45rem !important;   /* v4.0.8 : encore plus serré (gain 4px) */
    gap: 0.4rem !important;                /* v4.0.8 : 0.5rem → 0.4rem */
  }
  .price-mv-card-wrap,
  .price-mv-meta {
    min-width: 0;
  }
  .price-mv-meta {
    flex: 1 1 0 !important;
  }
  .price-mv-cover {
    width: 36px !important;  /* v4.0.8 : 40px → 36px (gain 4px) */
    height: 50px !important; /* ratio 1:1.4 conservé */
  }
  .price-mv-delta {
    font-size: 0.85rem !important;
    flex-shrink: 0;
    min-width: 0;
  }
  .price-mv-delta-abs {
    /* v4.0.8 : le « +4,74€ » se faisait couper silencieusement. On le
       truncate proprement OU on accepte qu'il revient à la ligne (br dans
       le HTML), et on s'assure que l'élément peut shrink. */
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .price-mv-prices,
  .price-mv-sub {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* v4.0.8 : la pill « Top hausses » / « Top baisses » avait un padding
     desktop trop large qui faisait bouger l'alignement. On l'allège. */
  .price-mv-col-head {
    padding: 0.35rem 0.5rem !important;
    font-size: 0.88rem !important;
  }

  /* v4.0.9 — Fix 6 : page add_quick.php (ajout rapide) qui rognait à droite
     sur iPhone X. Les 4 grids 1fr 1fr (panes Manuel/Scan/OCR + form Résultat)
     ne se repliaient pas en 1 col → boutons « Démarrer caméra », « Choisir
     recto », sélecteurs Plateforme, dropdown Région, et pills sous-collections
     débordaient hors viewport. Conséquence indirecte : le scan code-barres
     restait KO car le bouton « Démarrer caméra » avait sa zone de tap hors
     écran. Fix : ajout d'une classe .aq-grid-2col sur les 4 grids (dans
     add_quick.php) qui passe en 1 col + boutons full width + pills propres. */
  .aq-grid-2col {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
  }
  /* Les boutons à l'intérieur des panes passent en pleine largeur pour
     ne plus dépasser et garantir leur zone de tap. */
  #pane-manual button,
  #pane-scan button,
  #pane-ocr button,
  #addForm button[type="submit"],
  #coverFrontPickBtn,
  #coverBackPickBtn {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Les boutons groupés (ex: Démarrer / Stop caméra) doivent quand même
     pouvoir tenir côte à côte si on les met dans un flex parent. */
  #pane-scan div[style*="display: flex"] button {
    flex: 1 1 0 !important;
  }
  /* Onglets aq-tab : déjà flex-wrap mais on s'assure que chaque tab tient
     proprement sur sa ligne (ou wrap si nécessaire). */
  .aq-tab {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 0.85rem !important;
    padding: 0.5rem 0.6rem !important;
  }
  .aq-tab .beta-badge,
  .aq-tab .new-badge {
    font-size: 0.6rem !important;
    padding: 1px 4px !important;
    margin-left: 3px !important;
  }
  /* Pills sous-collections (checkboxes avec labels) : wrap propre + texte
     truncate plutôt que débordement. */
  #subcollWrap label {
    max-width: 100% !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Tous les inputs/selects du form Résultat passent en full width pour
     éviter qu'un placeholder long (« 0711719831426 ou SLES-12345 ») force
     une min-width supérieure au viewport.
     v4.0.11 : EXCLURE les checkbox et radio sinon ils prennent toute la largeur
     du label et poussent l'icône+texte loin à droite (énorme vide visible). */
  .aq-grid-2col input:not([type="checkbox"]):not([type="radio"]),
  .aq-grid-2col select,
  .aq-grid-2col textarea {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }
  /* v4.0.11 : les checkboxes des labels « Contenu de mon exemplaire »
     étaient en flex-wrap libre, ce qui laissait par ex. « Cartouche »
     tout seul sur sa ligne avec un grand vide à droite. On passe en
     grid 2 colonnes fixe pour une grille propre et symétrique.
     Cible la classe .aq-contenu-grid posée sur le wrapper dans add_quick.php. */
  .aq-contenu-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem 0.8rem !important;
    flex-wrap: initial !important;
  }

  /* v6.10.2 — Fix 7 : bloc "Profil public" de profile.php (checkboxes + slug)
     en grid 1fr 1fr fixe (inline style, jamais responsive) => en mode app sur
     iPhone, la colonne slug ("Adresse personnalisée" + input + texte d'aide)
     etait poussee hors viewport et rognee silencieusement (meme classe de bug
     que le Fix 6 ci-dessus : grid-template-columns fixe sans min-width:0 ni
     collapse mobile). Repere via classe .rv-profpub-grid posee sur le wrapper
     dans profile.php. Signale par Guillaume (ticket "Texte rogné sur
     smartphone mode app", /profile.php, v6.10.1). */
  .rv-profpub-grid {
    grid-template-columns: 1fr !important;
  }
  .rv-profpub-grid input[type="text"] {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }
}


/* === 14 KEYFRAMES par catégorie ===
   Volume / Complétude / Valeur / Pièces / Diversité / Régions / Comportement
   Franchises / Époques / Éditions / Engagement / Wishlist / Matériel / Découverte */

@keyframes ach-pulse        { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.10); } }
@keyframes ach-tick         { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-8deg); } 90% { transform: rotate(8deg); } 95% { transform: rotate(-4deg); } }
@keyframes ach-glow         { 0%, 100% { filter: drop-shadow(0 0 0 rgba(251, 191, 36, 0)); } 50% { filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.9)); } }
@keyframes ach-sparkle      { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.12); } }
@keyframes ach-fan          { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes ach-wave         { 0%, 100% { transform: translateY(0) skewX(0); } 25% { transform: translateY(-2px) skewX(-3deg); } 75% { transform: translateY(2px) skewX(3deg); } }
@keyframes ach-typing       { 0%, 100% { transform: translateX(0) rotate(0); } 50% { transform: translateX(-2px) rotate(-3deg); } }
@keyframes ach-bloom        { 0%, 100% { transform: scale(0.92); } 50% { transform: scale(1.12); } }
@keyframes ach-orbit        { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes ach-shimmer      { 0%, 100% { filter: brightness(1) saturate(1); } 50% { filter: brightness(1.25) saturate(1.5); } }
@keyframes ach-heartbeat    { 0%, 28%, 100% { transform: scale(1); } 14% { transform: scale(1.15); } 42% { transform: scale(1.06); } }
@keyframes ach-starpop      { 0%, 80%, 100% { transform: scale(1) rotate(0); } 85% { transform: scale(1.22) rotate(-15deg); } 92% { transform: scale(1.08) rotate(8deg); } }
@keyframes ach-tilt         { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes ach-radar        { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* === Classes d'animation appliquées sur .ach-badge ===
   Cycles lents (2-6s) + ease-in-out pour éviter la saturation visuelle
   quand plusieurs badges sont visibles en même temps sur l'accueil. */
.ach-badge.a-pulse        { animation: ach-pulse        2.4s ease-in-out infinite; }
.ach-badge.a-tick         { animation: ach-tick         3.5s ease-in-out infinite; }
.ach-badge.a-glow         { animation: ach-glow         2.8s ease-in-out infinite; }
.ach-badge.a-sparkle      { animation: ach-sparkle      4s   ease-in-out infinite; }
.ach-badge.a-fan          { animation: ach-fan          3s   ease-in-out infinite; }
.ach-badge.a-wave         { animation: ach-wave         3.5s ease-in-out infinite; }
.ach-badge.a-typing       { animation: ach-typing       1.6s ease-in-out infinite; }
.ach-badge.a-bloom        { animation: ach-bloom        2.8s ease-in-out infinite; }
.ach-badge.a-orbit        { animation: ach-orbit        6s   linear infinite; }
.ach-badge.a-shimmer      { animation: ach-shimmer      2.6s ease-in-out infinite; }
.ach-badge.a-heartbeat    { animation: ach-heartbeat    1.6s ease-in-out infinite; }
.ach-badge.a-starpop      { animation: ach-starpop      3s   ease-in-out infinite; }
.ach-badge.a-tilt         { animation: ach-tilt         2.4s ease-in-out infinite; }
.ach-badge.a-radar        { animation: ach-radar        4s   linear infinite; }