/* ==========================================================================
   WorkManagement — composants partagés « Chaux & Encre »
   Boutons, champs et formulaires, segments, onglets, puces, badges, tuiles-filtres,
   cartes, jauges, histogramme, tableau dense (en cartes au téléphone), fiche et panneau,
   feuille et modale, menu d'actions, pagination, étapes et jalons, pavé numérique, zone
   de dépôt, bande hachurée, bulle d'aide, états vide / chargement / erreur, toast.
   Toutes les classes portent le préfixe c- ; les états restent nus et se combinent :
   actif, courant, selection, ouvert, visible, haut, survol. Comportements :
   public/js/app.js (feuilles, toast, choix) et public/js/composants.js (onglets, menus,
   aide, dépôt, lignes cliquables, pavé).
   Aucune couleur en dur hors du texte presque noir posé sur l'ocre ou le cyan : tout
   passe par les jetons de design-system.css (--sur-vif sur les couleurs vives).
   ========================================================================== */

/* Boîte bordée partout, comme app.css : une page autonome qui ne charge pas app.css
   (core/Cadre.php) a les mêmes dimensions. */
*, ::before, ::after { box-sizing: border-box; }

/* ───────────── Zone aux normes du système ─────────────
   .c-base sur un conteneur (ou le <body>) d'un écran migré : remet à zéro marges,
   listes et liens comme le kit les attend. Spécificité nulle : toute classe l'emporte. */
.c-base {
  font-family: var(--police);
  font-size: var(--t-corps);
  line-height: 1.5;
  color: var(--texte);
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
:where(.c-base) :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) { margin: 0; }
:where(.c-base) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(.c-base) :where(a) { color: inherit; text-decoration: none; }
:where(.c-base) :where(a:hover) { opacity: 1; }
:where(.c-base) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.c-base) :where(img, svg) { display: block; max-width: 100%; }
:where(.c-base) :where(button) { cursor: pointer; }

/* ───────────── Typographie ───────────── */
.c-geant { margin: 0; font-size: var(--t-geant); font-weight: var(--g-leger); line-height: .98; letter-spacing: -.04em; }
.c-titre-page { margin: 0; font-size: var(--t-page); font-weight: var(--g-leger); line-height: 1; letter-spacing: -.035em; }
.c-compte { font-size: .42em; font-weight: 400; color: var(--texte-3); letter-spacing: -.01em; vertical-align: .9em; margin-left: .25em; font-variant-numeric: tabular-nums; }
.c-titre { margin: 0; font-size: var(--t-titre); font-weight: var(--g-normal); letter-spacing: -.02em; line-height: 1.15; }
.c-titre-carte { margin: 0; font-size: var(--t-carte); font-weight: var(--g-moyen); letter-spacing: -.012em; line-height: 1.25; }
.c-surtitre { margin: 0; font-size: var(--t-petit); color: var(--texte-2); font-weight: var(--g-moyen); letter-spacing: .005em; }
.c-etiquette-section {
  margin: 0;
  font-size: var(--t-legende);
  font-weight: var(--g-fort);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texte-3);
}
.c-chiffre { font-size: var(--t-chiffre); font-weight: var(--g-leger); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.c-mesure { font-weight: var(--g-mesure); letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.c-mesure .c-unite, .c-chiffre .c-unite { font-size: .42em; font-weight: var(--g-moyen); letter-spacing: 0; margin-left: .2em; color: var(--texte-2); }
.c-mono { font-family: var(--police-mono); font-feature-settings: "zero" 0; letter-spacing: -.01em; }
.c-num { font-variant-numeric: tabular-nums; }
.c-texte-2 { color: var(--texte-2); }
.c-texte-3 { color: var(--texte-3); }
.c-visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.c-lien { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--g-fort); font-size: .9375rem; color: var(--accent-texte); min-height: 44px; text-decoration: none; }
.c-lien .c-i { width: 17px; height: 17px; }

/* ───────────── Matières ───────────── */
.c-verre {
  background: var(--surface);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  backdrop-filter: blur(22px) saturate(1.35);
  border: 1px solid var(--surface-bord);
  box-shadow: var(--reflet), var(--ombre-1);
}
.c-hachures { background-image: repeating-linear-gradient(-45deg, var(--hachure) 0 1.5px, transparent 1.5px 7px); }

/* ───────────── Boutons ───────────── */
.c-btn {
  --h: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--h);
  margin: 0;
  padding: 0 22px;
  border-radius: var(--r-pilule);
  border: 1px solid transparent;
  background: transparent;
  color: var(--texte);
  font-family: var(--police);
  font-size: .9375rem;
  font-weight: var(--g-fort);
  letter-spacing: .005em;
  line-height: 1.1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duree) var(--courbe), transform var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe), border-color var(--duree), opacity var(--duree);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.c-btn:active { transform: scale(.97); }
.c-btn .c-i { width: 19px; height: 19px; }

.c-btn-primaire { background: var(--encre); color: var(--sur-encre); box-shadow: var(--ombre-encre); }
.c-btn-primaire:hover { background: color-mix(in srgb, var(--encre) 88%, var(--accent)); }

.c-btn-secondaire { background: var(--surface-pleine); color: var(--texte); border-color: var(--trait-fort); }
.c-btn-secondaire:hover { background: var(--creux); }

.c-btn-fantome { background: transparent; color: var(--texte); }
.c-btn-fantome:hover { background: var(--creux-doux); }

.c-btn-danger { background: var(--danger-teinte); color: var(--danger); }
.c-btn-danger:hover { background: color-mix(in srgb, var(--danger-teinte) 80%, var(--danger)); }
.c-btn-danger-plein { background: var(--danger-vif); color: var(--sur-vif); }

/* Ocre : seulement posé sur l'encre, une fois par écran. */
.c-btn-ocre { background: var(--ocre); color: #1C1B18; box-shadow: 0 10px 24px -12px rgba(160, 110, 10, .75); }
.c-btn-ocre:hover { background: color-mix(in srgb, var(--ocre) 88%, #fff); }

.c-btn-sur-encre { background: var(--contraste-2); color: var(--sur-contraste); border-color: var(--contraste-bord); }
.c-btn-sur-encre:hover { background: var(--contraste-3); }

.c-btn-l { --h: 56px; padding: 0 28px; font-size: 1.0625rem; }
.c-btn-xl { --h: 64px; padding: 0 30px; font-size: 1.1875rem; border-radius: 22px; }
.c-btn-plein { width: 100%; }
.c-btn[disabled], .c-btn[aria-disabled="true"] { opacity: .42; pointer-events: none; box-shadow: none; }

.c-btn-rond {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--cible);
  height: var(--cible);
  flex: none;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--surface-bord);
  box-shadow: var(--reflet), 0 1px 2px rgba(64, 48, 24, .06), 0 6px 16px -10px rgba(64, 48, 24, .30);
  color: var(--texte);
  cursor: pointer;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  -webkit-tap-highlight-color: transparent;
  transition: background var(--duree), transform var(--duree) var(--courbe), color var(--duree);
}
.c-btn-rond:hover { background: var(--surface-pleine); }
.c-btn-rond:active { transform: scale(.94); }
.c-btn-rond[disabled] { opacity: .42; pointer-events: none; }
.c-btn-rond--encre { background: var(--encre); color: var(--sur-encre); border-color: transparent; box-shadow: var(--ombre-encre); }
.c-btn-rond--encre:hover { background: var(--encre); }
.c-btn-rond--plat { background: var(--creux); box-shadow: none; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.c-btn-rond--sur-encre { background: var(--contraste-2); color: var(--sur-contraste); border-color: var(--contraste-bord); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.c-btn-rond--sur-encre:hover { background: var(--contraste-3); }
.c-btn-rond--l { --cible: 56px; }
.c-btn-rond--xl { --cible: 64px; }

.c-compteur {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--danger-vif);
  color: var(--sur-vif);
  font-size: 11px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--fond);
}
.c-compteur--ocre { background: var(--ocre); color: #1C1B18; }

.c-btn-ouvrir {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--surface-pleine);
  border: 1px solid var(--trait);
  color: var(--texte);
  transition: background var(--duree), color var(--duree), transform var(--duree) var(--courbe);
}
.c-btn-ouvrir .c-i { width: 18px; height: 18px; }

/* Bouton de thème commun : ses deux icônes sont dans le bouton, le thème montre la bonne. */
[data-action="theme"] .c-theme-lune { display: var(--en-sombre, none); }
[data-action="theme"] .c-theme-soleil { display: var(--en-clair, none); }

.c-avatar {
  display: inline-grid;
  place-items: center;
  width: var(--cible);
  height: var(--cible);
  flex: none;
  padding: 0;
  border-radius: 50%;
  background: var(--surface-pleine);
  color: var(--texte);
  font-family: var(--police);
  font-weight: var(--g-fort);
  font-size: .875rem;
  letter-spacing: .02em;
  border: 1.5px solid var(--trait-fort);
  box-shadow: var(--reflet);
}
.c-avatar--s { width: 32px; height: 32px; font-size: .75rem; border-width: 1px; }
.c-avatars { display: flex; }
.c-avatars .c-avatar { margin-left: -8px; box-shadow: 0 0 0 2px var(--surface-pleine); }
.c-avatars .c-avatar:first-child { margin-left: 0; }

/* ───────────── Champs ───────────── */
.c-champ-groupe { display: grid; gap: 7px; align-content: start; }
.c-champ-label { font-size: var(--t-petit); font-weight: var(--g-fort); color: var(--texte-2); }
.c-champ-aide { font-size: var(--t-legende); color: var(--texte-3); line-height: 1.4; }
.c-champ-aide--erreur { color: var(--danger); font-weight: var(--g-moyen); }

.c-champ {
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 0 16px;
  border-radius: 14px;
  background: var(--surface-pleine);
  border: 1px solid var(--trait-champ);
  color: var(--texte);
  font-family: var(--police);
  font-size: 1rem;
  transition: border-color var(--duree), box-shadow var(--duree), background var(--duree);
}
textarea.c-champ { padding: 13px 16px; min-height: 96px; resize: vertical; line-height: 1.45; }
.c-champ::placeholder { color: var(--texte-3); opacity: 1; }
.c-champ:hover { border-color: var(--texte-3); }
.c-champ:focus, .c-champ:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--focus); }
.c-champ--erreur { border-color: var(--danger-vif); }
.c-champ--erreur:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger-vif) 35%, transparent); }
.c-champ-l { min-height: 64px; font-size: 1.375rem; border-radius: 18px; padding: 0 20px; }
.c-champ.c-mono { font-family: var(--police-mono); }

