/* ==========================================================================
   QUI SOMMES-NOUS : styles propres à la page
   ========================================================================== */

/* ---------- En-tête : texte + chiffres clés ---------- */
.entete-asso {
    display: grid;
    gap: var(--esp-4);
    align-items: end;
}

.entete-asso__texte {
    display: grid;
    gap: var(--esp-2);
    margin-bottom: var(--esp-3);
}

.lien-fleche {
    font-weight: 700;
    text-decoration: none;
}

.lien-fleche:hover {
    text-decoration: underline;
}

/* Mobile : les 3 chiffres côte à côte */
.chiffres {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--esp-1);
    padding: 0;
    list-style: none;
}

.chiffres li {
    padding: var(--esp-1) var(--esp-2);
    border-left: 3px solid var(--color-blue-light);
    background-color: var(--color-gray-placeholder);
    border-radius: 0 var(--br-small) var(--br-small) 0;
}

.chiffres strong {
    display: block;
    color: var(--color-white);
    font-size: clamp(1.125rem, 0.9rem + 1.2vw, 1.75rem);
    line-height: 1.1;
}

.chiffres span {
    display: block;
    color: var(--color-gray-texte);
    font-size: 0.8rem;
    line-height: 1.3;
}

@media (min-width: 900px) {
    .entete-asso {
        grid-template-columns: 1fr 320px;
        gap: var(--esp-6);
    }

    .chiffres {
        grid-template-columns: 1fr;
        gap: var(--esp-2);
    }

    .chiffres li {
        padding: var(--esp-2) var(--esp-3);
    }
}

/* ---------- Grilles de l'équipe ---------- */
.equipe {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--esp-2);
    padding: 0;
    list-style: none;
}

@media (min-width: 700px) {
    .equipe--bureau { grid-template-columns: repeat(3, 1fr); }
    .equipe--staff  { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1000px) {
    .equipe--bureau { grid-template-columns: repeat(5, 1fr); }
}

/* ---------- Carte membre : même style pour le bureau et le staff ---------- */
.membre {
    overflow: hidden;
    border: 1px solid var(--color-gray-ligne);
    border-radius: var(--br-large);
    background-color: var(--color-gray-sombre);
}

.membre__photo {
    aspect-ratio: 1 / 1;
}

@media (min-width: 700px) {
    .membre__photo {
        aspect-ratio: 3 / 4;
    }
}

.membre__photo img,
.membre__photo .photo-attente {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.membre__texte {
    padding: 0.75rem;
}

.membre__role {
    color: var(--color-blue-light);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.membre h3 {
    font-size: 1.125rem;
}

.membre__detail {
    margin-top: 0.25rem;
    color: var(--color-gray-texte);
    font-size: var(--fs-petit);
}

/* ---------- Partenaires ---------- */
.partenaires {
    display: grid;
    gap: var(--esp-4);
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .partenaires {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--esp-3);
    }
}

.partenaire__logo {
    aspect-ratio: 2 / 1;
    margin-bottom: var(--esp-2);
    overflow: hidden;
    border-radius: var(--br-large);
    background-color: var(--color-white2);
}

.partenaire__logo img,
.partenaire__logo .photo-attente {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.partenaire h3 {
    margin-bottom: var(--esp-1);
}

.partenaire h3 a {
    color: var(--color-white);
}

.partenaire p {
    font-size: var(--fs-petit);
}