/* ==========================================================================
   Suivi CA Régie — surcouche Bulma
   Sobre et dense : c'est un outil de saisie et de lecture chiffrée, utilisé
   toute la journée par quelques personnes qui connaissent leur métier.
   ========================================================================== */

/* --------------------------------------------------------------- couleurs

   Tout passe par des jetons. C'est ce qui permet au thème sombre, plus bas,
   de ne redéfinir que cette liste au lieu de repeindre chaque règle. */

:root {
  --encre: #1f2430;
  --encre-douce: #5a6478;
  --encre-tres-douce: #9aa4b8;

  --fond: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f7f9fc;          /* colonnes d'agrégats, en-têtes secondaires */
  --surface-info: #f8faff;       /* le bloc des champs essentiels du formulaire */

  --trait: #e4e7ee;
  --trait-faible: #f0f2f6;
  --trait-fort: #cdd3de;
  --gris-doux: #eef0f4;          /* squelettes, jauges */

  --survol: #f9fbff;
  --survol-fort: #eef4ff;

  --accent: #2f5fd0;
  --accent-vif: #2f5fd0;
  --accent-lueur: rgba(47, 95, 208, 0.10);
  --cyan: #0e8ea6;
  --violet: #7c5cd6;

  --positif: #1f9d6b;
  --negatif: #d64550;
  --negatif-fond: #fdf0f2;
  --alerte: #d9822b;
  --alerte-fond: #fff4e5;

  --infobulle-fond: rgba(31, 36, 48, 0.95);
  --ombre-legere: 0 1px 2px rgba(0, 0, 0, 0.04);
  --ombre-forte: 0 8px 24px rgba(0, 0, 0, 0.14);
  --ombre-flottante: 0 4px 16px rgba(0, 0, 0, 0.16);

  --liseré: none;                /* le filet lumineux du thème sombre */
}

body {
  background: var(--fond);
  color: var(--encre);
  font-feature-settings: 'tnum' 1; /* chiffres de même largeur : les colonnes s'alignent */
}

/* L'attribut `hidden` doit toujours l'emporter.
   Le navigateur lui applique `display: none`, mais depuis SA feuille de style :
   la moindre règle d'auteur portant `display` la neutralise, et l'élément
   reste affiché alors que le code le croit caché. Piège classique, et
   silencieux — on cherche le bogue dans le JavaScript. */
[hidden] { display: none !important; }

/* ------------------------------------------------------------- navigation */

/* Bulma 1.x remplit l'onglet actif d'un aplat de couleur, sur lequel notre
   couleur d'accent devient illisible. On neutralise l'aplat et on marque
   l'onglet courant par un filet sous le libellé : plus sobre, et lisible. */

.navbar {
  background: var(--surface);
  border-bottom: 1px solid var(--trait);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  min-height: 3rem;
}
/* Une seule rangée, dont l'ordre est explicite : marque, liens, témoins,
   menu. Les liens cèdent en premier quand la place manque ; la marque et le
   menu ne bougent jamais. */
.barre-principale {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 3rem;
  gap: 0.25rem;
}
.barre-principale .marque { flex: none; }

.liens-navigation {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  margin-left: 0.75rem;
}
.liens-navigation::-webkit-scrollbar { display: none; }
.liens-navigation .navbar-item { flex: none; }

.navbar-item,
.navbar-link {
  font-size: 0.9rem;
  padding: 0.5rem 0.7rem;
  white-space: nowrap;
}

.liens-navigation .navbar-item {
  color: var(--encre-douce);
  border-radius: 0;
}
.liens-navigation .navbar-item:hover { color: var(--encre); background: transparent; }

/* La page courante se lit à sa couleur et à sa graisse, sans filet dessous :
   le titre de la page est juste en dessous et dit déjà où l'on se trouve. */
.liens-navigation .navbar-item.is-active {
  /* on annule l'aplat de Bulma… */
  --bulma-navbar-item-background-a: 0;
  background: transparent;
  /* …et on garde un repère net */
  color: var(--accent);
  font-weight: 600;
}

/* La marque était décalée : `.navbar-item` est en `display: block`, donc le
   logo et le mot ne partageaient aucune ligne de base commune. En flex, ils
   se centrent l'un sur l'autre quelles que soient leurs hauteurs. */
.marque {
  display: flex !important;
  align-items: center;
  gap: 0.55rem;
  /* Le logo s'aligne sur la marge du contenu — même retrait que le titre de la
     page, juste dessous. L'ancien dessin portait son propre blanc et pouvait
     serrer le bord ; celui-ci commence à ras de sa boîte. */
  padding: 0.4rem 0.75rem 0.4rem 1.5rem;
}
/* Le logo est la marque, seul : « Régie » redisait ce que la page dit déjà en
   titre, et occupait la place au détriment des liens sur écran étroit. */
.logo-h3 {
  height: 1.5rem;
  width: auto;
  display: block;
}

.pastille {
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  margin-right: 0.45rem;
  flex: none;
}

/* Rien ne doit pouvoir pousser le menu hors de l'écran : ce sont les liens
   qui cèdent et défilent, jamais la fenêtre qui déborde. */

/* Le nom vit dans le menu déroulant. La barre ne porte qu'un bouton de menu :
   une pastille de couleur seule n'annonçait pas qu'elle était cliquable. */
.navbar-link.est-menu { display: flex; align-items: center; }

.icone-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.22rem;
  width: 1.15rem;
  height: 1.15rem;
}
.icone-burger span {
  display: block;
  height: 2px;
  border-radius: 1px;
  background: var(--encre);
  transition: background 0.15s;
}
.navbar-link.est-menu:hover .icone-burger span { background: var(--accent); }

/* Le chevron de Bulma n'a pas lieu d'être : le burger annonce déjà un menu. */
.menu-compte .navbar-link.est-menu { padding-right: 0.9rem; cursor: pointer; }
.menu-compte .navbar-link.est-menu::after { display: none !important; }

/* Menu ouvert au clic, et non au survol : sur mobile il n'y a pas de survol. */
.menu-compte { position: relative; }
.menu-compte .navbar-dropdown { display: none; }
.menu-compte.is-active .navbar-dropdown {
  display: block;
  position: absolute;
  right: 0;
  top: 100%;
  left: auto;
  border-top: 1px solid var(--trait);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  border-radius: 0 0 6px 6px;
}

/* La navigation n'apparaît dans ce menu que lorsque la barre l'a repliée. */
.navigation-repliee { display: none; }
.menu-compte { flex: none; }

/* Même piège que dans la barre : Bulma remplit l'élément actif d'un aplat de
   couleur, sur lequel la couleur d'accent devient illisible — bleu sur bleu.
   On annule l'aplat et on marque la page courante par un filet à gauche. */
.navbar-dropdown .lien-navigation.is-active {
  --bulma-navbar-item-background-a: 0;
  background: transparent;
  color: var(--accent);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--accent);
}
.navbar-dropdown .lien-navigation:hover { background: var(--survol); color: var(--encre); }
.navbar-dropdown .lien-navigation.is-active:hover { color: var(--accent); }

@media (max-width: 1023px) {
  .liens-navigation { display: none; }
  .navigation-repliee { display: block; }
}

.bloc-identite { display: block; line-height: 1.35; }
.bloc-identite strong { color: var(--encre); }

.navbar-dropdown { min-width: 16rem; max-width: 20rem; }
.navbar-dropdown .navbar-item { white-space: normal; }
/* Bulma dispose les enfants du navbar-item côte à côte : le titre et son
   explication finissaient en deux colonnes. Un seul enfant règle la question. */
.mention-admin {
  display: block;
  background: var(--alerte-fond);
  color: var(--alerte);
  line-height: 1.45;
  font-size: 0.78rem;
}
.mention-admin strong { color: var(--alerte); }
.mention-admin code { background: rgba(0,0,0,.05); color: inherit; font-size: 0.92em; }
.mention-admin.est-dev { background: var(--negatif-fond); color: var(--negatif); }
.mention-admin.est-dev strong { color: var(--negatif); }

/* Ces témoins vivent dans la zone de marque, et non dans le menu : celui-ci
   est replié sous 1024 px, et un avertissement qu'on ne voit pas sur mobile
   n'avertit personne. */
.zone-etats {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;   /* pousse témoins et menu tout à droite */
  padding-right: 0.5rem;
  flex: none;
}
.etiquette-etat {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: help;
}
.etiquette-etat::before { content: '●'; font-size: 0.55rem; }
.etiquette-etat.est-dev { background: var(--negatif-fond); color: var(--negatif); }

/* Le témoin du temps réel : une pastille, à gauche du menu, et rien d'autre.
   Pas de texte — la barre est déjà chargée, et l'état se lit à la couleur.
   L'infobulle porte la phrase complète, au survol comme au clavier : la
   pastille est focalisable, sans quoi elle ne dirait rien à qui n'a pas de
   souris. */
.temoin-temps-reel {
  /* `inline-block` explicite : un span reste en ligne, et une largeur ne
     s'applique pas à un élément en ligne. Ici il est aussi élément de flex,
     donc déjà blockifié — mais le jour où on le déplace, il disparaîtrait. */
  display: inline-block;
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  flex: none;
  cursor: help;
  background: var(--trait-fort);
  transition: background 0.2s, box-shadow 0.2s;
}
.temoin-temps-reel:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.temoin-temps-reel.est-actif { background: var(--positif); box-shadow: 0 0 8px var(--positif); }
.temoin-temps-reel.est-degrade { background: var(--alerte); box-shadow: 0 0 8px var(--alerte); }
.temoin-temps-reel.est-attente { background: var(--trait-fort); }

/* L'état du temps réel, en clair dans le menu : toujours lisible, jamais
   envahissant. La couleur de la puce dit tout, le texte confirme. */
.ligne-etat { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; }
.ligne-etat .puce { width: 0.6rem; height: 0.6rem; border-radius: 50%; flex: none; background: var(--trait-fort); }
.ligne-etat.est-actif .puce { background: var(--positif); box-shadow: 0 0 8px var(--positif); }
.ligne-etat.est-actif .texte { color: var(--positif); }
.ligne-etat.est-degrade .puce { background: var(--alerte); }
.ligne-etat.est-degrade .texte { color: var(--alerte); }
.ligne-etat.est-attente .texte { color: var(--encre-douce); }

@media (max-width: 480px) {
  /* Sur un écran étroit, on garde la pastille et on lâche le texte. */
  .etiquette-etat { font-size: 0; padding: 0.3rem; gap: 0; }
  .etiquette-etat::before { font-size: 0.7rem; }
}

