.club-details {
    margin-bottom: 15px;
    padding: 0 0 15px 0;
}

.club-details .logo-wrapper {
    position: relative;
}



.club-details .club-description {
    margin-top: 70px;
}

.card-wrapper {
    margin-top: 40px;
}

.card-sports {
    height: 100%;
    padding: 15px 7px;
}

.card-member {
    position: relative;
    height: 100%;
    padding: 45px 7px 15px 7px;
    font-size: 0.8rem;
}

.card-member h5,
.card-sports h5 {
    text-transform: uppercase;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.05rem;
}

.card-member p,
.card-sports p {
    margin-bottom: 0.5rem;
}

p small {
    color: var(--text-muted);
}

.card-member .avatar {
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);

    width: 70px;
    height: 70px;

    border-radius: 50%;
    overflow: hidden;

    background: var(--surface-3);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-sm);

    z-index: 10;
}

.club-logo {

    width: 130px;
    height: 110px;

    border-radius: 10%;
    overflow: hidden;

    background: var(--surface-3);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-sm);
}

.avatar img,
.club-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.avatar--fallback::after {
    content: "";
    position: absolute;
    inset: 0;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c1.5-4 6.5-4 8-4s6.5 0 8 4'/%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-position: center;
    background-size: 48px;

    opacity: 0.7;
}


.linker-svg {
    font-size: 3rem;
    color: var(--gold);
}

/* ---------- Liste de clubs (cartouches pleine largeur, en ligne) ---------- */
.club-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

.club-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 1.25rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.club-row:hover {
    background: var(--surface-2-hov);
    border-color: var(--border-strong);
}

.club-pill {
    flex: 0 0 auto;
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gold-soft);
    color: var(--gold-strong);
    border: 1px solid var(--border-strong);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.club-pill img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.club-row-body {
    flex: 1 1 auto;
    min-width: 0;
}

.club-row-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
}

.club-row-loc {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.15rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* "Fiche d'identité" du club : disciplines (chips) + enseignants. */
.club-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.club-tags .tag {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text);
    background: var(--surface-3);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    padding: 0.12rem 0.6rem;
}

.club-teachers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.7rem;
    margin-top: 0.5rem;
    font-size: 0.82rem;
}

.club-teachers-label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--gold);
}

.club-teachers-label svg {
    flex: 0 0 auto;
    opacity: 0.9;
}

.club-teacher {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text);
}

.teacher-avatar {
    position: relative;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gold-soft);
    color: var(--gold-strong);
    border: 1px solid var(--border-strong);
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1;
}

.teacher-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============ Détail d'un club ============ */
/* Hero */
.cd-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background:
        radial-gradient(700px 220px at 12% -20%, rgba(230, 201, 138, 0.10), transparent 60%),
        var(--surface-2);
}

.cd-hero-logo {
    position: relative;
    flex: 0 0 auto;
    width: 90px;
    height: 90px;
    border-radius: 22px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: var(--gold-soft);
    border: 1px solid var(--border-strong);
    color: var(--gold-strong);
    font-size: 2.2rem;
    font-weight: 700;
}
.cd-hero-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.cd-hero-main { flex: 1 1 320px; min-width: 0; }
.cd-hero-title { font-size: 1.7rem; font-weight: 600; margin: 0 0 0.35rem; color: var(--text); }
.cd-hero-loc { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; color: var(--text-muted); }
.cd-hero-loc svg { flex: 0 0 auto; opacity: 0.85; }
.cd-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.7rem; }
.cd-chip {
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--gold-strong);
    background: var(--gold-soft);
    border: 1px solid var(--gold);
    border-radius: 999px;
    padding: 0.15rem 0.65rem;
}

.cd-hero-actions { flex: 0 0 auto; display: flex; flex-direction: column; gap: 0.5rem; min-width: 160px; }
.cd-hero-actions .btn-wrapper { width: 100%; }
.cd-hero-actions .liquid-glass-btn { width: 100%; justify-content: center; }

/* Bandeau de faits */
.cd-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin: 1.25rem 0; }
@media (max-width: 680px) { .cd-facts { grid-template-columns: repeat(2, 1fr); } }
.cd-fact { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.85rem 1rem; }
.cd-fact .n { font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--text); }
.cd-fact .n small { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; }
.cd-fact .l { font-size: 0.76rem; color: var(--text-muted); margin-top: 0.3rem; }

/* Grille principale / latérale */
.cd-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 820px) { .cd-grid { grid-template-columns: 1fr; } }
.cd-grid .section-card { margin-bottom: 1.25rem; }
.cd-grid .section-card:last-child { margin-bottom: 0; }

/* Disciplines & horaires */
.cd-disc { padding: 0.9rem 0; border-bottom: 1px solid var(--border); }
.cd-disc:first-child { padding-top: 0; }
.cd-disc:last-child { border-bottom: none; padding-bottom: 0; }
.cd-disc-head { display: flex; align-items: center; gap: 0.6rem; }
.cd-disc-name { font-weight: 600; font-size: 1rem; color: var(--text); }
.cd-disc-age {
    font-size: 0.74rem; font-weight: 600;
    color: var(--gold-strong); background: var(--gold-soft);
    border: 1px solid var(--border-strong); border-radius: 999px; padding: 0.08rem 0.55rem;
}
.cd-slots { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.55rem; }
.cd-slot {
    display: inline-flex; align-items: baseline; gap: 0.4rem;
    font-size: 0.8rem; color: var(--text-muted);
    background: var(--surface-3); border: 1px solid var(--border); border-radius: 8px; padding: 0.25rem 0.6rem;
}
.cd-slot b { color: var(--text); font-weight: 600; }
.cd-slot-grp { color: var(--text-faint); font-size: 0.74rem; }

