/* ==========================================================================
   Zone RH – employés, fiche employé, formulaire, pointage, absences
   Classes préfixées « rh- » ; uniquement les jetons du système de design.
   ========================================================================== */

/* ---------- Avatars teintés (variété sobre, toujours lisible) ---------- */

.avatar[data-teinte] {
    --t: var(--graphe-1);
    color: color-mix(in srgb, var(--t) 62%, var(--texte));
    background: color-mix(in srgb, var(--t) 15%, var(--surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t) 26%, transparent);
}
.avatar[data-teinte="2"] { --t: var(--graphe-4); }
.avatar[data-teinte="3"] { --t: var(--graphe-3); }
.avatar[data-teinte="4"] { --t: var(--graphe-2); }
.avatar[data-teinte="5"] { --t: var(--graphe-6); }
.avatar[data-teinte="6"] { --t: color-mix(in srgb, var(--graphe-4) 50%, var(--graphe-3)); }

/* ---------- Petits éléments ---------- */

/* L'attribut hidden l'emporte toujours sur les display des composants */
.rh-formulaire [hidden], .rh-feuille [hidden], .rh-annuaire [hidden], .rh-suivi [hidden], .rh-jour [hidden] { display: none !important; }

.rh-vide { color: var(--texte-3); }
.rh-zero { color: var(--texte-3); }
.rh-nowrap { white-space: nowrap; }
.rh-tel, .rh-heure { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rh-heure { font-weight: 560; }
.rh-jour-sem { color: var(--texte-3); text-transform: capitalize; }
.rh-retard { color: var(--attention); font-weight: 600; }
.rh-requis { color: var(--marque-vif); font-weight: 700; }

.rh-equipe {
    --c: var(--graphe-6);
    display: inline-flex; align-items: center; gap: 7px; padding: 2px 10px 2px 8px; border-radius: 999px;
    border: 1px solid var(--bord); background: var(--surface); color: var(--texte-2);
    font-size: .78rem; font-weight: 560; line-height: 1.6; white-space: nowrap;
}
.rh-equipe::before, .rh-puce-point {
    content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none;
    background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent);
}
[data-equipe="matin"] { --c: var(--dore); }
[data-equipe="soir"] { --c: var(--marque-vif); }
[data-equipe="nuit"] { --c: var(--info); }
[data-equipe="rotation"] { --c: var(--graphe-6); }
.rh-puce-point { display: inline-block; }
.rh-puce-point:not([data-equipe]) { --c: var(--graphe-6); }

.rh-source {
    display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 6px; border-radius: 7px;
    font-size: .76rem; font-weight: 600; line-height: 1.6; white-space: nowrap;
    color: var(--texte-2); background: var(--surface-3);
}
.rh-source .ico { width: 14px; height: 14px; }
.rh-source[data-source="borne"] { color: var(--marque-texte); background: var(--marque-doux); }
.rh-source[data-source="telephone"] { color: var(--info); background: var(--info-fond); }
.rh-source[data-source="manuel"] { color: var(--texte-3); background: transparent; padding-left: 0; font-weight: 550; }
.rh-source + .rh-source { margin-top: 4px; }
.rh-source-prefixe { font-weight: 500; opacity: .75; }
.rh-c-source .rh-source { display: flex; width: fit-content; }

.rh-etiquette { display: inline-block; padding: 1px 8px; border-radius: 6px; background: var(--surface-3); color: var(--texte-2); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.rh-duree { display: inline-block; padding: 1px 8px; border-radius: 6px; background: var(--surface-3); font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.rh-en-cours { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); font-size: .8rem; font-weight: 600; }
.rh-en-cours::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulsation 2s var(--ease-out) infinite; }
.rh-manque { display: inline-flex; align-items: center; gap: 6px; color: var(--alerte); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.rh-manque::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.rh-justif { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; white-space: nowrap; }
.rh-justif .ico { width: 15px; height: 15px; }

.rh-lien-discret {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px;
    color: var(--texte-2); font-size: .84rem; font-weight: 550; text-decoration: none;
    transition: color var(--d-2), background var(--d-2);
}
.rh-lien-discret .ico { width: 15px; height: 15px; }
.rh-lien-discret:hover { color: var(--texte); background: var(--surface-3); }

/* ---------- Puces de filtre ---------- */

.rh-puces { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.rh-puce {
    display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 5px 0 12px; border-radius: 999px;
    border: 1px solid var(--bord); background: var(--surface); color: var(--texte-2);
    font: inherit; font-size: .84rem; font-weight: 560; text-decoration: none; white-space: nowrap; cursor: pointer;
    box-shadow: var(--ombre-1);
    transition: color var(--d-2), border-color var(--d-2), background var(--d-2), transform var(--d-2) var(--ease-out), box-shadow var(--d-2);
}
.rh-puce:hover { color: var(--texte); border-color: var(--bord-fort); transform: translateY(-1px); box-shadow: var(--ombre-2); }
.rh-puce:active { transform: scale(.97); }
.rh-puce-n {
    min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center;
    background: var(--surface-3); color: var(--texte-2); font-size: .74rem; font-weight: 650; font-variant-numeric: tabular-nums;
    transition: background var(--d-2), color var(--d-2);
}
.rh-puce.actif { background: var(--texte); border-color: var(--texte); color: var(--surface); box-shadow: var(--ombre-2); view-transition-name: rh-puce-active; }
.rh-puce.actif .rh-puce-n { background: color-mix(in srgb, var(--surface) 20%, transparent); color: var(--surface); }
.rh-puce.vide:not(.actif) .rh-puce-n { opacity: .55; }
.rh-puce .rh-puce-point { margin-right: -1px; }
::view-transition-group(rh-puce-active) { animation-duration: 340ms; animation-timing-function: var(--ease-out); }
:root.rh-vt-local::view-transition-old(root), :root.rh-vt-local::view-transition-new(root) { animation: none; }

/* ---------- Bandeaux d'information (hors notifications) ---------- */

.rh-bandeau {
    display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; margin-bottom: 18px;
    border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--surface); font-size: .9rem;
}
.rh-bandeau > .ico { margin-top: 1px; }
.rh-bandeau p { margin: 0; color: var(--texte-2); }
.rh-bandeau strong { color: var(--texte); }
.rh-bandeau-info { background: var(--info-fond); border-color: color-mix(in srgb, var(--info) 25%, transparent); }
.rh-bandeau-info > .ico { color: var(--info); }
.rh-bandeau-attention { background: var(--attention-fond); border-color: color-mix(in srgb, var(--attention) 28%, transparent); }
.rh-bandeau-attention > .ico { color: var(--attention); }
.carte .rh-bandeau { margin-bottom: 14px; }

/* ---------- Tableaux de la zone ---------- */

.js .rh-table tbody tr, .js .rh-table-pointage tbody tr {
    animation: rh-ligne var(--d-4) var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 22ms + 90ms);
}
.rh-table td small { display: block; color: var(--texte-3); font-size: .76rem; }
.rh-table .etat-vide { padding: 30px 16px; }
.tableau td:has(> .etat-vide) { padding: 0; }
.tableau tbody tr:has(> td > .etat-vide):hover { background: none; }

/* ---------- Liste des employés ---------- */

.rh-annuaire-entete { align-items: flex-start; margin-bottom: 16px; }
.rh-annuaire-entete h2 { font-size: 1.1rem; }
.rh-annuaire-entete p strong { color: var(--texte); font-weight: 650; font-variant-numeric: tabular-nums; }

.rh-filtres {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    padding: 8px; margin: 0 0 16px; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--surface-2);
}
.rh-recherche { position: relative; flex: 1 1 300px; min-width: 0; }
.rh-recherche > .ico { position: absolute; left: 12px; top: 50%; width: 17px; height: 17px; translate: 0 -50%; color: var(--texte-3); pointer-events: none; transition: color var(--d-2); }
.rh-recherche:focus-within > .ico { color: var(--marque-vif); }
.rh-recherche input { padding-left: 38px; }
.rh-recherche input::-webkit-search-cancel-button { cursor: pointer; }
.rh-filtres select { width: auto; flex: 0 1 210px; min-width: 150px; }

.rh-table-employes tbody tr[data-href] { cursor: pointer; }
.rh-table-employes .personne a { font-weight: 620; white-space: nowrap; }
.rh-table-employes .personne small { white-space: nowrap; }
.rh-table-employes .rh-c-anc, .rh-table-employes .rh-c-contrat { white-space: nowrap; }
.rh-table-employes .personne small { font-variant-numeric: tabular-nums; }
.rh-table-employes .rh-c-salaire { font-weight: 600; }
.rh-c-fleche { width: 1%; padding-left: 0; color: var(--texte-3); }
.rh-c-fleche .ico { width: 16px; height: 16px; display: block; opacity: .35; transition: opacity var(--d-2), transform var(--d-3) var(--ease-out); }
.rh-table-employes tbody tr:hover .rh-c-fleche .ico { opacity: 1; transform: translateX(3px); color: var(--marque-vif); }
.rh-table-employes tbody tr:hover .personne a { color: var(--marque-texte); }
.rh-table-employes tbody tr.rh-derniere td { border-bottom-color: transparent; }
.rh-fin { margin-top: 1px; }
.rh-fin.proche { color: var(--attention) !important; font-weight: 600; }
.rh-fin.echu { color: var(--alerte) !important; font-weight: 600; }
.rh-pied-tableau {
    display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding-top: 14px; margin-top: 2px; border-top: 1px solid var(--bord); color: var(--texte-3); font-size: .82rem;
}
.rh-pied-tableau strong { color: var(--texte-2); }

