/**
 * ============================================================
 * PERMIS EXPRESS EU
 * Fichier : assets/css/language-switcher.css
 *
 * SÉLECTEUR MULTILINGUE PREMIUM
 *
 * - Français / Anglais / Néerlandais / Allemand
 * - Design bleu marine et doré
 * - Compatible Polylang
 * - Compatible avec le header personnalisé
 * - Responsive ordinateur / tablette / mobile
 * - Accessibilité clavier
 * - Animations discrètes
 * ============================================================
 */


/* ============================================================
   1. VARIABLES
============================================================ */

.permis-language-switcher {

    --lang-navy: #14283f;
    --lang-gold: #b99558;
    --lang-white: #ffffff;
    --lang-border: #e1e5eb;
    --lang-muted: #667588;
    --lang-hover: #f5f7fa;
    --lang-gold-light: #faf5ec;

    position: relative;

    display: inline-flex;
    align-items: center;

    flex-shrink: 0;

    font-family: 'Poppins', sans-serif;

    z-index: 100;
}


/* ============================================================
   2. BOUTON PRINCIPAL
============================================================ */

.permis-language-trigger {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 43px;

    padding: 9px 14px;

    border: 1px solid var(--lang-border);
    border-radius: 11px;

    background: var(--lang-white);

    color: var(--lang-navy);

    font-family: inherit;
    font-size: 12px;
    font-weight: 600;

    line-height: 1;

    white-space: nowrap;

    cursor: pointer;

    box-shadow: 0 2px 8px rgba(20, 40, 63, 0.035);

    transition:
        background-color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}


/* Survol */

.permis-language-trigger:hover {

    background: var(--lang-hover);

    border-color: var(--lang-gold);

    box-shadow: 0 5px 16px rgba(20, 40, 63, 0.08);
}


/* Menu ouvert */

.permis-language-trigger[aria-expanded="true"] {

    background: var(--lang-white);

    border-color: var(--lang-gold);

    box-shadow: 0 0 0 3px rgba(185, 149, 88, 0.10);
}


/* Focus clavier */

.permis-language-trigger:focus-visible {

    outline: 2px solid var(--lang-gold);

    outline-offset: 3px;
}


/* ============================================================
   3. DRAPEAU
============================================================ */

.permis-language-flag {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 18px;

    line-height: 1;

    flex-shrink: 0;
}


/* ============================================================
   4. CODE DE LANGUE
============================================================ */

.permis-language-code {

    color: var(--lang-navy);

    font-size: 12px;
    font-weight: 700;

    letter-spacing: .6px;
}


/* ============================================================
   5. FLÈCHE
============================================================ */

.permis-language-trigger .fa-chevron-down {

    color: var(--lang-gold);

    font-size: 10px;

    margin-left: 2px;

    transition: transform .22s ease;
}


/* Rotation à l'ouverture */

.permis-language-trigger[aria-expanded="true"]
.fa-chevron-down {

    transform: rotate(180deg);
}


/* ============================================================
   6. MENU DÉROULANT
============================================================ */

.permis-language-dropdown {

    position: absolute;

    top: calc(100% + 10px);
    right: 0;

    width: 215px;
    max-width: calc(100vw - 24px);

    margin: 0;
    padding: 8px;

    list-style: none;

    background: var(--lang-white);

    border: 1px solid rgba(20, 40, 63, 0.09);

    border-radius: 14px;

    box-shadow:
        0 18px 45px rgba(20, 40, 63, 0.13),
        0 4px 12px rgba(20, 40, 63, 0.04);

    z-index: 9999;

    animation: permisLanguageFade .18s ease both;
}


/* Important : le menu fermé reste invisible */

.permis-language-dropdown[hidden] {

    display: none !important;
}


/* ============================================================
   7. ANIMATION D'APPARITION
============================================================ */

@keyframes permisLanguageFade {

    from {

        opacity: 0;

        transform: translateY(-6px);
    }

    to {

        opacity: 1;

        transform: translateY(0);
    }
}


