/* 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: 'Onest', 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;
    z-index: 1;
}

.site-language-picker-shell:has(.site-language-picker-menu.is-open) {
    z-index: 500;
}

.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;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.site-language-picker-trigger:active {
    transform: translateY(1px) scale(0.975);
}

.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 vingt et une 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;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.12s ease, background-color 0.12s ease, transform 0.12s ease;
}

.site-language-picker-option:active {
    transform: scale(0.985);
}

.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);
    }
}

/* Le bouton et les options sont des <button> : certaines pages ont une règle
   `button { ... }` globale (fond dégradé, ombre, marge, largeur…), par
   exemple la page de connexion. On remet ici à zéro tout ce qu'une page peut
   imposer, avec une spécificité plus forte, pour que le sélecteur soit le même
   partout. */
.site-language-picker .site-language-picker-trigger,
.site-language-picker .site-language-picker-option {
    margin: 0;
    box-sizing: border-box;
    line-height: 1.25;
    letter-spacing: normal;
    text-transform: none;
    text-shadow: none;
    box-shadow: none;
    filter: none;
    opacity: 1;
}

.site-language-picker .site-language-picker-trigger {
    width: auto;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.site-language-picker .site-language-picker-option,
.site-language-picker .site-language-picker-option:hover {
    width: 100%;
    min-height: 0;
    transform: none;
    box-shadow: none;
}

.site-language-picker .site-language-picker-option:active {
    transform: scale(0.985);
}

@media (prefers-reduced-motion: reduce) {
    .site-language-picker-trigger,
    .site-language-picker-option,
    .site-language-picker-chevron {
        transition: none;
    }

    .site-language-picker-trigger:active,
    .site-language-picker .site-language-picker-option:active {
        transform: none;
    }
}