/* Un mouvement permanent dans le coin de l'œil fatigue : la pastille ne
   clignote pas. Sa couleur suffit, et l'infobulle dit le reste. */
@media (prefers-reduced-motion: reduce) {
  .temoin-temps-reel { transition: none; }
}

/* Sous 1200 px la barre reste large : on la laisse défiler plutôt que
   déborder de la page et décaler tout le contenu. */
@media (min-width: 1024px) and (max-width: 1240px) {
  .liens-navigation .navbar-item { font-size: 0.83rem; padding: 0.5rem 0.45rem; }
}

/* ------------------------------------------------------------------ mise en page */

.page { padding: 1.25rem 1.5rem 4rem; }
.entete-page {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.entete-page h1 {
  font-size: 1.35rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  margin: 0;
}

.carte {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 8px;
}
.carte + .carte { margin-top: 1rem; }
.carte-corps { padding: 1rem 1.1rem; }

/* ------------------------------------------------------------- tri */

.zone-tri { position: relative; flex: none; }

.bouton-tri {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 100%;
  padding: 0 0.9rem;
  border: 1px solid var(--trait);
  border-radius: 8px;
  background: var(--surface);
  color: var(--encre);
  font-size: 0.88rem;
  white-space: nowrap;
}
.bouton-tri:hover { border-color: var(--trait-fort); color: var(--encre); }
.bouton-tri.est-ouvert { border-color: var(--accent); color: var(--accent); }
.bouton-tri .fleche { color: var(--accent); font-weight: 700; }

.popover-tri {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  z-index: 40;
  min-width: 20rem;
  padding: 0.6rem;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 8px;
  box-shadow: var(--ombre-forte);
}
.popover-tri .titre {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--encre-douce);
  margin: 0.15rem 0.35rem 0.45rem;
}
.popover-tri .astuce {
  margin: 0.5rem 0.35rem 0.1rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--trait-faible);
  font-size: 0.7rem;
  color: var(--encre-douce);
}

.option-tri {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--encre);
  font-family: inherit;
  font-size: 0.84rem;
  text-align: left;
  cursor: pointer;
}
.option-tri:hover { background: var(--survol-fort); }
.option-tri .intitule { flex: 1; line-height: 1.25; }
.option-tri .aide {
  display: block;
  font-size: 0.68rem;
  color: var(--encre-douce);
}
.option-tri .sens { color: var(--accent); font-weight: 700; width: 0.8rem; text-align: right; }
.option-tri .icon { color: var(--encre-tres-douce); }
.option-tri.est-actif { background: var(--survol-fort); color: var(--accent); font-weight: 600; }
.option-tri.est-actif .icon { color: var(--accent); }

/* ------------------------------------------------------ plage de périodes */

/* Placée entre la recherche et les filtres : cadrer la période est le second
   geste le plus fréquent, il n'a rien à faire replié dans un panneau. */
.zone-plage { position: relative; flex: none; }

.plage-dates { margin-bottom: 0 !important; flex-wrap: nowrap; height: 100%; }
.plage-dates .button {
  height: 100%;
  border-color: var(--trait);
  color: var(--encre-douce);
  font-size: 0.84rem;
  padding: 0 0.75rem;
  white-space: nowrap;
  margin-bottom: 0 !important;
}
.plage-dates .button:hover { color: var(--encre); border-color: var(--trait-fort); z-index: 2; }

/* Le raccourci retenu est cerné, pas rempli : sur une rangée de boutons
   accolés, un aplat écraserait les voisins. */
.plage-dates .button.est-actif {
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  font-weight: 600;
  z-index: 3;
}
.plage-dates .bouton-calendrier { padding: 0 0.7rem; }
.plage-dates .bouton-calendrier.est-renseigne { color: var(--accent); border-color: var(--accent); }

.popover-plage {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  z-index: 40;
  min-width: 19rem;
  padding: 0.85rem 0.95rem;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 8px;
  box-shadow: var(--ombre-forte);
}
.popover-plage .titre {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--encre-douce);
  margin-bottom: 0.5rem;
}
.popover-plage .ligne-champ {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.45rem;
}
.popover-plage .etiquette {
  width: 2rem;
  font-size: 0.8rem;
  color: var(--encre-douce);
  text-align: right;
}
.popover-plage select {
  border: 1px solid var(--trait);
  border-radius: 5px;
  padding: 0.35rem 1.8rem 0.35rem 0.55rem;
  font-family: inherit;
  font-size: 0.84rem;
  background: var(--surface);
  color: var(--encre);
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.popover-plage select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-lueur);
}
.popover-plage .select-mois { flex: 1; min-width: 8.5rem; }
.popover-plage .select-annee { width: 5.5rem; }

/* Ce qui sera appliqué, écrit en toutes lettres avant de cliquer. */
.popover-plage .apercu {
  margin: 0.65rem 0 0;
  padding-top: 0.55rem;
  border-top: 1px solid var(--trait-faible);
  font-size: 0.78rem;
  color: var(--accent);
  font-weight: 600;
}

.popover-plage .pied {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

@media (max-width: 900px) {
  /* Sur écran étroit, les raccourcis s'effacent : le calendrier suffit. */
  .plage-dates .button:not(.bouton-calendrier) { display: none; }
}

/* --------------------------------------------------- recherche et filtres */

/* La recherche est le geste le plus fréquent : elle occupe le premier rang,
   à pleine largeur. Les filtres, eux, servent par intermittence — ils se
   replient derrière un bouton qui indique combien sont actifs. */

.zone-recherche { margin-bottom: 0.9rem; }

.ligne-recherche {
  display: flex;
  gap: 0.6rem;
  align-items: stretch;
}

.champ-recherche {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}
/* Le `z-index` n'est pas un ornement. Bulma pose `position: relative` sur
   `.input` : un champ portant cette classe est peint APRÈS la loupe, qui le
   précède dans le balisage, et son fond opaque l'efface — le creux reste, le
   pictogramme disparaît. C'est ce qui s'était passé sur l'écran des droits
   d'accès, seul endroit où le champ porte la classe de Bulma. */
.champ-recherche .loupe {
  position: absolute;
  z-index: 1;
  left: 0.95rem;
  width: 1.15rem;
  height: 1.15rem;
  color: var(--encre-douce);
  pointer-events: none;
}
.champ-recherche input {
  width: 100%;
  font-size: 1rem;
  padding: 0.75rem 2.5rem 0.75rem 2.85rem;
  border: 1px solid var(--trait);
  border-radius: 8px;
  background: var(--surface);
  color: var(--encre);
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.champ-recherche input::placeholder { color: var(--encre-tres-douce); }
.champ-recherche input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-lueur);
}
.champ-recherche input::-webkit-search-cancel-button { display: none; }

.champ-recherche .vider {
  position: absolute;
  right: 0.6rem;
  border: 0;
  background: transparent;
  color: var(--encre-douce);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.35rem;
  border-radius: 4px;
}
.champ-recherche .vider:hover { background: var(--gris-doux); color: var(--encre); }

/* Le bouton porte l'ICÔNE du filtre, et non le mot : le panneau qu'il ouvre
   dit déjà de quoi il s'agit, et la pastille du nombre reste lisible sans le
   libellé. L'infobulle et l'`aria-label` gardent la phrase entière — comme
   pour le bouton de tri, juste à côté.

   Pas de chevron non plus : le panneau s'ouvre juste dessous, sur toute la
   largeur, et le bouton cerné d'accent dit déjà qu'il est ouvert. Une flèche
   n'ajoutait qu'un signe de plus à interpréter. */
.bouton-filtres,
.bouton-favori {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: auto;
  padding: 0 0.85rem;
  font-size: 0.92rem;
  border: 1px solid var(--trait);
  border-radius: 8px;
  background: var(--surface);
  color: var(--encre);
  white-space: nowrap;
}
/* Bulma décale l'icône de tête vers la gauche, en supposant qu'un libellé la
   suit. Ici la pastille est masquée le plus souvent, et le pictogramme se
   retrouvait de travers dans son bouton — le `gap` du flex suffit à espacer. */
.bouton-filtres .icon:first-child:not(:last-child),
.bouton-favori .icon:first-child:not(:last-child) {
  margin-inline-start: 0;
  margin-inline-end: 0;
}
.bouton-filtres:hover,
.bouton-favori:hover { border-color: var(--trait-fort); color: var(--encre); }
.bouton-filtres.est-ouvert,
.bouton-filtres.a-des-filtres,
.bouton-favori.est-ouvert {
  border-color: var(--accent);
  color: var(--accent);
}

/* La bascule de vue ne porte plus que des pictogrammes : Bulma décale
   l'icône de tête en supposant qu'un libellé la suit, il faut le lui retirer —
   même piège que sur le bouton des filtres. */
#bascule-vue .icon:first-child:not(:last-child) {
  margin-inline-start: 0;
  margin-inline-end: 0;
}
#bascule-vue .button { padding-left: 0.7rem; padding-right: 0.7rem; }

.compteur-filtres {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--surface);
  font-size: 0.72rem;
  font-weight: 650;
}

.panneau-filtres {
  margin-top: 0.6rem;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 8px;
  padding: 0.9rem 1rem;
}
.pied-filtres { border-top: 1px solid var(--trait); }

.grille-filtres {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 0.6rem 0.7rem;
}
.grille-filtres .select,
.grille-filtres .select select,
.grille-filtres .input { width: 100%; }
.grille-filtres label {
  display: block;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--encre-douce);
  margin-bottom: 0.15rem;
}
/* Un filtre actif se repère d'un coup d'œil dans la grille. */
.grille-filtres select.est-actif {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* ------------------------------------------------ filtres en rangées de tags

   Le panneau des insertions ne déroule plus de listes : chaque filtre est une
   rangée horizontale de tags, où l'on voit les valeurs possibles sans rien
   ouvrir et où le clic applique le filtre. L'intitulé tient dans une colonne
   fixe, à gauche, pour que les rangées s'alignent et se lisent en descendant. */

.liste-filtres { display: grid; gap: 0.15rem; }

.ligne-filtre {
  display: grid;
  grid-template-columns: 11rem 1fr;
  align-items: center;
  gap: 0.5rem;
  padding: 0.1rem 0;
}
.ligne-filtre + .ligne-filtre { border-top: 1px solid var(--trait-faible); }

.tete-filtre {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem;
  min-width: 0;
}
.ligne-filtre .intitule-filtre {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--encre-douce);
  text-align: right;
  line-height: 1.2;
}
.ligne-filtre.est-actif .intitule-filtre { color: var(--accent); font-weight: 700; }

