/* ==========================================================================
   Composants d'interface. Uniquement des variables de tokens.css.
   Les états (actif, sélectionné, en erreur) sont écrits ici, en CSS statique.
   ========================================================================== */

/* --- Boutons -------------------------------------------------------------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--pas) * 2);
  min-height: var(--cible-tactile);
  padding: 0 calc(var(--pas) * 5);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--police-corps);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.16s var(--ressort), background var(--duree-anim) ease, box-shadow var(--duree-anim) ease;
  background: var(--primaire);
  color: var(--sur-primaire);
  /* Ombre teintée de la couleur du bouton, jamais grise : c'est ce qui fait
     qu'il paraît posé sur la surface au lieu d'y être découpé. */
  box-shadow: 0 6px 16px color-mix(in srgb, var(--primaire) 34%, transparent);
}
.bouton:hover { background: var(--primaire-profond); }
.bouton:active { transform: scale(0.97); background: var(--primaire-profond); }
.bouton[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

.bouton--discret {
  background: transparent;
  color: var(--primaire-profond);
  border-color: var(--bordure);
  box-shadow: none;
}
.bouton--discret:hover { background: var(--survol); }

.bouton--fantome {
  background: transparent;
  color: var(--texte-doux);
  border-color: transparent;
  box-shadow: none;
}
.bouton--fantome:hover { background: var(--survol); color: var(--texte); }

.bouton--danger { background: var(--danger); }
.bouton--danger:hover { background: var(--danger-profond); }

.bouton--large { width: 100%; }

/* Action secondaire posée sur une carte : le fond de l'application, sans
   ombre. Elle se lit comme un bouton sans concurrencer l'action principale. */
.bouton--doux {
  background: var(--fond);
  color: var(--texte);
  box-shadow: none;
}
.bouton--doux:hover { background: var(--primaire-clair); }

/* Peint à 38 px — une action secondaire posée dans une ligne de liste ne doit
   pas peser autant que l'action principale. Mais le §6 impose une cible de
   44 px, et une cible n'est pas un dessin : la zone de saisie transparente
   ci-dessous rétablit les 44 px sans changer ce qu'on voit. Même procédé que
   pour les boutons d'en-tête (coquille.css). */
.bouton--compact { position: relative; min-height: 38px; padding: 0 calc(var(--pas) * 4); font-size: 0.85rem; }
.bouton--compact::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: var(--cible-tactile);
}

/* --- Cartes --------------------------------------------------------------- */

.carte {
  background: var(--carte);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-1);
  padding: calc(var(--pas) * 4);
  position: relative;
}
.carte--relevable { transition: transform var(--duree-anim) ease, box-shadow var(--duree-anim) ease; }
.carte--relevable:hover { transform: translateY(-2px); box-shadow: var(--ombre-2); }

/* Retour tactile : la carte s'enfonce sous le doigt. Sur téléphone c'est le
   seul retour qu'on ait — il n'y a pas de survol. */
.carte--tap { transition: transform var(--duree-anim) var(--ressort); cursor: pointer; }
.carte--tap:active { transform: scale(0.975); }

.carte__entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(var(--pas) * 3);
  margin-bottom: calc(var(--pas) * 4);
}
.carte__legende { font-size: 0.85rem; color: var(--texte-doux); }

/* --- Formulaires ---------------------------------------------------------- */

.champ { display: flex; flex-direction: column; gap: calc(var(--pas) * 2); }
.champ__libelle { font-size: 0.85rem; font-weight: 600; color: var(--texte-doux); }
.champ__aide { font-size: 0.8rem; color: var(--texte-tenu); }

.saisie {
  width: 100%;
  min-height: var(--cible-tactile);
  padding: calc(var(--pas) * 2) calc(var(--pas) * 4);
  background: var(--carte-douce);
  border: 1px solid var(--bordure);
  border-radius: var(--r-md);
  color: var(--texte);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color var(--duree-anim) ease, background var(--duree-anim) ease;
}
.saisie:hover { border-color: var(--primaire-moyen); }
.saisie:focus { border-color: var(--primaire); background: var(--carte); outline-offset: 1px; }
.saisie[aria-invalid='true'] { border-color: var(--danger); background: var(--danger-doux); }

select.saisie { appearance: none; cursor: pointer; padding-right: calc(var(--pas) * 8); }

