/* ════════════════════════════════════════════════════════════════════════════════
   TABLEAU DE BORD RH — le rail de crans ne doit pas bouger d'une lecture à l'autre.

   Trois causes, mesurées sur la maquette (passation Pilotage §3.4) :
     1. le rail partageait la rangée du titre, dont le sous-titre passe d'une à trois
        lignes selon le cran — il prend désormais SA PROPRE rangée ;
     2. la ligne de contexte (période · périmètre) réserve DEUX lignes, même quand elle
        n'en remplit qu'une ;
     3. un panneau latéral absent sur un cran décalerait la carte de sa largeur.

   LE POINT 3 EST SANS OBJET DEPUIS LE 2026-09-05 : le panneau de filtres a été retiré de
   l'écran, sur demande. Aucun cran n'en porte plus, donc aucun ne peut décaler la carte —
   c'est la règle qui est satisfaite, pas la règle qui a changé. Le panneau inerte du cran
   « Effectifs », qui n'existait que pour tenir la place du filtre, est parti avec lui.

   ── TOUT EST PORTÉ PAR .ecran-pilotage-rh, ET C'EST LA RÈGLE, PAS UNE PRÉCAUTION ───
   .md-head, .md-card et .md-strip sont le GABARIT : ils servent une centaine d'écrans
   (wwwroot/css/easytime-shell.css). Écrire ici « .md-head { align-items: flex-start } »
   sans portée aurait aligné en haut l'en-tête de tous les écrans du produit pour régler
   le sous-titre d'un seul — une feuille d'écran ne redéfinit pas une classe partagée,
   elle la qualifie. Même mécanique que .ecran-compta dans compta-ux.css.

   Les classes propres à cet écran (.md-crans, .md-jour) restent
   qualifiées elles aussi : le jour où un deuxième écran en a besoin, elles remontent au
   gabarit (docs : « une classe utilisée par deux écrans monte, jamais l'inverse »), et la
   portée dit tout de suite qu'elles n'y sont pas encore.
   ════════════════════════════════════════════════════════════════════════════════ */

/* 1 ET 2 · LES DEUX RÈGLES DU TITRE SONT PARTIES (2026-09-08). Elles alignaient l'icône
   en haut du `.md-head` et réservaient deux lignes à la ligne de contexte, pour que le rail
   ne remonte pas quand le sous-titre passait d'une à trois lignes selon le cran. Le titre
   et la ligne de contexte vivent maintenant dans l'en-tête de PAGE, hors carte : le rail
   n'est plus sous eux, il ne peut plus bouger avec eux, et la réserve de hauteur n'a plus
   d'objet. C'est le même besoin, tenu par l'agencement plutôt que par une hauteur
   minimale. */

/* 3 · LE RAIL, EN TÊTE DE LA CARTE. Même fond et même rembourrage latéral que l'en-tête
   de carte : la rangée se lit comme un bandeau, et la séparation se fait sur le filet
   dessous. */
.ecran-pilotage-rh .md-crans {
    display: flex; align-items: center; gap: 12px; row-gap: 10px; flex-wrap: wrap;
    /* Le rembourrage HAUT est arrivé avec le portage du 2026-09-08 : la rangée était
       jusque-là la seconde du bandeau — l'en-tête de carte, au-dessus, portait l'écart.
       Première rangée de la carte, elle le porte elle-même. */
    padding: 12px var(--et-modal-pad) 13px;
    background: var(--et-surface-2);
    /* Le filet du gabarit remplace le bandeau orange de 3 px (.md-strip) que la rangée
       portait dessous : l'orange est réservé au bouton d'engagement. */
    border-bottom: 1px solid var(--et-hairline);
}

/* LE JOUR OBSERVÉ pousse à droite : il commande le cran « Aujourd'hui » et lui seul, et le
   coller au rail l'aurait fait lire comme un septième cran. */
.ecran-pilotage-rh .md-crans .md-jour {
    margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; color: var(--et-muted);
}
.ecran-pilotage-rh .md-crans .md-jour input {
    padding: 4px 8px; font-family: inherit; font-size: 13px;
    color: var(--et-ink); background: var(--et-surface);
    border: 1px solid var(--et-form-border); border-radius: var(--et-r-btn);
}
.ecran-pilotage-rh .md-crans .md-jour input:focus {
    outline: 2px solid var(--et-form-blue); outline-offset: -1px;
}

/* LA FLÈCHE D'UNE VIGNETTE CLIQUABLE. .kpi-lien (feuille de coquille) porte déjà le survol
   et le focus ; il lui manquait un signe VISIBLE AU REPOS — un survol ne se voit pas au
   doigt, et une vignette qui ne se distingue qu'en la survolant n'existe que pour qui essaie
   au hasard. Discrète, et pleinement contrastée au survol de la vignette. */
.ecran-pilotage-rh .kpi-fleche { margin-left: 5px; font-size: 11px; opacity: .55; }
.ecran-pilotage-rh .kpi-lien:hover .kpi-fleche { opacity: 1; color: var(--et-form-blue); }

/* LA RÈGLE TACTILE, PORTÉE PAR LA FEUILLE D'ÉCRAN — comme easypaie.css section 17 le fait
   pour ses .ep-* : sous 1024 px, aucune cible ne descend sous 44 px, et une cible ne
   rétrécit jamais. Le champ de date en est une, et c'est celle qu'on vise le plus mal
   (elle ouvre le calendrier natif du système). Palier retenu de l'échelle du produit
   (docs/conventions-responsive.md), aucune largeur inventée ici. */
@media (max-width: 1024px) {
    .ecran-pilotage-rh .md-crans .md-jour input { min-height: 44px; }
    /* Une vignette cliquable est une cible, et une grande : rien à agrandir, mais la flèche
       doit rester lisible là où le survol n'existe pas. */
    .ecran-pilotage-rh .kpi-fleche { opacity: .8; }
}

/* Sous 640 px le rail s'enroule déjà (flex-wrap) ; le jour perd sa poussée à droite pour
   ne pas rester seul sur une ligne à l'autre bout de l'écran. */
@media (max-width: 640px) {
    .ecran-pilotage-rh .md-crans .md-jour { margin-left: 0; }
}