/* page Les intervenants : une fiche par matière du Master 2.
   Deux niveaux de dépliants : la fiche ouvre la liste des intervenants, et
   chaque nom ouvre à son tour le détail de ses interventions. Repliées, toutes
   les fiches ont la même hauteur (subgrid), donc les filets rouges s'alignent. */

/* Un gris très clair en fond de page : les fiches, restées blanches, s'en
   détachent sans qu'il faille d'ombre portée. */
#vue-intervenants .sec{background:var(--gris-page)}

.matieres{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.matiere{display:grid;grid-template-rows:subgrid;grid-row:span 4;
  background:#fff;border:1px solid var(--line);border-top:2px solid var(--crimson);
  padding:16px 18px 14px}
/* La fiche ouverte reste blanche comme les autres : c'est sa hauteur, le libellé
   passé au rouge et la pastille pleine qui signalent qu'elle est déployée. */

.matiere-ue{margin:0 0 8px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;color:var(--muted)}
.matiere h3{margin:0 0 5px;font-size:16.5px;font-weight:400;line-height:1.22}
.matiere-volume{margin:0 0 10px;font-size:12.5px;color:var(--muted)}

/* ---------- premier niveau : « Voir les intervenants » ---------- */
.matiere-pied{align-self:start}
.matiere-bascule{margin:0;padding:10px 0 0;width:100%;border:0;border-top:2px solid var(--crimson);
  background:none;font:inherit;font-weight:600;color:var(--ink);
  text-align:left;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:12px;font-size:13.5px;transition:color .22s ease}
.matiere-bascule:hover{color:var(--crimson)}
.matiere-bascule.ouvert>span:first-child{color:var(--crimson)}
/* La pastille porte le nombre d'intervenants : elle ne bouge pas au clic. */
.matiere-compte{flex:none;width:20px;height:20px;border-radius:50%;background:var(--gris-page);
  display:flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:600;color:var(--muted);
  transition:background .22s ease,color .22s ease}
.matiere-bascule:hover .matiere-compte{background:var(--crimson);color:#fff}
.matiere-bascule.ouvert .matiere-compte{background:var(--crimson);color:#fff}

/* ---------- second niveau : le nom, puis le détail ---------- */
.matiere-equipe{margin-top:4px}
.matiere-equipe ul{list-style:none;margin:0;padding:0}
.matiere-equipe li{border-top:1px solid var(--line)}
.matiere-equipe li:first-child{border-top:0}

.intervenant{width:100%;margin:0;padding:11px 0;border:0;background:none;font:inherit;
  text-align:left;cursor:pointer;color:var(--ink);
  display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:14px}
.intervenant-nom{font-size:15px;font-weight:600;transition:color .22s ease}
.intervenant:hover .intervenant-nom{color:var(--crimson)}
.intervenant-qualite{grid-column:1;margin-top:3px;font-size:13px;color:var(--muted);line-height:1.45}
.intervenant-plus{grid-column:2;grid-row:1/span 2;position:relative;width:11px;height:11px;
  color:var(--muted);transition:color .22s ease}
.intervenant-plus::before,.intervenant-plus::after{content:"";position:absolute;background:currentColor;
  transition:transform .28s cubic-bezier(.3,.7,.3,1),opacity .28s ease}
.intervenant-plus::before{left:0;top:5px;width:11px;height:1px}
.intervenant-plus::after{left:5px;top:0;width:1px;height:11px}
.intervenant:hover .intervenant-plus{color:var(--crimson)}
.intervenant.ouvert .intervenant-plus{color:var(--crimson)}
.intervenant.ouvert .intervenant-plus::after{transform:rotate(90deg);opacity:0}

.intervenant-detail{padding:0 0 16px;border-left:2px solid var(--line);padding-left:14px;
  margin:0 0 4px}
.intervenant-detail p{margin:0 0 10px;font-size:14px;line-height:1.62;color:var(--muted);
  text-align:justify;hyphens:auto}
.intervenant-detail p:last-child{margin-bottom:0}

@media (max-width:1040px){
  .matieres{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .matieres{grid-template-columns:1fr}
  .matiere{display:block}
}