/* =========================================
   CORPORATE THEME — PALETTE
   Variables CSS définies AU TOP pour éviter les "blanc sur blanc"
   (utilisées dans tout le main.css ET dans les sections templates).
   Couleurs alignées sur la palette brand NAMES LEGAL.
   ========================================= */
:root {
    /* Couleurs principales */
    --corporate-primary: #337e16;          /* vert brand */
    --corporate-primary-rgb: 51, 126, 22;
    --corporate-secondary: #709eae;        /* bleu-gris brand */
    --corporate-accent: #132a31;           /* sombre brand */
    --corporate-dark: #132a31;
    --corporate-success: #198754;
    --corporate-info: #709eae;
    --corporate-warning: #fbbf24;
    --corporate-danger: #dc3545;

    /* Échelle de gris (Bootstrap-compatible) */
    --corporate-gray-50:  #f9fafb;
    --corporate-gray-100: #f8f9fa;
    --corporate-gray-200: #e9ecef;
    --corporate-gray-300: #dee2e6;
    --corporate-gray-400: #ced4da;
    --corporate-gray-600: #6c757d;
    --corporate-gray-700: #495057;
    --corporate-gray-800: #343a40;

    /* Typo */
    --corporate-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --corporate-font-weight-light: 300;
    --corporate-font-weight-medium: 500;
    --corporate-font-weight-semibold: 600;

    /* Layout */
    --corporate-border-radius: 0.5rem;
    --corporate-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --corporate-shadow:    0 4px 12px rgba(0, 0, 0, 0.08);
    --corporate-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
    --corporate-transition: all 0.3s ease;

    /* Bootstrap : couleur primaire = vert de marque.
       Sans ça, .text-primary / .bg-primary / .btn-primary gardent le bleu
       Bootstrap par défaut (#0d6efd) -> hors charte + icônes bleues peu
       lisibles sur les tuiles .bg-primary.bg-opacity-10. */
    --bs-primary: #337e16;
    --bs-primary-rgb: 51, 126, 22;
    --bs-link-color: #337e16;
    --bs-link-color-rgb: 51, 126, 22;
    --bs-link-hover-color: #132a31;

    /* Bootstrap : couleur info = bleu-gris de marque.
       --corporate-info existait déjà (#709eae) mais n'était JAMAIS mappé sur
       --bs-info : les 10 .bg-info et 15 .text-info du thème rendaient donc le
       cyan Bootstrap #0dcaf0 — hors charte, et illisible (ratio 1.96 sur blanc).

       On n'utilise PAS #709eae tel quel : il ne vaut que 2.92 sur blanc, sous le
       seuil AA de 4.5. C'est la même teinte assombrie (hue ~200° vs ~196°), qui
       passe à 5.13 en texte sur blanc ET en blanc sur pastille pleine. */
    --bs-info: #4a7387;
    --bs-info-rgb: 74, 115, 135;
}

/* =========================================
   CORPORATE THEME - LANGUAGE SELECTOR
   Professional Language Switching Component
   ========================================= */

/* =========================================
   LANGUAGE BAR CONTAINER
   ========================================= */
.language-bar {
    background: var(--corporate-gray-50);
    border-bottom: 1px solid var(--corporate-gray-200);
    padding: 8px 0;
    font-size: 0.875rem;
    position: relative;
    z-index: 1010;
    transition: var(--corporate-transition);
}

.language-bar:hover {
    background: var(--corporate-gray-100);
}

/* =========================================
     LANGUAGE SELECTOR COMPONENT
     ========================================= */
.language-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 32px;
}

.language-selector form {
    display: flex;
    align-items: center;
    margin: 0;
    gap: 8px;
}

/* =========================================
     LANGUAGE LINKS & BUTTONS
     ========================================= */
.active-language {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: var(--corporate-primary);
    color: white;
    text-decoration: none;
    border-radius: var(--corporate-border-radius);
    font-weight: var(--corporate-font-weight-medium);
    font-size: 0.875rem;
    line-height: 1;
    transition: var(--corporate-transition);
    cursor: default;
    box-shadow: var(--corporate-shadow-sm);
}