.interrupteur {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--pas) * 3);
  min-height: var(--cible-tactile);
  cursor: pointer;
}
.interrupteur input { position: absolute; opacity: 0; pointer-events: none; }
.interrupteur__piste {
  width: 2.75rem; height: 1.6rem;
  border-radius: var(--r-pill);
  background: var(--neutre-doux);
  border: 1px solid var(--bordure);
  position: relative;
  transition: background var(--duree-anim) ease;
  flex: none;
}
.interrupteur__piste::after {
  content: '';
  position: absolute;
  inset: 2px auto 2px 2px;
  width: 1.2rem;
  border-radius: 50%;
  background: var(--carte);
  box-shadow: var(--ombre-1);
  transition: transform var(--duree-anim) ease;
}
.interrupteur input:checked + .interrupteur__piste { background: var(--primaire); }
.interrupteur input:checked + .interrupteur__piste::after { transform: translateX(1.15rem); }
.interrupteur input:focus-visible + .interrupteur__piste {
  outline: 3px solid color-mix(in srgb, var(--primaire) 65%, transparent);
  outline-offset: 2px;
}

/* --- Chips de choix (thèmes, tailles, filtres) ---------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 2); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--pas) * 2);
  min-height: var(--cible-tactile);
  padding: 0 calc(var(--pas) * 4);
  border: 1px solid var(--bordure);
  border-radius: var(--r-pill);
  background: var(--carte);
  color: var(--texte-doux);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--duree-anim) ease, color var(--duree-anim) ease;
}
.chip:hover { background: var(--survol); }
.chip.actif {
  background: var(--primaire);
  border-color: var(--primaire);
  color: var(--sur-primaire);
}

/* Vignette de thème : quatre pastilles, comme la galerie de l'application de
   référence. Les couleurs viennent d'une variable posée en ligne — jamais
   d'une classe utilitaire générée à la volée. */
.vignette-theme {
  display: flex;
  flex-direction: column;
  gap: calc(var(--pas) * 2);
  padding: calc(var(--pas) * 3);
  border: 2px solid var(--bordure);
  border-radius: var(--r-md);
  background: var(--carte);
  cursor: pointer;
  min-width: 8.5rem;
  text-align: left;
  font: inherit;
  color: var(--texte);
  transition: border-color var(--duree-anim) ease, transform var(--duree-anim) ease;
}
.vignette-theme:hover { transform: translateY(-2px); }
.vignette-theme.actif { border-color: var(--primaire); }
.vignette-theme__pastilles { display: flex; gap: 4px; }
.vignette-theme__pastille {
  width: 1.4rem; height: 1.4rem;
  border-radius: var(--r-pill);
  background: var(--pastille);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--encre) 12%, transparent);
}
.vignette-theme__nom { font-size: 0.9rem; font-weight: 600; }

/* --- Badges --------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--pas) * 1.5);
  padding: 2px calc(var(--pas) * 3);
  border-radius: var(--r-pill);
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--neutre-doux);
  color: var(--texte-doux);
}
.badge--succes { background: var(--succes-doux); color: color-mix(in srgb, var(--succes) 80%, var(--encre)); }
.badge--alerte { background: var(--alerte-doux); color: color-mix(in srgb, var(--alerte) 80%, var(--encre)); }
.badge--danger { background: var(--danger-doux); color: color-mix(in srgb, var(--danger) 82%, var(--encre)); }
.badge--primaire { background: var(--primaire-clair); color: var(--primaire-profond); }

/* --- États vides ----------------------------------------------------------
   Ils invitent à agir, ils ne s'excusent pas (§6). */

.etat-vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--pas) * 3);
  padding: calc(var(--pas) * 10) calc(var(--pas) * 5);
  text-align: center;
}
.etat-vide__motif { width: 6rem; color: var(--primaire); opacity: 0.08; }
/* Variante du prototype : l'icône dans un disque blanc plutôt qu'un grand
   filigrane. Elle tient dans une carte de liste, le filigrane non. */
.etat-vide__cercle {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--carte);
  display: grid;
  place-items: center;
  box-shadow: var(--ombre-1);
  color: var(--primaire);
}
.etat-vide__cercle svg { width: 1.6rem; height: 1.6rem; }
.etat-vide__titre { font-family: var(--police-titre); font-weight: 600; font-size: 1.05rem; }
.etat-vide__texte { color: var(--texte-doux); max-width: 32rem; font-size: 0.88rem; }

