/* ============================================================
   PAGE — Comment souscrire ?
   Sections : Qui peut souscrire / Comment souscrire / Moyens de
   paiement (+ accordéon arbitrage) / Montant maximum
   ============================================================ */

body.comment_souscrire main {
    padding: 0;
}

/* Marges verticales communes entre sections */
.commentWho,
.commentHow,
.commentPay,
.commentMax {
    padding: 30px var(--container-padding-x);
}

/* Titres de section uniformes */
.commentWho__title,
.commentHow__title,
.commentPay__title,
.commentMax__title {
    color: var(--color-primary-midnightblue);
    font-size: var(--font-size-xl);     /* 32px */
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: 30px;
}

/* ============================================================
   1) Qui peut souscrire ?  — image gauche / contenu droite
   ============================================================ */
.commentWho {
    display: flex;
    align-items: stretch;            /* image et contenu à la même hauteur */
    gap: 30px;
}

.commentWho__illu {
    flex: 0 0 366px;
    width: 366px;
    align-self: stretch;             /* hauteur = hauteur du panneau de droite */
    overflow: hidden;
}

.commentWho__illu img {
    width: 100%;
    height: 100%;
    object-fit: cover;               /* recadrage automatique, pas de déformation */
    display: block;
}

.commentWho__content {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.commentWho__title {
    margin-bottom: 10px;
}

.commentWho__group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.commentWho__lead {
    color: var(--color-primary-midnightblue);
    font-size: var(--font-size-md);
    font-weight: 400;
    line-height: 1.5;
}

.commentWho__lead strong,
.commentWho__lead b {
    font-weight: 700;
}

.commentWho__bullets {
    list-style: disc;
    padding-left: 26px;
    color: var(--color-primary-midnightblue);
    font-size: var(--font-size-md);
    font-weight: 400;
    line-height: 1.5;
}

.commentWho__bullets li {
    margin: 0;
}

/* Variante avec arrow.svg en puce (pour les sous-points sous "Les salariés") */
.commentWho__bullets--arrow {
    list-style: none;
    padding-left: 26px;       /* indentation visuelle (sous le mot "Les salariés") */
}

.commentWho__bullets--arrow li {
    position: relative;
    padding-left: 26px;       /* place pour l'arrow + un espace */
    margin-bottom: 4px;
}

.commentWho__bullets--arrow li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35em;
    width: 16px;
    height: 16px;
    background-image: url("https://assets.weshare.amundi.com/xnet/2026/images/arrow.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.commentWho__retired {
    color: var(--color-primary-midnightblue);
    font-size: var(--font-size-md);
    font-weight: 400;
    line-height: 1.5;
}

.commentWho__retired strong,
.commentWho__retired b {
    font-weight: 700;
}

/* ============================================================
   2) Comment souscrire ?
   ============================================================ */
.commentHow {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Liste numérotée 1./2./3. */
.commentHow__steps {
    list-style: decimal;
    list-style-position: outside;
    padding-left: 26px;
    color: var(--color-primary-midnightblue);
    font-size: var(--font-size-md);
    font-weight: 400;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.commentHow__steps li {
    padding-left: 4px;
}

.commentHow__steps strong,
.commentHow__steps b {
    font-weight: 700;
}

.commentHow__steps a {
    text-decoration: underline;
}

/* Phrase d'accroche (en cyan) sous la liste */
.commentHow__hint {
    color: var(--color-primary-cyan);
    font-size: var(--font-size-md);
    font-weight: 400;
    line-height: 1.5;
}

/* Le bouton souscrire prend une largeur fixe (250px) */
.commentHow .btnSubscribe {
    width: 250px;
    align-self: flex-start;
}

/* ============================================================
   3) Quels sont les moyens de paiement ?
   ============================================================ */
.commentPay {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.commentPay__lead {
    color: var(--color-primary-cyan);
    font-size: var(--font-size-lg);     /* 20px */
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.2;
}

/* 2 cartes côte à côte avec « ET/OU » au milieu */
.commentPay__choice {
    display: flex;
    align-items: stretch;
    gap: 30px;
}

.commentPay__option {
    flex: 1 1 0;
    padding: 20px;
    background: var(--color-beige-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    text-align: center;
}

/* Variante : la 2ᵉ carte (arbitrage) a une icône à gauche du texte */
.commentPay__option--wide {
    flex-direction: row;
    text-align: left;
}

.commentPay__icon {
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    display: block;
    object-fit: contain;
}

.commentPay__optionText {
    flex: 1 1 0;
    color: var(--color-primary-midnightblue);
    font-size: var(--font-size-md);
    font-weight: 400;
    line-height: 1.5;
}

.commentPay__optionText strong,
.commentPay__optionText b {
    font-weight: 700;
}

.commentPay__optionText .warn {
    color: var(--color-gold);
    font-weight: 700;
    margin-top: var(--space-2);
}

.commentPay__sep {
    align-self: center;
    color: var(--color-primary-midnightblue);
    font-size: var(--font-size-md);
    font-weight: 700;
    text-transform: uppercase;
}

/* ----- Accordéon « Comment réaliser un arbitrage ? » ----- */
.commentArbi {
    background: var(--color-grey-6);
    margin-top: var(--space-5);
}

.commentArbi__head {
    width: 100%;
    padding: 10px 20px;
    background: var(--color-cyan-04);
    color: var(--color-primary-white);
    font-size: var(--font-size-md);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.3;
    text-align: left;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.commentArbi__head:focus-visible {
    outline: 2px solid var(--color-primary-white);
    outline-offset: -4px;
}

/* Wrapper de l'icône +/-.
   Pas de bordure CSS : les SVG plus.svg / minus.svg contiennent
   déjà leur propre cercle. Le wrapper ne fait que les dimensionner
   et les centrer. */
.commentArbi__icon {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.commentArbi__plus,
.commentArbi__minus {
    width: 22px;
    height: 22px;
    display: block;
}

/* État replié (sans .is-open) : on affiche +, on cache - */
.commentArbi:not(.is-open) .commentArbi__minus {
    display: none;
}

/* État ouvert (.is-open) : on affiche -, on cache + */
.commentArbi.is-open .commentArbi__plus {
    display: none;
}

/* Body de l'accordéon : visible quand .is-open */
.commentArbi__body {
    display: none;
    padding: 20px;
}

.commentArbi.is-open .commentArbi__body {
    display: block;
}

.commentArbi__inner {
    background: var(--color-primary-white);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.commentArbi__intro {
    color: var(--color-primary-midnightblue);
    font-size: var(--font-size-md);
    font-weight: 700;
    line-height: 1.4;
}

/* Étape 1 : 2 colonnes (texte + vidéo) */
.commentArbi__step1 {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}

.commentArbi__step1Text {
    flex: 1 1 300px;
}

.commentArbi__video {
    flex: 1 1 400px;
    min-width: 0;
    height: 290px;
    outline: 2px solid var(--color-primary-midnightblue);
    outline-offset: -2px;
}

/* Étapes 2 et 3 : pleine largeur */
.commentArbi__step {
    /* rien de particulier, le flex parent gère le gap */
}

.commentArbi__stepTitle {
    color: var(--color-primary-cyan);
    font-size: var(--font-size-md);
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: var(--space-2);
}

.commentArbi__stepBody {
    color: var(--color-primary-midnightblue);
    font-size: var(--font-size-md);
    font-weight: 400;
    line-height: 1.5;
}

.commentArbi__stepBody strong,
.commentArbi__stepBody b {
    font-weight: 700;
}

.commentArbi__stepBody p + p {
    margin-top: var(--space-2);
}

.commentArbi__stepBody a {
    text-decoration: underline;
}

.commentArbi__stepBody .warn {
    color: var(--color-gold);
    font-weight: 700;
}

/* ============================================================
   4) Quel est le montant maximum de souscription ?
   ============================================================ */
.commentMax__layout {
    display: flex;
    align-items: flex-start;
    gap: 30px;
}

.commentMax__col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.commentMax__lead {
    color: var(--color-primary-cyan);
    font-size: var(--font-size-lg);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.2;
}

.commentMax__plafond {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Numéro 1./2. dans le titre (inline, en cyan + gras) */
.commentMax__num {
    color: var(--color-primary-cyan);
    margin-right: 6px;
}

.commentMax__plafondTitle {
    color: var(--color-primary-midnightblue);
    font-size: var(--font-size-md);
    font-weight: 700;
    line-height: 1.4;
}

.commentMax__plafondBody {
    color: var(--color-primary-midnightblue);
    font-size: var(--font-size-md);
    font-weight: 400;
    line-height: 1.5;
}

.commentMax__plafondBody strong,
.commentMax__plafondBody b {
    font-weight: 700;
}

.commentMax__plafondBody p + p {
    margin-top: var(--space-3);
}

.commentMax__plafondBody .warn {
    color: var(--color-gold);
    font-weight: 700;
}

/* Carte droite : vidéo + bloc rémunération */
.commentMax__aside {
    flex: 0 0 507px;
    align-self: stretch;
    padding: 20px;
    background: var(--color-beige-bg);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.commentMax__video {
    height: 256px;
    width: 100%;
}

.commentMax__remu {
    flex: 1 1 0;
    padding: 20px;
    background: var(--color-primary-white);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.commentMax__remuTitle {
    color: var(--color-gold-dark);
    font-size: var(--font-size-lg);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.2;
}

.commentMax__remuBody {
    color: var(--color-gold-dark);
    font-size: var(--font-size-md);
    font-weight: 400;
    line-height: 1.5;
}

.commentMax__remuBody strong,
.commentMax__remuBody b {
    font-weight: 700;
}

.commentMax__remuBody p + p {
    margin-top: var(--space-2);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1200px) {
    .commentWho,
    .commentHow,
    .commentPay,
    .commentMax {
        padding-left: 80px;
        padding-right: 80px;
    }

    .commentMax__aside {
        flex-basis: 380px;
    }
}

@media (max-width: 1000px) {
    .commentMax__layout {
        flex-direction: column;
    }

    .commentMax__aside {
        flex: 0 0 auto;
        width: 100%;
    }
}

@media (max-width: 900px) {
    .commentWho,
    .commentHow,
    .commentPay,
    .commentMax {
        padding-left: var(--space-6);
        padding-right: var(--space-6);
    }

    .commentWho {
        flex-direction: column;
    }

    .commentWho__illu {
        flex: 0 0 auto;
        width: 100%;
        height: 250px;
    }

    .commentPay__choice {
        flex-direction: column;
    }

    .commentPay__option--wide {
        flex-direction: column;
        text-align: center;
    }

    .commentArbi__step1 {
        flex-direction: column;
    }

    .commentArbi__video {
        width: 100%;
        height: 240px;
    }

    .commentWho__title,
    .commentHow__title,
    .commentPay__title,
    .commentMax__title {
        font-size: 24px;
    }
}