/* Largeurs intermédiaires : colonnes secondaires masquées plutôt qu'un défilement horizontal */
@media (max-width: 1320px) {
    .rh-table-employes th, .rh-table-employes td { padding-left: 9px; padding-right: 9px; }
    .rh-table-employes .personne small { white-space: normal; }
    .rh-table-employes .rh-c-fleche, .rh-table-employes th:last-child { display: none; }
    .rh-table-employes th:nth-last-child(2) { border-right: 1px solid var(--bord); border-top-right-radius: 10px; }
}
@media (min-width: 1001px) and (max-width: 1240px), (min-width: 701px) and (max-width: 940px) {
    .rh-table-employes .rh-c-anc, .rh-table-employes .rh-th-anc { display: none; }
}
@media (min-width: 1001px) and (max-width: 1140px), (min-width: 701px) and (max-width: 840px) {
    .rh-table-employes .rh-c-contrat, .rh-table-employes .rh-th-contrat { display: none; }
}
@media (min-width: 1001px) and (max-width: 1080px) {
    .rh-table-employes th, .rh-table-employes td { padding-left: 5px; padding-right: 5px; }
}

@media (max-width: 700px) {
    .rh-filtres { padding: 6px; gap: 6px; }
    .rh-recherche { flex-basis: 100%; }
    .rh-filtres select { flex: 1 1 100%; min-width: 0; }
    .rh-filtres .btn { flex: 1 1 100%; }
    /* Avec JavaScript, les listes se valident d'elles-mêmes et la recherche filtre en direct */
    .js .rh-filtres .rh-filtrer { display: none; }
    .rh-table-employes .personne > div { min-width: 0; }
    .rh-table-employes .personne small { white-space: normal; }
    .rh-annuaire-entete .rh-puces {
        flex-wrap: nowrap; overflow-x: auto; margin: 0 -22px; padding: 2px 22px 6px; width: calc(100% + 44px); scrollbar-width: none;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 28px), transparent);
        mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 28px), transparent);
    }
    .rh-annuaire-entete .rh-puces::-webkit-scrollbar { display: none; }
    .rh-table-employes thead { display: none; }
    .rh-table-employes, .rh-table-employes tbody { display: block; width: 100%; }
    .rh-table-employes tbody tr:not([hidden]) {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; padding: 14px 2px;
        grid-template-areas: "nom statut" "poste salaire" "equipe anc";
        border-bottom: 1px solid var(--bord);
    }
    .rh-table-employes tbody tr:last-child, .rh-table-employes tbody tr.rh-derniere { border-bottom: 0; }
    .rh-table-employes .personne small .rh-sep { display: none; }
    .rh-table-employes .personne small .rh-tel { display: block; }
    .rh-table-employes td { display: block; padding: 0; border: 0 !important; min-width: 0; }
    .rh-table-employes .rh-c-nom { grid-area: nom; }
    .rh-table-employes .rh-c-statut { grid-area: statut; justify-self: end; }
    .rh-table-employes .rh-c-poste { grid-area: poste; padding-left: 45px; color: var(--texte-2); font-size: .84rem; }
    .rh-table-employes .rh-c-salaire { grid-area: salaire; }
    .rh-table-employes .rh-c-equipe { grid-area: equipe; padding-left: 45px; }
    .rh-table-employes .rh-c-anc { grid-area: anc; justify-self: end; color: var(--texte-3); font-size: .8rem; }
    .rh-table-employes .rh-c-contrat, .rh-table-employes .rh-c-fleche { display: none; }
    .rh-table-employes .rh-ligne-vide td { display: block; }
    .rh-pied-tableau span + span { display: none; }
}

/* En-tête des pages de la zone sur téléphone : boutons d'action alignés sur toute la largeur */
@media (max-width: 600px) {
    .rh-page .page-actions { width: 100%; }
    .rh-page .page-actions > .btn { flex: 1 1 auto; padding-left: 12px; padding-right: 12px; }
    .rh-page .page-actions > .selecteur { flex: 1 1 100%; flex-wrap: nowrap; }
    .rh-page .page-actions > .selecteur input[type=month] { flex: 1; min-width: 0; }
}

/* ---------- Fiche employé : profil ---------- */

.rh-retour {
    display: inline-flex; align-items: center; gap: 4px; margin: -6px 0 12px; padding: 4px 8px 4px 4px; border-radius: 8px;
    color: var(--texte-2); font-size: .85rem; font-weight: 550; text-decoration: none; transition: color var(--d-2), background var(--d-2);
}
.rh-retour .ico { width: 16px; height: 16px; transform: rotate(180deg); transition: transform var(--d-3) var(--ease-out); }
.rh-retour:hover { color: var(--texte); background: var(--surface-3); }
.rh-retour:hover .ico { transform: rotate(180deg) translateX(3px); }

.rh-profil { padding: 0; overflow: hidden; }
.rh-profil-banniere {
    position: relative; height: 96px;
    background:
        radial-gradient(110% 160% at 0% 0%, color-mix(in srgb, var(--dore) 34%, transparent), transparent 58%),
        radial-gradient(80% 180% at 100% 0%, color-mix(in srgb, var(--marque-vif) 26%, transparent), transparent 62%),
        linear-gradient(120deg, var(--marque-doux), var(--surface-3));
}
.rh-profil-banniere::after {
    content: ''; position: absolute; inset: 0; opacity: .55;
    background-image: radial-gradient(color-mix(in srgb, var(--marque) 30%, transparent) 1px, transparent 1.6px);
    background-size: 16px 16px;
    -webkit-mask-image: linear-gradient(100deg, transparent 20%, #000 55%, transparent 95%); mask-image: linear-gradient(100deg, transparent 20%, #000 55%, transparent 95%);
}
.rh-profil-corps { position: relative; display: flex; align-items: flex-start; gap: 6px 20px; flex-wrap: wrap; padding: 0 24px; }
.avatar.rh-profil-avatar {
    width: 92px; height: 92px; font-size: 1.75rem; font-weight: 650; letter-spacing: .01em;
    margin-top: -46px; margin-bottom: -4px;
    box-shadow: 0 0 0 4px var(--surface), var(--ombre-2), inset 0 0 0 1px color-mix(in srgb, var(--t) 26%, transparent);
    animation: rh-pop var(--d-4) var(--ease-ressort) both .12s;
}
.rh-profil-identite { flex: 1 1 280px; min-width: 0; padding-top: 14px; }
.rh-profil-identite h1 { margin: 0 0 8px; font-size: 1.6rem; overflow-wrap: anywhere; }
.rh-profil-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; color: var(--texte-2); font-size: .9rem; }
.rh-profil-meta > span:first-child { font-weight: 560; color: var(--texte); }
.rh-profil-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; }
.rh-profil-faits { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.7fr); margin: 20px 0 0; border-top: 1px solid var(--bord); background: var(--surface-2); }
.rh-profil-faits > div { min-width: 0; padding: 13px 24px; border-left: 1px solid var(--bord); }
.rh-profil-faits > div:first-child { border-left: 0; }
.rh-profil-faits dt { font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--texte-3); margin-bottom: 3px; }
.rh-profil-faits dd { margin: 0; font-weight: 580; font-size: .9rem; overflow-wrap: anywhere; }
.rh-profil-faits dd a { color: inherit; text-decoration: none; white-space: nowrap; }
.rh-profil-faits dd small { display: block; margin-top: 1px; color: var(--texte-3); font-size: .8rem; font-weight: 500; }
.rh-profil-faits dd a:hover { color: var(--marque-texte); }
.rh-profil-jour dd { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 9px; }
.rh-profil-jour .rh-ton-ok > span:not(.point-direct):not(.rh-source) { color: var(--ok); }
.rh-profil-jour .rh-ton-alerte > span:first-child { color: var(--alerte); }
.rh-profil-jour .rh-ton-info > span:first-child { color: var(--info); }
.rh-profil-jour .rh-ton-attention > span:first-child { color: var(--attention); }
.rh-profil-jour .rh-ton-neutre > span:first-child { color: var(--texte-2); }

@media (max-width: 1200px) {
    .rh-profil-faits { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .rh-profil-faits .rh-profil-jour { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--bord); }
}
@media (max-width: 700px) {
    .rh-profil-faits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rh-profil-faits > div { border-left: 0; border-top: 1px solid var(--bord); }
    .rh-profil-faits > div:nth-child(2n) { border-left: 1px solid var(--bord); }
    .rh-profil-faits > div:nth-child(-n+2) { border-top: 0; }
}
@media (max-width: 700px) {
    .rh-profil-banniere { height: 76px; }
    .rh-profil-corps { padding: 0 16px; gap: 12px; }
    .avatar.rh-profil-avatar { width: 76px; height: 76px; font-size: 1.45rem; margin-top: -38px; margin-bottom: 0; }
    .rh-profil-identite { flex-basis: 100%; padding-top: 0; }
    .rh-profil-actions { padding-top: 4px; }
    .rh-profil-identite h1 { font-size: 1.35rem; }
    .rh-profil-actions { width: 100%; }
    .rh-profil-actions .btn { flex: 1 1 auto; }
    .rh-profil-faits > div { padding: 11px 16px; }
}