/* ============================================================
   8. ÉLÉMENTS DE LISTE
============================================================ */

.permis-language-dropdown li {

    margin: 0;
    padding: 0;

    list-style: none;
}


/* ============================================================
   9. LIENS DES LANGUES
============================================================ */

.permis-language-dropdown a {

    display: flex;
    align-items: center;

    gap: 12px;

    min-height: 43px;

    padding: 11px 13px;

    border-radius: 9px;

    color: var(--lang-navy);

    font-family: inherit;
    font-size: 12px;
    font-weight: 500;

    line-height: 1.4;

    text-decoration: none;

    white-space: nowrap;

    transition:
        background-color .18s ease,
        color .18s ease;
}


/* Survol */

.permis-language-dropdown a:hover {

    background: var(--lang-hover);

    color: var(--lang-navy);
}


/* Focus clavier */

.permis-language-dropdown a:focus-visible {

    background: var(--lang-hover);

    outline: 2px solid var(--lang-gold);

    outline-offset: -2px;
}


/* ============================================================
   10. DRAPEAUX DES OPTIONS
============================================================ */

.permis-language-option-flag {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    font-size: 19px;

    line-height: 1;
}


/* ============================================================
   11. NOMS DES LANGUES
============================================================ */

.permis-language-option-name {

    flex: 1;

    min-width: 0;

    font-weight: inherit;
}


/* ============================================================
   12. LANGUE ACTIVE
============================================================ */

.permis-language-dropdown a.is-current {

    background: var(--lang-gold-light);

    color: var(--lang-navy);

    font-weight: 700;
}


/* Bordure dorée subtile */

.permis-language-dropdown a.is-current:hover {

    background: #f5ecdc;
}


/* Icône de validation */

.permis-language-dropdown a .fa-check {

    margin-left: auto;

    color: var(--lang-gold);

    font-size: 12px;
}


/* ============================================================
   13. ÉTAT OUVERT
============================================================ */

.permis-language-switcher.is-open {

    z-index: 1000;
}


/* ============================================================
   14. COMPATIBILITÉ HEADER
============================================================ */

/*
 * Permet au sélecteur de conserver
 * sa largeur naturelle dans les actions du header.
 */

.header-actions .permis-language-switcher,
.header-container .permis-language-switcher {

    flex-shrink: 0;
}


/* ============================================================
   15. TABLETTES
============================================================ */

@media (max-width: 992px) {

    .permis-language-switcher {

        z-index: 100;
    }

    .permis-language-trigger {

        min-height: 41px;

        padding: 9px 12px;
    }

    .permis-language-dropdown {

        width: 205px;
    }

}


/* ============================================================
   16. MOBILES
============================================================ */

@media (max-width: 576px) {

    .permis-language-trigger {

        min-height: 40px;

        gap: 7px;

        padding: 8px 11px;

        border-radius: 9px;
    }

    .permis-language-flag {

        font-size: 17px;
    }

    .permis-language-code {

        font-size: 11px;
    }

    .permis-language-trigger .fa-chevron-down {

        font-size: 9px;
    }

    .permis-language-dropdown {

        width: 195px;

        padding: 7px;

        border-radius: 12px;
    }

    .permis-language-dropdown a {

        min-height: 42px;

        padding: 10px 11px;

        font-size: 12px;
    }

}


/* ============================================================
   17. TRÈS PETITS ÉCRANS
============================================================ */

@media (max-width: 360px) {

    .permis-language-trigger {

        gap: 5px;

        padding: 8px 9px;
    }

    .permis-language-dropdown {

        width: 185px;
    }

}


/* ============================================================
   18. ACCESSIBILITÉ : ANIMATIONS RÉDUITES
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .permis-language-trigger,
    .permis-language-dropdown,
    .permis-language-dropdown a,
    .permis-language-trigger .fa-chevron-down {

        animation: none !important;

        transition: none !important;
    }

}