/*
  Variables CSS — Charte graphique GRH Togo
  Voir docs/charte-graphique.md pour le détail des usages.
  Ne jamais réécrire un code hexadécimal en dur dans un template :
  toujours utiliser ces variables via var(--nom-variable).
*/

:root {
  /* Couleurs de marque */
  --couleur-primaire: #1F4E79;
  --couleur-primaire-hover: #163A5C;
  --couleur-primaire-claire: #E6F1FB;

  --couleur-secondaire: #0F6E56;
  --couleur-secondaire-claire: #E1F5EE;

  /* Couleurs neutres */
  --couleur-texte: #1F2933;
  --couleur-texte-secondaire: #5F6B7A;
  --couleur-texte-desactive: #9AA5B1;
  --couleur-fond-page: #F4F6F8;
  --couleur-fond-carte: #FFFFFF;
  --couleur-bordure: #DDE3EA;

  /* Couleurs de statut */
  --couleur-succes-texte: #1E7D34;
  --couleur-succes-fond: #E6F4EA;
  --couleur-attention-texte: #9A6700;
  --couleur-attention-fond: #FFF4E0;
  --couleur-erreur-texte: #B3261E;
  --couleur-erreur-fond: #FBEAEA;
  --couleur-info-texte: #0C66B0;
  --couleur-info-fond: #E6F1FB;

  /* Variables d'Aplatissement & Thème AdminLTE */
  --sidebar-fond: #1b263b; /* Bleu foncé profond pour la sidebar */
  --sidebar-fond-hover: #2c3e50;
  --sidebar-fond-actif: #1F4E79;
  --sidebar-texte: #b4c5d6;
  --sidebar-texte-hover: #ffffff;
  --sidebar-texte-actif: #ffffff;
  --sidebar-bordure: rgba(255, 255, 255, 0.08);
  --header-fond: #ffffff;
  --transition-rapide: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

  /* Typographie */
  --police-systeme: "Plus Jakarta Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Espacements (unité de base 8px) */
  --espace-xs: 4px;
  --espace-sm: 8px;
  --espace-md: 16px;
  --espace-lg: 24px;
  --espace-xl: 32px;
  --espace-xxl: 48px;

  /* Rayons et ombres */
  --rayon-sm: 8px;
  --rayon-lg: 12px;
  --ombre-carte: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.02);
  --ombre-carte-survol: 0 10px 20px rgba(0, 0, 0, 0.08), 0 6px 6px rgba(0, 0, 0, 0.04);
  --ombre-header: 0 1px 4px rgba(0, 0, 0, 0.05);

  /* Hauteur minimale des zones tactiles */
  --hauteur-tactile-min: 44px;
}