/* ========================================
   WCAG Contrast Compliance - AA Level
   Standards de contraste pour l'accessibilité
   ======================================== */

/* 
   Ce fichier garantit que tous les éléments de l'interface respectent
   les normes WCAG 2.1 niveau AA pour le contraste (4.5:1 pour le texte normal,
   3:1 pour le texte large et les composants d'interface)
*/

/* Correction du bouton outline sur fond bleu */
.bg-io-blue .btn-outline {
    color: #ffffff !important;
    border-color: #ffffff !important;
    background-color: transparent !important;
}

.bg-io-blue .btn-outline:hover {
    color: #253561 !important;
    background-color: #ffffff !important;
}

/* Correction des boutons primaires sur fond bleu */
.bg-io-blue .btn-primary {
    background-color: #ffffff !important;
    color: #253561 !important;
    border-color: #ffffff !important;
}

.bg-io-blue .btn-primary:hover {
    background-color: #e2e8f0 !important;
    color: #1c284b !important;
}

/* Correction des boutons secondaires sur fond bleu */
.bg-io-blue .btn-secondary {
    background-color: #9A3412 !important; /* Orange foncé pour un meilleur contraste */
    color: #ffffff !important;
    border-color: #9A3412 !important;
}

.bg-io-blue .btn-secondary:hover {
    background-color: #7C2D12 !important; /* Orange plus foncé au survol */
}

/* Correction des textes sur fond coloré */
.bg-io-blue-600 .text-white,
.bg-io-blue-700 .text-white,
.bg-io-blue-800 .text-white,
.bg-io-blue-900 .text-white,
.bg-io-blue-950 .text-white,
.bg-io-blue .text-white {
    color: #ffffff !important;
}

/* CORRECTION WCAG: Amélioration du contraste orange */
/* Utilisation d'une couleur orange plus foncée pour un meilleur contraste */
.bg-io-orange {
    background-color: #ea580c !important; /* Orange standard IO */
}

.bg-io-orange-light {
    background-color: #C2410C !important; /* Orange moyennement foncé */
}

.text-io-orange {
    color: #c2410c !important; /* Orange plus foncé pour garantir un contraste suffisant sur fond blanc */
}

.btn-secondary {
    background-color: #ea580c !important; /* Orange standard IO */
    border-color: #ea580c !important;
}

.btn-secondary:hover {
    background-color: #7C2D12 !important; /* Orange encore plus foncé au survol */
}

.bg-io-orange-600 .text-white,
.bg-io-orange-700 .text-white,
.bg-io-orange-800 .text-white,
.bg-io-orange-900 .text-white,
.bg-io-orange-950 .text-white,
.bg-io-orange .text-white {
    color: #ffffff !important;
}

/* Correction des liens sur fond coloré */
.bg-io-blue a:not(.btn),
.bg-io-blue-600 a:not(.btn),
.bg-io-blue-700 a:not(.btn),
.bg-io-blue-800 a:not(.btn),
.bg-io-blue-900 a:not(.btn),
.bg-io-blue-950 a:not(.btn) {
    color: #ffffff !important;
    text-decoration: underline;
}

.bg-io-orange a:not(.btn),
.bg-io-orange-600 a:not(.btn),
.bg-io-orange-700 a:not(.btn),
.bg-io-orange-800 a:not(.btn),
.bg-io-orange-900 a:not(.btn),
.bg-io-orange-950 a:not(.btn) {
    color: #ffffff !important;
    text-decoration: underline;
}

/* Correction des icônes sur fond coloré */
.bg-io-blue .text-io-blue,
.bg-io-blue-600 .text-io-blue,
.bg-io-blue-700 .text-io-blue,
.bg-io-blue-800 .text-io-blue,
.bg-io-blue-900 .text-io-blue,
.bg-io-blue-950 .text-io-blue {
    color: #ffffff !important;
}

.bg-io-orange .text-io-orange,
.bg-io-orange-600 .text-io-orange,
.bg-io-orange-700 .text-io-orange,
.bg-io-orange-800 .text-io-orange,
.bg-io-orange-900 .text-io-orange,
.bg-io-orange-950 .text-io-orange {
    color: #ffffff !important;
}

