/* ═══════════════════════════════════════════════════════════
   BRIO — css/style_clubs_associations.css
   Landing /logiciel-gestion-association-sportive.

   Cette feuille ne se suffit pas à elle-même : elle se charge APRÈS
   css/style_coach_business.css, qui porte le socle de mise en page commun aux
   landings produit (.navbar, .hero, .features, .cb_plans, .faq_grid, .cta…).
   Dupliquer ce socle aurait figé deux copies d'un même gabarit ; on ne trouve
   donc ici que les blocs propres aux clubs et associations, tous préfixés
   `cl_`, plus les rares ajustements du socle nécessaires à cette page.

   Alternance des fonds, de haut en bas : hero blanc, cl_pains gris,
   cb_steps blanc, features gris, cl_roles teinté, cb_pricing blanc,
   cl_profils gris, spaces blanc, faq gris. Toute section insérée doit tenir
   cette alternance, sinon deux blocs de même fond se collent.
   ═══════════════════════════════════════════════════════════ */

/* ── Ajustements du socle ───────────────────────────────────── */

/* Deux cartes de la grille des fonctionnalités ne pointent vers aucune page :
   sans ce garde-fou, elles se soulèveraient au survol comme les autres et
   promettraient un clic qui n'arrive jamais. */
.feature-card:not([href]):hover {
    transform: none;
    box-shadow: none;
    border-color: var(--color-border, #E5E7EB);
}

/* ── Le quotidien d'un bureau associatif ────────────────────── */
.cl_pains {
    padding: 72px 0;
    background-color: var(--color-surface-alt, #F8F8F9);
}

.cl_pains_grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    max-width: 940px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .cl_pains_grid {
        grid-template-columns: 1fr 1fr;
    }
}

.cl_pain {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 24px;
    background-color: var(--color-surface, #FFFFFF);
    border: 1px solid var(--color-border, #E5E7EB);
    border-radius: 16px;
}

.cl_pain_ico {
    flex-shrink: 0;
    font-size: 24px;
    color: var(--color-primary, #C55A36);
    /* Aligne l'icône sur la première ligne du titre plutôt que sur le haut de
       la boîte, dont la hauteur varie avec la longueur du paragraphe. */
    line-height: 1.3;
}

.cl_pain strong {
    display: block;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #111111;
    margin-bottom: 6px;
}

.cl_pain p {
    font-size: 14px;
    color: var(--color-text-secondary, #64738B);
    line-height: 1.65;
}

/* ── Rôles et permissions ───────────────────────────────────── */
.cl_roles {
    padding: 72px 0;
    background:
        linear-gradient(180deg, rgba(197, 90, 54, 0.05), rgba(197, 90, 54, 0)),
        var(--color-surface, #FFFFFF);
}

.cl_roles_grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 1040px;
    margin: 0 auto;
}

@media (min-width: 900px) {
    .cl_roles_grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.cl_role {
    display: flex;
    flex-direction: column;
    padding: 26px 24px;
    background-color: var(--color-surface, #FFFFFF);
    border: 1px solid var(--color-border, #E5E7EB);
    border-radius: 16px;
}

.cl_role_tag {
    align-self: flex-start;
    padding: 5px 12px;
    border-radius: 999px;
    background-color: var(--color-primary-light, #FAEBE6);
    color: var(--color-primary-dark, #8a3528);
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.cl_role_desc {
    font-size: 14px;
    color: var(--color-text-secondary, #64738B);
    line-height: 1.65;
    margin-bottom: 16px;
}

.cl_role_list {
    list-style: none;
    padding: 0;
    margin: auto 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cl_role_list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 14px;
    color: var(--color-text, #1A1A1A);
    line-height: 1.45;
}

.cl_role_list li .material-symbols-outlined {
    flex-shrink: 0;
    font-size: 18px;
    color: var(--color-success-green, #22C55E);
}

/* Un droit refusé porte la classe `cl_ko` : la croix seule ne suffirait pas,
   les deux glyphes ont le même gabarit et la couleur est ce qui les sépare au
   premier coup d'œil. Le libellé reste explicite pour qui ne voit pas la
   nuance de couleur. */
.cl_role_list li .cl_ko {
    color: var(--color-text-muted, #9CA3AF);
}

.cl_role_list li:has(.cl_ko) {
    color: var(--color-text-secondary, #64738B);
}

.cl_roles_note {
    max-width: 720px;
    margin: 28px auto 0;
    text-align: center;
    font-size: 14px;
    color: var(--color-text-secondary, #64738B);
    line-height: 1.65;
}

/* ── Profils de structures ──────────────────────────────────── */
.cl_profils {
    padding: 72px 0;
    background-color: var(--color-surface-alt, #F8F8F9);
}

.cl_profils_grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    .cl_profils_grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .cl_profils_grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.cl_profil {
    padding: 26px 24px;
    background-color: var(--color-surface, #FFFFFF);
    border: 1px solid var(--color-border, #E5E7EB);
    border-radius: 16px;
}

.cl_profil .material-symbols-outlined {
    display: block;
    font-size: 26px;
    color: var(--color-primary, #C55A36);
    margin-bottom: 12px;
}

.cl_profil strong {
    display: block;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #111111;
    margin-bottom: 8px;
}

.cl_profil p {
    font-size: 14px;
    color: var(--color-text-secondary, #64738B);
    line-height: 1.65;
}