/* ============================================
   FICHIER : theme.css
   VERSION : 2025.10.12
   OBJET   : Variables globales & utilitaires
   ============================================ */

/* === Variables globales === */
:root {
  --accent: #ffcc88;
  --dark: #222;

  /* Texte */
  --text-main: #000;
  --text-strong: #111;

  /* Fonds clairs */
  --bg-light: rgba(255,255,255,0.5);
  --bg-light-alt: rgba(240,240,240,0.6);

  /* Steam badge */
  --steam-green-bg: #2d6a2d;
  --steam-green-text: #aaffaa;
  --steam-dark-bg: #1b2838;
  --steam-old-price: #ccc;

  /* Responsive (tailles/paddings) */
  --font-small: 0.9em;
  --font-xsmall: 0.8em;
  --padding-small: 4px 6px;

  /* Thème sombre (palette de base) */
  --dark-bg: #111;
  --dark-surface: #333;
  --dark-text: #eee;
  --dark-text-light: #ddd;
  --dark-accent: #ffcc88;
  --dark-link: #88ccff;
  --dark-row-odd: rgba(50,50,50,0.6);
  --dark-row-even: rgba(60,60,60,0.6);

  /* Header (variables utilisées par header.css) */
  --header-bg: #f0f0f0;
  --header-text: var(--accent);
  --header-border: #ccc;

  /* Boutons */
  --btn-bg-light: #ddd;
  --btn-bg-dark: #333;

  /* Transparence image de fond */
  --bg-overlay: rgba(0,0,0,0.65);

  /* Couleurs utilitaires (par défaut clair) */
  --alert-red: #cc0000;     /* pour .red */
  --alert-strong: #ff0000;  /* pour .alert */
  --accent-green: #22aa22;  /* pour .green */

   /* ✅ 2026.08.24-5 : Variables carte mobile (compatibles clair/sombre) */
   --card-bg: rgba(255, 255, 255, 0.9);
   --card-border: rgba(0, 0, 0, 0.1);
   --card-shadow: rgba(0, 0, 0, 0.12);
   --card-label-text: #555;
   --card-loading-text: #666;
}

/* === Overlay de fond === */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  pointer-events: none;
  z-index: -1;
  transition: background 0.3s ease;
}

/* === Thème clair (via data-theme) === */
body[data-theme="light"] {
  --header-bg: rgba(0.2, 0.4, 0.6,0.6);   /* plus sombre que blanc pur */
  /* --header-bg: rgba(51, 102, 153, 0.6);   /* bleu-gris translucide */ */
  --header-text: var(--accent);
  --header-border: #ccc;

  --text-main: #000;
  --text-strong: #111;

  --bg-light: rgba(255,255,255,0.5);
  --bg-light-alt: rgba(240,240,240,0.6);

  /* utilitaires */
  --alert-red: #cc0000;
  --alert-strong: #ff0000;
  --accent-green: #22aa22;  /* pour .green */
}

/* === Thème sombre (via data-theme) === */
body[data-theme="dark"] {
  --header-bg: rgba(0,0,0,0.85);
  /* --header-bg: rgba(51, 102, 153, 0.85);  /* même teinte, plus opaque */ */
  --header-text: var(--accent);
  --header-border: #444;

  --text-main: var(--dark-text);
  --text-strong: var(--dark-text-light);

  --bg-light: var(--dark-row-even);
  --bg-light-alt: var(--dark-row-odd);

  /* utilitaires */
  --alert-red: #ff6666;
  --alert-strong: #ff4444;
  --accent-green: #66cc66;
   --card-bg: rgba(40, 40, 40, 0.9);
   --card-border: rgba(255, 255, 255, 0.12);
   --card-shadow: rgba(255, 255, 255, 0.25);
   --card-label-text: #aaa;
   --card-loading-text: #999;
}

/* === Utilitaires (basés sur variables) === */
.red { color: var(--alert-red); font-weight: bold; }
.alert { color: var(--alert-strong); font-size: 1.2em; font-weight: bold; }
.highlight { font-size: 1.1em; font-weight: bold; }
.green { color: var(--accent-green); font-weight: bold; }