/*
 * Charte des outils EEIF : tokens (couleurs, typographie, espacements, rayons, ombre).
 * Généré depuis tokens.json de la charte « Charte des outils EEIF »
 * (https://claude.ai/artifact/J1ko9YS5LWGcpAbgpMXWvZ, version du 23/09/2026).
 * Ne pas modifier à la main : toute évolution se fait dans la charte, puis se recopie ici.
 *
 * Écart avec le fichier généré par la charte : thème clair seul (décision de l'équipe du
 * 24/09/2026). Les valeurs sombres de la charte ne sont pas reprises : un appareil réglé en
 * sombre reçoit les mêmes couleurs.
 */

:root {
  --bleu-eeif: #002798; /* Bleu EEIF, couleur d'identité n°1 (repris du CSS de gl.php). Titres, liens, boutons principaux, fond d'en-tête. En sombre, éclairci pour rester lisible : 7,9:1 sur `fond`. */
  --bleu-profond: #001a6b; /* Survol et état pressé des éléments `bleu-eeif`, fin du dégradé d'en-tête (repris de l'architecture serveur). */
  --sur-bleu: #ffffff; /* Texte et icônes posés sur `bleu-eeif` ou `bleu-profond` (12:1 en clair, 7,9:1 en sombre). */
  --bleu-doux: #e8ecfa; /* Fond de sélection, ligne active de tableau, badge d'information. Texte dessus : `bleu-eeif` (10:1 clair, 6,2:1 sombre). */
  --orange-eeif: #ff7f00; /* Orange EEIF, couleur d'identité n°2 (repris de gl.php). Accents : soulignement des titres de section, bouton d'action secondaire forte, marqueurs. JAMAIS en texte sur fond clair (2,5:1) ; JAMAIS de texte blanc dessus. */
  --orange-survol: #e67200; /* Survol des boutons `orange-eeif`. */
  --sur-orange: #1c1f2a; /* Texte posé sur `orange-eeif` : encre foncée, jamais blanc (6,5:1 clair, 7,8:1 sombre). */
  --orange-texte: #b25400; /* Quand l'orange doit être du texte (lien d'accent, compteur, libellé) : 5:1 sur `surface` en clair, 9:1 en sombre. Aussi l'anneau de focus. */
  --orange-doux: #fff3e6; /* Fond des encadrés « À noter » (`.ei-note`). Texte dessus : `encre`, ou `orange-fonce` pour un mot-clé. */
  --orange-fonce: #9a4800; /* Texte d'accent sur `orange-doux` (5,8:1 clair, 7,9:1 sombre). */
  --fond: #f6f7fb; /* Fond de page de tous les outils (repris de l'architecture serveur). */
  --surface: #ffffff; /* Cartes, sections, champs de formulaire, tableaux. */
  --surface-creuse: #eef0f8; /* Code en ligne, en-têtes de tableau, zones de dépôt (DropEI), puces d'application. */
  --fond-logo: #ffffff; /* Tuile des logos d'outils, claire dans les deux thèmes : un logo est dessiné pour un fond blanc. */
  --encre: #1c1f2a; /* Texte courant sur `fond`, `surface` et `surface-creuse` (≥12:1 dans les deux thèmes). */
  --encre-douce: #5a5f70; /* Texte secondaire : sous-titres, aides de champ, métadonnées, pied de page. Sur `fond`, `surface`, `surface-creuse` (≥5,5:1 clair, ≥7:1 sombre). */
  --trait: #e2e4ec; /* Séparateurs et bordures décoratives de cartes et lignes de tableau. Ne porte aucun sens : ne pas l'utiliser pour délimiter un champ. */
  --trait-fort: #767d93; /* Bordure des champs, cases et boutons secondaires : ≥3:1 sur `surface` dans les deux thèmes. */
  --en-tete: #002798; /* Fond de la barre d'en-tête commune à tous les outils. */
  --sur-en-tete: #ffffff; /* Nom de l'outil et liens dans la barre d'en-tête. */
  --succes: #1e7a45; /* Confirmation (enregistré, validé). Toujours accompagné d'un mot ou d'une icône, jamais la couleur seule. */
  --succes-doux: #e7f4ec; /* Fond des badges et bandeaux de succès ; texte `succes` dessus (4,7:1 clair, 7,3:1 sombre). */
  --danger: #c0282d; /* Erreur, suppression, action irréversible. Texte posé dessus : `sur-danger` (5,9:1 clair, 7,3:1 sombre). Toujours avec un mot explicite (« Supprimer »). */
  --sur-danger: #ffffff; /* Texte posé sur un bouton `danger`. */
  --danger-doux: #fbe9ea; /* Fond des messages d'erreur ; texte `danger` dessus (5:1 clair, 6,2:1 sombre). */
  --focus: var(--orange-texte); /* Anneau de focus clavier : 2px plein, décalé de 2px. ≥5:1 sur `surface` en clair, 9:1 en sombre. */
  --ombre-flottante: 0 4px 14px rgba(0,0,0,0.06); /* Seulement pour ce qui flotte au-dessus du contenu (sommaire chevauchant l'en-tête, menus, modales). Les cartes posées n'ont qu'une bordure `trait`. */
}
:root {
  --espace-1: 4px; /* Écart icône/texte, marge interne des badges (vertical). */
  --espace-2: 8px; /* Écart entre éléments d'un groupe (boutons côte à côte, tuiles). */
  --espace-3: 12px; /* Marge interne des champs et boutons (horizontal : espace-4). */
  --espace-4: 16px; /* Marge interne des encadrés, écart label/champ + aide. */
  --espace-5: 20px; /* Marge latérale de page sur mobile. */
  --espace-6: 24px; /* Écart entre sections/cartes. */
  --espace-7: 30px; /* Marge interne des sections sur écran large (18px sur mobile). */
  --espace-8: 48px; /* Hauteur d'aération de l'en-tête (haut). */
  --rayon-xs: 4px; /* Code en ligne, cases à cocher. */
  --rayon-sm: 6px; /* Encadrés `.ei-note`, bulles d'aide. */
  --rayon-md: 8px; /* Boutons, champs, tuiles d'application. */
  --rayon-lg: 12px; /* Sommaire, menus déroulants, modales. */
  --rayon-xl: 14px; /* Cartes et sections de contenu. */
  --rayon-pilule: 999px; /* Badges de rôle et de statut. */
  --font-titre: Poppins, "Segoe UI", system-ui, sans-serif;
  --font-texte: Avenir, "Avenir Next", "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-titre-page: 600 1.9rem/1.25 var(--font-titre); /* Titre de page ou d'en-tête d'outil, un seul par écran. */
  --text-titre-section: 600 1.3rem/1.35 var(--font-titre); /* Titre de carte/section, en `bleu-eeif`, souligné d'un trait `orange-eeif` de 3px. */
  --text-titre-bloc: 600 1.05rem/1.4 var(--font-titre); /* Sous-titre à l'intérieur d'une section. */
  --text-bouton: 600 0.95rem/1.2 var(--font-titre); /* Libellés de boutons et d'onglets. */
  --text-corps: 400 1rem/1.6 var(--font-texte); /* Texte courant. */
  --text-corps-petit: 400 0.92rem/1.55 var(--font-texte); /* Tableaux, encadrés, aides de champ, sommaire. */
  --text-etiquette: 600 0.8rem/1.3 var(--font-texte); /* Badges de rôle et de statut. */
  --text-code: 400 0.9em/1.5 var(--font-mono); /* Valeurs techniques, identifiants, variables d'environnement. */
}
.titre-page {
  font-family: var(--font-titre);
  font-size: 1.9rem;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: 0;
}
.titre-section {
  font-family: var(--font-titre);
  font-size: 1.3rem;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: 0;
}
.titre-bloc {
  font-family: var(--font-titre);
  font-size: 1.05rem;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0;
}
.bouton {
  font-family: var(--font-titre);
  font-size: 0.95rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0;
}
.corps {
  font-family: var(--font-texte);
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0;
}
.corps-petit {
  font-family: var(--font-texte);
  font-size: 0.92rem;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: 0;
}
.etiquette {
  font-family: var(--font-texte);
  font-size: 0.8rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0;
}
.code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
}