/* Participer à ExoShare — quatre bandes.

   Toutes les valeurs sont relevées dans la feuille de la prod
   (`.participate`, `.how_finance`, `.how_invest`, `.how_participate`). La prod
   travaille en rem avec `html { font-size: 62.5% }` : 4.2rem = 42px,
   3rem = 30px, 2rem = 20px, 1.6rem = 16px, 1.4rem = 14px. Ces tailles sont
   réécrites en pixels ici, le socle 2026 gardant une base de 16px.

   Seule liberté prise : la prod cale ses bandes sur un padding fixe
   (60px, ou 60/120px) ; le socle centre chaque bande sur 1200 px. À 1440 px de
   large, `padding: 60px 120px` donne exactement 1200 px de contenu — le rendu
   est donc le même, et il tient sur les écrans plus larges. */

/* ----- 1. Participer à ExoShare ------------------------------------------- */

/* `.participate p` : cerulean, Regular 16. Posé sur la bande et non sur `p`,
   pour que les classes de titre l'emportent sans lutte de spécificité. */
.exo-participer {
    background: var(--exo-degrade-1);
    color: var(--exo-cerulean);
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    /* La photo déborde du cadre vers le bas et la gauche : sur un écran étroit
       elle sortirait de la bande et ferait défiler la page en travers. */
    overflow: hidden;
}

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

/* La prod : #2A424D, Segoe UI Regular 42, capitales. */
.exo-participer__titre {
    margin: 0;
    color: var(--exo-bleu-nuit);
    text-transform: uppercase;
}