.active-language:hover {
    background: var(--corporate-accent);
    color: white;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--corporate-shadow);
}

.language-link {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: transparent;
    color: var(--corporate-gray-600);
    border: 1px solid var(--corporate-gray-300);
    border-radius: var(--corporate-border-radius);
    font-weight: var(--corporate-font-weight-medium);
    font-size: 0.875rem;
    line-height: 1;
    cursor: pointer;
    transition: var(--corporate-transition);
    text-decoration: none;
    font-family: var(--corporate-font-family);
}

.language-link:hover {
    background: var(--corporate-primary);
    color: white;
    border-color: var(--corporate-primary);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--corporate-shadow-sm);
}

.language-link:focus {
    outline: 2px solid var(--corporate-primary);
    outline-offset: 2px;
    background: var(--corporate-primary);
    color: white;
    border-color: var(--corporate-primary);
}

.language-link:active {
    transform: translateY(0);
    box-shadow: none;
}

/* =========================================
     LANGUAGE SEPARATOR
     ========================================= */
.language-separator {
    color: var(--corporate-gray-400);
    margin: 0 4px;
    font-weight: var(--corporate-font-weight-light);
    user-select: none;
}

/* =========================================
     NAVIGATION ICONS (for preview mode)
     ========================================= */
.nav-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0 4px;
    background: transparent;
    color: var(--corporate-gray-600);
    border: 1px solid var(--corporate-gray-300);
    border-radius: var(--corporate-border-radius);
    text-decoration: none;
    transition: var(--corporate-transition);
    font-size: 0.875rem;
}

.nav-icon-btn:hover {
    background: var(--corporate-primary);
    color: white;
    border-color: var(--corporate-primary);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--corporate-shadow-sm);
}

.nav-icon-btn:focus {
    outline: 2px solid var(--corporate-primary);
    outline-offset: 2px;
}

.nav-icon-btn i {
    font-size: 14px;
}

/* =========================================
     DROPDOWN LANGUAGE SELECTOR (Alternative)
     ========================================= */
.language-dropdown {
    position: relative;
    display: inline-block;
}

.language-dropdown-toggle {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: white;
    color: var(--corporate-gray-800);
    border: 1px solid var(--corporate-gray-300);
    border-radius: var(--corporate-border-radius);
    cursor: pointer;
    transition: var(--corporate-transition);
    text-decoration: none;
    font-weight: var(--corporate-font-weight-medium);
    font-size: 0.875rem;
    gap: 8px;
}

.language-dropdown-toggle:hover {
    background: var(--corporate-gray-50);
    border-color: var(--corporate-primary);
    color: var(--corporate-primary);
    text-decoration: none;
}

.language-dropdown-toggle::after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 4px 0 4px;
    border-color: currentColor transparent transparent transparent;
    margin-left: 4px;
    transition: var(--corporate-transition);
}

.language-dropdown.show .language-dropdown-toggle::after {
    transform: rotate(180deg);
}

.language-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--corporate-gray-300);
    border-radius: var(--corporate-border-radius);
    box-shadow: var(--corporate-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: var(--corporate-transition);
    z-index: 1000;
    min-width: 120px;
    margin-top: 4px;
}

.language-dropdown.show .language-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.language-dropdown-item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    color: var(--corporate-gray-800);
    text-decoration: none;
    cursor: pointer;
    transition: var(--corporate-transition);
    font-size: 0.875rem;
    text-align: left;
}

.language-dropdown-item:hover {
    background: var(--corporate-primary);
    color: white;
    text-decoration: none;
}

.language-dropdown-item.active {
    background: var(--corporate-gray-100);
    color: var(--corporate-primary);
    font-weight: var(--corporate-font-weight-semibold);
}

