/* =============================================================
   Sélecteur de site — Feuille de styles
   ============================================================= */

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

/* ── Liens (pas de soulignement par défaut) ── */
.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;
}

/* ── 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; /* supprime le flash bleu sur mobile */
}

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

    /* Animation d'ouverture / fermeture (clip-path + opacity) */
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    /* On anime max-height et opacity en 500 ms */
    transition: max-height 500ms ease, opacity 500ms ease;
    pointer-events: none;   /* désactive les clics quand fermé */
}

/*
 * État ouvert — la valeur de max-height doit être supérieure à la
 * hauteur réelle de la liste (3 items × ~62px ≈ 200px).
 * On met 600px pour être généreux.
 */
.selecteur-site.is-open .conteneur-titres {
    max-height: 600px;
    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;
}

/* ── Palettes de couleurs ── */

/* Bleu Prado */
.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 */
.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 */
.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;
}