/* ==========================================================================
   Collections : modales, barres d'outils, listes, tuiles.
   Comme partout, uniquement des variables de tokens.css — aucune couleur.
   ========================================================================== */

/* --- Modales ---------------------------------------------------------------
   Conçues à 375px d'abord : sur mobile, la modale monte du bas et occupe la
   largeur ; sur desktop elle se centre. Aucun angle droit (§6). */

.modale-fond {
  position: fixed;
  inset: 0;
  /* Au-dessus de la barre d'onglets (100), qui flotte et venait recouvrir le
     pied de la modale : « Annuler » et « Enregistrer » disparaissaient
     dessous, et la seule sortie restante était la croix. En dessous des
     feuilles (130) et des messages (160), qui passent bien par-dessus. */
  z-index: 120;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: color-mix(in srgb, var(--encre) 45%, transparent);
  animation: modale-fond-entree var(--duree-anim) ease;
}

.modale {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 92vh;
  background: var(--carte);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--ombre-3);
  animation: modale-entree var(--duree-anim) ease;
}

@media (min-width: 768px) {
  .modale-fond { align-items: center; padding: calc(var(--pas) * 5); }
  .modale { width: min(42rem, 100%); border-radius: var(--r-lg); max-height: 88vh; }
  .modale--large { width: min(56rem, 100%); }
}

.modale__entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(var(--pas) * 3);
  padding: calc(var(--pas) * 5) calc(var(--pas) * 5) calc(var(--pas) * 3);
}
.modale__titre { font-family: var(--police-titre); font-weight: 600; font-size: 1.1rem; }
.modale__legende { font-size: 0.85rem; color: var(--texte-doux); margin-top: calc(var(--pas) * 1); }

.modale__fermer {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--cible-tactile);
  height: var(--cible-tactile);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--texte-doux);
  cursor: pointer;
}
.modale__fermer:hover { background: var(--survol); color: var(--texte); }
.modale__fermer svg { width: 1.25rem; height: 1.25rem; }

.modale__corps {
  overflow-y: auto;
  padding: 0 calc(var(--pas) * 5) calc(var(--pas) * 5);
  display: flex;
  flex-direction: column;
  gap: calc(var(--pas) * 4);
}

.modale__pied {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--pas) * 3);
  justify-content: flex-end;
  padding: calc(var(--pas) * 4) calc(var(--pas) * 5);
  border-top: 1px solid var(--bordure);
  background: var(--carte-douce);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.modale__pied .bouton { flex: 1 1 auto; }
@media (min-width: 768px) {
  .modale__pied .bouton { flex: 0 0 auto; }
}

@keyframes modale-fond-entree { from { opacity: 0; } to { opacity: 1; } }
@keyframes modale-entree {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* --- Grille de formulaire --------------------------------------------------
   Une colonne sur téléphone, deux dès qu'il y a la place. */

.grille-champs {
  display: grid;
  gap: calc(var(--pas) * 4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .grille-champs { grid-template-columns: 1fr 1fr; }
  .grille-champs .champ--pleine-largeur { grid-column: 1 / -1; }
}

/* --- Barre d'outils d'une collection --------------------------------------- */

.barre-outils {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--pas) * 3);
}
.barre-outils__recherche { flex: 1 1 14rem; min-width: 0; }
.barre-outils__actions { display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 2); margin-left: auto; }

.recherche { position: relative; display: block; }
.recherche svg {
  position: absolute;
  left: calc(var(--pas) * 3);
  top: 50%;
  transform: translateY(-50%);
  width: 1.1rem;
  height: 1.1rem;
  color: var(--texte-tenu);
  pointer-events: none;
}
.recherche .saisie { padding-left: calc(var(--pas) * 9); }

/* --- Lignes d'une collection ------------------------------------------------
   Le tableau reste un tableau sur desktop et devient une pile de cartes sous
   768px : la classe .tableau--empilable de composants.css fait le travail. */

.collection__compte { font-size: 0.85rem; color: var(--texte-doux); }

.ligne--archivee { opacity: 0.55; }
.ligne__actions { display: flex; gap: calc(var(--pas) * 1); justify-content: flex-end; }

