/**
 * Page Association.
 *
 * Complète le template (rs-box-testimony, rs-team-1, section-heading,
 * supheading) : on n'ajoute ici que la photo d'ouverture, le médaillon
 * d'initiales et quelques ajustements de mise en page.
 *
 * Les blocs de la page sont dans includes/association-*.php. La feuille
 * est commune aux cinq : plusieurs règles (.asso-texte, .asso-section-media)
 * sont partagées, les recopier dans chaque bloc les ferait diverger.
 */

/* ---- Ouverture ---- */
.asso-hero-media {
    position: relative;
}

.asso-hero-media img {
    width: 100%;
    border-radius: 15px;
}

.asso-badge {
    position: absolute;
    right: -15px;
    bottom: -20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background-color: var(--color-rouge, #c1272d);
    color: #ffffff;
    text-align: center;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}

.asso-badge-annee {
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
}

.asso-badge-texte {
    margin-top: 4px;
    padding: 0 12px;
    font-size: 12px;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.asso-hero-texte {
    padding-left: 15px;
}

/* ---- Texte courant ---- */
.asso-texte {
    font-size: 16.5px;
    line-height: 1.8;
}

.asso-texte p {
    margin-bottom: 15px;
}

/* ---- Mot du président (présentation « lettre ») ----
 * Carte blanche sur fond crème, texte aligné à gauche comme un courrier,
 * signature manuscrite en bas à droite (includes/association-president.php).
 */
.asso-lettre {
    padding: 80px 0;
    background-color: var(--color-creme, #FFF8E7);
}

.asso-lettre-carte {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 56px 70px 48px;
    overflow: hidden;
    border-radius: 22px;
    background-color: #ffffff;
    box-shadow: 0 10px 40px rgba(150, 90, 20, 0.10);
}

/* Grand guillemet décoratif en haut à droite */
.asso-lettre-guillemet {
    position: absolute;
    top: -30px;
    right: 34px;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 260px;
    line-height: 1;
    color: var(--color-jaune, #F79E31);
    opacity: 0.18;
    pointer-events: none;
    user-select: none;
}

.asso-lettre-titre {
    position: relative;
    margin: 0 0 26px;
    color: var(--color-rouge, #c1272d);
    font-size: 42px;
}

.asso-lettre-texte {
    position: relative;
    color: #444444;
    font-size: 16.5px;
    line-height: 1.85;
}

.asso-lettre-texte p {
    margin: 0 0 14px;
}

/* « Chers adhérents, » */
.asso-lettre-texte p:first-child {
    color: #222222;
    font-weight: 700;
}

.asso-lettre-texte p:last-child {
    margin-bottom: 0;
}

.asso-lettre-signature {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px dashed #ecdcc4;
}

.asso-lettre-nom {
    font-family: "Pacifico", cursive;
    font-size: 28px;
    line-height: 1.2;
    color: #2b2b2b;
    text-align: right;
}

.asso-lettre-role {
    display: block;
    margin-top: 4px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-orange, #D66B35);
}

.asso-lettre-photo,
.asso-lettre-initiales {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border: 4px solid var(--color-creme, #FFF8E7);
    border-radius: 50%;
}

.asso-lettre-photo {
    object-fit: cover;
}

.asso-lettre-initiales {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-rouge, #c1272d);
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
}

/* Emplacement vide, visible uniquement par un administrateur connecté */
.asso-photo-vide {
    border: 2px dashed var(--color-rouge, #c1272d);
    background-color: rgba(0, 0, 0, 0.04);
}

/* ---- Sections alternées (histoire, projet éducatif) ---- */
.asso-section-media {
    width: 100%;
    border-radius: 15px;
}

.asso-section-texte {
    padding: 0 15px;
}

.asso-section-alt {
    background-color: #f8f8f8;
}

/* ---- Bureau ---- */
.asso-equipe .rs-team-1 {
    height: calc(100% - 30px);
    padding-bottom: 20px;
}

.asso-equipe .rs-team-1 .media-box {
    padding-top: 25px;
}

.asso-membre-photo {
    width: 110px;
    height: 110px;
    margin: 0 auto;
    object-fit: cover;
    border-radius: 50%;
}

/* Médaillon affiché quand le membre n'a pas de photo */
.asso-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 110px;
    height: 110px;
    margin: 0 auto;
    border-radius: 50%;
    background-color: var(--color-rouge, #c1272d);
    color: #ffffff;
    font-size: 36px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.asso-equipe-note {
    max-width: 640px;
    margin: 10px auto 0;
    font-size: 16.5px;
    line-height: 1.75;
}

.ci-bouton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 12px 22px;
    border-radius: 30px;
    background-color: var(--color-rouge, #BD3223);
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
}

.ci-bouton:hover {
    background-color: var(--color-jaune, #F79E31);
}


@media (max-width: 991px) {
    .asso-hero-texte,
    .asso-section-texte {
        padding: 30px 0 0;
    }

    .asso-badge {
        right: 15px;
        bottom: -25px;
        width: 100px;
        height: 100px;
    }

    .asso-badge-annee {
        font-size: 26px;
    }
}

.asso-histoire-media {
    position: sticky;
    top: 120px;
}

.asso-histoire-repli {
    position: relative;
    overflow: hidden;
    max-height: 420px;
    transition: max-height 0.5s ease;
}

/* Fondu en bas du texte replié */
.asso-histoire-repli::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 110px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 90%);
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.asso-histoire-repli.is-ouvert,
.asso-histoire-repli.is-court {
    max-height: none;
}

.asso-histoire-repli.is-ouvert::after,
.asso-histoire-repli.is-court::after {
    opacity: 0;
}

.asso-histoire-suite {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 11px 22px;
    border: none;
    border-radius: 30px;
    background-color: var(--color-rouge, #BD3223);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.asso-histoire-suite:hover {
    background-color: #9E2A1D;
}

.asso-histoire-suite[aria-expanded="true"] i {
    transform: rotate(180deg);
}

/* Sur mobile, la photo est au-dessus du texte : elle ne suit pas */
@media (max-width: 991px) {
    .asso-histoire-media {
        position: static;
        margin-bottom: 30px;
    }
}

@media (max-width: 767px) {
    .asso-lettre {
        padding: 50px 0;
    }

    .asso-lettre-carte {
        padding: 40px 26px 34px;
        border-radius: 18px;
    }

    .asso-lettre-guillemet {
        right: 14px;
        font-size: 180px;
    }

    .asso-lettre-titre {
        font-size: 32px;
    }

    .asso-lettre-texte {
        font-size: 15.5px;
    }

    .asso-lettre-nom {
        font-size: 23px;
    }
}