.c-champ-icone { position: relative; display: block; }
.c-champ-icone > .c-i { position: absolute; z-index: 1; left: 16px; top: 50%; transform: translateY(-50%); color: var(--texte-3); pointer-events: none; }
.c-champ-icone > .c-champ { padding-left: 46px; }
.c-champ-icone:has(.c-champ-suffixe) > .c-champ { padding-right: 96px; }
.c-champ-suffixe { position: absolute; z-index: 1; right: 4px; top: 50%; transform: translateY(-50%); display: flex; gap: 6px; align-items: center; }

.c-touche {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 24px;
  padding: 0 7px;
  border-radius: 7px;
  background: var(--creux);
  border: 1px solid var(--trait);
  color: var(--texte-3);
  font-size: .75rem;
  font-weight: var(--g-fort);
  font-family: var(--police);
  white-space: nowrap;
}

.c-select { position: relative; display: inline-flex; }
.c-select select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 44px;
  margin: 0;
  padding: 0 42px 0 16px;
  border-radius: var(--r-pilule);
  background: var(--surface-pleine);
  border: 1px solid var(--trait-fort);
  color: var(--texte);
  font-family: var(--police);
  font-size: .9375rem;
  font-weight: var(--g-moyen);
  cursor: pointer;
}
.c-select select:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 4px var(--focus); outline: none; }
.c-select > .c-i { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; pointer-events: none; color: var(--texte-2); }
.c-select--champ { display: flex; }
.c-select--champ select { border-radius: 14px; min-height: 48px; width: 100%; border-color: var(--trait-champ); }

.c-interrupteur { position: relative; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-weight: var(--g-moyen); min-height: 44px; }
.c-interrupteur input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.c-piste { width: 52px; height: 32px; border-radius: 16px; background: var(--trait-fort); position: relative; flex: none; transition: background var(--duree); }
.c-piste::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: transform var(--duree) var(--courbe); }
.c-interrupteur input:checked + .c-piste { background: var(--accent); }
.c-interrupteur input:checked + .c-piste::after { transform: translateX(20px); }
.c-interrupteur input:focus-visible + .c-piste { box-shadow: 0 0 0 4px var(--focus); }

.c-case { position: relative; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; min-height: 44px; font-weight: var(--g-moyen); }
.c-case input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.c-boite { width: 26px; height: 26px; border-radius: 8px; border: 1.5px solid var(--trait-champ); background: var(--surface-pleine); display: grid; place-items: center; flex: none; transition: background var(--duree), border-color var(--duree); }
.c-boite .c-i { width: 17px; height: 17px; stroke-width: 2.4; color: var(--sur-encre); opacity: 0; }
.c-case input:checked + .c-boite { background: var(--encre); border-color: var(--encre); }
.c-case input:checked + .c-boite .c-i { opacity: 1; }
.c-case input:focus-visible + .c-boite { box-shadow: 0 0 0 4px var(--focus); }

/* Pas (stepper) : ronds de 56 px autour d'une valeur centrée. */
.c-pas { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; gap: 8px; align-items: center; }
.c-pas .c-btn-rond { --cible: 56px; }
.c-pas .c-champ { text-align: center; }

/* ───────────── Segments et puces ───────────── */
.c-segments {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: var(--r-pilule);
  background: var(--surface);
  border: 1px solid var(--surface-bord);
  box-shadow: var(--reflet), 0 1px 2px rgba(64, 48, 24, .05);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.c-segments::-webkit-scrollbar { display: none; }
.c-segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  padding: 0 18px;
  border-radius: var(--r-pilule);
  border: 0;
  background: transparent;
  color: var(--texte-2);
  font-family: var(--police);
  font-size: .9375rem;
  font-weight: var(--g-moyen);
  white-space: nowrap;
  text-decoration: none;
  flex: none;
  cursor: pointer;
  transition: background var(--duree) var(--courbe), color var(--duree);
}
.c-segment:hover { color: var(--texte); background: var(--creux-doux); }
.c-segment.actif, .c-segment[aria-current="page"], .c-segment[aria-pressed="true"] { background: var(--encre); color: var(--sur-encre); }
.c-segment .c-nb { font-size: .75rem; font-weight: var(--g-fort); padding: 2px 7px; border-radius: 10px; background: var(--creux); color: var(--texte-2); font-variant-numeric: tabular-nums; }
.c-segment.actif .c-nb, .c-segment[aria-current="page"] .c-nb, .c-segment[aria-pressed="true"] .c-nb { background: var(--sur-encre-voile); color: var(--sur-encre); }
.c-segment .c-point { width: 8px; height: 8px; border-radius: 50%; background: var(--m, var(--texte-3)); flex: none; }
.c-segment .c-i { width: 18px; height: 18px; }

.c-segments--plat { background: var(--creux); border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.c-segments--l .c-segment { min-height: 52px; padding: 0 22px; font-size: 1rem; }
.c-segments--plein { display: flex; width: 100%; }
.c-segments--plein .c-segment { flex: 1 1 0; }

.c-puces { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.c-puces::-webkit-scrollbar { display: none; }
.c-puce {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  min-height: 44px; margin: 0; padding: 0 16px; border-radius: var(--r-pilule);
  background: var(--surface); border: 1px solid var(--trait-fort); color: var(--texte);
  font-family: var(--police); font-size: .9375rem; font-weight: var(--g-moyen); white-space: nowrap; cursor: pointer;
}
.c-puce[aria-pressed="true"], .c-puce.actif { background: var(--encre); border-color: var(--encre); color: var(--sur-encre); }
.c-puce .c-nb { font-variant-numeric: tabular-nums; color: var(--texte-3); font-weight: var(--g-fort); font-size: .8125rem; }
.c-puce[aria-pressed="true"] .c-nb, .c-puce.actif .c-nb { color: var(--sur-encre-2); }
.c-puce .c-point { width: 8px; height: 8px; border-radius: 50%; background: var(--m, var(--texte-3)); }
.c-puce--filtre { background: var(--accent-teinte); border-color: transparent; color: var(--texte); padding-right: 6px; cursor: default; }
.c-retirer { width: 44px; height: 44px; margin: 0 -6px 0 -6px; padding: 0; border-radius: 50%; display: grid; place-items: center; border: 0; background: transparent; color: var(--texte-2); cursor: pointer; }
.c-retirer .c-i { width: 16px; height: 16px; }

/* ───────────── Badges et statuts : point + libellé, jamais la couleur seule ───────────── */
.c-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--r-pilule);
  font-family: var(--police);
  font-size: .8125rem;
  font-weight: var(--g-fort);
  line-height: 1;
  white-space: nowrap;
  background: var(--neutre-teinte);
  color: var(--neutre);
  font-variant-numeric: tabular-nums;
}
.c-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.c-badge--sans-point::before { display: none; }
.c-badge--succes { background: var(--succes-teinte); color: var(--succes); }
.c-badge--alerte { background: var(--alerte-teinte); color: var(--alerte); }
.c-badge--danger { background: var(--danger-teinte); color: var(--danger); }
.c-badge--info { background: var(--info-teinte); color: var(--info); }
.c-badge--encre { background: var(--encre); color: var(--sur-encre); }
.c-badge--ocre { background: var(--ocre); color: #1C1B18; }
.c-badge--production { background: var(--ocre-teinte); color: var(--ocre-texte); }
.c-badge--contour { background: transparent; border: 1px solid var(--trait-fort); color: var(--texte-2); }
.c-badge--hachure { background-color: transparent; border: 1px solid var(--trait-fort); color: var(--texte-2); background-image: repeating-linear-gradient(-45deg, var(--hachure) 0 1px, transparent 1px 6px); }
.c-badge-l { height: 34px; padding: 0 14px; font-size: .9375rem; gap: 8px; }
.c-badge-l::before { width: 9px; height: 9px; }

/* ───────────── Cartes ───────────── */
.c-carte {
  position: relative;
  border-radius: var(--r-l);
  padding: var(--e-6);
  background: var(--surface);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  backdrop-filter: blur(22px) saturate(1.35);
  border: 1px solid var(--surface-bord);
  box-shadow: var(--reflet), var(--ombre-1);
  color: var(--texte);
}
.c-carte-pleine { background: var(--surface-pleine); }
.c-carte-creuse { background: var(--creux); box-shadow: none; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.c-carte-tete { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); margin-bottom: var(--e-4); }
.c-carte-tete .c-titre-carte { flex: 1; min-width: 0; }

/* Carte d'encre : une seule par écran, pour ce qui attend une action. */
.c-carte-encre {
  background-color: var(--contraste);
  background-image: var(--contraste-lueur);
  color: var(--sur-contraste);
  border: 1px solid var(--carte-encre-bord);
  box-shadow: var(--ombre-2);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.c-carte-encre .c-texte-2, .c-carte-encre .c-surtitre, .c-carte-encre .c-etiquette-section { color: var(--sur-contraste-2); }
.c-carte-encre .c-picto { color: var(--sur-contraste); }
.c-carte-encre .c-btn-ouvrir { background: var(--contraste-2); border-color: var(--contraste-bord); color: var(--sur-contraste); }

a.c-carte, .c-carte--lien { color: inherit; text-decoration: none; transition: transform var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe), background var(--duree); }
a.c-carte:hover, .c-carte--lien:hover { transform: translateY(-2px); box-shadow: var(--reflet), var(--ombre-2); opacity: 1; }
a.c-carte:hover .c-btn-ouvrir, .c-carte--lien:hover .c-btn-ouvrir { background: var(--encre); color: var(--sur-encre); border-color: var(--encre); }

/* Liseré : bord gauche coloré des cartes de liste au téléphone. */
.c-lisere { box-shadow: var(--reflet), var(--ombre-1), inset 4px 0 0 var(--lisere, transparent); }
.c-lisere--danger { --lisere: var(--danger-vif); }
.c-lisere--alerte { --lisere: var(--alerte-vif); }
.c-lisere--info { --lisere: var(--info-vif); }

.c-kpi { display: grid; gap: 10px; align-content: start; }
.c-kpi-lib { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--t-petit); color: var(--texte-2); font-weight: var(--g-moyen); }
.c-tendance { display: inline-flex; align-items: center; gap: 4px; font-size: .8125rem; font-weight: var(--g-fort); }
.c-tendance--haut { color: var(--succes); }
.c-tendance--bas { color: var(--danger); }

