/* =============================================================
   Sélecteur de site — Feuille de styles  (v1.2.0)
   ============================================================= */

/* ─────────────────────────────────────────────────────────────
   1. WEBFONT — RockebyCd-Bold-2
   ─────────────────────────────────────────────────────────────
   Déposez vos fichiers de police dans le dossier :
       wp-content/plugins/selecteur-site/assets/fonts/

   Formats attendus (du plus moderne au plus ancien) :
       RockebyCd-Bold-2.woff2   ← format prioritaire, le plus léger
       RockebyCd-Bold-2.woff    ← fallback pour les navigateurs anciens

   Si vous ne disposez que d'un seul format, supprimez
   la ligne correspondant à l'autre format.
   ───────────────────────────────────────────────────────────── */
@font-face {
    font-family: 'RockebyCd-Bold-2';
    src:
        url('../assets/fonts/RockebyCd-Bold-2.woff2') format('woff2'),
        url('../assets/fonts/RockebyCd-Bold-2.woff')  format('woff');
    font-weight:  bold;
    font-style:   normal;
    /* font-display: swap garantit que le texte reste lisible pendant
       le chargement de la police (pas de FOIT — Flash Of Invisible Text). */
    font-display: swap;
}

/* =============================================================
   2. COMPOSANT — Sélecteur de site
   ============================================================= */

.selecteur-site {
    box-sizing: border-box;
    position: relative;          /* contexte pour la liste déroulante */
    font-family:
        'RockebyCd-Bold-2',      /* police embarquée (v1.2.0)         */
        'Impact',
        'Haettenschweiler',
        'Franklin Gothic Bold',
        'Charcoal',
        'Helvetica Inserat',
        'Bitstream Vera Sans Bold',
        'Arial Black',
        sans-serif;
    letter-spacing: 2px;
}

/* ── Liens ── */
.selecteur-site a {
    text-decoration: none;
}

/* ── Partie haute : titre courant + bouton ── */
.selecteur-site .site-actuel {
    display: flex;
    align-items: center;
    gap: 8px;
}

.selecteur-site .titre-actuel {
    display: inline-block;
    /* vertical-align: middle; */
    height: 50px;
    line-height: 50px;
    margin: 0;
    padding: 0;
    font-size: 1.8rem;
    font-weight: normal;
}

/* ── Bouton d'ouverture / fermeture ── */
.selecteur-site .bouton-selecteur {
    display: inline-flex;
    align-items: flex-end;
    padding-bottom: 4px;
    height: 50px;
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.selecteur-site .bouton-selecteur:focus-visible {
    outline: 2px solid #263875;
    outline-offset: 2px;
    border-radius: 3px;
}

/* Rotation du chevron quand la liste est ouverte */
.selecteur-site .bouton-selecteur .svg-chevron-down {
    width: 20px;
    height: 20px;
    color: #575756;
    fill: currentColor;
    transition: transform 500ms ease;
    transform-origin: center;
}

.selecteur-site.is-open .bouton-selecteur .svg-chevron-down {
    transform: rotate(180deg);
}

/* ── Conteneur de la liste déroulante ── */
.selecteur-site .conteneur-titres {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9999;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 500ms ease, opacity 500ms ease;
    pointer-events: none;
}

/* État ouvert */
.selecteur-site.is-open .conteneur-titres {
    max-height: 600px;   /* valeur supérieure à la hauteur réelle de la liste */
    opacity: 1;
    pointer-events: auto;
}

/* ── Liste ordonnée ── */
.selecteur-site .liste-titres {
    width: 280px;
    margin: 0;
    padding: 0;
    border-bottom: 2px solid #dfdfdf;
    border-right:  2px solid #dfdfdf;
    box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, .5);
    list-style: none;
    background-color: #ffffff;
}

.selecteur-site .liste-titres li {
    border-top:  2px solid #dfdfdf;
    border-left: 2px solid #dfdfdf;
}

.selecteur-site .liste-titres li:hover,
.selecteur-site .liste-titres li:focus-within {
    background-color: #dfdfdf;
}

/* ── Liens de la liste ── */
.selecteur-site .titre-site a {
    display: block;
    margin: 0;
    padding: 1rem;
    font-size: 30px;
}

/* ─────────────────────────────────────────────────────────────
   3. MASQUAGE DU SITE COURANT DANS LA LISTE  (v1.2.0)
   ─────────────────────────────────────────────────────────────
   La classe .titre-site-courant est ajoutée par PHP sur l'élément
   <li> qui correspond au site sur lequel se trouve le visiteur.

   On le masque visuellement ET on le retire du flux pour que la
   liste déroulante ne présente que les autres sites.

   Pour rétablir l'affichage du site courant (par exemple pour
   des raisons de débogage), il suffit de commenter la règle
   ci-dessous.
   ───────────────────────────────────────────────────────────── */
.selecteur-site .titre-site-courant {
    display: none;
}

/* ─────────────────────────────────────────────────────────────
   4. PALETTES DE COULEURS
   ───────────────────────────────────────────────────────────── */

/* Bleu Prado — leprado.org */
.selecteur-site .titre-bleuprado a,
.selecteur-site .titre-bleuprado a:hover,
.selecteur-site .titre-bleuprado a:active,
.selecteur-site .titre-bleuprado a:focus {
    color: #263875;
}

/* Rouge Prado — france.leprado.org */
.selecteur-site .titre-rougeprado a,
.selecteur-site .titre-rougeprado a:hover,
.selecteur-site .titre-rougeprado a:active,
.selecteur-site .titre-rougeprado a:focus {
    color: #E8443B;
}

/* Vert Prado — limonest.leprado.org */
.selecteur-site .titre-vertprado a,
.selecteur-site .titre-vertprado a:hover,
.selecteur-site .titre-vertprado a:active,
.selecteur-site .titre-vertprado a:focus {
    color: #1AA085;
}