/* ------------------------------------------------------- loupe d'une rangée

   Trente-six commerciaux ne se parcourent pas à la flèche. La loupe ouvre un
   champ qui ne filtre QUE sa rangée, et refermer le champ rend la liste
   entière : une rangée laissée amputée serait un filtre invisible. */

.zone-loupe { position: relative; display: flex; flex: none; }

.loupe-filtre {
  width: 1.35rem;
  height: 1.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--encre-tres-douce);
  font-size: 0.68rem;
  cursor: pointer;
}
.loupe-filtre:hover { background: var(--survol-fort); color: var(--accent); }
.loupe-filtre.est-ouvert { background: var(--accent); color: #fff; }

.popover-loupe {
  position: absolute;
  z-index: 45;
  top: calc(100% + 0.35rem);
  /* Ouverture vers la droite : à gauche il n'y a que le bord du panneau,
     à droite toute la rangée qu'on s'apprête à filtrer. */
  left: 0;
  width: 15rem;
  padding: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 8px;
  box-shadow: var(--ombre-forte);
}
.champ-loupe {
  width: 100%;
  padding: 0.25rem 0.5rem;
  font-family: inherit;
  font-size: 0.82rem;
  color: var(--encre);
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 6px;
}
.champ-loupe:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-lueur);
}
.compte-loupe {
  margin-top: 0.35rem;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--encre-tres-douce);
}
.compte-loupe.est-vide { color: var(--negatif); }

/* --------------------------------------------- mode de sélection d'une rangée

   Le bouton dit comment la rangée se comporte : cases cochées, les valeurs se
   cumulent ; bouton radio, une seule à la fois. L'exclusif est teinté, parce
   qu'une rangée qui ne réagit pas comme sa voisine doit le dire d'elle-même. */

.mode-filtre {
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--encre-tres-douce);
  font-size: 0.68rem;
  cursor: pointer;
}
.mode-filtre:hover { background: var(--survol-fort); color: var(--accent); }
.mode-filtre.est-exclusif { background: var(--accent-lueur); color: var(--accent); }

/* Le bandeau des tags emprunte la mécanique des bandeaux de supports —
   défilement natif et flèches à la demande — mais pas leur habillage : ici,
   pas de cadre ni de fond, la rangée est déjà cernée par le panneau. */
.bandeau-tags {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}
.piste-tags {
  display: flex;
  gap: 0.3rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
  padding: 0.25rem 0.1rem;
}
.piste-tags::-webkit-scrollbar { display: none; }

.bandeau-tags .fleche-bandeau { height: 1.7rem; width: 1.3rem; }

.tag-filtre {
  scroll-snap-align: start;
  flex: none;
  padding: 0.16rem 0.6rem;
  border: 1px solid var(--trait);
  border-radius: 999px;
  background: var(--surface);
  color: var(--encre-douce);
  font-family: inherit;
  font-size: 0.78rem;
  line-height: 1.35;
  white-space: nowrap;
  cursor: pointer;
}
.tag-filtre:hover { border-color: var(--trait-fort); color: var(--encre); }

/* Le tag retenu est rempli : sur une rangée qui déborde de l'écran, un simple
   liseré se perdrait — il faut le retrouver après avoir fait défiler. */
.tag-filtre.est-actif {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
.tag-filtre.est-actif:hover { color: #fff; }

/* Les valeurs se cumulent : un tag rempli ne dit pas, à lui seul, qu'on peut
   le retirer. La croix l'annonce — elle ne se clique pas à part, c'est tout
   le tag qui bascule. */
.tag-filtre .croix {
  margin-left: 0.1rem;
  font-size: 0.95em;
  color: rgba(255, 255, 255, 0.65);
}
.tag-filtre:hover .croix { color: #fff; }

/* Les initiales redisent en petit ce que le nom donne en entier : elles
   accompagnent, elles ne pèsent pas. */
.tag-filtre .sigle { color: var(--encre-tres-douce); }
.tag-filtre.est-actif .sigle { color: rgba(255, 255, 255, 0.75); }

@media (max-width: 640px) {
  /* L'intitulé passe au-dessus : deux colonnes sur un écran étroit ne
     laisseraient aux tags qu'une fenêtre trop mince pour en lire deux. */
  .ligne-filtre { grid-template-columns: 1fr; gap: 0.1rem; }
  .tete-filtre { justify-content: flex-start; }
  .ligne-filtre .intitule-filtre { text-align: left; }
}

/* Conservée pour les autres écrans, dont les filtres tiennent sur une ligne. */
.barre-filtres {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.9rem;
}

@media (max-width: 640px) {
  .ligne-recherche { flex-wrap: wrap; }
  .bouton-filtres,
  .zone-favori,
  .bouton-favori { width: 100%; justify-content: center; }
}

/* ---------------------------------------------------- bandeau des supports */

/* Défilement natif : `overflow-x` et `scroll-snap` font le travail. La molette,
   le pavé tactile, le clavier et le tactile fonctionnent alors sans qu'on ait
   à les réimplémenter — et sans dépendance. */

.bandeau-supports {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.9rem;
  padding: 0.4rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 8px;
}

.piste-supports,
.piste-parutions,
.piste-favoris {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
  padding: 0.1rem;
}
.piste-supports::-webkit-scrollbar,
.piste-parutions::-webkit-scrollbar,
.piste-favoris::-webkit-scrollbar { display: none; }

/* Le rattachement d'une page à sa famille, en surtitre du titre. */
.entete-page h1 .surtitre {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--encre-douce);
}

/* Le commercial sur une carte : un pictogramme, puis le prénom ou les
   initiales. Le nom complet reste dans l'infobulle. */
.commercial-court {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--encre-douce);
  cursor: default;
}
.commercial-court .icon { color: var(--encre-tres-douce); font-size: 0.8rem; }

/* Le nombre de lignes par page, glissé dans la barre de pagination. */
.par-page {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  order: 3;
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--encre-douce);
}
/* Le compte des lignes affichées, en mode « tout » : il tient la place des
   numéros de page, à gauche du sélecteur. */
.compte-tranche { font-size: 0.72rem; color: var(--encre-douce); order: 2; }

/* La sentinelle ne se voit pas : elle n'est là que pour entrer dans le champ
   de vision et demander la suite. */
#sentinelle { width: 100%; height: 1px; order: 4; }

.par-page .select select { font-size: 0.72rem; height: auto; padding: 0.2rem 1.8rem 0.2rem 0.5rem; }
.par-page .select:not(.is-multiple):not(.is-loading)::after { right: 0.7rem; }

/* La mosaïque de la duplication : même grammaire que partout — couverture,
   numéro, période — mais chaque vignette est une case à cocher. */
.cadre-mosaique {
  max-height: 24rem;
  overflow-y: auto;
  padding: 0.6rem;
  border: 1px solid var(--trait);
  border-radius: 8px;
  background: var(--fond);
}
.vignette-parution.est-cochable { position: relative; cursor: pointer; text-align: center; }
.vignette-parution.est-cochable input { position: absolute; opacity: 0; pointer-events: none; }
.vignette-parution.est-cochable .marque-choix {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--trait-fort);
  color: transparent;
  font-size: 0.62rem;
}
.vignette-parution.est-cochable:hover .couverture { border-color: var(--trait-fort); }
.vignette-parution.est-choisie .marque-choix {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.vignette-parution.est-choisie .couverture {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}
.vignette-parution.est-cochable input:focus-visible + .couverture {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Le filtre « Parution », dans le panneau replié : une étiquette, puis la
   bande de couvertures. Elle n'occupe donc plus la largeur de l'écran tant
   qu'on ne la cherche pas. */
.filtre-parutions { margin-top: 0.9rem; }
.filtre-parutions .intitule-filtre {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--encre-douce);
}
.filtre-parutions .bandeau-numeros { margin-top: 0; margin-bottom: 0; }

/* -------------------------------------------- bandeau des numéros

   Même mécanique que le bandeau des titres, mais des couvertures plutôt que
   des logos : un numéro se reconnaît à son image, pas à son matricule. */
.bandeau-numeros { margin-top: -0.4rem; }

.vignette-numero {
  scroll-snap-align: start;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  width: 4.3rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
}
.vignette-numero .couverture {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--trait);
  border-radius: 5px;
  background: var(--gris-doux);
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}
.vignette-numero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vignette-numero:hover .couverture {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.vignette-numero.est-actif .couverture {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}
.vignette-numero .numero {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--encre-douce);
  white-space: nowrap;
}
.vignette-numero .periode {
  font-size: 0.56rem;
  color: var(--encre-tres-douce);
  white-space: nowrap;
  line-height: 1;
}
.vignette-numero.est-actif .numero { color: var(--accent); }

/* Au changement d'année, un filet vertical qui porte l'année en pied. Sur une
   file de soixante numéros, rien ne disait où finissait un exercice ; le
   millésime au bas du trait le nomme sans voler la place d'une couverture. */
.vignette-numero.change-annee { margin-left: 2.1rem; position: relative; }
.vignette-numero.change-annee::before {
  content: '';
  position: absolute;
  left: -1.05rem;
  top: 0.1rem;
  bottom: 1rem;
  border-left: 1px solid var(--trait-fort);
}
.vignette-numero.change-annee::after {
  content: attr(data-annee);
  position: absolute;
  left: -1.05rem;
  bottom: 0;
  transform: translateX(-50%);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--encre-douce);
}

/* Le placeholder est ici minuscule : le libellé sous le dessin ferait une
   bouillie de trois pixels, et il est déjà écrit sous la vignette. */
.vignette-numero .sans-couverture {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--encre-tres-douce);
}
.vignette-numero .sans-couverture > span { display: none; }
.vignette-numero .logo-support { width: 74%; height: 1.6rem; color: var(--encre-tres-douce); }
.vignette-numero .logo-support use { fill: currentColor; }

.vignette-support {
  scroll-snap-align: start;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  width: 6.5rem;
  height: 3.1rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--trait);
  border-radius: 7px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
}
.vignette-support:hover { border-color: var(--trait-fort); background: var(--survol); }
.vignette-support.est-actif {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  background: var(--survol-fort);
}

/* Le logo prend une encre adoucie plutôt que la couleur pleine du texte :
   une rangée de titres en contraste maximal se dispute l'attention avec la
   liste qu'elle surplombe. Le titre retenu, lui, passe à l'accent. */
