/* Comprendre ExoShare — cinq bandes.

   Toutes les valeurs sont relevées sur la feuille de production
   (https://exoshare.exosens.com, assets/css/styles.css). La prod compose en rem
   sur un `html { font-size: 62.5% }` (1rem = 10px) ; elles sont reprises ici en
   pixels, à l'identique. Là où la prod et la maquette divergent, c'est la prod
   qui gagne : c'est elle que le client connaît.

   Les bandes gardent le cadre du socle : pleine largeur, contenu centré sur
   1200 px. La prod, elle, posait 120 px de gouttière sur une page de 1440, ce
   qui revient au même contenu utile. */

/* ----- Chevron jaune partagé ----------------------------------------------
   La prod l'injectait en `content: url(...)` ; la CSP de 2026 l'interdit et la
   feuille ne connaît pas l'URL du S3, c'est donc une balise posée par le
   gabarit. Règle identique à celle de participer.css : les feuilles de page ne
   se chargent jamais ensemble, d'où le doublon. À remonter dans
   exosens-public.css le jour où l'ossature l'adoptera. */

.exo-fleche {
    flex: 0 0 auto;
    width: 8px;
    height: 13px;
}

[dir = "rtl"] .exo-fleche {
    transform: rotate(180deg);
}

/* ----- 1. Le parcours en trois étapes -------------------------------------- */

/* `.understand_exoshare` : un dégradé cerulean → bleu foncé posé sur le
   cerulean plein. */
.exo-comprendre {
    background: linear-gradient(97deg, rgba(20, 63, 77, 0) 0%, var(--exo-bleu-fonce) 100.24%), var(--exo-cerulean);
}

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

.exo-comprendre__titre {
    margin: 0;
    color: var(--exo-blanc);
    text-transform: uppercase;
}

.exo-comprendre__etapes {
    display: flex;
    gap: 40px;
}

/* Quirk de la prod, repris tel quel : seules la première et la troisième carte
   partent d'une largeur pleine, la dernière se cale sur son texte et finit donc
   un peu plus étroite. */
.exo-comprendre__etapes > li:first-child,
.exo-comprendre__etapes > li:nth-child(3) {
    width: 100%;
}

/* La prod laissait la flèche rétrécir avec son `li` — son image, elle, gardait
   ses 62 px et débordait. Le reset de 2026 borne les images à leur boîte : on
   fige donc la colonne pour obtenir le même rendu. */
