/* Contacts — deux bandes.

   Toutes les valeurs sont relevées sur la feuille de la prod
   (`.content1__contacts` / `.content2__contacts`), converties de rem en px :
   la prod pose `html { font-size: 62.5% }`, pas le socle 2026. Ainsi
   4.2rem → 42px, 3rem → 30px, 2.4rem → 24px, 1.6rem → 16px.

   La prod cale ses bandes sur `padding: 60px 120px` sans largeur maximale ;
   le socle centre sur 1200 px, ce qui donne exactement la même colonne à
   1440 px de large. */

/* ----- Bande 1 : contacts -------------------------------------------------- */

/* Bleu clair de la prod : --exo-bleu-clair à 20% sur blanc. */
.exo-contacts {
    background: rgba(15, 148, 195, 0.2);
    color: var(--exo-bleu-fonce);
}

.exo-contacts__inner {
    padding: 60px 120px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Le titre n'a pas de marge propre : c'est le `gap: 40px` de la bande qui
   l'espace, comme en prod. */
.exo-contacts__titre {
    margin: 0;
    font-size: 42px;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    color: var(--exo-bleu-fonce);
}

.exo-contacts__bloc {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

/* La prod réserve 216px à droite du bloc RH : la carte n'occupe pas toute la
   colonne. */
.exo-contacts__bloc--rh {
    padding-right: 216px;
}

[dir = "rtl"] .exo-contacts__bloc--rh {
    padding-right: 0;
    padding-left: 216px;
}

.exo-contacts__soustitre {
    align-self: stretch;
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    line-height: normal;
    color: var(--exo-bleu-fonce);
}

.exo-contacts__action {
    margin: 0;
}

/* Pastille bleu profond du renvoi vers la FAQ. Coins ronds sur les quatre
   angles en prod, et non le 12px 0 12px 12px des boutons de la nav. */
.exo-contacts__lien {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
    color: var(--exo-blanc);
    background: var(--exo-bleu-fonce);
    cursor: pointer;
}

.exo-contacts__lien:hover,
.exo-contacts__lien:focus-visible {
    background: var(--exo-cerulean);
}

/* ----- Sélecteur d'entité -------------------------------------------------- */

.exo-contacts__carte {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px;
    border: 2px solid var(--exo-blanc);
    border-radius: 20px;
    background: rgba(255, 254, 254, 0.1);
    box-shadow: 0 0 60px 0 rgba(0, 112, 173, 0.1);
}

.exo-contacts__champ {
    position: relative;
    width: 100%;
}

/* Le chevron remplace la flèche native, désactivée juste en dessous. */
.exo-contacts__champ::after {
    content: "▼";
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    pointer-events: none;
    color: #666666;
}

[dir = "rtl"] .exo-contacts__champ::after {
    right: auto;
    left: 12px;
}

.exo-contacts__select {
    width: 100%;
    padding: 12px 40px 12px 12px;
    border: 1px solid #CCCCCC;
    border-radius: 8px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    color: var(--exo-bleu-fonce);
    background-color: var(--exo-blanc);
    appearance: none;
    -webkit-appearance: none;
}

[dir = "rtl"] .exo-contacts__select {
    padding: 12px 12px 12px 40px;
}

.exo-contacts__select:focus-visible {
    outline: 2px solid var(--exo-cerulean);
    outline-offset: 2px;
}

/* ----- Fiches correspondant ------------------------------------------------ */

/* Le cadre ne paraît qu'une fois une entité choisie : `hidden` porte l'état,
   d'où le `:not([hidden])` plutôt qu'une classe — sans cela le `display: flex`
   écraserait l'attribut. */
.exo-contacts__fiches {
    align-self: stretch;
    padding: 20px;
    border-radius: 20px;
    background: rgba(255, 254, 254, 0.3);
    box-shadow: 0 0 100px 0 rgba(0, 0, 0, 0.1);
}

.exo-contacts__fiches:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 40px;
}

.exo-contacts__fiche:not([hidden]) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.exo-contacts__nom {
    align-self: stretch;
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: normal;
    color: var(--exo-bleu-fonce);
}

.exo-contacts__coord {
    align-self: stretch;
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    color: var(--exo-bleu-fonce);
}

/* ----- Bande 2 : assistance Amundi ----------------------------------------- */

.exo-assistance {
    position: relative;
    overflow: hidden;
    background: var(--exo-bleu-fonce);
}

/* Photo en balise (CSP + URL du S3 connue du seul gabarit), cadrée comme le
   `background-size: cover` de la prod. */
.exo-assistance__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Dégradé de la prod, repris au pourcentage près : #143E4C est la valeur
   écrite dans sa feuille, à un point près de --exo-bleu-fonce. */
.exo-assistance::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(270deg, rgba(21, 63, 76, 0) -1.04%, #143E4C 82.01%);
    pointer-events: none;
}

[dir = "rtl"] .exo-assistance::after {
    background: linear-gradient(90deg, rgba(21, 63, 76, 0) -1.04%, #143E4C 82.01%);
}

.exo-assistance__inner {
    position: relative;
    z-index: 1;
    padding: 80px 120px;
}

/* Cartouche cerulean à 90%, coin supérieur gauche vif. */
.exo-assistance__carte {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    width: 450px;
    max-width: 100%;
    padding: 20px;
    border-radius: 0 40px 40px 40px;
    background: rgba(0, 103, 131, 0.9);
}

[dir = "rtl"] .exo-assistance__carte {
    border-radius: 40px 0 40px 40px;
}

.exo-assistance__entete {
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: 8px;
}

.exo-assistance__chevron {
    flex: 0 0 auto;
}

[dir = "rtl"] .exo-assistance__chevron {
    transform: scaleX(-1);
}

.exo-assistance__titre {
    align-self: stretch;
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    color: var(--exo-blanc);
}

.exo-assistance__texte {
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    color: var(--exo-blanc);
}

.exo-assistance__texte p {
    margin: 0 0 10px;
}

.exo-assistance__texte p:last-child {
    margin-bottom: 0;
}

.exo-assistance__texte a {
    color: var(--exo-jaune);
}

/* Le numéro est une pastille, pas une ligne de texte. */
.exo-assistance__num {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 8px 20px;
    border-radius: 60px;
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    text-align: center;
    color: var(--exo-blanc);
    background: var(--exo-bleu-fonce);
}

/* ----- Sous 768px : la rupture de la prod ---------------------------------- */

@media screen and (max-width: 768px) {
    .exo-contacts__inner {
        padding: 40px 20px;
        gap: 24px;
    }

    .exo-contacts__titre {
        font-size: 28px;
        text-align: center;
    }

    .exo-contacts__bloc {
        gap: 16px;
    }

    .exo-contacts__bloc--rh,
    [dir = "rtl"] .exo-contacts__bloc--rh {
        padding-right: 0;
        padding-left: 0;
    }

    .exo-contacts__soustitre {
        font-size: 22px;
    }

    /* Sur mobile la prod étire le renvoi vers la FAQ sur toute la largeur. */
    .exo-contacts__action {
        align-self: stretch;
    }

    .exo-contacts__lien {
        display: flex;
        width: 100%;
        padding: 8px 16px;
        font-size: 14px;
        text-align: center;
    }

    .exo-contacts__carte {
        padding: 16px;
        gap: 16px;
    }

    .exo-contacts__select {
        font-size: 14px;
    }

    .exo-contacts__fiches {
        padding: 16px;
    }

    .exo-contacts__fiches:not([hidden]) {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    .exo-contacts__fiche:not([hidden]) {
        gap: 6px;
    }

    .exo-contacts__nom {
        font-size: 20px;
    }

    .exo-contacts__coord {
        font-size: 14px;
    }

    /* La photo disparaît : la prod remplace la bande par un aplat cerulean. */
    .exo-assistance {
        background: rgba(0, 103, 131, 0.9);
    }

    .exo-assistance__photo,
    .exo-assistance::after {
        display: none;
    }

    .exo-assistance__inner {
        padding: 40px 20px;
    }

    .exo-assistance__carte {
        width: 100%;
        padding: 16px;
        gap: 16px;
        border-radius: 0 24px 24px 24px;
        background: var(--exo-bleu-fonce);
    }

    [dir = "rtl"] .exo-assistance__carte {
        border-radius: 24px 0 24px 24px;
    }

    .exo-assistance__entete {
        gap: 6px;
    }

    .exo-assistance__titre,
    .exo-assistance__texte {
        font-size: 14px;
    }

    /* Sur fond bleu profond, la pastille s'inverse. */
    .exo-assistance__num {
        padding: 6px 16px;
        font-size: 14px;
        color: var(--exo-bleu-nuit);
        background: var(--exo-blanc);
    }
}