.vignette-support .visuel {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.35rem;
  width: 100%;
  color: var(--encre-douce);
  transition: color 0.12s;
}
.vignette-support:hover .visuel { color: var(--encre); }
.vignette-support.est-actif .visuel { color: var(--accent); }
.vignette-support img {
  max-height: 1.35rem;
  max-width: 100%;
  object-fit: contain;
}
/* Le logo bitmap dont le fond est transparent est posé en masque, et non en
   image : une image est opaque au CSS et resterait noire sur le thème sombre,
   là où le masque n'en retient que la forme et prend la couleur du texte —
   même rendu que les SVG voisins. Le choix se fait dans `logo.js`, en lisant
   le fichier : un logo sur aplat opaque n'y passe pas, il donnerait un
   rectangle plein. */
.vignette-support .logo-masque {
  display: block;
  width: 100%;
  height: 1.35rem;
  background-color: currentColor;
  -webkit-mask: var(--logo) no-repeat center / contain;
  mask: var(--logo) no-repeat center / contain;
}
/* Le logo posé dans la page suit la couleur du texte : c'est tout l'intérêt
   de l'avoir inséré plutôt que chargé en image. */
.vignette-support .visuel > svg {
  max-height: 1.35rem;
  max-width: 100%;
  height: 100%;
  width: auto;
  fill: currentColor;
}
.vignette-support .visuel > svg * { fill: currentColor; }
/* Sans logo, le nom fait l'affaire — tronqué plutôt que débordant. */
.vignette-support .sans-logo {
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  color: var(--encre);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.vignette-support .compte {
  font-size: 0.63rem;
  color: var(--encre-douce);
  font-variant-numeric: tabular-nums;
}
.vignette-support.est-actif .compte { color: var(--accent); font-weight: 600; }

.fleche-bandeau {
  flex: none;
  width: 1.8rem;
  height: 2.4rem;
  border: 1px solid var(--trait);
  border-radius: 6px;
  background: var(--surface);
  color: var(--encre-douce);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fleche-bandeau:hover { color: var(--accent); border-color: var(--accent); }

/* La loupe du bandeau : même gabarit que les flèches, pour qu'on la lise comme
   une commande de la même famille — et non comme une vignette de plus. */
.zone-loupe-bandeau { flex: none; }
.zone-loupe-bandeau .loupe-filtre {
  width: 1.8rem;
  height: 2.4rem;
  border: 1px solid var(--trait);
  border-radius: 6px;
  background: var(--surface);
  font-size: 0.78rem;
}
.zone-loupe-bandeau .loupe-filtre:hover {
  background: var(--surface);
  color: var(--accent);
  border-color: var(--accent);
}
.zone-loupe-bandeau .loupe-filtre.est-ouvert {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.zone-loupe-bandeau .popover-loupe { top: calc(100% + 0.45rem); }

/* --------------------------------------------------------- vues favorites

   Un cadrage qu'on refait dix fois par semaine se garde. La barre reprend le
   gabarit des bandeaux — même cadre, même défilement — pour se lire comme une
   commande de la même famille, et non comme un objet de plus à comprendre. */

.bandeau-favoris {
  padding: 0.3rem 0.5rem;
  margin-bottom: 0.6rem;
}
/* Un mot en tête : une rangée de pastilles au-dessus des logos, sans rien
   pour la nommer, ne dirait pas de quoi elle parle. Il vit en pseudo-élément
   du conteneur, que le socle du bandeau ne réécrit jamais. */
.bandeau-favoris::before {
  content: 'Vues';
  flex: none;
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--encre-douce);
  padding-right: 0.2rem;
}

.vignette-favori {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 0.1rem;
  scroll-snap-align: start;
  padding-right: 0.2rem;
  border: 1px solid var(--trait);
  border-radius: 999px;
  background: var(--surface);
}
.vignette-favori:hover { border-color: var(--accent); background: var(--survol-fort); }

/* Un vrai lien, et non un bouton : une vue favorite est une adresse. Le clic
   du milieu, « ouvrir dans un nouvel onglet » et la copie du lien marchent
   alors sans qu'on ait à les réécrire. */
.nom-favori {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.25rem 0.3rem 0.7rem;
  font-size: 0.8rem;
  color: var(--encre);
  text-decoration: none;
}
/* Le rognage se joue à l'intérieur du lien : l'infobulle est un pseudo-élément
   de celui-ci, et un `overflow: hidden` posé dessus la couperait. */
.nom-favori > span {
  display: block;
  max-width: 14rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vignette-favori:hover .nom-favori,
.nom-favori:hover { color: var(--accent); }

/* Une vue partagée porte une marque, sourde : elle dit d'où vient la pastille
   sans prétendre au même rang que son nom. Le détail — « partagée par Untel »
   — est dans l'infobulle, là où on va le chercher quand on se le demande. */
.marque-partage {
  flex: none;
  margin-right: 0.35rem;
  font-size: 0.62rem;
  color: var(--encre-tres-douce);
}
.vignette-favori:hover .marque-partage { color: var(--accent); }

/* La vue de quelqu'un d'autre n'a pas de poubelle : sans elle, le nom se
   retrouverait collé au bord de la pastille. */
.vignette-favori.est-autrui .nom-favori { padding-right: 0.7rem; }

/* Le partage est un choix, pas un réglage : la case se lit d'un coup d'œil
   sous le nom, et non dans un menu qu'il faudrait aller ouvrir. */
.case-partage {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  font-size: 0.76rem;
  color: var(--encre-douce);
  cursor: pointer;
}
.case-partage input { accent-color: var(--accent); cursor: pointer; }
.case-partage:hover { color: var(--encre); }

/* La poubelle ne se montre qu'au survol — et au focus, sinon elle serait
   hors d'atteinte au clavier. Elle garde sa place en tout temps : la faire
   apparaître ferait sauter la largeur de la pastille sous le curseur. */
.poubelle-favori {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--encre-tres-douce);
  font-size: 0.62rem;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
.vignette-favori:hover .poubelle-favori,
.vignette-favori:focus-within .poubelle-favori {
  opacity: 1;
  pointer-events: auto;
}
.poubelle-favori:hover { color: var(--negatif); background: var(--survol); }

.zone-favori { position: relative; display: flex; flex: none; }

/* Ouverture vers la gauche : le bouton est le dernier de la ligne, un
   popover aligné à gauche déborderait de l'écran. */
.popover-favori {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  z-index: 40;
  width: 17rem;
  padding: 0.75rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 8px;
  box-shadow: var(--ombre-forte);
}
.popover-favori .titre {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--encre-douce);
  margin-bottom: 0.5rem;
}
.champ-favori {
  width: 100%;
  padding: 0.35rem 0.55rem;
  font-family: inherit;
  font-size: 0.84rem;
  color: var(--encre);
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 6px;
}
.champ-favori:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-lueur);
}
/* La roue tourne DANS le champ, à droite : le nom se cherche à l'endroit même
   où il va s'écrire, et l'attente ne déplace rien autour. Pas de classe Bulma
   ici — « control is-loading » poserait une seconde roue, à sa taille. */
.champ-nom { position: relative; }
.champ-nom.est-en-attente .champ-favori { padding-right: 1.9rem; }
.champ-nom.est-en-attente::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0.6rem;
  width: 0.85rem;
  height: 0.85rem;
  margin-top: -0.45rem;
  border: 2px solid var(--trait-fort);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: tourne 0.7s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }
/* Le mouvement reste, mais lent : il dit qu'on attend sans faire tourner
   quoi que ce soit dans le coin de l'œil. */
@media (prefers-reduced-motion: reduce) {
  .champ-nom.est-en-attente::after { animation-duration: 2.4s; }
}

.popover-favori .pied {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.65rem;
}

/* --------------------------------------------------------------- totaux */

.bandeau-totaux {
  display: flex;
  gap: 1.75rem;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 0.6rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 8px;
  margin-bottom: 0.9rem;
}
.bandeau-totaux .valeur {
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}
/* La période n'est pas un chiffre : à la même taille que les montants, elle
   leur volerait l'attention alors qu'elle ne fait que les cadrer. */
.bandeau-totaux .valeur.est-texte {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--encre-douce);
}
.bandeau-totaux .etiquette {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--encre-douce);
  display: block;
}

/* -------------------------------------------------------------- tableaux */

.tableau-dense { font-size: 0.82rem; background: var(--surface); }
.tableau-dense th {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--encre-douce);
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 1px solid var(--trait) !important;
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 2;
}
.tableau-dense th.triable { cursor: pointer; user-select: none; }
.tableau-dense th.triable:hover { color: var(--accent); }
.tableau-dense td {
  border-bottom: 1px solid var(--trait-faible) !important;
  vertical-align: middle;
}
.tableau-dense tbody tr:hover { background: var(--survol); }
.nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.discret { color: var(--encre-douce); }

/* Quelques colonnes ne doivent jamais se couper en deux lignes : elles
   doublent la hauteur de toutes les autres pour rien. */
.tableau-dense td:nth-child(2),   /* date de confirmation */
.tableau-dense td:nth-child(10) { /* période */
  white-space: nowrap;
}
/* Le support porte parfois « SOUS-SUPPORT · CATÉGORIE » : on le laisse
   respirer sur une largeur donnée plutôt qu'il ne s'étrangle. */
.tableau-dense td:nth-child(5) { min-width: 9.5rem; }
.tableau-dense td:nth-child(8) { max-width: 12rem; }
.cadre-defilant { overflow-x: auto; border: 1px solid var(--trait); border-radius: 8px; background: var(--surface); }

/* ---------------------------------------------------- étiquettes d'état */

/* Teintes pastel : sur une liste dense, des couleurs saturées se disputent
   l'attention avec les montants, qui la méritent davantage. La couleur suit
   l'avancement, du plus incertain au plus acquis. */