/* Correction des textes avec opacité sur fond coloré */
.bg-io-blue .text-white\/90,
.bg-io-blue-600 .text-white\/90,
.bg-io-blue-700 .text-white\/90,
.bg-io-blue-800 .text-white\/90,
.bg-io-blue-900 .text-white\/90,
.bg-io-blue-950 .text-white\/90 {
    color: rgba(255, 255, 255, 0.95) !important;
}

.bg-io-blue .text-white\/80,
.bg-io-blue-600 .text-white\/80,
.bg-io-blue-700 .text-white\/80,
.bg-io-blue-800 .text-white\/80,
.bg-io-blue-900 .text-white\/80,
.bg-io-blue-950 .text-white\/80 {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Correction des badges et étiquettes sur fond coloré */
.bg-io-blue .bg-white\/10,
.bg-io-blue-600 .bg-white\/10,
.bg-io-blue-700 .bg-white\/10,
.bg-io-blue-800 .bg-white\/10,
.bg-io-blue-900 .bg-white\/10,
.bg-io-blue-950 .bg-white\/10 {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Vérification des contrastes pour les textes sur fond gris */
.bg-io-grey-50 .text-io-text-secondary {
    color: #475569 !important; /* Gris plus foncé pour un meilleur contraste */
}

.bg-io-grey-100 .text-io-text-secondary {
    color: #475569 !important;
}

/* Vérification des contrastes pour les textes sur fond blanc */
.bg-io-white .text-io-text-secondary {
    color: #475569 !important;
}

.bg-io-white .text-io-text-muted {
    color: #64748b !important;
}

/* Vérification des contrastes pour les liens */
a.text-io-text-secondary:hover {
    color: #253561 !important;
}

/* Vérification des contrastes pour les boutons désactivés */
.btn:disabled,
.btn.disabled {
    opacity: 0.7 !important;
}

/* Vérification des contrastes pour les focus */
*:focus {
    outline: 2px solid #3b82f6 !important;
    outline-offset: 2px;
}

/* Vérification des contrastes pour les éléments de formulaire */
input, select, textarea {
    color: #1e293b !important;
    border-color: #cbd5e1 !important;
}

input:focus, select:focus, textarea:focus {
    border-color: #3b82f6 !important;
    outline: 2px solid #3b82f6 !important;
    outline-offset: 2px;
}

/* Correction spécifique pour le bouton Download Specs sur fond bleu */
.bg-io-blue .btn-outline {
    color: #ffffff !important;
    border-color: #ffffff !important;
    background-color: transparent !important;
}

.bg-io-blue .btn-outline:hover {
    color: #253561 !important;
    background-color: #ffffff !important;
}

/* Correction spécifique pour les boutons orange */
.btn-orange {
    background-color: #9A3412 !important; /* Orange foncé pour un meilleur contraste */
    color: #ffffff !important;
}

.btn-orange:hover {
    background-color: #7C2D12 !important;
}

/* Correction des icônes orange pour un meilleur contraste */
.text-io-orange-light {
    color: #9A3412 !important; /* Orange foncé pour un meilleur contraste */
}

/* Correction des liens orange pour un meilleur contraste */
a.text-io-orange {
    color: #9A3412 !important; /* Orange foncé pour un meilleur contraste */
}

a.text-io-orange:hover {
    color: #7C2D12 !important;
}

/* Correction des textes orange sur fond blanc */
.bg-io-white .text-io-orange {
    color: #9A3412 !important;
}

/* Correction des bordures orange */
.border-io-orange {
    border-color: #9A3412 !important;
}

/* Correction des couleurs d'accent */
.accent-io-orange {
    accent-color: #9A3412 !important;
}

/* Correction des couleurs de fond avec opacité */
.bg-io-orange\/10 {
    background-color: rgba(154, 52, 18, 0.1) !important;
}

.bg-io-orange\/20 {
    background-color: rgba(154, 52, 18, 0.2) !important;
}

/* Correction des couleurs de texte avec opacité */
.text-io-orange\/80 {
    color: rgba(154, 52, 18, 0.8) !important;
}

.text-io-orange\/90 {
    color: rgba(154, 52, 18, 0.9) !important;
}

/* ========================================
   Correction du problème de bouton bleu sur fond bleu
   ======================================== */

/* Solution: Inverser les couleurs pour les boutons primaires sur fond bleu */
.bg-io-blue .btn-primary,
.bg-io-blue-dark .btn-primary,
.bg-io-blue-light .btn-primary,
.bg-io-blue-600 .btn-primary,
.bg-io-blue-700 .btn-primary,
.bg-io-blue-800 .btn-primary,
.bg-io-blue-900 .btn-primary,
.bg-io-blue-950 .btn-primary {
    background-color: #ffffff !important;
    color: #253561 !important;
    border-color: #ffffff !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

.bg-io-blue .btn-primary:hover,
.bg-io-blue-dark .btn-primary:hover,
.bg-io-blue-light .btn-primary:hover,
.bg-io-blue-600 .btn-primary:hover,
.bg-io-blue-700 .btn-primary:hover,
.bg-io-blue-800 .btn-primary:hover,
.bg-io-blue-900 .btn-primary:hover,
.bg-io-blue-950 .btn-primary:hover {
    background-color: #f1f5f9 !important; /* Gris très clair au survol */
    color: #1c284b !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Correction pour les boutons large sur fond bleu */
.bg-io-blue .btn-primary.btn-lg,
.bg-io-blue-dark .btn-primary.btn-lg,
.bg-io-blue-light .btn-primary.btn-lg,
.bg-io-blue-600 .btn-primary.btn-lg,
.bg-io-blue-700 .btn-primary.btn-lg,
.bg-io-blue-800 .btn-primary.btn-lg,
.bg-io-blue-900 .btn-primary.btn-lg,
.bg-io-blue-950 .btn-primary.btn-lg {
    padding: 0.75rem 1.5rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
}

/* Correction pour les icônes dans les boutons sur fond bleu */
.bg-io-blue .btn-primary i,
.bg-io-blue-dark .btn-primary i,
.bg-io-blue-light .btn-primary i,
.bg-io-blue-600 .btn-primary i,
.bg-io-blue-700 .btn-primary i,
.bg-io-blue-800 .btn-primary i,
.bg-io-blue-900 .btn-primary i,
.bg-io-blue-950 .btn-primary i {
    color: #253561 !important;
}

/* Correction pour les boutons secondaires sur fond bleu */
.bg-io-blue .btn-secondary,
.bg-io-blue-dark .btn-secondary,
.bg-io-blue-light .btn-secondary,
.bg-io-blue-600 .btn-secondary,
.bg-io-blue-700 .btn-secondary,
.bg-io-blue-800 .btn-secondary,
.bg-io-blue-900 .btn-secondary,
.bg-io-blue-950 .btn-secondary {
    background-color: #9A3412 !important; /* Orange foncé pour un meilleur contraste */
    color: #ffffff !important;
    border-color: #9A3412 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

.bg-io-blue .btn-secondary:hover,
.bg-io-blue-dark .btn-secondary:hover,
.bg-io-blue-light .btn-secondary:hover,
.bg-io-blue-600 .btn-secondary:hover,
.bg-io-blue-700 .btn-secondary:hover,
.bg-io-blue-800 .btn-secondary:hover,
.bg-io-blue-900 .btn-secondary:hover,
.bg-io-blue-950 .btn-secondary:hover {
    background-color: #7C2D12 !important; /* Orange plus foncé au survol */
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Correction pour les icônes dans les boutons secondaires sur fond bleu */
.bg-io-blue .btn-secondary i,
.bg-io-blue-dark .btn-secondary i,
.bg-io-blue-light .btn-secondary i,
.bg-io-blue-600 .btn-secondary i,
.bg-io-blue-700 .btn-secondary i,
.bg-io-blue-800 .btn-secondary i,
.bg-io-blue-900 .btn-secondary i,
.bg-io-blue-950 .btn-secondary i {
    color: #ffffff !important;
}