/* ═══════════════════════════════════════════════════════════════════════════
   Omega Kube — Page « L'association »

   Page volontairement sobre : peu de fonds, peu de bordures, beaucoup de
   respiration. Elle sert à situer l'association, pas à convaincre — c'est le
   rôle des pages Services et Nous rejoindre.

   S'appuie sur les variables de thème de main.css : suit donc automatiquement
   le thème sombre comme le thème clair.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 5 rem en haut ET en bas donnaient 160 px de vide entre deux sections, pour
   des blocs qui n'en font parfois que 150. La page paraissait décousue.
   Padding réduit, et les sections consécutives ne cumulent plus leurs marges. */
.asso-section {
    padding: 3.25rem 2rem;
}

.asso-section:first-of-type {
    padding-top: 1.5rem;
}

.asso-section--last {
    padding-bottom: 5rem;
}

/* Pas de barre entre les sections : les titres, avec leur filet d'accent,
   marquent déjà les ruptures. Une ligne pleine largeur en plus n'ajoutait
   rien qu'un trait à regarder. */
.asso-section + .asso-section > .asso-container {
    padding-top: 0;
}

/* UNE SEULE largeur pour toute la page. Deux conteneurs de largeurs
   différentes (1080 px et 720 px) produisaient deux gouttières distinctes :
   les sections ne commençaient pas au même endroit, ce qui se voit
   immédiatement au défilement. */
.asso-container {
    max-width: 1080px;
    margin: 0 auto;
}

/* Mesure de lecture bornée pour les paragraphes seuls, SANS toucher à
   l'alignement à gauche : le texte reste calé sur la même gouttière. */
.asso-lead,
.asso-intro p,
.asso-note {
    max-width: 720px;
}

/* Titres de section discrets : un simple filet d'accent au lieu d'un bloc
   « tag + titre + sous-titre » qui alourdirait une page de cette nature. */
.asso-heading {
    font-size: clamp(1.25rem, 2.6vw, 1.6rem);
    margin: 0 0 2.5rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--glass-border);
    position: relative;
}

.asso-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 56px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-light));
}

.asso-lead {
    color: var(--text-secondary);
    line-height: 1.8;
    margin: 0 0 2.5rem;
}

.asso-note {
    margin: 2rem 0 0;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--text-muted);
}

/* ── Identité ───────────────────────────────────────────────────────────────
   Paragraphe et repères chiffrés dans un même bloc encadré. Isolés au milieu
   de la page, ils flottaient sans rien pour les rattacher — c'est ce qui
   donnait l'impression de blocs posés au hasard. */

.asso-identity {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 3rem;
    align-items: center;
    padding: 2.5rem;
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    background: var(--card-bg);
}

.asso-identity-text h2 {
    font-size: clamp(1.2rem, 2.4vw, 1.5rem);
    margin: 0 0 0.9rem;
}

.asso-identity-text p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.85;
    font-size: 0.98rem;
}

/* Repères en colonne : alignés les uns sous les autres, ils se lisent comme
   une fiche d'identité. En ligne, ils se confondaient avec le paragraphe. */
.asso-reperes {
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
    padding-left: 3rem;
    border-left: 1px solid var(--glass-border);
}

.asso-repere {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.asso-repere-value {
    font-family: 'OmegaLarge', sans-serif;
    font-size: 1.5rem;
    line-height: 1;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-light));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.asso-repere-label {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--text-muted);
}

/* ── Équipe ─────────────────────────────────────────────────────────────── */

.asso-people {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1rem;
}

/* Pas d'encadré : une simple ligne au survol suffit. Dix cartes bordées
   auraient produit une grille lourde pour une information aussi brève qu'un
   nom et un rôle. */
.asso-person {
    /* `transparent` et non « pas de fond » : sans déclaration explicite, le
       fond natif du <button> (gris clair) s'appliquerait. */
    background: transparent;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.75rem;
    border-radius: 12px;
    border: 1px solid transparent;
    transition: border-color 0.25s ease, background-color 0.25s ease;
}

.asso-person:hover {
    border-color: var(--glass-border);
    background: var(--card-bg);
}

.asso-avatar {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
}

.asso-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.asso-avatar-fallback {
    font-family: 'OmegaLarge', sans-serif;
    font-size: 1.05rem;
    color: #fff;
}