.tag-etat {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  border: 1px solid transparent;
}
.tag-etat::before {
  content: '';
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.tag-etat.ton-attente { background: #fdf3d9; color: #9a6a12; border-color: #f2e2b6; }
.tag-etat.ton-engage  { background: #e4edfc; color: #2b5aa8; border-color: #cfdff8; }
.tag-etat.ton-acquis  { background: #e0f5ea; color: #1c7a52; border-color: #c6ebd8; }
.tag-etat.ton-perdu   { background: #fceaec; color: #a83446; border-color: #f6d3d8; }
.tag-etat.ton-neutre  { background: var(--gris-doux); color: var(--encre-douce); border-color: var(--trait); }

/* ------------------------------------------------- verrous et édition */

tr.est-verrouille,
.carte-insertion.est-verrouille {
  background: var(--alerte-fond) !important;
  opacity: 0.75;
  cursor: not-allowed;
}
.badge-verrou {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--alerte-fond);
  color: var(--alerte);
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: help;
}

/* Sur une carte, le cadenas se pose en bas à droite : c'est le dernier
   endroit que l'œil parcourt, et il ne bouscule pas la mise en page. */
.carte-insertion { position: relative; }
.carte-insertion .badge-verrou {
  position: absolute;
  right: 0.7rem;
  bottom: 0.7rem;
  box-shadow: var(--ombre-legere);
}

/* --------------------------------------------------------- vue en cartes */

.grille-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 0.75rem;
}
/* `content-visibility` : le navigateur ne met en page que ce qui est à
   l'écran. Mesuré sur la sélection entière — quatorze mille cartes, deux cent
   mille nœuds — le calcul de mise en page tombe de 10,7 s à 0,8 s. La hauteur
   annoncée évite que la barre de défilement ne saute pendant qu'on descend :
   c'est celle d'une carte type, mesurée.

   Rien ne dépend de sa prise en charge : un navigateur qui l'ignore retrouve
   le comportement d'avant, plus lent, mais juste. */
.carte-insertion {
  content-visibility: auto;
  contain-intrinsic-size: auto 146px;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 8px;
  padding: 0.8rem 0.9rem;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.carte-insertion:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px var(--accent-lueur);
}
/* Tout était en demi-gras, ce qui revient à ne rien mettre en avant.
   Seuls l'annonceur et le montant portent du poids ; le reste est en graisse
   normale et se lit sans crier. */
.carte-insertion { font-weight: 400; }
.carte-insertion .annonceur {
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.carte-insertion .support { font-size: 0.82rem; color: var(--encre-douce); font-weight: 400; }
.carte-insertion .format { font-size: 0.76rem; color: var(--encre-douce); font-weight: 400; }
.carte-insertion .discret { font-weight: 400; }
.carte-insertion .pied {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: auto;
  padding-top: 0.4rem;
  border-top: 1px solid var(--trait-faible);
}
.carte-insertion .montant { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.015em; }

/* ---------------------------------------------------- actions sur une ligne */

/* Les groupes restent discrets tant qu'on ne survole pas la ligne : une liste
   de 50 entrées, c'est 250 boutons, et autant de bruit si tous s'affichent
   en pleine encre. */
.colonne-actions { width: 1%; white-space: nowrap; text-align: right; padding-right: 0.6rem !important; }
.colonne-actions .badge-verrou { margin-right: 0.5rem; }

/* Bulma fait passer `.buttons` à la ligne quand la place manque. Dans une
   colonne étroite, les cinq boutons s'empilaient donc verticalement et la
   ligne triplait de hauteur. Ici, jamais de retour à la ligne : c'est la
   colonne qui prend la largeur nécessaire. */
.actions-ligne {
  margin-bottom: 0 !important;
  justify-content: flex-end;
  flex-wrap: nowrap !important;
}
.actions-ligne .button { margin-bottom: 0 !important; }
.actions-ligne .button {
  border-color: var(--trait);
  color: var(--encre-douce);
  transition: color 0.12s, border-color 0.12s, background 0.12s, opacity 0.12s;
}
.tableau-dense .actions-ligne { opacity: 0.45; }
.tableau-dense tr:hover .actions-ligne,
.tableau-dense .actions-ligne:focus-within { opacity: 1; }

.actions-ligne .button:hover { color: var(--accent); border-color: var(--accent); z-index: 2; }
.actions-ligne .button.est-danger:hover {
  color: var(--negatif);
  border-color: var(--negatif);
  background: var(--negatif-fond);
}
.actions-ligne .button[disabled] { opacity: 0.35; cursor: not-allowed; }
.actions-ligne .button .icon { font-size: 0.78rem; }

/* Le bouton d'ouverture se pose en haut à droite, en regard de l'annonceur :
   c'est là que l'œil arrive, et il ne pousse plus la carte d'une ligne. */
.carte-insertion .actions-ligne {
  margin: 0 0 0 auto;
  flex: none;
  justify-content: flex-end;
}
.entree-historique .colonne-actions { text-align: right; }

/* Infobulles : lisibles, et jamais coupées par le bord de la fenêtre. */
[aria-label][data-balloon-pos]::after {
  font-size: 0.72rem;
  background: var(--infobulle-fond);
  max-width: 22rem;
  white-space: nowrap;
}
[aria-label][data-balloon-pos]::before { z-index: 30; }
[aria-label][data-balloon-pos]::after { z-index: 30; }

/* ------------------------------------------------------- actions groupées */

/* La barre n'existe que si quelque chose est coché : une barre vide en
   permanence occupe de la place et n'apprend rien. */
.barre-lot {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  padding: 0.55rem 0.85rem;
  margin-bottom: 0.85rem;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 8px;
  box-shadow: 0 0 0 3px var(--accent-lueur);
}
.compte-lot { font-weight: 650; font-size: 0.85rem; }
.barre-lot .lot-fusion { display: flex; align-items: center; gap: 0.5rem; }
.barre-lot .lot-fusion.est-inactif { opacity: 0.55; }
.barre-lot .lot-droite { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; }
.barre-lot .actions-ligne { opacity: 1 !important; }

/* Case partiellement cochée : l'état intermédiaire doit se voir. */
input[type='checkbox']:indeterminate { accent-color: var(--accent); }


/* ------------------------------------------------- formulaire d'insertion */

/* La modale prend le focus sur son action principale, et il faut le voir.
   Le navigateur ne dessine son anneau qu'après un geste au clavier : ici le
   focus est posé par la modale elle-même, à la suite d'un clic, et l'anneau
   resterait invisible. Or c'est lui qui annonce ce que fera la touche Entrée —
   sans quoi la validation partirait sans prévenir. */
.modal-card-foot .button:focus {
  /* L'encre plutôt que l'accent : le bouton principal est déjà coloré — jaune
     pour une fusion, rouge pour une corbeille — et un anneau de la même
     famille s'y noierait. */
  outline: 2px solid var(--encre);
  outline-offset: 2px;
}

.modale-insertion .modal-card { max-width: 58rem; width: 96%; }

/* Les champs qui portent l'essentiel des saisies : détachés du reste par un
   fond et un filet, pour qu'on les trouve sans lire. */
.bloc-essentiel {
  background: var(--surface-info);
  border: 1px solid var(--trait);
  border-radius: 8px;
  padding: 0.85rem 0.9rem 0.35rem;
  margin-bottom: 1rem;
}
.bloc-essentiel .label { font-size: 0.72rem; color: var(--encre-douce); }
.bloc-essentiel .field { margin-bottom: 0.6rem; }

.onglets-formulaire { margin-bottom: 0.9rem !important; }
.onglets-formulaire .icon { margin-right: 0.3rem; }

/* ------------------------------------------------- sélecteur de parution */

.bouton-parution {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  height: 2.9rem;
  padding: 0 0.75rem;
  border: 1px solid var(--trait);
  border-radius: 5px;
  background: var(--surface);
  color: var(--encre);
  font-family: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  text-align: left;
}
.bouton-parution:hover { border-color: var(--accent); color: var(--accent); }
.bouton-parution .libelle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Le pied de la fiche porte les actions de la ligne, et leurs infobulles
   s'ouvrent vers le haut. Bulma découpe le pied ET la carte : les deux
   doivent laisser dépasser, sinon l'infobulle est coupée au ras du bouton.
   Le corps, lui, garde son propre défilement. */
.modale-insertion .modal-card,
.modale-insertion .modal-card-foot { overflow: visible; }
/* La carte ne découpant plus, l'en-tête doit arrondir ses propres coins. */
.modale-insertion .modal-card-head { border-radius: 6px 6px 0 0; }
.modale-insertion .modal-card-foot { border-radius: 0 0 6px 6px; }

/* La parution renseigne la période sans la figer : une insertion peut être
   rattachée à un numéro et comptée sur un autre mois. La mention dit d'où
   vient la valeur proposée, rien de plus. */
.champ-periode {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.9rem;
  flex-wrap: wrap;
}
.champ-periode .mention {
  display: block;
  width: 100%;
  font-size: 0.68rem;
  color: var(--encre-douce);
}
.selects-periode { display: flex; gap: 0.4rem; align-items: center; }
.selects-periode .input { width: 5.5rem; }

/* --------------------------------------------- mosaïque des parutions */

/* Fenêtre ancrée sous le champ, et non modale : le formulaire reste visible
   derrière, et une seule touche Échap suffit à revenir en arrière.

   Positionnée en `fixed` par rapport au document, avec un plan supérieur à
   celui de la modale Bulma (40) : le corps de la modale défile, et découperait
   tout ce qui dépasse de ses bords. */
.ancrage-parutions { position: fixed; z-index: 60; }
.panneau-parutions {
  position: relative;
  width: min(38rem, 90vw);
  max-height: min(30rem, 60vh);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 8px;
  box-shadow: var(--ombre-forte);
  overflow: hidden;
}
.barre-parutions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--trait);
  flex: none;
}
.barre-parutions .champ-recherche { flex: 1; }
.barre-parutions .champ-recherche input { font-size: 0.86rem; padding: 0.45rem 0.8rem 0.45rem 2.3rem; }
.barre-parutions .loupe { width: 0.95rem; height: 0.95rem; left: 0.75rem; }

.pied-parutions {
  flex: none;
  padding: 0.4rem 0.75rem;
  border-top: 1px solid var(--trait);
  font-size: 0.72rem;
  color: var(--encre-douce);
}

.mosaique-parutions {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: 0.7rem;
  padding: 0.8rem;
}
.mosaique-parutions .vide { grid-column: 1 / -1; }

/* Sur la page dédiée, la mosaïque n'est plus enfermée dans un panneau : elle
   occupe la largeur, et les vignettes peuvent respirer. */
.mosaique-parutions.large {
  overflow: visible;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: 1rem;
  padding: 0;
}

/* Les parutions sont rangées par année : plusieurs centaines de vignettes
   d'un seul tenant ne se parcourent pas, elles défilent. */
.annee-parutions { margin-bottom: 2rem; }
.annee-parutions h2 {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--trait-faible);
  font-size: 1.1rem;
  font-weight: 700;
}
.annee-parutions h2 .compte {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--encre-douce);
}
.annee-parutions .vignette-parution { position: relative; color: inherit; }

/* Le lien principal est étiré par-dessus toute la vignette plutôt que de
   l'envelopper : le crayon peut alors se poser sur la couverture sans qu'un
   <a> se retrouve dans un <a>. */
