/* ==========================================================================
   B18 V2 — Bibliothèque de composants (story S1.5)

   Aucune couleur littérale : tout passe par les jetons.
   Seuil mobile unique à 820 px (--seuil-mobile).

   RÈGLE STRUCTURANTE DE CE FICHIER
   La couleur identifie l'ÉVÉNEMENT, jamais le statut. Plusieurs anniversaires
   coexistent le même jour et c'est la couleur qui dit duquel on parle. Le
   statut passe donc par la FORME — un repère différent par état — et la teinte
   ne fait que doubler l'information. Conséquence pratique : tout composant
   d'état d'ici reste lisible en noir et blanc.
   ========================================================================== */

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

.carte {
  padding: var(--e-4);
  border: 1px solid var(--trait);
  border-radius: var(--r-m);
  background: var(--surface);
  box-shadow: var(--ombre-basse);
}

.carte-titre {
  font-size: var(--t-titre-s);
  font-weight: var(--graisse-appui);
  margin-bottom: var(--e-2);
}

/* La carte d'un événement porte sa couleur en filet supérieur, jamais en fond
   plein : cinq aplats côte à côte donneraient une page de couleur. */
.carte[data-evenement] {
  border-top-width: 3px;
}

.carte[data-evenement="1"] { border-top-color: var(--ev1); }
.carte[data-evenement="2"] { border-top-color: var(--ev2); }
.carte[data-evenement="3"] { border-top-color: var(--ev3); }
.carte[data-evenement="4"] { border-top-color: var(--ev4); }
.carte[data-evenement="5"] { border-top-color: var(--ev5); }

/* --------------------------------------------------------------------------
   Pastilles de statut

   Fond pastel, texte foncé de la même teinte, JAMAIS d'aplat saturé à texte
   blanc. Et un repère de forme, qui est ce qui distingue réellement les états.
   -------------------------------------------------------------------------- */

.pastille {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: 3px var(--e-3);
  border-radius: var(--r-p);
  font-size: var(--t-petit);
  font-weight: var(--graisse-appui);
  white-space: nowrap;
}

/* Le repère de forme. C'est LUI qui porte le statut ; la couleur le double.
   Rond plein = fait · rond creux = en cours · carré = à faire ·
   losange = problème. Quatre formes discernables au premier coup d'œil, et
   sans couleur. */
.pastille::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: none;
  background: currentColor;
}

.pastille[data-etat="fait"] {
  background: var(--pousse-f);
  color: var(--pousse);
}
.pastille[data-etat="fait"]::before {
  border-radius: 50%;
}

.pastille[data-etat="encours"] {
  background: var(--lagon-f);
  color: var(--teal);
}
.pastille[data-etat="encours"]::before {
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 2px currentColor;
}

.pastille[data-etat="afaire"] {
  background: var(--surface2);
  color: var(--encre2);
}
.pastille[data-etat="afaire"]::before {
  border-radius: 2px;
  background: transparent;
  box-shadow: inset 0 0 0 2px currentColor;
}

/* Le rouge, et lui seul, pour un vrai problème : retard, effectif
   insuffisant, stock sous le seuil. Pas pour un chevauchement d'animateurs,
   que le client considère comme normal. */
.pastille[data-etat="probleme"] {
  background: var(--lave-f);
  color: var(--lave);
}
.pastille[data-etat="probleme"]::before {
  transform: rotate(45deg);
}

/* Le suffixe d'incertitude. Un statut lu localement plutôt que vérifié auprès
   d'Axonaut porte un « ? » et une infobulle : la donnée est affichée, et le
   fait qu'elle n'est pas vérifiée aussi (CLAUDE.md §4). */
.pastille .incertain {
  font-weight: var(--graisse-forte);
  cursor: help;
}

/* --------------------------------------------------------------------------
   Badges — étiquettes en couleur pleine

   Jamais en transparence : sur un fond déjà teinté, un aplat semi-transparent
   donne un contraste imprévisible d'un écran à l'autre.
   -------------------------------------------------------------------------- */

.badge {
  display: inline-block;
  padding: 2px var(--e-2);
  border-radius: var(--r-p);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: var(--graisse-forte);
  white-space: nowrap;
}

