/* Selecteur de langue partage par toutes les pages web (desktop). Couleurs et
   tailles codees en dur (pas de var() du theme hote) pour garantir un rendu
   strictement identique quelle que soit la page qui l'utilise. Genere/pilote
   par frontend/js/language-picker.ts, qui l'attache a tout <select> portant
   la classe .site-language-select. */

.site-language-picker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.75rem;
    font-weight: 800;
    font-family: Inter, system-ui, sans-serif;
}

.site-language-picker-caption {
    color: rgba(255, 255, 255, 0.48);
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.site-language-picker-shell {
    position: relative;
}

.site-language-picker-trigger {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 148px;
    min-height: 42px;
    padding: 8px 12px;
    color: #f4f2f4;
    font: inherit;
    font-size: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.site-language-picker-trigger:hover,
.site-language-picker-trigger[aria-expanded="true"] {
    transform: translateY(-1px);
    border-color: rgba(255, 57, 69, 0.55);
    background: rgba(255, 57, 69, 0.1);
}

.site-language-picker-trigger:focus-visible {
    outline: 2px solid rgba(255, 57, 69, 0.6);
    outline-offset: 2px;
}

.site-language-picker-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    fill: none;
    stroke: #ff3945;
    stroke-width: 1.7;
}

.site-language-picker-value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.site-language-picker-chevron {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-right: 2px solid rgba(255, 255, 255, 0.65);
    border-bottom: 2px solid rgba(255, 255, 255, 0.65);
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.16s ease;
}

.site-language-picker-trigger[aria-expanded="true"] .site-language-picker-chevron {
    transform: rotate(225deg) translate(-1px, -1px);
}

.site-language-picker-menu {
    position: absolute;
    z-index: 400;
    top: calc(100% + 8px);
    right: 0;
    display: none;
    min-width: 190px;
    padding: 7px;
    border: 1px solid rgba(255, 57, 69, 0.3);
    border-radius: 16px;
    background: #151519;
    box-shadow: 0 22px 52px rgba(0, 0, 0, 0.5);
    /* La liste compte quinze langues : sans plafond elle depassait le bas de la
       fenetre et les dernieres entrees devenaient incliquables. */
    max-height: min(340px, 60vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

/* Ouverture vers le haut quand il n'y a pas la place en dessous du bouton. */
.site-language-picker-menu.opens-above {
    top: auto;
    bottom: calc(100% + 8px);
}

.site-language-picker-menu::-webkit-scrollbar {
    width: 8px;
}

.site-language-picker-menu::-webkit-scrollbar-track {
    background: transparent;
}

.site-language-picker-menu::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
}

.site-language-picker-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.32);
}

.site-language-picker-menu.is-open {
    display: grid;
    gap: 2px;
}

.site-language-picker-option {
    width: 100%;
    padding: 9px 11px;
    color: rgba(255, 255, 255, 0.78);
    text-align: left;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    border: 0;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
}

.site-language-picker-option:hover,
.site-language-picker-option:focus-visible {
    color: #fff;
    background: rgba(255, 57, 69, 0.15);
    outline: none;
}

.site-language-picker-option.is-selected {
    color: #fff;
    background: linear-gradient(135deg, #ff3945, #b71828);
}

/* Le <select> natif reste dans le DOM (accessibilite, formulaires, lecteurs
   d'ecran) mais visuellement masque : le bouton+menu ci-dessus le remplacent. */
.site-language-select {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 560px) {
    .site-language-picker {
        width: 100%;
        justify-content: space-between;
    }

    .site-language-picker-shell,
    .site-language-picker-trigger {
        width: min(100%, 220px);
    }
}