/* ============================================================================
   ÉCRAN — ACCUEIL DU POINTAGE (/app, /app/tableau-bord)

   SA FEUILLE ET RIEN QUE LA SIENNE. Ce qui vit ici n'existe que sur cet écran :
   l'histogramme des sept derniers jours, l'anneau de répartition du jour, la
   pastille d'une file d'attente RH et la vignette photo d'un pointage récent.
   Tout le reste — cartes, vignettes d'indicateur, bandeaux, légende — vient du
   gabarit (modele-erp.css) depuis le portage du 2026-09-08.

   POURQUOI ELLE ARRIVE. L'écran écrivait ses couleurs DANS LA PAGE, et pas
   qu'un peu : les sept vignettes recevaient chacune DEUX chaînes de couleur en
   paramètre (« var(--et-ok) », « var(--et-succes-bg) »), l'histogramme en posait
   quatre de plus, l'anneau cinq, la file RH une. La charte l'interdit — « jamais
   de couleur codée en dur dans une page » vaut aussi pour un var(--et-*) recopié
   dans un attribut style (docs/couleurs-en-dur.md).

   ⚠ ET L'ANNEAU NE RENDAIT PAS CE QU'IL CROYAIT RENDRE. Ses quatre cercles
   portaient « stroke="var(--et-ok)" » : un ATTRIBUT DE PRÉSENTATION SVG, qui
   n'accepte pas var() — seule la propriété CSS `stroke:` le fait. Le navigateur
   ignorait donc la valeur et retombait sur le noir par défaut. La charte le dit
   noir sur blanc (« trois choses ne prennent jamais un jeton : les attributs de
   présentation SVG… ») ; c'est corrigé ici, par des règles CSS.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   0. LES SEPT VIGNETTES

   Elles sont celles du gabarit (.mx-ind) : ne reste ici que ce qu'une vignette
   CLIQUABLE ajoute — le curseur et la suppression du soulignement du lien. Le
   relief au survol, lui, vient de .kpi-lien (easytime-shell.css), que l'écran
   portait déjà.
   --------------------------------------------------------------------------- */
.acc-vignette-lien { display: block; text-decoration: none; color: inherit; cursor: pointer; }
.acc-vignette-lien:hover { text-decoration: none; color: inherit; }

/* ---------------------------------------------------------------------------
   1. HISTOGRAMME DES SEPT DERNIERS JOURS

   Les jours NON OUVRÉS sont estompés et gris : sans distinction, une barre à
   zéro le dimanche et une barre à zéro le mercredi se ressemblent — l'une est
   normale, l'autre est précisément le creux qu'on cherche. Le CREUX (jour ouvré
   sans aucun pointage) prend le liseré tireté de danger, et son décompte passe
   en encre de danger : c'est le seul défaut que ce graphique existe pour montrer.

   AUCUNE HAUTEUR ICI : la hauteur d'une barre est une donnée, calculée par
   l'écran et posée dans le balisage.
   --------------------------------------------------------------------------- */
.acc-histo { display: flex; align-items: flex-end; gap: 10px; height: 180px; }

.acc-jour {
    flex: 1; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px;
}
.acc-jour.est-non-ouvre { opacity: .45; }

.acc-jour-n { font-size: 12px; color: var(--et-muted); }
.acc-jour-n.est-creux { color: var(--et-danger-ink); font-weight: 700; }

.acc-barre { width: 100%; max-width: 36px; min-height: 3px; background: var(--et-form-blue-d); }
.acc-barre.est-non-ouvre { background: var(--et-neutre); }
.acc-barre.est-creux { outline: 2px dashed var(--et-danger); outline-offset: 1px; }

.acc-jour-lbl { font-size: 12px; color: var(--et-muted); }

/* ---------------------------------------------------------------------------
   2. ANNEAU DE RÉPARTITION DU JOUR

   Trois parts et non deux : le congé validé avait sa place dans le rouge des
   absents, ce qui gonflait le manque apparent.

   Les couleurs sont des ÉTATS et non des séries d'identité — présent, en congé,
   absent —, d'où les jetons d'état plutôt que la palette catégorielle. Elles
   habillent un TRAIT, c'est-à-dire une marque : l'ambre y prend donc le rang
   --et-avertissement-mark, le seul qui atteigne 3:1 (la charte du 2026-09-03).

   `stroke:` en CSS et non l'attribut `stroke=` du SVG : voir l'en-tête. La
   taille du texte, elle, reste dans le balisage — dans un viewBox, `font-size`
   est en unités utilisateur et non en pixels, et la charte exclut ce cas de son
   échelle typographique. */
.acc-anneau .piste { stroke: var(--et-neutre-bg); }
.acc-anneau .part-presents { stroke: var(--et-succes); }
.acc-anneau .part-conges { stroke: var(--et-avertissement-mark); }
.acc-anneau .part-absents { stroke: var(--et-danger); }
.acc-anneau .val { fill: var(--et-ink); font-weight: 700; }
.acc-anneau .lgd { fill: var(--et-muted); }

/* ---------------------------------------------------------------------------
   3. FILE D'ATTENTE RH — l'icône d'une ligne, et sa pastille de décompte.

   L'icône n'est ambre que si la file porte quelque chose : à zéro, elle passe en
   gris atténué. C'est l'inverse d'un bandeau d'alerte — ici, « rien à traiter »
   est une bonne nouvelle qu'on veut pouvoir lire sans la confondre avec un
   compteur qui appelle.
   --------------------------------------------------------------------------- */
.acc-demande-ico { font-size: 1.1rem; color: var(--et-muted); }
.acc-demande-ico.est-actif { color: var(--et-avertissement-ink); }

.acc-demande-n {
    padding: 2px 10px; border-radius: var(--et-r-pill);
    font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   4. VIGNETTE PHOTO D'UN POINTAGE RÉCENT

   Ronde, et c'est l'exception assumée aux angles droits de la charte : c'est un
   PORTRAIT, comme l'avatar d'initiales qu'elle remplace — lequel est rond depuis
   toujours dans la coquille. Une photo carrée à côté d'initiales rondes se lirait
   comme un défaut de chargement.
   --------------------------------------------------------------------------- */
.acc-avatar {
    width: 40px; height: 40px; flex: none;
    object-fit: cover; border-radius: 50%;
    border: 1px solid var(--et-form-border);
}