.bouton-icone {
  display: inline-grid;
  place-items: center;
  width: var(--cible-tactile);
  height: var(--cible-tactile);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--texte-doux);
  cursor: pointer;
  transition: background var(--duree-anim) ease, color var(--duree-anim) ease;
}
.bouton-icone:hover { background: var(--survol); color: var(--texte); }
.bouton-icone--danger:hover { background: var(--danger-doux); color: var(--danger); }
.bouton-icone svg { width: 1.15rem; height: 1.15rem; }
.bouton-icone[disabled] { opacity: 0.35; cursor: not-allowed; }

/* Poignées de réordonnancement : deux flèches, utilisables au doigt comme au
   clavier. Le glisser-déposer seul exclurait le clavier et le lecteur d'écran. */
.poignees { display: flex; gap: calc(var(--pas) * 1); }

/* --- Texte hébreu ----------------------------------------------------------
   La police hébraïque n'est chargée que lorsque de l'hébreu est affiché ;
   ici on ne fait que poser la direction et la famille. */
.hebreu {
  direction: rtl;
  unicode-bidi: isolate;
  font-family: var(--police-hebreu), var(--police-corps);
}

/* --- Tuiles de navigation (accueil d'une section) -------------------------- */

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

.tuile {
  display: flex;
  flex-direction: column;
  gap: calc(var(--pas) * 2);
  padding: calc(var(--pas) * 5);
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-1);
  color: inherit;
  text-decoration: none;
  transition: transform var(--duree-anim) ease, box-shadow var(--duree-anim) ease;
}
.tuile:hover { transform: translateY(-2px); box-shadow: var(--ombre-2); }
.tuile__titre { font-family: var(--police-titre); font-weight: 600; }
.tuile__texte { font-size: 0.85rem; color: var(--texte-doux); }
.tuile__compte { font-size: 0.8rem; color: var(--primaire-profond); font-weight: 600; }

/* --- Fil d'ariane ---------------------------------------------------------- */

.fil { display: flex; align-items: center; gap: calc(var(--pas) * 2); font-size: 0.85rem; }
/* Le lien de retour est une cible tactile comme une autre : au moins 44px de
   haut, même dans un fil d'ariane discret (§6). */
.fil a {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible-tactile);
  color: var(--primaire-profond);
  text-decoration: none;
}
.fil a:hover { text-decoration: underline; }
.fil span { color: var(--texte-tenu); }

/* --- Cases à cocher multiples (matières assurées, par exemple) ------------- */

.cases {
  display: grid;
  gap: calc(var(--pas) * 2);
  grid-template-columns: 1fr;
  max-height: 16rem;
  overflow-y: auto;
  padding: calc(var(--pas) * 2);
  border: 1px solid var(--bordure);
  border-radius: var(--r-md);
  background: var(--carte-douce);
}
@media (min-width: 640px) { .cases { grid-template-columns: 1fr 1fr; } }

.case {
  display: flex;
  align-items: center;
  gap: calc(var(--pas) * 2);
  min-height: var(--cible-tactile);
  padding: 0 calc(var(--pas) * 2);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 0.9rem;
}
.case:hover { background: var(--survol); }
.case input { width: 1.15rem; height: 1.15rem; accent-color: var(--primaire); flex: none; }

/* --- Ligne de fichier déposé -----------------------------------------------
   Un fichier, où qu'il soit : pièce d'un dossier d'inscription, document d'une
   élève, photo d'une activité. La règle vivait dans inscription.css, que
   l'application interne ne charge pas — l'onglet « Documents » d'un dossier
   s'affichait donc sans cadre ni alignement. Elle est ici parce que
   collections.css est chargée par l'application **et** par le formulaire
   public, les deux pages qui en ont besoin. */

.fichier {
  display: flex;
  align-items: center;
  gap: calc(var(--pas) * 3);
  padding: calc(var(--pas) * 2) calc(var(--pas) * 3);
  border-radius: var(--r-sm);
  background: var(--carte);
  border: 1px solid var(--bordure);
  font-size: 0.9rem;
}
.fichier__nom { flex: 1; min-width: 0; overflow-wrap: anywhere; text-align: left; }
.fichier__taille { color: var(--texte-tenu); font-size: 0.8rem; flex: none; }