.rh-profil-stats { margin-top: 18px; }

/* Les onglets mènent à « #onglets » : la fiche se rouvre sur les onglets, sous la barre du haut, au lieu de remonter en haut de page.
   La barre d'onglets ne glisse pas à l'ouverture (le navigateur se cale sur sa position pendant le glissement), et le contenu
   de l'onglet occupe au moins la hauteur de l'écran sous la barre : même un onglet court laisse la page se caler sur elle. */
.rh-onglets { scroll-margin-top: calc(var(--topbar) + 14px); }
.js .contenu > .rh-onglets, .js .contenu > .rh-onglet-contenu { animation: none; }
.rh-onglet-contenu { min-height: calc(100vh - var(--topbar) - 140px); }
.js .rh-onglet-contenu > * { animation: entree var(--d-4) var(--ease-out) both; }
.js .rh-onglet-contenu > :nth-child(2) { animation-delay: 60ms; }
.js .rh-onglet-contenu > :nth-child(n+3) { animation-delay: 120ms; }
.rh-onglets a { display: inline-flex; align-items: center; gap: 7px; }
.rh-onglets .ico { width: 16px; height: 16px; opacity: .6; transition: opacity var(--d-2); }
.rh-onglets a:hover .ico, .rh-onglets a.actif .ico { opacity: 1; }
.rh-onglets a.actif .ico { color: var(--marque-vif); }
.rh-onglet-n { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--surface); color: var(--texte-3); font-size: .72rem; font-weight: 650; text-align: center; line-height: 1.55; }
.rh-onglets a.actif .rh-onglet-n { background: var(--surface-3); color: var(--texte-2); }

/* ---------- Fiche employé : informations ---------- */

.rh-infos { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.rh-infos-principal, .rh-infos-cote { min-width: 0; }
.rh-infos-cote { position: sticky; top: calc(var(--topbar) + 18px); }
@media (max-width: 1100px) {
    .rh-infos { grid-template-columns: minmax(0, 1fr); }
    .rh-infos-cote { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; align-items: start; }
    .rh-infos-cote > .carte { margin-bottom: 0; }
}

.rh-faits { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 26px; margin: 0; }
.rh-faits > div { min-width: 0; padding: 11px 0 12px; border-top: 1px solid var(--bord); }
.rh-faits dt { font-size: .78rem; color: var(--texte-3); font-weight: 550; margin-bottom: 2px; }
.rh-faits dd { margin: 0; font-weight: 570; overflow-wrap: anywhere; }
.rh-faits dd small { color: var(--texte-3); font-weight: 500; }
.rh-faits .rh-fait-large { grid-column: 1 / -1; }
@media (max-width: 700px) {
    .rh-faits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
    .rh-faits .rh-fait-l { grid-column: 1 / -1; }
}
.rh-notes { margin-top: 16px; padding: 12px 14px; border-radius: var(--rayon); background: var(--surface-2); border: 1px solid var(--bord); }
.rh-notes strong { display: block; font-size: .78rem; color: var(--texte-3); font-weight: 600; margin-bottom: 2px; }
.rh-notes p { margin: 0; }

/* Badge QR (rendu proche du badge imprimé ; le QR reste noir sur blanc dans les deux thèmes) */
.rh-badge-carte .carte-entete { align-items: flex-start; flex-wrap: nowrap; }
.rh-badge-carte .carte-entete > .ico { color: var(--texte-3); margin-top: 2px; }
.rh-badge {
    position: relative; isolation: isolate; overflow: hidden;
    width: min(100%, 248px); margin: 6px auto 16px; padding: 14px 18px 18px; text-align: center;
    border-radius: 18px; border: 1px solid var(--bord); background: linear-gradient(170deg, var(--surface) 40%, var(--surface-2));
    box-shadow: var(--ombre-2);
    transition: transform var(--d-4) var(--ease-out), box-shadow var(--d-4) var(--ease-out);
}
.rh-badge::before { content: ''; position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg, var(--dore), var(--marque-vif), var(--marque)); }
.rh-badge::after {
    content: ''; position: absolute; inset: -40% auto -40% -60%; width: 45%; z-index: 2; pointer-events: none;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 55%, transparent), transparent);
    transform: translateX(0) rotate(18deg); opacity: 0;
}
.rh-badge:hover { transform: translateY(-3px); box-shadow: var(--ombre-3); }
.rh-badge:hover::after { animation: rh-reflet 900ms var(--ease-out); }
.rh-badge-haut { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 0 14px; font-size: .78rem; font-weight: 650; color: var(--texte-2); }
.rh-badge-haut::before { content: ''; position: absolute; top: 12px; left: 50%; width: 40px; height: 6px; translate: -50% 0; border-radius: 99px; background: var(--surface-3); box-shadow: inset 0 1px 2px color-mix(in srgb, var(--texte) 18%, transparent); }
.rh-badge-haut { padding-top: 12px; }
.rh-badge-haut .marque-logo { width: 24px; height: 24px; border-radius: 7px; box-shadow: none; }
.rh-badge-haut .marque-logo svg { width: 16px; height: 16px; }
.rh-badge-qr {
    position: relative; overflow: hidden; width: 172px; aspect-ratio: 1; margin: 0 auto 12px; padding: 10px;
    border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px rgba(28, 23, 20, .08);
    color: #1c1714;
}
.rh-badge-qr svg { display: block; width: 100%; height: 100%; }
.rh-badge-qr path { fill: currentColor; }
.rh-badge-qr::before { content: ''; position: absolute; inset: 0; z-index: 1; background: #fff; transform: scaleY(0); transform-origin: bottom; }
.rh-badge-qr::after {
    content: ''; position: absolute; left: 8px; right: 8px; top: 0; height: 3px; z-index: 2; border-radius: 3px; opacity: 0;
    background: linear-gradient(90deg, transparent, #f08a3c 20%, #f08a3c 80%, transparent); box-shadow: 0 0 14px 2px rgba(240, 138, 60, .55);
}
.rh-badge-qr.rh-qr-anime::before { animation: rh-qr-cache 1050ms var(--ease-in-out) both .25s; }
.rh-badge-qr.rh-qr-anime::after { animation: rh-qr-ligne 1050ms var(--ease-in-out) both .25s; }
.rh-badge-sans-js { display: grid; place-items: center; height: 100%; color: #5d544d; font-size: .8rem; }
.rh-badge-nom { display: block; font-size: .95rem; letter-spacing: -.01em; overflow-wrap: anywhere; }
.rh-badge-poste { display: block; font-size: .8rem; color: var(--texte-3); }
.rh-badge-code {
    display: inline-block; margin-top: 10px; padding: 4px 10px; border-radius: 8px;
    background: var(--surface-3); color: var(--texte); font-size: .88rem; font-weight: 600; letter-spacing: .14em;
}
.rh-badge-actions { display: flex; justify-content: center; }
.rh-badge-actions .btn { width: 100%; }
.rh-badge-carte .aide { text-align: center; margin: 10px 0 0; }

.rh-zone-sensible { border-color: color-mix(in srgb, var(--alerte) 22%, var(--bord)); }
.rh-zone-sensible h2 { color: var(--alerte); font-size: .95rem; margin-bottom: 4px; }
.rh-zone-sensible p { color: var(--texte-2); font-size: .84rem; }

/* Historique */
.rh-avant { color: var(--texte-3); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--texte-3) 55%, transparent); }
.rh-fleche-histo { width: 1%; padding-left: 0 !important; padding-right: 0 !important; color: var(--texte-3); }
.rh-fleche-histo .ico { width: 15px; height: 15px; display: block; }

/* Congés */
.rh-conges { align-items: start; }
.rh-solde-chiffre { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.rh-solde-chiffre strong { font-size: 2.4rem; font-weight: 700; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.rh-solde-chiffre span { color: var(--texte-2); font-size: .88rem; }
.rh-solde .progression { margin-bottom: 18px; }
.rh-solde dl.infos { grid-template-columns: minmax(0, 1fr) auto; }
.rh-solde dl.infos dd { text-align: right; }
.rh-solde dl.infos dd small { display: block; color: var(--texte-3); font-weight: 500; }

/* Avances */
.rh-remb { display: flex; align-items: center; gap: 8px; min-width: 130px; }
.rh-remb .progression { flex: 1; height: 6px; }
.rh-remb small { margin: 0; color: var(--texte-3); font-variant-numeric: tabular-nums; }

/* Présences de l'employé : calendrier du mois */
.rh-mois { margin: 2px 0 18px; }
.rh-mois ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(31, minmax(0, 1fr)); gap: 4px; }
.rh-mois-jour {
    position: relative; aspect-ratio: 1; max-height: 34px; border-radius: 7px; display: grid; place-items: center;
    font-size: .68rem; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--texte-3); background: var(--surface-3);
    animation: rh-pop-doux var(--d-3) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 14ms + 120ms);
    transition: transform var(--d-2) var(--ease-out);
}
.rh-mois-jour:hover { transform: translateY(-2px); }
.rh-j-ok { background: var(--ok); color: var(--surface); }
.rh-j-attention { background: var(--attention); color: var(--surface); }
.rh-j-alerte { background: var(--alerte); color: var(--surface); }
.rh-j-info { background: var(--info); color: var(--surface); }
.rh-j-conge, .rh-j-repos { background: repeating-linear-gradient(135deg, var(--surface-3) 0 4px, var(--neutre-fond) 4px 8px); color: var(--texte-2); box-shadow: inset 0 0 0 1px var(--bord); }
.rh-j-aucun { background: var(--surface-3); }
.rh-j-futur { background: transparent; box-shadow: inset 0 0 0 1px var(--bord); opacity: .7; }
.rh-j-hors { background: transparent; color: var(--texte-3); opacity: .45; }
.rh-mois-jour.dimanche.rh-j-aucun, .rh-mois-jour.dimanche.rh-j-futur { opacity: .45; }
.rh-mois-jour.aujourdhui { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--marque-vif); }
.rh-mois .legende { margin-top: 10px; }
.rh-mois .legende i { border: 0; }
@media (max-width: 900px) {
    .rh-mois ol { grid-template-columns: repeat(auto-fill, minmax(26px, 1fr)); }
}