.exo-comprendre__fleche {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

[dir = "rtl"] .exo-comprendre__fleche {
    transform: rotate(180deg);
}

.exo-comprendre__etape {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px;
    border-radius: 20px 0 20px 20px;
    background: var(--exo-blanc);
    box-shadow: 0 0 60px 0 rgba(0, 112, 173, 0.1);
    color: var(--exo-cerulean);
    font-size: 16px;
}

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

/* `#bloc-button__comprendre` : la carte qui porte un bouton le colle en bas. */
.exo-comprendre__etape--cta {
    justify-content: space-between;
}

/* `#bloc-up__comprendre` : picto + texte, groupés au-dessus du bouton. */
.exo-comprendre__haut {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.exo-comprendre__picto {
    width: 55px;
}

/* `.exo-btn` interdit le retour à la ligne ; ces libellés font une phrase. */
.exo-comprendre__lien {
    white-space: normal;
    text-align: center;
}

/* ----- 2. Les conditions préférentielles ----------------------------------- */

/* `.exosens_employee` : un voile bleu clair à 20 % sur du blanc. */
.exo-conditions {
    background: linear-gradient(0deg, rgba(15, 148, 195, 0.2) 0%, rgba(15, 148, 195, 0.2) 100%), var(--exo-blanc);
}

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

/* `.exosens_employee h1` : cerulean, Regular 30 — pas les 42 des autres bandes,
   le titre tient sur deux lignes. */
.exo-conditions__titre {
    margin: 0;
    color: var(--exo-cerulean);
    font-size: 30px;
    font-weight: 400;
    line-height: normal;
}

.exo-conditions__titre strong {
    font-weight: 700;
}

.exo-conditions__avantages {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

/* Le halo blanc de la prod détache la photo détourée du fond bleuté. */
.exo-conditions__photo {
    filter: drop-shadow(5px 5px 10px var(--exo-blanc));
}

.exo-conditions__cartes {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.exo-conditions__carte {
    display: flex;
    align-items: flex-start;
    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-conditions__picto {
    flex: 0 0 auto;
    width: 55px;
}

/* Colonne etirée, comme en prod : la grille d'abondement occupe alors toute la
   largeur de la carte. Seul le bouton se recale sur son texte. */
.exo-conditions__corps {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.exo-conditions__soustitre {
    margin: 0;
    color: var(--exo-cerulean);
    font-size: 20px;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

.exo-conditions__corps p {
    color: var(--exo-bleu-nuit);
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
}

/* La grille d'abondement : filets cerulean, coins arrondis — d'où le
   `border-collapse: separate`, sans lequel le rayon ne prend pas. */
.exo-conditions__grille {
    border: 1px solid var(--exo-cerulean);
    border-radius: 8px;
    border-collapse: separate;
    border-spacing: 0;
}

.exo-conditions__grille th {
    padding: 10px;
    border: 1px solid var(--exo-cerulean);
    border-top: 0;
    border-left: 0;
    background: rgba(15, 148, 195, 0.2);
    color: var(--exo-bleu-nuit);
    font-size: 16px;
    font-weight: 400;
    text-align: left;
}

.exo-conditions__grille td {
    padding: 2px 10px;
    border-right: 1px solid var(--exo-cerulean);
    border-bottom: 1px solid var(--exo-cerulean);
    color: var(--exo-bleu-nuit);
    font-size: 16px;
    font-weight: 400;
    text-align: left;
}

.exo-conditions__grille tr:last-child td {
    border-bottom: 0;
}

.exo-conditions__grille th:last-child,
.exo-conditions__grille td:last-child {
    border-right: 0;
}

.exo-conditions__lien {
    align-self: flex-start;
    white-space: normal;
    text-align: center;
}

/* -- L'exemple chiffré -- */

.exo-conditions__exemple {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    border-radius: 20px 0 20px 20px;
    background: rgba(15, 148, 195, 0.2);
    box-shadow: 0 0 60px 0 rgba(0, 112, 173, 0.1);
    font-size: 16px;
}

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

.exo-conditions__exemple-titre {
    margin: 0;
    color: var(--exo-bleu-nuit);
    font-size: 20px;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

.exo-conditions__hypothese {
    color: var(--exo-bleu-fonce);
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
}

/* `> small` : la mention « hors dividendes », en 10 px dans la prod. */
.exo-conditions__mention {
    color: var(--exo-bleu-fonce);
    font-size: 10px;
    font-weight: 400;
    line-height: normal;
}

.exo-conditions__liste {
    padding: 10px;
    border-radius: 10px;
    color: var(--exo-blanc);
}

.exo-conditions__liste li {
    display: flex;
    justify-content: space-between;
}

.exo-conditions__liste--cerulean-pale {
    background: rgba(0, 103, 131, 0.7);
}

.exo-conditions__liste--jaune {
    background: var(--exo-jaune);
}

.exo-conditions__liste--blanc {
    background: var(--exo-blanc);
    color: var(--exo-cerulean);
}

/* `--bg-white2` : le bandeau blanc qui coiffe les hypothèses de cours ; ses
   coins bas restent vifs pour se souder à la bande bleu pâle. */
.exo-conditions__liste--blanc-haut {
    background: var(--exo-blanc);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    color: var(--exo-cerulean);
}

/* `--bg-white3` : même bandeau, mais en jaune — le palier d'abondement des pays
   servis en actions. */
.exo-conditions__liste--blanc-or {
    background: var(--exo-blanc);
    color: var(--exo-jaune);
}

.exo-conditions__liste--cerulean {
    background: var(--exo-cerulean);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* #C3E4F0 est relevé sur la prod : ce bleu pâle n'a pas de variable Figma. La
   marge négative ferme le joint avec le bandeau qui le précède. */
.exo-conditions__liste--bleu-pale {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: -10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background: #C3E4F0;
    color: var(--exo-cerulean);
}

.exo-conditions__liste--bleu-pale li:not(:last-child) {
    padding-bottom: 10px;
    border-bottom: 2px solid var(--exo-cerulean);
}

.exo-conditions__hausse {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

/* `<div align="right">` du legacy. */
.exo-conditions__simuler {
    display: flex;
    justify-content: flex-end;
}

/* ----- 3. À l'issue de la période de souscription -------------------------- */

.exo-issue {
    background: var(--exo-cerulean);
}

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

.exo-issue__titre {
    margin: 0;
    color: var(--exo-blanc);
    text-transform: uppercase;
}

.exo-issue__liste {
    display: flex;
    gap: 40px;
}

.exo-issue__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 40px;
    border-radius: 20px 0 20px 20px;
    background: rgba(20, 63, 77, 0.2);
    box-shadow: 0 0 60px 0 rgba(0, 112, 173, 0.1);
    color: var(--exo-blanc);
    font-size: 20px;
    text-align: center;
}

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

/* Le « + » entre les deux pictos est du texte dans la prod, en 42 px. */
.exo-issue__pictos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--exo-blanc);
    font-size: 42px;
    font-weight: 400;
    line-height: 1;
}

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

/* ----- 4. Au terme de la durée de blocage ---------------------------------- */

.exo-blocage {
    position: relative;
    background: var(--exo-bleu-nuit);
}

/* Le cadenas est calé dans l'angle de la bande, comme en prod. */
.exo-blocage__cadenas {
    position: absolute;
    top: 0;
    left: 0;
}

/* La prod laisse le cadenas au-dessus du contenu (il est positionné, pas le
   texte). Sur un écran étroit il passait sur le titre : le contenu reprend donc
   la main. */
.exo-blocage__inner {
    position: relative;
    z-index: 1;
    padding: 60px 120px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.exo-blocage__titre {
    margin: 0;
    color: var(--exo-bleu-clair);
    text-transform: uppercase;
}

.exo-blocage__liste {
    display: flex;
    gap: 40px;
}

.exo-blocage__item {
    width: 100%;
    color: var(--exo-blanc);
    font-size: 16px;
    text-align: center;
}

/* Filet vertical à pastille jaune, entre deux colonnes. */
.exo-blocage__separateur > div {
    position: relative;
    width: 1px;
    height: 100%;
    background: var(--exo-cerulean);
}

.exo-blocage__separateur > div::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--exo-jaune);
    transform: translate(-50%, -50%);
}

/* ----- 5. À noter avant d'investir ----------------------------------------- */

.exo-anoter {
    position: relative;
    overflow: hidden;
}

/* Photo en balise et non en fond CSS (CSP + URL du S3), cadrée comme le
   `background: ... center top / cover` de la prod. */
.exo-anoter__fond {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.exo-anoter__inner {
    position: relative;
    z-index: 1;
    padding: 80px 120px;
    display: flex;
    justify-content: flex-end;
}

.exo-anoter__carte {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 400px;
    padding: 20px;
    border-radius: 0 40px 40px 40px;
    background: rgba(0, 103, 131, 0.9);
    color: var(--exo-blanc);
    font-size: 16px;
}

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

.exo-anoter__titre {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-weight: 700;
}

/* Seuls les intitulés des points passent au jaune ; leur explication reste
   blanche. */
.exo-anoter__point > strong {
    color: var(--exo-jaune);
}

.exo-anoter__lien {
    width: fit-content;
    padding: 12px;
    border-radius: 12px;
    background: var(--exo-jaune);
    color: var(--exo-blanc);
    font-size: 16px;
    font-weight: 400;
}

.exo-anoter__lien:hover {
    background: var(--exo-jaune-hover);
}

/* ----- Sous 1050 px --------------------------------------------------------
   Le point de rupture de la prod, avec ses règles, une à une : tout passe en
   colonne et se centre, les pictos rétrécissent, la photo disparaît. */

@media screen and (max-width: 1050px) {
    .exo-comprendre__inner,
    .exo-conditions__inner,
    .exo-issue__inner,
    .exo-blocage__inner {
        padding: 20px;
    }

    .exo-comprendre__inner {
        gap: 20px;
    }

    .exo-comprendre__titre,
    .exo-conditions__titre,
    .exo-issue__titre,
    .exo-blocage__titre {
        font-size: 24px;
    }

    .exo-comprendre__etapes {
        flex-direction: column;
        gap: 20px;
    }

    .exo-comprendre__etapes > li {
        width: 100%;
        text-align: center;
    }

    .exo-comprendre__fleche {
        justify-content: center;
    }

    /* La flèche du parcours pointe vers le bas quand les cartes s'empilent. */
    .exo-comprendre__fleche img {
        max-width: 40px;
        rotate: 90deg;
    }

    [dir = "rtl"] .exo-comprendre__fleche img {
        rotate: -90deg;
    }

    [dir = "rtl"] .exo-comprendre__fleche {
        transform: none;
    }

    .exo-comprendre__etape {
        padding: 10px;
    }

    .exo-comprendre__picto {
        width: 45px;
    }

    .exo-comprendre__lien {
        width: 100%;
    }

    .exo-conditions__avantages {
        flex-direction: column;
    }

    .exo-conditions__photo {
        display: none;
    }

    .exo-conditions__carte {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 10px 5px;
        text-align: center;
    }

    .exo-conditions__picto {
        width: 45px;
    }

    .exo-conditions__corps {
        align-items: center;
    }

    .exo-conditions__lien {
        align-self: center;
    }

    .exo-conditions__soustitre,
    .exo-conditions__corps p {
        text-align: center;
    }

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

    .exo-conditions__grille th,
    .exo-conditions__grille td {
        padding: 6px;
    }

    /* Le cartouche de l'exemple disparaît : les bandeaux se suffisent. */
    .exo-conditions__exemple {
        padding: 0;
        background: none;
        box-shadow: none;
    }

    .exo-conditions__exemple-titre,
    .exo-conditions__hypothese {
        text-align: center;
    }

    .exo-conditions__liste {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .exo-conditions__liste li {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .exo-conditions__liste li div {
        width: 100%;
    }

    .exo-conditions__hausse {
        justify-content: center;
    }

    /* Le rappel du simulateur : le bouton du menu suffit sur mobile. */
    .exo-conditions__simuler {
        display: none;
    }

    .exo-issue__liste {
        flex-direction: column;
    }

    .exo-issue__item {
        gap: 10px;
        padding: 10px;
    }

    .exo-issue__pictos {
        flex-wrap: wrap;
        font-size: 26px;
    }

    .exo-issue__pictos img {
        width: 45px;
    }

    .exo-issue__item p {
        font-size: 14px;
    }

    .exo-blocage__liste {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        text-align: center;
    }

    /* Le filet passe à l'horizontale entre deux colonnes empilées. */
    .exo-blocage__separateur > div {
        width: 300px;
        max-width: 100%;
        height: 1px;
    }

    .exo-blocage__cadenas {
        display: none;
    }

    /* La photo cède la place au voile bleu clair des autres bandes. */
    .exo-anoter {
        background: linear-gradient(0deg, rgba(15, 148, 195, 0.2) 0%, rgba(15, 148, 195, 0.2) 100%), var(--exo-blanc);
    }

    .exo-anoter__fond {
        display: none;
    }

    .exo-anoter__inner {
        justify-content: center;
        padding: 60px 20px;
    }

    .exo-anoter__carte {
        max-width: 100%;
    }

    .exo-anoter__titre {
        justify-content: center;
        text-align: center;
    }

    .exo-anoter__point {
        text-align: center;
    }

    .exo-anoter__lien {
        width: 100%;
        text-align: center;
    }
}