/*
 * AURA — correspondance Bootstrap
 * ===============================
 *
 * Bootstrap arrive avec sa propre palette et l'applique à tout ce qu'AURA ne
 * lui a pas dit : liens, `<code>`, texte d'aide, badges, boutons. Les jetons
 * d'AURA vivaient à côté sans jamais l'atteindre.
 *
 * axe-core, exécuté dans un vrai navigateur sur les vingt-huit écrans, a relevé
 * **douze couples de couleurs en échec**, tous d'origine Bootstrap. Le plus
 * grave : `.form-text` à **1,11:1** — le texte d'aide sous les champs de
 * formulaire, gris foncé sur fond sombre, proprement invisible.
 *
 * `scripts/verifier_contrastes.py` ne pouvait pas les voir : il vérifie les
 * couples de jetons AURA entre eux, pas ce que le navigateur rend une fois
 * Bootstrap chargé. Les deux contrôles se complètent, aucun ne remplace
 * l'autre.
 *
 * Règle appliquée
 * ---------------
 * Un aplat de couleur porte du **texte sombre** : sur les jetons d'AURA, le
 * texte blanc plafonne entre 1,95:1 et 3,99:1 tandis que `--text-on-accent`
 * donne 4,82:1 à 9,86:1. C'est la seule façon de garder la teinte de marque
 * sans descendre sous le seuil.
 *
 * Ce fichier ne définit **aucune valeur** : il ne fait que router les variables
 * de Bootstrap vers les jetons.
 */

:root {
  /* ── Fond et texte ──────────────────────────────────────────────────── */
  --bs-body-bg: var(--bg-base);
  --bs-body-color: var(--text-main);
  --bs-emphasis-color: var(--text-main);

  /*
   * `--bs-secondary-color` valait un gris foncé translucide : c'est lui qui
   * rendait `.form-text` illisible à 1,11:1.
   */
  --bs-secondary-color: var(--text-secondary);
  --bs-tertiary-color: var(--text-muted);
  --bs-secondary-bg: var(--bg-card);
  --bs-tertiary-bg: var(--bg-card-hover);

  --bs-border-color: var(--border-subtle);
  --bs-border-color-translucent: var(--border-subtle);

  /* ── Liens ──────────────────────────────────────────────────────────── */
  --bs-link-color: var(--primary);
  --bs-link-hover-color: var(--primary-hover);

  /*
   * Bootstrap 5.3 compose ses couleurs en `rgba(var(--bs-…-rgb), opacité)` :
   * fixer la seule variable hexadécimale ne change donc rien, et les liens
   * gardaient le `#0d6efd` du fournisseur. Ces triplets sont les seules
   * valeurs brutes du fichier ; ils doublent les jetons correspondants, et
   * `scripts/verifier_jetons.py` ne peut pas vérifier qu'ils s'accordent —
   * c'est `e2e/accessibilite.spec.js` qui le fait, en mesurant le rendu.
   *
   * Les virgules comptent : Bootstrap les compose en `RGBA(var(--…), 1)`,
   * syntaxe héritée. Écrits avec des espaces, les triplets produisent une
   * couleur invalide — `.text-bg-success` s'affichait alors en blanc sur
   * blanc.
   */
  --bs-link-color-rgb: 11, 150, 216;
  --bs-primary-rgb: 11, 150, 216;
  --bs-success-rgb: 16, 185, 129;
  --bs-warning-rgb: 245, 158, 11;
  --bs-danger-rgb: 241, 90, 90;
  --bs-info-rgb: 74, 139, 247;

  /*
   * `<code>` s'affichait dans le rose `#d63384` de Bootstrap, à 3,96:1 sur le
   * fond de carte. L'or de la charte donne 9,16:1 sur le même fond.
   */
  --bs-code-color: var(--accent-gold);

  --bs-highlight-bg: var(--warning-bg);
  --bs-highlight-color: var(--text-main);

  /* ── Sémantique d'état ──────────────────────────────────────────────── */
  --bs-primary: var(--primary);
  --bs-success: var(--success);
  --bs-warning: var(--warning);
  --bs-danger: var(--danger);
  --bs-info: var(--info);
}

/* ── Fonds sémantiques ────────────────────────────────────────────────────
 *
 * `.bg-*` pose une couleur vive ; Bootstrap y met du texte blanc, qui n'y
 * passe jamais le seuil. Le texte devient sombre.
 */
.bg-primary,
.bg-success,
.bg-warning,
.bg-danger,
.bg-info,
.badge.bg-primary,
.badge.bg-success,
.badge.bg-warning,
.badge.bg-danger,
.badge.bg-info {
  color: var(--text-on-accent) !important;
}

