/* ============================================
   VARIABLES CSS - CFM77
   Fichier partagé entre public et admin
   ============================================ */

:root {
  /* Couleurs principales */
  --couleur-secondaire: #f0f0f0;
  --texte-titre: #4a4a4a;
  --texte-principal: #606060;
  --texte-blanc: #ffffff;

  /* Couleurs de thème */
  --couleur-neutre: #2b4660;
  --couleur-code: #D20055;
  --couleur-auto: #622081;
  --couleur-moto: #ed7d31;
  --couleur-moniteur: #4658a9;
  --couleur-pratique: #b12e2e;
  --couleur-contact: #17a2b8;
  --couleur-postpermis: #228B22;
  --couleur-footer: #676767;

  /* Couleur check */
  --couleur-check: #5AB55E;

  /* Polices (stack système, même convention que app) */
  --police-principale: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Tailles de texte (alignées sur app) */
  --taille-titre: 25px;
  --taille-sous-titre: 18px;
  --taille-menu: 16px;
  --taille-texte: 15px;
  --taille-texte-petit: 13px;

  /* Espacements */
  --espacement-petit: 10px;
  --espacement-moyen: 20px;
  --espacement-grand: 40px;

  /* Couleur de thème par défaut (neutre si pas de data-theme) */
  --couleur-theme: var(--couleur-neutre);
}

/* ============================================
   SYSTÈME DE THÈME UNIFIÉ
   Utiliser data-theme="xxx" sur n'importe quel élément
   ============================================ */

[data-theme="code"] { --couleur-theme: var(--couleur-code); }
[data-theme="auto"] { --couleur-theme: var(--couleur-auto); }
[data-theme="moto"] { --couleur-theme: var(--couleur-moto); }
[data-theme="moniteur"] { --couleur-theme: var(--couleur-moniteur); }
[data-theme="pratique"] { --couleur-theme: var(--couleur-pratique); }
[data-theme="contact"] { --couleur-theme: var(--couleur-contact); }
[data-theme="postpermis"] { --couleur-theme: var(--couleur-postpermis); }
[data-theme="neutre"] { --couleur-theme: var(--couleur-neutre); }
[data-theme="footer"] { --couleur-theme: var(--couleur-footer); }