.annee-parutions .lien-parution {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 6px;
}

/* Le bandeau de lecture seule, en tête de la fiche : la ligne est tenue par
   quelqu'un d'autre, on la consulte en attendant qu'elle se libère. */
.bandeau-lecture {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  /* La carte de modale est une colonne flexible : sans cela le bandeau se
     laisse comprimer par le corps, et sa seconde ligne se retrouve coupée. */
  flex: none;
  padding: 0.7rem 1.1rem;
  background: var(--ambre-doux, rgba(255, 224, 138, 0.18));
  border-bottom: 1px solid var(--trait);
  font-size: 0.82rem;
}
.bandeau-lecture .icon { color: var(--encre-douce); margin-top: 0.1rem; }
.bandeau-lecture .mention {
  display: block;
  font-size: 0.72rem;
  color: var(--encre-douce);
}
/* En lecture, la fiche cesse d'être un formulaire pour devenir une feuille
   de renseignements : plus de cadres, plus de chevrons, plus de flèches de
   compteur. Des champs simplement désactivés donnaient l'impression d'un
   écran cassé — on voyait un formulaire, mais rien ne répondait. */
.est-en-lecture .input[disabled],
.est-en-lecture .select select[disabled],
.est-en-lecture .textarea[disabled] {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--encre);
  opacity: 1;
  cursor: default;
  padding-left: 0;
  font-weight: 600;
}
/* Le chevron d'une liste déroulante promet un choix : il n'a plus lieu d'être.
   Le sélecteur reprend celui de Bulma, `:not(.is-multiple):not(.is-loading)` :
   à spécificité moindre, la règle passait sous la sienne et les chevrons
   restaient affichés sur une fiche pourtant fermée. */
.est-en-lecture .select:not(.is-multiple):not(.is-loading)::after { display: none; }
.est-en-lecture .select select[disabled] { padding-right: 0; }
.est-en-lecture input[type='number'] { -moz-appearance: textfield; appearance: textfield; }
.est-en-lecture input[type='number']::-webkit-outer-spin-button,
.est-en-lecture input[type='number']::-webkit-inner-spin-button { display: none; }
/* Un champ vide ne doit pas disparaître : sans repère, on croirait la ligne
   incomplète alors qu'on ne saurait dire où se trouve le champ. */
.est-en-lecture .input[disabled]:placeholder-shown::placeholder { color: var(--encre-tres-douce); }
.est-en-lecture .bloc-essentiel { background: transparent; border-color: var(--trait-faible); }
.est-en-lecture .bouton-parution { border-color: transparent; padding-left: 0; font-weight: 600; }
.est-en-lecture .bouton-parution .icon { display: none; }
.est-en-lecture [data-action="enregistrer"] { display: none; }

/* L'étiquette du titre : le premier mot qu'on lit doit dire ce qu'on fait. */
.etiquette-lecture {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 0.6rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--gris-doux);
  border: 1px solid var(--trait);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--encre-douce);
  vertical-align: middle;
}

/* balloon.css pose `position: relative` sur tout porteur d'infobulle, via
   `[aria-label][data-balloon-pos]` — deux attributs, donc plus spécifique
   qu'une simple classe. Un élément positionné en absolu QUI PORTE une
   infobulle doit donc surenchérir, sinon il retombe dans le flux. C'est ce
   qui renvoyait le crayon sous la vignette, et le cadenas sous la carte. */
.vignette-parution .crayon-sogest[data-balloon-pos],
.carte-insertion .badge-verrou[data-balloon-pos] { position: absolute; }

/* Le crayon vers SOGEST, dans le coin haut droit de la couverture : discret
   jusqu'au survol, pour ne pas piqueter la mosaïque de boutons. Il reste
   atteignable au clavier — un bouton qui n'apparaît qu'à la souris n'existe
   pas pour qui tabule.

   Il est frère du lien étiré, et non enfant de la couverture : celle-ci se
   soulève au survol (`transform`), ce qui crée un contexte d'empilement — le
   crayon s'y retrouvait enfermé, sous le lien qui recouvre toute la vignette,
   donc invisible et surtout incliquable. */
.crayon-sogest {
  position: absolute;
  z-index: 3;
  top: 0.3rem;
  right: 0.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 5px;
  background: var(--surface);
  border: 1px solid var(--trait);
  color: var(--encre-douce);
  font-size: 0.68rem;
  opacity: 0;
  transition: opacity 0.12s, color 0.12s, border-color 0.12s, background 0.12s;
}
.vignette-parution:hover .crayon-sogest,
.crayon-sogest:focus-visible { opacity: 1; }
.crayon-sogest:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--surface);
}

.vignette-parution {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
}
.vignette-parution .couverture {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--trait);
  background: var(--gris-doux);
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}
.vignette-parution img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Faute de couverture, un cartouche neutre : une case vide laisserait croire
   à une image qui n'a pas chargé. */
.vignette-parution .sans-couverture {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  height: 100%;
  color: var(--encre-tres-douce);
  background:
    repeating-linear-gradient(45deg, transparent, transparent 7px,
                              rgba(0, 0, 0, 0.02) 7px, rgba(0, 0, 0, 0.02) 14px),
    var(--gris-doux);
}
.vignette-parution .sans-couverture i { font-size: 1.3rem; }
.vignette-parution .sans-couverture span {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0 0.3rem;
  line-height: 1.2;
}

/* Le bloc de définitions ne se dessine pas : il ne fait que porter les
   `<symbol>` auxquels les vignettes renvoient. */
.defs-logos { display: none; }

/* Le logo du support tient lieu de couverture : gris, discret, il dit de quel
   titre il s'agit sans se faire passer pour une vraie couverture. */
.vignette-parution .logo-support {
  width: 62%;
  height: 2.2rem;
  color: var(--encre-tres-douce);
  opacity: 0.75;
}
.vignette-parution .logo-support use { fill: currentColor; }

.vignette-parution:hover .couverture {
  border-color: var(--accent);
  box-shadow: 0 4px 14px var(--accent-lueur);
  transform: translateY(-2px);
}
.vignette-parution.est-choisie .couverture {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}

.pastille-avenir {
  position: absolute;
  left: 0.3rem;
  top: 0.3rem;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.56rem;
  font-weight: 700;
}

.vignette-parution .numero { font-size: 0.73rem; font-weight: 600; }
.vignette-parution .periode { font-size: 0.66rem; color: var(--encre-douce); }
.vignette-parution.est-choisie .numero { color: var(--accent); }

.bouton-parution.est-ouvert { border-color: var(--accent); color: var(--accent); }

/* ------------------------------------------------------ champs montants */

/* Le symbole est posé dans le cadre, mais reste hors de la valeur saisie :
   l'inclure obligerait à ruser avec le curseur à chaque frappe. */
.champ-montant { position: relative; display: block; }
.champ-montant .unite {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--encre-douce);
  font-size: 0.82rem;
  pointer-events: none;
}
.saisie-montant {
  text-align: right;
  padding-right: 1.6rem !important;
  font-variant-numeric: tabular-nums;
}
/* Pas de flèches d'incrément : monter de 1 en 1 jusqu'à 900 000 n'a pas de
   sens, et un coup de molette au-dessus du champ changerait la valeur. */
.saisie-montant::-webkit-outer-spin-button,
.saisie-montant::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.saisie-montant[type='number'] { -moz-appearance: textfield; appearance: textfield; }

/* ---------------------------------------------------------- graphiques */

/* Chart.js en mode responsive redimensionne son canvas à la taille du parent.
   Si ce parent se dimensionne lui-même sur son contenu, les deux se poussent
   l'un l'autre et la page s'allonge indéfiniment. D'où une hauteur fixée ici,
   et un positionnement relatif que Chart.js attend. */
.cadre-graphique {
  position: relative;
  width: 100%;
  min-height: 0;
}
.cadre-graphique canvas { display: block; }

/* ------------------------------------------------------ tableau de bord */

.tableau-bord { font-size: 0.8rem; }
.tableau-bord th, .tableau-bord td { padding: 0.35rem 0.5rem; }
.tableau-bord .col-agregat { background: var(--surface-2); font-weight: 600; }
.tableau-bord .ligne-total td { border-top: 2px solid var(--encre) !important; font-weight: 650; }
.tableau-bord .ligne-gestion td { border-bottom: 1px solid var(--trait-faible) !important; }
.tableau-bord .intitule { font-weight: 600; white-space: nowrap; }
.au-dessus { color: var(--positif); }
.en-dessous { color: var(--negatif); }
.cellule-cliquable { cursor: pointer; }
.cellule-cliquable:hover { background: var(--survol-fort); }

/* --------------------------------------------------------- historique */

.entree-historique {
  display: grid;
  grid-template-columns: 8.5rem 9rem 5.5rem 1fr auto;
  gap: 0.75rem;
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid var(--trait-faible);
  font-size: 0.82rem;
  align-items: baseline;
}
.entree-historique:hover { background: var(--survol); }
.entree-historique .cible { font-weight: 550; }
.entree-historique .detail {
  font-size: 0.76rem;
  color: var(--encre-douce);
  margin-top: 0.2rem;
}
.entree-historique .avant { text-decoration: line-through; opacity: 0.65; }
.entree-historique .apres { color: var(--encre); font-weight: 550; }
@media (max-width: 768px) {
  .entree-historique { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* ------------------------------------------------------------- divers */

.zone-toasts {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 26rem;
}
.toast { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16); margin: 0; }

.squelette {
  height: 1.6rem;
  margin: 0.35rem 0;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--gris-doux) 25%, var(--fond) 50%, var(--gris-doux) 75%);
  background-size: 200% 100%;
  animation: glisse 1.2s infinite;
}
@keyframes glisse {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

.vide {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--encre-douce);
}

/* --------------------------------------------------- visite guidée */

/* Le fond assombri est fait de quatre panneaux posés AUTOUR de la cible :
   rien ne recouvre l'élément désigné, qui reste donc cliquable — c'est ce qui
   permet à une étape de demander d'appuyer sur un bouton. Le halo, lui, ne
   prend pas les clics : il ne fait que cerner. */

/* Le conteneur couvre la fenêtre entière ET prend les clics : pendant la
   visite, rien ne répond dans la page, l'élément désigné pas plus que le
   reste. Le laisser cliquable ouvrait la fiche d'un OI par-dessus la bulle,
   qui continuait dessous. Ce que l'étape annonce, c'est elle qui le fait. */