/* Tuile-filtre : un indicateur qui filtre la liste ; choisie, elle passe en encre. */
.c-tuile-filtre {
  position: relative;
  display: grid;
  gap: 12px;
  align-content: space-between;
  text-align: left;
  min-height: 132px;
  margin: 0;
  padding: 18px 20px;
  border-radius: var(--r-l);
  background: var(--surface);
  border: 1px solid var(--surface-bord);
  box-shadow: var(--reflet), var(--ombre-1);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  backdrop-filter: blur(22px) saturate(1.35);
  color: var(--texte);
  font-family: var(--police);
  cursor: pointer;
  transition: transform var(--duree) var(--courbe), background var(--duree), color var(--duree);
}
.c-tuile-filtre:hover { transform: translateY(-2px); }
.c-tuile-filtre .c-kpi-lib { justify-content: space-between; }
.c-tuile-filtre .c-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--creux); color: var(--texte); flex: none; }
.c-tuile-filtre .c-ic .c-i { width: 17px; height: 17px; }
.c-tuile-filtre .c-chiffre { font-size: clamp(2.5rem, 1.9rem + 1.6vw, 3.5rem); }
.c-tuile-filtre .c-bas { font-size: .8125rem; color: var(--texte-2); line-height: 1.35; }
.c-tuile-filtre--danger .c-ic { background: var(--danger-teinte); color: var(--danger); }
.c-tuile-filtre--danger .c-chiffre { color: var(--danger); }
.c-tuile-filtre--alerte .c-ic { background: var(--alerte-teinte); color: var(--alerte); }
.c-tuile-filtre--info .c-ic { background: var(--info-teinte); color: var(--info); }
.c-tuile-filtre[aria-pressed="true"] { background: var(--encre); color: var(--sur-encre); border-color: var(--encre); box-shadow: var(--ombre-2); }
.c-tuile-filtre[aria-pressed="true"] .c-kpi-lib, .c-tuile-filtre[aria-pressed="true"] .c-bas { color: var(--sur-encre-2); }
.c-tuile-filtre[aria-pressed="true"] .c-chiffre { color: var(--sur-encre); }
.c-tuile-filtre[aria-pressed="true"] .c-ic { background: var(--sur-encre-voile); color: var(--sur-encre); }
.c-tuile-filtre .c-coche { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--trait-fort); display: grid; place-items: center; }
.c-tuile-filtre .c-coche .c-i { width: 14px; height: 14px; stroke-width: 2.6; opacity: 0; }
.c-tuile-filtre[aria-pressed="true"] .c-coche { background: var(--ocre); border-color: var(--ocre); color: #1C1B18; }
.c-tuile-filtre[aria-pressed="true"] .c-coche .c-i { opacity: 1; }

/* ───────────── Progression : barres pleines, barres segmentées et hachurées ───────────── */
.c-prog { height: 10px; border-radius: var(--r-pilule); background: var(--creux); overflow: hidden; display: flex; }
.c-prog > span { display: block; height: 100%; background: var(--encre); border-radius: var(--r-pilule); }
.c-prog--ocre > span { background: var(--ocre); }
.c-prog--accent > span { background: var(--accent); }
.c-prog--danger > span { background: var(--danger-vif); }
.c-prog--alerte > span { background: var(--alerte-vif); }
.c-prog--succes > span { background: var(--succes-vif); }
.c-prog-l { height: 14px; }

.c-barre-segments { display: flex; gap: 6px; align-items: stretch; }
.c-barre-segments > div { min-width: 0; display: grid; gap: 8px; }
.c-seg {
  height: 52px;
  border-radius: var(--r-pilule);
  display: flex;
  align-items: center;
  padding: 0 18px;
  font-size: .875rem;
  font-weight: var(--g-fort);
  white-space: nowrap;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.c-seg-lib { font-size: var(--t-petit); color: var(--texte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-seg--encre { background: var(--encre); color: var(--sur-encre); }
.c-seg--ocre { background: var(--ocre); color: #1C1B18; }
.c-seg--accent { background: var(--accent); color: #1C1B18; }
.c-seg--hachure { background-color: var(--surface); border: 1px solid var(--trait); color: var(--texte-2); background-image: repeating-linear-gradient(-45deg, var(--hachure) 0 1.5px, transparent 1.5px 7px); }
.c-seg--vide { border: 1.5px solid var(--trait-fort); color: var(--texte-2); background: transparent; }
.c-legende-barre { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; list-style: none; font-size: .875rem; color: var(--texte-2); }
.c-legende-barre li { display: inline-flex; align-items: center; gap: 8px; }
.c-legende-barre i { width: 22px; height: 12px; border-radius: 6px; flex: none; }
.c-legende-barre b { color: var(--texte); font-weight: var(--g-fort); font-variant-numeric: tabular-nums; }

/* ───────────── Jauges ─────────────
   .c-niveau : stock / seuil, le repère central marque le seuil (largeur de <i> = niveau).
   .c-regle  : plage de tolérance d'une pesée — piste hachurée, zone acceptée, repère de
               la cible, aiguille d'encre ; positions en % posées en style par l'app. */
.c-niveau { position: relative; height: 6px; border-radius: 3px; background: var(--creux); }
.c-niveau > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--encre); }
.c-niveau--alerte > i { background: var(--alerte-vif); }
.c-niveau--danger > i { background: var(--danger-vif); }
.c-niveau::after { content: ""; position: absolute; left: var(--seuil, 50%); top: -3px; bottom: -3px; width: 2px; border-radius: 1px; background: var(--texte-3); }
.c-niveau-l { height: 10px; border-radius: 5px; }
.c-niveau-l > i { border-radius: 5px; }

.c-regle { position: relative; height: 66px; margin: 0 4px; }
.c-regle-piste { position: absolute; left: 0; right: 0; top: 14px; height: 30px; border-radius: 10px; background-color: var(--creux); background-image: repeating-linear-gradient(-45deg, var(--hachure) 0 1px, transparent 1px 7px); overflow: hidden; }
.c-regle-zone { position: absolute; top: 0; bottom: 0; background: var(--succes-teinte); border-left: 2px solid var(--succes-vif); border-right: 2px solid var(--succes-vif); }
.c-graduation { position: absolute; top: 48px; width: 1px; height: 6px; background: var(--texte-3); }
.c-graduation span { position: absolute; top: 7px; left: 50%; transform: translateX(-50%); font-size: .8125rem; color: var(--texte-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-graduation--cible { height: 10px; background: var(--texte); }
.c-graduation--cible span { color: var(--texte); font-weight: 700; }
.c-repere-cible { position: absolute; top: 8px; height: 42px; width: 2px; margin-left: -1px; background: var(--texte); }
.c-aiguille { position: absolute; top: 9px; width: 0; transition: left .25s var(--courbe); }
.c-aiguille::before { content: ""; position: absolute; left: -11px; top: 0; width: 22px; height: 40px; border-radius: 11px; background: var(--encre); box-shadow: 0 0 0 3px var(--surface-pleine), 0 6px 14px -4px rgba(0, 0, 0, .4); }
.c-aiguille::after { content: ""; position: absolute; left: -3px; top: 17px; width: 6px; height: 6px; border-radius: 50%; background: var(--ocre); }

.c-verdict { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 16px 8px 10px; border-radius: 16px; font-weight: var(--g-fort); line-height: 1.3; background: var(--creux); color: var(--texte); }
.c-verdict .c-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--encre); color: var(--sur-encre); }
.c-verdict .c-ic .c-i { width: 19px; height: 19px; stroke-width: 2.4; }
.c-verdict small { display: block; font-weight: var(--g-moyen); font-size: .875rem; opacity: .9; font-variant-numeric: tabular-nums; }
.c-verdict--ok { background: var(--succes-teinte); color: var(--succes); }
.c-verdict--ok .c-ic { background: var(--succes-vif); color: var(--sur-vif); }
.c-verdict--ko { background: var(--danger-teinte); color: var(--danger); }
.c-verdict--ko .c-ic { background: var(--danger-vif); color: var(--sur-vif); }

/* ───────────── Tableau : lignes de 68 px, sélection cyan avec filet ───────────── */
.c-tableau-cadre { overflow-x: auto; border-radius: var(--r-l); }
.c-tableau { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9375rem; color: var(--texte); }
.c-tableau th {
  text-align: left;
  font-size: .75rem;
  font-weight: var(--g-fort);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texte-3);
  padding: 14px 14px;
  border-bottom: 1px solid var(--trait);
  white-space: nowrap;
  background: transparent;
}
.c-tableau td { padding: 10px 14px; border-bottom: 1px solid var(--trait); vertical-align: middle; height: 68px; }
.c-tableau tbody tr { transition: background var(--duree); }
.c-tableau tbody tr[data-href], .c-tableau tbody tr.c-cliquable { cursor: pointer; }
.c-tableau tbody tr:hover { background: var(--creux-doux); }
.c-tableau tbody tr.selection, .c-tableau tbody tr[aria-selected="true"] { background: color-mix(in srgb, var(--accent-teinte) 70%, transparent); }
.c-tableau tbody tr.selection td:first-child, .c-tableau tbody tr[aria-selected="true"] td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.c-tableau tbody tr:last-child td { border-bottom: 0; }
.c-tableau .c-droite { text-align: right; }
.c-tableau .c-code { font-family: var(--police-mono); font-size: .8125rem; color: var(--texte-2); white-space: nowrap; }
.c-tableau tr.c-groupe-ligne td { height: auto; padding: 18px 14px 8px; background: transparent; cursor: default; border-bottom: 1px solid var(--trait); }
.c-tableau tr.c-groupe-ligne:hover { background: transparent; }

.c-actions-ligne { display: flex; gap: 8px; justify-content: flex-end; }
.c-actions-ligne .c-btn-rond { --cible: var(--cible-ligne); box-shadow: none; background: var(--creux); border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.c-actions-ligne .c-btn-rond:hover { background: var(--encre); color: var(--sur-encre); }
.c-actions-ligne .c-btn-rond .c-i { width: 18px; height: 18px; stroke-width: 2; }

/* ───────────── Feuille / modale ─────────────
   .c-voile > .c-modale ; feuille du bas sous 600 px. Ouverture : wmOuvrir(id) ou
   [data-ouvre="id"] ; fermeture : [data-fermer], Échap, clic sur le voile (app.js). */
.c-voile {
  position: fixed;
  inset: 0;
  background: var(--voile);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  padding: var(--gouttiere);
  z-index: var(--z-voile);
  font-family: var(--police);
  line-height: 1.5;
  color: var(--texte);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s var(--courbe), visibility 0s linear .2s;
}
.c-voile.ouvert { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .2s var(--courbe), visibility 0s; }
.c-modale {
  width: min(560px, 100%);
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow: auto;
  border-radius: var(--r-xl);
  background: var(--surface-pleine);
  border: 1px solid var(--surface-bord);
  box-shadow: var(--ombre-flottante);
  padding: 28px;
  color: var(--texte);
  transform: translateY(12px) scale(.98);
  transition: transform .25s var(--courbe);
}
.c-voile.ouvert .c-modale { transform: none; }
.c-modale-l { width: min(780px, 100%); }
.c-modale-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.c-modale-pied { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.c-poignee { width: 44px; height: 5px; border-radius: 3px; background: var(--trait-fort); margin: -10px auto 16px; display: none; }

@media (max-width: 599px) {
  .c-voile { place-items: end stretch; padding: 0; }
  .c-modale, .c-modale-l {
    width: 100%;
    max-height: 92vh;
    max-height: 92dvh;
    border-radius: 28px 28px 0 0;
    padding: 22px 20px calc(20px + env(safe-area-inset-bottom));
    transform: translateY(40px);
  }
  .c-poignee { display: block; }
  .c-modale-pied { flex-direction: column-reverse; }
  .c-modale-pied .c-btn { width: 100%; }
}

/* ───────────── Toast : pilule d'encre, coche ocre, action de 44 px ───────────── */
.c-toast {
  position: fixed;
  left: 50%;
  bottom: calc(28px + env(safe-area-inset-bottom));
  transform: translate(-50%, 20px);
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 8px 8px 8px 10px;
  border-radius: var(--r-pilule);
  background: var(--contraste);
  color: var(--sur-contraste);
  border: 1px solid var(--contraste-bord);
  box-shadow: var(--ombre-flottante);
  font-family: var(--police);
  font-weight: var(--g-moyen);
  z-index: var(--z-toast);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .25s var(--courbe);
}
.c-toast.visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.c-toast.haut { bottom: calc(108px + env(safe-area-inset-bottom)); }
.c-toast-icone { width: 40px; height: 40px; border-radius: 50%; background: var(--ocre); color: #1C1B18; display: grid; place-items: center; flex: none; }
.c-toast-icone .c-i { stroke-width: 2.2; }
.c-toast--erreur .c-toast-icone { background: var(--danger-vif); color: var(--sur-vif); }
.c-toast-texte { padding-right: 10px; line-height: 1.3; font-size: .9375rem; }
.c-toast-action { color: var(--ocre); font-family: var(--police); font-size: .9375rem; font-weight: var(--g-fort); margin: 0 0 0 -4px; padding: 0 18px; min-height: 44px; display: inline-flex; align-items: center; border-radius: var(--r-pilule); background: var(--contraste-2); border: 0; white-space: nowrap; cursor: pointer; }
.c-toast-statique { position: static; transform: none; opacity: 1; pointer-events: auto; display: inline-flex; width: auto; max-width: 100%; }

/* ───────────── État vide : rond hachuré, pictogramme, phrase, une action ───────────── */
.c-vide { display: grid; justify-items: center; text-align: center; gap: 12px; padding: 40px 24px; }
.c-vide-motif {
  width: 96px; height: 96px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px dashed var(--trait-fort);
  color: var(--texte-3);
  margin-bottom: 6px;
  background-image: repeating-linear-gradient(-45deg, var(--creux-doux) 0 1.5px, transparent 1.5px 7px);
}
.c-vide-motif .c-picto { width: 44px; height: 44px; color: var(--texte-2); }
.c-vide p { margin: 0; max-width: 36ch; color: var(--texte-2); }

/* ───────────── Document : type en mono, titre, contenu et poids, téléchargement ───────────── */
.c-doc { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 72px; padding: 10px 6px 10px 10px; border-radius: 20px; color: inherit; text-decoration: none; transition: background var(--duree); }
.c-doc + .c-doc { border-top: 1px dashed var(--trait-fort); border-radius: 0; }
.c-doc:hover { background: var(--creux-doux); }
.c-doc-type { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--creux); font-family: var(--police-mono); font-size: .75rem; font-weight: 600; color: var(--texte-2); letter-spacing: .02em; }
.c-doc-titre { font-weight: var(--g-fort); line-height: 1.3; }
.c-doc-detail { font-size: .875rem; color: var(--texte-3); }
.c-doc .c-btn-rond { --cible: 48px; box-shadow: none; background: var(--surface-pleine); border-color: var(--trait); }

/* Silhouette de pièce 56 × 40, inserts en ocre (.c-rep). */
.c-silhouette { width: 56px; height: 40px; flex: none; color: var(--texte-2); fill: var(--creux); stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.c-silhouette .c-rep { fill: var(--ocre); stroke: none; }

/* ───────────── Défilement horizontal ───────────── */
.c-defilement-x {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin: 0 calc(var(--gouttiere) * -1);
  padding: 4px var(--gouttiere) 10px;
  scroll-padding: 0 var(--gouttiere);
}
.c-defilement-x::-webkit-scrollbar { display: none; }
.c-defilement-x > * { scroll-snap-align: start; flex: none; }
/* Fondu du bord DROIT (contenu restant à droite) et/ou GAUCHE (déjà défilé) : deux
   classes posées indépendamment par wmFondus() (app.js), chaque combinaison a son propre
   dégradé — un mask-image unique par état, pas de superposition de calques à composer. */
.c-fondu-bord { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.c-fondu-bord-g { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px); mask-image: linear-gradient(90deg, transparent, #000 40px); }
.c-fondu-bord.c-fondu-bord-g { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.c-points-position { display: flex; justify-content: center; gap: 6px; margin-top: 6px; }
.c-points-position i { width: 6px; height: 6px; border-radius: 3px; background: var(--trait-fort); transition: width var(--duree), background var(--duree); }
.c-points-position i.actif { width: 18px; background: var(--encre); }

/* ───────────── Prise en main : bulle d'aide ─────────────
   .c-aide : bulle fermable, montrée tant que l'utilisateur ne l'a pas fermée
             (data-aide="<app>-<sujet>", mémorisée sur l'appareil, composants.js). */

.c-aide {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 12px 6px 12px 14px;
  border-radius: 20px;
  background: var(--accent-teinte);
  color: var(--texte);
  font-size: .9375rem;
  line-height: 1.45;
}
/* Une prise en main qui vaut la peine au bureau devient un pavé bleu encombrant sur un
   écran de poche, surtout au-dessus d'une liste déjà longue. */
@media (max-width: 899px) { .c-aide { display: none; } }
.c-aide-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-pleine); color: var(--accent-texte); }
.c-aide-ic .c-i { width: 19px; height: 19px; }
.c-aide-texte { min-width: 0; padding-top: 6px; }
.c-aide-texte b, .c-aide-texte strong { font-weight: var(--g-fort); }
.c-aide-texte p { margin: 2px 0 0; color: var(--texte-2); }
.c-aide-fermer { width: 44px; height: 44px; margin: -4px 0 -4px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; color: var(--texte-2); cursor: pointer; }
.c-aide-fermer:hover { background: var(--surface-pleine); color: var(--texte); }
.c-aide-fermer .c-i { width: 18px; height: 18px; }
.c-aide--encre { background: var(--contraste); color: var(--sur-contraste); }
.c-aide--encre .c-aide-ic { background: var(--contraste-2); color: var(--ocre); }
.c-aide--encre .c-aide-texte p { color: var(--sur-contraste-2); }
.c-aide--encre .c-aide-fermer { color: var(--sur-contraste-2); }
.c-aide--encre .c-aide-fermer:hover { background: var(--contraste-2); color: var(--sur-contraste); }

/* ───────────── Avatars, raccourcis clavier ───────────── */
.c-avatar--xs { width: 24px; height: 24px; font-size: .625rem; border-width: 1px; letter-spacing: 0; }
.c-avatar--m { width: 36px; height: 36px; font-size: .75rem; }
.c-avatar--l { width: 56px; height: 56px; font-size: 1.0625rem; }
.c-avatars .c-avatar--xs { margin-left: -6px; }
.c-avatars .c-avatar--xs:first-child { margin-left: 0; }
.c-touches { display: inline-flex; gap: 4px; margin-left: auto; }

/* ───────────── Feuille du compte, liste d'actions en feuille ───────────── */
.c-cadre-compte { width: min(440px, 100%); }
.c-compte-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.c-compte-id > div { min-width: 0; }
.c-compte-id .c-surtitre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-liste-actions { display: grid; gap: 8px; }
.c-liste-actions .c-btn { --h: 56px; justify-content: flex-start; font-size: 1rem; }
.c-liste-actions .c-btn[hidden] { display: none; }
.c-liste-actions .c-touches .c-touche { font-size: .75rem; }
.c-compte-version { display: flex; align-items: center; gap: 8px; margin: 16px 4px 0; padding-top: 12px; border-top: 1px solid var(--trait); font-size: .8125rem; color: var(--texte-3); }
.c-compte-version span { font-family: var(--police-mono); font-weight: 500; }

/* ───────────── Formulaires ─────────────
   .c-formulaire : pile de champs ; .c-form-ligne : deux (ou trois) champs côte à côte dès
   600 px. Libellé au-dessus, aide qui dit la règle, erreur qui dit quoi faire. */
.c-formulaire { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; }
.c-formulaire > *, .c-champ-groupe, .c-form-ligne > * { min-width: 0; }
select.c-champ, .c-select select { max-width: 100%; text-overflow: ellipsis; }
.c-form-ligne { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px 14px; }
@media (min-width: 600px) {
  .c-form-ligne { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-form-ligne--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.c-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 14px; }
.c-fieldset > legend { padding: 0; margin-bottom: 4px; }
.c-requis { color: var(--danger); font-weight: var(--g-fort); margin-left: 2px; }
.c-champ-groupe--erreur .c-champ, .c-champ[aria-invalid="true"] { border-color: var(--danger-vif); }
.c-champ[disabled], .c-champ[readonly] { background: var(--creux); color: var(--texte-2); border-color: var(--trait-fort); }
.c-champ[disabled] { cursor: not-allowed; }
select.c-champ { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: linear-gradient(45deg, transparent 50%, var(--texte-2) 50%), linear-gradient(135deg, var(--texte-2) 50%, transparent 50%); background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; cursor: pointer; }
.c-champ-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.c-champ-ligne .c-btn-rond { --cible: 48px; box-shadow: none; }
/* Case en carte : une vérification à cocher, libellé et précision sur deux lignes. */
.c-case--carte { align-items: flex-start; padding: 14px 16px; min-height: 64px; border-radius: 18px; border: 1px solid var(--trait-fort); background: var(--surface-pleine); }
.c-case--carte:has(input:checked) { border-color: var(--encre); box-shadow: inset 0 0 0 1px var(--encre); }
.c-case--carte small { display: block; margin-top: 2px; font-size: .8125rem; font-weight: var(--g-normal); color: var(--texte-3); }

/* Segments d'atelier : choix au doigt ganté (conforme / non conforme, sens d'un mouvement). */
.c-segments--atelier { display: flex; width: 100%; }
.c-segments--atelier .c-segment { flex: 1 1 0; min-width: 0; min-height: 56px; padding: 4px 14px; font-size: 1.0625rem; font-weight: var(--g-fort); line-height: 1.2; white-space: normal; text-align: center; }
.c-segment--succes[aria-pressed="true"], .c-segment--succes.actif { background: var(--succes); color: var(--sur-vif); }
.c-segment--danger[aria-pressed="true"], .c-segment--danger.actif { background: var(--danger); color: var(--sur-vif); }

/* ───────────── Onglets d'un panneau (role="tablist") ─────────────
   Même dessin que les segments plats ; l'onglet choisi est à l'encre. Pour naviguer entre
   les sections d'une app, c'est la pilule du cadre qui sert, pas les onglets. */
.c-onglets {
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: var(--r-pilule);
  background: var(--creux);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.c-onglets::-webkit-scrollbar { display: none; }
.c-onglet {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none;
  min-height: 44px; margin: 0; padding: 0 18px; border: 0; border-radius: var(--r-pilule);
  background: transparent; color: var(--texte-2);
  font-family: var(--police); font-size: .9375rem; font-weight: var(--g-moyen); white-space: nowrap; cursor: pointer;
}
.c-onglet:hover { color: var(--texte); }
.c-onglet[aria-selected="true"], .c-onglet.actif { background: var(--encre); color: var(--sur-encre); }
.c-onglet .c-nb { font-size: .75rem; font-weight: var(--g-fort); padding: 2px 7px; border-radius: 10px; background: var(--surface-pleine); color: var(--texte-2); font-variant-numeric: tabular-nums; }
.c-onglet[aria-selected="true"] .c-nb { background: var(--sur-encre-voile); color: var(--sur-encre); }
.c-onglets--plein .c-onglet { flex: 1 1 0; }
[role="tabpanel"][hidden] { display: none !important; }

/* ───────────── Menu d'actions (bouton « ⋯ » ou « Actions ▾ ») ─────────────
   [data-menu="<id>"] sur le bouton, <div class="c-menu" id="<id>" role="menu" hidden>.
   Ancré sous le bouton ; au téléphone, posé en bas de l'écran comme une feuille. */
.c-menu {
  position: fixed;
  z-index: calc(var(--z-voile) + 5);
  min-width: 232px;
  max-width: min(340px, calc(100vw - 24px));
  max-height: min(480px, calc(100dvh - 24px));
  overflow: auto;
  padding: 8px;
  border-radius: 22px;
  background: var(--surface-pleine);
  border: 1px solid var(--surface-bord);
  box-shadow: var(--ombre-flottante);
  color: var(--texte);
  font-family: var(--police);
  line-height: 1.4;
}
.c-menu[hidden] { display: none; }
.c-menu-titre { margin: 4px 10px 6px; }
.c-menu-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 48px; margin: 0; padding: 0 14px; border: 0; border-radius: 14px;
  background: transparent; color: var(--texte);
  font-family: var(--police); font-size: .9375rem; font-weight: var(--g-moyen); text-align: left; text-decoration: none; cursor: pointer;
}
.c-menu-item:hover, .c-menu-item:focus-visible { background: var(--creux); outline: none; }
.c-menu-item .c-i { color: var(--texte-2); }
.c-menu-item[disabled], .c-menu-item[aria-disabled="true"] { opacity: .42; pointer-events: none; }
.c-menu-item--danger { color: var(--danger); }
.c-menu-item--danger .c-i { color: var(--danger); }
.c-menu-item .c-touches { color: var(--texte-3); }
.c-menu-sep { height: 1px; margin: 6px 8px; background: var(--trait); border: 0; }
@media (max-width: 599px) {
  .c-menu { left: 12px !important; right: 12px !important; top: auto !important; bottom: calc(12px + env(safe-area-inset-bottom)) !important; max-width: none; border-radius: 26px; }
  .c-menu-item { min-height: 52px; font-size: 1rem; }
}

/* ───────────── Barre d'outils d'une liste : recherche + scan, sélecteurs, vue ───────────── */
.c-barre-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 12px; }
.c-barre-outils > .c-espace { flex: 1; }
.c-barre-outils .c-selects { display: flex; gap: 8px; align-items: center; }
.c-recherche { flex: 1 1 260px; max-width: 440px; }
.c-recherche .c-champ { border-radius: var(--r-pilule); background: var(--surface-pleine); }
.c-recherche .c-champ::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.c-recherche .c-champ-suffixe .c-btn-rond { --cible: 44px; box-shadow: none; }
.c-recherche:has(.c-champ-suffixe) .c-champ { padding-right: 56px; }
@media (max-width: 899px) {
  .c-barre-outils .c-recherche { max-width: none; flex-basis: 100%; }
  .c-barre-outils .c-vue { display: none; }
}
@media (max-width: 599px) {
  .c-barre-outils .c-selects { flex: 1; }
  .c-barre-outils .c-selects .c-select { flex: 1; }
  .c-barre-outils .c-selects .c-select select { width: 100%; }
  .c-barre-outils > .c-espace { display: none; }
}

/* Filtres actifs : nombre de résultats, une puce par filtre, « Tout effacer ». */
.c-filtres-actifs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.c-filtres-actifs:empty { display: none; }
.c-filtres-actifs .c-btn { --h: 44px; padding: 0 14px; }
/* Sur téléphone, les puces de filtre actif ne doivent plus se répartir sur plusieurs
   lignes (le nombre de puces dépend de ce que l'utilisateur a choisi, pas de l'écran) :
   une seule rangée qui défile, comme les autres barres d'outils de cette page. */
@media (max-width: 899px) {
  .c-filtres-actifs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .c-filtres-actifs::-webkit-scrollbar { display: none; }
  .c-filtres-actifs > * { flex: none; }
}
.c-resultat { margin-right: 6px; font-size: .875rem; color: var(--texte-2); }
.c-resultat b { color: var(--texte); font-variant-numeric: tabular-nums; }

/* Tuiles-filtres en rangée : 4 au bureau, 2 × 2 en dessous de 760 px. */
.c-tuiles { display: grid; grid-template-columns: repeat(var(--c-tuiles, 4), minmax(0, 1fr)); gap: 14px; margin-bottom: 24px; }
.c-tuiles--3 { --c-tuiles: 3; }
.c-tuile-filtre .c-kpi-lib > .c-lib { display: flex; align-items: center; gap: 8px; min-width: 0; }
@media (max-width: 899px) {
  .c-tuiles { gap: 12px; margin-bottom: 20px; }
  .c-tuile-filtre { min-height: 118px; padding: 16px; }
  .c-tuile-filtre .c-chiffre { font-size: 2.5rem; }
}
@media (max-width: 759px) { .c-tuiles { --c-tuiles: 2; } }
@media (max-width: 599px) {
  .c-tuiles { gap: 10px; margin-bottom: 18px; }
  .c-tuile-filtre { min-height: 0; padding: 14px 14px 12px; gap: 8px; border-radius: 22px; }
  .c-tuile-filtre .c-chiffre { font-size: 2.125rem; }
  .c-tuile-filtre .c-bas, .c-tuile-filtre .c-coche { display: none; }
}

/* ───────────── Tableau dense, en-têtes collants, lignes cliquables ─────────────
   .c-tableau--dense : lignes de 52 px. .c-tableau--collant : en-tête qui reste visible ;
   dans un .c-tableau-cadre--defile (hauteur bornée, défilement propre) ou, sans défilement
   horizontal, dans un .c-tableau-cadre--page (colle sous l'en-tête du cadre).
   tr[data-href] ou tr.c-cliquable : toute la ligne ouvre (composants.js : clic, Entrée). */
.c-tableau-cadre--defile { overflow: auto; max-height: var(--c-tableau-h, calc(100dvh - var(--c-barre-haut-h, 72px) - 180px)); overscroll-behavior: contain; }
.c-tableau-cadre--page { overflow: visible; }
.c-tableau--collant thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-pleine); box-shadow: inset 0 -1px 0 var(--trait); border-bottom-color: transparent; }
.c-tableau-cadre--page .c-tableau--collant thead th { top: var(--c-barre-haut-h, 0px); }
.c-tableau--dense th { padding: 10px 12px; }
.c-tableau--dense td { height: 52px; padding: 6px 12px; }
.c-tableau tbody tr[data-href]:focus-visible, .c-tableau tbody tr.c-cliquable:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.c-tableau th[aria-sort] { cursor: pointer; }
.c-tableau .c-tri { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: -12px 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.c-tableau th[aria-sort="ascending"] .c-tri .c-i { transform: rotate(180deg); }
.c-tableau th:not([aria-sort]) .c-tri .c-i { opacity: .35; }
.c-tableau .c-tri .c-i { width: 14px; height: 14px; }
.c-tableau td.c-num, .c-tableau th.c-num { text-align: right; font-variant-numeric: tabular-nums; }
.c-tableau .c-cellule-titre b, .c-tableau .c-cellule-titre strong { display: block; font-weight: var(--g-fort); line-height: 1.3; }
.c-tableau .c-cellule-titre .c-code { display: block; }
.c-tableau .c-cellule-titre small { display: block; font-size: .8125rem; color: var(--texte-3); }
/* Colonnes secondaires qui s'effacent quand la place manque. */
@media (max-width: 1279px) { .c-masque-sous-1280 { display: none !important; } }
@media (max-width: 1099px) { .c-masque-sous-1100 { display: none !important; } }

/* Le même tableau passe en cartes sous 820 px (.c-tableau--cartes) : chaque ligne devient
   une carte, chaque cellule une ligne « libellé · valeur » (data-lib sur le <td>).
   .c-cellule-titre ouvre la carte sans libellé, .c-cellule-actions la ferme à droite,
   .c-masque-cartes disparaît. Une ligne .c-lisere--danger / --alerte / --info garde son liseré.
   Pas de backdrop-filter par carte : posées sur le fond dégradé, elles n'auraient rien à
   flouter, et une liste de quelques centaines de cartes floutées fait tomber Safari sur iPhone
   (mémoire graphique épuisée, l'onglet se recharge en boucle). */
@media (max-width: 819px) {
  .c-tableau-cadre:has(> .c-tableau--cartes) { overflow: visible; max-height: none; border-radius: 0; }
  .c-carte:has(> .c-tableau-cadre > .c-tableau--cartes), .c-carte:has(> .c-tableau--cartes) { padding: 0; background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .c-tableau--cartes, .c-tableau--cartes tbody { display: block; }
  .c-tableau--cartes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .c-tableau--cartes tbody { display: grid; gap: 10px; }
  .c-tableau--cartes tbody tr {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 14px 16px 12px 18px;
    border-radius: 22px;
    background: var(--surface);
    border: 1px solid var(--surface-bord);
    box-shadow: var(--reflet), var(--ombre-1), inset 4px 0 0 var(--lisere, transparent);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .c-tableau--cartes tbody tr:hover { background: var(--surface); }
  .c-tableau--cartes tbody tr.selection, .c-tableau--cartes tbody tr[aria-selected="true"] { background: var(--surface-pleine); box-shadow: var(--reflet), var(--ombre-1), inset 0 0 0 2px var(--accent); }
  /* En carte, le contour carré du focus clavier (outline, pensé pour une ligne de
     tableau rectangulaire) tombe en grande partie sous la case à cocher positionnée en
     absolu et sous les coins arrondis — il n'en reste qu'un éclat qui semble posé au
     hasard. Un anneau intérieur, qui épouse la forme de la carte, le remplace. */
  .c-tableau--cartes tbody tr[data-href]:focus-visible, .c-tableau--cartes tbody tr.c-cliquable:focus-visible {
    outline: none; box-shadow: var(--reflet), var(--ombre-1), inset 0 0 0 2px var(--accent);
  }
  .c-tableau--cartes tbody tr.selection td:first-child, .c-tableau--cartes tbody tr[aria-selected="true"] td:first-child { box-shadow: none; }
  .c-tableau--cartes td { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: auto; min-height: 0; padding: 2px 0; border: 0; text-align: right; }
  .c-tableau--cartes td[data-lib]::before { content: attr(data-lib); flex: none; max-width: 48%; font-size: .8125rem; font-weight: var(--g-fort); color: var(--texte-3); text-align: left; }
  /* Une valeur qui porte une barre de niveau (StockPilot…) ne tient pas à côté de son
     libellé sans l'écraser : le libellé passe au-dessus, la barre garde toute la largeur
     de la carte au lieu d'un étroit reste de ligne. */
  .c-tableau--cartes td[data-lib]:has(.c-niveau) { flex-direction: column; align-items: stretch; gap: 6px; text-align: left; }
  .c-tableau--cartes td[data-lib]:has(.c-niveau)::before { max-width: none; }
  .c-tableau--cartes td.c-cellule-titre { display: block; order: -1; padding-bottom: 4px; text-align: left; font-size: 1.0625rem; }
  .c-tableau--cartes td.c-cellule-titre::before { content: none; }
  .c-tableau--cartes td.c-cellule-actions { justify-content: flex-end; margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--trait-fort); }
  .c-tableau--cartes td.c-cellule-actions::before { content: none; }
  .c-tableau--cartes .c-masque-cartes { display: none !important; }
  .c-tableau--cartes tr.c-groupe-ligne { display: block; padding: 14px 4px 2px; background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .c-tableau--cartes tr.c-groupe-ligne td { display: block; padding: 0; text-align: left; }
  .c-tableau--cartes tr.c-groupe-ligne td::before { content: none; }
}
@media (min-width: 600px) and (max-width: 819px) {
  .c-tableau--cartes tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-tableau--cartes tr.c-groupe-ligne { grid-column: 1 / -1; }
}
@media (min-width: 820px) {
  .c-tableau tr.c-lisere--danger, .c-tableau tr.c-lisere--alerte, .c-tableau tr.c-lisere--info { box-shadow: none; }
  .c-tableau tr.c-lisere--danger td:first-child, .c-tableau tr.c-lisere--alerte td:first-child, .c-tableau tr.c-lisere--info td:first-child { box-shadow: inset 3px 0 0 var(--lisere); }
}

/* Carte de liste (au téléphone, quand une app rend ses lignes en cartes) : code et statut
   en haut, désignation, puis mesure + jauge et actions sous un filet pointillé. */
.c-cartes { display: grid; gap: 10px; }
@media (min-width: 600px) { .c-cartes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.c-carte-ligne { display: grid; gap: 10px; padding: 16px 16px 14px 18px; border-radius: 22px; }
.c-carte-ligne-haut { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-width: 0; }
.c-carte-ligne-haut .c-code { font-family: var(--police-mono); font-size: .8125rem; font-weight: 500; color: var(--texte-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-carte-ligne-nom { font-size: 1.0625rem; font-weight: var(--g-fort); line-height: 1.3; }
.c-carte-ligne-nom small { display: block; font-size: .8125rem; font-weight: var(--g-normal); color: var(--texte-3); }
.c-carte-ligne-bas { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: end; padding-top: 12px; border-top: 1px dashed var(--trait-fort); }
.c-carte-ligne-bas .c-meta { margin: 6px 0 0; font-size: .8125rem; color: var(--texte-3); }
.c-carte-ligne-bas .c-meta b { color: var(--texte-2); font-weight: var(--g-fort); }
.c-carte-ligne .c-actions-ligne { gap: 10px; }
a.c-carte-ligne, .c-carte-ligne[data-href] { cursor: pointer; }

/* Valeur mesurée dans une liste : nombre en gras, unité et seuil en petit. */
.c-valeur { display: flex; align-items: baseline; gap: 5px; font-variant-numeric: tabular-nums; }
.c-valeur b { font-size: 1.0625rem; font-weight: 650; }
.c-valeur span { font-size: .8125rem; color: var(--texte-3); }
.c-valeur--l b { font-size: 1.875rem; letter-spacing: -.03em; }
.c-valeur + .c-niveau { margin-top: 7px; }
.c-niveau--succes > i { background: var(--succes-vif); }
.c-niveau--info > i { background: var(--info-vif); }
.c-niveau--sans-seuil::after { display: none; }

/* Pied de liste : compte et pagination ; au téléphone, « Afficher plus ». */
.c-liste-pied { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 14px 8px 4px 16px; border-top: 1px solid var(--trait); font-size: .875rem; color: var(--texte-2); }
.c-pagination { display: flex; gap: 6px; align-items: center; }
.c-pagination .c-btn-rond { box-shadow: none; }
.c-page-n { min-width: 44px; height: 44px; padding: 0 6px; border: 0; border-radius: 22px; display: grid; place-items: center; background: transparent; color: var(--texte); font-family: var(--police); font-size: .9375rem; font-weight: var(--g-fort); font-variant-numeric: tabular-nums; text-decoration: none; cursor: pointer; }
.c-page-n:hover { background: var(--creux); }
.c-page-n.actif, .c-page-n[aria-current="page"] { background: var(--encre); color: var(--sur-encre); }
span.c-page-n { color: var(--texte-3); cursor: default; }
span.c-page-n:hover { background: transparent; }
.c-liste-plus { display: flex; justify-content: center; padding: 18px 0 0; }
@media (max-width: 599px) {
  .c-liste-pied { justify-content: center; padding-left: 8px; }
  .c-pagination .c-page-n:not(.actif):not([aria-current="page"]) { display: none; }
}

/* ───────────── Fiche de détail : à droite dès 1360 px, en tiroir en dessous ─────────────
   <div class="c-contenu"> liste </div> + <aside class="c-carte c-carte-pleine c-fiche" id="…">.
   Sous 1360 px, wmOuvrir('<id>') la fait glisser depuis la droite (voile, Échap, focus). */
.c-contenu { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.c-contenu > * { min-width: 0; }
@media (min-width: 1360px) { .c-contenu:has(> .c-fiche) { grid-template-columns: minmax(0, 1fr) 384px; } }
.c-fiche { padding: 22px; display: grid; gap: 20px; align-content: start; }
.c-fiche-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.c-fiche-tete h2 { margin: 4px 0 0; font-size: 1.5rem; font-weight: var(--g-normal); letter-spacing: -.02em; line-height: 1.15; }
.c-fiche-tete .c-code { font-family: var(--police-mono); font-size: .8125rem; font-weight: 500; color: var(--texte-2); }
.c-fiche-pied { display: flex; gap: 8px; }
.c-fiche-pied .c-btn { flex: 1; --h: 48px; padding: 0 12px; }
.c-fiche-fermer { display: none; }
.c-fiche-voile { position: fixed; inset: 0; z-index: calc(var(--z-voile) - 1); background: var(--voile); opacity: 0; pointer-events: none; transition: opacity .2s; }
.c-fiche-voile.ouvert { opacity: 1; pointer-events: auto; }
@media (max-width: 1359px) {
  .c-fiche {
    position: fixed; top: 12px; right: 12px; bottom: 12px; z-index: var(--z-voile);
    width: min(420px, calc(100vw - 24px)); overflow: auto; overscroll-behavior: contain;
    transform: translateX(calc(100% + 24px)); visibility: hidden;
    transition: transform .25s var(--courbe), visibility 0s linear .25s;
    box-shadow: var(--ombre-flottante);
  }
  .c-fiche.ouvert { transform: none; visibility: visible; transition: transform .25s var(--courbe), visibility 0s; }
  .c-fiche-fermer { display: inline-grid; }
}
@media (max-width: 599px) {
  .c-fiche { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 92dvh; border-radius: 28px 28px 0 0; padding-bottom: calc(22px + env(safe-area-inset-bottom)); transform: translateY(105%); }
}

/* Panneau latéral en feuille : .c-voile.c-voile--tiroir > .c-panneau. */
.c-voile--tiroir { place-items: stretch end; padding: 12px; overflow: hidden; }
.c-panneau {
  width: min(460px, 100%);
  height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: var(--r-xl);
  background: var(--surface-pleine);
  border: 1px solid var(--surface-bord);
  box-shadow: var(--ombre-flottante);
  padding: 24px;
  color: var(--texte);
  transform: translateX(40px);
  transition: transform .25s var(--courbe);
}
.c-voile.ouvert .c-panneau { transform: none; }
.c-panneau-l { width: min(640px, 100%); }
@media (max-width: 599px) {
  .c-voile--tiroir { place-items: end stretch; padding: 0; }
  .c-panneau, .c-panneau-l { width: 100%; height: auto; max-height: 92dvh; border-radius: 28px 28px 0 0; padding: 22px 20px calc(20px + env(safe-area-inset-bottom)); transform: translateY(40px); }
  .c-voile--tiroir .c-poignee { display: block; }
}

/* Paires libellé / valeur (fiche, feuille). */
.c-infos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 0; }
.c-infos dt { font-size: .75rem; font-weight: var(--g-fort); letter-spacing: .06em; text-transform: uppercase; color: var(--texte-3); }
.c-infos dd { margin: 3px 0 0; font-size: .9375rem; font-weight: var(--g-moyen); overflow-wrap: anywhere; }
.c-infos--1 { grid-template-columns: minmax(0, 1fr); }

/* Liste à filets pointillés : mouvements, activité, lots, documents courts. */
.c-liste { display: grid; margin: 0; padding: 0; list-style: none; }
.c-liste > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 56px; padding: 8px 0; border-top: 1px dashed var(--trait-fort); font-size: .9375rem; }
.c-liste > li:first-child { border-top: 0; }
.c-liste small { display: block; font-size: .8125rem; color: var(--texte-3); }
.c-liste .c-q { font-weight: var(--g-fort); font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-liste .c-q--sortie { color: var(--danger); }
.c-liste .c-q--entree { color: var(--succes); }
.c-liste .c-sens { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--creux); }
.c-liste .c-sens .c-i { width: 16px; height: 16px; }

/* Liste dans la carte d'encre (à faire, actions qui attendent). */
.c-liste-encre { display: grid; margin: 0; padding: 0; list-style: none; }
.c-liste-encre > li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 56px; padding: 8px 0; }
.c-liste-encre > li + li { border-top: 1px solid var(--contraste-bord); }
.c-liste-encre .c-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--contraste-2); color: var(--sur-contraste); }
.c-liste-encre .c-ic .c-picto { color: var(--sur-contraste); }
.c-liste-encre .c-t { font-weight: var(--g-moyen); font-size: .9375rem; line-height: 1.3; }
.c-liste-encre .c-s { font-size: .8125rem; color: var(--sur-contraste-2); }
.c-liste-encre a { color: inherit; text-decoration: none; }

/* ───────────── Mini-histogramme (sorties par jour, gâchées par semaine) ─────────────
   <div class="c-histo" style="--n:14" role="img" aria-label="…"> des <i style="height:62%">,
   .c-histo-hors (jour chômé, hachuré), .c-histo-auj (aujourd'hui, à l'encre). */
.c-histo { display: grid; grid-template-columns: repeat(var(--n, 14), minmax(0, 1fr)); gap: 5px; align-items: end; height: var(--c-histo-h, 88px); padding-bottom: 2px; border-bottom: 1px solid var(--trait); }
.c-histo > i { display: block; min-height: 6px; border-radius: 5px 5px 2px 2px; background: var(--trait-fort); }
.c-histo > i.c-histo-hors { background-color: transparent; background-image: repeating-linear-gradient(-45deg, var(--hachure) 0 1.5px, transparent 1.5px 5px); border: 1px solid var(--trait); }
.c-histo > i.c-histo-auj { background: var(--encre); }
.c-histo > i.c-histo-alerte { background: var(--alerte-vif); }
.c-histo-axes { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; font-size: .8125rem; color: var(--texte-3); }
.c-histo-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; }

/* ───────────── Badges complémentaires ───────────── */
/* Échéance : icône horloge + date ; --alerte quand elle approche, --danger dépassée. */
.c-badge--echeance { background: transparent; border: 1px solid var(--trait-fort); color: var(--texte-2); }
.c-badge--echeance::before { display: none; }
.c-badge--echeance .c-i { width: 14px; height: 14px; stroke-width: 2; }
.c-badge--echeance.c-badge--alerte { border-color: transparent; background: var(--alerte-teinte); color: var(--alerte); }
.c-badge--echeance.c-badge--danger { border-color: transparent; background: var(--danger-teinte); color: var(--danger); }
.c-badge--echeance.c-badge--succes { border-color: transparent; background: var(--succes-teinte); color: var(--succes); }
/* Alerte : rupture, hors tolérance, action requise (texte sur la brique vive). */
.c-badge--alerte-forte { background: var(--danger-vif); color: var(--sur-vif); }
.c-badge--alerte-forte::before { background: currentColor; }

/* ───────────── Étapes libellées d'un parcours ─────────────
   <ol class="c-etapes"> de <li class="c-etape fait|courant|a-venir"> : numéro (ou coche),
   nom, cible, valeur. L'étape en cours est à l'encre, numéro ocre ; aria-current="step".
   .c-etapes--rail : la même liste en rail horizontal (tablette, téléphone). */
.c-etapes { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.c-etape { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; min-height: 58px; margin: 0; padding: 6px 10px; border: 0; border-radius: 16px; background: transparent; color: var(--texte); font-family: var(--police); text-align: left; }
button.c-etape, a.c-etape { cursor: pointer; text-decoration: none; }
button.c-etape:hover, a.c-etape:hover { background: var(--creux-doux); }
.c-etape-n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--trait-fort); font-size: .8125rem; font-weight: 700; color: var(--texte-2); font-variant-numeric: tabular-nums; }
.c-etape-n .c-i { width: 16px; height: 16px; stroke-width: 2.6; }
.c-etape-nom { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: var(--g-fort); font-size: .9375rem; line-height: 1.2; }
.c-etape-cible { display: block; font-size: .8125rem; color: var(--texte-3); font-variant-numeric: tabular-nums; }
.c-etape-val { font-weight: 650; font-size: .875rem; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.c-etape.fait .c-etape-n { background: var(--succes-teinte); border-color: transparent; color: var(--succes); }
.c-etape.fait .c-etape-val { color: var(--succes); }
.c-etape.courant, .c-etape[aria-current="step"] { background: var(--encre); color: var(--sur-encre); }
.c-etape.courant .c-etape-n, .c-etape[aria-current="step"] .c-etape-n { background: var(--ocre); border-color: var(--ocre); color: #1C1B18; }
.c-etape.courant .c-etape-cible, .c-etape[aria-current="step"] .c-etape-cible { color: var(--sur-encre-2); }
.c-etape.a-venir .c-etape-nom { color: var(--texte-2); font-weight: var(--g-moyen); }
.c-etapes--rail { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gouttiere) * -1); padding: 2px var(--gouttiere); }
.c-etapes--rail::-webkit-scrollbar { display: none; }
.c-etapes--rail .c-etape { flex: none; width: auto; min-height: 56px; grid-template-columns: 32px auto; padding: 6px 16px 6px 8px; background: var(--surface); border: 1px solid var(--surface-bord); box-shadow: var(--reflet); }
.c-etapes--rail .c-etape-nom { display: block; white-space: nowrap; }
.c-etapes--rail .c-etape-val { display: none; }
.c-etapes--rail .c-etape.courant, .c-etapes--rail .c-etape[aria-current="step"] { background: var(--encre); border-color: var(--encre); }

/* Jalons : suivi chronologique (expédition, livraison, signature). */
.c-jalons { display: grid; margin: 0; padding: 0; list-style: none; }
.c-jalon { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; padding: 10px 0 18px; }
.c-jalon::before { content: ""; position: absolute; left: 19px; top: 50px; bottom: -2px; width: 2px; background: var(--trait-fort); }
.c-jalon:last-child::before { display: none; }
.c-jalon-rond { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--creux); color: var(--texte-3); }
.c-jalon-rond .c-i { width: 19px; height: 19px; }
.c-jalon.fait .c-jalon-rond { background: var(--encre); color: var(--sur-encre); }
.c-jalon.fait::before { background: var(--encre); }
.c-jalon.actif .c-jalon-rond { background: var(--ocre); color: #1C1B18; box-shadow: 0 0 0 6px var(--ocre-teinte); }
.c-jalon-t { display: block; font-weight: var(--g-fort); font-size: 1.0625rem; line-height: 1.3; }
.c-jalon-s { display: block; margin-top: 2px; font-size: .875rem; line-height: 1.4; color: var(--texte-2); }
.c-jalon-h { padding-top: 2px; font-weight: var(--g-fort); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.c-jalon.a-venir .c-jalon-t { color: var(--texte-2); }

/* ───────────── Saisie d'atelier : affichage et pavé numérique 3 × 4 ───────────── */
.c-affichage { display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; min-width: 0; min-height: 76px; padding: 8px 18px; border-radius: 18px; border: 2px solid var(--encre); background: var(--surface-pleine); }
.c-affichage .c-mesure { font-size: 3rem; }
.c-affichage .c-curseur { width: 3px; height: 40px; margin-left: -4px; align-self: center; border-radius: 2px; background: var(--ocre); animation: c-clignote 1.1s steps(1) infinite; }
.c-affichage .c-unite-a { font-size: 1.25rem; font-weight: var(--g-fort); color: var(--texte-2); }
.c-affichage:focus-within { box-shadow: 0 0 0 4px var(--focus); }
.c-affichage-champ { flex: 1 1 auto; width: 0; min-width: 0; min-height: 48px; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: right; outline: none; }
@keyframes c-clignote { 50% { opacity: 0; } }
.c-pave { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.c-touche-pave {
  min-height: 60px; margin: 0; padding: 0;
  display: grid; place-items: center;
  border-radius: 18px; border: 1px solid var(--trait); background: var(--surface-pleine);
  box-shadow: 0 1px 0 var(--trait-fort);
  color: var(--texte); font-family: var(--police); font-size: 1.75rem; font-weight: var(--g-moyen); font-variant-numeric: tabular-nums;
  cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none;
  transition: background .12s, transform .12s;
}
.c-touche-pave:active { transform: scale(.96); background: var(--creux); }
.c-touche-pave .c-i { width: 28px; height: 28px; }
.c-touche-pave--fn { background: var(--creux); border-color: transparent; box-shadow: none; }
@media (min-width: 1280px) { .c-touche-pave { min-height: 64px; } }
@media (max-width: 599px) {
  .c-affichage { min-height: 56px; padding: 4px 16px; }
  .c-affichage .c-mesure { font-size: 2.125rem; }
  .c-affichage .c-curseur { height: 30px; }
  .c-touche-pave { min-height: 56px; font-size: 1.5rem; border-radius: 16px; }
}

/* ───────────── Zone de dépôt hachurée ─────────────
   <label class="c-depot" data-depot> + <input type="file" class="c-visuellement-cache"> :
   un clic ouvre le choix de fichiers, un glisser-déposer surligne la zone (.survol) et émet
   l'événement « depot » (detail.fichiers) ; composants.js. */
.c-depot {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 10px;
  min-height: 220px;
  padding: 32px 24px;
  border-radius: var(--r-l);
  border: 2px dashed var(--trait-champ);
  background-color: var(--surface-pleine);
  background-image: repeating-linear-gradient(-45deg, var(--creux-doux) 0 1.5px, transparent 1.5px 9px);
  color: var(--texte-2);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--duree), background-color var(--duree);
}
.c-depot:hover { border-color: var(--texte-3); }
.c-depot:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.c-depot.survol { border-color: var(--accent); background-color: var(--accent-teinte); color: var(--texte); }
.c-depot-rond { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--surface-bord); box-shadow: var(--reflet), var(--ombre-1); color: var(--texte); }
.c-depot-rond .c-i { width: 28px; height: 28px; }
.c-depot-titre { font-size: 1.25rem; font-weight: var(--g-moyen); color: var(--texte); }
.c-depot-aide { max-width: 44ch; font-size: .875rem; line-height: 1.45; }
.c-depot .c-btn { margin-top: 6px; pointer-events: none; }

/* Zone de signature au doigt (état vide pointillé, invite centrée). */
.c-signature { position: relative; height: 168px; border-radius: 18px; border: 1.5px dashed var(--trait-champ); background: var(--surface-pleine); overflow: hidden; touch-action: none; }
.c-signature canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
.c-signature-invite { position: absolute; inset: 0 0 30px; display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--texte-3); font-size: .9375rem; pointer-events: none; }
.c-signature-ligne { position: absolute; left: 18px; right: 18px; bottom: 26px; border-top: 1px solid var(--trait-fort); pointer-events: none; }

/* ───────────── Bande hachurée : absence, indisponibilité, hors plage ───────────── */
.c-bande {
  display: flex; align-items: center; gap: 6px;
  min-height: 30px; padding: 0 10px; border-radius: 10px;
  border: 1px solid var(--trait-fort);
  background-image: repeating-linear-gradient(-45deg, var(--hachure) 0 1.5px, transparent 1.5px 6px);
  color: var(--texte-2); font-size: .8125rem; font-weight: var(--g-fort);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.c-bande .c-i { width: 15px; height: 15px; flex: none; }
.c-bande--l { min-height: 44px; padding: 0 14px; border-radius: 14px; font-size: .875rem; }

/* ───────────── États : chargement (squelette), erreur ───────────── */
.c-squelette { display: grid; gap: 10px; }
.c-squelette-ligne, .c-squelette-bloc, .c-squelette-rond {
  display: block;
  border-radius: 7px;
  background: linear-gradient(90deg, var(--creux) 25%, var(--surface-pleine) 50%, var(--creux) 75%);
  background-size: 200% 100%;
  animation: ib-shimmer 1.4s infinite;
}
.c-squelette-ligne { height: 12px; width: 100%; }
.c-squelette-ligne:nth-child(3n) { width: 62%; }
.c-squelette-ligne--titre { height: 22px; width: 46%; border-radius: 9px; }
.c-squelette-bloc { height: var(--h, 120px); border-radius: var(--r-l); }
.c-squelette-rond { width: 40px; height: 40px; border-radius: 50%; }
.c-squelette-carte { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px 14px; align-items: center; padding: 14px 4px; }
.c-squelette-carte .c-squelette-rond { grid-row: span 2; }
@media (prefers-reduced-motion: reduce) { .c-squelette-ligne, .c-squelette-bloc, .c-squelette-rond { animation: none; } }
/* Valeur pas encore arrivée, dans une ligne de texte ou à la place d'un grand chiffre : un
   reflet de la taille de la valeur attendue (--l : largeur), sur la hauteur de la ligne. */
.c-squelette-mot {
  /* Marges : le reflet occupe exactement une ligne de texte (1lh), même seul dans une ligne
     flexible ou une pastille — sinon la ligne s'affine en attendant et regrandit à l'arrivée. */
  display: inline-block; width: var(--l, 3.5em); height: .78em; vertical-align: top; border-radius: .22em;
  margin-block: calc((1lh - .78em) / 2);
  background: linear-gradient(90deg, var(--creux) 25%, var(--surface-pleine) 50%, var(--creux) 75%);
  background-size: 200% 100%; animation: ib-shimmer 1.4s infinite;
}
/* Compte du titre, déjà surélevé : le reflet reste sur sa ligne de base, là où le nombre
   s'affichera (aligné en haut, il remonterait jusqu'au surtitre). Hauteur du titre inchangée. */
.c-compte .c-squelette-mot { vertical-align: baseline; margin-block: 0; }
/* Sur fond encre (tuile choisie, carte encre) : le même reflet, dans les teintes du fond. */
.c-tuile-filtre[aria-pressed="true"] .c-squelette-mot, .c-carte-encre .c-squelette-mot,
.c-carte-encre .c-squelette-ligne, .c-carte-encre .c-squelette-rond, .c-carte-encre .c-squelette-bloc {
  background: linear-gradient(90deg, color-mix(in srgb, var(--sur-encre) 10%, transparent) 25%, color-mix(in srgb, var(--sur-encre) 22%, transparent) 50%, color-mix(in srgb, var(--sur-encre) 10%, transparent) 75%);
  background-size: 200% 100%;
}
/* …sauf dans une pastille claire posée sur l'encre (onglet choisi) : le reflet clair. */
.c-carte-encre [aria-pressed="true"] .c-squelette-mot {
  background: linear-gradient(90deg, var(--creux) 25%, var(--surface-pleine) 50%, var(--creux) 75%);
  background-size: 200% 100%;
}
/* Arrivée d'une valeur ou d'un bloc : fondu court, sans rien pousser (transform seulement). */
.c-arrive { animation: c-arrive .5s cubic-bezier(.2, .7, .2, 1) backwards; }
@keyframes c-arrive { from { opacity: 0; transform: translateY(5px); } }
/* Nombre qui défile (WMNombre, composants.js) : la valeur finale, invisible, tient la largeur. */
.c-nombre { display: inline-grid; font-variant-numeric: tabular-nums; }
.c-nombre > .c-nombre-fant, .c-nombre > .c-nombre-val { grid-area: 1 / 1; }
.c-nombre-fant { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .c-squelette-mot, .c-arrive { animation: none; } }

.c-chargement { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 120px; padding: 24px; color: var(--texte-2); font-size: .9375rem; animation: c-chargement-arrive .3s ease-out .25s both; }
/* Un chargement bref ne fait pas clignoter de roue : le bloc n'apparaît qu'après 250 ms. */
@keyframes c-chargement-arrive { from { opacity: 0; } to { opacity: 1; } }
/* Roue : un arc d'encre (couleur du texte autour) qui s'efface en traîne. */
.c-roue {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 10%, color-mix(in srgb, currentColor 14%, transparent) 26%, currentColor 90%, transparent 90%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.6px), #000 calc(100% - 2.6px + .5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.6px), #000 calc(100% - 2.6px + .5px));
  animation: c-roue .85s linear infinite;
}
@keyframes c-roue { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .c-roue { animation-duration: 2.4s; } .c-chargement { animation: none; } }

.c-vide h3, .c-vide .c-titre-carte { margin: 0; }
.c-vide--erreur .c-vide-motif { border-color: color-mix(in srgb, var(--danger-vif) 55%, transparent); color: var(--danger); background-image: repeating-linear-gradient(-45deg, var(--danger-teinte) 0 1.5px, transparent 1.5px 7px); }
.c-vide--erreur .c-vide-motif .c-i { width: 34px; height: 34px; }
.c-vide--compact { padding: 24px 16px; gap: 8px; }
.c-vide--compact .c-vide-motif { width: 64px; height: 64px; }
.c-vide--compact .c-vide-motif .c-picto { width: 32px; height: 32px; }

/* Bandeau d'information dans un écran (sauvegarde hors ligne, droits limités…). */
.c-bandeau { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px 12px 16px; border-radius: 18px; background: var(--info-teinte); color: var(--texte); font-size: .9375rem; line-height: 1.4; }
.c-bandeau > .c-i { color: var(--info); }
.c-bandeau--alerte { background: var(--alerte-teinte); }
.c-bandeau--alerte > .c-i { color: var(--alerte); }
.c-bandeau--danger { background: var(--danger-teinte); }
.c-bandeau--danger > .c-i { color: var(--danger); }
.c-bandeau--succes { background: var(--succes-teinte); }
.c-bandeau--succes > .c-i { color: var(--succes); }

/* ───────────── Barre d'action collante (téléphone) : une phrase, un bouton ocre ───────────── */
.c-barre-action {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-pied);
  display: flex; align-items: center; gap: 12px;
  padding: 12px max(var(--gouttiere), env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(var(--gouttiere), env(safe-area-inset-left));
  background: var(--contraste); color: var(--sur-contraste);
  border-top: 1px solid var(--contraste-bord);
  box-shadow: 0 -18px 40px -24px rgba(0, 0, 0, .45);
  font-family: var(--police);
}
.c-barre-action .c-phrase { flex: 1; min-width: 0; font-size: .875rem; line-height: 1.3; color: var(--sur-contraste-2); }
.c-barre-action .c-phrase b { display: block; color: var(--sur-contraste); font-size: 1rem; }
@media (min-width: 900px) { .c-barre-action--mobile { display: none; } }

/* ───────────── Visibilité par largeur ───────────── */
@media (max-width: 899px) { .c-seulement-large { display: none !important; } }
@media (min-width: 900px) { .c-seulement-mobile { display: none !important; } }
@media (max-width: 599px) { .c-cache-xs { display: none !important; } }

/* ───────────── Mouvement (composants.js) ───────────── */
/* Segments : le fond d'encre est un seul calque qui glisse vers le segment actif. */
.c-segments { position: relative; }
.c-segments.c-curseur::before {
  content: '';
  position: absolute; left: 0; top: 0; z-index: 0;
  width: var(--cw, 0); height: var(--ch, 0);
  transform: translate(var(--cx, 0), var(--cy, 0));
  border-radius: var(--r-pilule);
  background: var(--encre);
  pointer-events: none;
  transition: transform .42s var(--courbe), width .42s var(--courbe), height .42s var(--courbe);
}
.c-segments.c-curseur-init::before { transition: none; }
.c-segments.c-curseur > .c-segment { position: relative; z-index: 1; transition: color .42s var(--courbe), background var(--duree) var(--courbe); }
.c-segments.c-curseur > .c-segment.actif,
.c-segments.c-curseur > .c-segment[aria-current="page"],
.c-segments.c-curseur > .c-segment[aria-pressed="true"] { background: transparent; }

/* Défilant : une seule ligne, jamais de retour à la ligne ; si le contenu est plus large,
   il va et vient doucement (pause aux extrémités et au survol), bords estompés. */
@property --defile-g { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --defile-d { syntax: '<length>'; inherits: false; initial-value: 0px; }
.c-defilant { display: block; min-width: 0; overflow: hidden; white-space: nowrap; }
.c-defilant > .c-defilant-piste { display: inline-flex; align-items: center; flex-wrap: nowrap; vertical-align: top; }
.c-defilant.deborde {
  --defile-d: 28px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--defile-g), #000 calc(100% - var(--defile-d)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--defile-g), #000 calc(100% - var(--defile-d)), transparent 100%);
  animation: c-defile-bords var(--defile-duree, 8s) ease-in-out infinite alternate;
}
.c-defilant.deborde > .c-defilant-piste { animation: c-defile var(--defile-duree, 8s) ease-in-out infinite alternate; }
.c-defilant.deborde:hover, .c-defilant.deborde:hover > .c-defilant-piste,
.c-defilant.deborde:focus-within, .c-defilant.deborde:focus-within > .c-defilant-piste { animation-play-state: paused; }
@keyframes c-defile { 0%, 14% { transform: translateX(0); } 86%, 100% { transform: translateX(var(--defile, 0px)); } }
@keyframes c-defile-bords { 0%, 14% { --defile-g: 0px; --defile-d: 28px; } 20%, 80% { --defile-g: 28px; --defile-d: 28px; } 86%, 100% { --defile-g: 28px; --defile-d: 0px; } }
@media (prefers-reduced-motion: reduce) {
  .c-defilant { overflow-x: auto; scrollbar-width: none; }
  .c-defilant.deborde, .c-defilant.deborde > .c-defilant-piste { animation: none; -webkit-mask-image: none; mask-image: none; }
}