.rh-horaires { white-space: nowrap; }
.rh-horaires-fleche { display: inline-flex; vertical-align: -3px; margin: 0 6px; color: var(--texte-3); }
.rh-horaires-fleche .ico { width: 14px; height: 14px; }
.rh-table-presences .badge + .rh-retard { margin-left: 6px; font-size: .8rem; }
.rh-table-presences tr.rh-ligne-qr td:first-child { box-shadow: inset 3px 0 0 var(--marque-vif); }
.rh-photos { display: flex; gap: 6px; }
.rh-photo {
    position: relative; display: block; flex: none; width: 36px; height: 36px; border-radius: 10px; overflow: hidden;
    background: var(--surface-3); box-shadow: 0 0 0 1px var(--bord), var(--ombre-1);
    transition: transform var(--d-2) var(--ease-out), box-shadow var(--d-2);
}
.rh-photo img { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; }
/* Photo introuvable (fichier supprimé) : pictogramme d'appareil photo à la place de l'image cassée */
.rh-photo > .ico { position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; color: var(--texte-3); }
.rh-photo.rh-photo-perdue img { visibility: hidden; }
.rh-photo.rh-photo-perdue { box-shadow: inset 0 0 0 1px var(--bord-fort); background: var(--surface-2); }
.rh-photo:hover { transform: scale(1.08); box-shadow: 0 0 0 2px var(--marque-vif), var(--ombre-2); }
.rh-photo:focus-visible { outline-offset: 3px; border-radius: 10px; }
.rh-photo-sens { position: absolute; right: 2px; bottom: 2px; padding: 0 3px; border-radius: 4px; background: rgba(20, 14, 10, .62); color: #fff; font-size: .56rem; font-weight: 700; line-height: 1.45; }

/* Présences du mois : colonnes resserrées quand la place manque (équipe rappelée dans l'en-tête) */
@media (min-width: 901px) and (max-width: 1000px), (min-width: 1200px) and (max-width: 1399px) {
    .rh-table-presences th, .rh-table-presences td { padding-left: 6px; padding-right: 6px; }
    .rh-table-presences .rh-jour-sem { display: none; }
}
@media (min-width: 901px) and (max-width: 1000px), (min-width: 1200px) and (max-width: 1279px) {
    .rh-table-presences .rh-th-equipe, .rh-table-presences .rh-c-equipe { display: none; }
    .rh-table-presences td.rh-c-statut { white-space: normal; }
    .rh-table-presences .rh-c-statut .rh-retard { display: block; margin: 3px 0 0 2px; }
}

/* Tableaux de la fiche en cartes sur téléphone et tablette (plus de défilement horizontal) */
.rh-reste small { display: none; }
@media (max-width: 900px) {
    .rh-scroll-cartes { overflow: visible; margin: 0; padding: 0; }
    .rh-scroll-cartes > table > thead { display: none; }
    .rh-scroll-cartes > table, .rh-scroll-cartes > table > tbody { display: block; width: 100%; }
    .rh-scroll-cartes > table > tbody > tr:not(:has(.etat-vide)) {
        display: grid; gap: 6px 12px; align-items: center; padding: 14px 2px; border-bottom: 1px solid var(--bord);
    }
    .rh-scroll-cartes > table > tbody > tr:last-child { border-bottom: 0; }
    .rh-scroll-cartes > table > tbody > tr:not(:has(.etat-vide)) > td { display: block; padding: 0; border: 0 !important; min-width: 0; text-align: left; }
    .rh-scroll-cartes > table > tbody > tr > td.rh-sans { display: none !important; }
    .rh-scroll-cartes td[data-label]::before {
        content: attr(data-label); display: block; margin-bottom: 1px;
        font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--texte-3);
    }

    /* Cartes génériques : titre et coin (statut / action) sur la première ligne */
    .rh-cartes > tbody > tr:not(:has(.etat-vide)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rh-cartes .rh-carte-titre { grid-column: 1 / 3; font-weight: 650; }
    .rh-cartes .rh-carte-coin { grid-column: 3; grid-row: 1; justify-self: end; text-align: right !important; }
    .rh-cartes .rh-carte-large { grid-column: 1 / -1; }
    .rh-cartes td.num { font-variant-numeric: tabular-nums; }
    .rh-reste { display: block; font-weight: 650; }
    .rh-reste small { display: block; margin-top: -1px; font-weight: 500; }

    /* Historique : élément et date, puis avant → après */
    .rh-table-histo > tbody > tr:not(:has(.etat-vide)) {
        grid-template-columns: max-content max-content minmax(0, 1fr);
        grid-template-areas: "champ champ date" "avant fleche apres" "auteur auteur auteur";
    }
    .rh-table-histo .rh-h-champ { grid-area: champ; }
    .rh-table-histo .rh-h-date { grid-area: date; justify-self: end; color: var(--texte-2); font-size: .84rem; }
    .rh-table-histo .rh-avant { grid-area: avant; }
    .rh-table-histo .rh-fleche-histo { grid-area: fleche; width: auto; }
    .rh-table-histo .rh-h-apres { grid-area: apres; }
    .rh-table-histo .rh-h-auteur { grid-area: auteur; color: var(--texte-3); font-size: .8rem; }
    .rh-table-histo .rh-h-auteur::before { content: attr(data-label) ' '; display: inline; font-size: inherit; font-weight: 400; letter-spacing: 0; text-transform: none; }
}
/* Bulletins, avances, congés sur portable étroit (menu latéral affiché) : colonnes resserrées */
@media (min-width: 1001px) and (max-width: 1099px) {
    .rh-cartes th, .rh-cartes td { padding-left: 4px; padding-right: 4px; }
}
/* Présences du mois aussi en cartes sur portable étroit (menu latéral affiché, 1001 à 1199 px) */
@media (min-width: 1001px) and (max-width: 1199px) {
    .rh-scroll-cartes.rh-cartes-presences { overflow: visible; margin: 0; padding: 0; }
    .rh-scroll-cartes.rh-cartes-presences > table > thead { display: none; }
    .rh-scroll-cartes.rh-cartes-presences > table, .rh-scroll-cartes.rh-cartes-presences > table > tbody { display: block; width: 100%; }
    .rh-scroll-cartes.rh-cartes-presences > table > tbody > tr:not(:has(.etat-vide)) {
        display: grid; gap: 6px 12px; align-items: center; padding: 14px 2px; border-bottom: 1px solid var(--bord);
    }
    .rh-scroll-cartes.rh-cartes-presences > table > tbody > tr:last-child { border-bottom: 0; }
    .rh-scroll-cartes.rh-cartes-presences > table > tbody > tr:not(:has(.etat-vide)) > td { display: block; padding: 0; border: 0 !important; min-width: 0; text-align: left; }
    .rh-scroll-cartes.rh-cartes-presences > table > tbody > tr > td.rh-sans { display: none !important; }
    .rh-scroll-cartes.rh-cartes-presences td[data-label]::before {
        content: attr(data-label); display: block; margin-bottom: 1px;
        font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--texte-3);
    }
}
@media (max-width: 900px), (min-width: 1001px) and (max-width: 1199px) {
    /* Présences du mois */
    .rh-table-presences > tbody > tr:not(:has(.etat-vide)) {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "jour statut" "horaires duree" "source photos" "equipe hs" "motif motif";
    }
    .rh-table-presences .rh-horaires { white-space: normal; }
    .rh-table-presences .rh-horaires .rh-plus1 { white-space: nowrap; }
    .rh-table-presences .rh-c-jour { grid-area: jour; font-weight: 600; }
    .rh-table-presences .rh-c-statut { grid-area: statut; justify-self: end; }
    .rh-table-presences .rh-horaires { grid-area: horaires; }
    .rh-table-presences .rh-c-duree { grid-area: duree; justify-self: end; }
    .rh-table-presences .rh-c-equipe { grid-area: equipe; }
    .rh-table-presences .rh-c-source { grid-area: source; display: flex !important; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
    .rh-table-presences .rh-c-source .rh-source + .rh-source { margin-top: 0; }
    .rh-table-presences .rh-c-photos { grid-area: photos; justify-self: end; }
    .rh-table-presences .rh-c-motif { grid-area: motif; color: var(--texte-2); font-size: .86rem; }
    .rh-table-presences .rh-c-hs { grid-area: hs; justify-self: end; font-size: .84rem; }
    .rh-table-presences .rh-c-hs::before { display: inline !important; margin-right: 4px; }
    .rh-table-presences tr.rh-ligne-qr td:first-child { box-shadow: none; }
    .rh-table-presences tr.rh-ligne-qr { box-shadow: inset 3px 0 0 var(--marque-vif); padding-left: 12px !important; }

}

/* Visionneuse de photos de contrôle */
dialog.rh-visionneuse { padding: 0; border: 0; background: transparent; overflow: visible; max-width: none; max-height: none; }
dialog.rh-visionneuse::backdrop { background: var(--voile); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fondu var(--d-3) var(--ease-out); }
dialog.rh-visionneuse.ferme::backdrop { opacity: 0; transition: opacity var(--d-2) var(--ease-in); }
.js .contenu > .rh-visionneuse { animation: none; }
.rh-visionneuse figure { margin: 0; }
.rh-visionneuse img {
    display: block; width: auto; height: auto; max-width: min(92vw, 760px); max-height: 78vh; min-width: 160px; min-height: 120px;
    border-radius: var(--rayon-l); background: var(--surface-3); box-shadow: var(--ombre-3); object-fit: contain;
}
.rh-visionneuse figcaption { margin-top: 12px; text-align: center; color: #fff; font-size: .88rem; font-weight: 560; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.rh-visionneuse-fermer {
    position: absolute; top: -14px; right: -14px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
    border: 1px solid var(--bord); background: var(--surface); color: var(--texte); cursor: pointer; box-shadow: var(--ombre-2);
    transition: transform var(--d-2) var(--ease-out);
}
.rh-visionneuse-fermer:hover { transform: rotate(90deg); }
@media (max-width: 640px) { .rh-visionneuse-fermer { top: -46px; right: 0; } }

/* ---------- Formulaire employé ---------- */

.rh-formulaire { max-width: 1160px; }
.rh-erreurs { max-width: 1160px; }
.rh-erreurs a { color: inherit; text-underline-offset: 3px; }
.rh-formulaire [aria-invalid="true"] { border-color: var(--alerte); box-shadow: 0 0 0 3px var(--alerte-fond); }
.rh-formulaire [aria-invalid="true"]:focus { border-color: var(--alerte); box-shadow: 0 0 0 4px color-mix(in srgb, var(--alerte) 22%, transparent); }
.rh-apercu {
    position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 22px;
    background: linear-gradient(120deg, color-mix(in srgb, var(--marque-doux) 70%, var(--surface)), var(--surface) 60%);
}
.rh-apercu .avatar { width: 54px; height: 54px; font-size: 1.1rem; transition: transform var(--d-3) var(--ease-ressort); }
.rh-apercu .avatar.rh-change { animation: rh-pop var(--d-3) var(--ease-ressort); }
.rh-apercu-texte { flex: 1 1 260px; min-width: 0; }
.rh-apercu-texte strong { display: block; font-size: 1.08rem; letter-spacing: -.015em; overflow-wrap: anywhere; }
.rh-apercu-texte > span { color: var(--texte-2); font-size: .88rem; }
.rh-apercu-total { text-align: right; }
.rh-apercu-total small, .rh-total-section small { display: block; color: var(--texte-3); font-size: .76rem; font-weight: 550; }
.rh-apercu-total strong { font-size: 1.25rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

.rh-section { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; padding: 24px; transition: border-color var(--d-2), box-shadow var(--d-3) var(--ease-out); }
.rh-section:focus-within { border-color: color-mix(in srgb, var(--marque-vif) 38%, var(--bord)); box-shadow: var(--ombre-2); }
.rh-section-intro h2 { margin: 12px 0 6px; font-size: 1rem; }
.rh-section-intro p { margin: 0; color: var(--texte-2); font-size: .85rem; line-height: 1.5; }
.rh-section-icone {
    width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
    background: var(--marque-doux); color: var(--marque-texte); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marque-vif) 16%, transparent);
    transition: transform var(--d-3) var(--ease-ressort), background var(--d-2), color var(--d-2);
}
.rh-section:focus-within .rh-section-icone { transform: scale(1.08) rotate(-5deg); background: var(--marque-vif); color: #fff; }
.rh-section .champs { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); align-content: start; }
.rh-total-section { margin-top: 16px; padding: 12px 14px; border-radius: var(--rayon); background: var(--surface-2); border: 1px solid var(--bord); }
.rh-total-section strong { font-size: 1.15rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rh-montant { position: relative; }
.rh-montant input { padding-right: 58px; font-variant-numeric: tabular-nums; }
.rh-montant span { position: absolute; right: 12px; top: 50%; translate: 0 -50%; color: var(--texte-3); font-size: .74rem; font-weight: 650; letter-spacing: .03em; pointer-events: none; }
.rh-aide-alerte, .rh-aide-attention, .rh-aide-info { display: flex; align-items: flex-start; gap: 6px; font-weight: 550; }
.rh-aide-alerte { color: var(--alerte); }
.rh-aide-attention { color: var(--attention); }
.rh-aide-info { color: var(--info); }
.rh-aide-alerte .ico, .rh-aide-attention .ico { width: 14px; height: 14px; margin-top: 2px; }
.rh-section [data-rh-fin-contrat].rh-requis-actif label::after { content: ' *'; color: var(--marque-vif); font-weight: 700; }
.rh-section [data-rh-aide-cdd] { display: none; }
.rh-section .rh-requis-actif [data-rh-aide-cdd] { display: block; color: var(--attention); font-weight: 550; }
.rh-champ-effet {
    display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap;
    padding: 12px 14px; border-radius: var(--rayon); background: var(--marque-doux); border: 1px dashed color-mix(in srgb, var(--marque-vif) 40%, transparent);
}
.rh-champ-effet-texte { display: flex; gap: 10px; align-items: flex-start; flex: 1 1 260px; min-width: 0; }
.rh-champ-effet-texte > .ico { color: var(--marque-texte); margin-top: 1px; }
.rh-champ-effet-texte label { margin: 0; }
.rh-champ-effet-texte .aide { margin: 2px 0 0; color: var(--texte-2); }
.rh-champ-effet input { width: 190px; flex: none; }
.rh-case { align-items: flex-start; padding: 12px 14px; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--surface-2); transition: border-color var(--d-2), background var(--d-2); }
.rh-case:hover { border-color: var(--bord-fort); }
.rh-case:has(input:checked) { border-color: color-mix(in srgb, var(--marque-vif) 45%, var(--bord)); background: var(--marque-doux); }
.rh-case input { margin-top: 2px; }
.rh-case strong { display: block; font-weight: 600; }
.rh-case small { display: block; color: var(--texte-2); font-size: .8rem; font-weight: 450; }
.rh-section textarea { min-height: 110px; }
@media (min-width: 641px) { .rh-section .rh-champ-2 { grid-column: span 2; } }
.rh-champ-case { align-self: end; }
.rh-apparait { animation: rh-apparait var(--d-3) var(--ease-out) both; }

