` pour lui adjoindre une note. `:not(.eqm-chk)` protège les cases à
cocher, qui ont leur propre composant (§17) et sont en ligne, pas en colonne. */
.g-filters label:not(.eqm-chk) {
display: flex; flex-direction: column; gap: 6px; min-width: 0;
font-size: 13px; font-weight: 600; color: var(--slate-700);
}
.g-filters input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.g-filters select {
width: 100%; padding: 10px 13px; border: 1.5px solid var(--slate-200);
border-radius: 11px; font-family: inherit; font-size: 14px; font-weight: 500;
background: #fff; color: var(--slate-800);
transition: border-color .15s ease, box-shadow .15s ease;
}
.g-filters input:hover, .g-filters select:hover { border-color: var(--slate-300); }
.g-filters input:focus, .g-filters select:focus {
outline: none; border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12);
}
/* Même chevron que partout ailleurs (cf. « UI POLISH GLOBAL » plus haut) :
un select natif non habillé jure à côté des champs texte voisins. */
.g-filters select {
-webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 11px center;
padding-right: 36px;
}
.g-filters input[type="date"]::-webkit-calendar-picker-indicator {
cursor: pointer; opacity: .5; transition: opacity .15s;
}
.g-filters input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }
/* Le bouton ne porte pas de libellé au-dessus : sans cette hauteur il flotte
au-dessus de la ligne des champs au lieu de s'aligner dessus. Et `justify-self`
l'empêche de s'étirer sur toute une colonne `1fr` — il deviendrait alors la
chose la plus large de l'écran, avant les données (constat de l'écran des
factures de prélèvement, qui compensait par un `
` enveloppant). */
.g-filters > .g-btn, .g-filters > div > .g-btn { height: 42px; justify-self: start; }
.g-filters > .g-btn { align-self: end; }
/* Le champ de RECHERCHE merite deux colonnes : c'est celui ou l'on tape une
phrase, la ou les voisins portent une date ou un choix. A largeur egale, il
tronque le nom du client des le premier mot. */
.g-filters .g-f-grow { grid-column: span 2; }
@media (max-width: 640px) { .g-filters .g-f-grow { grid-column: auto; } }
.g-filters .g-btn:not(.g-btn-ghost):not(.g-btn-danger):not(.g-btn-primary) {
color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-dark));
box-shadow: 0 6px 16px rgba(var(--primary-rgb), .26);
}
.g-filters .g-btn:not(.g-btn-ghost):not(.g-btn-danger):hover { transform: translateY(-1px); }
/* --- Tuiles de chiffres clés ------------------------------------------------
Variante compacte de `.g-stat` (sans badge d'icône), pour les bandeaux de
six à huit indicateurs où une icône par tuile n'apporte rien. Les valeurs
typographiques sont volontairement CELLES de `.g-stat-value` / `-label` :
deux tailles différentes pour le même rôle se verraient d'un écran à l'autre. */
.g-kpis {
display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
gap: 14px; margin-bottom: 16px;
}
.g-kpis > .g-card { padding: 16px 18px; }
.g-kpi-n {
font-size: 26px; font-weight: 800; color: var(--slate-900);
letter-spacing: -1px; line-height: 1.1;
}
.g-kpi-l { font-size: 13px; color: var(--slate-500); margin-top: 5px; }
/* --- Sous-titre d'une rubrique ---------------------------------------------
`margin-left: auto` le pousse à droite MÊME si le titre n'est pas enveloppé
dans un `
` : sans cela, un titre resté en nœud de texte devient un
troisième élément flex et `space-between` le renvoie au milieu de la barre —
c'est exactement ce que montrait l'écran des statistiques EquiQuiz. */
.g-card-head-sub {
margin-left: auto; text-align: right; flex-shrink: 0;
font-size: 12.5px; font-weight: 500; color: var(--slate-400); line-height: 1.35;
}
/* --- Deuxième ligne d'un état vide ------------------------------------------
`.g-empty p` impose 15px : on cible donc `p.g-empty-sub` pour gagner en
spécificité sans recourir à `!important`. */
.g-empty p.g-empty-sub {
margin-top: 8px; font-size: 13px; color: var(--slate-400); max-width: 46ch;
margin-left: auto; margin-right: auto;
}
@media (max-width: 640px) {
.g-filters { grid-template-columns: 1fr; padding: 16px; }
.g-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.g-kpi-n { font-size: 22px; }
}
/* ============================================================================
LIEN VERS LA FICHE D'UN COMPTE, depuis n'importe quelle liste
----------------------------------------------------------------------------
Il doit se voir comme un lien SANS crier : dans une colonne de noms, un
soulignement permanent sur chaque ligne fait un mur de traits. Le nom reste
en couleur de texte, et le soulignement vient au survol.
========================================================================== */
.g-lien-compte { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--slate-300); }
.g-lien-compte:hover,
.g-lien-compte:focus-visible { color: var(--primary-dark); border-bottom-color: var(--primary); }
.g-lien-compte:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; }