/* ==========================================================================
   Briques réutilisées par plusieurs écrans — reprises du prototype validé.

   Trois principes tenus par ce fichier, et rien d'autre ne les tient :

   1. Une seule surface élevée. Le fond est --fond, ce qui est posé dessus
      est --carte avec une ombre légère. Pas de troisième niveau : c'est ce
      qui garde un écran de 375 px lisible.
   2. La hiérarchie se fait par l'opacité (--encre-70/55/40), jamais par un
      gris neutre.
   3. Tout ce qui se tape rebondit : chaque élément interactif porte un
      :active avec scale et la courbe --ressort. C'est ce qui donne la
      sensation native.

   Aucune couleur écrite ici : uniquement des variables de tokens.css.
   ========================================================================== */

/* ==========================================================================
   Sections
   ========================================================================== */

.section { margin-top: calc(var(--pas) * 5.5); }
.section__entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--pas) * 3);
  padding: 0 2px calc(var(--pas) * 2.5);
}
.section__titre {
  font-family: var(--police-titre);
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -0.35px;
}
.section__action {
  font-size: 0.81rem;
  font-weight: 600;
  color: var(--primaire-profond);
  background: none;
  border: 0;
  cursor: pointer;
  min-height: var(--cible-tactile);
  padding: 0 var(--pas);
}
.section__action:active { opacity: 0.5; }

/* ==========================================================================
   Listes — la brique la plus employée de l'application
   ========================================================================== */

.liste {
  background: var(--carte);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-1);
  overflow: hidden;
}

.ligne {
  display: flex;
  align-items: center;
  gap: calc(var(--pas) * 3);
  padding: calc(var(--pas) * 3) calc(var(--pas) * 3.5);
  min-height: var(--cible-tactile);
  position: relative;
  width: 100%;
  text-align: left;
  color: inherit;
  background: none;
  border: 0;
  font: inherit;
  transition: background var(--duree-anim) ease;
}

/* Le filet est en retrait de 15 px à gauche : aligné sur le texte, pas sur
   le bord de la carte. C'est ce détail, et lui seul, qui fait « natif ». */
.ligne + .ligne::before {
  content: '';
  position: absolute;
  left: calc(var(--pas) * 3.5); right: 0; top: 0;
  height: 1px;
  background: var(--filet);
}

.ligne--tap { cursor: pointer; }
.ligne--tap:hover { background: var(--survol); text-decoration: none; }
.ligne--tap:active { background: var(--fond); }

.ligne__corps { flex: 1; min-width: 0; }

/* Un nom ne passe jamais à la ligne dans une liste : il se tronque. */
.ligne__titre {
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ligne__detail {
  font-size: 0.78rem;
  color: var(--encre-55);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ligne__extra {
  color: var(--encre-40);
  display: flex;
  align-items: center;
  gap: calc(var(--pas) * 2);
  flex: 0 0 auto;
}
.ligne__extra svg { width: 1.15rem; height: 1.15rem; }

/* Petit texte de contexte, hors liste. Nommé « mention » et non « note » :
   filles.css emploie déjà « .note » pour un bloc de suivi, et deux règles de
   même nom pour deux choses différentes finissent par se marcher dessus. */
.mention { font-size: 0.78rem; color: var(--encre-55); line-height: 1.45; }
.prose { font-size: 0.9rem; line-height: 1.5; color: var(--encre-70); }

/* ==========================================================================
   Avatars
   ========================================================================== */

.avatar {
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--sur-primaire);
  background: linear-gradient(145deg, var(--primaire), var(--primaire-profond));
}
.avatar--s { width: 38px; height: 38px; font-size: 0.84rem; }
.avatar--m { width: 46px; height: 46px; font-size: 1rem; }
.avatar--l { width: 76px; height: 76px; font-size: 1.62rem; box-shadow: var(--ombre-2); }

/* Variante sombre : distingue d'un coup d'œil ce qui n'est pas une élève en
   cours — une ancienne, une candidate à l'inscription, un membre du Tsevet. */
.avatar--encre { background: linear-gradient(145deg, var(--primaire-moyen), var(--encre)); }

/* ==========================================================================
   Puces
   ========================================================================== */

.puce {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--fond);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--encre-70);
  white-space: nowrap;
}
.puce--pleine { background: var(--primaire-clair); color: var(--encre); }
.puce--contour { background: transparent; box-shadow: inset 0 0 0 1.3px var(--encre-12); }
.puce__point { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; }

/* ==========================================================================
   Sélecteur segmenté
   ========================================================================== */

.segment {
  display: flex;
  background: var(--encre-06);
  border-radius: var(--r-pill);
  padding: 3px;
  gap: 2px;
  position: relative;
}
.segment button {
  flex: 1;
  height: 34px;
  border-radius: var(--r-pill);
  font-size: 0.81rem;
  font-weight: 600;
  color: var(--encre-55);
  position: relative;
  z-index: 2;
  background: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.segment button.actif { color: var(--texte); }

/* Peint à 34 px comme le prototype, tapable à 44 comme l'exige le §6. Le
   sélecteur est une rangée horizontale : déborder verticalement ne recouvre
   rien, et le doigt qui vise « Semaine » ne tombe pas entre deux segments. */
.segment button::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  height: var(--cible-tactile);
}

