/* Mêmes dimensions que le hero de l'accueil (.hero dans accueil.css) pour que les
   deux pages partagent exactement le même gabarit et que la mascotte tombe au même
   endroit que les mockups. */
.affiliation-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    max-width: 1100px;
    width: 90%;
    margin: 70px auto;
    flex-wrap: wrap;
}

.affiliation-hero-texte {
    flex: 1 1 480px;
}

.affiliation-hero-texte h1 {
    font-size: 40px;
    line-height: 1.2;
    margin: 16px 0;
}

.affiliation-hero-texte h1 span {
    color: var(--couleur-primaire);
}

.affiliation-hero-texte p {
    font-size: 17px;
    color: #555;
    max-width: 520px;
}

/* Même flex-basis que .hero-visuel de l'accueil : la mascotte occupe donc la même
   colonne que les mockups, et s'y centre. */
.affiliation-hero-mascotte {
    flex: 1 1 380px;
    text-align: center;
}

.affiliation-hero-mascotte img {
    width: 100%;
    max-width: 300px;
}

.affiliation-avantages-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

.affiliation-avantage-carte {
    background: var(--couleur-blanc);
    border-radius: var(--radius);
    box-shadow: var(--ombre);
    padding: 34px;
    text-align: center;
}

.affiliation-avantage-mascotte {
    width: 70px;
    height: 70px;
    object-fit: contain;
    margin-bottom: 12px;
}

.affiliation-avantage-carte h3 {
    margin: 0 0 16px;
    font-size: 20px;
}

.affiliation-liste-check {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

/* Retrait suspendu via padding + coche en position absolue, PAS via display:flex :
   en flex, chaque <strong>/<a> du texte devient un élément flex distinct et le
   paragraphe se disloque en colonnes. Le padding-left aligne les lignes suivantes
   sur le texte, jamais sous la coche. */
.affiliation-liste-check li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
    color: #555;
    font-size: 15px;
    line-height: 1.5;
}

.affiliation-liste-check li::before {
    content: "✓";
    position: absolute;
    left: 4px;
    top: 0;
    color: var(--couleur-succes, #2e7d32);
    font-weight: bold;
}

.affiliation-regle {
    max-width: 780px;
    margin: 60px auto 0;
    background: var(--couleur-blanc);
    border: 1px solid #eee;
    border-left: 4px solid var(--couleur-primaire);
    border-radius: var(--radius);
    box-shadow: var(--ombre);
    padding: 26px 30px;
}

.affiliation-regle h3 {
    margin: 0 0 10px;
    font-size: 18px;
}

.affiliation-regle > p {
    margin: 0 0 16px;
    color: #555;
    font-size: 15px;
}

/* Même comportement que le hero de l'accueil (voir accueil.css) : sur téléphone, la
   mascotte passe avant le texte et l'espacement se resserre. */
@media (max-width: 700px) {
    /* Passage explicite en colonne centrée : en flex-wrap avec justify-content
       space-between, la mascotte seule sur sa ligne se collait à gauche. */
    .affiliation-hero {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 30px auto 40px;
        gap: 10px;
        text-align: center;
    }

    .affiliation-hero-texte h1 {
        font-size: 30px;
    }

    .affiliation-hero-texte p {
        max-width: 100%;
    }

    .affiliation-hero-mascotte {
        order: -1;
        flex: 0 0 auto;
        width: 100%;
        margin-bottom: 10px;
    }

    .affiliation-hero-mascotte img {
        max-width: 190px;
    }

    .hero-boutons {
        justify-content: center;
    }

    .affiliation-avantage-carte {
        padding: 26px 20px;
    }

    .affiliation-regle {
        margin-top: 34px;
        padding: 22px 20px;
    }
}