/* Équipe */
.cd-subhead { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin: 0 0 0.6rem; }
.cd-subhead:not(:first-child) { margin-top: 1.1rem; }
.cd-people { display: flex; flex-direction: column; gap: 0.6rem; }
.cd-person { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-3); }
.cd-person-av {
    position: relative; overflow: hidden; flex: 0 0 auto;
    width: 42px; height: 42px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--gold-soft); color: var(--gold-strong);
    border: 1px solid var(--border-strong); font-weight: 700; font-size: 0.82rem;
}
.cd-person-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cd-person-name { font-weight: 600; font-size: 0.9rem; color: var(--text); }
.cd-person-grade { font-weight: 500; color: var(--gold); font-size: 0.8rem; }
.cd-person-sub { font-size: 0.78rem; color: var(--text-muted); }

/* Assistants : encadrement de second rang. Séparation visuelle légère
   (filet fin + sous-titre atténué + avatar neutre) pour marquer qu'ils ne
   sont pas forcément professeurs. */
.cd-subhead-assistants {
    display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
    color: var(--text-muted);
    padding-top: 1.1rem; margin-top: 1.1rem;
    border-top: 1px solid var(--border);
}
.cd-subhead-assistants:not(:first-child) { margin-top: 1.1rem; }
.cd-subhead-note {
    letter-spacing: 0; text-transform: none; font-weight: 500;
    color: var(--text-faint); font-size: 0.74rem;
}
.cd-person-av-assistant { background: var(--surface-2); color: var(--text-muted); }

/* Infos pratiques */
.cd-info { display: flex; gap: 0.6rem; align-items: flex-start; margin-bottom: 0.7rem; font-size: 0.88rem; color: var(--text-muted); }
.cd-info:last-child { margin-bottom: 0; }
.cd-info svg { flex: 0 0 auto; margin-top: 0.15rem; opacity: 0.85; }
.cd-info b { color: var(--text); font-weight: 600; display: block; }

.club-row-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Mobile : la pastille + les infos restent en ligne, les boutons passent dessous. */
@media (max-width: 640px) {
    .club-row {
        flex-wrap: wrap;
    }

    .club-row-actions {
        width: 100%;
    }

    .club-row-actions .btn-wrapper {
        flex: 1 1 0;
    }

    .club-row-actions .liquid-glass-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ---------- Hero : bouton « S'inscrire » verrouillé (visiteur non connecté) ---------- */
.cd-hero-lock { display: flex; flex-direction: column; gap: 0.1rem; }
.cd-btn-locked {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    padding: 0.45rem 0.9rem; border-radius: var(--radius-sm);
    font-weight: 600; font-size: 0.84rem; line-height: 1.2; white-space: nowrap;
    border: 1px solid var(--border); background: var(--surface-3); color: var(--text-faint);
    cursor: not-allowed;
}
.cd-btn-locked svg { flex: 0 0 auto; opacity: 0.85; }
.cd-hero-lock-note { font-size: 0.72rem; color: var(--text-faint); text-align: center; margin: 0.1rem 0 0; }

/* ---------- Bandeau « compte requis » (visiteur non connecté) ---------- */
.cd-enroll-banner {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    margin: 1.25rem 0; padding: 1rem 1.25rem;
    border: 1px solid var(--gold); border-radius: var(--radius);
    background:
        radial-gradient(600px 160px at 8% -40%, rgba(230, 201, 138, 0.14), transparent 60%),
        var(--surface-2);
    box-shadow: var(--shadow-sm);
}
.cd-eb-ico {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
    display: grid; place-items: center;
    background: var(--gold-soft); color: var(--gold-strong); border: 1px solid var(--border-strong);
}
.cd-eb-text { flex: 1 1 300px; min-width: 0; }
.cd-eb-text b { display: block; font-size: 0.98rem; font-weight: 600; color: var(--text); }
.cd-eb-text span { font-size: 0.85rem; color: var(--text-muted); }
.cd-eb-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 0.6rem; }
/* Voie papier : volontairement discrète (on ne veut pas trop y orienter). */
.cd-eb-paper {
    flex-basis: 100%; margin-top: 0.15rem;
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.8rem; color: var(--text-faint);
}
.cd-eb-paper:hover { color: var(--gold); }
.cd-eb-paper svg { flex: 0 0 auto; }

/* Séparateur « ou par formulaire papier » dans la carte Inscription */
.cd-enroll-sep {
    display: flex; align-items: center; gap: 0.6rem;
    margin: 1rem 0 0.85rem; color: var(--text-faint); font-size: 0.74rem;
}
.cd-enroll-sep::before, .cd-enroll-sep::after {
    content: ""; flex: 1 1 auto; height: 1px; background: var(--border-strong);
}

/* ---------- Carte « Formulaire d'inscription » (téléchargement du bulletin papier) ---------- */
.cd-enroll .cd-paper-dl {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.8rem;
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    background: var(--surface-3); color: var(--text);
    transition: background 0.15s, border-color 0.15s;
}
.cd-enroll .cd-paper-dl:hover { background: var(--surface-2-hov); border-color: var(--gold); color: var(--text); }
.cd-paper-ico {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center;
    background: var(--gold-soft); color: var(--gold-strong); border: 1px solid var(--border-strong);
}
.cd-paper-meta { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.cd-paper-meta b { display: block; font-size: 0.9rem; font-weight: 600; color: var(--text); }
.cd-paper-meta small { font-size: 0.74rem; color: var(--text-muted); }
.cd-paper-act { flex: 0 0 auto; color: var(--gold); }
.cd-enroll .cd-paper-dl:hover .cd-paper-act { color: var(--gold-strong); }
.cd-enroll-hint { font-size: 0.8rem; color: var(--text-muted); margin: 0.7rem 0 0; }