/* Planning — feuille de style principale */

:root {
    --bleu: #1d4ed8;
    --bleu-fonce: #1e3a8a;
    --encre: #1f2937;
    --muet: #6b7280;
    --fond: #f3f4f6;
    --carte: #ffffff;
    --bord: #e5e7eb;
    --vert: #16a34a;
    --rouge: #dc2626;
    --orange: #d97706;
    --rayon: 10px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    background: var(--fond);
    color: var(--encre);
    font-size: 15px;
    line-height: 1.5;
}

h1 { font-size: 1.5rem; font-weight: 800; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; font-weight: 600; margin: 1.2rem 0 .6rem; }
a { color: var(--bleu); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Barre de navigation --- */
.topbar { background: var(--bleu-fonce); color: #fff; }
.topbar-inner {
    max-width: 1200px; margin: 0 auto; padding: 0 1rem;
    display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
    min-height: 56px;
}
.brand {
    font-weight: 800; font-size: 1.2rem; color: #fff; letter-spacing: -.5px;
}
.brand:hover { text-decoration: none; }
.nav { display: flex; gap: .2rem; flex-wrap: wrap; flex: 1; }
.nav a {
    color: #dbeafe; padding: .45rem .8rem; border-radius: 6px; font-weight: 600;
}
.nav a:hover { background: rgba(255,255,255,.1); text-decoration: none; }
.nav a.actif { background: rgba(255,255,255,.16); color: #fff; }
.topbar-user { display: flex; align-items: center; gap: .8rem; }
.topbar-user > a { color: #dbeafe; font-weight: 600; }

/* --- Structure --- */
.container { max-width: 1200px; margin: 1.5rem auto; padding: 0 1rem; }
.footer { text-align: center; color: var(--muet); font-size: .85rem; padding: 2rem 0; }

.carte {
    background: var(--carte); border: 1px solid var(--bord);
    border-radius: var(--rayon); padding: 1.2rem; margin-bottom: 1rem;
}
.carte.sans-marge { padding: 0; overflow: hidden; }
.carte-etroite { max-width: 560px; }
.carte-lien { display: block; color: inherit; transition: box-shadow .15s; }
.carte-lien:hover { text-decoration: none; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.carte-lien h2 { margin-top: 0; }
.carte-lien p { color: var(--muet); margin-bottom: 0; }

/* Fil d'Ariane : remonter la hiérarchie, discret, au-dessus du titre */
.fil-ariane {
    display: flex; flex-wrap: wrap; align-items: center; gap: .3rem;
    font-size: .85rem; color: var(--muet); margin: 0 0 1rem;
}
.fil-ariane a { color: var(--muet); font-weight: 600; }
.fil-ariane a:hover { color: var(--bleu); text-decoration: none; }
.fil-ariane [aria-current="page"] { color: var(--encre); font-weight: 700; }
.fil-ariane-sep { color: #cbd5e1; }

.entete-section {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem;
}
.entete-section h1, .entete-section h2 { margin: 0; }

.grille-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.grille-soldes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.grille-admin { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }

@media (max-width: 800px) {
    .grille-2col { grid-template-columns: 1fr; }
}

/* --- Cartes de solde / stats --- */
.carte-solde { border-top: 4px solid var(--bleu); margin-bottom: 0; }
.solde-type { font-weight: 600; color: var(--muet); font-size: .85rem; }
.solde-chiffre { font-size: 1.9rem; font-weight: 800; }
.solde-unite { font-size: .85rem; font-weight: 600; color: var(--muet); margin-left: .3rem; }
.solde-detail { font-size: .82rem; color: var(--muet); }
.carte-stat { text-align: center; margin-bottom: 0; }
.stat-chiffre { font-size: 2rem; font-weight: 800; color: var(--bleu); }

/* --- Tableaux --- */
table { width: 100%; border-collapse: collapse; }
table td, table th { padding: .6rem .9rem; text-align: left; }
.tableau thead th {
    font-size: .78rem; text-transform: uppercase; letter-spacing: .4px;
    color: var(--muet); border-bottom: 2px solid var(--bord);
}
table tbody tr, .carte table tr { border-bottom: 1px solid var(--bord); }
table tbody tr:last-child { border-bottom: none; }
.ligne-inactive { opacity: .55; }
.actions { white-space: nowrap; }
.actions > * { margin-right: .4rem; }

/* --- Badges & pastilles --- */
.badge {
    display: inline-block; padding: .15rem .55rem; border-radius: 99px;
    font-size: .78rem; font-weight: 600;
    /* une pastille ne se coupe jamais en deux lignes */
    white-space: nowrap;
}
.badge-ok      { background: #dcfce7; color: #166534; }
.badge-refus   { background: #fee2e2; color: #991b1b; }
.badge-attente { background: #fef3c7; color: #92400e; }
.badge-neutre  { background: #e5e7eb; color: #374151; }
.badge-alerte  { background: var(--rouge); color: #fff; }
.pastille {
    display: inline-block; width: 10px; height: 10px; border-radius: 3px;
    margin-right: .25rem; vertical-align: baseline;
}
.pastille-ferie { background: repeating-linear-gradient(45deg, #cbd5e1 0 3px, #f1f5f9 3px 6px); }

/* --- Formulaires --- */
label { display: block; font-weight: 600; margin: .9rem 0 .3rem; }
label small { font-weight: 400; color: var(--muet); }
/* Énumérer les types laisse tomber ceux qu'on oublie — « tel » retombait sur le
   rendu natif du navigateur, d'où des champs plus fins et bordés de noir au
   milieu des autres. On prend donc tout, sauf ce qui a son propre traitement. */
input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]),
select, textarea {
    width: 100%; padding: .55rem .7rem; border: 1px solid #d1d5db;
    border-radius: 7px; font: inherit; background: #fff;
}
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--bleu); outline-offset: 0; border-color: var(--bleu);
}
input[type=color] { padding: 0; width: 42px; height: 38px; border: 1px solid #d1d5db; border-radius: 7px; background: none; }
.case { display: inline-flex; align-items: center; gap: .4rem; font-weight: 400; margin: .4rem 0 0; }
.case input { width: auto; }
.ligne-2champs { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .ligne-2champs { grid-template-columns: 1fr; } }
.ligne-boutons { display: flex; gap: .8rem; justify-content: flex-end; margin-top: 1.4rem; }
.ligne-ajout { display: flex; gap: .6rem; align-items: center; }
.ligne-ajout input[type=text] { flex: 1; }
.ligne-type { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.ligne-type input[type=text] { flex: 1; min-width: 140px; }
.champ-solde { max-width: 90px; text-align: center; }

.calcul-jours {
    margin-top: .8rem; padding: .6rem .9rem; background: #eff6ff;
    border: 1px solid #bfdbfe; border-radius: 7px; font-weight: 600; color: var(--bleu-fonce);
}

/* --- Boutons --- */
.btn {
    display: inline-block; padding: .5rem 1rem; border-radius: 7px;
    font: inherit; font-weight: 600; cursor: pointer; border: 1px solid transparent;
    text-decoration: none;
}
.btn:hover { text-decoration: none; filter: brightness(1.05); }
.btn-primaire { background: var(--bleu); color: #fff; }
.btn-secondaire { background: #fff; color: var(--encre); border-color: #d1d5db; }
.btn-valider { background: var(--vert); color: #fff; }
.btn-danger { background: var(--rouge); color: #fff; }
.btn-bloc { width: 100%; margin-top: 1.2rem; }
.btn-petit { padding: .3rem .7rem; font-size: .85rem; }
.btn-lien {
    background: none; border: none; color: var(--bleu); padding: 0;
    font: inherit; cursor: pointer; font-weight: 400;
}
.btn-lien:hover { text-decoration: underline; }
.btn-danger-lien { color: var(--rouge); }
.inline { display: inline; }

/* --- Messages flash --- */
.flash { padding: .8rem 1rem; border-radius: 8px; margin-bottom: 1rem; border: 1px solid; }
.flash-succes { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.flash-erreur { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.flash-info   { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }

/* --- Page de connexion --- */
.page-connexion {
    min-height: 70vh; display: flex; align-items: center; justify-content: center;
}
.carte-connexion { width: 100%; max-width: 380px; padding: 2rem; }
.brand-grand {
    text-align: center; font-size: 2rem; font-weight: 800; letter-spacing: -1px;
    color: var(--bleu-fonce); margin: 0;
}
.sous-titre { text-align: center; color: var(--muet); margin: .2rem 0 1.5rem; }

/* --- Validation --- */
.carte-validation { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.validation-infos { display: grid; gap: .25rem; }
.validation-titre { font-size: 1.05rem; }
.validation-actions { display: flex; gap: .6rem; }
.texte-muet { color: var(--muet); font-size: .88rem; }

/* --- Calendrier : barre d'outils --- */
.cal-nav { display: flex; gap: .5rem; flex-wrap: wrap; }
.cal-toolbar {
    display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
    padding: .8rem 1rem;
}
.cal-toolbar select { width: auto; }
.cal-toolbar input[type=search] { width: 220px; }
.cal-switch {
    display: inline-flex; background: var(--fond); border-radius: 8px; padding: 3px;
}
.cal-switch a {
    padding: .35rem .9rem; border-radius: 6px; font-weight: 600; color: var(--muet);
}
.cal-switch a:hover { text-decoration: none; color: var(--encre); }
.cal-switch a.actif { background: #fff; color: var(--bleu-fonce); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.cal-stats { display: flex; gap: .6rem; flex-wrap: wrap; margin-left: auto; }
.cal-stat {
    background: var(--fond); border-radius: 99px; padding: .3rem .8rem; font-size: .82rem; color: var(--muet);
}
.cal-stat strong { color: var(--encre); }
.cal-stat-attente { background: #fef3c7; color: #92400e; }
.cal-stat-attente strong { color: #92400e; }

/* --- Calendrier : vue équipe (planning) --- */
.cal-scroll { overflow-x: auto; }
.cal { min-width: 950px; border-collapse: separate; border-spacing: 0; }
.cal th, .cal td { padding: 0; text-align: center; font-size: .78rem; border-bottom: 1px solid var(--bord); border-right: 1px solid #f1f3f5; }
.cal thead th { padding: .3rem .15rem; background: #fafbfc; border-bottom: 2px solid var(--bord); min-width: 30px; }
.cal .cal-dow { display: block; font-size: .62rem; color: var(--muet); font-weight: 400; }
.cal .cal-nom {
    text-align: left; white-space: nowrap; font-size: .86rem; padding: .4rem .8rem;
    min-width: 170px; max-width: 210px; overflow: hidden; text-overflow: ellipsis;
}
.cal-sticky { position: sticky; left: 0; background: #fff; z-index: 2; box-shadow: 2px 0 4px rgba(0,0,0,.04); }
.cal thead .cal-sticky { background: #fafbfc; z-index: 3; }
.cal-societe { display: block; font-size: .68rem; color: var(--muet); }
.cal-we { background: #f1f5f9; }
.cal-ferie { background: repeating-linear-gradient(45deg, #e2e8f0 0 4px, #f8fafc 4px 8px); }
.cal-auj { box-shadow: inset 2px 0 0 var(--bleu), inset -2px 0 0 var(--bleu); }
thead .cal-auj { box-shadow: inset 2px 0 0 var(--bleu), inset -2px 0 0 var(--bleu), inset 0 3px 0 var(--bleu); }
.cal-ligne-compteur td { height: 22px; font-size: .7rem; color: var(--muet); background: #fafbfc; }
.cal-compteur-alerte { color: var(--rouge) !important; font-weight: 700; }
.cal-cellule { height: 34px; position: relative; }
.cal-abs {
    position: absolute; inset: 5px 0; background: var(--c);
    color: #fff; font-size: .68rem; font-weight: 700; line-height: 24px;
    cursor: pointer;
}
.cal-bar-debut { left: 4px; border-radius: 6px 0 0 6px; }
.cal-bar-fin { right: 4px; border-radius: 0 6px 6px 0; }
.cal-bar-debut.cal-bar-fin { border-radius: 6px; }
.cal-demi-pm { background: linear-gradient(90deg, transparent 50%, var(--c) 50%); color: var(--c); }
.cal-demi-am { background: linear-gradient(90deg, var(--c) 50%, transparent 50%); color: var(--c); }
.cal-attente {
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.45) 0 5px, transparent 5px 10px);
    opacity: .85;
}
.cal-abs:hover { filter: brightness(1.12); }
.cal-libre .cal-plus {
    display: none; position: absolute; inset: 3px; border-radius: 5px;
    color: var(--muet); background: var(--fond); text-decoration: none;
    line-height: 26px; font-weight: 700;
}
.cal-libre:hover .cal-plus { display: block; }
.cal-libre .cal-plus:hover { background: #dbeafe; color: var(--bleu); text-decoration: none; }
.cal-vide { padding: 1.2rem; color: var(--muet); text-align: center; }
.cal-legende { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: .8rem; font-size: .85rem; color: var(--muet); }
.pastille-attente {
    background: #94a3b8;
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.5) 0 3px, transparent 3px 6px);
}

/* --- Calendrier : vue mois (grille) --- */
.cal-mois { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.cal-mois th {
    padding: .5rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .4px;
    color: var(--muet); background: #fafbfc; border-bottom: 2px solid var(--bord);
}
.cal-mois td { border-bottom: 1px solid var(--bord); border-right: 1px solid #f1f3f5; vertical-align: top; }
.cm-jour { height: 92px; padding: .3rem !important; }
.cm-vide { background: #fafbfc; }
.cm-num { font-weight: 700; font-size: .82rem; margin-bottom: .2rem; display: flex; align-items: baseline; gap: .4rem; }
.cm-ferie { font-size: .65rem; color: var(--orange); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-auj { background: #eff6ff; }
.cm-auj .cm-num { color: var(--bleu); }
.cm-chip {
    background: var(--c); color: #fff; border-radius: 4px; padding: 1px 5px;
    font-size: .68rem; font-weight: 600; margin-bottom: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default;
}
.cm-plus { font-size: .68rem; color: var(--muet); font-weight: 600; cursor: default; }

/* --- Calendrier : interactions avancées --- */
.cal-astuce { color: var(--muet); font-size: .85rem; margin: -.3rem 0 .8rem; }
.cal-outils { display: flex; gap: .4rem; }
.cal-lundi { border-left: 2px solid #cbd5e1 !important; }
.cal-sem {
    display: block; font-size: .58rem; color: var(--bleu); font-weight: 700;
    line-height: 1; margin-bottom: 1px;
}
.cal-ligne-salarie:hover td { background-color: #f8fafc; }
.cal-ligne-salarie:hover .cal-we { background-color: #e8edf3; }
.cal-ligne-salarie:hover .cal-sticky { background-color: #f8fafc; }
.cal-sel { background: #bfdbfe !important; box-shadow: inset 0 0 0 1px var(--bleu); }
.cal-sel .cal-plus { display: none !important; }
body.cal-glisse { user-select: none; cursor: crosshair; }

/* --- Calendrier : vue année --- */
.cal-annee { min-width: 820px; }
.cal-annee th, .cal-annee td { padding: .45rem .35rem; }
.cal-annee .cal-nom { min-width: 170px; }
.ca-mois-lien { color: var(--muet); font-weight: 600; text-transform: capitalize; }
.ca-mois-lien:hover { color: var(--bleu); text-decoration: none; }
.ca-cellule { min-width: 48px; }
.ca-val {
    display: block; margin: 0 auto; min-width: 34px; padding: .2rem .3rem;
    border-radius: 6px; font-weight: 700; font-size: .8rem; text-align: center;
    background: rgba(29, 78, 216, calc(.12 + var(--i) * .78));
    color: #fff; text-decoration: none;
}
.ca-val[style*="--i: 0"] { color: var(--bleu-fonce); }
.ca-val:hover { text-decoration: none; outline: 2px solid var(--bleu); }
.ca-total { text-align: center; background: #fafbfc; font-size: .82rem; }
.cal-annee tfoot td { border-top: 2px solid var(--bord); }

/* --- Impression --- */
@media print {
    .topbar, .cal-toolbar, .cal-nav, .cal-astuce, .footer,
    .cal-plus, .btn, .cal-tip, .cal-modal, #cal-recherche { display: none !important; }
    body { background: #fff; font-size: 11px; }
    .container { max-width: none; margin: 0; padding: 0; }
    .carte { border: none; box-shadow: none; }
    .cal-scroll { overflow: visible; }
    .cal, .cal-annee { min-width: 0; width: 100%; }
    .cal-abs, .cm-chip, .ca-val, .cal-we, .cal-ferie, .cal-attente {
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    .entete-section h1 { font-size: 1.2rem; }
}

/* --- Liste des utilisateurs --- */
.barre-filtre { display: flex; align-items: center; gap: 1rem; padding: .7rem 1rem; }
.barre-filtre input { max-width: 340px; margin: 0; }
.tableau-users td { vertical-align: middle; }
.cellule-user { display: flex; align-items: center; gap: .7rem; }
.avatar {
    width: 36px; height: 36px; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--teinte) 14%, #fff);
    color: var(--teinte); font-weight: 700; font-size: .8rem; letter-spacing: .5px;
    border: 1.5px solid color-mix(in srgb, var(--teinte) 35%, #fff);
}
@supports not (color: color-mix(in srgb, red 50%, white)) {
    .avatar { background: #eff6ff; border-color: #bfdbfe; }
}
.user-email { display: block; font-size: .78rem; color: var(--muet); }
.badge-role-admin { background: #dbeafe; color: #1d4ed8; }
.badge-role-manager { background: #ccfbf1; color: #0f766e; }
.statut-point {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    margin-right: .45rem; vertical-align: 1px;
}
.statut-actif { background: var(--vert); box-shadow: 0 0 0 3px #dcfce7; }
.statut-inactif { background: #94a3b8; box-shadow: 0 0 0 3px #f1f5f9; }
.actions-icones { white-space: nowrap; }
.actions-icones .inline { display: inline-block; }
.btn-icone {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 8px; border: 1px solid transparent;
    background: transparent; color: var(--muet); cursor: pointer; padding: 0;
    vertical-align: middle; margin-right: 2px;
}
.btn-icone svg { width: 16px; height: 16px; }
.btn-icone:hover { background: #eff6ff; color: var(--bleu); border-color: #bfdbfe; text-decoration: none; }
.btn-icone-danger:hover { background: #fef2f2; color: var(--rouge); border-color: #fecaca; }
.btn-icone-ok:hover { background: #f0fdf4; color: var(--vert); border-color: #bbf7d0; }

/* Un tableau plus large que sa carte défile en son sein au lieu de déborder. */
.tableau-defilant { overflow-x: auto; }

/* Témoin de prise en main du compte : même gabarit que les icônes d'action,
   mais un ÉTAT, pas un bouton — allumé vert quand l'utilisateur s'est
   connecté et a fait sien son mot de passe, éteint sinon. */
.temoin-connexion { cursor: help; }
.temoin-connexion.allume { color: var(--vert); filter: drop-shadow(0 0 3px rgba(34, 197, 94, .6)); }
.temoin-connexion.allume:hover { background: #f0fdf4; border-color: #bbf7d0; color: var(--vert); }
.temoin-connexion.eteint { color: #d1d5db; }
.temoin-connexion.eteint:hover { background: transparent; border-color: transparent; color: #d1d5db; }
.ligne-inactive .cellule-user, .ligne-inactive td { opacity: .55; }
.ligne-inactive .actions-icones { opacity: 1; }

/* --- Dispense de congés (dirigeants) --- */
.bloc-dispense {
    border: 1px dashed var(--bord); border-radius: 8px;
    padding: .7rem .9rem; margin: .8rem 0;
    background: #fafbfc;
}
.bloc-dispense .aide-champ { margin-bottom: 0; }
.badge-dispense { background: #ede9fe; color: #5b21b6; }

/* --- Identité visuelle Planning --- */
.brand { display: inline-flex; align-items: center; gap: .5rem; }
.brand-icone { width: 26px; height: 26px; border-radius: 6px; }
.logo-connexion { display: block; max-width: 320px; width: 100%; margin: 0 auto .6rem; }

/* --- Logos de sociétés --- */
.logo-societe {
    width: 22px; height: 22px; border-radius: 5px; object-fit: contain;
    background: #fff; border: 1px solid var(--bord); flex: none;
    display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
}
.logo-vide { font-size: .75rem; font-weight: 700; color: var(--muet); background: var(--fond); }
.logo-societe-grand {
    width: 40px; height: 40px; border-radius: 8px; object-fit: contain;
    background: #fff; border: 1px solid var(--bord); vertical-align: middle; margin-right: .35rem;
}
.logo-societe-mini {
    width: 13px; height: 13px; border-radius: 3px; object-fit: contain;
    vertical-align: -2px; margin-right: 3px;
}
.societe-lien { display: inline-flex; align-items: center; gap: .55rem; color: inherit; }
.societe-lien:hover { text-decoration: none; color: var(--bleu); }

/* --- Fiche société --- */
.grille-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: start; }
@media (max-width: 900px) { .grille-2col { grid-template-columns: 1fr; } }
.aide-champ { font-size: .8rem; color: var(--muet); margin: .25rem 0 .8rem; }
.separateur { border: none; border-top: 1px solid var(--bord); margin: 1rem 0; }
/* Un réglage isolé sur sa ligne : à gauche l'intitulé et ce qu'il entraîne,
   à droite la commande. Le trait le sépare de ce qui précède, car il ne
   relève pas du même registre que le bloc au-dessus de lui. */
.ligne-reglage {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--bord);
}
.insee-resultats { margin-top: 1rem; display: flex; flex-direction: column; gap: .6rem; }
.insee-resultat {
    display: flex; align-items: center; justify-content: space-between; gap: .8rem;
    border: 1px solid var(--bord); border-radius: 8px; padding: .6rem .8rem;
}
.insee-resultat:hover { border-color: var(--bleu); background: #f8fafc; }

/* --- Infobulle --- */
.cal-tip {
    position: fixed; z-index: 50; background: var(--encre); color: #fff;
    padding: .45rem .7rem; border-radius: 7px; font-size: .78rem; line-height: 1.45;
    max-width: 260px; pointer-events: none; white-space: pre-line;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
}

/* --- Fiche absence (modal) --- */
.cal-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; }
.cal-modal-fond { position: absolute; inset: 0; background: rgba(15,23,42,.45); }
.cal-modal-boite { position: relative; width: 100%; max-width: 420px; margin: 1rem; }
.cal-modal-boite h2 { margin-top: 0; }
.cal-modal-boite .fiche { margin-bottom: 1rem; }

/* --- Fiche détail --- */
.fiche { display: grid; grid-template-columns: 140px 1fr; gap: .5rem 1rem; margin: 0; }
.fiche dt { font-weight: 600; color: var(--muet); }
.fiche dd { margin: 0; }

/* --- Pages d'erreur --- */
.page-erreur { text-align: center; padding: 4rem 1rem; }
.page-erreur h1 { font-size: 3rem; }

/* ═══════════════════════════════════════════════════════════════
   Design 2.0 — couche de modernisation globale
   ═══════════════════════════════════════════════════════════════ */

:root {
    --rayon: 12px;
    --fond: #f5f7fa;
    --bord: #e7ebf0;
    --ombre-douce: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px -16px rgba(15, 23, 42, .18);
}

body {
    background: linear-gradient(180deg, #eef2f7 0%, var(--fond) 240px);
    -webkit-font-smoothing: antialiased;
}

/* --- Barre de navigation : dégradé + relief --- */
.topbar {
    background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%);
    box-shadow: 0 2px 12px rgba(30, 58, 138, .28);
    position: sticky; top: 0; z-index: 40;
}
.nav a { border-radius: 8px; font-size: .92rem; }
.nav a.actif { background: rgba(255,255,255,.18); box-shadow: inset 0 -2px 0 rgba(255,255,255,.55); }
.brand-icone { box-shadow: 0 1px 4px rgba(0,0,0,.25); }

/* --- Cartes : plus aériennes --- */
.carte {
    border-color: var(--bord);
    box-shadow: var(--ombre-douce);
}

/* --- Boutons --- */
.btn { border-radius: 10px; transition: transform .06s ease, box-shadow .15s ease, background .15s ease; }
.btn:active { transform: translateY(1px); }
.btn-primaire {
    background: linear-gradient(180deg, #2563eb, #1d4ed8);
    box-shadow: 0 1px 2px rgba(29, 78, 216, .35), 0 4px 12px -4px rgba(29, 78, 216, .5);
    border: none;
}
.btn-primaire:hover { background: linear-gradient(180deg, #1d4ed8, #1e40af); }
.btn-secondaire { background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
.btn-secondaire:hover { border-color: #cbd5e1; background: #f8fafc; }

/* --- Champs de saisie --- */
/* Le champ fichier est exclu : la règle rognait le bouton natif du navigateur.
   Son habillage vit dans .champ-fichier (helpers : champ_fichier). */
input:not([type=file]), select, textarea { border-radius: 10px !important; transition: border-color .12s, box-shadow .12s; }
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--bleu) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}

/* --- Tableaux --- */
.tableau thead th, .cal thead th, .cal-mois thead th {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--muet); font-weight: 700;
}
.tableau tbody tr { transition: background .1s; }
.tableau tbody tr:hover { background: #f8fafc; }

/* --- Badges arrondis --- */
.badge { border-radius: 999px; font-weight: 600; }

/* --- Messages flash --- */
.flash { border-radius: 10px; border-left: 4px solid currentColor; box-shadow: var(--ombre-douce); }

/* ═══ Calendrier : barres d'absence raffinées ═══ */
.cal-cellule { height: 40px; }
.cal .cal-nom { font-weight: 500; }
.cal-abs {
    /* couleur adoucie : plus de blocs criards */
    --cd: var(--c);
    inset: 10px 0;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--cd) 72%, #fff) 0%,
        color-mix(in srgb, var(--cd) 88%, #fff) 100%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cd) 55%, #fff),
                0 1px 3px color-mix(in srgb, var(--cd) 30%, transparent);
    color: color-mix(in srgb, var(--cd) 60%, #1f2937);
    line-height: 20px;
    font-size: .66rem;
}
@supports not (color: color-mix(in srgb, red 50%, white)) {
    .cal-abs { background: var(--c); opacity: .82; color: #fff; }
}
.cal-bar-debut { left: 5px; border-radius: 999px 0 0 999px; }
.cal-bar-fin { right: 5px; border-radius: 0 999px 999px 0; }
.cal-bar-debut.cal-bar-fin { border-radius: 999px; }
.cal-demi-pm {
    background: linear-gradient(90deg, transparent 50%, color-mix(in srgb, var(--c) 80%, #fff) 50%);
    box-shadow: none; border-radius: 999px;
}
.cal-demi-am {
    background: linear-gradient(90deg, color-mix(in srgb, var(--c) 80%, #fff) 50%, transparent 50%);
    box-shadow: none; border-radius: 999px;
}
.cal-attente {
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.55) 0 4px, transparent 4px 8px);
    opacity: .9;
}
.cal-abs:hover { filter: none; transform: scaleY(1.12); transition: transform .1s; }

/* Week-ends et fériés plus doux */
.cal-we { background: #f6f8fb; }
.cal-ferie { background: repeating-linear-gradient(45deg, #eef1f6 0 5px, #f9fafc 5px 10px); }

/* Aujourd'hui : halo bleu doux au lieu des traits durs */
.cal-auj { box-shadow: none; background: #eef4ff !important; }
thead th.cal-auj, thead td.cal-auj {
    box-shadow: inset 0 3px 0 var(--bleu);
    background: #eef4ff !important; color: var(--bleu);
}

/* Compteur d'absents : discret */
.cal-ligne-compteur td { font-size: .68rem; }

/* Cellule « + » de déclaration */
.cal-libre .cal-plus { border-radius: 999px; inset: 8px 4px; line-height: 22px; background: #eef2f7; }

/* Légende en chips */
.cal-legende { gap: .5rem; }
.cal-legende > span {
    display: inline-flex; align-items: center; gap: .45rem;
    background: #fff; border: 1px solid var(--bord); border-radius: 999px;
    padding: .28rem .75rem; font-size: .8rem; box-shadow: 0 1px 2px rgba(15,23,42,.04);
}

/* Barre d'outils calendrier */
.cal-switch { background: #eef2f7; border-radius: 10px; }
.cal-switch a { border-radius: 8px; }
.cal-stat { background: #eef2f7; }

/* Fiche absence : plus premium */
.cal-modal-fond { background: rgba(15, 23, 42, .4); backdrop-filter: blur(3px); }
.cal-modal-boite { border-radius: 16px; box-shadow: 0 24px 64px -16px rgba(15, 23, 42, .4); }

/* Vue mois */
.cm-chip {
    border-radius: 999px;
    background: color-mix(in srgb, var(--c) 16%, #fff);
    color: color-mix(in srgb, var(--c) 75%, #1f2937);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, #fff);
    font-weight: 600;
}
@supports not (color: color-mix(in srgb, red 50%, white)) {
    .cm-chip { background: var(--c); color: #fff; }
}
.cm-auj { background: #eef4ff; }

/* Vue année */
.ca-val { border-radius: 8px; }

/* ═══════════════════════════════════════════════════════════════
   Responsive & finitions (audit qualité)
   ═══════════════════════════════════════════════════════════════ */

/* Les tableaux en carte défilent horizontalement au lieu d'être coupés */
.carte.sans-marge { overflow-x: auto; overflow-y: visible; }
.carte.sans-marge > table { min-width: 640px; }
.cal-mois { min-width: 640px; }

/* Barre de navigation compacte sur petit écran */
@media (max-width: 780px) {
    .topbar-inner { gap: .6rem; padding: .5rem 1rem; }
    .brand { font-size: 1.05rem; }
    .nav { gap: .1rem; width: 100%; order: 3; overflow-x: auto; flex-wrap: nowrap; }
    .nav a { padding: .35rem .6rem; font-size: .85rem; white-space: nowrap; }
    .topbar-user { margin-left: auto; font-size: .85rem; }
    .container { margin-top: 1rem; }
    h1 { font-size: 1.25rem; }
    .cal-toolbar { gap: .5rem; padding: .7rem; }
    .cal-toolbar input[type=search] { width: 100%; }
    .cal-stats { margin-left: 0; width: 100%; }
    .grille-2col { grid-template-columns: 1fr; }
    .ligne-boutons { flex-wrap: wrap; }
}

/* Contraste du libellé de jour férié en vue mois (texte très petit) */
.cm-ferie { color: #b45309; }

/* Bloc de boutons générique (remplace l'emprunt à .cal-nav) */
.groupe-boutons { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Barre de filtre : cohérente entre les listes d'administration */
.barre-filtre input { flex: 1; }

/* ═══════════════════════════════════════════════════════════════
   Photos de profil
   ═══════════════════════════════════════════════════════════════ */

.avatar-photo { object-fit: cover; background: #fff; padding: 0; }
.avatar-mini { width: 26px; height: 26px; font-size: .65rem; border-width: 1px; }
.avatar-grand { width: 84px; height: 84px; font-size: 1.6rem; }

/* Bloc photo du formulaire utilisateur */
.bloc-photo {
    display: flex; align-items: center; gap: 1.2rem;
    padding: 1rem; margin-bottom: .6rem;
    background: #fafbfc; border: 1px solid var(--bord); border-radius: 10px;
}
.photo-apercu { flex: none; }
.photo-actions { display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; }
.photo-actions .aide-champ { margin: 0; }
.photo-actions label.btn { margin: 0; cursor: pointer; }

/* Zone de recadrage */
.recadrage {
    padding: 1rem; margin-bottom: 1rem;
    border: 1px solid var(--bord); border-radius: 10px; background: #fff;
}
.recadrage-zone {
    position: relative; width: 260px; height: 260px; max-width: 100%;
    margin: 0 auto .8rem; overflow: hidden; border-radius: 12px;
    /* Blanc : c'est la couleur que prend le vide autour d'une photo dézoomée
       dans l'image finale — l'aperçu montre le vrai résultat. */
    background: #fff; box-shadow: inset 0 0 0 1px var(--bord);
    cursor: grab; touch-action: none; user-select: none;
}
.recadrage-zone:active { cursor: grabbing; }
.recadrage-zone img { position: absolute; max-width: none; }
/* Cercle de prévisualisation du cadrage final */
.recadrage-masque {
    position: absolute; inset: 0; pointer-events: none;
    box-shadow: inset 0 0 0 9999px rgba(15, 23, 42, .45);
    border-radius: 50%;
}
.recadrage-zoom { flex: 1; margin: 0; }
.recadrage label { margin-top: .4rem; }
.recadrage-outils { display: flex; align-items: center; justify-content: center; gap: .45rem; flex-wrap: wrap; margin: 0 0 .6rem; }
.recadrage-btn { font-size: 1.15rem; font-weight: 700; width: 2rem; height: 2rem; border: 1px solid var(--bord); border-radius: 8px; background: #fff; }
.recadrage-ia { border-color: #c4b5fd !important; color: #5b21b6 !important; background: #faf8ff !important; }
.recadrage-ia:disabled { opacity: .7; cursor: progress; }

/* Avatar dans la barre de navigation */
.topbar-user { gap: .6rem; }
.topbar-avatar {
    display: inline-flex; align-items: center; gap: .5rem;
    color: #dbeafe; font-weight: 600;
}
.topbar-avatar:hover { text-decoration: none; color: #fff; }
.topbar-avatar .avatar {
    width: 30px; height: 30px; font-size: .7rem;
    border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.14); color: #fff;
}
.topbar-avatar .avatar-photo { border-color: rgba(255,255,255,.5); }

/* Avatar dans le calendrier */
/* La pastille et le nom partagent la même ligne de base optique */
.cal-nom .avatar-mini { margin-right: .5rem; vertical-align: middle; }

/* Bascule « salariés concernés / tout l'effectif » */
.cal-bascule {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .4rem .85rem; border-radius: 999px; font-size: .85rem; font-weight: 600;
    background: #eef2f7; color: var(--muet); border: 1px solid transparent;
}
.cal-bascule:hover { text-decoration: none; background: #e2e8f0; color: var(--encre); }
.cal-bascule.actif { background: #dbeafe; color: var(--bleu); border-color: #bfdbfe; }

/* Nom du salarié : plus de bloc société sous le nom */
.cal-nom-texte { display: inline-block; vertical-align: middle; line-height: 1.2; }
.cal .cal-nom { padding-top: .5rem; padding-bottom: .5rem; white-space: nowrap; }

/* Tableau des absences du tableau de bord */
.tableau-absences td { vertical-align: middle; padding: .55rem .9rem; }
.tableau-absences .col-qui { width: 45%; }
.tableau-absences .cellule-user { gap: .55rem; }
.tableau-absences .user-email { font-size: .75rem; }
.en-cours { color: var(--rouge); font-size: .8rem; }

/* ═══════════════════════════════════════════════════════════════
   Mise en page élargie
   ═══════════════════════════════════════════════════════════════ */

:root { --largeur-page: 1560px; }

.container,
.topbar-inner { max-width: var(--largeur-page); }

/* Le tableau de bord profite de la largeur : la colonne de droite
   (absences en cours) est plus généreuse que la colonne des demandes. */
@media (min-width: 1100px) {
    .grille-2col { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 1.8rem; }
    /* Les fiches à deux volets restent équilibrées (société, mon compte) */
    .grille-2col.grille-egale { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Cartes de soldes : elles s'étalent au lieu de rester serrées à gauche */
.grille-soldes { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* Les tableaux respirent quand la place le permet */
.tableau-absences .col-qui { width: 38%; }
.cal-toolbar { gap: 1rem; }

/* Grille ramenée à une colonne pleine largeur (ex. tableau de bord d'un dispensé) */
.grille-2col.grille-1col { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) {
    .grille-2col.grille-1col { grid-template-columns: minmax(0, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════
   Déclaration d'absence
   ═══════════════════════════════════════════════════════════════ */

.decl-grille {
    display: grid; grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1.5rem; align-items: start;
}
@media (max-width: 980px) { .decl-grille { grid-template-columns: 1fr; } }

.decl-etape { margin-bottom: 1.2rem; }
.decl-etape:last-child { margin-bottom: 0; }
.decl-titre {
    display: flex; align-items: center; gap: .6rem;
    font-weight: 700; font-size: 1.02rem; margin-bottom: .9rem;
}
.decl-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%; flex: none;
    background: var(--bleu); color: #fff; font-size: .82rem; font-weight: 700;
}
.decl-etape > select { margin: 0; }

/* Choix du type sous forme de pastilles cliquables */
.decl-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem; }
.decl-type {
    display: flex; align-items: center; gap: .55rem; margin: 0;
    padding: .65rem .8rem; border: 1.5px solid var(--bord); border-radius: 10px;
    cursor: pointer; font-weight: 500; background: #fff;
    transition: border-color .12s, background .12s, box-shadow .12s;
}
.decl-type:hover { border-color: color-mix(in srgb, var(--c) 55%, #fff); background: #fafbfc; }
.decl-type input { position: absolute; opacity: 0; width: 0; height: 0; }
.decl-type-pastille {
    width: 16px; height: 16px; border-radius: 50%; flex: none;
    background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, #fff);
}
.decl-type-libelle { flex: 1; }
.decl-type-note { color: var(--muet); font-size: .72rem; font-weight: 400; }
.decl-type:has(input:checked) {
    border-color: var(--c);
    background: color-mix(in srgb, var(--c) 8%, #fff);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 15%, #fff);
}
.decl-type:has(input:focus-visible) { outline: 2px solid var(--bleu); outline-offset: 2px; }
@supports not (selector(:has(*))) {
    .decl-type input:checked ~ .decl-type-libelle { font-weight: 700; }
}

/* Raccourcis de période */
.decl-raccourcis { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.btn-raccourci {
    padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--bord);
    background: var(--fond); font: inherit; font-size: .82rem; font-weight: 600;
    color: var(--muet); cursor: pointer;
}
.btn-raccourci:hover { background: #dbeafe; color: var(--bleu); border-color: #bfdbfe; }

/* Récapitulatif latéral */
.decl-resume-carte { position: sticky; top: 76px; }
.decl-resume-carte h2 { margin-top: 0; }
.decl-resume .fiche { margin-bottom: 1rem; }
.decl-resume .calcul-jours { margin-bottom: 1rem; text-align: center; font-size: 1.05rem; }
.decl-avertissement {
    background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
    border-radius: 8px; padding: .6rem .8rem; font-size: .82rem; margin: 0;
}
.decl-resume .ligne-boutons { margin-top: 1rem; }

/* Bouton de déconnexion : lisible sur le bandeau bleu (il était bleu sur bleu) */
.btn-deconnexion {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .4rem .8rem; border-radius: 8px;
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22);
    color: #eff6ff; font: inherit; font-size: .88rem; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: background .12s, border-color .12s, color .12s;
}
.btn-deconnexion:hover { background: rgba(255, 255, 255, .22); border-color: rgba(255,255,255,.4); color: #fff; }
.btn-deconnexion:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.btn-deconnexion svg { width: 17px; height: 17px; flex: none; }

/* Sur petit écran, seule l'icône reste */
@media (max-width: 780px) {
    .btn-deconnexion { padding: .4rem .55rem; }
    .btn-deconnexion-texte { display: none; }
    .topbar-avatar span { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Contrôles de formulaire modernisés (listes déroulantes, recherche)
   ═══════════════════════════════════════════════════════════════ */

/* Chevron dessiné à la place de la flèche native du navigateur */
select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.25' 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 .7rem center;
    padding-right: 2.2rem !important;
    cursor: pointer;
}
select:hover { border-color: #cbd5e1; }
select:focus {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
select::-ms-expand { display: none; }

/* Champ de recherche avec loupe vectorielle intégrée */
.champ-recherche { position: relative; display: inline-flex; }
.champ-recherche input[type=search] {
    padding-left: 2.35rem !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left .75rem center;
}
.champ-recherche input[type=search]:focus {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231d4ed8' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
}
/* Croix native de Chrome : discrète et alignée */
.champ-recherche input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: none; appearance: none;
    width: 15px; height: 15px; cursor: pointer; opacity: .45;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat;
}
.champ-recherche input[type=search]::-webkit-search-cancel-button:hover { opacity: .9; }

/* Barre d'outils du calendrier : tous les contrôles à la même hauteur */
.cal-toolbar select,
.cal-toolbar .champ-recherche input[type=search],
.cal-toolbar .cal-bascule,
.cal-toolbar .btn {
    height: 38px;
    padding-top: 0; padding-bottom: 0;
    font-size: .9rem;
}
.cal-toolbar .champ-recherche { flex: 1; min-width: 200px; max-width: 300px; }
.cal-toolbar .champ-recherche input[type=search] { width: 100%; }
.cal-toolbar .cal-switch { height: 38px; padding: 3px; }
.cal-toolbar .cal-switch a { display: inline-flex; align-items: center; }
.cal-toolbar .cal-bascule { display: inline-flex; align-items: center; }
.cal-toolbar .btn-petit { font-size: .85rem; padding-left: .8rem; padding-right: .8rem; }
.cal-toolbar .cal-outils .btn { display: inline-flex; align-items: center; gap: .3rem; }

/* Bandeau de filtres des listes d'administration */
.barre-filtre { flex-wrap: wrap; gap: .6rem; }
.barre-filtre .champ-recherche { flex: 1 1 260px; min-width: 240px; max-width: 380px; }
.barre-filtre .champ-recherche input { width: 100%; }
.barre-filtre select,
.barre-filtre .champ-recherche input[type=search] { height: 38px; padding-top: 0; padding-bottom: 0; font-size: .9rem; }
.barre-filtre select { width: auto; min-width: 150px; }
.compteur-filtre { margin-left: auto; white-space: nowrap; font-size: .88rem; }
.barre-filtre .btn-raccourci { height: 38px; }

/* Absences des 6 prochains mois (tableau de bord) */
.resume-absences { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.2rem; }

.mois-bloc { margin-bottom: 1.4rem; }
.mois-entete { display: flex; align-items: center; gap: .7rem; margin-bottom: .5rem; }
.mois-entete h3 {
    margin: 0; font-size: .95rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; color: var(--bleu-fonce);
}
.mois-compte {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 .4rem; border-radius: 999px;
    background: #dbeafe; color: var(--bleu); font-size: .75rem; font-weight: 700;
}
.mois-lien { margin-left: auto; font-size: .82rem; font-weight: 600; }

.tableau-absences .col-quand { text-align: right; white-space: nowrap; color: var(--muet); font-size: .88rem; }
.tableau-absences .duree {
    display: inline-block; margin-left: .5rem; padding: .1rem .45rem;
    background: var(--fond); border-radius: 999px; font-size: .78rem; font-weight: 600; color: var(--encre);
}
.ligne-en-cours { background: #fff7ed; }
.etiquette-en-cours {
    display: inline-block; margin-right: .5rem; padding: .1rem .5rem;
    background: #fed7aa; color: #9a3412; border-radius: 999px;
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
}

/* ═══════════════════════════════════════════════════════════════
   Registre unique du personnel
   ═══════════════════════════════════════════════════════════════ */

.rup-intro { max-width: 70ch; margin-bottom: 1.2rem; }
.rup-note { margin-top: 1rem; font-size: .85rem; max-width: 80ch; }
.rup-sous-titre { margin-top: 1.8rem; }


.rup td, .rup th { font-size: .85rem; }
.rup .rup-num { width: 42px; text-align: center; color: var(--muet); }
.ligne-sortie { background: #fafbfc; color: var(--muet); }
.ligne-sortie strong { font-weight: 600; }
.texte-alerte { color: var(--orange); font-size: .8rem; }
.salarie-fige { margin: .2rem 0 .6rem; font-size: 1.05rem; }
.badge-role-rh { background: #fae8ff; color: #86198f; }

.titre-etab { font-weight: 400; color: var(--muet); }

/* Gestion des établissements sur la fiche société */
.etab-ajout { margin-top: 1rem; flex-wrap: wrap; }
.etab-ajout input { flex: 1; min-width: 140px; }

/* ───────── Comité social et économique ───────── */
.badge-cse { background: #fff7ed; color: #9a3412; border: 1px solid #fdba74; }
.bandeau-cse {
    display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .9rem;
    padding: .7rem 1rem; margin-bottom: .9rem;
}

/* ───────── Registre : colonnes qui ne doivent jamais se couper ───────── */
.rup td:nth-last-child(3),          /* Entrée */
.rup td:nth-last-child(2) { white-space: nowrap; }   /* Sortie */
.rup td:nth-last-child(2) .user-email { white-space: normal; }   /* le motif peut passer à la ligne */

/* ═════════ Page « Registre unique du personnel » ═════════ */

/* Encart de rappel légal, en tête de page */
.encart-legal {
    display: flex; gap: .9rem; align-items: flex-start;
    background: #f8fafc; border-left: 3px solid var(--bleu);
    padding: .95rem 1.2rem; margin-bottom: 1.4rem;
}
.encart-icone { width: 22px; height: 22px; flex: none; color: var(--bleu); margin-top: .1rem; }
.encart-texte { min-width: 0; }
.encart-texte > strong {
    display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .4px;
    color: var(--bleu-fonce); margin-bottom: .25rem;
}
.encart-texte p { margin: 0; color: var(--muet); font-size: .9rem; max-width: 105ch; }
.encart-texte p strong { color: var(--encre); font-weight: 600; }

/* Tuiles société : toutes bâties pareil, en-tête + chiffres + pied de puces */
.grille-registres {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
}
.carte-registre {
    display: flex; flex-direction: column; padding: 0; margin-bottom: 0;
    overflow: hidden; transition: box-shadow .15s, border-color .15s;
}
.carte-registre:hover { border-color: var(--bleu); box-shadow: 0 6px 18px -8px rgba(29,78,216,.4); }

.registre-lien { display: block; color: inherit; padding: 1.1rem 1.2rem 1rem; flex: 1; }
.registre-lien:hover { text-decoration: none; }
.registre-lien:hover .registre-identite strong { color: var(--bleu); }

.registre-entete { display: flex; align-items: center; gap: .75rem; margin-bottom: .9rem; }
.registre-identite { min-width: 0; }
.registre-identite strong { display: block; font-size: 1.02rem; }
.registre-entete .user-email {
    display: block; font-size: .76rem; color: var(--muet);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Chiffre puis libellé sur la même ligne, alignés sur la ligne de base */
.registre-chiffres {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem;
    margin: 0; font-size: .86rem; color: var(--muet);
}
.registre-chiffre { white-space: nowrap; }
.registre-chiffre strong { font-size: 1.35rem; font-weight: 800; color: var(--bleu); margin-right: .18rem; }
.registre-chiffre-muet strong { color: var(--encre); }
.registre-sep { color: var(--bord); }

/* Pied présent sur toutes les tuiles, même hauteur partout */
.registre-pied {
    margin-top: auto;
    display: flex; align-items: center; flex-wrap: wrap; gap: .4rem;
    min-height: 44px; padding: .5rem 1.2rem;
    background: #f8fafc; border-top: 1px solid var(--bord);
}
.puce {
    display: inline-flex; align-items: center; gap: .35rem;
    background: #fff; border: 1px solid var(--bord); border-radius: 999px;
    padding: .16rem .6rem; font-size: .78rem; font-weight: 600;
    color: var(--encre); max-width: 100%; white-space: nowrap;
}
.puce-etab:hover { text-decoration: none; border-color: var(--bleu); color: var(--bleu); }
.puce-nb {
    background: #dbeafe; color: var(--bleu); border-radius: 999px;
    padding: 0 .35rem; font-size: .72rem; font-weight: 700;
}
.puce-cse { background: #fff7ed; border-color: #fdba74; color: #9a3412; min-width: 0; }
.puce-cse .puce-texte {
    font-weight: 400; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.puce-alerte { background: #fffbeb; border-color: #fcd34d; color: var(--orange); }

/* Bandeau CSE en tête du registre d'une société */
.bandeau-cse {
    display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .9rem;
    padding: .7rem 1rem; margin-bottom: .9rem;
}
.bandeau-cse .cse-membre { white-space: nowrap; }
.bandeau-cse .cse-membre + .cse-membre::before { content: "· "; color: var(--muet); }
.registre-cse-manquant { color: var(--orange); background: #fffbeb; border-color: #fcd34d; }


/* ───────── Logo de société : aperçu et téléversement ───────── */
.logo-bloc { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.logo-apercu {
    /* L'aperçu montre l'image à sa taille RÉELLE (128 px) : juger un logo sur
       une vignette réduite ne dit rien de ce qu'il rendra à l'écran. */
    width: 152px; height: 152px; flex: none;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--bord); border-radius: 12px; background: #fff;
    /* damier discret : rend la transparence visible */
    background-image: linear-gradient(45deg, #f1f5f9 25%, transparent 25%, transparent 75%, #f1f5f9 75%),
                      linear-gradient(45deg, #f1f5f9 25%, transparent 25%, transparent 75%, #f1f5f9 75%);
    background-size: 14px 14px; background-position: 0 0, 7px 7px;
}
.logo-apercu img { width: 128px; height: 128px; object-fit: contain; }
.logo-apercu-vide { font-size: 1.8rem; font-weight: 800; color: var(--muet); }
.logo-actions { flex: 1; min-width: 240px; }
.logo-actions .aide-champ { margin-top: 0; }
.logo-envoi { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .5rem 0; }
.logo-envoi input[type=file] { flex: 1; min-width: 170px; font-size: .85rem; }

/* ───────── Progression d'une absence en cours (tableau de bord) ───────── */
/* Grille fixe : sans elle les largeurs en % sont ignorées et les colonnes
   ne s'alignent pas d'un bloc mensuel à l'autre. */
.tableau-absences { table-layout: fixed; width: 100%; }
.tableau-absences .col-qui         { width: 28%; }
.tableau-absences .col-type        { width: 17%; }
.tableau-absences .col-progression { width: 30%; padding-left: 1.2rem; padding-right: 1.2rem; }
.tableau-absences .col-quand       { width: 25%; }

/* L'étiquette « En cours » passe au-dessus pour laisser les dates sur une ligne,
   calée sur le bord droit de la colonne : centrée sur le texte, elle se baladait
   d'une ligne à l'autre selon la largeur de la plage de dates. */
.tableau-absences .bloc-quand  { display: block; text-align: right; }
.tableau-absences .quand-dates { display: block; }
.etiquette-en-cours { display: block; width: fit-content; margin: 0 0 .3rem auto; }

.progression-ligne { display: flex; align-items: center; gap: .7rem; }
.progression-barre {
    flex: 1; min-width: 0; height: 10px; border-radius: 999px; overflow: hidden;
    background: #e4e9ef; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
.progression-barre span {
    display: block; height: 100%; border-radius: 999px;
    transition: width .4s ease;   /* la couleur vient du type d'absence */
}
.progression-pct {
    flex: none; font-size: .84rem; font-weight: 800; color: var(--encre);
    min-width: 3.1rem; text-align: right; font-variant-numeric: tabular-nums;
}
.progression-texte { display: block; margin-top: .35rem; font-size: .74rem; color: var(--muet); }

@media (max-width: 780px) {
    .tableau-absences .col-progression { padding-left: .7rem; padding-right: .7rem; }
    .progression-texte { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}


/* ───────── Bloc « Emploi et registre » de la fiche utilisateur ───────── */
/* La fiche et le registre décrivent la même personne : ce bloc rend la
   frontière visible sans donner l'impression de deux formulaires distincts. */
.titre-bloc { margin: 0 0 .2rem; font-size: 1.05rem; }

.bloc-divergence ul { margin: .5rem 0 .3rem; padding-left: 1.1rem; }
.bloc-divergence li { margin-bottom: .35rem; }
.bloc-divergence .case { display: inline-flex; margin-left: .5rem; font-size: .85rem; }

.parcours-registre {
    margin: .8rem 0 1.2rem; padding: .7rem .9rem;
    background: var(--fond); border-radius: 10px;
}
.parcours-titre {
    display: block; margin-bottom: .4rem;
    font-size: .78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--muet);
}
.parcours-registre ul { margin: 0; padding: 0; list-style: none; }
.parcours-registre li { padding: .22rem 0; font-size: .88rem; }
.parcours-registre li + li { border-top: 1px solid rgba(0, 0, 0, .06); }
.parcours-registre a { font-weight: 600; }
.parcours-registre .texte-muet { font-size: .82rem; }
/* Sur mobile, le détail passe sous le nom de la société plutôt que de déborder. */
@media (max-width: 640px) { .parcours-registre .texte-muet { display: block; } }

/* ───────── Fiche utilisateur ───────── */
.grille-fiche { display: flex; flex-direction: column; gap: 1.5rem; }
.grille-fiche > .carte { padding: 1.5rem 1.6rem; margin-bottom: 0; }
.grille-fiche > .carte > h2:first-child { margin-top: 0; margin-bottom: 1rem; }
/* Le premier champ ne colle pas au titre du volet. */
.grille-fiche > .carte > label:first-of-type { margin-top: 0; }

/* Fiche utilisateur : à gauche ce qui se saisit, à droite ce qui se consulte.
   Les volets de saisie s'empilent sur toute la largeur de la colonne — côte à
   côte, leurs libellés se cassaient en deux lignes. */
.fiche-colonnes { display: grid; gap: 1.5rem; align-items: start; grid-template-columns: minmax(0, 1fr); }
.fiche-annexes { display: flex; flex-direction: column; gap: 1.2rem; min-width: 0; }
.fiche-annexes h2 { margin-top: 0; }

@media (min-width: 1100px) {
    .fiche-colonnes { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
}

/* Barre d'actions : collée en bas de l'écran, toujours à portée de clic
   quel que soit le volet en cours de saisie. */
.barre-actions {
    position: sticky; bottom: 0; z-index: 5;
    display: flex; gap: .8rem; justify-content: flex-end; align-items: center;
    margin-top: 1.25rem; padding: .8rem 1rem;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(6px);
    border: 1px solid var(--bord); border-radius: var(--rayon);
}
@supports not (backdrop-filter: blur(6px)) { .barre-actions { background: #fff; } }

/* ═══════════════════════════════════════════════════════════════
   Journal d'activité et droits par rôle
   ═══════════════════════════════════════════════════════════════ */

/* Texte réservé aux lecteurs d'écran : la case à cocher d'une matrice
   n'a pas de libellé visible, mais elle doit en avoir un. */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.badge-role-super { background: #4c1d95; color: #fff; }

/* ───────── Matrice des droits ───────── */
.tableau-droits { table-layout: fixed; }
.tableau-droits .col-capacite { width: 34%; }
.tableau-droits .col-role { width: 13.2%; text-align: center; vertical-align: middle; }
.tableau-droits thead th { vertical-align: bottom; padding-bottom: .7rem; }
.tableau-droits .role-nom { display: block; font-size: .9rem; color: var(--encre); text-transform: none; letter-spacing: 0; }
.tableau-droits .role-effectif { display: block; font-size: .72rem; font-weight: 400; color: var(--muet); text-transform: none; }
.tableau-droits .role-verrou { display: block; margin-top: .2rem; font-size: .68rem; font-weight: 600; color: #6d28d9; text-transform: none; letter-spacing: 0; }

.tableau-droits .capacite-nom { display: block; font-weight: 600; }
.tableau-droits .capacite-aide { display: block; font-size: .78rem; color: var(--muet); }

/* Séparateur de domaine : il structure une longue liste sans la couper. */
.tableau-droits .ligne-groupe th {
    padding: .8rem .9rem .4rem; background: var(--fond);
    font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
    color: var(--bleu-fonce); border-bottom: 1px solid var(--bord); text-align: left;
}
.tableau-droits tbody tr:hover:not(.ligne-groupe) { background: #f8fafc; }

/* Toute la cellule est cliquable : viser une case de 13 px à la souris est pénible. */
.case-droit {
    display: flex; align-items: center; justify-content: center;
    margin: 0; padding: .45rem; border-radius: 8px; cursor: pointer;
}
.case-droit:hover { background: #eef2ff; }
.case-droit input { width: 17px; height: 17px; cursor: pointer; accent-color: var(--bleu); }
.case-verrouillee { cursor: not-allowed; opacity: .55; }
.case-verrouillee:hover { background: none; }
.case-verrouillee input { cursor: not-allowed; }

/* ───────── Journal ───────── */
.filtres-journal { margin-bottom: 1rem; }
.ligne-filtres { display: grid; gap: .9rem; grid-template-columns: 2fr 1.4fr 1.2fr 1fr 1fr auto; align-items: end; }
.ligne-filtres label { margin-top: 0; font-size: .82rem; }
.filtres-boutons { display: flex; gap: .5rem; }
@media (max-width: 1100px) { .ligne-filtres { grid-template-columns: 1fr 1fr; } .filtres-boutons { grid-column: 1 / -1; } }

.tableau-journal { table-layout: fixed; }
.tableau-journal .col-quand { width: 130px; }
.tableau-journal .col-qui   { width: 210px; }
.tableau-journal .col-quoi  { width: auto; }
/* Une IPv6 fait 39 caractères : sans repli, elle sortait de la carte et se
   faisait couper par le bord (constat de David, 26/10/2026). */
.tableau-journal .col-ip    { width: 150px; color: var(--muet); font-size: .82rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; word-break: break-all; }
.tableau-journal td { vertical-align: top; }
.journal-date  { display: block; font-weight: 600; font-size: .86rem; }
.journal-heure { display: block; font-size: .78rem; color: var(--muet); font-variant-numeric: tabular-nums; }
.journal-details { margin-top: .3rem; font-size: .82rem; }
.journal-details summary { cursor: pointer; color: var(--bleu); }
.journal-details pre {
    margin: .35rem 0 0; padding: .5rem .7rem; background: var(--fond); border-radius: 8px;
    font-size: .78rem; white-space: pre-wrap; word-break: break-word;
}

.pagination { display: flex; gap: 1rem; align-items: center; justify-content: center; margin: 1.2rem 0; }
.pagination-etat { font-size: .88rem; color: var(--muet); }

/* ═══════════════════════════════════════════════════════════════
   Modèles d'e-mails et réinitialisation de mot de passe
   ═══════════════════════════════════════════════════════════════ */

.lien-oubli { margin-top: 1rem; text-align: center; font-size: .9rem; }
.texte-intro { color: var(--muet); font-size: .92rem; margin-bottom: 1.2rem; }

.tableau-emails .col-modele { width: 34%; }
.tableau-emails .col-sujet  { width: 36%; }
.tableau-emails .col-etat   { width: 16%; white-space: nowrap; }
.email-quand  { display: block; font-size: .8rem; color: var(--muet); }
.email-sujet  { color: var(--muet); font-size: .88rem; }

/* Édition d'un modèle : le texte à gauche, les variables et le test à droite. */
.grille-email { display: grid; gap: 1.5rem; align-items: start; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .grille-email { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.grille-email > .carte { margin-bottom: 0; padding: 1.5rem 1.6rem; }
.grille-email > .carte > h2:first-child { margin-top: 0; }

/* Le corps du message est du balisage : une police à chasse fixe aide à le lire. */
.champ-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .84rem; line-height: 1.6; tab-size: 2;
}

.liste-variables { margin: 0; padding: 0; list-style: none; }
.liste-variables li { display: flex; gap: .6rem; align-items: baseline; padding: .25rem 0; font-size: .85rem; }
.liste-variables li + li { border-top: 1px solid var(--bord); }
.liste-variables span { color: var(--muet); }
.jeton-variable {
    flex: none; padding: .12rem .45rem; border: 1px solid #c7d2fe; border-radius: 6px;
    background: #eef2ff; color: #3730a3; cursor: pointer;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem;
}
.jeton-variable:hover { background: #e0e7ff; }

/* L'aperçu vit dans un cadre isolé : les styles du message ne doivent pas
   déteindre sur l'application, ni l'inverse. */
.apercu-mail { padding: 0; overflow: hidden; }
.cadre-apercu { display: block; width: 100%; height: 620px; border: 0; background: #f3f4f6; }

/* ═══ Menu utilisateur (barre de navigation) ═══ */
.topbar-user { position: relative; }
.menu-chevron { width: 14px; height: 14px; opacity: .7; transition: transform .15s; }
.topbar-avatar[aria-expanded="true"] .menu-chevron { transform: rotate(180deg); }
.menu-utilisateur {
    position: absolute; top: calc(100% + .55rem); right: 0; z-index: 60;
    min-width: 250px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .16); padding: .4rem;
}
.menu-utilisateur-tete {
    display: flex; flex-direction: column; gap: .1rem;
    padding: .55rem .75rem .6rem; border-bottom: 1px solid #eef2f7; margin-bottom: .35rem;
}
.menu-utilisateur-tete strong { color: var(--encre); font-size: .92rem; }
.menu-utilisateur-tete small { color: var(--muet); font-size: .78rem; }
.menu-utilisateur a, .menu-utilisateur form button {
    display: block; width: 100%; text-align: left; padding: .5rem .75rem;
    border-radius: 8px; color: var(--encre); font-weight: 500; font-size: .9rem;
    background: none; border: 0; cursor: pointer; font-family: inherit;
}
.menu-utilisateur a:hover, .menu-utilisateur form button:hover { background: #f1f5f9; text-decoration: none; }
.menu-utilisateur form { margin: .35rem 0 0; border-top: 1px solid #eef2f7; padding-top: .35rem; }
.menu-utilisateur form button { color: #b91c1c; }

/* ═══ Page Mon compte ═══ */
.fiche-infos { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1.2rem; margin: 0; }
.fiche-infos dt { color: var(--muet); font-size: .88rem; }
.fiche-infos dd { margin: 0; }
.texte-negatif { color: #b91c1c; }

/* ═══ Time : onglets du module ═══ */
/* .onglets-module : même sous-navigation pour les autres modules (Formations…) */
.onglets-time, .onglets-module { display: flex; gap: .4rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.onglets-time a, .onglets-module a {
    padding: .45rem .95rem; border-radius: 8px; font-weight: 600;
    color: var(--encre); background: #e8edf3; font-size: .92rem;
}
.onglets-time a:hover, .onglets-module a:hover { background: #dde5ee; text-decoration: none; }
.onglets-time a.actif, .onglets-module a.actif { background: var(--bleu); color: #fff; }

/* ═══ Time : fil de l'eau borné, défilement interne ═══ */
.fil-defilement { max-height: 62vh; overflow-y: auto; }
.fil-defilement thead th {
    position: sticky; top: 0; z-index: 2;
    background: #fff; box-shadow: 0 2px 0 var(--bord);
}
.fil-defilement > table { min-width: 640px; }

/* ═══ Time : fil de l'eau, lignes soignées ═══ */
.fil-defilement td { vertical-align: middle; }
.fil-quand { white-space: nowrap; }
.fil-heure { display: block; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.fil-date { color: var(--muet); font-size: .78rem; }
.fil-salarie { display: inline-flex; align-items: center; gap: .55rem; }
.fil-uid {
    display: inline-block; padding: .18rem .55rem;
    background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 7px;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .8rem; letter-spacing: .06em; color: #334155;
}
.fil-col-uid, .fil-defilement thead th:last-child { text-align: right; }
.tableau tbody tr.fil-inconnu { background: #fffbeb; }
.tableau tbody tr.fil-inconnu:hover { background: #fef3c7; }
.fil-inconnu .fil-uid { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
.fil-attribuer { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0; }
.fil-attribuer select { width: auto; max-width: 300px; padding: .4rem .6rem; }
/* Le nom du badge est court : sans borne, le champ prenait toute la largeur et
   rejetait le bouton à la ligne — badge, liste, nom et bouton tiennent sur une ligne. */
.fil-attribuer input[type=text] { width: auto; max-width: 13rem; margin: 0; padding: .4rem .6rem; }

/* ═══ Tableaux à colonnes éditables (Services & horaires) ═══ */
.tableau-edition td { vertical-align: middle; }
.tableau-edition input[type=text], .tableau-edition select { min-width: 140px; margin: 0; }
.tableau-edition .actions { white-space: nowrap; }

/* ═══ Éditeur d'horaire : une ligne par jour, des plages en pastilles ═══ */
.jour-horaire {
    display: flex; align-items: center; gap: 1rem;
    padding: .5rem 0; border-bottom: 1px solid var(--bord);
}
.jour-horaire:last-of-type { border-bottom: none; }
.jour-horaire-nom { flex: 0 0 130px; display: flex; flex-direction: column; line-height: 1.25; }
.jour-horaire-total { font-size: .78rem; }
.jour-horaire-plages { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.plage-horaire {
    display: inline-flex; align-items: center; gap: .3rem;
    background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 9px; padding: .25rem .45rem;
}
.plage-horaire input[type=time] { width: auto; padding: .25rem .4rem; margin: 0; border: 1px solid #d1d5db; }
.plage-retirer {
    border: none; background: none; cursor: pointer; color: var(--muet);
    font-size: .85rem; padding: .1rem .3rem; border-radius: 5px; line-height: 1;
}
.plage-retirer:hover { color: #b91c1c; background: #fee2e2; }
.jour-horaire-repos { font-size: .85rem; font-style: italic; }

/* ═══ Historique des pointages : séparateurs de semaine ═══ */
.tableau tr.ligne-semaine td {
    background: #f8fafc; color: var(--muet); font-size: .78rem;
    text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
    padding-top: .45rem; padding-bottom: .45rem;
}

/* ═══ Time : supervision — filtres et synthèse ═══ */
.filtres-time-ligne { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; }
.filtres-time-ligne > div { display: flex; flex-direction: column; gap: .25rem; }
.filtres-time-ligne label { font-size: .8rem; color: var(--muet); margin: 0; }
.filtres-time-ligne input[type=date], .filtres-time-ligne select { width: auto; min-width: 150px; margin: 0; }
.filtres-time-actions { flex-direction: row !important; gap: .5rem; align-items: center; }
.filtres-time-raccourcis { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .9rem; }
.raccourci-periode {
    padding: .3rem .7rem; border-radius: 999px; font-size: .85rem; font-weight: 600;
    background: #eef2f7; color: var(--encre);
}
.raccourci-periode:hover { background: #dde5ee; text-decoration: none; }
.raccourci-periode.actif { background: var(--bleu); color: #fff; }
.carte-stat-alerte { box-shadow: inset 0 0 0 2px #fca5a5; }
.carte-stat-alerte .stat-chiffre { color: #b91c1c; }
.presents-grille { display: flex; flex-wrap: wrap; gap: .5rem; }
.present-puce {
    display: inline-flex; align-items: center; gap: .45rem;
    background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 999px; padding: .25rem .7rem .25rem .3rem;
    font-weight: 600; font-size: .9rem;
}

/* ═══ Sélecteur de salarié avec recherche (fil de l'eau) ═══ */
.champ-salarie { min-width: 280px; flex: 1 1 280px; }
.select-recherche { position: relative; }
.select-recherche-bouton {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    width: 100%; margin: 0; padding: .5rem .7rem; border: 1px solid #d1d5db; border-radius: 10px;
    background: #fff; font: inherit; color: var(--encre); cursor: pointer; text-align: left;
}
.select-recherche-bouton:hover { border-color: #9ca3af; }
.select-recherche.ouvert .select-recherche-bouton {
    border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(29, 78, 216, .12);
}
.select-recherche-valeur { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-recherche .menu-chevron { width: 14px; height: 14px; opacity: .55; flex: none; transition: transform .15s; }
.select-recherche.ouvert .menu-chevron { transform: rotate(180deg); }
.select-recherche-panneau {
    position: absolute; z-index: 60; top: calc(100% + .35rem); left: 0; right: 0;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .16); overflow: hidden;
}
.select-recherche-barre { padding: .5rem; border-bottom: 1px solid #eef2f7; }
.select-recherche-champ { width: 100%; margin: 0; padding: .45rem .6rem; border: 1px solid #d1d5db; border-radius: 8px; }
.select-recherche-liste { max-height: 320px; overflow-y: auto; padding: .3rem; }
.select-recherche-groupe {
    margin: .35rem 0 .2rem; padding: .35rem .6rem;
    font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
    color: var(--bleu); background: #e7eefb; border-radius: 6px;
}
.select-recherche-groupe:first-of-type { margin-top: .15rem; }
.select-recherche-option {
    display: block; width: 100%; text-align: left; margin: 0; padding: .45rem .6rem; border: 0;
    background: none; border-radius: 8px; font: inherit; color: var(--encre); cursor: pointer;
}
.select-recherche-option:hover { background: #f1f5f9; }
.select-recherche-option.choisi { background: #eff4fb; font-weight: 600; color: var(--bleu); }
.select-recherche-tous { color: var(--muet); }
.select-recherche-vide { padding: .8rem .6rem; text-align: center; color: var(--muet); font-size: .88rem; }

/* ═══ Tableau de bord : tuiles « en un coup d'œil » ═══ */
.tuiles-info {
    /* Les tuiles portent un titre : sous 190 px il se coupe en trois lignes et
       la rangée devient illisible. Mieux vaut moins de colonnes, plus larges. */
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .7rem; margin-bottom: 1.4rem;
}
/* Deux lignes, jamais trois : le chiffre, puis le titre qui lui sert de
   légende. Les versions précédentes ajoutaient un sous-titre sous le nombre —
   « 9 salariés hors effectif » sous « Absents aujourd'hui », « 2 demandes en
   attente » sous « Congés à valider ». C'était la même phrase deux fois, et
   c'est ce qui rendait la rangée lourde. Une précision ne s'affiche donc que
   lorsqu'elle dit quelque chose de neuf : « 26 en retard » sur 29 entretiens. */
.tuile-info {
    display: flex; align-items: center; gap: .7rem;
    background: #fff; border: 1px solid var(--bord); border-radius: 14px;
    padding: 1rem;
    color: var(--encre);
}
a.tuile-info:hover { border-color: var(--bleu); box-shadow: 0 4px 14px rgba(15, 23, 42, .07); text-decoration: none; }

.tuile-info-icone {
    width: 34px; height: 34px; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: #f1f5f9; border-radius: 9px;
    /* Le tracé hérite de cette couleur (stroke: currentColor) : une tuile en
       alerte teinte son pictogramme sans qu'on ait à en dessiner un second. */
    color: #475569;
}
.tuile-info-icone .ic { width: 18px; height: 18px; }
.tuile-info-corps { display: flex; flex-direction: column; min-width: 0; }

/* baseline : le nombre et la précision qui le suit reposent sur le même appui,
   malgré l'écart de corps entre les deux. */
.tuile-info-mesure { display: flex; align-items: baseline; gap: .4rem; min-width: 0; }
.tuile-info-chiffre {
    font-size: 1.65rem; font-weight: 800; color: var(--encre);
    line-height: 1; letter-spacing: -.02em; flex: none;
}
.tuile-info-detail { font-size: .72rem; font-weight: 700; color: var(--muet); line-height: 1.2; }
.tuile-info-titre {
    font-size: .8rem; font-weight: 700; color: var(--encre);
    line-height: 1.25; margin-top: .2rem;
}

.tuile-info-alerte { border-color: #fca5a5; background: #fff7f7; }
.tuile-info-alerte .tuile-info-icone { background: #fee2e2; color: #b91c1c; }
.tuile-info-alerte .tuile-info-detail,
.tuile-info-alerte .tuile-info-chiffre,
.tuile-info-alerte .tuile-info-titre { color: #b91c1c; }

.carte-anniv { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; }
.anniv-icone { font-size: 2rem; flex: none; }
.anniv-liste { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.anniv-puce {
    display: inline-flex; align-items: center; gap: .45rem;
    background: #fdf2f8; border: 1px solid #fbcfe8; border-radius: 999px;
    padding: .22rem .7rem .22rem .3rem; font-weight: 600; font-size: .9rem;
}

/* --- DUERP : document unique d'évaluation des risques --- */
.duerp-retour { margin: -0.4rem 0 1rem; font-size: .92rem; }
.duerp-retour a { color: var(--gris-fonce, #475569); text-decoration: none; }
.duerp-retour a:hover { text-decoration: underline; }

.duerp-outils { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.2rem; }

.duerp-jauge {
    height: 6px; border-radius: 999px; background: #e2e8f0;
    overflow: hidden; margin-top: .55rem;
}
.duerp-jauge-plein { height: 100%; border-radius: 999px; background: #16a34a; }
.duerp-texte-eleve { color: #b91c1c; }

.duerp-filtres form { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
.duerp-filtres label { display: flex; flex-direction: column; gap: .3rem; font-size: .88rem; font-weight: 600; margin: 0; }
.duerp-filtres select { min-width: 11rem; }

.duerp-unite { margin: 1.6rem 0 .6rem; font-size: 1.05rem; color: #1e3a8a; }
.duerp-tableau .duerp-famille td {
    background: #f8fafc; color: #475569; font-weight: 600; font-size: .82rem;
    text-transform: uppercase; letter-spacing: .03em; padding: .35rem .8rem;
}
.duerp-col-cote { text-align: center; white-space: nowrap; }
.duerp-risque-lien { color: inherit; text-decoration: none; font-weight: 600; }
.duerp-risque-lien:hover { color: #1d4ed8; text-decoration: underline; }

.duerp-prio-eleve  { background: #fee2e2; color: #b91c1c; }
.duerp-prio-moyen  { background: #ffedd5; color: #c2410c; }
.duerp-prio-faible { background: #dcfce7; color: #15803d; }
.duerp-pastille {
    display: inline-block; width: .6rem; height: .6rem; border-radius: 50%;
    margin-right: .45rem; vertical-align: baseline;
}
.duerp-pastille.duerp-prio-eleve  { background: #dc2626; }
.duerp-pastille.duerp-prio-moyen  { background: #ea580c; }
.duerp-pastille.duerp-prio-faible { background: #16a34a; }

.duerp-criticite { margin: .6rem 0 0; font-size: .92rem; }
.duerp-criticite strong { font-size: 1.05rem; }
.duerp-sous-titre { margin: 1.4rem 0 .4rem; font-size: .95rem; }

.duerp-action-faite td { color: #94a3b8; }
.duerp-action-faite td strong { color: #94a3b8; }
.duerp-tableau-actions select { padding: .25rem .4rem; font-size: .85rem; }

.duerp-catalogue-barre {
    display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end;
    justify-content: space-between; position: sticky; top: .5rem; z-index: 5;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .08);
}
.duerp-catalogue-barre label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; font-size: .88rem; margin: 0; }
.duerp-catalogue-famille { margin: 1.1rem 0 .3rem; font-size: .82rem; color: #475569; text-transform: uppercase; letter-spacing: .03em; }
.duerp-catalogue-entree {
    display: flex; gap: .7rem; align-items: flex-start; padding: .55rem .6rem;
    border-radius: 8px; cursor: pointer; font-weight: 400; margin: 0;
}
.duerp-catalogue-entree:hover { background: #f1f5f9; }
.duerp-catalogue-entree input { width: auto; margin-top: .3rem; }
.duerp-catalogue-entree span { display: flex; flex-direction: column; gap: .15rem; }
.duerp-catalogue-entree small { line-height: 1.35; }
.duerp-catalogue-entree .badge { align-self: flex-start; }
.duerp-catalogue-deja { opacity: .55; cursor: default; }

@media (max-width: 700px) {
    .duerp-filtres form, .duerp-catalogue-barre { flex-direction: column; align-items: stretch; }
}

.duerp-figer { display: flex; gap: 1rem; align-items: flex-end; }
.duerp-figer > div { flex: 1; }
.duerp-figer button { white-space: nowrap; margin-bottom: 2px; }
@media (max-width: 700px) { .duerp-figer { flex-direction: column; align-items: stretch; } }

/* --- Soldes : filtres, séparateurs par société, totaux --- */
.soldes-filtres { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
.soldes-filtres-form label { display: flex; flex-direction: column; gap: .3rem; font-size: .88rem; font-weight: 600; margin: 0; }
/* Même gabarit pour le sélecteur et la recherche : hauteur et rayon identiques */
.soldes-filtres select,
.soldes-filtres .champ-recherche input[type=search] {
    height: 2.55rem; box-sizing: border-box; margin: 0; border-radius: 10px !important;
}
.soldes-filtres-form select { min-width: 13rem; }
.soldes-filtres .champ-recherche { flex: none; }
.soldes-filtres .champ-recherche input[type=search] { width: 17rem; }
.soldes-filtres > .texte-muet { align-self: center; padding-top: 1.3rem; white-space: nowrap; }
.soldes-col { text-align: center; }
#soldes-tableau .soldes-sep td {
    background: #1e3a8a; color: #fff; font-weight: 700; font-size: .82rem;
    text-transform: uppercase; letter-spacing: .04em; padding: .4rem .8rem;
}
#soldes-tableau .soldes-total td { font-weight: 700; background: #f8fafc; border-top: 2px solid #e2e8f0; }
@media (max-width: 700px) { .soldes-filtres { flex-direction: column; align-items: stretch; } }

/* --- Entretiens individuels --- */
.badge-cadre { background: #e0e7ff; color: #3730a3; }
.entretiens-filtres { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.entretiens-filtres .champ-recherche { margin-left: auto; }
.entretiens-filtres .champ-recherche input[type=search] { width: 15rem; height: 2.55rem; box-sizing: border-box; margin: 0; }
.entretiens-bascule { border: none; cursor: pointer; }
.entretiens-cr summary { cursor: pointer; color: #1d4ed8; font-size: .85rem; font-weight: 600; margin-top: .25rem; }
.entretiens-cr p { margin: .4rem 0 0; font-size: .88rem; color: #475569; white-space: normal; }

/* Fiche salarié : en-tête d'identité */
.entretiens-tete { display: flex; align-items: center; gap: 1.1rem; }
.entretiens-avatar { width: 56px; height: 56px; font-size: 1.3rem; }
.entretiens-tete-nom { flex: 1; display: flex; flex-direction: column; gap: .2rem; }
.entretiens-tete-nom strong { font-size: 1.15rem; letter-spacing: -.01em; }
.entretiens-tete-nom span { color: #64748b; font-size: .92rem; }

/* Cartes d'échéance : bordure colorée par état */
.entretiens-echeances { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 1.4rem; }
.entretiens-carte { border-left: 4px solid #cbd5e1; display: flex; flex-direction: column; gap: .3rem; }
.entretiens-carte header { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; }
.entretiens-carte-type { font-size: .82rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: .03em; }
.entretiens-carte-date { margin: 0; font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; color: #1f2937; }
.entretiens-carte-detail { margin: 0; font-size: .85rem; color: #64748b; }
.entretiens-carte-action { align-self: flex-start; padding-left: 0; }
.entretiens-carte-retard   { border-left-color: #dc2626; }
.entretiens-carte-retard .entretiens-carte-date { color: #b91c1c; }
.entretiens-carte-bientot  { border-left-color: #ea580c; }
.entretiens-carte-bientot .entretiens-carte-date { color: #c2410c; }
.entretiens-carte-planifie { border-left-color: #2563eb; }
.entretiens-carte-planifie .entretiens-carte-date { color: #1d4ed8; }
.entretiens-carte-ok       { border-left-color: #16a34a; }
.entretiens-etat-retard   { background: #fee2e2; color: #b91c1c; }
.entretiens-etat-bientot  { background: #ffedd5; color: #c2410c; }
.entretiens-etat-planifie { background: #dbeafe; color: #1d4ed8; }
.entretiens-etat-ok       { background: #dcfce7; color: #15803d; }
.entretiens-etat-inconnu  { background: #f1f5f9; color: #64748b; }

/* Historique en frise chronologique */
.entretiens-frise { list-style: none; margin: 0; padding: 0; }
.entretiens-frise-item { position: relative; padding: 0 0 1.2rem 1.7rem; }
.entretiens-frise-item::before {
    content: ''; position: absolute; left: .48rem; top: 1.1rem; bottom: 0;
    width: 2px; background: #e2e8f0;
}
.entretiens-frise-item:last-child { padding-bottom: .2rem; }
.entretiens-frise-item:last-child::before { display: none; }
.entretiens-frise-puce {
    position: absolute; left: 0; top: .3rem; width: 1.05rem; height: 1.05rem;
    border-radius: 50%; border: 3px solid #16a34a; background: #fff;
}
.entretiens-frise-item.est-planifie .entretiens-frise-puce { border-color: #f59e0b; border-style: dashed; }
.entretiens-frise-corps { display: flex; flex-direction: column; gap: .25rem; }
.entretiens-frise-entete { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.entretiens-frise-actions { display: flex; gap: .6rem; }

@media (max-width: 700px) {
    .entretiens-filtres { align-items: stretch; flex-direction: column; }
    .entretiens-filtres .champ-recherche { margin-left: 0; }
}

/* --- Fiches sociétés enrichies --- */
.societe-inactive { opacity: .6; }
.societe-details { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1rem; margin: .8rem 0 0; }
.societe-details dt { font-size: .74rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; }
.societe-details dd { margin: .1rem 0 0; font-size: .9rem; color: #1f2937; }
.societe-actions { align-items: center; }
.societe-sous-titre { margin: 1.1rem 0 .4rem; font-size: .95rem; }
.societe-ccn-recherche { margin-top: .8rem; }
.societe-ccn-aide { display: block; margin-top: .3rem; line-height: 1.4; }

/* --- Règlement intérieur & notes de service --- */
.reglement-titre-section { margin: 1.6rem 0 .6rem; font-size: 1.05rem; color: #1e3a8a; }
.reglement-gestion { margin-top: .6rem; }
.reglement-gestion summary { cursor: pointer; color: #1d4ed8; font-size: .85rem; font-weight: 600; }
.reglement-gestion-corps { margin-top: .7rem; display: flex; flex-direction: column; gap: .9rem; }
.reglement-versions td, .reglement-versions th { font-size: .88rem; }
.reglement-maj { padding: .8rem; background: #f8fafc; border-radius: 10px; }

/* --- Formations & habilitations --- */
.formations-filtres form { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
.formations-filtres label { display: flex; flex-direction: column; gap: .3rem; font-size: .88rem; font-weight: 600; margin: 0; }
.formations-filtres select { min-width: 12rem; }
@media (max-width: 700px) { .formations-filtres form { flex-direction: column; align-items: stretch; } }

/* Catalogue des formations : cartes par catégorie */
.catalogue-intro { margin: -.4rem 0 1.4rem; max-width: 62ch; }
.catalogue-categorie {
    margin: 1.8rem 0 .7rem; font-size: .85rem; color: #475569;
    text-transform: uppercase; letter-spacing: .05em;
    display: flex; align-items: center; gap: .5rem;
}
.catalogue-categorie .texte-muet {
    background: #e2e8f0; color: #475569; border-radius: 999px;
    padding: .05rem .5rem; font-size: .78rem; letter-spacing: 0;
}
.catalogue-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 1rem; }
.catalogue-carte { display: flex; flex-direction: column; gap: .55rem; border-top: 3px solid #1e3a8a; }
.catalogue-inactive { opacity: .55; border-top-color: #cbd5e1; }
.catalogue-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.catalogue-tete h3 { margin: 0; font-size: 1rem; line-height: 1.35; }
.catalogue-description { margin: 0; font-size: .86rem; color: #64748b; line-height: 1.4; }
.catalogue-chiffres { display: flex; gap: 1.4rem; margin: .2rem 0 0; }
.catalogue-chiffres dt { font-size: .7rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; }
.catalogue-chiffres dd { margin: .1rem 0 0; font-size: .95rem; font-weight: 600; color: #1f2937; }
.catalogue-edition { margin-top: auto; padding-top: .5rem; border-top: 1px solid #f1f5f9; }
.catalogue-edition summary { cursor: pointer; color: #1d4ed8; font-size: .85rem; font-weight: 600; }
.catalogue-edition form { margin-top: .7rem; }
.catalogue-actions-secondaires {
    display: flex; flex-wrap: wrap; align-items: center; gap: .8rem;
    margin-top: .6rem; padding-top: .6rem; border-top: 1px solid #f1f5f9; font-size: .85rem;
}
.catalogue-nouvelle { margin-top: 2rem; scroll-margin-top: 1rem; }


/* Formations : onglets d'état et listes de tableau de bord */
.formations-onglets { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.formations-onglet {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .4rem .85rem; border-radius: 999px; text-decoration: none;
    background: #fff; border: 1px solid #e2e8f0; color: #475569;
    font-size: .88rem; font-weight: 600; transition: border-color .12s, background .12s;
}
.formations-onglet:hover { border-color: #cbd5e1; background: #f8fafc; }
.formations-onglet-nb {
    background: #f1f5f9; color: #475569; border-radius: 999px;
    padding: .05rem .45rem; font-size: .78rem;
}
.formations-onglet.actif { background: #1e3a8a; border-color: #1e3a8a; color: #fff; }
.formations-onglet.actif .formations-onglet-nb { background: rgba(255,255,255,.2); color: #fff; }
.formations-onglet-expiree:not(.actif) { color: #b91c1c; border-color: #fecaca; }
.formations-onglet-expiree:not(.actif) .formations-onglet-nb { background: #fee2e2; color: #b91c1c; }
.formations-onglet-expiree.actif { background: #b91c1c; border-color: #b91c1c; }
.formations-onglet-bientot:not(.actif) { color: #c2410c; border-color: #fed7aa; }
.formations-onglet-bientot:not(.actif) .formations-onglet-nb { background: #ffedd5; color: #c2410c; }
.formations-onglet-bientot.actif { background: #c2410c; border-color: #c2410c; }
.formations-onglet-vide { opacity: .5; }

.formations-liste { list-style: none; margin: .4rem 0 0; padding: 0; }
.formations-liste li {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: .6rem; padding: .55rem 0; border-bottom: 1px solid #f1f5f9;
}
.formations-liste li:last-child { border-bottom: none; }
.formations-liste-nom { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.formations-liste-etat { display: flex; align-items: center; gap: .5rem; white-space: nowrap; }
.formations-filtres .champ-recherche input[type=search] { width: 14rem; height: 2.55rem; box-sizing: border-box; margin: 0; }

/* Sélecteur de salariés : vignettes cliquables groupées par service */
.picker { border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; margin-bottom: 1.1rem; background: #fff; }
.picker-barre {
    display: flex; flex-wrap: wrap; align-items: center; gap: .8rem;
    padding: .7rem .9rem; background: #f8fafc; border-bottom: 1px solid #e2e8f0;
}
.picker-barre .champ-recherche { flex: 1; min-width: 12rem; }
.picker-barre input[type=search] { width: 100%; height: 2.3rem; box-sizing: border-box; margin: 0; }
.picker-barre .btn { padding: 0; white-space: nowrap; }

.picker-resume {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    margin: 0; padding: .7rem .9rem; background: #eff6ff; border-bottom: 1px solid #dbeafe;
    font-size: .88rem; font-weight: 600; color: #1e3a8a;
}
.picker-jetons { display: flex; flex-wrap: wrap; gap: .35rem; }
.picker-jeton {
    display: inline-flex; align-items: center; gap: .35rem;
    background: #1e3a8a; color: #fff; border: none; border-radius: 999px;
    padding: .2rem .5rem .2rem .7rem; font-size: .8rem; font-weight: 600; cursor: pointer;
}
.picker-jeton::after { content: '×'; font-size: 1rem; line-height: 1; opacity: .75; }
.picker-jeton:hover { background: #b91c1c; }

.picker-corps { max-height: 22rem; overflow-y: auto; padding: .2rem .9rem .9rem; }
.picker-groupe { margin-top: .9rem; }
.picker-groupe-tete {
    display: flex; align-items: center; justify-content: space-between; gap: .8rem;
    margin-bottom: .4rem; padding-bottom: .25rem; border-bottom: 1px solid #f1f5f9;
}
.picker-groupe-tete span {
    font-size: .74rem; font-weight: 700; color: #94a3b8;
    text-transform: uppercase; letter-spacing: .05em;
}
.picker-groupe-tete .btn { padding: 0; font-size: .8rem; }
.picker-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: .45rem; }

.picker-choix {
    position: relative; display: flex; align-items: center; gap: .55rem; margin: 0;
    padding: .45rem .6rem; border: 1px solid #e2e8f0; border-radius: 10px;
    background: #fff; cursor: pointer; font-weight: 400;
    transition: border-color .12s, background .12s, box-shadow .12s;
}
.picker-choix:hover { border-color: #bfdbfe; background: #f8fafc; }
.picker-choix input { position: absolute; opacity: 0; pointer-events: none; }
.picker-nom { flex: 1; font-size: .88rem; line-height: 1.25; min-width: 0; }
.picker-coche { width: 16px; height: 16px; color: #2563eb; opacity: 0; flex: none; }
.picker-choix.est-choisi {
    border-color: #2563eb; background: #eff6ff; box-shadow: 0 0 0 1px #2563eb inset;
}
.picker-choix.est-choisi .picker-nom { font-weight: 600; color: #1e3a8a; }
.picker-choix.est-choisi .picker-coche { opacity: 1; }
.picker-choix input:focus-visible + .avatar { outline: 2px solid #2563eb; outline-offset: 2px; }
.picker-vide { padding: 1rem 0; text-align: center; }

@media (max-width: 700px) {
    .picker-barre { flex-direction: column; align-items: stretch; }
    .picker-grille { grid-template-columns: 1fr; }
}

/* --- Fiches des stations de pointage (Time › Lecteurs) --- */
/* Chaque station est un <details> replié : dix lignes d'état et trois
   formulaires ne servent que le jour où l'on configure. La ligne de résumé
   garde l'essentiel — état, alertes — visible carte fermée. */
.station { display: block; padding: 0; }
.station-resume {
    display: flex; align-items: center; gap: .8rem;
    padding: .95rem 1.1rem; cursor: pointer; list-style: none; user-select: none;
}
.station-resume::-webkit-details-marker { display: none; }
.station-resume:hover { background: #f8fafc; border-radius: 14px; }
.station[open] .station-resume:hover { border-radius: 14px 14px 0 0; }
.station-resume-badges { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.station-chevron { color: var(--muet); transition: transform .15s; flex: none; }
.station[open] .station-chevron { transform: rotate(180deg); }
.station-corps {
    display: flex; flex-direction: column; gap: .9rem;
    padding: .2rem 1.1rem 1.1rem; border-top: 1px solid var(--bord);
    padding-top: .9rem;
}

/* L'adresse que la tablette doit ouvrir : le QR se scanne, le texte se copie. */
.station-ecran {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    padding: .8rem; background: #f8fafc; border-radius: 10px;
}
.station-qr { flex: none; line-height: 0; background: #fff; border: 1px solid var(--bord); border-radius: 8px; padding: 4px; }
.station-qr svg { display: block; width: 132px; height: 132px; }
.station-ecran-texte { display: flex; flex-direction: column; gap: .35rem; min-width: 0; flex: 1 1 260px; }
.station-ecran-texte > span:not(.aide-champ) { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.station-url { font-size: .82rem; background: #fff; border: 1px solid var(--bord); padding: .25rem .5rem; border-radius: 6px; word-break: break-all; }
.station-jeton-ligne { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.station-jeton-ligne code { margin-top: 0; flex: 1 1 auto; }
.copier-fait { color: #15803d; border-color: #86efac; }

.station-tete { display: flex; align-items: center; gap: .8rem; }
.station-pastille { width: .7rem; height: .7rem; border-radius: 50%; flex: none; }
.station-ok { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.18); }
.station-muet { background: #ea580c; box-shadow: 0 0 0 3px rgba(234,88,12,.18); }
.station-off { background: #cbd5e1; }
.station-identite { display: flex; flex-direction: column; gap: .1rem; flex: 1; }
.station-identite strong { font-size: 1.05rem; }
.station-identite .texte-muet { font-size: .86rem; }
.station-etat { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .7rem 1rem; margin: 0; }
.station-etat dt { font-size: .7rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; }
.station-etat dd { margin: .15rem 0 0; font-size: .9rem; }
.station-etat code { font-size: .85rem; background: #f1f5f9; padding: .05rem .35rem; border-radius: 5px; }
.station-erreur { margin: 0; padding: .55rem .75rem; background: #fff7ed; border-left: 3px solid #ea580c; border-radius: 6px; font-size: .87rem; color: #9a3412; }
.station-reglages { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem; margin: 0; padding: .8rem; background: #f8fafc; border-radius: 10px; }
.station-reglages > div { display: flex; flex-direction: column; gap: .25rem; }
.station-reglages label { margin: 0; font-size: .78rem; font-weight: 700; color: #475569; }
.station-reglages input[type=number] { width: 6rem; }
.station-reglages input[type=text] { min-width: 13rem; }
.station-jeton summary { cursor: pointer; color: #1d4ed8; font-size: .85rem; font-weight: 600; }
.station-jeton code { display: block; margin-top: .5rem; font-size: .74rem; word-break: break-all; background: #f1f5f9; padding: .5rem; border-radius: 6px; }
.station-actions { display: flex; flex-wrap: wrap; gap: .8rem; padding-top: .6rem; border-top: 1px solid #f1f5f9; }
@media (max-width: 700px) { .station-reglages { flex-direction: column; align-items: stretch; } }
.station-reseau summary { cursor: pointer; color: #1d4ed8; font-size: .85rem; font-weight: 600; }
.station-reseau form { margin-top: .8rem; padding: .8rem; background: #f8fafc; border-radius: 10px; }
.station-reseau-ligne { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-bottom: .6rem; }
.station-reseau-ligne .case { margin: 0; }
.station-reseau-fixe { display: flex; flex-wrap: wrap; gap: .8rem; }
.station-reseau-fixe > div { display: flex; flex-direction: column; gap: .25rem; }
.station-reseau-fixe label { margin: 0; font-size: .78rem; font-weight: 700; color: #475569; }
.station-reseau-fixe input { min-width: 11rem; }
.station-choix { border: none; margin: 0 0 .8rem; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.station-choix legend { padding: 0 0 .4rem; font-size: .74rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; float: left; width: 100%; }
.station-option { display: flex; align-items: flex-start; gap: .55rem; margin: 0; padding: .6rem .8rem; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; cursor: pointer; font-weight: 400; flex: 1 1 15rem; }
.station-option:hover { border-color: #bfdbfe; }
.station-option.actif { border-color: #2563eb; background: #eff6ff; box-shadow: 0 0 0 1px #2563eb inset; }
.station-option input { width: auto; margin: .2rem 0 0; }
.station-option span { display: flex; flex-direction: column; gap: .1rem; }
.station-option strong { font-size: .92rem; }
.station-option small { color: #64748b; font-size: .78rem; line-height: 1.3; }
.station-option:has(input:disabled) { opacity: .5; cursor: not-allowed; }

/* ═══ Historique des pointages d'un salarié ═══ */
.pointage-entete { display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem; align-items: center; }
.pointage-entete span { display: flex; gap: .45rem; align-items: baseline; }
.pointage-entete code { font-size: .85rem; background: #f1f5f9; padding: .12rem .4rem; border-radius: 4px; }

/* Une entrée et sa sortie forment un bloc insécable : lues séparément, les
   heures d'une journée à quatre badgeages ne veulent plus rien dire. */
.paire-pointage {
    display: inline-flex; align-items: baseline; gap: .35rem;
    margin: .12rem .35rem .12rem 0; padding: .18rem .5rem;
    background: #f1f5f9; border-radius: 6px; white-space: nowrap;
}
.paire-heure { font-weight: 600; font-variant-numeric: tabular-nums; }
.paire-heure-vide { color: #dc2626; }
.paire-duree { color: #64748b; font-size: .82rem; }

/* Le nom d'un salarié mène à son historique : il doit se voir cliquable sans
   pour autant colorer toute la colonne en bleu. */
a.fil-salarie { text-decoration: none; color: inherit; }
a.fil-salarie:hover strong { color: #2563eb; text-decoration: underline; }
a.present-puce { text-decoration: none; color: inherit; }
a.present-puce:hover { border-color: #2563eb; }

/* Sortie non badgée : même puce que les présents, mais l'œil doit voir tout de
   suite que ce bloc-là est une liste de corrections à faire, pas un effectif. */
.puce-oubli { background: #fff7ed; border-color: #fdba74; }
a.puce-oubli:hover { border-color: #ea580c; }

/* ═══ Badges de pointage d'un salarié ═══
   Des cartes plutôt qu'un tableau : chaque badge est un objet physique qu'on
   nomme, qu'on égare et qu'on rend — la fiche doit s'y prêter. */
.badges-grille { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); margin-bottom: 1.2rem; }
.badge-carte {
    display: flex; flex-direction: column; gap: .5rem;
    padding: .85rem 1rem .6rem; border: 1px solid #e2e8f0; border-radius: 10px;
    background: #fff; transition: border-color .15s;
}
.badge-carte:hover { border-color: #cbd5e1; }
.badge-carte-perdu { background: #f8fafc; }
.badge-carte-perdu .badge-code, .badge-carte-perdu .badge-puce { opacity: .5; }

.badge-carte-tete { display: flex; align-items: center; gap: .6rem; }
.badge-puce { flex: 0 0 auto; color: #2563eb; display: flex; }
.badge-puce svg { width: 22px; height: 22px; }
.badge-nom { flex: 1 1 auto; min-width: 0; }
/* Le nom s'édite sur place : le champ ne se distingue du texte qu'au survol,
   et l'enregistrement part quand on le quitte — pas de bouton en plus. */
.badge-nom input {
    width: 100%; border: 1px solid transparent; background: transparent;
    font-weight: 600; font-size: .95rem; padding: .25rem .4rem; border-radius: 6px;
}
.badge-nom input:hover { border-color: #e2e8f0; }
.badge-nom input:focus { border-color: #2563eb; background: #fff; outline: none; }

.badge-code {
    font-size: .82rem; letter-spacing: .06em; color: #475569;
    background: #f1f5f9; padding: .2rem .5rem; border-radius: 5px; align-self: flex-start;
}
.badge-pied { display: flex; gap: 1rem; justify-content: flex-end; border-top: 1px solid #f1f5f9; padding-top: .4rem; }
.badge-pied .btn-lien { font-size: .82rem; }

.badge-ajout { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.badge-ajout input[name=uid] { flex: 1 1 240px; font-family: ui-monospace, Menlo, Consolas, monospace; }
.badge-ajout input[name=libelle] { flex: 1 1 180px; }



/* ═══ Tableau de bord du salarié : l'employeur et le reste ═══
   Deux colonnes : la carte d'identité de la société à gauche, ce qui appelle
   une action à droite. Sous 980 px les deux s'empilent, la société en tête. */
.accueil-salarie { display: grid; gap: 1.2rem; grid-template-columns: minmax(270px, 330px) 1fr; align-items: stretch; }
.accueil-principal { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.accueil-principal .tuiles-info,
.accueil-principal .grille-soldes { margin: 0; }
@media (max-width: 980px) { .accueil-salarie { grid-template-columns: 1fr; } }

/* Colonne à part entière : elle descend jusqu'en bas de la page, l'identité
   légale calée en pied. Sous 980 px elle repasse au-dessus du contenu. */
.tuile-societe {
    display: flex; flex-direction: column; gap: .9rem;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
    padding: 1.2rem 1.3rem; box-shadow: 0 1px 2px rgba(15,23,42,.04);
    height: 100%;
}
.societe-marque { display: flex; align-items: center; gap: .8rem; }
.societe-logo { width: 52px; height: 52px; object-fit: contain; border-radius: 10px; background: #f8fafc; padding: 4px; flex: 0 0 auto; }
.societe-monogramme {
    width: 52px; height: 52px; border-radius: 10px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: #1e3a8a; color: #fff; font-weight: 800; font-size: 1.15rem; letter-spacing: .02em;
}
.societe-nom { display: block; font-size: 1.05rem; line-height: 1.25; }
.societe-forme { font-size: .8rem; color: #64748b; text-transform: uppercase; letter-spacing: .05em; }

/* Le contenu reste groupé en haut : la carte garde sa hauteur pleine, mais
   rien ne descend chercher le bas de la colonne. */
.societe-faits { margin: 0; display: flex; flex-direction: column; gap: .75rem; }
.societe-fait dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; margin-bottom: .15rem; }
.societe-fait dd { margin: 0; font-size: .9rem; line-height: 1.4; }
/* La convention collective est l'information la plus utile au salarié :
   c'est elle qui fixe ses minima, ses congés et son préavis. */
.societe-fait-vedette { background: #eff6ff; border-left: 3px solid #2563eb; border-radius: 0 8px 8px 0; padding: .55rem .7rem; }
.societe-fait-vedette dt { color: #1d4ed8; }
.societe-dirigeant { display: inline-flex; align-items: center; gap: .4rem; margin-right: .6rem; }
.societe-legal { margin: 0; padding-top: .7rem; border-top: 1px solid #f1f5f9; font-size: .75rem; color: #94a3b8; letter-spacing: .02em; }

/* ═══ En-tête du tableau de bord salarié ═══ */
.accueil-entete { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.accueil-entete h1 { margin: 0 0 .1rem; }
.accueil-identite { margin: 0; display: flex; flex-wrap: wrap; gap: .1rem .7rem; font-size: .92rem; }

/* Liens du pied de la tuile employeur */
.societe-liens { display: flex; flex-direction: column; gap: .3rem; padding-top: .7rem; border-top: 1px solid #f1f5f9; font-size: .85rem; }


/* ═══ Mon compte ═══
   Deux colonnes : l'accès et la sécurité à gauche, ce que la personne saisit à
   droite. Tous les champs partagent la même grille, donc la même largeur — un
   numéro de téléphone n'a aucune raison d'être plus étroit qu'un e-mail. */
.compte-colonnes { display: grid; gap: 1.2rem; grid-template-columns: minmax(280px, 340px) 1fr; align-items: start; }
@media (max-width: 980px) { .compte-colonnes { grid-template-columns: 1fr; } }

.compte-acces { display: flex; flex-direction: column; gap: 1rem; }
.compte-portrait { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .45rem; }
.compte-portrait strong { font-size: 1.05rem; }
.compte-portrait small { line-height: 1.4; }

.compte-faits { margin: 0; display: flex; flex-direction: column; gap: .7rem; }
.compte-faits dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; margin-bottom: .15rem; }
.compte-faits dd { margin: 0; font-size: .9rem; word-break: break-word; }

.compte-mdp { display: flex; flex-direction: column; gap: .8rem; }
.compte-mdp .btn { align-self: flex-start; }

/* Une section à l'intérieur d'une carte, plutôt qu'une carte de plus : six
   encadrés empilés pour un seul formulaire, c'était le vrai défaut. */
.form-section {
    margin: 1.6rem 0 .2rem; padding-top: 1rem; border-top: 1px solid #eef2f7;
    font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: #64748b;
}
.compte-acces .form-section { margin-top: .4rem; }

.form-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.2rem; margin-top: .8rem; }
.form-large { grid-column: 1 / -1; }
@media (max-width: 620px) { .form-grille { grid-template-columns: 1fr; } }

.champ-bloc { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.champ-bloc label { margin: 0; }
.champ-bloc input { width: 100%; margin: 0; }

/* Actions d'une ligne de tableau : des boutons alignés, jamais du texte nu. */
.actions-boutons { display: flex; gap: .5rem; justify-content: flex-end; align-items: center; flex-wrap: wrap; }

/* ═══ Règlement intérieur et notes de service ═══
   Une seule carte de document sert aux deux rubriques : c'est ce qui garantit
   qu'elles ne divergeront pas. Ouvrir un règlement et ouvrir une note sont le
   même geste, ils méritent la même commande. */
.reglement-entete { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.reglement-entete h1 { margin: 0; }
.reglement-entete p { margin: .1rem 0 0; }
.reglement-entete .btn { margin-left: auto; }
.reglement-logo { width: 54px; height: 54px; object-fit: contain; border-radius: 10px; background: #f8fafc; padding: 5px; }

.doc-avertissement { display: flex; gap: .9rem; align-items: flex-start; background: #fffbeb; border-color: #fde68a; }
.doc-avertissement-icone { font-size: 1.5rem; line-height: 1.2; flex: 0 0 auto; }
.doc-avertissement p { margin: 0; line-height: 1.55; }

.docs-liste { display: flex; flex-direction: column; gap: .7rem; }
.doc-carte {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1rem 1.2rem;
    transition: border-color .15s, box-shadow .15s;
}
.doc-carte:hover { border-color: #cbd5e1; box-shadow: 0 2px 8px rgba(15,23,42,.05); }

/* Une pastille de format plutôt qu'un émoji : elle dit tout de suite si le
   document s'ouvrira dans le navigateur ou s'il faudra le télécharger. */
.doc-icone {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: .68rem; font-weight: 800; letter-spacing: .06em; color: #fff;
}
.doc-icone-pdf { background: #b91c1c; }
.doc-icone-doc { background: #1d4ed8; }

.doc-corps { min-width: 0; }
.doc-titre { display: block; color: inherit; font-weight: 700; font-size: 1.02rem; text-decoration: none; line-height: 1.3; }
.doc-titre:hover { color: #1d4ed8; text-decoration: underline; }
.doc-meta { margin: .3rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .87rem; color: #475569; }
.doc-action { flex: 0 0 auto; white-space: nowrap; }
.doc-gestion { grid-column: 1 / -1; border-top: 1px solid #f1f5f9; padding-top: .7rem; }

@media (max-width: 700px) {
    .doc-carte { grid-template-columns: auto minmax(0, 1fr); }
    .doc-action { grid-column: 1 / -1; text-align: center; }
}

/* ═══ Régulariser une journée de pointage ═══
   Une carte par journée, numérotée en trois temps : ce qu'on a oublié, à
   quelle heure, et pourquoi. La personne doit comprendre ce qu'on lui demande
   sans avoir à deviner ce que « badgeages impairs » veut dire. */
.regul-carte { border-left: 4px solid #f59e0b; }
.regul-tete { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: .8rem; }
.regul-alerte { font-size: 1.4rem; line-height: 1.1; color: #d97706; flex: 0 0 auto; }
.regul-jour { font-size: 1.05rem; }
.regul-diagnostic { margin: .15rem 0 0; color: #475569; }

.regul-releve { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 1rem;
                padding: .7rem .9rem; background: #f8fafc; border-radius: 8px; font-size: .9rem; }

.regul-form { display: flex; flex-direction: column; gap: 1rem; }
.regul-choix { border: 0; padding: 0; margin: 0; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.regul-choix legend { font-weight: 600; margin-bottom: .5rem; padding: 0; }
.regul-option {
    display: flex; gap: .6rem; align-items: flex-start; margin: 0;
    padding: .7rem .9rem; border: 1px solid #e2e8f0; border-radius: 9px;
    cursor: pointer; font-weight: 400; transition: border-color .15s, background-color .15s;
}
.regul-option:hover { border-color: #cbd5e1; }
.regul-option:has(input:checked) { border-color: #2563eb; background: #eff6ff; }
.regul-option input { width: auto; margin: .2rem 0 0; flex: 0 0 auto; }
.regul-option span { display: flex; flex-direction: column; gap: .1rem; }
.regul-option small { color: #64748b; line-height: 1.35; }

.regul-saisie { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; }
.regul-motif { flex: 1 1 280px; }
/* Deux listes côte à côte plutôt qu'un champ « heure » natif : l'icône de
   celui-ci se vise à l'autre bout du champ, et il se saisit mal au doigt. */
.saisie-heure { display: flex; align-items: center; gap: .4rem; }
.saisie-heure select { width: auto; min-width: 76px; font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.saisie-heure-sep { font-weight: 700; color: #475569; }

/* ─── Nom de salarié cliquable ────────────────────────────────────────────
   Poser un lien sur un nom ne doit pas le transformer en lien bleu souligné :
   la liste resterait lisible mais deviendrait bariolée. Le nom garde sa
   couleur et n'annonce sa cible qu'au survol. */
.lien-salarie { color: inherit; text-decoration: none; border-radius: 4px; }
.lien-salarie:hover,
.lien-salarie:focus-visible { color: var(--primaire, #2563eb); text-decoration: underline; }
.lien-salarie:focus-visible { outline: 2px solid var(--primaire, #2563eb); outline-offset: 2px; }

/* Colonne d'actions d'un tableau : aussi étroite que son contenu, collée à
   droite. La classe était posée sur onze tableaux sans avoir jamais eu de
   règle — les boutons flottaient au milieu d'une colonne trop large. */
.tableau th.th-actions { width: 1%; white-space: nowrap; text-align: right; }
.tableau td.actions, .tableau td.actions-icones { text-align: right; }

/* ═══ Corrections de pointage : la fiche d'instruction ═══
   Accepter une correction, c'est écrire une heure dans le décompte de
   quelqu'un. La fiche doit donc montrer la journée telle qu'elle a été badgée,
   ce qu'elle deviendra, et de quoi juger l'heure annoncée — un tableau ne
   portait que l'heure et le motif, on décidait à l'aveugle. */
.corr-fiche { margin-bottom: .9rem; }
.corr-tete { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.corr-identite { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.corr-identite small { font-size: .78rem; }
.corr-age { margin-left: auto; }

/* Suite des passages de la journée, lue de gauche à droite comme elle s'est
   déroulée. Ce ne sont pas des barres : chaque jeton porte une heure exacte. */
.corr-journee {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0;
    background: #f8fafc; border: 1px solid var(--bord); border-radius: 12px;
    padding: .8rem .9rem; margin-bottom: .8rem;
}
.corr-passage {
    display: flex; flex-direction: column; align-items: center; gap: .1rem;
    background: #fff; border: 1px solid var(--bord); border-radius: 9px;
    padding: .4rem .7rem; min-width: 74px;
}
.corr-passage strong { font-size: 1rem; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.corr-passage small { font-size: .68rem; color: var(--muet); text-transform: lowercase; }
/* Le passage proposé se distingue de ceux qui ont réellement été badgés :
   tant que la demande n'est pas acceptée, il n'existe pas. */
.corr-passage-propose {
    border-style: dashed; border-color: #f59e0b; background: #fffbeb;
}
.corr-passage-propose strong { color: #b45309; }
.corr-passage-propose small { color: #b45309; font-weight: 700; }
.corr-lien { flex: 0 0 22px; height: 1px; background: var(--bord); }

.corr-bilan { margin: 0 0 .8rem; font-size: .9rem; }
.corr-motif {
    margin: 0 0 .9rem; padding: .55rem .9rem;
    border-left: 3px solid var(--bord); color: var(--encre); font-style: italic;
}

.corr-reperes { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .45rem; }
.corr-reperes li { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .85rem; }
.corr-repere-cle {
    font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--muet); min-width: 160px;
}
.corr-ecart { font-style: normal; font-weight: 700; color: #b45309; }

.corr-decision {
    display: flex; align-items: flex-end; gap: .7rem; flex-wrap: wrap;
    border-top: 1px solid var(--bord); padding-top: .9rem;
}
.corr-commentaire { display: flex; flex-direction: column; gap: .25rem; flex: 1 1 260px; margin: 0; }
.corr-commentaire .corr-repere-cle { min-width: 0; }
.corr-commentaire small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.corr-boutons { display: flex; gap: .5rem; }
.corr-repli {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; padding: .4rem .5rem;
    font-size: .75rem; font-weight: 700; color: var(--muet);
    background: #fff; border: 1px dashed var(--bord); border-radius: 9px;
}

/* ─── Marqueur « Espace personnel » ──────────────────────────────────────
   Un encadrant a deux casquettes ; quand il consulte SES données de salarié,
   la page l'annonce. Le marqueur ne s'affiche jamais pour un simple salarié :
   il n'a qu'un univers, inutile de le nommer. */
.marqueur-espace {
    margin-left: auto; align-self: flex-start;
    padding: .35rem .8rem; border-radius: 999px;
    font-size: .78rem; font-weight: 700; letter-spacing: .03em;
    color: #1d4ed8; background: #eff6ff; border: 1px solid #bfdbfe;
    white-space: nowrap;
}

/* ─── Barre de navigation : familles à menu déroulant ─────────────────────
   La barre porte cinq entrées stables ; les modules vivent dans des menus
   par famille. Le bouton d'une famille s'habille exactement comme un lien
   de la barre — l'usager ne doit pas percevoir de différence de nature. */
.nav-groupe { position: relative; display: inline-flex; }
.nav-famille {
    color: #dbeafe; padding: .45rem .8rem; border-radius: 8px; font-weight: 600;
    font-size: .92rem; background: none; border: 0; cursor: pointer;
    font-family: inherit; display: inline-flex; align-items: center; gap: .3rem;
}
.nav-famille:hover { background: rgba(255,255,255,.1); }
.nav-famille.actif { background: rgba(255,255,255,.18); color: #fff; box-shadow: inset 0 -2px 0 rgba(255,255,255,.55); }
.nav-famille[aria-expanded="true"] { background: rgba(255,255,255,.16); color: #fff; }
.nav-famille[aria-expanded="true"] .menu-chevron { transform: rotate(180deg); }

.nav-deroulant {
    position: absolute; top: calc(100% + .55rem); left: 0; z-index: 60;
    min-width: 230px; max-width: min(320px, calc(100vw - 1rem));
    background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .16); padding: .4rem;
}
.nav-deroulant a {
    display: block; padding: .5rem .75rem; border-radius: 8px;
    color: var(--encre); font-weight: 500; font-size: .9rem;
}
.nav-deroulant a:hover { background: #f1f5f9; text-decoration: none; }
.nav-deroulant a.actif { background: #eff6ff; color: var(--bleu); }

@media (max-width: 780px) {
    /* Cinq entrées tiennent en deux rangées de pastilles : on rend le retour
       à la ligne, car le défilement horizontal clippait les menus déroulants
       (un parent en overflow coupe ses enfants positionnés). */
    .nav { flex-wrap: wrap; overflow: visible; }
    .nav-famille { padding: .35rem .6rem; font-size: .85rem; white-space: nowrap; }
}

.npaie-actions { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.npaie-recap { margin: 0 0 1rem; padding-left: 1.2rem; }
.npaie-recap li { margin-bottom: .3rem; }

.npaie-form-interloc { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .6rem; }
.npaie-form-interloc input[type=text], .npaie-form-interloc input[type=email], .npaie-form-interloc input[type=tel] { flex: 1 1 140px; }
.npaie-form-interloc .case { flex: 0 0 auto; }
.npaie-societes-coches {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .2rem .8rem; margin-bottom: .4rem;
}

/* ─── Champ fichier habillé ───────────────────────────────────────────────
   L'input natif est masqué : le bouton est un vrai bouton de l'application,
   et le nom du fichier choisi s'affiche à côté. */
.champ-fichier { display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.champ-fichier .champ-fichier-bouton { margin: 0; cursor: pointer; }
.champ-fichier-nom { font-size: .85rem; max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Aperçu de logo compact, pour les fiches où le logo est un détail et non une
   section : même damier, moitié moins de place. */
.logo-apercu-compact { width: 84px; height: 84px; border-radius: 10px; }
.logo-apercu-compact img { width: 64px; height: 64px; }
.fiche-logo-ligne { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.fiche-logo-ligne .logo-apercu { flex: none; }

/* ─── Tuiles des cabinets comptables ──────────────────────────────────────
   Peu de cabinets, donc de LARGES cartes à l'italienne : le logo occupe tout
   le flanc gauche, en grand, sur fond neutre — c'est lui qu'on reconnaît.
   L'identité et l'état se lisent à sa droite. Une tuile = un lien entier
   vers la fiche, aucune zone morte. */
.grille-cabinets {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(430px, 1fr));
    gap: 1.1rem; margin-bottom: 1.6rem;
}
.cab-tuile {
    display: flex; align-items: stretch; min-height: 168px;
    background: #fff; border: 1px solid var(--bord); border-radius: 16px;
    overflow: hidden; color: var(--encre);
    transition: transform .16s, box-shadow .16s, border-color .16s;
}
.cab-tuile:hover {
    text-decoration: none; color: var(--encre);
    transform: translateY(-3px); border-color: var(--teinte, var(--bleu));
    box-shadow: 0 14px 30px rgba(15, 23, 42, .13);
}
/* Fond NEUTRE : le logo porte ses propres couleurs, on ne les concurrence pas. */
.cab-tuile-marque {
    flex: 0 0 172px; display: flex; align-items: center; justify-content: center;
    padding: 1rem; background: #f8fafc; border-right: 1px solid #eef2f7;
}
.cab-tuile-marque img {
    width: 128px; height: 128px; object-fit: contain;
    filter: drop-shadow(0 6px 14px rgba(15, 23, 42, .16));
}
.cab-tuile-monogramme {
    width: 120px; height: 120px; border-radius: 26px;
    display: flex; align-items: center; justify-content: center;
    font-size: 3.2rem; font-weight: 800;
    background: #fff; color: var(--teinte, var(--bleu));
    border: 2px solid #e2e8f0;
    box-shadow: 0 6px 14px rgba(15, 23, 42, .1);
}
.cab-tuile-droite { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cab-tuile-corps {
    display: flex; flex-direction: column; gap: .4rem;
    padding: 1.05rem 1.2rem .7rem; flex: 1;
}
.cab-tuile-nom { font-size: 1.14rem; line-height: 1.25; letter-spacing: -.01em; }
.cab-tuile-expert { font-size: .84rem; color: var(--muet); }
.cab-tuile-societes { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.cab-tuile-pied {
    display: flex; align-items: center; gap: .3rem;
    padding: .6rem 1.2rem .8rem; border-top: 1px solid #f1f5f9;
    font-size: .82rem; font-weight: 600; color: var(--muet);
}
.cab-tuile-off { opacity: .55; filter: grayscale(.5); }
.cab-tuile-off:hover { opacity: .8; }
@media (max-width: 560px) {
    .grille-cabinets { grid-template-columns: 1fr; }
    .cab-tuile { flex-direction: column; min-height: 0; }
    .cab-tuile-marque { flex: none; border-right: 0; border-bottom: 1px solid #eef2f7; padding: 1.2rem; }
}
.statut-alerte { background: var(--rouge); box-shadow: 0 0 0 3px #fee2e2; }

/* ═══ Navette de paie : la feuille de calcul ═══════════════════════════════
   Ce tableau est la synthèse de l'application : il se présente comme le
   tableur du cabinet — cellules denses et bordées, rien qui ressemble à un
   formulaire. On LIT un document ; un clic dans une cellule permet d'y
   écrire directement, et toute cellule retouchée se teinte en ambre jusqu'à
   l'enregistrement. */
.npaie-defilement { overflow-x: auto; }
.npaie-tableau {
    /* Jamais d'ascenseur horizontal : la feuille se partage l'écran en
       pourcentages (table-layout fixed + colgroup), sans aucun plancher. */
    width: 100%;
    border-collapse: collapse; table-layout: fixed;
    font-size: .84rem; line-height: 1.35;
}
/* Pas de bordure sur le pourtour : en border-collapse, la bordure externe
   chevauche le bord du tableau et déborde d'un pixel — c'est elle qui faisait
   naître l'ascenseur horizontal. Le cadre, c'est la carte. */
.npaie-tableau th, .npaie-tableau td {
    border: 1px solid #e2e8f0; padding: .3rem .45rem;
    vertical-align: middle; overflow-wrap: break-word;
}
.npaie-tableau th:first-child, .npaie-tableau td:first-child { border-left: 0; }
.npaie-tableau th:last-child, .npaie-tableau td:last-child { border-right: 0; }
.npaie-tableau thead th { border-top: 0; }
.npaie-tableau tr:last-child td { border-bottom: 0; }
/* Une hauteur de ligne UNIFORME, quel que soit le contenu : une cellule
   ne pousse jamais sa ligne. Le trop-long est tronqué à l'ellipse et se lit
   en entier au survol (title) ou en éditant la cellule.
   2.3rem et pas moins : l'avatar (26px) + le padding dépasse 2.2rem, et la
   ligne TOTAL, sans avatar, resterait 1px plus basse que les autres. */
.npaie-tableau tbody td {
    height: 2.3rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.npaie-tableau thead th {
    background: #eef2f7; font-size: .7rem; font-weight: 700;
    letter-spacing: .02em; text-transform: uppercase; color: #475569;
    padding: .4rem .45rem; text-align: center;
    white-space: normal; line-height: 1.25; vertical-align: middle;
}
.npaie-tableau tbody tr:hover td { background: #fafcff; }

.npaie-fixe { background: #fff; }
.npaie-tableau thead .npaie-fixe { background: #eef2f7; }

/* Les cellules éditables n'affichent AUCUN chrome au repos — c'est le survol
   et le focus qui disent « ici, on écrit ». */
.npaie-case[contenteditable] { cursor: text; }
.npaie-case[contenteditable]:hover { background: #f1f5f9; }
.npaie-case[contenteditable]:focus {
    outline: 2px solid var(--bleu); outline-offset: -2px; background: #fff;
    /* En édition, pas d'ellipse : le texte défile sous le curseur. */
    text-overflow: clip;
}
.npaie-modifiee, .npaie-tableau tbody tr:hover td.npaie-modifiee { background: #fffbeb; }
.npaie-modifiee:hover { background: #fef3c7; }

.npaie-nombre { text-align: center; font-variant-numeric: tabular-nums; }
.npaie-total td {
    background: #f8fafc; font-weight: 700; border-top: 2px solid #cbd5e1;
}
/* La cellule du nom : pastille, nom qui s'ellipse, croix — un seul rang,
   c'est lui qui donne sa hauteur régulière à la ligne. */
.npaie-salarie { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.npaie-nom {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* La croix de retrait vit DANS la cellule du nom et ne se montre qu'au survol
   de la ligne : une action rare n'a pas droit à une colonne permanente. */
.npaie-suppr-ligne {
    flex: none; opacity: 0; transition: opacity .12s;
    background: none; border: 0; cursor: pointer; color: var(--rouge);
    padding: 0 .1rem; line-height: 1;
}
.npaie-tableau tbody tr:hover .npaie-suppr-ligne { opacity: .75; }
.npaie-suppr-ligne:hover { opacity: 1 !important; }
/* Au clavier, la croix doit se voir : sans ça, Tab pose le focus sur un
   bouton invisible et Entrée retire un salarié sans prévenir. */
.npaie-suppr-ligne:focus-visible { opacity: 1; }

.npaie-compteur { color: #b45309; font-weight: 700; font-size: .85rem; }
.npaie-secondaires { display: flex; gap: 1rem; align-items: center; margin-top: .3rem; }
/* L'état du brouillon vit dans la barre d'actions, calé à droite sur deux
   lignes : la barre dit à la fois quoi faire et où l'on en est. */
.npaie-etat {
    margin-left: auto; display: flex; flex-direction: column;
    align-items: flex-end; gap: .15rem; text-align: right;
    font-size: .85rem; line-height: 1.3;
}
.npaie-etat small { font-size: .75rem; }

/* ═══ Affichage dynamique — les tuiles d'afficheurs ═══
   Un écran = une tuile : nom, état de marche, horaires, URL à jeton. */
.aff-grille {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 1rem; margin-bottom: 1.2rem;
}
.aff-tuile { margin-bottom: 0; display: block; color: inherit; }
a.aff-tuile:hover { text-decoration: none; }
.aff-tete { display: flex; align-items: center; gap: .8rem; }
.aff-tete strong { font-size: 1.05rem; }
.aff-statut { margin-left: auto; font-size: .85rem; color: var(--muet); white-space: nowrap; }
.aff-horaires { margin: .5rem 0 0; color: var(--muet); font-size: .9rem; }
.aff-url { margin: .6rem 0 0; }
.aff-url code {
    display: block; font-size: .74rem; word-break: break-all;
    background: #f8fafc; border: 1px solid var(--bord); border-radius: 8px; padding: .45rem .6rem;
}
.aff-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }

/* ═══ Affichage dynamique — la galerie des pages ═══
   Chaque page est une carte avec sa mini-diapo (accent du type, vignette
   photo), son état et ses actions ; les diapos automatiques suivent, avec
   leur interrupteur. L'ordre des cartes EST l'ordre de passage à l'écran. */
.affp-grille {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem; margin-bottom: 1.2rem;
}
.affp-carte { margin-bottom: 0; display: flex; flex-direction: column; gap: .6rem; }
.affp-eteinte { opacity: .55; }
.affp-diapo {
    position: relative; border-radius: 10px; overflow: hidden;
    background: linear-gradient(160deg, #f1f5f9, #e3e9f5);
    border-top: 5px solid var(--accent, #2563eb);
    padding: .9rem 1rem 1.1rem; min-height: 108px;
    display: flex; flex-direction: column; justify-content: flex-end; gap: .45rem;
}
.affp-diapo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.affp-etiquette {
    position: relative; align-self: flex-start; font-size: .62rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; color: var(--accent, #2563eb);
    background: #fff; border-radius: 99px; padding: .2rem .55rem;
}
.affp-diapo strong { position: relative; font-size: .98rem; line-height: 1.25; color: #0f172a; }
.affp-meta { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--muet); flex-wrap: wrap; }
.affp-actions { display: flex; gap: .45rem; margin-top: auto; align-items: center; flex-wrap: wrap; }
/* Le réglage de durée : compact, calé à droite de la rangée d'actions. */
.affp-duree { display: inline-flex; align-items: center; gap: .3rem; margin-left: auto; }
.affp-duree input { width: 3.6rem; text-align: center; }
/* Le champ de source prend la place qui reste sur la ligne des actions et ne
   passe à la ligne que s'il n'y tient pas : une tuile plus haute que les autres
   les étire toutes, la galerie étant une grille à hauteurs égales. */
.affp-flux { display: inline-flex; align-items: center; gap: .3rem; flex: 1 1 9rem; }
.affp-flux input { flex: 1; min-width: 0; font-size: .82rem; }
/* La liste des films de la semaine, dans la tuile « Cinéma » de la galerie. */
.cine-liste { list-style: none; flex-basis: 100%; margin-top: .4rem; font-size: .82rem; }
.cine-liste li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .15rem 0; }
.cine-liste li.masque span { text-decoration: line-through; color: var(--muet); }

/* L'éditeur de page : formulaire à gauche, aperçu réel 16/9 à droite. */
.affp-editeur { display: grid; grid-template-columns: minmax(340px, 1fr) minmax(380px, 1.2fr); gap: 1rem; align-items: start; }
.affp-editeur .carte { margin-bottom: 0; }
.affp-apercu { border-radius: 10px; overflow: hidden; border: 1px solid var(--bord); aspect-ratio: 16 / 9; background: #eef2f7; }
.affp-apercu iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 1000px) { .affp-editeur { grid-template-columns: 1fr; } }

/* ═══ Affichage (écran de la zone de pause) — édition d'une annonce ═══
   Le petit formulaire replié sous « Modifier » : empilé, compact. */
.form-annonce-edition {
    display: flex; flex-direction: column; gap: .45rem;
    margin-top: .6rem; padding: .8rem; min-width: 300px;
    background: #f8fafc; border: 1px solid var(--bord); border-radius: 10px;
    text-align: left;
}
.form-annonce-edition input[type=text], .form-annonce-edition textarea,
.form-annonce-edition select, .form-annonce-edition input[type=date] { width: 100%; }

/* ═══ Navette — l'atelier d'une société ═══
   Le circuit société → cabinet en bandeau, puis l'année en frise : douze
   cases-mois qui disent d'un regard ce qui est envoyé, en brouillon, à
   préparer — et qui portent l'action de préparation. */
.nsoc-circuit { display: flex; align-items: center; gap: 1.3rem; flex-wrap: wrap; }
.nsoc-partie { display: flex; align-items: center; gap: .85rem; min-width: 0; flex: 1 1 300px; }
.nsoc-partie > div { min-width: 0; }
.nsoc-partie strong { display: block; }
/* .texte-alerte transporte un font-size de note : ici c'est un TITRE de bloc,
   il garde la taille du strong d'en face et n'emprunte que la couleur. */
.nsoc-partie strong.texte-alerte { font-size: 1rem; }
.nsoc-fleche { color: #94a3b8; flex: none; width: 26px; height: 26px; }

.nsoc-frise-tete { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.nsoc-frise-tete h2 { margin: 0; }
.nsoc-frise-nav { margin-left: auto; display: flex; gap: .4rem; }
.nsoc-frise-nav .btn { white-space: nowrap; }
.nsoc-frise {
    display: grid; grid-template-columns: repeat(12, 1fr); gap: .5rem;
    margin-top: .9rem;
}
.nsoc-mois {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .35rem; min-height: 70px; padding: .5rem .25rem;
    border: 1px solid var(--bord); border-radius: 10px;
    text-align: center; color: inherit; text-decoration: none;
}
a.nsoc-mois:hover { border-color: var(--bleu); text-decoration: none; }
.nsoc-mois-nom {
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--muet);
}
.nsoc-mois-envoyee { background: #f0fdf4; border-color: #bbf7d0; }
.nsoc-mois-brouillon { background: #fffbeb; border-color: #fde68a; }
.nsoc-mois-vide { background: #fafbfc; }
/* Le mois en retard : c'est LA case qui appelle le clic. Le bouton est
   recompacté pour tenir dans une case de frise à 12 colonnes. */
.nsoc-mois-accent { border: 1.5px dashed var(--bleu); background: #eff6ff; }
.nsoc-mois-accent .btn { padding: .25rem .55rem; font-size: .74rem; white-space: nowrap; }
.nsoc-mois-version { font-size: .65rem; color: var(--muet); }
.nsoc-mois-tiret { font-size: .8rem; color: #cbd5e1; min-height: 1.2rem; }
.nsoc-mois-attente { font-size: .74rem; color: var(--bleu); font-weight: 600; }
/* Préparer un mois passé quelconque : discret au repos, net au survol
   de la case — et visible au clavier. */
.nsoc-plus {
    border: 1px solid var(--bord); background: #fff; color: var(--muet);
    border-radius: 6px; width: 1.5rem; height: 1.5rem; line-height: 1;
    cursor: pointer; opacity: .35; transition: opacity .12s;
}
.nsoc-mois:hover .nsoc-plus, .nsoc-plus:focus-visible { opacity: 1; color: var(--bleu); border-color: var(--bleu); }
.nsoc-autre-mois { margin-top: 1rem; }
.nsoc-autre-mois summary { display: inline-block; }
.nsoc-autre-mois form { margin-top: .6rem; }
/* Les selects du projet sont en width:100% par défaut : ici c'est une ligne. */
.nsoc-autre-mois select { width: auto; }

@media (max-width: 1150px) { .nsoc-frise { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 760px)  { .nsoc-fleche { display: none; } }
@media (max-width: 640px)  { .nsoc-frise { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 430px)  { .nsoc-frise { grid-template-columns: repeat(3, 1fr); } }

/* ═══ Fiche mensuelle d'un salarié (navette) ═══
   L'analyse d'un mois en une page : identité, compteurs, et le mois jour par
   jour. Les jours neutres (week-ends, fériés, hors contrat) s'estompent, le
   jour ouvré sans badgeage saute aux yeux. */
.nsal-tete { display: flex; gap: 1.2rem; align-items: flex-start; }
.nsal-identite {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: .55rem 1.4rem; margin: 0; flex: 1;
}
.nsal-identite dt { font-size: .72rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--muet); margin-bottom: .1rem; }
.nsal-identite dd { margin: 0; }
.nsal-plages { display: block; margin-top: .15rem; }
.nsal-badge { font-size: .78rem; letter-spacing: .05em; }

.nsal-mois td { padding: .32rem .55rem; font-size: .85rem; }
.nsal-jour { white-space: nowrap; font-variant-numeric: tabular-nums; }
.nsal-neutre td { background: #f8fafc; color: var(--muet); }
.nsal-alerte td { background: #fff7f7; }
.nsal-plus { color: #b45309; font-weight: 700; }
.nsal-moins { color: #1d4ed8; font-weight: 700; }
.nsal-motif { font-size: .8rem; padding-top: 0 !important; border-top: 0 !important; }
.nsal-sous { margin-top: .5rem; }

/* ═══════════════════════════════════════════════════════════════
   Adaptation téléphone / tablette (PWA)
   TOUT vit dans des @media (max-width) : au-dessus de ces largeurs,
   aucune de ces règles n'existe — l'affichage PC reste intact par
   construction. On corrige les MOTIFS partagés (barre, entêtes,
   tableaux, grilles, formulaires), pas les pages une à une.
   ═══════════════════════════════════════════════════════════════ */

/* — Tablette portrait : les doubles colonnes cèdent un peu plus tôt — */
@media (max-width: 900px) {
    .fiche-infos { grid-template-columns: auto 1fr; }
    .catalogue-grille, .grille-registres { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}

/* Le bouton ☰ et le panneau de menu mobile n'existent pas sur PC :
   la barre classique fait foi. Leur affichage ne vient que du @media. */
.nav-burger, .nav-mobile { display: none; }

/* — Téléphone — */
@media (max-width: 640px) {
    /* Structure : moins de marges, tout l'écran utile */
    .container { margin: .8rem auto; padding: 0 .7rem; }
    .carte { padding: .9rem; }
    h1, .entete-section h1 { font-size: 1.2rem; }
    h2 { font-size: 1.02rem; }

    /* Entêtes de page : titre au-dessus, boutons en dessous sur toute
       la largeur — fini les boutons écrasés à droite du titre */
    .entete-section { flex-direction: column; align-items: stretch; }
    .groupe-boutons { width: 100%; }
    .groupe-boutons .btn { flex: 1 1 auto; text-align: center; }

    /* Barre du haut : UNE ligne propre — marque à gauche, avatar et bouton ☰
       à droite. Les familles de la barre PC disparaissent : le ☰ ouvre un
       panneau qui liste tout le menu d'un coup, sections comprises — rien à
       faire défiler ni à deviner. (Première tentative en barre défilante
       abandonnée : les menus s'ouvraient tronqués par l'overflow.) */
    .topbar-inner { padding: .4rem .7rem; gap: .6rem; flex-wrap: nowrap; }
    .brand { font-size: 1.05rem; margin-right: auto; }
    .nav { display: none; }
    .nav-burger {
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; flex: 0 0 auto;
        border: 1px solid rgba(147, 197, 253, .45); border-radius: 10px; cursor: pointer;
        background: rgba(37, 99, 235, .45); color: #fff;
    }
    .nav-burger svg { width: 22px; height: 22px; }
    .nav-burger[aria-expanded="true"] { background: rgba(59, 130, 246, .7); border-color: rgba(191, 219, 254, .7); }

    .nav-mobile {
        position: fixed; left: .6rem; right: .6rem; z-index: 70;
        background: #fff; border: 1.5px solid #93c5fd; border-radius: 14px;
        box-shadow: 0 18px 44px rgba(30, 58, 138, .3);
        padding: .5rem; max-height: 75vh; overflow-y: auto;
    }
    .nav-mobile a {
        display: flex; align-items: center; justify-content: space-between; gap: .6rem;
        padding: .62rem .8rem; border-radius: 9px;
        color: var(--encre); font-weight: 600; font-size: .95rem;
    }
    .nav-mobile a:hover { text-decoration: none; background: #f1f5f9; }
    .nav-mobile a.actif { background: #eff6ff; color: var(--bleu); }
    /* Les titres de familles : de vraies bandes bleues, plus visibles que les
       entrées — en petites capitales grises, ils se noyaient dans le contenu. */
    .nav-mobile-famille {
        margin: .55rem 0 .25rem; padding: .5rem .8rem;
        background: #eff6ff; color: var(--bleu-fonce, #1e3a8a);
        font-size: .98rem; font-weight: 800; letter-spacing: .01em;
        border-radius: 9px; border-left: 4px solid var(--bleu);
    }
    .nav-mobile-famille:first-child { margin-top: 0; }
    /* Fermé = attribut hidden ; ouvert = bloc (le display:none de base est
       posé hors média, celui-ci le supplante uniquement panneau ouvert) */
    .nav-mobile:not([hidden]) { display: block; }

    /* Sous-navigations et onglets d'état : une ligne défilable */
    .onglets-time, .onglets-module, .formations-onglets {
        flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
        scrollbar-width: none; padding-bottom: .2rem;
    }
    .onglets-time::-webkit-scrollbar, .onglets-module::-webkit-scrollbar,
    .formations-onglets::-webkit-scrollbar { display: none; }
    .onglets-time a, .onglets-module a, .formations-onglet { white-space: nowrap; flex: 0 0 auto; }

    /* Tableaux : cellules resserrées ; le défilement horizontal interne
       des cartes sans-marge existe déjà, on abaisse juste le plancher */
    table td, table th { padding: .5rem .6rem; }
    .carte.sans-marge > table { min-width: 540px; }

    /* Tuiles de stats : deux par ligne, chiffres contenus */
    .grille-soldes { grid-template-columns: 1fr 1fr; gap: .6rem; }
    .stat-chiffre { font-size: 1.45rem; }
    .solde-chiffre { font-size: 1.5rem; }

    /* Formulaires : boutons de validation pleine largeur, champs à
       hauteur de doigt, date/heure jamais étriqués */
    .ligne-boutons { flex-direction: column; }
    .ligne-boutons .btn { text-align: center; }
    input[type=date], input[type=time], select { min-height: 40px; }

    /* Les filtres en carte s'empilent proprement */
    .barre-filtre { flex-direction: column; align-items: stretch; }
    .barre-filtre .champ-recherche { max-width: none; }
}

/* ═══ Page publique « Installer l'application » (PWA + QR codes) ═══ */
.appli-hero { text-align: center; max-width: 620px; margin: 1.5rem auto 2rem; }
.appli-hero h1 { margin-bottom: .5rem; }
.appli-hero p { color: var(--muet); margin: 0; }
.appli-icone {
    width: 84px; height: 84px; border-radius: 20px; margin-bottom: 1rem;
    box-shadow: 0 10px 28px rgba(29, 78, 216, .25);
}
.appli-bienvenue {
    max-width: 620px; margin: -.8rem auto 1.4rem; text-align: center;
    background: #dcfce7; color: #166534; font-weight: 600;
    padding: .6rem 1rem; border-radius: 10px;
}
.appli-plateformes {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem;
    max-width: 760px; margin: 0 auto;
}
@media (max-width: 700px) { .appli-plateformes { grid-template-columns: 1fr; } }
.appli-carte {
    background: var(--carte); border: 1px solid var(--bord); border-radius: 18px;
    padding: 1.4rem; display: flex; flex-direction: column; align-items: center;
    gap: .9rem; text-align: center;
}
.appli-cible {
    border-color: var(--bleu); box-shadow: 0 12px 32px rgba(29, 78, 216, .16);
    position: relative;
}
.appli-tete { display: flex; align-items: center; gap: .7rem; }
.appli-logo { width: 34px; height: 34px; color: var(--encre); }
.appli-logo-android { color: #3ddc84; }
.appli-plateforme { display: flex; flex-direction: column; text-align: left; line-height: 1.25; }
.appli-plateforme strong { font-size: 1.05rem; }
.appli-plateforme small { color: var(--muet); }
.appli-qr {
    background: #fff; border: 1px solid var(--bord); border-radius: 14px;
    padding: .9rem; width: 200px; height: 200px; box-sizing: content-box;
}
.appli-qr svg { display: block; width: 100%; height: 100%; }
.appli-scan { margin: 0; font-weight: 600; font-size: .92rem; }
.appli-etapes {
    margin: 0; padding: 0; list-style: none; counter-reset: geste;
    display: flex; flex-direction: column; gap: .55rem; text-align: left; width: 100%;
}
.appli-etapes li {
    counter-increment: geste; display: flex; align-items: center; gap: .6rem;
    font-size: .92rem;
}
.appli-etapes li::before {
    content: counter(geste); flex: 0 0 auto;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--bleu); color: #fff; font-weight: 700; font-size: .8rem;
    display: inline-flex; align-items: center; justify-content: center;
}
.appli-mini { width: 16px; height: 16px; vertical-align: -2px; }
.appli-note {
    max-width: 620px; margin: 1.6rem auto 0; text-align: center;
    color: var(--muet); font-size: .9rem;
}

/* ═══ Visites médicales ═══
   Même grammaire que les entretiens — cartes d'échéance à liseré coloré,
   frise chronologique — mais sous son propre préfixe : réutiliser les classes
   d'un autre module lie deux écrans qui n'ont pas de raison d'évoluer ensemble. */
.vm-tete { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.vm-avatar { width: 56px; height: 56px; font-size: 1.3rem; }
.vm-tete-nom { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.vm-tete-nom strong { font-size: 1.15rem; letter-spacing: -.01em; }
.vm-tete-nom span { color: #64748b; font-size: .92rem; }
.vm-regime { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; text-align: right; }
.vm-regime small { color: #64748b; font-size: .8rem; max-width: 30ch; }

.vm-echeances { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin-bottom: 1.4rem; }
.vm-carte { border-left: 4px solid #cbd5e1; display: flex; flex-direction: column; gap: .3rem; margin-bottom: 0; }
.vm-carte header { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; }
.vm-carte-type { font-size: .8rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: .03em; }
.vm-carte-date { margin: 0; font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; color: #1f2937; }
.vm-carte-detail { margin: 0; font-size: .85rem; color: #64748b; }
.vm-carte-action { align-self: flex-start; padding-left: 0; }
.vm-carte-retard   { border-left-color: #dc2626; }
.vm-carte-retard .vm-carte-date { color: #b91c1c; }
.vm-carte-bientot  { border-left-color: #ea580c; }
.vm-carte-bientot .vm-carte-date { color: #c2410c; }
.vm-carte-planifie { border-left-color: #2563eb; }
.vm-carte-planifie .vm-carte-date { color: #1d4ed8; }
.vm-carte-ok       { border-left-color: #16a34a; }
.vm-carte-inconnu .vm-carte-date { color: #94a3b8; }
.vm-etat-retard   { background: #fee2e2; color: #b91c1c; }
.vm-etat-bientot  { background: #ffedd5; color: #c2410c; }
.vm-etat-planifie { background: #dbeafe; color: #1d4ed8; }
.vm-etat-ok       { background: #dcfce7; color: #15803d; }
.vm-etat-inconnu  { background: #f1f5f9; color: #64748b; }

/* Historique en frise : puce pleine par visite réalisée, pointillée si prévue,
   rouge si elle a conclu à une inaptitude. */
.vm-frise { list-style: none; margin: 0; padding: 0; }
.vm-frise-item { position: relative; padding: 0 0 1.2rem 1.7rem; }
.vm-frise-item::before { content: ''; position: absolute; left: .48rem; top: 1.1rem; bottom: 0; width: 2px; background: #e2e8f0; }
.vm-frise-item:last-child { padding-bottom: .2rem; }
.vm-frise-item:last-child::before { display: none; }
.vm-frise-puce { position: absolute; left: 0; top: .3rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; border: 3px solid #16a34a; background: #fff; }
.vm-frise-item.est-prevue .vm-frise-puce { border-color: #f59e0b; border-style: dashed; }
.vm-frise-item.est-inapte .vm-frise-puce { border-color: #dc2626; }
.vm-frise-corps { display: flex; flex-direction: column; gap: .25rem; }
.vm-frise-entete { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.vm-frise-meta { font-size: .85rem; color: #64748b; }
.vm-frise-amenagements { margin: .2rem 0 0; font-size: .88rem; color: #475569; background: #f8fafc; border-left: 3px solid #cbd5e1; padding: .4rem .7rem; border-radius: 0 6px 6px 0; }
.vm-frise-actions { display: flex; gap: .6rem; }

/* Les leviers du régime — trois situations et l'exposition — en pastilles
   sous le nom du salarié : ce qui détermine le régime s'affiche à côté de lui. */
.vm-leviers { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding-top: .85rem; margin-top: .3rem; border-top: 1px solid var(--bord); }
.vm-leviers-titre { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #64748b; margin-right: .2rem; }
.vm-leviers-note { flex-basis: 100%; font-size: .8rem; color: #94a3b8; }
.vm-leviers .inline { display: inline; }
.vm-interrupteur { border: 1px solid var(--bord); background: #fff; border-radius: 999px; padding: .3rem .85rem; font-weight: 600; font-size: .82rem; cursor: pointer; color: #475569; white-space: nowrap; }
.vm-interrupteur:hover { border-color: var(--bleu); color: var(--bleu-fonce); }
.vm-interrupteur.est-expose { background: #eef2ff; border-color: #c7d2fe; color: #3730a3; }
.vm-expo-panneau { flex-basis: 100%; border-top: 1px dashed var(--bord); padding-top: .9rem; margin-top: .2rem; }

.vm-exposition { display: flex; align-items: flex-start; justify-content: space-between; gap: .9rem; flex-wrap: wrap; background: #eef2ff; border-left: 3px solid #4f46e5; padding: .8rem 1rem; border-radius: 0 8px 8px 0; margin-bottom: 1rem; }
.vm-exposition strong { display: block; }
.vm-exposition span { font-size: .85rem; color: #4b5563; }

.vm-poste-vieux { color: #b91c1c; font-weight: 600; }
@media (max-width: 700px) { .vm-regime { align-items: flex-start; text-align: left; } }

/* ═══ Temps partiel ═══ */
.badge-quotite { background: #e0f2fe; color: #075985; }
.tp-bloc { border: 1px solid var(--bord); border-radius: 10px; padding: .9rem 1rem 1rem; margin: 1.2rem 0; }
.tp-bloc legend { font-weight: 700; padding: 0 .4rem; }
.tp-choix { display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: center; }
.tp-choix input[type=number] { margin: 0 .3rem; display: inline-block; }
.tp-jours { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: .3rem 0 .4rem; }
/* Le jour non travaillé d'un temps partiel : hachures discrètes, la cellule reste cliquable. */
.cal-cellule.cal-repos { background-image: repeating-linear-gradient(45deg, transparent 0 5px, rgba(15, 23, 42, .07) 5px 7px); }

/* Rôles cumulables (22/10/2026) : les cases à cocher de la fiche utilisateur, côte à côte. */
.roles-cases { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; padding: .35rem 0 .1rem; }
.roles-cases .case { margin: 0; }
/* Périmètre de supervision : même cadre que le bloc temps de travail. */
.bloc-perimetre { border: 1px solid var(--bord); border-radius: 10px; padding: .9rem 1rem 1rem; margin: 1.2rem 0; }
.bloc-perimetre legend { font-weight: 700; padding: 0 .4rem; }
.bloc-perimetre .aide-champ { margin-top: 0; }

/* API partenaires (27/10/2026) : tuiles d'applications, pastilles de niveau,
   jeton affiché une fois, codes de réponse du journal, page de documentation. */
.api-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.api-tuile {
    display: flex; flex-direction: column; gap: .4rem; padding: 1rem 1.1rem 0.9rem;
    background: #fff; border: 1px solid var(--bord); border-left: 5px solid var(--teinte, var(--bleu));
    border-radius: 12px; color: inherit; transition: box-shadow .15s, transform .15s;
}
.api-tuile:hover { text-decoration: none; box-shadow: 0 6px 18px rgba(0,0,0,.08); transform: translateY(-1px); }
.api-tuile-off { opacity: .55; filter: grayscale(.5); }
.api-tuile-off:hover { opacity: .8; }
.api-tuile-tete { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.api-tuile-nom { font-size: 1.12rem; line-height: 1.25; letter-spacing: -.01em; }
.api-tuile-meta { font-size: .85rem; color: var(--muet); }
.api-tuile-societes { display: flex; flex-wrap: wrap; gap: .3rem; }
.api-tuile-pied { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: .3rem; padding-top: .55rem; border-top: 1px solid #f1f5f9; font-size: .82rem; color: var(--muet); }
.api-niveau {
    display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 700;
    letter-spacing: .02em; text-transform: uppercase; vertical-align: middle; white-space: nowrap;
}
.api-niveau-1 { background: #e0f2fe; color: #075985; }
.api-niveau-2 { background: #dcfce7; color: #166534; }
.api-niveau-3 { background: #fae8ff; color: #86198f; }
.api-niveaux-doc { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; align-items: start; margin: 0 0 .6rem; }
.api-niveaux-doc dt, .api-niveaux-doc dd { margin: 0; }
.api-jeton-neuf { border: 2px solid #86efac; background: #f0fdf4; }
.api-jeton-neuf h2 { margin-top: 0; }
.api-jeton-neuf code { font-size: .86rem; word-break: break-all; background: #fff; padding: .55rem .7rem; border-radius: 6px; border: 1px solid #bbf7d0; }
.api-jeton-neuf .aide-champ code { padding: .05rem .3rem; border: none; background: #ecfdf5; }
.api-prefixe { font-size: .8rem; color: var(--muet); }
.api-code { display: inline-block; min-width: 2.6rem; text-align: center; padding: .1rem .4rem; border-radius: 6px; font-weight: 700; font-size: .8rem; font-variant-numeric: tabular-nums; }
.api-code-ok { background: #dcfce7; color: #166534; }
.api-code-refus { background: #fef3c7; color: #92400e; }
.api-code-erreur { background: #fee2e2; color: #991b1b; }
.api-doc { max-width: 960px; margin: 0 auto; }
.api-doc-route { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .95rem; margin: 1.3rem 0 .3rem; color: #1e3a8a; }
.api-doc-pre { background: #0f172a; color: #e2e8f0; padding: .8rem 1rem; border-radius: 8px; font-size: .8rem; line-height: 1.45; overflow-x: auto; margin: .4rem 0 .8rem; }
.api-doc .carte h2 .api-niveau { margin-right: .4rem; }
@media (max-width: 700px) {
    .api-niveaux-doc { grid-template-columns: 1fr; }
}

/* ═══ Jours travaillés non prévus (Time › Heures sup, 29/10/2026) ═══ */
.jnp-badge { display: inline-block; padding: .08rem .45rem; border-radius: 6px; background: #fef3c7; color: #92400e; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.jnp-bilan { border-left: 3px solid #f59e0b; padding-left: .7rem; }

/* ═══ Assiduité (Congés › Assiduité, 11/11/2026) — préfixe asd- ═══
   Graphiques SVG dessinés par app/Graphique.php : traits de 2 px, grille
   discrète, infobulle commune (Views/assiduite/infobulle.php). */
.asd-periode { font-size: .86rem; color: var(--muet); margin: -.5rem 0 1.1rem; }
/* Huit tuiles : quatre par ligne, le détail tient à côté du chiffre */
.asd-tuiles { grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); }
.asd-tuiles .tuile-info-detail { white-space: nowrap; }
.asd-case { justify-content: flex-end; }
.asd-case span:last-child { display: inline-flex; align-items: center; gap: .4rem; font-weight: 400; min-height: 2.55rem; }
/* Les paires de cartes ont TOUJOURS la même hauteur : la carte s'étire, le
   graphique se cale en bas (légendes de longueurs différentes comprises). */
.asd-grille-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: stretch; margin-bottom: 1rem; }
.asd-grille-2 > .carte { margin-bottom: 0; min-width: 0; display: flex; flex-direction: column; }
.asd-grille-2 .asd-defile { margin-top: auto; }
.asd-titre { font-size: 1.02rem; margin: 0 0 .15rem; }
@media (max-width: 1000px) { .asd-grille-2 { grid-template-columns: 1fr; } }
.asd-graphe h2 { font-size: 1.02rem; margin: 0 0 .15rem; }
.asd-sous { font-size: .8rem; color: var(--muet); margin: 0 0 .55rem; }
.asd-defile { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.asd-svg { display: block; width: 100%; height: auto; min-width: 520px; font-family: inherit; overflow: visible; }
.asd-axe { font-size: 10.5px; fill: #898781; font-variant-numeric: tabular-nums; }
.asd-etiq { font-size: 11px; fill: #52514e; font-weight: 600; }
.asd-croix { stroke: #898781; stroke-width: 1; opacity: 0; transition: opacity .1s; }
.asd-col:hover .asd-croix, .asd-col:focus .asd-croix { opacity: .55; }
.asd-bande { fill: transparent; }
.asd-col:hover .asd-bande, .asd-col:focus .asd-bande { fill: rgba(15, 23, 42, .045); }
.asd-col, .asd-point { outline: none; }
.asd-point:hover circle:first-child, .asd-point:focus circle:first-child { stroke: #1f2937; }
.asd-legende { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-size: .8rem; color: var(--encre); margin: .1rem 0 .5rem; }
.asd-legende span { display: inline-flex; align-items: center; gap: .4rem; }
.asd-pastille { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c); vertical-align: middle; }
.asd-pastille-trait { width: 16px; height: 2px; border-radius: 2px; }
.asd-pastille-tirets { width: 16px; height: 0; background: none; border-top: 2px dashed var(--c); border-radius: 0; }
.asd-pastille-point { border-radius: 50%; }
.asd-donnees { margin-top: .5rem; font-size: .82rem; }
.asd-donnees summary { cursor: pointer; color: var(--muet); width: max-content; }
.asd-donnees table { margin-top: .5rem; font-size: .8rem; }
.asd-ib {
    position: fixed; z-index: 1000; pointer-events: none;
    background: #fff; border: 1px solid var(--bord); border-radius: 10px;
    box-shadow: 0 10px 28px -10px rgba(15, 23, 42, .3);
    padding: .5rem .7rem; font-size: .8rem; min-width: 170px; max-width: 290px;
}
.asd-ib strong { display: block; margin-bottom: .25rem; font-size: .82rem; }
.asd-ib-l { display: flex; align-items: center; gap: .45rem; line-height: 1.6; }
.asd-ib-l i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.asd-ib-l i.vide { background: transparent; }
.asd-ib-l span { color: var(--muet); flex: 1; }
.asd-ib-l b { font-variant-numeric: tabular-nums; color: var(--encre); white-space: nowrap; }

/* La tuile principale à onglets : de vrais onglets posés sur le haut de la
   carte (l'onglet actif se fond dans le panneau), pas des pastilles. */
.carte.asd-tuile-onglets { padding: 0; overflow: hidden; }
.asd-onglets {
    display: flex; align-items: flex-end; gap: .2rem;
    padding: .55rem .8rem 0; background: #f1f5f9; border-bottom: 1px solid var(--bord);
    overflow-x: auto; scrollbar-width: none;
}
.asd-onglets::-webkit-scrollbar { display: none; }
.asd-onglet {
    appearance: none; font: inherit; font-size: .92rem; font-weight: 600; white-space: nowrap;
    color: #475569; background: transparent; cursor: pointer;
    border: 1px solid transparent; border-bottom: none; border-radius: 9px 9px 0 0;
    padding: .6rem 1.1rem .65rem; margin-bottom: -1px;
}
.asd-onglet:hover { background: #e2e8f0; color: var(--encre); }
.asd-onglet[aria-selected="true"] {
    background: #fff; color: var(--bleu); border-color: var(--bord);
    box-shadow: inset 0 3px 0 var(--bleu);
}
.asd-onglet:focus-visible { outline: 2px solid var(--bleu); outline-offset: -3px; }
.asd-panneau { padding: 1.05rem 1.25rem 1rem; }

/* La liste : une ligne par salarié, l'essentiel seulement ; toute la ligne ouvre sa page */
.tableau-asd td { vertical-align: middle; }
.tableau-asd tbody tr[data-href] { cursor: pointer; }
/* Séparateur de société : une bande, le nom, le nombre — rien d'autre */
.tableau-asd tbody tr.asd-groupe td {
    background: #f1f5f9; border-top: 1px solid var(--bord); border-bottom: 1px solid var(--bord);
    padding: .55rem 1rem; font-size: .88rem;
}
.tableau-asd tbody tr.asd-groupe:hover { background: none; }
.asd-groupe-nom { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; color: var(--encre); }
.asd-groupe-nom .logo-societe-mini { margin: 0; }
.asd-groupe-nb { margin-left: .7rem; color: var(--muet); font-size: .8rem; }
.tableau-asd .centre { text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.asd-nature .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.asd-sous-ligne { display: block; font-size: .74rem; color: var(--muet); font-weight: 400; }
.asd-methode summary { cursor: pointer; }
.asd-methode ul { margin: .7rem 0 0; padding-left: 1.2rem; font-size: .86rem; color: #475569; display: grid; gap: .35rem; }

/* La page d'un salarié */
.asd-tete { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.asd-tete-nom { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: .2rem; }
.asd-tete-nom strong { font-size: 1.2rem; letter-spacing: -.01em; }
.asd-tete-nom span { font-size: .86rem; color: var(--muet); }
.tuile-info-detail.asd-mieux { color: #15803d; }
.tuile-info-detail.asd-moins { color: #b91c1c; }

/* « Situé par rapport aux autres » : trois blocs de six lignes côte à côte,
   la valeur du salarié en pastille teintée, société et groupe en retrait. */
.asd-comp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1.6rem; margin-top: .6rem; }
@media (max-width: 1100px) { .asd-comp { grid-template-columns: 1fr; gap: 1rem; } }
.asd-comp-bloc h3 {
    margin: 0 0 .3rem; font-size: .72rem; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: #64748b;
}
.asd-comp-ligne {
    display: grid; grid-template-columns: minmax(0, 1fr) 5.6rem 4.6rem 4.6rem; align-items: center;
    gap: .4rem; padding: .42rem 0; border-top: 1px solid #f1f5f9; font-size: .86rem;
}
.asd-comp-ligne > span:not(:first-child) { text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--muet); }
.asd-comp-entete { border-top: none; padding: .1rem 0 .25rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.asd-comp-entete > span:nth-child(2) { color: var(--encre); }
.asd-comp-lib { color: var(--encre); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asd-ton {
    display: inline-block; min-width: 4.4rem; padding: .12rem .45rem; border-radius: 6px;
    background: #f1f5f9; color: var(--encre); font-weight: 700; font-size: .84rem; text-align: center;
}
.asd-ton-mieux { background: #dcfce7; color: #166534; }
.asd-ton-moins { background: #fee2e2; color: #991b1b; }
.asd-sous .asd-ton { min-width: 0; font-size: .74rem; padding: 0 .35rem; }

/* Les cartes de listes : colonnes internes, listes bornées en hauteur */
.asd-deux-col { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1.8rem; }
.asd-trois-col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
@media (max-width: 1000px) { .asd-deux-col, .asd-trois-col { grid-template-columns: 1fr; } }
.asd-liste-bornee { max-height: 300px; overflow-y: auto; }
.asd-tableau-compact { font-size: .84rem; }
.asd-tableau-compact th, .asd-tableau-compact td { padding: .4rem .55rem; }
.asd-tableau-compact .centre { text-align: center; white-space: nowrap; }
.asd-faits { display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; margin: 1rem 0 0; font-size: .84rem; }
.asd-faits dt { color: var(--muet); font-weight: 600; }
.asd-faits dd { margin: 0; }
.asd-nature { display: grid; grid-template-columns: 10rem 1fr 4.5rem; gap: .45rem .8rem; align-items: center; font-size: .86rem; }
.asd-nature-barre { height: 10px; background: #f1f5f9; border-radius: 3px; overflow: hidden; }
.asd-nature-barre i { display: block; height: 100%; background: var(--c); border-radius: 3px; }
.asd-h3 { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin: .9rem 0 .5rem; color: #64748b; }
.asd-liste { margin: 0; padding-left: 1.1rem; font-size: .86rem; display: grid; gap: .3rem; }

/* Le calendrier jour par jour */
.asd-cal { overflow-x: auto; padding-bottom: .4rem; }
.asd-cal-corps { display: inline-grid; grid-template-columns: auto auto; gap: 4px 6px; }
.asd-cal-mois { display: grid; grid-template-columns: repeat(var(--semaines), 13px); column-gap: 3px; font-size: .7rem; color: var(--muet); height: 1rem; white-space: nowrap; }
.asd-cal-jours { display: grid; grid-template-rows: repeat(7, 13px); row-gap: 3px; font-size: .64rem; color: var(--muet); line-height: 13px; }
.asd-cal-grille { display: grid; grid-template-rows: repeat(7, 13px); grid-auto-flow: column; grid-auto-columns: 13px; gap: 3px; }
.asd-j { display: inline-block; width: 13px; height: 13px; border-radius: 3px; background: #f1f5f9; outline: none; }
.asd-cal-grille .asd-j:hover, .asd-cal-grille .asd-j:focus { box-shadow: 0 0 0 2px #1f2937; }
.asd-j-vide { background: transparent; }
.asd-j-hors { background: transparent; box-shadow: inset 0 0 0 1px #e2e8f0; }
.asd-j-repos { background: #f1f5f9; }
.asd-j-ferie { background: #cbd5e1; }
.asd-j-attendu { background: #dbeafe; }
.asd-j-present { background: #86b6ef; }
.asd-j-retard { background: #86b6ef; box-shadow: inset 0 0 0 2px #d03b3b; }
.asd-j-teletravail { background: #6250d6; }
.asd-j-non_prevu { background: #1c5cab; }
.asd-j-incomplet { background: #ec835a; }
.asd-j-sans_badge { background: #d03b3b; }
.asd-j-absence { background: var(--c); }
.asd-j-absence.asd-j-demi { background: linear-gradient(135deg, var(--c) 50%, #86b6ef 50%); }
.asd-j-futur { background: transparent; box-shadow: inset 0 0 0 1px #eef2f7; }
.asd-j-ecole { background: #0f766e; }

/* ═══ Pointages d'une fiche (refonte du 11/11/2026) — préfixe ptg- ═══ */
.ptg-frise { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; margin: 0 0 1.1rem; }
.ptg-mois {
    position: relative; display: flex; flex-direction: column; gap: .1rem;
    background: #fff; border: 1px solid var(--bord); border-radius: 12px; padding: .7rem .85rem;
    color: var(--encre); transition: border-color .12s, box-shadow .12s;
}
.ptg-mois:hover { text-decoration: none; border-color: var(--bleu); box-shadow: 0 4px 14px rgba(15, 23, 42, .07); }
.ptg-mois-actif { border-color: var(--bleu); box-shadow: inset 0 3px 0 var(--bleu); background: #f8fbff; }
.ptg-mois-vide { opacity: .6; }
.ptg-mois-nom { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #64748b; padding-right: 1.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptg-mois-heures { font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; }
.ptg-mois-jours { font-size: .78rem; color: var(--muet); }
.ptg-mois-alerte {
    position: absolute; top: .55rem; right: .6rem; min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem;
    border-radius: 999px; background: var(--rouge); color: #fff; font-size: .72rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.carte.ptg-carte { overflow: hidden; }
.ptg-tete { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .9rem 1.1rem; border-bottom: 1px solid var(--bord); }
.ptg-nav { display: flex; align-items: center; gap: .5rem; }
.ptg-nav h2 { margin: 0; font-size: 1.1rem; min-width: 9.5rem; text-align: center; }
.ptg-nav .btn-icone { font-size: 1.2rem; font-weight: 700; text-decoration: none; }
.ptg-nav-off { opacity: .25; cursor: default; }
.ptg-resume { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: .86rem; color: var(--muet); }
.ptg-resume strong { color: var(--encre); }
.ptg-resume-alerte, .ptg-resume-alerte strong { color: #b91c1c; }
.ptg-vide { padding: 1.2rem 1.1rem; margin: 0; }
.ptg-table { width: 100%; border-collapse: collapse; }
.ptg-table thead th {
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #64748b;
    text-align: left; padding: .55rem .8rem; background: #f8fafc; border-bottom: 1px solid var(--bord);
}
.ptg-table td { padding: .5rem .8rem; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.ptg-c-jour { width: 6rem; white-space: nowrap; }
.ptg-c-heures { font-variant-numeric: tabular-nums; font-size: .88rem; }
.ptg-c-presence { width: 7rem; white-space: nowrap; text-align: center; font-variant-numeric: tabular-nums; }
.ptg-c-ecart { width: 8.5rem; white-space: nowrap; text-align: center; font-variant-numeric: tabular-nums; }
.ptg-table thead th.ptg-c-presence, .ptg-table thead th.ptg-c-ecart { text-align: center; }
.ptg-c-etat { width: 12rem; text-align: right; white-space: nowrap; }
.ptg-c-etat .btn-icone { margin-left: .3rem; }
.ptg-dow { color: var(--muet); font-size: .82rem; }
.ptg-semaine td {
    background: #f8fafc; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: #475569; padding: .4rem .8rem; border-bottom: 1px solid var(--bord);
}
.ptg-semaine span { margin-left: .6rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--muet); }
.ptg-jour:hover td { background: #fbfdff; }
.ptg-jour-incomplet td:first-child { box-shadow: inset 3px 0 0 var(--rouge); }
/* Une pastille sobre par plage badgée (la ligne de temps a été retirée :
   « on ne comprend pas ce que c'est » — David, 11/11/2026). */
.ptg-paire {
    display: inline-flex; align-items: center; gap: .3rem; margin: .1rem .4rem .1rem 0;
    padding: .18rem .6rem; border-radius: 999px; background: #f1f5f9; color: var(--encre);
    font-size: .86rem; white-space: nowrap;
}
.ptg-fleche { color: #94a3b8; }
.ptg-paire-trouee { background: #fef2f2; }
.ptg-paire-nulle { background: #fffbeb; color: #92400e; }
.ptg-ecart { font-size: .86rem; font-weight: 600; }
.ptg-ecart-plus { color: #15803d; }
.ptg-ecart-moins { color: #b45309; }
.ptg-ecart-nul { color: var(--muet); font-weight: 400; }
.ptg-trou { color: #b91c1c; font-weight: 700; }
.ptg-trou-ouvert { color: #16a34a; }
.ptg-detail td { background: #f8fafc; padding: .7rem 1rem .8rem 6.3rem; }
.ptg-badgeages { display: flex; flex-direction: column; gap: .35rem; }
.ptg-badgeage { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; font-size: .86rem; }
.ptg-badgeage code { min-width: 5rem; }
.ptg-badgeage > .texte-muet { min-width: 19rem; }
.ptg-badgeage-ecarte code { text-decoration: line-through; color: #94a3b8; }
.ptg-detail .anb-lecture { margin-bottom: .6rem; }
.ptg-modifier { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
.ptg-modifier input[type=time] { width: 7.5rem; margin: 0; }
.ptg-detail-pied { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: .6rem; }
.ptg-detail-pied .aide-champ { margin: 0; }
.btn-icone.ptg-ouvert { background: #e0e7ff; color: var(--bleu); }
@media (max-width: 760px) {
    .ptg-table thead { display: none; }
    .ptg-c-ecart { display: none; }
    .ptg-detail td { padding-left: 1rem; }
}

/* ═══ Fiche utilisateur : les statuts en petit tableau, une ligne par case ═══ */
.statuts-cases { border: 1px solid var(--bord); border-radius: 10px; overflow: hidden; margin: .8rem 0; }
.statuts-cases + .statuts-cases { margin-top: -.3rem; }
.statut-case {
    display: grid; grid-template-columns: 1.4rem 13rem minmax(0, 1fr); align-items: center; gap: .6rem;
    padding: .5rem .8rem; margin: 0; cursor: pointer; white-space: nowrap; font-weight: 400;
}
.statut-case + .statut-case { border-top: 1px solid #f1f5f9; }
.statut-case:hover { background: #f8fafc; }
.statut-case input[type=checkbox] { margin: 0; }
.statut-case strong { font-size: .9rem; }
.statut-case small { color: var(--muet); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) { .statut-case { grid-template-columns: 1.4rem minmax(0, 1fr); } .statut-case small { display: none; } }

/* ═══ Connexions IA (Administration, 11/11/2026) — préfixe ia- ═══ */
.ia-intro { max-width: 75ch; color: var(--muet); font-size: .9rem; margin: -.4rem 0 1.2rem; }
.ia-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.carte.ia-tuile { margin: 0; display: flex; flex-direction: column; gap: .6rem; border-left: 4px solid #0f766e; }
.ia-tuile-off { opacity: .65; border-left-color: #cbd5e1; }
.ia-tuile-tete { display: flex; justify-content: space-between; align-items: center; gap: .6rem; font-size: 1.05rem; }
.ia-faits { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; margin: 0; font-size: .86rem; }
.ia-faits dt { color: var(--muet); }
.ia-faits dd { margin: 0; overflow-wrap: anywhere; }
.ia-test { margin: 0; font-size: .84rem; padding: .4rem .6rem; border-radius: 8px; }
.ia-test small { color: var(--muet); }
.ia-test-ok { background: #f0fdf4; color: #166534; }
.ia-test-ko { background: #fef2f2; color: #991b1b; }

/* Composant « ✨ Avis de l'IA » (partials/ia_avis.php) */
.ia-avis {
    border: 1px solid #ddd6fe; background: linear-gradient(180deg, #faf8ff 0%, #fff 70%);
    border-radius: 12px; padding: .8rem 1rem; margin: 0 0 1.1rem;
}
.ia-avis-compact { margin: .6rem 0 0; padding: .55rem .75rem; }
.ia-avis-tete { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; }
.ia-avis-titre { font-weight: 700; color: #5b21b6; font-size: .95rem; }
.ia-avis-compact .ia-avis-titre { font-size: .85rem; }
.ia-avis-corps { margin-top: .7rem; font-size: .9rem; }
.ia-avis-synthese { margin: 0 0 .6rem; line-height: 1.55; }
.ia-avis-points { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .35rem; }
.ia-avis-points li { display: flex; gap: .55rem; align-items: flex-start; line-height: 1.45; }
.ia-avis-icone {
    flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 800; margin-top: .1rem;
}
.ia-niveau-positif .ia-avis-icone { background: #dcfce7; color: #166534; }
.ia-niveau-info .ia-avis-icone { background: #e0f2fe; color: #075985; }
.ia-niveau-attention .ia-avis-icone { background: #fef3c7; color: #92400e; }
.ia-niveau-alerte .ia-avis-icone { background: #fee2e2; color: #991b1b; }
.ia-avis-sous { margin: .4rem 0 .25rem; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #64748b; }
.ia-avis-suggestions { margin: 0 0 .5rem; padding-left: 1.2rem; display: grid; gap: .25rem; }
.ia-avis-pied { margin: .4rem 0 0; font-size: .76rem; color: var(--muet); }
.ia-avis-relancer { font-size: .76rem; padding: 0; }
.ia-avis-attente { margin: 0; color: #6d28d9; font-style: italic; }
.ia-avis-erreur { margin: 0; color: #991b1b; }

/* ═══ Time › Analyse IA des badgeages — préfixe anb- ═══ */
.anb-intro { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; }
.anb-intro h2 { margin: 0 0 .3rem; font-size: 1.05rem; }
.anb-intro p { margin: 0; max-width: 78ch; font-size: .88rem; color: #475569; line-height: 1.55; }
.anb-bilan { display: grid; gap: .3rem; font-size: .86rem; color: var(--muet); min-width: 13rem; }
.anb-bilan strong { color: var(--encre); font-size: 1rem; }
.anb-a-valider, .anb-a-valider strong { color: #b45309; }
.anb-lancer { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; border-left: 4px solid #7c3aed; }
.anb-lancer p { margin: 0; flex: 1; min-width: 260px; }
.anb-h2 { font-size: 1.05rem; margin: 1.4rem 0 .6rem; }
.anb-jour { display: flex; flex-direction: column; gap: .6rem; }
.anb-jour-tete { display: flex; align-items: center; gap: .6rem; }
.anb-jour-qui { display: flex; flex-direction: column; flex: 1; }
.anb-jour-qui .texte-muet { font-size: .82rem; }
.anb-confiance { font-size: .76rem; color: #6d28d9; background: #f5f3ff; padding: .1rem .5rem; border-radius: 999px; }
.anb-lecture { margin: 0; font-size: .9rem; color: #3b0764; background: #faf8ff; border-radius: 8px; padding: .5rem .7rem; }
.anb-passages { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.anb-etiquette { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #64748b; margin-right: .2rem; }
.anb-heure { padding: .12rem .5rem; border-radius: 999px; background: #f1f5f9; font-size: .84rem; font-variant-numeric: tabular-nums; }
.anb-heure-barree { text-decoration: line-through; color: #94a3b8; background: #f8fafc; }
.anb-heure-ajout { background: #ede9fe; color: #5b21b6; font-weight: 600; }
.anb-props { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.anb-props li { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .86rem; }
.anb-action { font-weight: 700; font-size: .8rem; padding: .1rem .5rem; border-radius: 6px; white-space: nowrap; }
.anb-action-ecarter { background: #fee2e2; color: #991b1b; }
.anb-action-ajouter { background: #ede9fe; color: #5b21b6; }
.anb-raison { flex: 1; min-width: 200px; color: #475569; }
.anb-tout { display: flex; gap: .5rem; }
.anb-nowrap { white-space: nowrap; }

/* ═══ Rythme de travail : alternance et télétravail (11/11/2026) ═══ */
.badge-rythme { background: #ccfbf1; color: #115e59; }
.badge-rythme-mini { font-size: .62rem; padding: .02rem .3rem; vertical-align: 1px; }
.rythme-calendrier { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin: .3rem 0 .2rem; font-size: .86rem; }
/* Calendrier des congés : la personne travaille, mais pas sur place */
.cal-cellule.cal-ecole { background-color: #f0fdfa; background-image: repeating-linear-gradient(135deg, transparent 0 5px, rgba(15, 118, 110, .12) 5px 7px); }
.cal-cellule.cal-teletravail { background-color: #f5f3ff; background-image: repeating-linear-gradient(135deg, transparent 0 5px, rgba(98, 80, 214, .10) 5px 7px); }

/* Page « Calendrier d'alternance » : douze mois, un clic par jour ou par semaine */
.alt-annee { font-size: .95rem; padding: 0 .3rem; align-self: center; }
.alt-outils { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; position: sticky; top: .5rem; z-index: 5; }
.alt-periode { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; font-size: .88rem; }
.alt-outils .alt-periode input[type=date] { display: inline-block; width: 10.5rem; margin: 0; }
.alt-bilan { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; font-size: .88rem; }
.alt-bilan span { display: inline-flex; align-items: center; gap: .35rem; }
.alt-temoin { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.alt-annee-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 1100px) { .alt-annee-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) { .alt-annee-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .alt-annee-grille { grid-template-columns: 1fr; } }
.carte.alt-mois { margin: 0; padding: .8rem .7rem; }
.alt-mois h3 { margin: 0 0 .5rem; font-size: .9rem; text-align: center; }
.alt-mois table { width: 100%; border-collapse: separate; border-spacing: 3px; }
.alt-mois th { font-size: .66rem; color: var(--muet); font-weight: 700; text-align: center; padding: 0; }
.alt-mois td { padding: 0; text-align: center; }
.alt-semaine {
    appearance: none; border: none; background: none; cursor: pointer; padding: .15rem .2rem;
    font: inherit; font-size: .62rem; color: #94a3b8; border-radius: 4px;
}
.alt-semaine:hover { background: #e2e8f0; color: var(--encre); }
.alt-jour {
    appearance: none; display: inline-flex; align-items: center; justify-content: center;
    width: 100%; min-width: 1.6rem; height: 1.7rem; border-radius: 6px; font: inherit; font-size: .76rem;
    border: 1.5px solid transparent; cursor: pointer; padding: 0;
}
.alt-jour.alt-entreprise, .alt-temoin.alt-entreprise { background: #dbeafe; color: #1e3a8a; }
.alt-jour.alt-ecole, .alt-temoin.alt-ecole { background: #0f766e; color: #fff; }
.alt-jour.alt-habituel { border-style: dashed; border-color: rgba(15, 23, 42, .18); }
.alt-jour.alt-entreprise.alt-habituel { background: #eff6ff; }
.alt-jour.alt-ecole.alt-habituel { background: #5eead4; color: #134e4a; }
.alt-jour:hover { box-shadow: 0 0 0 2px var(--encre); }
.alt-jour.alt-neutre { background: transparent; color: #cbd5e1; cursor: default; }
.alt-jour.alt-neutre:hover { box-shadow: none; }
.asd-legende-cal .asd-j { width: 11px; height: 11px; }
@media (max-width: 640px) {
    .asd-nature { grid-template-columns: 7.5rem 1fr 3.8rem; }
    .asd-svg { min-width: 480px; }
}
/* ═══════════════════════════ ORGANIGRAMME ═══════════════════════════
   Registre léger, décidé avec David le 11/11/2026 : bordures fines (1 px)
   identiques partout, aucun dégradé, aucun bandeau de couleur, peu de
   cadres. La couleur d'une branche n'est plus qu'une pastille. Tout est
   préfixé og- (feuille unique, non scopée) ; le dessin vient de
   assets/js/organigramme.js, les liaisons sont en CSS pur. */
.og-tuile { --og-trait: #cbd5e1; --og-bord: #e2e8f0; }
.og-vues { display: inline-flex; border: 1px solid var(--bord); border-radius: 8px; overflow: hidden; background: #fff; }
.og-vues a { padding: .42rem .85rem; font-weight: 600; font-size: .86rem; color: #64748b; text-decoration: none; white-space: nowrap; }
.og-vues a + a { border-left: 1px solid var(--bord); }
.og-vues a:hover { color: var(--encre); background: #f8fafc; }
.og-vues a.actif { color: var(--bleu); background: #eff6ff; }

.og-onglet { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; }
.og-onglet-logo { width: 18px; height: 18px; object-fit: contain; }
.og-onglet-pastille { width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; }
.og-onglet-n { font-size: .74rem; font-weight: 600; color: #94a3b8; font-variant-numeric: tabular-nums; }

.og-barre { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .6rem 1rem; border-bottom: 1px solid var(--bord); background: #fff; }
.og-recherche { display: flex; align-items: center; gap: .4rem; flex: 0 1 260px; margin: 0; border: 1px solid var(--bord); border-radius: 8px; padding: 0 .6rem; background: #fff; }
.og-recherche:focus-within { border-color: #93c5fd; }
.og-recherche svg { width: 15px; height: 15px; color: #94a3b8; flex: none; }
.og-recherche input[type="search"] { border: 0 !important; background: transparent !important; margin: 0; padding: .42rem 0; box-shadow: none !important; outline: none; min-width: 0; width: 100%; border-radius: 0; font-size: .88rem; }
.og-zoom { display: inline-flex; border: 1px solid var(--bord); border-radius: 8px; overflow: hidden; background: #fff; }
.og-zoom button { appearance: none; border: 0; background: transparent; font: inherit; font-size: .82rem; padding: .38rem .65rem; cursor: pointer; color: #475569; min-width: 2rem; }
.og-zoom button + button { border-left: 1px solid var(--bord); }
.og-zoom button:hover { background: #f8fafc; }
#og-zoom-val { min-width: 3.6rem; font-variant-numeric: tabular-nums; }
.og-barre-info { color: #94a3b8; font-size: .8rem; margin-left: auto; }
.og-btn-edition { white-space: nowrap; }

.og-edition-barre { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .5rem 1rem; background: #fffbeb; border-bottom: 1px solid #fde68a; position: sticky; top: 0; z-index: 30; }
.og-edition-barre[hidden] { display: none; }
.og-edition-titre { font-weight: 700; color: #92400e; font-size: .82rem; }
.og-edition-aide { color: #92400e; font-size: .82rem; flex: 1; min-width: 200px; }
.og-edition-actions { display: flex; gap: .4rem; flex-wrap: wrap; }

.og-scene { position: relative; overflow: auto; max-height: calc(100vh - 210px); min-height: 420px; background: #fff; cursor: grab; }
.og-scene.og-tire { cursor: grabbing; user-select: none; }
.og-plan { width: max-content; min-width: 100%; padding: 2rem 2rem 2.6rem; box-sizing: border-box; }
.og-arbre { display: flex; flex-direction: column; align-items: center; margin: 0 auto; width: max-content; }
.og-note { color: #94a3b8; font-size: .8rem; margin: .6rem .2rem 0; }

/* ─── Liaisons : un trait d'un pixel ─── */
.og-tige { width: 1px; height: 26px; background: var(--og-trait); flex: none; }
.og-eventail { display: flex; align-items: flex-start; justify-content: center; }
.og-ev { position: relative; display: flex; flex-direction: column; align-items: center; padding: 26px 10px 0; }
.og-ev::before, .og-ev::after { content: ''; position: absolute; top: 0; height: 26px; width: 50%; border-top: 1px solid var(--og-trait); }
.og-ev::before { right: 50%; }
.og-ev::after { left: 50%; border-left: 1px solid var(--og-trait); }
.og-ev:first-child::before, .og-ev:last-child::after { border-top: 0; }
.og-ev:first-child::after { border-top-left-radius: 8px; }
.og-ev:last-child::before { border-right: 1px solid var(--og-trait); border-top-right-radius: 8px; }
.og-ev:last-child::after { border-left: 0; }
.og-ev:only-child::after { border-left: 1px solid var(--og-trait); border-radius: 0; }
.og-ev:only-child::before { border: 0; }
.og-eventail-haut { align-items: flex-end; }
.og-eventail-haut > .og-ev { padding: 0 10px 30px; }
.og-eventail-haut > .og-ev::before, .og-eventail-haut > .og-ev::after { top: auto; bottom: 0; height: 30px; border-top: 0; border-bottom: 1px solid var(--og-trait); }
.og-eventail-haut > .og-ev:first-child::before, .og-eventail-haut > .og-ev:last-child::after { border-bottom: 0; }
.og-eventail-haut > .og-ev:first-child::after { border-radius: 0 0 0 8px; }
.og-eventail-haut > .og-ev:last-child::before { border-radius: 0 0 8px 0; }
.og-eventail-haut > .og-ev:only-child::before { border: 0; }
.og-lien-pct { position: absolute; bottom: 7px; left: 50%; transform: translateX(4px); font-size: .74rem; font-weight: 600; color: #475569; font-variant-numeric: tabular-nums; background: #fff; padding: 0 .2rem; }

/* ─── Avatars ─── */
.og-ava { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; display: block; background: #f1f5f9; }
.og-ava-init { display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--teinte) 12%, #fff); color: var(--teinte); font-weight: 700; font-size: .78rem; }
.og-ava-xs { width: 22px; height: 22px; font-size: .58rem; }
.og-ava-s { width: 28px; height: 28px; font-size: .64rem; }
.og-ava-xl { width: 88px; height: 88px; font-size: 1.5rem; }

/* ─── Carte de la société : un cadre fin, rien d'autre ─── */
.og-racine { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; align-items: center; min-width: 340px; max-width: 640px; padding: .9rem 1.2rem; background: #fff; border: 1px solid var(--og-bord); border-radius: 10px; }
.og-racine-logo { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }
.og-racine-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.og-racine-logo span { font-weight: 700; font-size: 1.1rem; color: #64748b; text-transform: uppercase; }
.og-logo-groupe span { color: #94a3b8; font-size: 1.6rem; }
.og-racine-titre { margin: 0; font-size: 1.15rem; font-weight: 700; color: #0f172a; line-height: 1.25; }
.og-racine-sous { color: #94a3b8; font-size: .8rem; margin-top: .1rem; }
.og-racine-chiffres { display: flex; gap: .9rem; margin-top: .3rem; font-size: .8rem; color: #64748b; }
.og-racine-chiffres b { color: #0f172a; font-weight: 600; font-variant-numeric: tabular-nums; }
.og-racine > .og-mandats, .og-racine > .og-kpi, .og-racine > .og-lien-capital { grid-column: 1 / -1; }
.og-racine:has(.og-kpi) { min-width: 620px; }
.og-arrivee { color: #0d9488; }

.og-mandats { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .3rem; font-size: .8rem; color: #0f172a; }
.og-mandat em { font-style: normal; color: #94a3b8; margin-right: .25rem; }
.og-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: .3rem; margin-top: .5rem; padding-top: .55rem; border-top: 1px solid #f1f5f9; }
.og-kpi div { text-align: center; }
.og-kpi b { display: block; font-size: .98rem; font-weight: 600; color: #0f172a; font-variant-numeric: tabular-nums; }
.og-kpi span { display: block; font-size: .66rem; line-height: 1.25; color: #94a3b8; }
.og-lien-capital { appearance: none; border: 0; background: none; padding: 0; margin-top: .4rem; font: inherit; font-size: .8rem; color: var(--bleu); cursor: pointer; justify-self: start; }
.og-lien-capital:hover { text-decoration: underline; }

/* ─── Capital au-dessus de la société ─── */
.og-capital { display: flex; flex-direction: column; align-items: center; }
.og-capital-vide { display: flex; align-items: center; gap: .7rem; color: #94a3b8; font-size: .82rem; border: 1px dashed var(--og-bord); border-radius: 8px; padding: .4rem .8rem; }
.og-capital-vide .og-lien-capital { margin: 0; }
.og-detenteur { display: flex; align-items: center; gap: .45rem; padding: .4rem .7rem; border: 1px solid var(--og-bord); border-radius: 8px; background: #fff; }
.og-detenteur-nom { font-weight: 600; font-size: .82rem; color: #0f172a; white-space: nowrap; }

/* ─── Direction : un intitulé, des personnes, pas de cadre ─── */
.og-bandes { display: flex; gap: 2.2rem; align-items: flex-start; justify-content: center; }
.og-bande { position: relative; }
.og-bande-tete, .og-branche-tete { display: flex; align-items: center; gap: .45rem; }
.og-bande-tete { justify-content: center; margin-bottom: .5rem; }
.og-bande-tete .og-branche-nom { font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #94a3b8; flex: none; }
.og-bande-tete .og-branche-n { display: none; }
.og-bande-corps { display: flex; gap: .4rem; justify-content: center; min-height: 50px; border-radius: 8px; }

/* ─── Branches : un cadre fin, une pastille de couleur ─── */
.og-branche { width: 240px; background: #fff; border: 1px solid var(--og-bord); border-radius: 10px; }
.og-branche-tete { padding: .6rem .8rem; border-bottom: 1px solid #f1f5f9; }
.og-branche-tete::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.og-bande-tete::before { display: none; }
.og-branche-nom { font-weight: 600; font-size: .88rem; color: #0f172a; flex: 1; min-width: 0; }
.og-branche-n { font-size: .76rem; color: #94a3b8; font-variant-numeric: tabular-nums; }
.og-branche-systeme { border-style: dashed; }
.og-rattache { display: flex; align-items: center; gap: .35rem; padding: .35rem .8rem 0; font-size: .74rem; color: #94a3b8; }
.og-branche-corps { padding: .45rem .5rem .6rem; display: flex; flex-direction: column; gap: .1rem; min-height: 46px; }
.og-noeud-tete + .og-noeud-tete { margin-top: .3rem; padding-top: .3rem; border-top: 1px solid #f1f5f9; }
.og-liste { margin: .1rem 0 0 1.1rem; padding-left: .6rem; border-left: 1px solid #e2e8f0; display: flex; flex-direction: column; gap: .05rem; }
.og-liste-item { position: relative; }

/* ─── Personnes : pas de cadre, une ligne qui s'éclaire au survol ─── */
.og-carte { position: relative; display: flex; align-items: center; gap: .6rem; cursor: pointer; background: transparent; border: 1px solid transparent; border-radius: 8px; padding: .35rem .45rem; outline: none; transition: background .12s ease, border-color .12s ease, opacity .12s ease; }
.og-carte:hover, .og-carte:focus-visible { background: #f8fafc; border-color: var(--og-bord); }
.og-carte-texte { min-width: 0; flex: 1; }
.og-carte-nom { font-size: .84rem; line-height: 1.25; color: #0f172a; }
.og-carte-nom strong { font-weight: 600; }
.og-carte-poste { font-size: .75rem; color: #64748b; line-height: 1.3; }
.og-carte-poste.og-vide { color: #cbd5e1; font-style: italic; }
.og-carte-soc, .og-carte-statuts, .og-carte-meta { font-size: .7rem; color: #94a3b8; line-height: 1.35; }
.og-carte-ligne .og-ava { width: 30px; height: 30px; font-size: .64rem; }
.og-carte-tete { flex-direction: column; text-align: center; gap: .35rem; padding: .55rem .5rem; }
.og-carte-tete .og-ava { width: 52px; height: 52px; font-size: .95rem; }
.og-bande .og-carte-tete { width: 160px; }
.og-branche .og-carte-tete { flex-direction: row; text-align: left; gap: .6rem; }
.og-branche .og-carte-tete .og-ava { width: 38px; height: 38px; }
.og-branche .og-carte-tete .og-carte-nom strong { font-weight: 700; }
.og-choisie { background: #eff6ff !important; border-color: #bfdbfe !important; }

.og-recherche-active .og-carte, .og-recherche-active .og-mini, .og-recherche-active .og-pile-ava { opacity: .3; }
.og-recherche-active .og-trouve { opacity: 1 !important; background: #fef9c3 !important; border-color: #fde047 !important; }
.og-vide-zone { border: 1px dashed var(--og-bord); border-radius: 8px; padding: .7rem; text-align: center; color: #94a3b8; font-size: .78rem; flex: 1; }

/* ─── Groupe : une colonne par société ─── */
.og-soc { width: 236px; background: #fff; border: 1px solid var(--og-bord); border-radius: 10px; }
.og-soc-carte { display: flex; align-items: center; gap: .6rem; padding: .7rem .8rem; text-decoration: none; color: inherit; border-bottom: 1px solid #f1f5f9; border-radius: 10px 10px 0 0; }
.og-soc-carte:hover { background: #f8fafc; }
.og-soc-logo { width: 32px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center; }
.og-soc-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.og-soc-logo span { font-weight: 700; color: #94a3b8; text-transform: uppercase; font-size: .8rem; }
.og-soc-texte { min-width: 0; }
.og-soc-texte strong { display: block; font-size: .9rem; font-weight: 700; color: #0f172a; line-height: 1.2; }
.og-soc-texte span { font-size: .72rem; color: #94a3b8; }
.og-soc-corps { padding: .55rem .6rem .65rem; display: flex; flex-direction: column; gap: .55rem; }
.og-soc-branche-nom { display: flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 600; color: #64748b; margin-bottom: .2rem; }
.og-soc-branche-nom i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }
.og-soc-branche-nom span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.og-soc-branche-nom em { font-style: normal; color: #94a3b8; font-weight: 400; font-variant-numeric: tabular-nums; }
.og-mini { appearance: none; display: flex; align-items: center; gap: .45rem; width: 100%; text-align: left; cursor: pointer; background: transparent; border: 1px solid transparent; border-radius: 7px; padding: .2rem .3rem; font: inherit; }
.og-mini:hover { background: #f8fafc; border-color: var(--og-bord); }
.og-mini span { min-width: 0; display: flex; flex-direction: column; }
.og-mini b { font-size: .78rem; color: #0f172a; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.og-mini small { font-size: .7rem; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.og-pile { display: flex; flex-wrap: wrap; gap: 3px; padding-left: .3rem; }
.og-pile-ava { appearance: none; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 50%; }
.og-pile-ava:hover .og-ava { outline: 2px solid #93c5fd; }
.og-soc-masquee { opacity: .4; }
.og-soc-outils { display: flex; gap: .3rem; justify-content: center; padding: .35rem; border-bottom: 1px solid #fde68a; background: #fffbeb; border-radius: 10px 10px 0 0; }
.og-soc-outils button, .og-branche-outils button { appearance: none; font: inherit; font-size: .72rem; cursor: pointer; color: #475569; background: #fff; border: 1px solid var(--og-bord); border-radius: 6px; padding: .12rem .42rem; }
.og-soc-outils button:hover, .og-branche-outils button:hover { border-color: #94a3b8; }
.og-soc-direction { border-top: 1px solid #f1f5f9; padding-top: .5rem; display: flex; flex-direction: column; gap: .15rem; }
.og-ligne-info { display: flex; justify-content: space-between; gap: .6rem; font-size: .74rem; color: #64748b; }
.og-ligne-info b { color: #0f172a; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.og-ligne-vide, .og-ligne-kpi { font-size: .72rem; color: #94a3b8; }
.og-info { max-width: 620px; margin: 0 auto; text-align: center; font-size: .86rem; color: #475569; border: 1px solid var(--og-bord); border-radius: 10px; padding: .7rem 1rem; }

/* ─── Structure du groupe (SVG) : le registre du document papier ─── */
.og-structure { display: flex; justify-content: center; }
.og-st-svg { display: block; overflow: visible; font-family: inherit; }
.og-st-titre { font-size: 12px; font-weight: 600; letter-spacing: .01em; }
.og-st-mention { font-size: 11px; }
.og-st-siren { font-size: 10.5px; font-variant-numeric: tabular-nums; }
.og-st-nom { font-size: 12px; font-weight: 500; }
.og-st-pct { font-size: 11px; font-variant-numeric: tabular-nums; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.og-st-legende { font-size: 11px; fill: #64748b; }
.og-st-e, .og-st-n { transition: opacity .15s ease; }
.og-st-focus .og-st-e:not(.og-st-on) { opacity: .12; }
.og-st-focus .og-st-n:not(.og-st-on) { opacity: .35; }
.og-st-ici rect { stroke: var(--bleu); stroke-width: 2.2; }
.og-st-n { cursor: default; }

/* Panneau de gestion de la structure */
.og-panneau { position: fixed; bottom: 16px; right: 16px; z-index: 900; width: 520px; max-height: max(320px, calc(100vh - 300px)); display: flex; flex-direction: column; background: #fff; border: 1px solid var(--og-bord); border-radius: 10px; box-shadow: 0 12px 32px -18px rgba(15, 23, 42, .35); cursor: default; }
.og-pn-titre { padding: .7rem 1rem .4rem; font-weight: 700; font-size: .92rem; }
.og-pn-onglets { display: flex; gap: .2rem; padding: 0 .8rem; border-bottom: 1px solid var(--og-bord); }
.og-pn-onglets button { appearance: none; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: .82rem; color: #64748b; padding: .45rem .55rem; cursor: pointer; margin-bottom: -1px; }
.og-pn-onglets button.actif { color: var(--bleu); border-bottom-color: var(--bleu); }
.og-pn-corps { padding: .7rem .9rem .9rem; overflow: auto; display: flex; flex-direction: column; gap: .4rem; }
.og-pn-ligne { display: flex; align-items: center; gap: .35rem; }
.og-pn-ligne select, .og-pn-ligne input { margin: 0; min-width: 0; font-size: .8rem; padding: .3rem .4rem; }
.og-pn-ligne .og-c-noeud { flex: 1; }
.og-pn-fl { color: #94a3b8; }
.og-pn-entite input:first-child { flex: 2; }
.og-pn-entite input:nth-child(2) { flex: 0 0 92px; }
.og-pn-entite input:nth-child(3) { flex: 0 0 80px; }
.og-pn-ordre span, .og-pn-couloir > span:nth-child(2) { flex: 1; font-size: .82rem; }
.og-pn-couloir > i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.og-pn-nuancier { display: inline-flex; gap: 2px; }
.og-pn-nuancier button { appearance: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; background: var(--c); padding: 0; cursor: pointer; box-shadow: 0 0 0 1px #e2e8f0; }
.og-pn-nuancier button.actif { box-shadow: 0 0 0 1.5px var(--c); }
.og-pn-sous { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; margin-top: .5rem; }
.og-pn-cote { font-size: .76rem; color: #64748b; margin-top: .2rem; }
.og-pn-aide { font-size: .78rem; color: #94a3b8; margin: 0 0 .2rem; }
.og-pn-ajout { align-self: flex-start; margin-top: .3rem; }

/* ─── Volet d'une personne ─── */
.og-volet { position: fixed; top: 84px; right: 16px; z-index: 900; width: 310px; max-height: calc(100vh - 110px); overflow: auto; background: #fff; border: 1px solid var(--og-bord); border-radius: 10px; box-shadow: 0 12px 32px -18px rgba(15, 23, 42, .35); }
.og-volet-fermer { position: absolute; top: .45rem; right: .55rem; appearance: none; border: 0; cursor: pointer; width: 28px; height: 28px; border-radius: 6px; background: transparent; font-size: 1.2rem; line-height: 1; color: #64748b; }
.og-volet-fermer:hover { background: #f1f5f9; }
.og-volet-tete { text-align: center; padding: 1.3rem 1.1rem .9rem; border-bottom: 1px solid #f1f5f9; }
.og-volet-tete .og-ava { margin: 0 auto .6rem; }
.og-volet-tete h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: #0f172a; }
.og-volet-poste { color: #64748b; font-size: .84rem; margin-top: .15rem; }
.og-volet-tete .og-puces { display: flex; justify-content: center; gap: .3rem; margin-top: .3rem; font-size: .72rem; color: #94a3b8; }
.og-volet-corps { padding: .5rem 1.1rem; }
.og-volet-l { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .38rem 0; border-bottom: 1px solid #f8fafc; font-size: .82rem; }
.og-volet-l:last-child { border-bottom: 0; }
.og-volet-l > span { color: #94a3b8; }
.og-volet-l b { text-align: right; color: #0f172a; font-weight: 600; }
.og-volet-sous { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; margin-bottom: .35rem; }
.og-volet-equipe { padding: .3rem 1.1rem .8rem; }
.og-lien-personne { appearance: none; display: inline-flex; align-items: center; gap: .4rem; border: 0; background: none; cursor: pointer; font: inherit; font-size: .82rem; font-weight: 600; color: var(--bleu); padding: 0; }
.og-lien-personne:hover span { text-decoration: underline; }
.og-lien-bloc { display: flex; width: 100%; padding: .22rem 0; color: #0f172a; font-weight: 500; }
.og-volet-form { padding: .8rem 1.1rem 1rem; border-top: 1px solid #f1f5f9; }
.og-volet-form label { display: block; font-size: .76rem; color: #64748b; margin-bottom: .5rem; }
.og-volet-form input, .og-volet-form select { width: 100%; margin-top: .2rem; }
.og-volet-boutons { display: flex; flex-direction: column; gap: .4rem; margin-top: .4rem; }
.og-volet-fiche { display: block; margin: 0 1.1rem 1.1rem; text-align: center; }

/* ─── Modification ─── */
.og-editable { outline: 1px dashed #93c5fd; outline-offset: 3px; border-radius: 3px; cursor: text; }
.og-editable:focus { outline: 1px solid var(--bleu); background: #fff; }
.og-edition .og-carte[draggable="true"] { cursor: grab; }
.og-en-vol { opacity: .3; }
.og-glisse .og-branche-corps, .og-glisse .og-bande-corps { outline: 1px dashed #cbd5e1; outline-offset: -3px; }
.og-cible { background: #eff6ff !important; outline: 1px solid #93c5fd !important; outline-offset: -1px; }
.og-carte.og-cible { border-color: var(--bleu) !important; }
.og-carte.og-avant { box-shadow: 0 -2px 0 0 var(--bleu) !important; }
.og-edition .og-branche-tete { flex-wrap: wrap; }
.og-branche-outils { display: inline-flex; gap: .2rem; margin-left: auto; }
.og-branche-tete .og-branche-outils { flex: 1 0 100%; justify-content: flex-end; margin: .35rem 0 0; }
.og-bande-tete .og-branche-outils { margin-left: .5rem; }
.og-pastille-btn { width: 16px; height: 16px; padding: 0 !important; border-radius: 50% !important; background: var(--c) !important; border: 2px solid #fff !important; box-shadow: 0 0 0 1px #cbd5e1; }
.og-plateau { margin-top: 2rem; min-width: 480px; max-width: 900px; border: 1px dashed var(--og-bord); border-radius: 10px; padding: .6rem .8rem; }
.og-plateau-titre { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; margin-bottom: .4rem; }
.og-plateau-corps { display: flex; flex-wrap: wrap; gap: .35rem; }
.og-plateau-vide { color: #94a3b8; font-size: .8rem; }
.og-jeton { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .55rem .2rem .25rem; cursor: grab; border: 1px solid var(--og-bord); border-radius: 999px; font-size: .78rem; color: #334155; }
.og-popover { position: absolute; z-index: 1000; width: 230px; background: #fff; border: 1px solid var(--og-bord); border-radius: 10px; box-shadow: 0 12px 28px -16px rgba(15, 23, 42, .35); padding: .7rem; }
.og-popover-titre { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; margin-bottom: .4rem; }
.og-nuancier { display: grid; grid-template-columns: repeat(6, 1fr); gap: .3rem; }
.og-nuancier button { appearance: none; aspect-ratio: 1; border-radius: 50%; border: 2px solid #fff; background: var(--c); box-shadow: 0 0 0 1px #e2e8f0; cursor: pointer; padding: 0; }
.og-nuancier button.actif, .og-nuancier button:hover { box-shadow: 0 0 0 1.5px var(--c); }
.og-popover-case { display: flex; align-items: center; gap: .4rem; font-size: .78rem; margin-top: .6rem; color: #334155; cursor: pointer; }
.og-popover-case input { margin: 0; width: auto; }

/* ─── Fenêtre « Capital et mandats » ─── */
.og-modale-fond { position: fixed; inset: 0; z-index: 1100; background: rgba(15, 23, 42, .35); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 1rem; overflow: auto; }
.og-modale { width: min(680px, 100%); background: #fff; border: 1px solid var(--og-bord); border-radius: 12px; padding: 1.1rem 1.2rem 1rem; }
.og-modale h3 { margin: 0 0 .7rem; font-size: 1.05rem; font-weight: 700; }
.og-modale-sous { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; margin: .9rem 0 .45rem; }
.og-modale-lignes { display: flex; flex-direction: column; gap: .4rem; }
.og-modale-ligne { display: flex; gap: .4rem; align-items: center; }
.og-modale-ligne select, .og-modale-ligne input { margin: 0; min-width: 0; }
.og-modale-ligne .og-c-noeud, .og-modale-ligne .og-c-personne, .og-modale-ligne .og-c-autre { flex: 1; }
.og-modale-ligne .og-c-fonction { flex: 0 0 200px; }
.og-c-pct-champ { display: inline-flex; align-items: center; gap: .25rem; flex: 0 0 88px; color: #64748b; font-size: .82rem; }
.og-c-pct { width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.og-c-suppr { appearance: none; border: 1px solid var(--og-bord); background: #fff; color: #64748b; border-radius: 6px; width: 28px; height: 28px; cursor: pointer; flex: none; font-size: .8rem; }
.og-c-suppr:hover { border-color: #fca5a5; color: #b91c1c; }
.og-modale-pied { display: flex; align-items: center; justify-content: space-between; margin-top: .5rem; }
.og-modale-total { font-size: .82rem; padding: .2rem .6rem; border-radius: 6px; }
.og-modale-total.og-ok { color: #166534; }
.og-modale-total.og-partiel { color: #92400e; }
.og-modale-total.og-ko { color: #b91c1c; }
.og-modale-erreur { margin-top: .7rem; border: 1px solid #fecaca; color: #991b1b; border-radius: 8px; padding: .5rem .7rem; font-size: .84rem; }
.og-modale-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid #f1f5f9; }

@media (max-width: 640px) {
    .og-barre-info { display: none; }
    .og-volet, .og-panneau { left: 10px; right: 10px; width: auto; top: auto; bottom: 10px; max-height: 70vh; }
    .og-racine, .og-racine:has(.og-kpi) { min-width: 0; grid-template-columns: 1fr; text-align: center; }
    .og-racine-logo { margin: 0 auto; }
    .og-racine-chiffres { justify-content: center; }
    .og-modale-ligne, .og-pn-ligne { flex-wrap: wrap; }
}
/* Impression : une page A4 paysage ; le zoom d'ajustement est posé par le script */
@media print {
    @page { size: A4 landscape; margin: 8mm; }
    .og-barre, .og-edition-barre, .og-note, .og-vues, #og-imprimer, .og-volet, .og-panneau, .og-lien-capital, .asd-onglets, .entete-section, .og-plateau, .og-soc-outils, .og-branche-outils { display: none !important; }
    .og-tuile { box-shadow: none; border: 0; }
    .og-scene { max-height: none; overflow: visible; min-height: 0; }
    .og-plan { padding: 0; }
    .og-tuile * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .og-recherche-active .og-carte, .og-recherche-active .og-mini, .og-recherche-active .og-pile-ava { opacity: 1; }
}
/* ═══ Administration › Sociétés (11/11/2026) ═══
   Des tuiles de même hauteur, bord fin, actions identiques en pied.
   Préfixe sc- (vérifié libre). */
.sc-ajout { display: flex; gap: .4rem; margin: 0; }
.sc-ajout input { margin: 0; min-width: 240px; }
.sc-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; align-items: stretch; }
.sc-tuile { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--bord); border-radius: 10px; transition: border-color .12s ease; }
.sc-tuile:hover { border-color: #cbd5e1; }
.sc-inactive { opacity: .6; }
.sc-corps { display: flex; flex-direction: column; flex: 1; padding: 1rem 1.1rem .8rem; color: inherit; text-decoration: none; }
.sc-tete { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem; }
.sc-logo { width: 36px; height: 36px; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #94a3b8; }
.sc-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sc-identite { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.sc-identite strong { font-size: .98rem; font-weight: 700; color: #0f172a; line-height: 1.25; }
.sc-identite small { font-size: .74rem; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-etat { font-size: .7rem; color: #64748b; border: 1px solid var(--bord); border-radius: 999px; padding: .05rem .5rem; flex: none; }
.sc-details { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem .9rem; margin: 0; }
.sc-details div { min-width: 0; }
.sc-details .sc-large { grid-column: 1 / -1; }
.sc-details dt { font-size: .68rem; color: #94a3b8; margin-bottom: .05rem; }
.sc-details dd { margin: 0; font-size: .84rem; color: #1f2937; font-variant-numeric: tabular-nums; }
.sc-coupe { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-manque { color: #b45309; }
.sc-vide { color: #cbd5e1; }
.sc-pied-infos { display: flex; align-items: baseline; gap: .8rem; margin-top: auto; padding-top: .9rem; font-size: .8rem; color: #64748b; }
.sc-pied-infos b { color: #0f172a; font-weight: 600; font-variant-numeric: tabular-nums; }
.sc-site { color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sc-actions { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .6rem 1.1rem; border-top: 1px solid #f1f5f9; }
.sc-actions-droite { display: flex; align-items: center; gap: .9rem; }
.sc-actions form { margin: 0; display: inline; }
.sc-actions .btn, .sc-lien { white-space: nowrap; }
.sc-pied-infos > span:first-child { flex: none; white-space: nowrap; }
.sc-lien { appearance: none; border: 0; background: none; padding: 0; font: inherit; font-size: .82rem; color: #64748b; cursor: pointer; }
.sc-lien:hover { color: var(--encre); text-decoration: underline; }
.sc-danger:hover { color: var(--rouge); }
.sc-grise { color: #cbd5e1; cursor: not-allowed; }
.sc-grise:hover { color: #cbd5e1; text-decoration: none; }
@media (max-width: 640px) {
    .sc-ajout { width: 100%; }
    .sc-ajout input { min-width: 0; flex: 1; }
}