/* ============================================
   CCB Corporate Design System V2
   Component: Circulaires (groupes repliables)
   ============================================ */

/* ── Collapsible group header ── */
.cir-group-header {
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.cir-group-header:hover {
    background: linear-gradient(135deg, rgba(255, 105, 0, 0.03) 0%, rgba(255, 105, 0, 0.07) 100%);
}

/* ── Chevron rotation ── */
.cir-group-chevron {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--gray-500);
    font-size: var(--font-size-sm);
}

.cir-group.collapsed .cir-group-chevron {
    transform: rotate(-90deg);
}

/* ── Collapsible body animation ── */
.cir-group-body {
    overflow: hidden;
    max-height: 5000px;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    opacity: 1;
}

.cir-group.collapsed .cir-group-body {
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

/* ── Expand/Collapse all button ── */
.cir-toggle-all {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-1) var(--spacing-3);
    font-size: var(--font-size-sm);
    color: var(--gray-600);
    background: transparent;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-base);
    cursor: pointer;
    transition: all 0.2s;
}

.cir-toggle-all:hover {
    color: var(--ccb-orange);
    border-color: var(--ccb-orange);
    background: var(--ccb-orange-50);
}