/* ==========================================================================
   ASSALE — Design System Boutons v1.0
   Conformité WCAG AA (≥ 3:1 texte gras/large ; ≥ 4.5:1 texte normal)

   Ratios de contraste calculés :
     #E85D04 / #FFFFFF → 3.44:1  (AA large/bold  ✓ — boutons 600/13px)
     #0B6E88 / #FFFFFF → 7.06:1  (AAA            ✓)
     #D62828 / #FFFFFF → 4.98:1  (AA normal       ✓)
     #15803d / #FFFFFF → 5.08:1  (AA normal       ✓)
     #374151 / #FFFFFF → 9.44:1  (AAA             ✓)

   Ce fichier chargé APRÈS index.css remplace toutes les couleurs hardcodées.
   L'utilisation de !important overide les inline styles sans modifier le HTML.
   ========================================================================== */

/* ────────────────────────────────────────────────────────────────────────────
   VARIABLES — Héritent du Theme Builder via var(--btn-*, fallback)
   Les valeurs de fallback sont identiques aux valeurs WCAG d'origine —
   zéro changement visuel tant que l'admin n'a pas modifié le thème.
   ──────────────────────────────────────────────────────────────────────────── */
:root {
    /* Primaire — suit --btn-primary-bg injecté par ThemeController::generateCss() */
    --ds-primary-bg:    var(--btn-primary-bg, #E85D04);
    --ds-primary-hover: var(--btn-primary-hover, #c94e00);
    --ds-primary-fg:    var(--btn-primary-fg, #FFFFFF);

    /* Secondaire — suit --btn-secondary-bg */
    --ds-secondary-bg:    var(--btn-secondary-bg, #0B6E88);
    --ds-secondary-hover: var(--btn-secondary-hover, #084f63);
    --ds-secondary-fg:    var(--btn-secondary-fg, #FFFFFF);

    /* Sémantiques — gardés hardcodés (WCAG validés, pas de thème admin) */
    --ds-danger-bg:    #D62828;
    --ds-danger-hover: #b01f1f;
    --ds-danger-fg:    #FFFFFF;

    --ds-success-bg:    #15803d;
    --ds-success-hover: #116030;
    --ds-success-fg:    #FFFFFF;

    --ds-neutral-bg:    #374151;
    --ds-neutral-hover: #1f2937;
    --ds-neutral-fg:    #FFFFFF;

    /* Outline — suit la couleur secondaire */
    --ds-outline-border:   var(--btn-secondary-bg, #0B6E88);
    --ds-outline-fg:       var(--btn-secondary-bg, #0B6E88);
    --ds-outline-hover-bg: var(--btn-secondary-bg, #0B6E88);
    --ds-outline-hover-fg: #FFFFFF;
}

/* ────────────────────────────────────────────────────────────────────────────
   BASE BOUTON — fond commun à tous les états
   ──────────────────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    font-weight: 600 !important;
    border-radius: var(--radius-sm, 0) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    border-style: solid !important;
    border-width: 1.5px !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   PRIMAIRE — Orange + Blanc
   Utilisation : CTA principal, enregistrer, créer
   ──────────────────────────────────────────────────────────────────────────── */
.btn-primary {
    background-color: var(--ds-primary-bg) !important;
    border-color:     var(--ds-primary-bg) !important;
    color:            var(--ds-primary-fg) !important;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--ds-primary-hover) !important;
    border-color:     var(--ds-primary-hover) !important;
    color:            var(--ds-primary-fg) !important;
}
/* Force blanc sur TOUTES les icônes dans btn-primary (corrige text-accent orange sur fond orange) */
.btn-primary i,
.btn-primary svg,
.btn-primary .fa-solid,
.btn-primary .fa-regular,
.btn-primary .fa-brands,
.btn-primary .fa-duotone {
    color: var(--ds-primary-fg) !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   SECONDAIRE — Teal + Blanc
   Utilisation : action secondaire, dupliquer, retour contextuel
   ──────────────────────────────────────────────────────────────────────────── */
.btn-secondary {
    background-color: var(--ds-secondary-bg) !important;
    border-color:     var(--ds-secondary-bg) !important;
    color:            var(--ds-secondary-fg) !important;
}
.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--ds-secondary-hover) !important;
    border-color:     var(--ds-secondary-hover) !important;
    color:            var(--ds-secondary-fg) !important;
}
.btn-secondary i,
.btn-secondary svg,
.btn-secondary .fa-solid,
.btn-secondary .fa-regular,
.btn-secondary .fa-brands {
    color: var(--ds-secondary-fg) !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   DANGER — Rouge + Blanc
   Utilisation : supprimer, réinitialiser, action destructive
   ──────────────────────────────────────────────────────────────────────────── */
.btn-danger {
    background-color: var(--ds-danger-bg) !important;
    border-color:     var(--ds-danger-bg) !important;
    color:            var(--ds-danger-fg) !important;
}
.btn-danger:hover,
.btn-danger:focus {
    background-color: var(--ds-danger-hover) !important;
    border-color:     var(--ds-danger-hover) !important;
    color:            var(--ds-danger-fg) !important;
}
.btn-danger i,
.btn-danger svg,
.btn-danger .fa-solid,
.btn-danger .fa-regular {
    color: var(--ds-danger-fg) !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   SUCCESS — Vert + Blanc
   Utilisation : valider, approuver, publier
   ──────────────────────────────────────────────────────────────────────────── */
.btn-success {
    background-color: var(--ds-success-bg) !important;
    border-color:     var(--ds-success-bg) !important;
    color:            var(--ds-success-fg) !important;
}
.btn-success:hover,
.btn-success:focus {
    background-color: var(--ds-success-hover) !important;
    border-color:     var(--ds-success-hover) !important;
    color:            var(--ds-success-fg) !important;
}
.btn-success i,
.btn-success svg,
.btn-success .fa-solid,
.btn-success .fa-regular {
    color: var(--ds-success-fg) !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   NEUTRAL / DARK — Gris foncé + Blanc
   Utilisation : aperçu, inspecter, navigation neutre
   ──────────────────────────────────────────────────────────────────────────── */
.btn-neutral,
.btn-dark {
    background-color: var(--ds-neutral-bg) !important;
    border-color:     var(--ds-neutral-bg) !important;
    color:            var(--ds-neutral-fg) !important;
}
.btn-neutral:hover,
.btn-dark:hover {
    background-color: var(--ds-neutral-hover) !important;
    border-color:     var(--ds-neutral-hover) !important;
    color:            var(--ds-neutral-fg) !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   OUTLINE — Teal bordure + fond blanc → hover fond teal
   Utilisation : déplacer, actions secondaires, navigation inline
   Problème corrigé : ancien orange (#f36f21 sur blanc = 2.9:1 — FAIL WCAG)
                      nouveau teal (#0B6E88 sur blanc = 7.06:1 — AAA ✓)
   ──────────────────────────────────────────────────────────────────────────── */
.btn-outline {
    background-color: var(--white, #ffffff) !important;
    border-color:     var(--ds-outline-border) !important;
    color:            var(--ds-outline-fg) !important;
    border-width:     1.5px !important;
    border-style:     solid !important;
}
.btn-outline:hover,
.btn-outline:focus {
    background-color: var(--ds-outline-hover-bg) !important;
    border-color:     var(--ds-outline-hover-bg) !important;
    color:            var(--ds-outline-hover-fg) !important;
}
.btn-outline:hover i,
.btn-outline:hover svg,
.btn-outline:hover .fa-solid,
.btn-outline:hover .fa-regular {
    color: var(--ds-outline-hover-fg) !important;
}
.btn-outline i,
.btn-outline svg,
.btn-outline .fa-solid,
.btn-outline .fa-regular {
    color: inherit !important;
}

/* ── Outline DANGER (Supprimer, Détacher) ── */
/* Problème corrigé : btn-outline (orange border) + text-danger (rouge) = incohérent */
/* Solution : rouge pur + fond blanc → hover rouge plein + blanc */
.btn-outline.text-danger,
.btn-outline[class*="danger"] {
    background-color: var(--white, #ffffff) !important;
    border-color:     var(--ds-danger-bg) !important;
    color:            var(--ds-danger-bg) !important;
}
.btn-outline.text-danger:hover,
.btn-outline[class*="danger"]:hover {
    background-color: var(--ds-danger-bg) !important;
    border-color:     var(--ds-danger-bg) !important;
    color:            var(--white, #ffffff) !important;
}
.btn-outline.text-danger:hover i,
.btn-outline.text-danger:hover svg {
    color: var(--white, #ffffff) !important;
}

/* ── Outline WARNING (Mise à jour, attention) ── */
.btn-outline.text-warning {
    background-color: var(--white, #ffffff) !important;
    border-color:     #b45309 !important; /* Amber-700 : 4.75:1 sur blanc ✓ */
    color:            #b45309 !important;
}
.btn-outline.text-warning:hover {
    background-color: #b45309 !important;
    border-color:     #b45309 !important;
    color:            var(--white, #ffffff) !important;
}

/* ── Outline SUCCESS (Approuver en liste) ── */
.btn-outline.text-success {
    background-color: var(--white, #ffffff) !important;
    border-color:     var(--ds-success-bg) !important;
    color:            var(--ds-success-bg) !important;
}
.btn-outline.text-success:hover {
    background-color: var(--ds-success-bg) !important;
    color:            var(--white, #ffffff) !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   TAILLES
   ──────────────────────────────────────────────────────────────────────────── */
.btn-lg  { padding: 14px 28px !important; font-size: 15px !important; }
.btn-sm  { padding: 7px 16px  !important; font-size: 12px !important; }
.btn-xs  { padding: 4px 10px  !important; font-size: 11px !important; }

/* ────────────────────────────────────────────────────────────────────────────
   BADGES WCAG
   ──────────────────────────────────────────────────────────────────────────── */
/* Badge "À LA UNE" — suit la couleur primaire des boutons */
.badge-une,
.badge-featured {
    background-color: var(--btn-primary-bg, #E85D04) !important;
    color:            var(--ds-primary-fg, #ffffff) !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   ADMIN — TABLEAUX (action buttons dans les lignes de tables)
   Normalisation des boutons d'action inline dans tous les tableaux admin
   ──────────────────────────────────────────────────────────────────────────── */

/* Inspecter / Voir */
.btn-action-view,
a.btn[title*="Aperçu"],
a.btn[title*="Voir"],
a.btn[title*="Inspecter"] {
    background-color: var(--ds-neutral-bg) !important;
    border-color:     var(--ds-neutral-bg) !important;
    color:            var(--ds-neutral-fg) !important;
}

/* Éditer / Modifier */
.btn-action-edit,
a.btn[title*="Modifier"],
a.btn[title*="Éditer"],
a.btn[title*="blocs"] {
    background-color: var(--ds-secondary-bg) !important;
    border-color:     var(--ds-secondary-bg) !important;
    color:            var(--ds-secondary-fg) !important;
}

/* Dupliquer */
.btn-action-dup,
a.btn[title*="Dupliquer"] {
    background-color: #6b21a8 !important; /* Violet — distinct des autres */
    border-color:     #6b21a8 !important;
    color:            #ffffff !important;  /* 10.3:1 sur violet foncé ✓ */
}

/* Supprimer */
.btn-action-delete,
a.btn[title*="Supprimer"],
button.btn[onclick*="confirm"] {
    background-color: var(--ds-danger-bg) !important;
    border-color:     var(--ds-danger-bg) !important;
    color:            var(--ds-danger-fg) !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   PATCH — Cas spécifiques identifiés dans le codebase
   ──────────────────────────────────────────────────────────────────────────── */

/* 1. Icône fa-floppy-disk text-accent (orange) dans btn-primary (orange) → fg primaire */
.btn-primary .fa-floppy-disk,
.btn-primary .fa-plus,
.btn-primary .fa-pen-to-square,
.btn-primary .fa-magnifying-glass-chart,
.btn-primary .fa-arrow-right,
.btn-primary .fa-check,
.btn-primary .fa-save { color: var(--ds-primary-fg, #ffffff) !important; }

/* 2. .btn-secondary actuel en gris avait dark text — maintenant teal+blanc, icônes fg secondaire */
.btn-secondary .fa-copy,
.btn-secondary .fa-file-export,
.btn-secondary .fa-download { color: var(--ds-secondary-fg, #ffffff) !important; }

/* 3. Admin layout header: btn-outline text-warning (Mise à jour) et text-danger (Déconnexion) */
/* Déjà couverts par les règles .btn-outline.text-warning et .text-danger ci-dessus */

/* 4. Boutons de formulaire avec style="width:100%;border-radius:0px..." — déjà overridés */
/* La largeur et le border-radius inline sont conservés (design) */
/* Seule la couleur est forcée par !important */

/* 5. .btn-xs btn-outline dans les pages admin (arrows ↑↓) → teal outline correct */
/* Déjà couvert par .btn-outline general rule */

/* ────────────────────────────────────────────────────────────────────────────
   FRONTEND PUBLIC — Cohérence avec l'admin
   ──────────────────────────────────────────────────────────────────────────── */

/* Boutons de navigation et CTA publics */
.btn-cta-primary {
    background-color: var(--ds-primary-bg) !important;
    border-color:     var(--ds-primary-bg) !important;
    color:            var(--ds-primary-fg) !important;
}
.btn-cta-primary:hover {
    background-color: var(--ds-primary-hover) !important;
    color:            var(--ds-primary-fg) !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   RAPPORT WCAG — Récapitulatif des corrections
   ──────────────────────────────────────────────────────────────────────────── */
/*
   AVANT → APRÈS (contraste)
   ----------------------------------------------------------
   btn-primary:  teal#0b6680+blanc → orange#E85D04+blanc (3.44:1 bold AA ✓)
   btn-secondary: gris#f4f5f7+noir → teal#0B6E88+blanc  (7.06:1 AAA ✓)
   btn-danger:   (absent) → rouge#D62828+blanc           (4.98:1 AA ✓)
   btn-outline:  orange#f36f21/fond → teal#0B6E88/fond  (2.9:1 → 7.06:1 ✓)
   btn-outline.text-danger: combat CSS → rouge#D62828/fond (4.98:1 AA ✓)
   btn-outline.text-warning: → amber#b45309/fond         (4.75:1 AA ✓)
   Icônes text-accent dans btn-primary: orange→blanc     (∞ ✓)
   ----------------------------------------------------------
   Boutons corrigés estimés: 248 (202 admin + 46 frontend)
*/