/* ==========================================================================
   Les filles : liste en cartes, aperçu enrichi, dossier à onglets (§9.3).
   ========================================================================== */

/* --- Grille de cartes ------------------------------------------------------ */

.filles {
  display: grid;
  gap: calc(var(--pas) * 4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .filles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .filles { grid-template-columns: repeat(3, 1fr); } }

.fille {
  display: flex;
  align-items: center;
  gap: calc(var(--pas) * 3);
  padding: calc(var(--pas) * 4);
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-1);
  cursor: pointer;
  transition: transform var(--duree-anim) ease, box-shadow var(--duree-anim) ease;
}
.fille:hover { transform: translateY(-2px); box-shadow: var(--ombre-2); }

.fille__initiales {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: var(--r-pill);
  background: var(--primaire-clair);
  color: var(--primaire-profond);
  font-family: var(--police-titre);
  font-weight: 600;
}
.fille__corps { min-width: 0; flex: 1; }
.fille__nom { font-weight: 600; overflow-wrap: anywhere; }
.fille__meta { font-size: 0.82rem; color: var(--texte-doux); }
.fille__alerte { flex: none; color: var(--danger); }
.fille__alerte svg { width: 1.25rem; height: 1.25rem; }

/* --- Bandeau d'alerte du dossier -------------------------------------------
   Permanent en tête de dossier si une allergie sévère est signalée (§9.3). */

.bandeau-alerte {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--pas) * 3);
  padding: calc(var(--pas) * 4);
  border-radius: var(--r-md);
  background: var(--danger-doux);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
}
.bandeau-alerte svg { width: 1.5rem; height: 1.5rem; color: var(--danger); flex: none; }
.bandeau-alerte__titre { font-weight: 600; color: color-mix(in srgb, var(--danger) 82%, var(--encre)); }

/* --- En-tête de fiche ------------------------------------------------------
   Le même gabarit pour une élève et pour un membre de l'équipe : passer de
   l'une à l'autre ne demande aucun réapprentissage. */

.fiche-tete {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--pas) * 1.5);
  text-align: center;
  padding: calc(var(--pas) * 1.5) 0 var(--pas);
}
.fiche-tete .avatar { margin-bottom: calc(var(--pas) * 2); }
.fiche-tete__nom {
  font-family: var(--police-titre);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.7px;
  line-height: 1.15;
}
.fiche-tete__actions {
  display: flex;
  gap: calc(var(--pas) * 2.25);
  justify-content: center;
  margin-top: calc(var(--pas) * 2);
}

/* --- En-tête du dossier ---------------------------------------------------- */

.dossier__entete {
  display: flex;
  align-items: center;
  gap: calc(var(--pas) * 4);
  flex-wrap: wrap;
}
.dossier__initiales {
  display: grid;
  place-items: center;
  width: 3.5rem; height: 3.5rem;
  border-radius: var(--r-pill);
  background: var(--primaire);
  color: var(--sur-primaire);
  font-family: var(--police-titre);
  font-size: 1.15rem;
  font-weight: 700;
  flex: none;
}
.dossier__nom { font-family: var(--police-titre); font-size: 1.25rem; font-weight: 700; }
.dossier__meta { color: var(--texte-doux); font-size: 0.88rem; }

/* Les onglets défilent horizontalement sur téléphone — c'est la seule zone où
   le défilement latéral est voulu, et il ne concerne que la barre elle-même. */
.onglets {
  display: flex;
  gap: calc(var(--pas) * 2);
  overflow-x: auto;
  padding-bottom: calc(var(--pas) * 2);
  scrollbar-width: thin;
}
.onglets .chip { flex: none; }

/* --- Contenu d'un onglet --------------------------------------------------- */

.onglet { display: flex; flex-direction: column; gap: calc(var(--pas) * 4); }

.paire { display: flex; flex-direction: column; gap: 2px; }
.paire__libelle { font-size: 0.78rem; font-weight: 600; color: var(--texte-doux); }
.paire__valeur { overflow-wrap: anywhere; }

.note {
  display: flex;
  flex-direction: column;
  gap: calc(var(--pas) * 2);
  padding: calc(var(--pas) * 4);
  border-radius: var(--r-md);
  background: var(--carte-douce);
  border-left: 3px solid var(--primaire);
}
.note--psychologique { border-left-color: var(--alerte); }
.note__entete { display: flex; justify-content: space-between; gap: calc(var(--pas) * 3); flex-wrap: wrap; }
.note__contenu { white-space: pre-wrap; overflow-wrap: anywhere; }
.note__meta { font-size: 0.78rem; color: var(--texte-tenu); }

.note-scolaire {
  display: flex;
  align-items: baseline;
  gap: calc(var(--pas) * 3);
  padding: calc(var(--pas) * 2) 0;
  border-bottom: 1px solid var(--bordure);
  flex-wrap: wrap;
}
.note-scolaire__matiere { flex: 1 1 10rem; font-weight: 500; }
.note-scolaire__valeur { font-family: var(--police-titre); font-weight: 700; font-size: 1.1rem; }
.note-scolaire__unites { font-size: 0.78rem; color: var(--texte-tenu); }
.note-scolaire__appreciation { flex: 1 1 100%; font-size: 0.85rem; color: var(--texte-doux); }

.equite { display: grid; gap: calc(var(--pas) * 3); grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.equite__case {
  padding: calc(var(--pas) * 3);
  border-radius: var(--r-md);
  background: var(--carte-douce);
  text-align: center;
}
.equite__valeur { font-family: var(--police-titre); font-size: 1.3rem; font-weight: 700; }
.equite__libelle { font-size: 0.78rem; color: var(--texte-doux); }

/* Médicaments apportés à l'internat (onglet Santé).
   Le nom d'abord, la posologie juste dessous et en une seule ligne : c'est ce
   qu'on lit à deux heures du matin, et un tableau à quatre colonnes s'y lit
   moins bien qu'une phrase courte. Le liseré reprend celui des notes — même
   nature de carte, même repère visuel. */
.medicament {
  display: flex;
  flex-direction: column;
  gap: calc(var(--pas) * 2);
  padding: calc(var(--pas) * 4);
  border-radius: var(--r-md);
  background: var(--carte-douce);
  border-left: 3px solid var(--primaire-profond);
}
.medicament__entete {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: calc(var(--pas) * 3);
  flex-wrap: wrap;
}
.medicament__identite { min-width: 0; }
.medicament__nom {
  font-family: var(--police-titre);
  font-size: 1rem;
  overflow-wrap: anywhere;
}
.medicament__posologie { font-size: 0.85rem; color: var(--texte-doux); margin-top: 2px; }
.medicament__consignes {
  font-size: 0.85rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* « Consignes : » devant le texte. Ni gras ni majuscules : le gras est pris par
   le nom du médicament, et deux gras dans une carte de trois lignes ne
   hiérarchisent plus rien. */
.medicament__etiquette { color: var(--texte-tenu); }