/* =================================================================
   section-card.css - Panneau collapsible avec titre riche (pattern CRM)

   Different de la .card simple (qui a juste head + body + foot) et
   de l'accordion (qui a juste un toggle + body).
   La section-card a un HEAD enrichi avec :
     - Mini-icone (mi) devant le titre
     - Titre
     - Compteur entre parentheses (X)
     - Boutons d'action a droite (alignes via flex auto)
     - Chevron deroulant optionnel (m-arrow)

   Structure HTML :
     <div class="section-card">
       <div class="section-card-head" onclick="...">
         <span class="m-arrow open">&#xE76C;</span>   <!-- optionnel -->
         <span class="mi">&#xE779;</span>             <!-- mini icone -->
         <span class="title">Contacts</span>
         <span class="count">(4)</span>               <!-- optionnel -->
         <div class="actions">
           <button class="action-btn">&#xE710;</button>
         </div>
       </div>
       <div class="section-card-body">
         ... contenu (visible/cache selon .open sur le head) ...
       </div>
     </div>

   Variante : .section-card.collapsed cache le body
   ================================================================= */

.section-card {
  background: var(--glass-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--gap-md);
}

.section-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid var(--glass-border);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  user-select: none;
}

/* Chevron deroulant (optionnel) */
.section-card-head .m-arrow {
  font-family: var(--font-icon), var(--font);
  font-size: 11px;
  color: var(--text-muted);
  transition: transform 0.2s, color 0.2s;
  flex-shrink: 0;
}
.section-card-head .m-arrow.open {
  color: var(--accent);
  transform: rotate(90deg);
}

/* Mini icone devant le titre */
.section-card-head .mi {
  font-family: var(--font-icon), var(--font);
  font-size: 14px;
  color: var(--accent);
  flex-shrink: 0;
}

.section-card-head .title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  flex-shrink: 0;
}

.section-card-head .count {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

/* Actions a droite (alignees via margin-left: auto sur le container) */
.section-card-head .actions {
  display: flex;
  gap: 4px;
  margin-left: auto;
  align-items: center;
}

.section-card-head .action-btn {
  width: 26px;
  height: 26px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-icon), var(--font);
  font-size: 12px;
  transition: var(--transition-norm);
}
.section-card-head .action-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.section-card-head .action-btn.danger:hover {
  border-color: var(--error);
  color: var(--error-text);
}

/* Body */
.section-card-body {
  padding: var(--gap-md) 14px;
}
.section-card-body.compact {
  padding: 8px 12px;
}

/* Etat collapsed : cache le body */
.section-card.collapsed .section-card-body {
  display: none;
}
.section-card.collapsed .section-card-head {
  border-bottom: none;
}

/* Variante head cliquable (toggle au clic) */
.section-card-head.clickable {
  cursor: pointer;
  transition: background var(--transition-fast);
}
.section-card-head.clickable:hover {
  background: var(--bg-card-hover);
}