/* ============================================================
   TEAM ACCORDÉON — reproduit MembersAccordion (Lovable,
   src/routes/college.bureau.tsx) au pixel près : accordéon
   "single + collapsible", 1 groupe ouvert par défaut, grille de
   cartes membre (avatar rond + identité + poste) dans chaque panneau.
   ============================================================ */

.team-accordeon {
    margin-top: 40px;
    /* mt-10 */
    border-radius: var(--border-radius-2xl);
    /* rounded-2xl */
    border: 1px solid var(--color-border);
    background-color: var(--white);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* ——— Item d'accordéon (1 groupe) ————————————————————————————— */
.team-accordeon__item {
    position: relative;
    border-top: 1px solid var(--color-border);
    /* divide-border : pas de bordure avant le 1er item */
    transition: background-color 0.2s ease;
}

.team-accordeon__item:first-child {
    border-top: none;
}

.team-accordeon__item.is-open {
    /* bg-cerf-main-blue/[0.04] */
    background-color: color-mix(in srgb, var(--color-primary) 4%, transparent);
}

/* Liseré bleu à gauche, visible uniquement quand le groupe est ouvert */
.team-accordeon__item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: var(--color-primary);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.team-accordeon__item.is-open::before {
    opacity: 1;
}

/* ——— Bouton déclencheur ————————————————————————————————————— */
.team-accordeon__header {
    margin: 0;
}

.team-accordeon__trigger {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    /* px-6 py-5 */
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    /* text-base */
    font-weight: var(--semibold);
    color: var(--color-deep-blue);
    transition: color 0.2s ease;
    margin: 0;
}

@media (min-width: 768px) {
    .team-accordeon__trigger {
        font-size: 16px;
        /* md:text-lg */
    }
}

.team-accordeon__item.is-open .team-accordeon__trigger {
    color: var(--color-primary);
}

.team-accordeon__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    /* size-9 */
    height: 36px;
    border-radius: var(--border-radius-full);
    border: 1px solid var(--color-border);
    background-color: var(--white);
    color: var(--color-deep-blue-70);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.team-accordeon__icon svg {
    transition: transform 0.2s ease;
}

.team-accordeon__item.is-open .team-accordeon__icon {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--white);
}

.team-accordeon__item.is-open .team-accordeon__icon svg {
    transform: rotate(180deg);
}

/* ——— Panneau dépliable (CSS-only, sans mesure JS de hauteur) —————— */
.team-accordeon__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease;
    max-height: 0;
}

.team-accordeon__item.is-open .team-accordeon__panel {
    grid-template-rows: 1fr;
    max-height: none;
}

.team-accordeon__item .team-accordeon__panel-inner {
    overflow: hidden;
    padding: 0;
}

.team-accordeon__item.is-open .team-accordeon__panel-inner {
    padding: 8px 24px 32px;
}

/* ——— Grille des membres ———————————————————————————————————— */
.team-accordeon__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    /* gap-6 */
}

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

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

.team-accordeon__member {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}

.team-accordeon__avatar {
    width: 80px;
    /* size-20 */
    height: 80px;
    flex-shrink: 0;
    border-radius: var(--border-radius-full);
    overflow: hidden;
    /* bg-cerf-main-blue/10 */
    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.team-accordeon__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-accordeon__infos {
    min-width: 0;
}

.team-accordeon__name {
    margin: 0;
    font-weight: var(--semibold);
    line-height: 1.25;
    /* leading-tight */
    color: var(--color-deep-blue);
}

.team-accordeon__poste {
    margin: 2px 0 0;
    /* mt-0.5 */
    font-size: 0.875rem;
    /* text-sm */
    color: var(--color-deep-blue-70);
}