.visite { position: fixed; inset: 0; z-index: 200; }

.visite .masque {
  position: fixed;
  background: rgba(10, 13, 22, 0.78);
  cursor: pointer;
}

.visite .halo {
  position: fixed;
  border: 2px solid var(--accent);
  border-radius: 10px;
  box-shadow: 0 0 0 4px var(--accent-lueur);
  pointer-events: none;
}

.visite .bulle {
  position: fixed;
  width: min(340px, calc(100vw - 24px));
  background: var(--surface);
  color: var(--encre);
  border: 1px solid var(--trait);
  border-radius: 10px;
  padding: 0.85rem 1rem 0.7rem;
  box-shadow: var(--ombre-forte);
}

/* Posée à côté d'une cible trop haute pour la fenêtre, la bulle n'a pas de
   pointe : elle viserait un flanc, là où le halo dit déjà où regarder. */
.visite .bulle.est-a-cote::before { display: none; }

/* La pointe est un carré tourné, dont deux côtés sont recouverts par la
   bulle : une seule forme à colorer, bordure comprise. */
.visite .bulle::before {
  content: '';
  position: absolute;
  left: var(--fleche, 50%);
  width: 10px;
  height: 10px;
  margin-left: -5px;
  background: var(--surface);
  border: 1px solid var(--trait);
  transform: rotate(45deg);
}
.visite .bulle.est-dessous::before {
  top: -6px;
  border-right: 0;
  border-bottom: 0;
}
.visite .bulle:not(.est-dessous)::before {
  bottom: -6px;
  border-left: 0;
  border-top: 0;
}

.visite .titre {
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 0 0 0.3rem;
}
.visite .texte { font-size: 0.85rem; line-height: 1.45; color: var(--encre-douce); }
/* Une bulle peut tenir deux paragraphes — Bulma leur poserait sinon une marge
   d'un rang de texte, qui doublerait la hauteur de la bulle pour rien. */
.visite .texte p { margin: 0; }
.visite .texte p + p { margin-top: 0.55rem; }
.visite .texte strong { color: var(--encre); font-weight: 600; }

.visite .pied {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.8rem;
}
/* Le compteur pousse les deux boutons de navigation à droite : « Passer »
   reste seul de son côté, là où l'on ne clique pas par mégarde. */
.visite .compteur {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--encre-tres-douce);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- options */

/* L'attente de session, sur TOUTES les pages de l'application.

   Une page dont on ignore encore si elle a le droit de s'afficher ne doit pas
   s'afficher : sans ce voile, l'écran se dessine en entier, puis part vers le
   SSO — et l'on aura vu passer ce qu'on n'avait pas le droit de voir.

   Le masquage est porté par la FEUILLE DE STYLE et non par le balisage, pour
   deux raisons. D'abord parce qu'un `<script type="module">` est différé : le
   temps qu'il s'exécute, la page est déjà peinte. Ensuite parce que la
   feuille, elle, bloque le rendu — elle est donc le seul endroit qui parle
   avant le premier pixel, sans avoir à recopier le même bloc dans neuf
   fichiers HTML.

   `:has(#nav)` désigne exactement les pages de l'application : celles qui
   portent une barre de navigation sont celles qui appellent `navigation()`,
   donc celles dont la session est vérifiée. L'écran de connexion et la
   documentation de l'API n'en ont pas, et ne sont pas masqués — ce serait un
   verrou sans clé, puisque rien n'y lèverait le voile.

   Un navigateur qui ignore `:has()` écarte la règle entière et affiche la
   page comme avant : la dégradation se fait d'elle-même, sans écran noir. */
:root:not([data-session]):has(#nav) body { visibility: hidden; }

/* Le voile et sa roue sont des pseudo-éléments de `<html>`, et non de `<body>` :
   c'est ce qui leur permet de rester visibles alors que tout le corps de la
   page ne l'est pas. */
:root:not([data-session]):has(#nav)::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--fond);
}
:root:not([data-session]):has(#nav)::after {
  content: '';
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 61;
  width: 2rem;
  height: 2rem;
  margin: -1rem 0 0 -1rem;
  border: 2px solid var(--trait-fort);
  border-top-color: var(--accent);
  border-radius: 50%;
  /* `tourne` est déjà défini plus haut : une seconde animation identique sous
     un autre nom, c'est deux endroits à corriger le jour où elle change. */
  animation: tourne 0.7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-session]):has(#nav)::after { animation-duration: 2.4s; }
}
}

/* Ce qui est là mais ne peut pas encore servir : un bouton désactivé ne dit
   pas POURQUOI il l'est, et l'infobulle ne se lit qu'au survol. L'encart
   l'écrit en clair, une fois, au-dessus de la liste concernée.

   Le ton est celui de l'alerte, pas celui de l'erreur : rien n'est cassé,
   quelque chose manque encore. Les deux jetons existent dans les deux thèmes,
   il n'y a donc pas de contrepartie sombre à écrire. */
.avis-attente {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--alerte);
  border-radius: 8px;
  background: var(--alerte-fond);
  /* Le texte reste à l'encre ordinaire : en orange sur fond crème, il passe
     sous le seuil de contraste à cette taille. Seul le pictogramme porte la
     couleur, et c'est bien lui qui donne le ton. */
  color: var(--encre);
  font-size: 0.78rem;
  line-height: 1.4;
}
.avis-attente .icone-avis {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.08rem;
  color: var(--alerte);
}

/* Le nombre de membres dans l'intitulé du sous-onglet : c'est l'information
   qu'on vient chercher, et la lire oblige sinon à ouvrir les deux équipes. */
.tabs .compte-membres {
  margin-left: 0.4rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--gris-doux);
  color: var(--encre-douce);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}
.tabs li.is-active .compte-membres { background: var(--accent-lueur); color: var(--accent); }

/* Les sous-onglets d'équipe sont des onglets « nus » : répéter le cadre de la
   barre du dessus effacerait la hiérarchie entre les deux niveaux.

   Le rappel de l'onglet actif est nécessaire, et le `:root` qui le préfixe
   aussi : le thème sombre repeint en fin de feuille TOUS les `.tabs li a`,
   l'actif compris, et la marque du sous-onglet courant y disparaîtrait sans
   ce surcroît de spécificité. */
:root .tabs.onglets-equipe li.is-active a {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Les personnes proposées à l'ajout. L'adresse est sous le nom et non à côté :
   deux homonymes ne se départagent que par elle, et elle doit se lire sans
   qu'on ait à balayer la ligne. */
.liste-candidats { max-width: 32rem; }
.liste-candidats li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.35rem 0.1rem;
  border-bottom: 1px solid var(--trait-faible);
}
.liste-candidats li:last-child { border-bottom: none; }
.liste-candidats .identite {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  font-size: 0.8rem;
}
.liste-candidats .adresse { color: var(--encre-tres-douce); font-size: 0.72rem; }
.liste-candidats .button { margin-left: auto; flex: none; }

/* Impression : on garde les chiffres, on retire l'habillage. */
@media print {
  .navbar, .barre-filtres, .zone-toasts, .bouton-action { display: none !important; }
  .carte, .cadre-defilant { border: none; }
}


/* ==========================================================================
   Thème sombre — inspiration synthwave
   --------------------------------------------------------------------------
   Nuit violette, néons magenta et turquoise. Le magenta est volontairement
   adouci par rapport au néon pur : sur un écran regardé toute la journée, un
   rose saturé fatigue vite et bave sur le fond sombre. Le turquoise prend en
   charge tout ce qui informe sans appeler à l'action.

   Les lueurs sont des ombres colorées, pas des bordures : une bordure épaissit
   l'élément et décale la mise en page au survol.
   ========================================================================== */

:root[data-theme='sombre'] {
  --encre: #e6e0f5;
  --encre-douce: #a094c4;
  --encre-tres-douce: #7566a3;

  --fond: #120b1e;
  --surface: #1a1030;
  --surface-2: #221541;
  --surface-info: #1d1338;

  --trait: #33204f;
  --trait-faible: #261741;
  --trait-fort: #4a2e73;
  --gris-doux: #2a1a44;

  --survol: #221541;
  --survol-fort: #2c1b52;

  /* Magenta adouci : lisible, présent, mais qui ne pique pas les yeux. */
  --accent: #e8629f;
  --accent-vif: #ff7ab8;
  --accent-lueur: rgba(232, 98, 159, 0.22);

  /* Turquoise : le second accent, pour tout ce qui informe. */
  --cyan: #45cfdd;
  --cyan-lueur: rgba(69, 207, 221, 0.22);
  --violet: #9d78e8;

  --positif: #3fd9a4;
  --negatif: #f4728c;
  --negatif-fond: #331525;
  --alerte: #f0b64a;
  --alerte-fond: #33260f;

  --infobulle-fond: rgba(30, 17, 50, 0.97);
  --ombre-legere: 0 1px 2px rgba(0, 0, 0, 0.45);
  --ombre-forte: 0 12px 34px rgba(0, 0, 0, 0.6);
  --ombre-flottante: 0 6px 22px rgba(0, 0, 0, 0.5);

  --liseré: linear-gradient(90deg, var(--cyan) 0%, var(--violet) 48%, var(--accent) 100%);

  color-scheme: dark;
}

/* --- Bulma : son thème sombre, repeint ---------------------------------- */

:root[data-theme='sombre'][data-bulma-theme='dark'] {
  --bulma-scheme-h: 268;
  --bulma-scheme-s: 46%;
  --bulma-scheme-main-l: 9%;
  --bulma-scheme-main-bis-l: 12%;
  --bulma-scheme-main-ter-l: 15%;
  --bulma-background-l: 14%;
  --bulma-border-l: 28%;
  --bulma-border-weak-l: 21%;
  --bulma-text-l: 89%;
  --bulma-text-weak-l: 70%;
  --bulma-text-strong-l: 97%;

  --bulma-link-h: 330;  --bulma-link-s: 72%;  --bulma-link-l: 65%;
  --bulma-primary-h: 330; --bulma-primary-s: 72%; --bulma-primary-l: 65%;
  --bulma-info-h: 186;  --bulma-info-s: 69%;  --bulma-info-l: 57%;
  --bulma-success-h: 162; --bulma-success-s: 69%; --bulma-success-l: 55%;
  --bulma-warning-h: 40; --bulma-warning-s: 85%; --bulma-warning-l: 62%;
  --bulma-danger-h: 348; --bulma-danger-s: 86%; --bulma-danger-l: 70%;
}

/* --- Fond et barre ------------------------------------------------------ */