/* `.participate > div { display: flex; gap: 60px }` */
.exo-participer__corps {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

/* Le cadre bleu nuit se superpose à la photo, décalée de 25px vers le bas et
   la gauche (`top: 25px; right: 25px` sur une photo en absolu). */
.exo-participer__visuel {
    position: relative;
    flex: 0 0 487px;
    max-width: 487px;
}

/* Le décalage de la prod vaut 25px sur une image de 487 × 407. Exprimé en
   pourcentage il redonne exactement 25px à la taille nominale et reste
   proportionné quand l'image rétrécit — la prod, elle, gardait 25px fixes et
   voyait la photo sortir du cadre sur mobile. */
.exo-participer__photo {
    position: absolute;
    top: 6.14%;
    right: 5.13%;
    width: 100%;
    height: auto;
    filter: drop-shadow(5px 5px 10px #ffffff);
}

/* En flux, donc c'est lui qui donne sa hauteur au bloc ; z-index 1 pour passer
   par-dessus la photo, comme en prod. */
.exo-participer__cadre {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
}

.exo-participer__qui {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* `.participate h2` : cerulean, Bold 30. */
.exo-participer__sous-titre {
    color: var(--exo-cerulean);
    font-size: 30px;
    font-weight: 700;
    line-height: normal;
}

/* `.participate .participate__who__employee, ...__retired` */
.exo-participer__carte {
    display: flex;
    flex-direction: column;
    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);
}

/* `.participate h3` : cerulean, Bold 20, capitales. */
.exo-participer__carte-titre {
    color: var(--exo-cerulean);
    font-size: 20px;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

/* Pastille blanche à coin supérieur gauche carré, largeur au contenu. */
.exo-participer__libre {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    width: fit-content;
    padding: 20px;
    border-radius: 0 20px 20px 20px;
    background: #ffffff;
    color: var(--exo-cerulean);
    font-size: 16px;
    font-weight: 700;
}

/* Le chevron jaune que la prod injectait en `content: url(...)`. La CSP de 2026
   interdit les styles en ligne et la feuille ne connaît pas l'URL des assets :
   c'est donc une balise, posée par le gabarit. */
.exo-fleche {
    flex: 0 0 auto;
    width: 8px;
    height: 13px;
}

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

/* ----- 2. Comment financer votre souscription ----------------------------- */

/* `.how_finance p` : blanc, 16. Posé sur la bande, cf. `.exo-participer`. */
.exo-financer {
    background: var(--exo-bleu-nuit);
    color: var(--exo-blanc);
    font-size: 16px;
    line-height: normal;
}

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

/* `.how_finance h1` : bleu clair, Regular 42, capitales. */
.exo-financer__titre {
    margin: 0;
    color: var(--exo-bleu-clair);
    text-transform: uppercase;
}

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

/* `.how_finance h2` : jaune, Bold 20, capitales. */
.exo-financer__sous-titre {
    color: var(--exo-jaune);
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
}

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

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

/* `.how_finance__conditions { display: flex; gap: 40px }` — les colonnes se
   partagent la largeur, les filets restent à 1px. */
.exo-financer__modalites {
    display: flex;
    gap: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.exo-financer__modalite {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    text-align: center;
}

.exo-financer__modalite-titre {
    display: block;
    margin-bottom: 10px;
    color: var(--exo-blanc);
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
}

/* Filet cerulean de 1px avec sa pastille jaune de 13px au centre. */
.exo-financer__filet {
    flex: 0 0 1px;
    width: 1px;
    position: relative;
    background: var(--exo-cerulean);
}

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

/* `.how_finance .fin_av` : cerulean à 40%, coin supérieur gauche carré. */
.exo-financer__avoirs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    border-radius: 0 40px 40px 40px;
    background: rgba(0, 103, 131, 0.4);
    color: var(--exo-blanc);
    font-size: 16px;
}

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

.exo-financer__avoirs-liste {
    margin: 0;
    padding: 0;
    list-style: none;
}

.exo-financer__avoirs-liste li {
    list-style: disc;
    margin-left: 20px;
}

[dir = "rtl"] .exo-financer__avoirs-liste li {
    margin-left: 0;
    margin-right: 20px;
}

/* Les liens de l'encadré restent blancs, comme en prod. */
.exo-financer__avoirs a {
    color: var(--exo-blanc);
}

/* ----- 3. Combien investir ? ---------------------------------------------- */

.exo-investir {
    background: var(--exo-gris);
}

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

/* `.how_invest h1` : bleu nuit, Regular 42, capitales. */
.exo-investir__titre {
    margin: 0;
    color: var(--exo-bleu-nuit);
    text-transform: uppercase;
}

/* `.how_invest > div { display: flex; gap: 80px }` */
.exo-investir__corps {
    display: flex;
    gap: 80px;
    align-items: stretch;
}

.exo-investir__bornes {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.exo-investir__cartes {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Carte blanche, coin supérieur droit carré. Le corps de texte est cerulean 16
   (`.how_invest__main__item p`), posé ici pour être hérité. */
.exo-investir__carte {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding: 40px;
    border-radius: 20px 0 20px 20px;
    background: #ffffff;
    box-shadow: 0 0 60px 0 rgba(0, 112, 173, 0.1);
    text-align: center;
    color: var(--exo-cerulean);
    font-size: 16px;
    font-weight: 400;
}

.exo-investir__carte-titre {
    color: var(--exo-bleu-nuit);
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
}

.exo-investir__carte-valeur {
    color: var(--exo-jaune);
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    text-transform: uppercase;
}

.exo-investir__chevron img {
    display: block;
    width: 92px;
    height: auto;
}

/* `.how_invest .to_note` : bleu foncé, coin supérieur gauche carré. */
.exo-investir__note {
    padding: 20px;
    border-radius: 0 40px 40px 40px;
    background: var(--exo-bleu-fonce);
    color: var(--exo-blanc);
    font-size: 16px;
}

.exo-investir__note-titre {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
}

/* Carte du simulateur : 560px minimum en prod, coin supérieur droit carré.
   La photo est une balise (CSP) ; le dégradé blanc qui l'estompe vers le bas
   reste en CSS, posé par-dessus. */
.exo-investir__simulateur {
    position: relative;
    flex: 0 0 560px;
    min-width: 560px;
    padding: 40px;
    overflow: hidden;
    border-radius: 60px 0 60px 60px;
    background: rgba(255, 254, 254, 0.1);
    box-shadow: 0 0 60px 0 rgba(0, 112, 173, 0.1);
}

.exo-investir__simulateur-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.exo-investir__simulateur::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 47.64%, #ffffff 91.35%);
}

/* Bloc d'appel calé en bas, à 40px du bord inférieur et 10px du droit. */
.exo-investir__simulateur-appel {
    position: absolute;
    z-index: 1;
    bottom: 40px;
    right: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.exo-investir__simulateur-titre {
    color: var(--exo-bleu-nuit);
    text-align: center;
    font-size: 30px;
    font-weight: 700;
}

/* Le bouton du socle est déjà cerulean, 12px 0 12px 12px, 14px Bold capitales :
   il ne reste qu'à le centrer, comme le `margin: auto` de la prod. */
.exo-investir__simulateur-appel .exo-btn {
    margin: 0 auto;
}

/* ----- 4. Comment participer ? -------------------------------------------- */

.exo-demarche {
    position: relative;
    overflow: hidden;
    background: var(--exo-cerulean);
}

/* Chevrons décoratifs collés à l'angle supérieur droit de la bande. */
.exo-demarche__chevrons {
    position: absolute;
    top: 0;
    right: 0;
    max-width: 100%;
    height: auto;
}

[dir = "rtl"] .exo-demarche__chevrons {
    right: auto;
    left: 0;
    transform: scaleX(-1);
}

.exo-demarche__inner {
    position: relative;
    z-index: 1;
    padding: 60px 120px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* `.how_participate h1` : blanc, Regular 42, capitales. */
.exo-demarche__titre {
    margin: 0;
    color: var(--exo-blanc);
    text-transform: uppercase;
}

/* Encadré bleu foncé à 80%, filet cerulean, coin supérieur gauche carré. */
.exo-demarche__boite {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 800px;
    padding: 20px;
    border: 2px solid var(--exo-cerulean);
    border-radius: 0 20px 20px 20px;
    background: rgba(20, 63, 77, 0.8);
    box-shadow: 0 0 60px 0 rgba(0, 112, 173, 0.1);
}

.exo-demarche__etapes {
    margin: 0;
    padding: 0;
    list-style: decimal;
}

.exo-demarche__etapes li {
    margin-left: 20px;
    color: var(--exo-blanc);
    font-size: 16px;
    line-height: normal;
}

[dir = "rtl"] .exo-demarche__etapes li {
    margin-left: 0;
    margin-right: 20px;
}

/* Le bouton Souscrire est en 16px sur cette bande, pas en 14px comme ailleurs :
   valeur relevée sur `.how_participate div a`. */
.exo-demarche__cta {
    align-self: flex-start;
    font-size: 16px;
    text-transform: none;
}

/* ----- Écrans intermédiaires et mobile ------------------------------------ */

@media screen and (max-width: 1100px) {
    .exo-participer__corps {
        gap: 30px;
    }

    .exo-investir__corps {
        gap: 40px;
    }

    /* Sous 1100px, 560px de carte ne laissent plus assez de place aux bornes. */
    .exo-investir__simulateur {
        flex: 1 1 0;
        min-width: 0;
    }
}

@media screen and (max-width: 900px) {
    .exo-participer__inner,
    .exo-financer__inner,
    .exo-investir__inner,
    .exo-demarche__inner {
        padding: 40px 16px;
    }

    .exo-participer__corps,
    .exo-investir__corps {
        flex-direction: column;
        gap: 30px;
    }

    .exo-participer__visuel {
        flex: 0 0 auto;
        max-width: 100%;
        align-self: center;
    }

    .exo-participer__sous-titre,
    .exo-investir__carte-valeur,
    .exo-investir__simulateur-titre {
        font-size: 24px;
    }

    /* Les modalités passent l'une sous l'autre : le filet vertical devient un
       trait horizontal, la pastille reste centrée dessus. */
    .exo-financer__modalites {
        flex-direction: column;
        gap: 24px;
    }

    .exo-financer__filet {
        flex: 0 0 1px;
        width: 100%;
        height: 1px;
    }

    .exo-investir__simulateur {
        min-height: 420px;
    }

    .exo-investir__carte {
        padding: 24px;
    }
}