/* FOND PASTEL, TEXTE FONCÉ DE LA MÊME TEINTE. Jamais d'aplat saturé à texte
 * blanc — règle standing KAIROZ, reprise au §7 du CLAUDE.md du projet.
 *
 * La première version faisait exactement l'inverse en thème clair : cinq pavés
 * pleins à blanc pur, alignés à quelques centimètres d'une rangée de pastilles
 * qui, elle, appliquait correctement la règle. Et c'est le thème par défaut,
 * celui qui est utilisé au quotidien.
 *
 * À ne pas confondre avec `.alerte-etiquette`, qui reste en couleur pleine :
 * une étiquette posée sur un fond DÉJÀ TEINTÉ est un cas à part, tranché par
 * B18_REGLES_AFFICHAGE.md §1 — un aplat semi-transparent y donnerait un
 * contraste imprévisible d'un écran à l'autre. Ce cas ne se rouvre pas. */
.badge[data-ton="neutre"] { background: var(--surface2); color: var(--encre2); }
.badge[data-ton="marque"] { background: var(--lagon-f); color: var(--teal); }
.badge[data-ton="attention"] { background: var(--ambre-f); color: var(--ambre); }
.badge[data-ton="probleme"] { background: var(--lave-f); color: var(--lave); }
.badge[data-ton="ok"] { background: var(--pousse-f); color: var(--pousse); }

/* --------------------------------------------------------------------------
   Barres de progression
   -------------------------------------------------------------------------- */

.barre {
  height: 6px;
  border-radius: 3px;
  background: var(--trait);
  overflow: hidden;
}

.barre > i {
  display: block;
  height: 100%;
  background: var(--teal);
}

.barre[data-etat="probleme"] > i {
  background: var(--lave);
}

.barre[data-etat="attention"] > i {
  background: var(--ambre);
}

/* Le chiffre accompagne toujours la barre. Une barre seule ne se lit pas :
   « à peu près aux deux tiers » n'est pas une information exploitable un
   mercredi à trois anniversaires. */
.barre-ligne {
  display: flex;
  align-items: center;
  gap: var(--e-3);
}

.barre-ligne .barre {
  flex: 1;
}