.bg-primary,
.badge.bg-primary {
  background-color: var(--primary) !important;
}

.bg-success,
.badge.bg-success {
  background-color: var(--success) !important;
}

.bg-warning,
.badge.bg-warning {
  background-color: var(--warning) !important;
}

.bg-danger,
.badge.bg-danger {
  background-color: var(--danger) !important;
}

.bg-info,
.badge.bg-info {
  background-color: var(--info) !important;
}

.bg-secondary,
.badge.bg-secondary {
  color: var(--text-main) !important;
  background-color: var(--bg-card-hover) !important;
}

.bg-light,
.badge.bg-light {
  color: var(--text-main) !important;
  background-color: var(--bg-card-hover) !important;
}

/* ── Texte sémantique ─────────────────────────────────────────────────────
 *
 * Employé sur les fonds sombres d'AURA, où chaque jeton dépasse 4,5:1.
 */
.text-success {
  color: var(--success) !important;
}

.text-warning {
  color: var(--warning) !important;
}

.text-danger {
  color: var(--danger) !important;
}

.text-info {
  color: var(--info) !important;
}

.text-primary {
  color: var(--primary) !important;
}

.text-muted {
  color: var(--text-muted) !important;
}

.text-white-50 {
  color: var(--text-secondary) !important;
}

/* ── Boutons ──────────────────────────────────────────────────────────────
 *
 * `.btn-primary` affichait du blanc sur `#0b96d8` : 3,29:1. Le texte sombre
 * sur le bleu de marque donne 4,82:1.
 */
.btn-primary {
  --bs-btn-color: var(--text-on-accent);
  --bs-btn-bg: var(--primary-fill);
  --bs-btn-border-color: var(--primary-fill);
  --bs-btn-hover-color: var(--text-on-accent);
  --bs-btn-hover-bg: var(--primary);
  --bs-btn-hover-border-color: var(--primary);
  --bs-btn-active-color: var(--text-on-accent);
  --bs-btn-active-bg: var(--primary);
  --bs-btn-active-border-color: var(--primary);
  --bs-btn-disabled-color: var(--text-on-accent);
  --bs-btn-disabled-bg: var(--primary-fill);
  --bs-btn-disabled-border-color: var(--primary-fill);
}

.btn-success {
  --bs-btn-color: var(--text-on-accent);
  --bs-btn-bg: var(--success);
  --bs-btn-border-color: var(--success);
  --bs-btn-hover-color: var(--text-on-accent);
  --bs-btn-hover-bg: var(--success);
  --bs-btn-hover-border-color: var(--success);
  --bs-btn-active-color: var(--text-on-accent);
  --bs-btn-active-bg: var(--success);
}

.btn-danger {
  --bs-btn-color: var(--text-on-accent);
  --bs-btn-bg: var(--danger);
  --bs-btn-border-color: var(--danger);
  --bs-btn-hover-color: var(--text-on-accent);
  --bs-btn-hover-bg: var(--danger);
  --bs-btn-hover-border-color: var(--danger);
  --bs-btn-active-color: var(--text-on-accent);
  --bs-btn-active-bg: var(--danger);
}

.btn-warning {
  --bs-btn-color: var(--text-on-accent);
  --bs-btn-bg: var(--warning);
  --bs-btn-border-color: var(--warning);
  --bs-btn-hover-color: var(--text-on-accent);
  --bs-btn-hover-bg: var(--warning);
  --bs-btn-hover-border-color: var(--warning);
}

/*
 * Le gris `#6c757d` de Bootstrap donnait 3,80:1 sur le fond de carte : le
 * libellé d'un bouton secondaire était donc sous le seuil.
 */
.btn-secondary,
.btn-outline-secondary {
  --bs-btn-color: var(--text-secondary);
  --bs-btn-border-color: var(--border-strong);
  --bs-btn-hover-color: var(--text-main);
  --bs-btn-hover-bg: var(--bg-card-hover);
  --bs-btn-hover-border-color: var(--border-strong);
  --bs-btn-active-color: var(--text-main);
  --bs-btn-active-bg: var(--bg-card-hover);
  --bs-btn-active-border-color: var(--border-strong);
  --bs-btn-disabled-color: var(--text-muted);
  --bs-btn-disabled-border-color: var(--border-subtle);
}

.btn-secondary {
  --bs-btn-bg: var(--bg-card-hover);
}

.btn-outline-primary {
  --bs-btn-color: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-color: var(--text-on-accent);
  --bs-btn-hover-bg: var(--primary-fill);
  --bs-btn-hover-border-color: var(--primary-fill);
  --bs-btn-active-color: var(--text-on-accent);
  --bs-btn-active-bg: var(--primary-fill);
}