.asso-person-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.asso-person-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.asso-person-role {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ── Partenaires ────────────────────────────────────────────────────────── */

.asso-partners {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.asso-partner {
    background: var(--card-bg);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    background: var(--card-bg);
    color: var(--text-primary);
    text-decoration: none;
    transition: border-color 0.25s ease, transform 0.25s ease;
}

a.asso-partner:hover {
    border-color: var(--accent-primary);
    transform: translateY(-2px);
}

.asso-partner-logo {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
}

.asso-partner-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.asso-partner-name {
    font-weight: 600;
    font-size: 0.95rem;
    flex: 1;
    min-width: 0;
}

.asso-partner svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--text-muted);
}

/* ── Réseaux ────────────────────────────────────────────────────────────── */

.asso-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.asso-social {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.15rem;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: var(--card-bg);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.asso-social:hover {
    color: var(--text-primary);
    border-color: var(--accent-primary);
    transform: translateY(-2px);
}

.asso-social svg {
    width: 16px;
    height: 16px;
    color: var(--accent-light);
}

/* ── Soutien ────────────────────────────────────────────────────────────── */

.asso-support {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
}

.asso-support-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.65rem;
    border-radius: 14px;
    border: 1px solid var(--glass-border);
    background: var(--card-bg);
}

.asso-support-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.asso-support-head h3 {
    margin: 0;
    font-size: 1.05rem;
}

.asso-support-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: #fff;
}

.asso-support-icon svg {
    width: 17px;
    height: 17px;
}

.asso-support-card p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--text-secondary);
    flex: 1;
}

.asso-support-card .btn {
    justify-content: center;
    margin-top: 0.35rem;
}

/* URL de don non renseignée : on l'annonce plutôt que d'afficher un bouton
   qui ne mène nulle part. */
.asso-support-soon {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-start;
    margin-top: 0.35rem;
    padding: 0.5rem 0.9rem;
    border-radius: 8px;
    font-size: 0.83rem;
    font-weight: 600;
    background: rgba(230, 160, 60, 0.12);
    color: #e0a13c;
    border: 1px solid rgba(230, 160, 60, 0.3);
}

.asso-support-soon svg {
    width: 14px;
    height: 14px;
}

/* ── Contact ────────────────────────────────────────────────────────────── */

.asso-contact {
    text-align: center;
    padding: 3rem 2rem;
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    background: var(--card-bg);
    position: relative;
    overflow: hidden;
}

.asso-contact::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(142, 36, 170, 0.14), transparent 65%);
    pointer-events: none;
}

.asso-contact > * {
    position: relative;
}

.asso-contact h2 {
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    margin: 0 0 0.85rem;
}

.asso-contact p {
    color: var(--text-secondary);
    line-height: 1.75;
    margin: 0 auto 2rem;
    max-width: 480px;
}

.asso-contact-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .asso-section {
        padding: 3.5rem 1.25rem;
    }

    .asso-section--last {
        padding-bottom: 5rem;
    }

    .asso-people,
    .asso-partners,
    .asso-support {
        grid-template-columns: 1fr;
    }

    .asso-reperes {
        gap: 1.75rem;
    }

    .asso-contact {
        padding: 2.25rem 1.35rem;
    }

    .asso-contact-links .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HISTOIRE & MEMBRES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Parcours ───────────────────────────────────────────────────────────────
   Grille de cartes numérotées. La frise chronologique était le seul élément de
   la page dans un autre langage visuel — tout le reste est en grilles de
   cartes — d'où l'impression d'incohérence.

   Les dates ont disparu au profit d'une numérotation : elles imposaient un
   alignement que rien d'autre n'utilisait, et un libellé long comme
   « Aujourd'hui » débordait systématiquement de sa colonne.
   ═══════════════════════════════════════════════════════════════════════════ */

.asso-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
}

.asso-step {
    position: relative;
    padding: 1.75rem 1.5rem 1.5rem;
    border-radius: 14px;
    border: 1px solid var(--glass-border);
    background: var(--card-bg);
    transition: border-color 0.25s ease, transform 0.25s ease;
}

.asso-step:hover {
    border-color: var(--accent-primary);
    transform: translateY(-3px);
}

/* Le numéro en filigrane : il situe l'étape sans concurrencer le titre. */
.asso-step-num {
    display: block;
    font-family: 'OmegaLarge', sans-serif;
    font-size: 1.6rem;
    line-height: 1;
    margin-bottom: 0.85rem;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-light));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.asso-step-title {
    margin: 0 0 0.6rem;
    font-size: 1rem;
    line-height: 1.35;
    color: var(--text-primary);
}