@media (max-width: 1100px) {
    .rh-section { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 20px; }
    .rh-section-intro { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: center; }
    .rh-section-intro h2 { margin: 0; }
    .rh-section-intro p, .rh-total-section { grid-column: 1 / -1; }
    .rh-section-intro p { margin-top: 6px; }
}
@media (max-width: 640px) {
    .rh-apercu { padding: 16px; }
    .rh-apercu-texte { flex-basis: 0; }
    .rh-apercu .avatar { width: 46px; height: 46px; font-size: 1rem; }
    .rh-apercu-total { text-align: left; width: 100%; padding-top: 12px; border-top: 1px solid var(--bord); }
    .rh-section .champs { grid-template-columns: minmax(0, 1fr); }
}

/* Barre d'actions flottante (formulaire employé, feuille de pointage) ; un champ qui reçoit le focus
   n'est jamais masqué par elle ni par la barre du haut */
html:has(.rh-barre-actions) { scroll-padding: calc(var(--topbar) + 12px) 0 96px; }
@media (max-width: 640px) { html:has(.rh-barre-actions) { scroll-padding-bottom: 150px; } }
.rh-barre-actions {
    position: sticky; bottom: 14px; z-index: 6;
    display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap;
    margin-top: 18px; padding: 10px 10px 10px 18px; border-radius: 14px;
    border: 1px solid var(--bord); background: var(--verre); box-shadow: var(--ombre-3);
    -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
}
.rh-barre-actions .actions, .rh-barre-actions .form-actions { margin: 0; }
.rh-barre-etat { margin: 0; display: flex; align-items: center; gap: 9px; color: var(--texte-2); font-size: .86rem; min-width: 0; }
.rh-barre-point { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--bord-fort); transition: background var(--d-2), transform var(--d-3) var(--ease-ressort); }
.rh-barre-actions.modifie .rh-barre-point { background: var(--info); transform: scale(1.25); box-shadow: 0 0 0 4px var(--info-fond); }
.rh-barre-actions.modifie .rh-barre-etat { color: var(--texte); font-weight: 550; }
.rh-barre-actions.modifie .btn[type=submit] { animation: rh-pop var(--d-3) var(--ease-ressort); }
@media (max-width: 640px) {
    .rh-barre-actions { padding: 10px; bottom: 10px; }
    .rh-barre-etat { width: 100%; padding: 0 4px; }
    .rh-barre-actions:not(.modifie) .rh-barre-etat { display: none; }
    .rh-barre-actions .actions, .rh-barre-actions .form-actions { width: 100%; }
    .rh-barre-actions .btn { flex: 1; }
}

/* ---------- Feuille de pointage ---------- */