/* Le pouce est positionné en ligne (left / width calculés par la vue) : c'est
   ce qui lui permet de glisser d'un segment à l'autre au lieu de sauter. */
.segment__pouce {
  position: absolute;
  top: 3px; bottom: 3px;
  border-radius: var(--r-pill);
  background: var(--carte);
  box-shadow: var(--ombre-1);
  transition: left 0.3s var(--ressort), width 0.3s var(--ressort);
  z-index: 1;
}

/* ==========================================================================
   Statistiques, progression, occupation
   ========================================================================== */

.stats3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--pas) * 2.5); }
.stat {
  background: var(--carte);
  border-radius: var(--r-md);
  padding: calc(var(--pas) * 3) calc(var(--pas) * 2.5);
  box-shadow: var(--ombre-1);
  text-align: left;
  border: 0;
  width: 100%;
  color: inherit;
}
.stat b {
  display: block;
  font-family: var(--police-titre);
  font-size: 1.38rem;
  font-weight: 700;
  letter-spacing: -0.8px;
  line-height: 1;
}
.stat span {
  display: block;
  font-size: 0.69rem;
  color: var(--encre-55);
  margin-top: 5px;
  font-weight: 600;
  line-height: 1.2;
}
.stat--tap { cursor: pointer; transition: transform var(--duree-anim) var(--ressort); }
.stat--tap:active { transform: scale(0.96); }

.progression { height: 6px; border-radius: 3px; background: var(--encre-06); overflow: hidden; }
.progression__barre { display: block; height: 100%; border-radius: 3px; background: var(--primaire); }

/* Un segment par lit, rempli ou vide : l'occupation se lit sans lire le
   chiffre. La redondance avec le compteur est volontaire. */
.lits { display: flex; gap: 4px; margin-top: calc(var(--pas) * 2); }
.lits i { flex: 1; height: 6px; border-radius: 3px; background: var(--encre-06); }
.lits i.occupe { background: var(--primaire); }

/* ==========================================================================
   Grille d'accès rapides
   ========================================================================== */

.grille-acces { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--pas) * 2.25); }

.acces {
  background: var(--carte);
  border-radius: var(--r-md);
  padding: calc(var(--pas) * 2.75) calc(var(--pas) * 1.25) calc(var(--pas) * 2.25);
  text-align: center;
  box-shadow: var(--ombre-1);
  min-height: var(--cible-tactile);
  color: inherit;
  border: 0;
  cursor: pointer;
  transition: transform var(--duree-anim) var(--ressort);
}
.acces:hover { text-decoration: none; }
.acces:active { transform: scale(0.93); }
.acces__icone { color: var(--primaire-profond); display: grid; place-items: center; margin-bottom: 5px; }
.acces__icone svg { width: 1.35rem; height: 1.35rem; }
.acces b { font-size: 0.69rem; font-weight: 700; display: block; line-height: 1.2; }

/* ==========================================================================
   Barre de recherche
   ========================================================================== */

.barre-recherche {
  display: flex;
  align-items: center;
  gap: calc(var(--pas) * 2.25);
  height: 44px;
  padding: 0 calc(var(--pas) * 3.5);
  background: var(--carte);
  border-radius: var(--r-pill);
  box-shadow: var(--ombre-1);
  color: var(--encre-40);
}
.barre-recherche input {
  flex: 1;
  min-width: 0;
  /* La barre fait 44 px, le champ n'en faisait que 26 : le pouce qui visait le
     haut ou le bas de la pilule ne posait le curseur nulle part. Le champ
     occupe donc toute la hauteur — même dessin, cible entière (§6). */
  align-self: stretch;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 0.97rem;
  color: var(--texte);
}
.barre-recherche input::placeholder { color: var(--encre-40); }
.barre-recherche svg { width: 1.2rem; height: 1.2rem; flex: none; }

.resultats__entete {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--encre-40);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  padding: calc(var(--pas) * 4) var(--pas) calc(var(--pas) * 2);
}

/* ==========================================================================
   Bouton d'action principal, flottant
   ========================================================================== */

.action-flottante {
  position: absolute;
  right: calc(var(--pas) * 4);
  bottom: calc(var(--hauteur-onglets) + var(--retrait-bas) + var(--pas) * 5);
  z-index: 96;
  width: 54px; height: 54px;
  border-radius: 20px;
  background: var(--encre);
  color: var(--sur-encre);
  display: grid;
  place-items: center;
  border: 0;
  cursor: pointer;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--encre) 34%, transparent);
  transition: transform 0.2s var(--ressort);
}
.action-flottante:active { transform: scale(0.9) rotate(45deg); }
.action-flottante svg { width: 1.5rem; height: 1.5rem; }