.asso-step-text {
    margin: 0;
    font-size: 0.91rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

/* ── Cartes cliquables ──────────────────────────────────────────────────────
   Équipe et partenaires ouvrent désormais une fiche. Devenues des <button>,
   elles doivent perdre le style natif — sans quoi les titres héritent du noir
   système, illisible sur fond sombre. */

.asso-person,
.asso-partner,
.asso-member {
    /* BUG CORRIGÉ : ces cartes sont des <button>. Sans `background`
       explicite, le navigateur applique son fond natif — rgb(239,239,239),
       un gris clair — sur lequel le texte blanc devenait illisible.
       `color` avait été neutralisé, pas le fond. */
    /* Réinitialisation du style natif du <button>, SANS toucher au fond :
       chaque type de carte déclare le sien plus haut, et cette règle étant
       déclarée après, un `background` ici les écraserait toutes. */
    font-family: inherit;
    font-size: inherit;
    color: var(--text-primary);
    text-align: left;
    width: 100%;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.asso-person:focus-visible,
.asso-partner:focus-visible,
.asso-member:focus-visible {
    outline: 2px solid var(--accent-light);
    outline-offset: 2px;
}

.asso-partner svg {
    transition: transform 0.25s ease;
}

.asso-partner:hover svg {
    transform: translateX(3px);
    color: var(--accent-light);
}

/* ── Membres de l'association ───────────────────────────────────────────────
   Affichage nettement plus dense que celui de l'équipe : la liste est prévue
   pour grossir, et un membre n'a qu'un nom à montrer là où un agent a un rôle.
   Des cartes de la même taille que celles de l'équipe donneraient une page
   interminable dès la trentaine de membres. */

.asso-members {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.asso-member {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    width: auto;
    padding: 0.45rem 0.9rem 0.45rem 0.45rem;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: var(--card-bg);
    transition: border-color 0.25s ease, transform 0.25s ease;
}

.asso-member-avatar {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
}

.asso-member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.asso-member-avatar .asso-avatar-fallback {
    font-size: 0.78rem;
}

.asso-member-name {
    font-size: 0.88rem;
    font-weight: 500;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .asso-section {
        padding: 3.5rem 1.25rem;
    }

    .asso-section--last {
        padding-bottom: 5rem;
    }

    .asso-people,
    .asso-partners,
    .asso-support {
        grid-template-columns: 1fr;
    }

    .asso-reperes {
        gap: 1.75rem;
    }

    .asso-contact {
        padding: 2.25rem 1.35rem;
    }

    .asso-contact-links .btn {
        width: 100%;
        justify-content: center;
    }
}


/* ── Hero ───────────────────────────────────────────────────────────────────
   Le hero générique réserve 475 px pour 222 px de contenu : près de la moitié
   en vide. Sur une page de présentation, cette emphase n'a pas lieu d'être —
   elle repousse l'information utile sous la ligne de flottaison. */
.asso-hero {
    min-height: 0;
    padding: 8rem 2rem 3rem;
}

.asso-hero .page-hero-content {
    max-width: 720px;
}

@media (max-width: 768px) {
    .asso-hero {
        padding: 6.5rem 1.25rem 2rem;
    }

    .asso-section {
        padding: 2.5rem 1.25rem;
    }

    .asso-section + .asso-section > .asso-container {
        padding-top: 0;
    }
}

/* ── Fiche membre sobre ─────────────────────────────────────────────────────
   La fiche des agents est bâtie pour des données riches : ancienneté,
   compétences, réseaux personnels. Les membres n'en ont pas. Réutilisée telle
   quelle, elle laissait des blocs vides et un encart « Membre depuis »
   désaligné au milieu de la fiche. */

.team-modal-overlay.is-sobre .team-modal {
    max-width: 420px;
}

.team-modal-overlay.is-sobre .team-modal-content {
    text-align: center;
}

.team-modal-overlay.is-sobre .team-modal-bio {
    margin: 0;
    padding: 0 0.5rem;
}

/* Les blocs masqués sont posés en `hidden` par le JS ; on neutralise ici tout
   `display` déclaré ailleurs qui les rendrait à nouveau visibles. */
.team-modal-overlay.is-sobre #team-modal-stats[hidden],
.team-modal-overlay.is-sobre #team-modal-skills[hidden],
.team-modal-overlay.is-sobre #team-modal-social[hidden] {
    display: none !important;
}

/* ── Identité et parcours : mobile ──────────────────────────────────────── */

@media (max-width: 860px) {
    .asso-identity {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 1.85rem 1.5rem;
    }

    /* En colonne, la barre verticale n'a plus de sens : elle devient un
       filet horizontal de séparation. */
    .asso-reperes {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1.75rem;
        padding-left: 0;
        padding-top: 1.75rem;
        border-left: none;
        border-top: 1px solid var(--glass-border);
    }
}

@media (max-width: 600px) {
    .asso-steps {
        grid-template-columns: 1fr;
    }
}