.barre-ligne .valeur {
  font-size: var(--t-petit);
  color: var(--encre2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

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

   Dégradé réservé aux surfaces actives et d'amplitude faible : au-delà, ça
   bascule dans le clinquant. Sobre ne veut pas dire plat.
   -------------------------------------------------------------------------- */

/* --trait-champ, pas --trait.
 *
 * Un bouton à contour n'a que sa bordure pour dire où il commence et où il
 * finit : son fond est à 1,03:1 de la page. Avec --trait, cette bordure était
 * mesurée à 1,23:1 en clair et 1,32:1 en sombre — 1,32 étant le chiffre exact
 * jugé disqualifiant pour un champ de saisie deux commits plus tôt.
 *
 * Le raisonnement de B18_REGLES_AFFICHAGE.md §2 vaut ici mot pour mot : c'est
 * un élément d'interface porteur de sens au sens de WCAG 1.4.11. Et le cas
 * n'est pas théorique — « Se déconnecter » sur l'écran Compte est le seul
 * contrôle de déconnexion existant sur téléphone. */
.btn-secondaire {
  min-height: var(--cible);
  padding: 0 var(--e-4);
  border: 1px solid var(--trait-champ);
  border-radius: var(--r-s);
  background: var(--surface);
  color: var(--encre);
  font-size: var(--t-appui);
  cursor: pointer;
}

.btn-secondaire:hover {
  border-color: var(--encre3);
  background: var(--surface2);
}

/* --------------------------------------------------------------------------
   Sous-onglets — pilules compactes

   Jamais des .btn pleine taille détournés en onglets : un sous-onglet est un
   libellé de bascule, pas un bouton principal. Règle standing KAIROZ, déjà
   corrigée une fois sur BIE et une fois sur B18.
   Compact veut dire libellé léger sur une ligne — pas cible minuscule : la
   hauteur reste à 44 px.
   -------------------------------------------------------------------------- */

.so {
  display: flex;
  gap: var(--e-1);
  padding: var(--e-1);
  background: var(--surface2);
  border: 1px solid var(--trait);
  border-radius: var(--r-p);
  overflow-x: auto;
}

.so button {
  flex: none;
  min-height: var(--cible);
  padding: 0 var(--e-5);
  border: 0;
  border-radius: var(--r-p);
  background: transparent;
  color: var(--encre2);
  /* Taille de texte relevée le 29/08 : à --t-petit, les libellés étaient trop
     petits pour être lus d un coup d oeil. Compact veut dire une seule ligne
     et une hauteur de 44 px, pas un texte minuscule. */
  font-size: var(--t-base);
  white-space: nowrap;
  cursor: pointer;
}

.so button[aria-selected="true"] {
  background: var(--surface);
  color: var(--encre);
  font-weight: var(--graisse-appui);
  box-shadow: var(--ombre-basse);
}

/* SUR TÉLÉPHONE, LA BARRE PERD SON ÉTUI.
 *
 * « Vue mobile, il reste la barre de navigation comme vue PC et c'est inutile
 * cet arrondi » — Stéphanie, 31/08.
 *
 * La forme en pilule dans un étui arrondi vient du poste bureau, où la barre
 * flotte au milieu d'une page large et a besoin d'un contour pour se tenir. Sur
 * 375 px elle occupe déjà toute la largeur : l'étui ne délimite plus rien, il
 * ajoute deux bordures, un fond de plus et huit pixels perdus de chaque côté,
 * sur l'écran où la place manque.
 *
 * Reste une rangée de libellés qui défile, l'actif souligné. C'est la forme
 * d'onglets d'une application native, et c'est le modèle validé le 21/08.
 *
 * Les deux composants d'onglets ne fusionnent pas pour autant
 * (B18_REGLES_AFFICHAGE.md) : `.so` reste `.so`, elle change seulement d'habit
 * sous le seuil. */
@media (max-width: 820px) {
  .so {
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--trait);
    border-radius: 0;
    background: transparent;
    gap: 0;
  }

  .so button {
    /* Les libellés se répartissent au lieu de se serrer à gauche, tant qu'ils
       tiennent ; au-delà, le conteneur défile comme avant. */
    flex: 1 0 auto;
    padding: 0 var(--e-3);
    border-radius: 0;
  }

  .so button[aria-selected="true"] {
    background: transparent;
    box-shadow: inset 0 -2px 0 0 var(--teal);
    color: var(--teal);
  }
}

/* --------------------------------------------------------------------------
   États vides et de chargement
   -------------------------------------------------------------------------- */

/* Le squelette de chargement respire doucement. Coupé par
   prefers-reduced-motion, géré globalement dans app.css. */
.squelette {
  height: 12px;
  border-radius: var(--r-s);
  background: var(--trait);
  animation: respire 1.6s ease-in-out infinite;
}

.squelette + .squelette {
  margin-top: var(--e-2);
}

@keyframes respire {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* --------------------------------------------------------------------------
   Seuil mobile : 820 px (--seuil-mobile)
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .barre-ligne {
    flex-wrap: wrap;
  }
}

/* --------------------------------------------------------------------------
   Remplissage des barres.

   Une règle par palier plutôt qu'un style en ligne posé par le JS : un style
   en ligne échappe à la feuille de style, donc au thème, et c'est le défaut
   que les 281 styles en ligne de la V1 ont coûté à retirer
   (B18_REGLES_AFFICHAGE.md §11). Les paliers de dix suffisent — personne ne
   lit un écart de 3 % sur une barre de 6 px de haut, et le chiffre exact est
   écrit à côté.
   -------------------------------------------------------------------------- */
.remplissage[data-part="0"] { width: 0%; }
.remplissage[data-part="10"] { width: 10%; }
.remplissage[data-part="20"] { width: 20%; }
.remplissage[data-part="30"] { width: 30%; }
.remplissage[data-part="40"] { width: 40%; }
.remplissage[data-part="50"] { width: 50%; }
.remplissage[data-part="60"] { width: 60%; }
.remplissage[data-part="70"] { width: 70%; }
.remplissage[data-part="80"] { width: 80%; }
.remplissage[data-part="90"] { width: 90%; }
.remplissage[data-part="100"] { width: 100%; }

/* Une alerte de vrai problème coupe la lecture : fond teinté, barre pleine,
   étiquette pleine. C'est la seule qui a le droit de le faire. */
.alerte[data-gravite="probleme"] {
  border-left-color: var(--lave);
  background: var(--lave-f);
}

.alerte[data-gravite="probleme"] .alerte-etiquette {
  background: var(--lave);
  color: var(--sur-lave);
}

/* Un paragraphe qui commente les échantillons juste au-dessus a besoin de sa
   respiration : sans elle il se colle aux pastilles et se lit comme leur
   légende plutôt que comme une explication. */
.demo + .note {
  margin-top: var(--e-3);
}

/* Largeur plafonnée sur les lignes courtes. Étirée jusqu'à 1220 px, une barre
   de progression laisse son chiffre seul à l'autre bout de l'écran — « espace
   inutile », retour de Cédric du 14/08 sur les notifications. */
.barre-ligne {
  max-width: 760px;
}