.btn-outline-success {
  --bs-btn-color: var(--success);
  --bs-btn-border-color: var(--success);
  --bs-btn-hover-color: var(--text-on-accent);
  --bs-btn-hover-bg: var(--success);
  --bs-btn-hover-border-color: var(--success);
}

.btn-outline-danger {
  --bs-btn-color: var(--danger);
  --bs-btn-border-color: var(--danger);
  --bs-btn-hover-color: var(--text-on-accent);
  --bs-btn-hover-bg: var(--danger);
  --bs-btn-hover-border-color: var(--danger);
}

.btn-outline-info {
  --bs-btn-color: var(--info);
  --bs-btn-border-color: var(--info);
  --bs-btn-hover-color: var(--text-on-accent);
  --bs-btn-hover-bg: var(--info);
  --bs-btn-hover-border-color: var(--info);
}

.btn-light {
  --bs-btn-color: var(--text-main);
  --bs-btn-bg: var(--bg-card-hover);
  --bs-btn-border-color: var(--border-strong);
  --bs-btn-hover-color: var(--text-main);
  --bs-btn-hover-bg: var(--bg-card);
  --bs-btn-hover-border-color: var(--border-strong);
}

/*
 * Le focus au clavier était rendu par une ombre bleue de Bootstrap, invisible
 * sur un fond sombre. L'anneau doré de la charte le remplace.
 */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  box-shadow: none;
}

/* ── Formulaires ────────────────────────────────────────────────────────── */

.form-control,
.form-select {
  color: var(--text-main);
  background-color: var(--bg-base);
  border-color: var(--border-strong);
}

.form-control:focus,
.form-select:focus {
  color: var(--text-main);
  background-color: var(--bg-base);
  border-color: var(--primary);
  box-shadow: none;
}

.form-control::placeholder {
  color: var(--text-muted);
}

/*
 * Le texte d'aide sous un champ : c'est lui qui plafonnait à 1,11:1.
 */
.form-text {
  color: var(--text-secondary);
}

/* ── Tableaux et alertes ────────────────────────────────────────────────── */

.table {
  --bs-table-color: var(--text-secondary);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--border-subtle);
  --bs-table-hover-color: var(--text-main);
  --bs-table-hover-bg: var(--bg-card-hover);
}

.alert-warning {
  --bs-alert-color: var(--text-main);
  --bs-alert-bg: var(--warning-bg);
  --bs-alert-border-color: var(--warning);
}

.alert-danger {
  --bs-alert-color: var(--text-main);
  --bs-alert-bg: var(--danger-bg);
  --bs-alert-border-color: var(--danger);
}

.alert-success {
  --bs-alert-color: var(--text-main);
  --bs-alert-bg: var(--success-bg);
  --bs-alert-border-color: var(--success);
}

.alert-info {
  --bs-alert-color: var(--text-main);
  --bs-alert-bg: var(--info-bg);
  --bs-alert-border-color: var(--info);
}

/* ── Variantes « douces » ─────────────────────────────────────────────────
 *
 * Propres à AURA : un aplat très transparent avec le texte de la même famille.
 * Ce n'est pas une surcharge de Bootstrap, mais elles vivent ici parce qu'elles
 * s'écrivent avec ses classes utilitaires.
 */
.bg-success-soft {
  color: var(--success) !important;
  background: var(--success-bg) !important;
}

.bg-warning-soft {
  color: var(--warning) !important;
  background: var(--warning-bg) !important;
}

.bg-danger-soft {
  color: var(--danger) !important;
  background: var(--danger-bg) !important;
}

.bg-info-soft,
.bg-primary-soft {
  color: var(--info) !important;
  background: var(--info-bg) !important;
}

/* ── `.text-bg-*` ─────────────────────────────────────────────────────────
 *
 * Bootstrap compose ici la couleur **et** le fond, en choisissant du blanc ou
 * du noir selon la luminosité de sa propre palette. Sur celle d'AURA, ce choix
 * tombe à côté : `.text-bg-warning` posait du noir sur le fond de carte, à
 * 1,17:1.
 */
.text-bg-primary {
  color: var(--text-on-accent) !important;
  background-color: var(--primary) !important;
}

.text-bg-success {
  color: var(--text-on-accent) !important;
  background-color: var(--success) !important;
}

.text-bg-warning {
  color: var(--text-on-accent) !important;
  background-color: var(--warning) !important;
}

.text-bg-danger {
  color: var(--text-on-accent) !important;
  background-color: var(--danger) !important;
}

.text-bg-info {
  color: var(--text-on-accent) !important;
  background-color: var(--info) !important;
}

.text-bg-secondary,
.text-bg-light,
.text-bg-dark {
  color: var(--text-main) !important;
  background-color: var(--bg-card-hover) !important;
}