.rh-jour { padding-bottom: 16px; }
.rh-jour-entete { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.rh-jour-titre { display: flex; align-items: center; gap: 14px; min-width: 0; }
.rh-jour-titre h2 { margin: 0 0 3px; font-size: 1.15rem; }
.rh-jour-titre p { margin: 0; color: var(--texte-2); font-size: .85rem; }
.rh-direct { display: inline-flex; align-items: center; gap: 7px; color: var(--ok); font-weight: 600; }
.rh-calendrier-tuile {
    flex: none; width: 54px; overflow: hidden; border-radius: 12px; text-align: center;
    background: var(--surface); border: 1px solid var(--bord); box-shadow: var(--ombre-2);
}
.rh-calendrier-tuile small { display: block; padding: 2px 0; background: linear-gradient(180deg, var(--marque-vif), var(--marque)); color: #fff; font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.rh-calendrier-tuile strong { display: block; padding: 3px 0 5px; font-size: 1.35rem; line-height: 1.15; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.rh-jour-selecteur input[type=date] { width: auto; }
.rh-jour-selecteur .btn-icone:first-child .ico { transform: rotate(180deg); }

.rh-resume { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 28px; align-items: center; padding: 16px 18px; border-radius: var(--rayon); background: var(--surface-2); border: 1px solid var(--bord); }
.rh-resume-ratio strong { display: block; font-size: 2.1rem; font-weight: 700; letter-spacing: -.04em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.rh-resume-sur { color: var(--texte-3); font-weight: 600; font-size: .62em; letter-spacing: -.01em; }
.rh-resume-ratio > span { color: var(--texte-2); font-size: .84rem; }
.rh-resume-legende { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .82rem; color: var(--texte-2); }
.rh-resume-legende li { display: inline-flex; align-items: center; gap: 7px; }
.rh-resume-legende strong { color: var(--texte); font-variant-numeric: tabular-nums; }
.rh-resume-legende i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.rh-resume-qr { margin-left: auto; padding: 1px 9px 1px 7px; border-radius: 7px; background: var(--marque-doux); color: var(--marque-texte) !important; font-weight: 550; }
.rh-resume-qr .ico { width: 14px; height: 14px; }
.rh-resume-qr strong { color: inherit !important; }
.rh-jour-aide { display: flex; align-items: center; gap: 7px; margin: 12px 2px 0; }
.rh-jour-aide .ico { width: 14px; height: 14px; flex: none; }
@media (max-width: 700px) {
    .rh-resume { grid-template-columns: minmax(0, 1fr); }
    .rh-resume-qr { margin-left: 0; }
    .rh-jour-entete { align-items: flex-start; }
    .rh-jour-selecteur { width: 100%; }
    .rh-jour-selecteur input[type=date] { flex: 1; min-width: 0; }
}

/* Barres segmentées (pointage du jour, assiduité) */
.rh-barre-segments { display: flex; height: 10px; overflow: hidden; border-radius: 999px; background: var(--surface-3); }
.rh-barre-segments > span { height: 100%; transform-origin: left; animation: barre-grandit var(--d-5) var(--ease-out) both; box-shadow: inset -2px 0 0 var(--surface-2); }
.rh-barre-segments > span:nth-child(2) { animation-delay: 90ms; }
.rh-barre-segments > span:nth-child(3) { animation-delay: 180ms; }
.rh-barre-segments > span:nth-child(4) { animation-delay: 270ms; }
.rh-barre-segments > span:nth-child(5) { animation-delay: 360ms; }
.s-ok { background: var(--ok); }
.s-attention { background: var(--dore); }
.s-alerte { background: var(--alerte); }
.s-info { background: var(--info); }
.s-conge { background: var(--graphe-6); }
.s-vide { background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--bord-fort); }

/* Direct : nouveau pointage à la borne */
.rh-direct-bandeau {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 10px 10px 12px; margin: -4px 0 16px;
    border-radius: var(--rayon); background: var(--info-fond); border: 1px solid color-mix(in srgb, var(--info) 25%, transparent);
    animation: rh-apparait var(--d-4) var(--ease-ressort) both;
}
.rh-direct-bandeau[hidden] { display: none; }
.rh-direct-icone { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--info); color: var(--surface); }
.rh-direct-icone .ico { width: 17px; height: 17px; }
.rh-direct-bandeau p { flex: 1 1 260px; margin: 0; font-size: .86rem; color: var(--texte-2); min-width: 0; }
.rh-direct-bandeau p strong { display: block; color: var(--texte); }

.rh-feuille-entete { margin-bottom: 14px; }
.rh-feuille-champs { border: 0; padding: 0; margin: 0; min-width: 0; }
.rh-tag-conge { color: var(--info); font-weight: 600; }

.rh-table-pointage thead th { vertical-align: bottom; }
.rh-table-pointage thead tr:first-child th[rowspan] { border-bottom: 1px solid var(--bord); }
.rh-table-pointage thead tr + tr th { border-top: 0; padding-top: 4px; font-size: .68rem; text-align: center; }
.rh-table-pointage thead tr + tr th:first-child { border-left: 0; border-top-left-radius: 0; }
.rh-table-pointage thead tr + tr th:last-child { border-top-right-radius: 0; }
.rh-table-pointage.rh-hs-replie th.rh-th-motif { border-right: 1px solid var(--bord); border-top-right-radius: 10px; }
.rh-table-pointage th.rh-th-groupe { text-align: center; padding-bottom: 2px; border-bottom: 0; }
.rh-table-pointage th.rh-th-groupe::after { content: ''; display: block; height: 1px; margin: 6px 4px 0; background: var(--bord-fort); }
.rh-table-pointage td { padding: 8px 6px; }
.rh-table-pointage td:first-child { padding-left: 12px; }
.rh-table-pointage select, .rh-table-pointage input { min-height: 36px; padding-top: 6px; padding-bottom: 6px; font-size: .86rem; }
.pointage.rh-table-pointage select { min-width: 0; width: auto; }
.pointage.rh-table-pointage select { padding-left: 10px; padding-right: 28px; background-position: right 10px center; }
.pointage.rh-table-pointage select[name$="[equipe]"] { width: 92px; }
.pointage.rh-table-pointage select[name$="[statut]"] { width: 170px; }
/* 116 px : l'heure tient aussi au format 12 h (« 10:17 PM ») des appareils réglés en anglais */
.pointage.rh-table-pointage input[type=time] { width: 116px; padding-left: 10px; padding-right: 8px; }
.pointage.rh-table-pointage input.hs { width: 54px; padding-left: 6px; padding-right: 8px; }
.rh-table-pointage input.hs::placeholder { opacity: .45; }
.rh-table-pointage .rh-c-motif input { min-width: 140px; }
.rh-table-pointage .personne { min-width: 180px; }
.rh-table-pointage .personne strong { display: block; font-weight: 620; line-height: 1.3; }
.rh-c-source { min-width: 132px; }
.rh-source-bloc { display: flex; align-items: center; gap: 9px; }
.rh-source-pile { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.rh-non-pointe .rh-c-source .rh-vide { font-size: .8rem; font-style: italic; }
/* Champs alignés en haut de ligne : une ligne de nuit (repère « lendemain » sous le départ) reste alignée */
.rh-table-pointage tbody td { vertical-align: top; }
.rh-table-pointage tbody td.rh-c-nom { padding-top: 10px; }
.rh-table-pointage .rh-source-bloc { min-height: 36px; }
.rh-table-pointage td.rh-c-source > .rh-source, .rh-table-pointage td.rh-c-source > .rh-vide { margin-top: 8px; }

/* Repères discrets : pointage synchronisé après une coupure, départ le lendemain (poste de nuit) */
.rh-hors-ligne {
    display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px 1px 5px; border-radius: 6px;
    font-size: .7rem; font-weight: 600; line-height: 1.5; white-space: nowrap;
    color: var(--attention); background: var(--attention-fond);
}
.rh-hors-ligne .ico { width: 13px; height: 13px; }
.rh-lendemain {
    display: flex; width: fit-content; align-items: center; gap: 4px; margin: 4px 0 0 2px;
    font-size: .72rem; font-weight: 550; line-height: 1.5; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--texte-2);
}
.rh-lendemain .ico { width: 12px; height: 12px; color: var(--info); }
.rh-plus1 {
    display: inline-flex; align-items: center; gap: 3px; margin-left: 5px; padding: 0 6px 0 4px; border-radius: 6px; vertical-align: 1px;
    font-size: .68rem; font-weight: 650; line-height: 1.6; white-space: nowrap; color: var(--info); background: var(--info-fond);
}
.rh-plus1 .ico { width: 11px; height: 11px; }

/* Heures supplémentaires repliables */
.rh-table-pointage.rh-hs-replie .rh-c-hs, .rh-table-pointage.rh-hs-replie .rh-th-hs { display: none; }
[data-rh-hs] .ico { transition: transform var(--d-3) var(--ease-out); }
[data-rh-hs][aria-pressed="true"] .ico { transform: rotate(180deg); }
[data-rh-hs][aria-pressed="true"] { background: var(--surface-3); }
.rh-table-pointage.rh-hs-replie thead tr:first-child th[rowspan] { border-bottom: 1px solid var(--bord); }

/* Colonne « Employé » fixe lors du défilement horizontal (fond opaque + teinte de la ligne),
   ombre portée dès que la feuille défile, trait de couleur à gauche (borne, ligne modifiée) */
.rh-table-pointage tbody td:first-child, .rh-table-pointage thead tr:first-child th:first-child { position: sticky; left: 0; z-index: 2; }
.rh-table-pointage tbody td:first-child {
    background-color: var(--surface); background-image: linear-gradient(var(--rh-teinte, transparent), var(--rh-teinte, transparent));
    box-shadow: var(--rh-trait, 0 0 transparent), var(--rh-ombre, 0 0 transparent);
    transition: box-shadow var(--d-2) var(--ease-out);
}
.rh-table-pointage.rh-defile { --rh-ombre: 12px 0 14px -12px color-mix(in srgb, var(--texte) 38%, transparent); }
.rh-table-pointage.rh-defile thead tr:first-child th:first-child { box-shadow: var(--rh-ombre); }
.rh-table-pointage tbody tr:hover td:first-child { background-color: var(--surface-2); }
.rh-table-pointage tr.ligne-absent { --rh-teinte: color-mix(in srgb, var(--alerte-fond) 70%, transparent); }
.rh-table-pointage tr.ligne-conge { --rh-teinte: color-mix(in srgb, var(--info-fond) 70%, transparent); }
.rh-table-pointage tr.rh-ligne-qr:not(.ligne-absent):not(.ligne-conge) { background: color-mix(in srgb, var(--marque-doux) 55%, transparent); --rh-teinte: color-mix(in srgb, var(--marque-doux) 55%, transparent); }
.rh-table-pointage tr.rh-ligne-qr { --rh-trait: inset 3px 0 0 var(--marque-vif); }
.rh-table-pointage tr.rh-modifie { --rh-trait: inset 3px 0 0 var(--info); }
.rh-table-pointage tr.rh-ligne-maj { --rh-trait: inset 3px 0 0 var(--info); background: color-mix(in srgb, var(--info-fond) 80%, transparent); --rh-teinte: color-mix(in srgb, var(--info-fond) 80%, transparent); }

/* Regroupement par équipe */
.tableau.rh-table-pointage tr.rh-groupe th {
    padding: 18px 12px 8px; text-align: left; text-transform: none; letter-spacing: -.005em; white-space: nowrap;
    font-size: .84rem; font-weight: 650; color: var(--texte); background: none;
    border: 0; border-bottom: 1px solid var(--bord); border-radius: 0;
}
.tableau.rh-table-pointage tbody:first-of-type tr.rh-groupe th { padding-top: 12px; }
.tableau.rh-table-pointage tbody + tbody tr.rh-groupe th { border-top: 1px solid var(--bord); }
.rh-table-pointage tbody tr.rh-groupe:hover { background: none; }
.rh-groupe-titre { position: sticky; left: 12px; display: inline-flex; align-items: center; gap: 9px; }
.rh-groupe-titre small { font-size: .78rem; font-weight: 500; color: var(--texte-3); }

/* Portables (≤ 1399 px) : colonnes resserrées et source réduite à son icône
   (libellé conservé pour les lecteurs d'écran et en infobulle) : Motif reste visible sans défilement */
@media (min-width: 761px) and (max-width: 1399px) {
    .pointage.rh-table-pointage select[name$="[equipe]"] { width: 84px; }
    .pointage.rh-table-pointage input[type=time] { width: 106px; }
    .rh-table-pointage .rh-c-motif input { min-width: 120px; }
    .tableau.rh-table-pointage th.rh-th-motif { white-space: normal; }
    .rh-table-pointage .personne { min-width: 170px; }
    .rh-table-pointage .rh-source-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .rh-table-pointage .rh-source { padding: 5px; }
    .rh-table-pointage .rh-source[data-source="manuel"] { padding: 5px 0; }
    .rh-table-pointage .rh-c-source { min-width: 0; }
    .rh-table-pointage .rh-source-bloc { gap: 6px; }
    .rh-table-pointage .rh-source-pile { flex-direction: row; align-items: center; gap: 4px; }
    .rh-table-pointage .rh-hors-ligne { padding: 5px; }
    .rh-table-pointage td.rh-c-source > .rh-source { margin-top: 4px; }
}
/* Tablette (≈ 1000 px) : quelques pixels de plus pour que la colonne Motif reste visible sans défiler */
@media (min-width: 761px) and (max-width: 1100px) {
    .rh-table-pointage td { padding-left: 4px; padding-right: 4px; }
    .rh-table-pointage .personne { min-width: 150px; }
    .rh-table-pointage .rh-c-motif input { min-width: 108px; }
    .rh-non-pointe .rh-c-source .rh-vide { white-space: nowrap; }
}

.rh-barre-pointage .form-actions { margin: 0; }

@media (max-width: 760px) {
    .rh-feuille-entete .actions { width: 100%; }
    .rh-feuille-entete .actions .btn { flex: 1 1 auto; }
    .rh-feuille .tableau-scroll { overflow: visible; margin: 0; padding: 0; }
    .rh-table-pointage thead { display: none; }
    .rh-table-pointage, .rh-table-pointage tbody { display: block; width: 100%; }
    .rh-table-pointage tbody tr {
        display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px 8px; padding: 14px 14px 14px 16px; margin-bottom: 12px;
        border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--surface); box-shadow: var(--ombre-1);
    }
    .rh-table-pointage tbody tr.rh-ligne-etat { display: block; padding: 0; }
    .rh-table-pointage tbody tr:hover { background: var(--surface); }
    /* Teintes conservées au toucher (le survol « collant » des écrans tactiles ne les efface pas) */
    .rh-table-pointage tbody tr.ligne-absent, .rh-table-pointage tbody tr.ligne-absent:hover { background: color-mix(in srgb, var(--alerte-fond) 70%, var(--surface)); }
    .rh-table-pointage tbody tr.ligne-conge, .rh-table-pointage tbody tr.ligne-conge:hover { background: color-mix(in srgb, var(--info-fond) 70%, var(--surface)); }
    .rh-table-pointage tbody tr.rh-ligne-qr:not(.ligne-absent):not(.ligne-conge),
    .rh-table-pointage tbody tr.rh-ligne-qr:not(.ligne-absent):not(.ligne-conge):hover { background: color-mix(in srgb, var(--marque-doux) 55%, var(--surface)); }
    .rh-table-pointage tbody tr { box-shadow: var(--rh-trait, 0 0 transparent), var(--ombre-1); }
    .rh-table-pointage tbody tr.rh-ligne-maj, .rh-table-pointage tbody tr.rh-ligne-maj:hover { background: color-mix(in srgb, var(--info-fond) 80%, var(--surface)); }
    .rh-table-pointage tbody tr.rh-groupe, .rh-table-pointage tbody tr.rh-groupe:hover { display: block; padding: 6px 2px 0; margin: 4px 0 10px; border: 0; background: none; box-shadow: none; }
    .tableau.rh-table-pointage tr.rh-groupe th, .tableau.rh-table-pointage tbody + tbody tr.rh-groupe th { display: block; padding: 0; border: 0; }
    .rh-groupe-titre { position: static; }
    .rh-table-pointage td { display: block; padding: 0; border: 0 !important; min-width: 0; }
    .rh-table-pointage tbody td:first-child { position: static; background: none; box-shadow: none !important; padding: 0; }
    .rh-table-pointage td[data-label]::before {
        content: attr(data-label); display: block; margin-bottom: 4px;
        font-size: .68rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--texte-3);
    }
    .rh-table-pointage .rh-c-nom, .rh-table-pointage .rh-c-source, .rh-table-pointage .rh-c-motif { grid-column: 1 / -1; }
    .rh-table-pointage td[data-label="Équipe"] { grid-column: span 5; }
    .rh-table-pointage td[data-label="Statut"] { grid-column: span 7; }
    .rh-table-pointage td[data-label="Arrivée"], .rh-table-pointage td[data-label="Départ"] { grid-column: span 6; }
    .rh-table-pointage td.rh-c-hs { grid-column: span 3; }
    .rh-table-pointage .rh-c-source { display: flex; align-items: center; gap: 10px; padding-left: 45px; margin-top: -4px; }
    .rh-table-pointage .rh-c-source::before { display: none !important; }
    .rh-table-pointage .rh-c-source .rh-photo { width: 30px; height: 30px; border-radius: 8px; }
    .rh-table-pointage tbody td.rh-c-nom { padding-top: 0; }
    .rh-table-pointage .rh-source-bloc { min-height: 0; }
    .rh-table-pointage .rh-source-pile { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; }
    .rh-table-pointage td.rh-c-source > .rh-source, .rh-table-pointage td.rh-c-source > .rh-vide { margin-top: 0; }
    .pointage.rh-table-pointage select, .pointage.rh-table-pointage input[type=time], .pointage.rh-table-pointage input.hs,
    .pointage.rh-table-pointage select[name$="[equipe]"], .pointage.rh-table-pointage select[name$="[statut]"], .rh-table-pointage .rh-c-motif input { width: 100%; min-width: 0; }
    .rh-table-pointage .personne { min-width: 0; }
    .rh-table-pointage td.rh-c-hs::before { text-transform: none; letter-spacing: 0; }
}

