/* /themes/custom/mon_theme/css/variables.css */
:root {
  /* 1. Global Tokens (Dictionnaire de couleurs) */
  --color-blue-900: #003B68;
  --color-blue-800: #003B68D6;
  --color-blue-700: #00508a;
  --color-gold-500: #F5A623;
  --color-gold-400: #F5B868;
  --color-gold-100: #f8f5ee;
  --color-white:    #ffffff;
  --color-gray-100: #f0f3f7;
  --color-gray-200: #dce4f0;
  --color-gray-700: #7a90a8;
  --color-gray-900: #1a2a4a;
  --color-green-700:  #0a6635;
  --color-green-100:  #e0f4ea;

  --color-red-700:   #c0392b;
  --color-red-100:   #fdecea;
  --color-orange-700: #b86a00;
  --color-orange-100: #fef3e2;

  /* Status */
  --status-error-bg:    var(--color-red-100);
  --status-error-text:  var(--color-red-700);
  --status-warning-bg:  var(--color-orange-100);
  --status-warning-text: var(--color-orange-700);
  --color-focus: var(--color-gold-500);

  /* Admin hero gradient */
  --admin-hero-dark: var(--color-blue-900);
  /* 2. Semantic Tokens (Ce que tu utilises dans tes autres fichiers CSS) */

  /* Brand */
  --brand-primary:   var(--color-blue-900);
  --brand-secondary: var(--color-blue-700);
  --brand-accent:    var(--color-gold-500);

  /* Surfaces & Backgrounds */
  --surface-default: var(--color-gray-100); /* Gris très clair pour le fond du site */
  --surface-white:   var(--color-white);    /* Blanc pur pour les menus/cartes */
  --surface-modal: #f0f3f7;

  /* Borders */
  --border-subtle:   var(--color-gray-200);

  /* Typography */
  --text-main:       var(--color-gray-900); /* Texte foncé */
  --text-muted:      var(--color-gray-700); /* Texte gris */
  --text-inverse:    var(--color-white);    /* Texte blanc (pour fond bleu) */

  /* Status */
  --status-success-bg: var(--color-green-100);
  --status-success-text: var(--color-green-700);

  --nav-height:       82px;
  --topbar-height:    36px;

  /* Dropdown (fond clair) */
  --dd-bg:            #ffffff;
  --dd-border:        #dce4f0;
  --dd-text:          #1a2a4a;
  --dd-hover-bg:      #f8f9fb;
  --dd-radius:        10px;
}

/* Base style */
body {
  background-color: #f0f3f7;
  color: var(--text-main);
  font-family: 'Plus Jakarta Sans', sans-serif;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}


/* ══════════════════════════════════════════════════════════════════
   LOADER GLOBAL
══════════════════════════════════════════════════════════════════ */

#site-loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  height: 3px;
  background: transparent;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}

#site-loader.show {
  opacity: 1;
}

/* Barre de progression animée en haut de page */
#site-loader::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  width: 30%;
  background: var(--brand-accent); /* couleur or du thème */
  border-radius: 0 2px 2px 0;
  animation: loader-progress 1.5s ease-in-out infinite;
}

@keyframes loader-progress {
  0%   { left: -30%; width: 30%; }
  50%  { left: 40%;  width: 40%; }
  100% { left: 100%; width: 30%; }
}

/* Spinner centré pour les AJAX longs */
.site-loader__spinner {
  display: none; /* activé seulement si besoin */
}