/* ==========================================================================
   SÉLECTEUR DE PAYS (index.php du site 2023 : #main_index, #ct_ban_index)
   Mosaïque de cinq photos qui glissent en place, trait jaune, puis
   « CHOOSE YOUR COUNTRY » et la liste des sites pays-langue.
   ========================================================================== */

/* ----- Logos ------------------------------------------------------------- */
.indexHeader {
    width: min(var(--largeur-site), 100%);
    margin: 50px auto;
}

.indexHeader ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.indexHeader__logoOperation {
    display: block;
    width: 328px;
}

.indexHeader__logoCorporate {
    display: block;
    width: 168px;
}

/* ----- Mosaïque ---------------------------------------------------------- */
.indexMain {
    width: min(var(--largeur-site), 100%);
    margin: 0 auto;
}

.indexAnimation {
    display: grid;
    grid-template-columns: 374fr 302fr 421fr 303fr;
    grid-template-rows: 189px 112px;
    grid-template-areas:
        "un   trois quatre cinq"
        "deux trois quatre cinq";
}

/* Trait jaune sous la mosaïque, tracé de gauche à droite. */
.indexAnimation::after {
    content: "";
    grid-column: 1 / -1;
    width: 0;
    height: 10px;
    background-color: var(--color-primary-yellow);
    animation: indexTrait 2s ease-out forwards;
}

.indexAnimation__panel {
    overflow: hidden;
}

.indexAnimation__panel img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.indexAnimation__panel--1 {
    grid-area: un;
}

.indexAnimation__panel--2 {
    grid-area: deux;
}

.indexAnimation__panel--3 {
    grid-area: trois;
}

.indexAnimation__panel--4 {
    grid-area: quatre;
    position: relative;
    text-align: center;
}

.indexAnimation__panel--5 {
    grid-area: cinq;
}

/* Entrées des photos, dans l'ordre et avec les délais du legacy. */
.indexAnimation__panel--1 img {
    animation: indexGauche 0.5s ease both;
}

.indexAnimation__panel--2 img {
    animation: indexDroite 0.5s 0.2s ease both;
}

.indexAnimation__panel--3 img {
    animation: indexHaut 0.5s 0.4s ease both;
}

.indexAnimation__image img {
    height: 102px;
    animation: indexDroite 0.5s 0.6s ease both;
}

.indexAnimation__panel--5 img {
    animation: indexBas 0.5s 0.8s ease both;
}

@keyframes indexGauche {
    from { transform: translateX(-700px); }
    to   { transform: none; }
}

@keyframes indexDroite {
    from { transform: translateX(-800px); }
    to   { transform: none; }
}

@keyframes indexHaut {
    from { transform: translateY(-800px); }
    to   { transform: none; }
}

@keyframes indexBas {
    from { transform: translateY(-800px); }
    to   { transform: none; }
}

/* Fin du trait : 335 % de la première colonne, comme en 2023 (374px sur 1400). */
@keyframes indexTrait {
    to { width: 100%; }
}

/* ----- Choix du pays ----------------------------------------------------- */
.indexCountrySelector__title {
    margin-top: 3.6rem;
    color: var(--color-primary-white);
    font-family: "AvenirLTStd-Medium", Arial, sans-serif;
    font-size: 3.7rem;
}

.indexCountrySelector__title span {
    color: var(--color-primary-yellow);
    font-family: "AvenirLTStd-Black", Arial, sans-serif;
    font-size: 5.6rem;
}

.indexCountrySelector__bouton {
    width: 167px;
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-primary-yellow);
    background-color: var(--color-primary-white);
    color: var(--color-primary-blue);
    font-family: "AvenirLTStd-Black", Arial, sans-serif;
    font-size: 1.4rem;
    text-align: left;
    text-transform: uppercase;
}

/* Liste des sites : en haut du panneau, juste au-dessus du bouton, comme en 2023. */
.indexCountrySelector__liste {
    position: absolute;
    z-index: 100;
    top: 0;
    left: 50%;
    width: 167px;
    height: 250px;
    overflow: auto;
    background-color: var(--color-primary-white);
    text-transform: uppercase;
    transform: translateX(-50%);
}

.indexCountrySelector__liste[hidden] {
    display: none;
}

.indexCountrySelector__liste li {
    margin-top: 1.5rem;
    padding-left: 1rem;
    font-family: "AvenirLTStd-Black", Arial, sans-serif;
    font-size: 1.4rem;
    text-align: left;
}

.indexCountrySelector__liste a {
    color: var(--color-primary-blue);
    transition: 0.2s ease-in;
}

.indexCountrySelector__liste a:hover,
.indexCountrySelector__liste a:focus-visible {
    color: var(--color-primary-yellow);
}

/* ----- Adaptations (styles_responsive.css du legacy) --------------------- */
@media screen and (max-width: 1400px) {
    .indexHeader ul {
        padding: 0 2rem;
    }
}

/* Sous 1370px, le legacy retirait les photos : il reste le titre et la liste. */
@media screen and (max-width: 1370px) {
    .indexAnimation {
        display: block;
    }

    .indexAnimation__panel--1,
    .indexAnimation__panel--2,
    .indexAnimation__panel--3,
    .indexAnimation__panel--5,
    .indexAnimation__image {
        display: none;
    }

    .indexAnimation__panel--4 {
        overflow: visible;
    }

    /* Sans la photo du haut, la liste passerait sur le titre : elle s'ouvre sous le bouton. */
    .indexCountrySelector__liste {
        top: 100%;
    }

    .indexAnimation::after {
        display: block;
        margin-top: 2rem;
    }

    @keyframes indexTrait {
        to { width: 38%; }
    }
}

@media screen and (max-width: 600px) {
    .indexHeader ul {
        flex-direction: column;
    }

    .indexHeader ul li {
        margin-bottom: 2.6rem;
    }

    .indexHeader__logoOperation {
        width: min(328px, 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .indexAnimation::after {
        width: 89.5%;
        animation: none;
    }

    .indexAnimation__panel img {
        animation: none;
    }
}