/**
 * Domaine national de Saint-Cloud — Surcharges du thème
 *
 * Surcharge les variables CSS par défaut de l'USINE (core/index.html)
 * pour appliquer la charte graphique Saint-Cloud dès le premier rendu,
 * avant le chargement de app.js et config.json.
 *
 * Palette : vert forêt — conforme WCAG 2.1 AA
 */

:root {
  /* === Couleurs principales === */
  --color-primary:       #2D6A4F;   /* Vert forêt — navigation, header */
  --color-primary-light: #3d8a67;   /* Vert moyen — hover */
  --color-primary-dark:  #1B4332;   /* Vert sombre — active, focus */
  --color-secondary:     #52B788;   /* Vert clair — badges, liens */
  --color-secondary-light: #74c69d; /* Vert pâle — hover secondaire */
  --color-accent:        #40916C;   /* Vert intermédiaire — CTA, tags */
  --color-accent-light:  #52B788;   /* Vert clair — accentuation légère */

  /* === Couleurs de fond === */
  --color-bg:            #f0f7f4;   /* Blanc verdâtre — fond général */
  --color-bg-card:       #ffffff;   /* Blanc pur — fond cartes */
  --color-bg-overlay:    rgba(27, 67, 50, 0.90); /* Overlay vert sombre, 90% pour contraste texte */

  /* === Couleurs de texte (contraste WCAG AA vérifié) === */
  --color-text:          #1B4332;   /* Vert sombre — texte principal, ratio > 10:1 sur #f0f7f4 */
  --color-text-secondary: #3a5a47;  /* Vert gris — texte secondaire, ratio ≥ 4.6:1 sur #f0f7f4 */
  --color-text-light:    #4a7c59;   /* Vert moyen — texte tertiaire, ratio ≥ 4.5:1 sur blanc */
  --color-text-inverse:  #ffffff;   /* Blanc — texte sur fond coloré */

  /* === Focus visible (WCAG 2.1 SC 1.4.11 : non-text contrast 3:1 min) ===
   * Blanc sur fond vert : ratio > 10:1 quelle que soit la teinte de vert utilisée.
   * Plus sûr que la couleur secondaire (vert clair vs vert foncé = ~3:1 seulement). */
  --color-focus:         #ffffff;
  --color-focus-shadow:  rgba(255, 255, 255, 0.4);
}

/* Override focus ring pour garantir la visibilité sur tous les éléments interactifs */
:focus-visible {
  outline: 3px solid var(--color-focus) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px var(--color-focus-shadow) !important;
}