/* ---------- Absences & retards ---------- */

.rh-alertes {
    display: flex; gap: 16px; align-items: flex-start;
    border-color: color-mix(in srgb, var(--attention) 30%, var(--bord));
    background: linear-gradient(120deg, var(--attention-fond), var(--surface) 70%);
}
.rh-alertes-icone { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--attention); color: var(--surface); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--attention) 70%, transparent); }
.rh-alertes-corps { flex: 1; min-width: 0; }
.rh-alertes-corps h2 { margin: 2px 0 4px; }
.rh-alertes-corps > p { color: var(--texte-2); font-size: .88rem; margin-bottom: 12px; }
.rh-alertes-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.rh-alertes-liste li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--rayon); background: var(--surface); border: 1px solid var(--bord); min-width: 0; }
.rh-alertes-nom { flex: 1; min-width: 0; }
.rh-alertes-nom a, .rh-alertes-nom strong { display: block; font-weight: 620; color: var(--texte); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rh-alertes-nom a:hover { color: var(--marque-texte); }
.rh-alertes-nom small { display: block; color: var(--texte-3); font-size: .76rem; }

.rh-legende-assiduite { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .78rem; color: var(--texte-2); }
.rh-legende-assiduite span { display: inline-flex; align-items: center; gap: 6px; }
.rh-legende-assiduite i { width: 9px; height: 9px; border-radius: 3px; }
.rh-table-rapport .personne a, .rh-table-rapport .personne strong { font-weight: 620; text-decoration: none; color: var(--texte); white-space: nowrap; }
/* En-têtes sur deux lignes maîtrisées (<br>) : jamais de chevauchement entre colonnes chiffrées */
.tableau.rh-table-rapport th { white-space: nowrap; line-height: 1.3; vertical-align: bottom; }
.rh-table-rapport th, .rh-table-rapport td { padding-left: 10px; padding-right: 10px; }
.rh-table-rapport .personne a:hover { color: var(--marque-texte); }
.rh-assiduite { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.rh-assiduite .rh-barre-segments { flex: 1; }
.rh-barre-fine { height: 7px; }
.rh-barre-fine > span { box-shadow: inset -1.5px 0 0 var(--surface); }
.rh-assiduite small { width: 44px; white-space: nowrap; margin: 0; text-align: right; color: var(--texte-2) !important; font-weight: 600; font-variant-numeric: tabular-nums; }

.rh-table-suivi .personne strong { font-weight: 600; }
.rh-table-suivi .avatar { width: 28px; height: 28px; font-size: .66rem; }
.rh-c-justifier { width: 1%; text-align: right; white-space: nowrap; }
.rh-justifier summary { list-style: none; }
.rh-justifier summary::-webkit-details-marker { display: none; }
.rh-justifier[open] summary { background: var(--surface-3); border-color: var(--texte-3); }
.rh-justifier-form {
    display: grid; gap: 10px; min-width: 280px; margin-top: 8px; padding: 14px; text-align: left; white-space: normal;
    border-radius: var(--rayon); border: 1px solid var(--bord); background: var(--surface-2); box-shadow: var(--ombre-2);
    animation: rh-apparait var(--d-3) var(--ease-out) both;
}
.rh-justifier-form label { font-size: .8rem; }
.rh-justifier-form .btn { justify-self: start; }
.rh-justifier-form .aide { margin-top: 3px; }
.rh-justifier-titre { display: none; }

/* Grand écran : le formulaire s'ouvre en fenêtre flottante sous le bouton, sans déformer le tableau */
@media (min-width: 1200px) {
    .rh-suivi .tableau-scroll { overflow: visible; }
    .rh-justifier { position: relative; }
    .rh-justifier-form {
        position: absolute; top: calc(100% + 8px); right: 0; z-index: 25; width: 340px; margin: 0;
        background: var(--surface); box-shadow: var(--ombre-3); transform-origin: top right;
        animation: rh-popover var(--d-3) var(--ease-out) both;
    }
    .rh-justifier-form::before {
        content: ''; position: absolute; top: -6px; right: 26px; width: 10px; height: 10px; rotate: 45deg;
        background: var(--surface); border-left: 1px solid var(--bord); border-top: 1px solid var(--bord);
    }
    .rh-justifier-titre { display: block; margin: 0 0 2px; font-size: .9rem; font-weight: 650; color: var(--texte); }
    /* Chaque ligne animée forme son propre empilement : la ligne dont le formulaire est ouvert passe
       au-dessus des suivantes, sinon elles recouvriraient la fenêtre (et intercepteraient les clics) */
    .rh-table-suivi tbody tr:has(details[open]) { position: relative; z-index: 30; }
}

/* Rapport par employé sous 1366 px : chaque employé sur deux niveaux (identité + assiduité, puis les 7 compteurs) */
@media (max-width: 1365px) {
    .rh-rapport .tableau-scroll { overflow: visible; margin: 0; padding: 0; }
    .rh-table-rapport thead { display: none; }
    .rh-table-rapport, .rh-table-rapport tbody { display: block; width: 100%; }
    .rh-table-rapport tbody tr:not(:has(.etat-vide)) {
        display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: center; gap: 10px 14px; padding: 14px 4px;
        border-bottom: 1px solid var(--bord);
    }
    .rh-table-rapport tbody tr:first-child { border-top: 1px solid var(--bord); }
    .rh-table-rapport tbody tr:last-child { border-bottom: 0; }
    .rh-table-rapport td { display: block; padding: 0 !important; border: 0 !important; min-width: 0; }
    .rh-table-rapport .rh-c-nom { grid-column: 1 / 4; }
    .rh-table-rapport .rh-c-assiduite { grid-column: 4 / -1; }
    .rh-table-rapport .rh-assiduite { min-width: 0; }
    .rh-table-rapport td.num { text-align: left; font-weight: 600; }
    .rh-table-rapport td.num::before {
        content: attr(data-label); display: block; margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        font-size: .68rem; font-weight: 600; letter-spacing: .02em; color: var(--texte-3);
    }
}
/* Suivi : resserré aux largeurs intermédiaires */
@media (min-width: 761px) and (max-width: 1100px) {
    .rh-table-suivi th, .rh-table-suivi td { padding-left: 7px; padding-right: 7px; }
    .rh-table-suivi .rh-jour-sem { display: none; }
}

@media (max-width: 760px) {
    .rh-alertes { flex-direction: column; gap: 12px; }
    .rh-legende-assiduite { display: none; }
    .rh-table-rapport tbody tr:not(:has(.etat-vide)) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 8px; padding: 14px 0; }
    .rh-table-rapport tbody tr:first-child { border-top: 0; }
    .rh-table-rapport .rh-c-nom, .rh-table-rapport .rh-c-assiduite { grid-column: 1 / -1; }
    .rh-suivi .tableau-scroll { overflow: visible; margin: 0; padding: 0; }
    .rh-table-suivi thead { display: none; }
    .rh-table-suivi, .rh-table-suivi tbody { display: block; width: 100%; }
    .rh-table-suivi tbody tr:not([hidden]) {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 14px 0;
        grid-template-areas: "nom statut" "date action" "justif action" "motif motif";
        border-bottom: 1px solid var(--bord);
    }
    .rh-table-suivi tbody tr:last-child { border-bottom: 0; }
    .rh-table-suivi td { display: block; padding: 0; border: 0 !important; min-width: 0; }
    .rh-table-suivi td[data-label="Employé"] { grid-area: nom; }
    .rh-table-suivi td[data-label="Statut"] { grid-area: statut; justify-self: end; }
    .rh-table-suivi td[data-label="Date"] { grid-area: date; color: var(--texte-2); font-size: .84rem; }
    .rh-table-suivi td[data-label="Justificatif"] { grid-area: justif; }
    .rh-table-suivi td[data-label="Justificatif"]:has(.rh-vide) { display: none; }
    .rh-table-suivi .personne { min-width: 0; }
    .rh-table-suivi td[data-label="Motif"] { grid-area: motif; font-size: .86rem; color: var(--texte-2); }
    .rh-table-suivi td[data-label="Motif"]:has(.rh-vide) { display: none; }
    .rh-table-suivi .rh-c-justifier { grid-area: action; width: auto; justify-self: end; }
    .rh-table-suivi .rh-c-nom .personne strong { line-height: 1.3; }
    .rh-table-suivi .rh-c-justifier:has(details[open]) { grid-area: auto; grid-row: 4; grid-column: 1 / -1; text-align: left; }
    .rh-table-suivi .rh-ligne-vide td { display: block; }
    .rh-justifier-form { min-width: 0; }
}

/* ---------- Mouvement ---------- */

@keyframes rh-ligne { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes rh-pop { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
@keyframes rh-pop-doux { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes rh-apparait { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes rh-popover { from { opacity: 0; transform: translateY(-4px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes rh-reflet { from { opacity: 1; transform: translateX(0) rotate(18deg); } to { opacity: 0; transform: translateX(520%) rotate(18deg); } }
@keyframes rh-qr-cache { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes rh-qr-ligne { 0% { opacity: 0; transform: translateY(0); } 10% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: translateY(169px); } }

@media print {
    .rh-retour, .rh-profil-actions, .rh-onglets, .rh-barre-actions, .rh-filtres, .rh-puces, .rh-direct-bandeau, .rh-badge-actions { display: none !important; }
    .rh-onglet-contenu { min-height: 0; }
    .rh-profil-banniere { display: none; }
    .rh-profil-corps { margin-top: 0; }
}

/* Feuille verrouillée (paie validée) : champs visiblement inactifs */
.rh-feuille-champs:disabled select, .rh-feuille-champs:disabled input { opacity: .65; cursor: not-allowed; box-shadow: none; }