/* --- Messages ------------------------------------------------------------- */

.message {
  display: flex;
  gap: calc(var(--pas) * 3);
  padding: calc(var(--pas) * 3) calc(var(--pas) * 4);
  border-radius: var(--r-md);
  font-size: 0.9rem;
  background: var(--neutre-doux);
  color: var(--texte);
}
.message--erreur { background: var(--danger-doux); }
.message--succes { background: var(--succes-doux); }
/* Un avertissement : ce que le calcul n'a pas pu tenir, jamais une erreur. */
.message--alerte { background: var(--alerte-doux); }

/* --- Notifications passagères --------------------------------------------- */

.toasts {
  position: fixed;
  z-index: 160;
  left: 50%;
  bottom: calc(var(--hauteur-onglets) + var(--retrait-bas) + var(--pas) * 6);
  transform: translateX(-50%);
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: calc(var(--pas) * 2);
  width: min(28rem, calc(100vw - 2rem));
  pointer-events: none;
}
@media (min-width: 1024px) {
  .toasts { bottom: calc(var(--pas) * 5); left: auto; right: calc(var(--pas) * 5); transform: none; }
}

.toast {
  pointer-events: auto;
  padding: calc(var(--pas) * 2.75) calc(var(--pas) * 4.25);
  border-radius: var(--r-pill);
  background: var(--encre);
  color: var(--sur-encre);
  box-shadow: var(--ombre-3);
  font-size: 0.84rem;
  font-weight: 600;
  text-align: center;
  max-width: 88%;
  animation: toast-entree 0.34s var(--ressort);
}
.toast--erreur { background: var(--danger); }
.toast--succes { background: var(--succes); }

@keyframes toast-entree {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* --- Tableaux ------------------------------------------------------------- */

.tableau { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tableau th, .tableau td {
  padding: calc(var(--pas) * 3) calc(var(--pas) * 3);
  text-align: left;
  border-bottom: 1px solid var(--bordure);
  vertical-align: top;
}
.tableau th { font-weight: 600; color: var(--texte-doux); font-size: 0.8rem; }
.tableau tbody tr:hover { background: var(--survol); }
.tableau__enveloppe { border-radius: var(--r-md); overflow: hidden; }

/* Sous 768px, un tableau dense devient une pile de cartes : jamais de
   défilement horizontal (§6). */
@media (max-width: 767px) {
  .tableau--empilable thead { display: none; }
  .tableau--empilable tr {
    display: block;
    background: var(--carte);
    border-radius: var(--r-md);
    box-shadow: var(--ombre-1);
    padding: calc(var(--pas) * 3);
    margin-bottom: calc(var(--pas) * 3);
  }
  .tableau--empilable td {
    display: flex;
    justify-content: space-between;
    gap: calc(var(--pas) * 3);
    border: 0;
    padding: calc(var(--pas) * 1.5) 0;
  }
  .tableau--empilable td::before {
    content: attr(data-libelle);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--texte-doux);
    flex: none;
  }
}

/* --- Chargement ----------------------------------------------------------- */

.chargement {
  display: grid;
  place-items: center;
  padding: calc(var(--pas) * 12);
  color: var(--texte-tenu);
}

/* --- Fil de discussion -----------------------------------------------------
   Les échanges avec une famille (§9.5), et demain les notes internes du Tsevet
   (§9.6). Décalage à gauche pour la famille, à droite pour l'école : à un coup
   d'œil on voit qui a écrit en dernier sans lire une seule ligne.            */

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

.bulle {
  display: flex;
  flex-direction: column;
  gap: calc(var(--pas) * 1.5);
  padding: calc(var(--pas) * 3) calc(var(--pas) * 4);
  border-radius: var(--r-md);
  background: var(--carte-douce);
  border: 1px solid var(--filet);
}
.bulle--famille { margin-right: calc(var(--pas) * 6); }
.bulle--ecole {
  margin-left: calc(var(--pas) * 6);
  background: var(--primaire-clair);
  border-color: transparent;
}
.bulle__entete { display: flex; justify-content: space-between; gap: calc(var(--pas) * 2); }
.bulle__auteur { font-size: 0.8rem; font-weight: 600; }
.bulle__heure { font-size: 0.76rem; color: var(--texte-doux); white-space: nowrap; }
.bulle__sujet { font-weight: 600; }
.bulle__corps { line-height: 1.55; white-space: pre-wrap; }