/* ============================================================
   Liste déroulante de pays avec drapeau (assets/js/pays.js).
   Chargée par le back-office ET par les pages publiques, qui n'ont
   pas gls.css : les couleurs passent donc par des variables avec
   valeurs de repli, qu'un template public peut redéfinir.

   Le bouton n'impose volontairement ni fond ni bordure : chaque
   contexte l'habille comme ses propres champs, via la règle
   `.gf-champ .pays-bouton` côté template, ou `.form-select` côté
   back-office. Seul le panneau déroulant est stylé ici.
   ============================================================ */
.pays-select {
    position: relative;
    --pays-panneau-fond: #fff;
    --pays-panneau-texte: #2a1533;
    --pays-bordure: #ece6f0;
    --pays-survol: rgba(97, 11, 115, .10);
    --pays-actif: #610B73;
}

/* le <select> reste dans le DOM (source de vérité, lisible par le code
   existant et utilisable sans JS) mais disparaît une fois la liste construite */
.pays-select .pays-natif {
    position: absolute; opacity: 0; pointer-events: none;
    width: 0; height: 0; padding: 0; border: 0;
}

.pays-bouton {
    width: 100%; display: flex; align-items: center; gap: 8px;
    font: inherit; color: inherit; text-align: left; cursor: pointer;
    background: none; border: none; border-radius: inherit; padding: 0;
    /* interlignage serré : sans cela le contenu (drapeau + libellé) rend le
       bouton 3 à 4 px plus haut que les <input> voisins du même formulaire */
    line-height: 1.2;
}
.pays-choisi { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.pays-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pays-fleche { opacity: .55; font-size: 12px; flex: 0 0 auto; }

.pays-drapeau {
    width: 22px; height: 16px; object-fit: cover; flex: 0 0 auto;
    border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}
.pays-drapeau-vide { background: rgba(125, 125, 125, .25); display: inline-block; }

.pays-panneau {
    position: absolute; z-index: 1080; top: calc(100% + 6px); left: 0; right: 0;
    background: var(--pays-panneau-fond); color: var(--pays-panneau-texte);
    border: 1px solid var(--pays-bordure); border-radius: 10px;
    box-shadow: 0 14px 38px rgba(20, 8, 26, .28); overflow: hidden;
    text-align: left;
}
.pays-recherche {
    width: 100%; border: none; border-bottom: 1px solid var(--pays-bordure);
    padding: 10px 12px; font: inherit; font-size: 14px;
    color: var(--pays-panneau-texte); background: transparent; outline: none;
}
.pays-liste { max-height: 260px; overflow-y: auto; }
.pays-item {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 12px; cursor: pointer; font-size: 13.5px; line-height: 1.4;
}
.pays-item:hover { background: var(--pays-survol); }
.pays-item.actif { background: var(--pays-actif); color: #fff; }
.pays-vide { padding: 14px 12px; opacity: .6; font-size: 13px; }

/* --- habillage back-office : le bouton reprend l'allure d'un .form-select --- */
.form-select-pays .pays-bouton,
.pays-select:not(.gf-dans-template) .pays-bouton {
    background: #fff; border: 1px solid #ced4da; border-radius: .25rem;
    padding: .375rem .75rem; min-height: 38px;
}
.pays-select:not(.gf-dans-template).ouvert .pays-bouton {
    border-color: #610B73; box-shadow: 0 0 0 .2rem rgba(97, 11, 115, .15);
}