/* Elevora CRM — css/equipe.css  [V26] 09/10/2026
   La page Équipe en quatre groupes (document 2 de Célian, §10) : Administrateurs, Membres de l'équipe, Agents commerciaux,
   Apporteurs d'affaires. Chaque groupe a son titre (un bouton qui replie), son compteur et son tri ; le RÔLE est écrit en grand
   sur chaque carte. Seules les cartes qui s'ouvrent (agents, apporteurs) ont un curseur et un survol.
   Jetons du CRM seulement (css/elevora.css) : thème clair et sombre suivent tout seuls. */

.eq-groupe{margin-top:var(--s5)}
.eq-groupe:first-child{margin-top:0}
.eq-groupe-tete{display:flex;align-items:center;justify-content:space-between;gap:var(--s3) var(--s4);flex-wrap:wrap;margin-bottom:var(--s3)}
.eq-groupe-t{margin:0;font:inherit}
.eq-groupe-toggle{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;padding:0 var(--s2) 0 0;background:none;border:0;border-radius:var(--rs);cursor:pointer;
  color:var(--text);font:700 17px var(--font-display)}
.eq-groupe-toggle:hover .eq-groupe-nom{color:var(--accent)}
.eq-groupe-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.eq-chevron{display:inline-flex;color:var(--text2);transition:transform .18s ease}
.eq-groupe-toggle[aria-expanded="false"] .eq-chevron{transform:rotate(-90deg)}
@media (prefers-reduced-motion:reduce){.eq-chevron{transition:none}}
.eq-compte{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:24px;padding:0 var(--s2);border-radius:20px;background:var(--bg3);color:var(--text);font:700 13px var(--font)}
.eq-tri{display:inline-flex;align-items:center;gap:var(--s2);color:var(--text2);font-size:13px}
.eq-tri .fsel{min-width:200px}
.eq-groupe-corps[hidden]{display:none}
.eq-liste{display:grid;gap:10px}
.eq-vide{margin:0;padding:var(--s4) var(--s5);border:1px dashed var(--border2);border-radius:var(--rl);color:var(--text2);font-size:13.5px}

/* La carte : un compte (administrateur, membre) ou une fiche (agent, apporteur). */
.eq-carte{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--bg2);border:1px solid var(--border);border-radius:12px;text-align:left;width:100%;font:inherit;color:inherit}
.eq-carte>div:first-child{flex-shrink:0}
.eq-nom{font-size:15px;font-weight:600;color:var(--text)}
.eq-role{margin-top:2px;font:700 17px/1.3 var(--font-display);color:var(--accent);overflow-wrap:anywhere}
.eq-role--vide{color:var(--text2);font-weight:500;font-style:italic;font-size:15px}
.eq-email{margin-top:2px;font-size:13px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eq-avatar{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;flex-shrink:0;color:#fff;font:700 14px var(--font)}
.eq-avatar--agent{background:var(--accent-fill)}
.eq-carte-txt{display:flex;flex-direction:column;flex:1;min-width:0}
.eq-ligne{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.eq-carte--inactive{opacity:.78}

/* Seules les cartes qui s'ouvrent réagissent. */
.eq-carte--cliquable{cursor:pointer;transition:border-color .18s ease,background-color .18s ease}
.eq-carte--cliquable:hover{border-color:var(--accent);background:var(--bg3)}
.eq-carte--cliquable:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.eq-aller{display:inline-flex;color:var(--text2);flex-shrink:0}
.eq-carte--cliquable:hover .eq-aller{color:var(--accent)}
@media (prefers-reduced-motion:reduce){.eq-carte--cliquable{transition:none}}

@media (max-width:640px){
  .eq-carte{flex-wrap:wrap}
  .eq-groupe-tete{align-items:flex-start}
  .eq-tri{width:100%}
  .eq-tri .fsel{flex:1;min-width:0}
  .eq-role{font-size:16px}
}