.language-dropdown-item:first-child {
    border-radius: var(--corporate-border-radius) var(--corporate-border-radius) 0 0;
}

.language-dropdown-item:last-child {
    border-radius: 0 0 var(--corporate-border-radius) var(--corporate-border-radius);
}

/* =========================================
     FLAG ICONS SUPPORT
     ========================================= */
.language-flag {
    width: 16px;
    height: 12px;
    border-radius: 2px;
    margin-right: 6px;
    display: inline-block;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.language-flag.flag-en {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxNiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjEyIiBmaWxsPSIjMDEyNjc0Ii8+CjxwYXRoIGQ9Ik0wIDIuMjVIMTZWMy43NUgwVjIuMjVaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNMCA4LjI1SDE2VjkuNzVIMFY4LjI1WiIgZmlsbD0id2hpdGUiLz4KICA8L3N2Zz4=');
}

.language-flag.flag-fr {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxNiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjUuMzMiIGhlaWdodD0iMTIiIGZpbGw9IiMwMTI2NzQiLz4KPHJlY3QgeD0iNS4zMyIgd2lkdGg9IjUuMzQiIGhlaWdodD0iMTIiIGZpbGw9IndoaXRlIi8+CjxyZWN0IHg9IjEwLjY3IiB3aWR0aD0iNS4zMyIgaGVpZ2h0PSIxMiIgZmlsbD0iI0VGMUEyQSIvPgo8L3N2Zz4=');
}

.language-flag.flag-es {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxNiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjMiIGZpbGw9IiNGRkNEMDAiLz4KPHJlY3QgeT0iMyIgd2lkdGg9IjE2IiBoZWlnaHQ9IjYiIGZpbGw9IiNFRjFBMkEiLz4KPHJlY3QgeT0iOSIgd2lkdGg9IjE2IiBoZWlnaHQ9IjMiIGZpbGw9IiNGRkNEMDAiLz4KPC9zdmc+');
}

.language-flag.flag-de {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxNiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjQiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHk9IjQiIHdpZHRoPSIxNiIgaGVpZ2h0PSI0IiBmaWxsPSIjRkZDRDAwIi8+CjxyZWN0IHk9IjgiIHdpZHRoPSIxNiIgaGVpZ2h0PSI0IiBmaWxsPSIjRUYxQTJBIi8+Cjwvc3ZnPg==');
}

/* =========================================
     RESPONSIVE DESIGN
     ========================================= */

/* Mobile devices (max-width: 576px) */
@media (max-width: 575.98px) {
    .language-bar {
        padding: 6px 0;
        font-size: 0.8125rem;
    }

    .language-selector {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .language-selector form {
        justify-content: center;
        flex-wrap: wrap;
    }

    .active-language,
    .language-link {
        padding: 8px 12px;
        font-size: 0.8125rem;
        min-width: 44px;
        /* Touch-friendly minimum */
        text-align: center;
    }

    .nav-icon-btn {
        min-width: 44px;
        height: 36px;
    }

    /* Hide separator on mobile */
    .language-separator {
        display: none;
    }
}

/* Tablet devices (576px to 767.98px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .language-selector {
        justify-content: center;
    }

    .language-selector form {
        justify-content: center;
    }
}

/* Desktop devices (768px and up) */
@media (min-width: 768px) {
    .language-bar {
        padding: 10px 0;
    }

    .language-selector {
        align-items: center;
    }

    .active-language,
    .language-link {
        font-size: 0.875rem;
    }
}

/* =========================================
     ACCESSIBILITY IMPROVEMENTS
     ========================================= */

/* Focus indicators for keyboard navigation */
.language-link:focus,
.active-language:focus,
.nav-icon-btn:focus {
    outline: 2px solid var(--corporate-primary);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .language-bar {
        border-bottom-width: 2px;
    }

    .active-language,
    .language-link,
    .nav-icon-btn {
        border-width: 2px;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {

    .active-language,
    .language-link,
    .nav-icon-btn,
    .language-dropdown-toggle,
    .language-dropdown-menu,
    .language-dropdown-item {
        transition: none;
    }

    .active-language:hover,
    .language-link:hover,
    .nav-icon-btn:hover {
        transform: none;
    }
}

/* =========================================
     DARK THEME SUPPORT
     ========================================= */
.theme-dark .language-bar {
    background: var(--corporate-gray-800);
    border-bottom-color: var(--corporate-gray-700);
    color: var(--corporate-gray-200);
}

.theme-dark .language-link {
    background: transparent;
    color: var(--corporate-gray-400);
    border-color: var(--corporate-gray-600);
}

.theme-dark .language-link:hover {
    background: var(--corporate-primary);
    color: white;
    border-color: var(--corporate-primary);
}

.theme-dark .nav-icon-btn {
    color: var(--corporate-gray-400);
    border-color: var(--corporate-gray-600);
}

.theme-dark .nav-icon-btn:hover {
    background: var(--corporate-primary);
    color: white;
    border-color: var(--corporate-primary);
}

.theme-dark .language-dropdown-toggle {
    background: var(--corporate-gray-700);
    color: var(--corporate-gray-200);
    border-color: var(--corporate-gray-600);
}

.theme-dark .language-dropdown-toggle:hover {
    background: var(--corporate-gray-600);
    border-color: var(--corporate-primary);
    color: var(--corporate-primary);
}

.theme-dark .language-dropdown-menu {
    background: var(--corporate-gray-700);
    border-color: var(--corporate-gray-600);
}

.theme-dark .language-dropdown-item {
    color: var(--corporate-gray-200);
}

.theme-dark .language-dropdown-item:hover {
    background: var(--corporate-primary);
    color: white;
}

.theme-dark .language-dropdown-item.active {
    background: var(--corporate-gray-600);
    color: var(--corporate-accent);
}

/* =========================================
     ANIMATION ENHANCEMENTS
     ========================================= */

/* Subtle entrance animation */
.language-bar {
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Language switch animation */
.language-selector form {
    animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Stagger animation for language buttons */
.language-link:nth-child(1) {
    animation-delay: 0.1s;
}

.language-link:nth-child(2) {
    animation-delay: 0.2s;
}

.language-link:nth-child(3) {
    animation-delay: 0.3s;
}

.language-link:nth-child(4) {
    animation-delay: 0.4s;
}

/* =========================================
     PERFORMANCE OPTIMIZATIONS
     ========================================= */

/* GPU acceleration for smooth hover effects */
.active-language,
.language-link,
.nav-icon-btn {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Optimize repaints */
.language-dropdown-menu {
    will-change: opacity, transform;
    contain: layout style paint;
}

/* =========================================
     FOOTER (corporate)
     ========================================= */
.corporate-footer {
    background: var(--corporate-gray-900, #132a31);
    color: rgba(255, 255, 255, 0.75);
    padding: 4rem 0 2rem;
}

.corporate-footer h4,
.corporate-footer h5 {
    color: #fff;
    margin-bottom: 1rem;
}

.corporate-footer .footer-link {
    color: rgba(255, 255, 255, 0.75) !important;
    text-decoration: none;
    transition: color 0.2s ease;
}

.corporate-footer .footer-link:hover,
.corporate-footer .footer-link:focus {
    color: #fff !important;
}

/* Liens rapides sur 2 colonnes : 9 liens sur une seule colonne faisaient une
   colonne bien plus haute que « Nos services » / « Contact » (déséquilibre).
   Colonne élargie à col-lg-3 côté markup. Repli 1 colonne < md. */
.corporate-footer .footer-links ul {
    columns: 2;
    column-gap: 1.25rem;
}
.corporate-footer .footer-links ul li {
    margin-bottom: 0.4rem;
    break-inside: avoid;
}
@media (max-width: 767.98px) {
    .corporate-footer .footer-links ul { columns: 1; }
}

/* =========================================
     NAVBAR DROPDOWNS (corporate)
     ========================================= */
.navbar .dropdown-menu {
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
    padding: 0.4rem 0;
    margin-top: 0.25rem;
}

.navbar .dropdown-item {
    padding: 0.45rem 1.1rem;
    font-size: 0.95rem;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    background: var(--corporate-gray-100, #f8fafc);
    color: var(--primary-color, #337e16);
}

/* =========================================
     PRINT STYLES
     ========================================= */
@media print {
    .language-bar {
        display: none;
    } }


/* =========================================
     AUDIT CONTRASTE — lisibilité (jour + nuit)
     Corporate n'avait pas de mode nuit de contenu : les sections gardent un fond
     clair posé en inline alors que Bootstrap passe le texte du corps en clair
     -> clair sur clair. Et .text-warning / .text-info (jaune/cyan Bootstrap par
     défaut) sont trop clairs sur les fonds gris/crème du thème.
     On corrige à la racine, SANS toucher aux fonds de marque (bg-primary, dégradé
     bleu des témoignages) ni au jaune des badges .bg-warning.
     ========================================= */

/* ---- Jour + nuit : icônes / chiffres warning & info lisibles ----
   text-warning (#ffc107) et text-info (#0dcaf0) natifs trop clairs sur gris/crème.
   On assombrit UNIQUEMENT la couleur du texte/icône ; .bg-warning reste jaune,
   donc les badges .bg-warning.text-dark restent lisibles. */
.text-warning {
    color: #8a6d00 !important;
}
.text-info {
    color: #076579 !important;
}
/* En nuit, les surfaces sont sombres : l'ambre/teal foncés du jour deviennent
   illisibles -> versions claires réservées au mode nuit. */
[data-bs-theme="dark"] .text-warning {
    color: #e0b100 !important;
}
[data-bs-theme="dark"] .text-info {
    color: #5cbcd0 !important;
}

/* ---- Nuit : surfaces claires -> surface sombre ----
   about / contact / hero posaient leur fond clair en style="background:#f8fafc"
   et cette règle les rattrapait via [style*="f8fafc"] — en ciblant la CHAÎNE de
   caractères de l'inline. Couplage par valeur littérale : retirer l'inline
   (pour rendre ces fonds personnalisables) désarmait silencieusement le mode
   nuit, et les sections repassaient en blanc-sur-blanc.
   Ces fonds sont maintenant portés par des classes, qu'on cible directement.
   Le sélecteur [style*="f8fafc"] est conservé pour les <style> de section qui
   n'ont pas encore été migrés (filtre publications). */
[data-bs-theme="dark"] .corporate-surface-muted,
[data-bs-theme="dark"] .corporate-hero-gradient,
[data-bs-theme="dark"] [style*="f8fafc"] {
    background: var(--bs-body-bg) !important;
}

/* ---- Nuit : sections de contenu à fond blanc (posé en <style>) -> sombre ----
   .services / .publications / .publications-page / .project-detail-page sont
   forcées en `background: white` dans les <style> de section. La spécificité de
   [data-bs-theme] + classe suffit à reprendre la main (pas de !important). */
[data-bs-theme="dark"] .services,
[data-bs-theme="dark"] .publications,
[data-bs-theme="dark"] .publications-page,
[data-bs-theme="dark"] .project-detail-page {
    background: var(--bs-body-bg);
}

/* ---- Nuit : cartes de contenu -> surface sombre distincte ----
   .corporate-card est transparente (héritait donc le blanc du parent) et
   .corporate-visual-container est un cadre blanc. On leur donne une surface
   sombre pour garder l'effet "carte" et rendre le texte clair lisible. */
[data-bs-theme="dark"] .corporate-card,
[data-bs-theme="dark"] .corporate-visual-container {
    background-color: #161c24 !important;
}

/* ---- Nuit : texte épinglé en sombre -> suit la couleur du corps ----
   .text-dark (#212529) restait sombre sur les surfaces devenues sombres.
   Exception : les badges .bg-warning (fond jaune) gardent leur texte sombre. */
[data-bs-theme="dark"] .text-dark:not(.bg-warning) {
    color: var(--bs-body-color) !important;
}

/* ---- Jour + nuit : icônes de contact du footer (fond sombre #132a31) ----
   Elles héritaient de .text-primary (vert) -> trop sombre sur le footer sombre.
   Vert clair de marque, lisible dans les 2 modes (le footer reste sombre). */
.corporate-footer .contact-item i {
    color: #8fd07a !important;
}

/* ---- Jour + nuit : icône sur pastille pleine warning/info ----
   Le blanc passe mal sur le jaune (#ffc107) / cyan (#0dcaf0). Texte sombre,
   comme les badges .bg-warning.text-dark. On épargne les pastilles teintées
   (.bg-*-opacity-*) qui gardent leur icône colorée. */
.bg-warning.rounded-circle:not([class*="opacity"]) > i,
.bg-info.rounded-circle:not([class*="opacity"]) > i {
    color: #212529 !important;
}

/* ---- Nuit : badges .bg-primary-subtle.text-primary ----
   En nuit, -subtle devient sombre (#1a3d10) mais .text-primary reste le vert
   plein -> peu lisible. Vert clair (équivalent -text-emphasis). */
[data-bs-theme="dark"] .bg-primary-subtle.text-primary,
[data-bs-theme="dark"] .bg-primary-subtle .text-primary {
    color: #86cf70 !important;
}

/* ---- Jour : boutons de langue (btn-outline-secondary) sur la barre claire ----
   Le gris par défaut est trop clair sur #f8f9fa. Texte plus sombre.
   En nuit, dark-mode.css (chargé après) reprend la main pour la barre sombre. */
.language-bar .btn-outline-secondary {
    --bs-btn-color: #495057;
    --bs-btn-border-color: #ced4da;
    --bs-btn-hover-color: #ffffff;
}

/* ---- Nuit : barre de langue (fond clair posé en inline) -> sombre ---- */
[data-bs-theme="dark"] .language-bar {
    background: #0f1419 !important;
    border-bottom-color: #2a3340 !important;
}



/* =========================================
   FONDS DE SECTION SOMBRES (témoignages, héros publications)

   Remplace un `style="background: linear-gradient(135deg, #1e40af, #0ea5e9)"`
   inline, hors charte (bleu roi -> bleu ciel) et non surchargeable : un style
   inline bat le CSS du thème, les overrides et le bloc de personnalisation du
   tenant, y compris avec !important.

   Ce bleu échouait aussi au contraste : ces sections posent du texte BLANC, or
   blanc sur #0ea5e9 = ratio 2.77 alors que WCAG AA exige 4.5. L'audit de
   contraste ne l'avait jamais vu car il ignore les fonds en dégradé.

   Le dégradé de marque passe : blanc sur --corporate-accent (#132a31) = 14.97,
   sur --corporate-primary (#337e16) = 5.08.
   ========================================= */
.corporate-dark-gradient {
    background: linear-gradient(135deg,
                var(--corporate-accent) 0%,
                var(--corporate-primary) 100%);
    position: relative;
    overflow: hidden;
}

/* =========================================
   SURFACES DE SECTION — pilotées par les tokens

   Remplacent des `style="background: #f8fafc"` et un
   `linear-gradient(135deg, #f8fafc, #e2e8f0)` inline (about, contact, hero).
   Ce n'était pas un bug d'affichage — dark-mode.css neutralise déjà ces fonds
   en mode nuit — mais un inline bat la personnalisation du tenant : ces sections
   ne suivaient pas son fond choisi. Passer par les tokens le permet.
   ========================================= */
.corporate-surface-muted {
    background: var(--corporate-gray-50);
}

.corporate-hero-gradient {
    background: linear-gradient(135deg,
                var(--corporate-gray-50) 0%,
                var(--corporate-gray-200) 100%);
}