:root[data-theme='sombre'] body {
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(157, 120, 232, 0.14), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(69, 207, 221, 0.10), transparent 55%),
    var(--fond);
  background-attachment: fixed;
  color: var(--encre);
}

:root[data-theme='sombre'] .navbar {
  background: rgba(19, 11, 32, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 0;
  position: relative;
}
:root[data-theme='sombre'] .navbar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--liseré);
  box-shadow: 0 0 14px rgba(232, 98, 159, 0.5);
}
/* Le logo est noir : sur fond sombre, on l'inverse plutôt que d'en charger
   une seconde version à maintenir. */
/* Le dessin est noir et une image reste opaque au CSS : sur fond sombre il
   disparaîtrait dans le fond. On l'inverse. */
:root[data-theme='sombre'] .logo-h3 { filter: invert(1) brightness(1.6); }
:root[data-theme='sombre'] .icone-burger span { background: var(--encre); }
:root[data-theme='sombre'] .navbar-link.est-menu:hover .icone-burger span {
  background: var(--accent-vif);
  box-shadow: 0 0 8px var(--accent-lueur);
}

/* --- Surfaces ----------------------------------------------------------- */

:root[data-theme='sombre'] .carte,
:root[data-theme='sombre'] .cadre-defilant,
:root[data-theme='sombre'] .panneau-filtres,
:root[data-theme='sombre'] .barre-filtres,
:root[data-theme='sombre'] .bandeau-totaux,
:root[data-theme='sombre'] .carte-insertion,
:root[data-theme='sombre'] .navbar-dropdown,
:root[data-theme='sombre'] .modal-card-head,
:root[data-theme='sombre'] .modal-card-body,
:root[data-theme='sombre'] .modal-card-foot {
  background: linear-gradient(180deg, var(--surface) 0%, #170e2a 100%);
  border-color: var(--trait);
}

:root[data-theme='sombre'] .popover-loupe,
:root[data-theme='sombre'] .champ-loupe,
:root[data-theme='sombre'] .champ-favori {
  background: var(--surface);
  border-color: var(--trait);
  color: var(--encre);
}

:root[data-theme='sombre'] .tag-filtre {
  background: transparent;
  border-color: var(--trait);
}
:root[data-theme='sombre'] .tag-filtre.est-actif {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

:root[data-theme='sombre'] .tableau-dense,
:root[data-theme='sombre'] .tableau-dense th { background: transparent; }
:root[data-theme='sombre'] .tableau-dense th { color: var(--cyan); }
:root[data-theme='sombre'] .tableau-dense tbody tr:hover { background: var(--survol); }

:root[data-theme='sombre'] .carte-insertion:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-lueur), 0 6px 22px rgba(232, 98, 159, 0.16);
}

/* --- Ce qu'on vient lire : les montants -------------------------------- */

:root[data-theme='sombre'] .bandeau-totaux .valeur,
:root[data-theme='sombre'] .carte-insertion .montant {
  color: var(--accent-vif);
  text-shadow: 0 0 20px rgba(255, 122, 184, 0.35);
}
:root[data-theme='sombre'] .tableau-bord .ligne-total td { border-top-color: var(--accent) !important; }
:root[data-theme='sombre'] .tableau-bord .col-agregat { background: rgba(69, 207, 221, 0.06); }
:root[data-theme='sombre'] .entete-page h1 { color: #fff; }

/* --- Champs et boutons : la lueur du modèle ---------------------------- */

:root[data-theme='sombre'] .champ-recherche input,
:root[data-theme='sombre'] .bouton-filtres,
:root[data-theme='sombre'] .bouton-favori,
:root[data-theme='sombre'] .input,
:root[data-theme='sombre'] .textarea,
:root[data-theme='sombre'] .select select {
  background: #170e2a;
  border-color: var(--trait);
  color: var(--encre);
}
:root[data-theme='sombre'] .champ-recherche input:focus,
:root[data-theme='sombre'] .input:focus,
:root[data-theme='sombre'] .textarea:focus,
:root[data-theme='sombre'] .select select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-lueur), 0 0 18px var(--accent-lueur);
}
:root[data-theme='sombre'] .bouton-filtres.est-ouvert,
:root[data-theme='sombre'] .bouton-filtres.a-des-filtres,
:root[data-theme='sombre'] .bouton-favori.est-ouvert {
  border-color: var(--accent);
  color: var(--accent-vif);
  box-shadow: 0 0 14px var(--accent-lueur);
}
:root[data-theme='sombre'] .plage-dates .button { background: #170e2a; border-color: var(--trait); }
:root[data-theme='sombre'] .plage-dates .button.est-actif,
:root[data-theme='sombre'] .plage-dates .bouton-calendrier.est-renseigne {
  color: var(--accent-vif);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent), 0 0 14px var(--accent-lueur);
}
:root[data-theme='sombre'] .bouton-tri { background: #170e2a; border-color: var(--trait); }
:root[data-theme='sombre'] .bouton-tri.est-ouvert {
  border-color: var(--accent);
  color: var(--accent-vif);
  box-shadow: 0 0 14px var(--accent-lueur);
}
:root[data-theme='sombre'] .popover-tri { background: linear-gradient(180deg, var(--surface), #170e2a); }
:root[data-theme='sombre'] .option-tri.est-actif { color: var(--accent-vif); }

:root[data-theme='sombre'] .popover-plage,
:root[data-theme='sombre'] .popover-favori { background: linear-gradient(180deg, var(--surface), #170e2a); }
:root[data-theme='sombre'] .vignette-favori { background: transparent; border-color: var(--trait); }
:root[data-theme='sombre'] .vignette-favori:hover { border-color: var(--accent); background: var(--survol); }
:root[data-theme='sombre'] .vignette-favori:hover .nom-favori { color: var(--accent-vif); }
:root[data-theme='sombre'] .popover-plage select { background: #170e2a; color: var(--encre); }

:root[data-theme='sombre'] .compteur-filtres {
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-lueur);
}

:root[data-theme='sombre'] .button.is-link,
:root[data-theme='sombre'] .button.is-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--violet) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 16px var(--accent-lueur);
}
:root[data-theme='sombre'] .button.is-link:hover {
  box-shadow: 0 0 24px rgba(232, 98, 159, 0.4);
  filter: brightness(1.08);
}

:root[data-theme='sombre'] .actions-ligne .button {
  background: #1f1338;
  border-color: var(--trait);
  color: var(--encre-douce);
}
:root[data-theme='sombre'] .actions-ligne .button:hover {
  color: var(--accent-vif);
  border-color: var(--accent);
  box-shadow: 0 0 14px var(--accent-lueur);
}
:root[data-theme='sombre'] .actions-ligne .button.est-danger:hover {
  color: var(--negatif);
  border-color: var(--negatif);
  background: var(--negatif-fond);
  box-shadow: 0 0 14px rgba(244, 114, 140, 0.28);
}

/* --- Étiquettes : Bulma les rend illisibles sur fond sombre ------------- */

:root[data-theme='sombre'] .tag:not(body),
:root[data-theme='sombre'] .tag.is-light {
  background: rgba(69, 207, 221, 0.14);
  color: var(--cyan);
  border: 1px solid rgba(69, 207, 221, 0.28);
}
:root[data-theme='sombre'] .tag.is-success,
:root[data-theme='sombre'] .tag.is-success.is-light {
  background: rgba(63, 217, 164, 0.14); color: var(--positif);
  border-color: rgba(63, 217, 164, 0.3);
}
:root[data-theme='sombre'] .tag.is-danger,
:root[data-theme='sombre'] .tag.is-danger.is-light {
  background: rgba(244, 114, 140, 0.14); color: var(--negatif);
  border-color: rgba(244, 114, 140, 0.3);
}
:root[data-theme='sombre'] .tag.is-warning,
:root[data-theme='sombre'] .tag.is-warning.is-light {
  background: rgba(240, 182, 74, 0.14); color: var(--alerte);
  border-color: rgba(240, 182, 74, 0.3);
}
:root[data-theme='sombre'] .tag.is-info,
:root[data-theme='sombre'] .tag.is-info.is-light {
  background: rgba(157, 120, 232, 0.16); color: var(--violet);
  border-color: rgba(157, 120, 232, 0.32);
}

:root[data-theme='sombre'] .notification { border: 1px solid var(--trait); }

/* En thème sombre, les pastels s'inversent : fond très sombre teinté,
   texte clair. Les mêmes couleurs posées telles quelles éblouiraient. */
:root[data-theme='sombre'] .tag-etat.ton-attente { background: rgba(240,182,74,.14); color: #f3c76a; border-color: rgba(240,182,74,.28); }
:root[data-theme='sombre'] .tag-etat.ton-engage  { background: rgba(69,207,221,.14);  color: #6fdde8; border-color: rgba(69,207,221,.28); }
:root[data-theme='sombre'] .tag-etat.ton-acquis  { background: rgba(63,217,164,.14);  color: #6ae0b8; border-color: rgba(63,217,164,.28); }
:root[data-theme='sombre'] .tag-etat.ton-perdu   { background: rgba(244,114,140,.14); color: #f792a5; border-color: rgba(244,114,140,.28); }
:root[data-theme='sombre'] .tag-etat.ton-neutre  { background: var(--surface-2); color: var(--encre-douce); border-color: var(--trait); }

/* --- Onglets, divers --------------------------------------------------- */

:root[data-theme='sombre'] .tabs li a { color: var(--encre-douce); border-bottom-color: var(--trait); }
:root[data-theme='sombre'] .tabs.is-boxed li.is-active a {
  background: var(--surface-2);
  border-color: var(--trait);
  border-bottom-color: transparent;
  color: var(--accent-vif);
}

:root[data-theme='sombre'] .liens-navigation .navbar-item.is-active {
  color: var(--accent-vif);
}
:root[data-theme='sombre'] .navbar-dropdown .lien-navigation.is-active {
  color: var(--accent-vif);
  box-shadow: inset 3px 0 0 var(--accent);
}
:root[data-theme='sombre'] .navbar-dropdown .lien-navigation:hover { background: var(--survol); }

:root[data-theme='sombre'] .squelette {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--survol-fort) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
}

:root[data-theme='sombre'] .pagination-link.is-current {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 14px var(--accent-lueur);
}
:root[data-theme='sombre'] .cellule-cliquable:hover { background: rgba(232, 98, 159, 0.12); }
:root[data-theme='sombre'] .saisie-montant { color: var(--accent-vif); }
:root[data-theme='sombre'] .champ-montant .unite { color: var(--cyan); }