/* ═══════════════════════════════════════════════════════════════
ExpéRHia · Refonte UI v1 — desktop uniquement
Marque Expéria conservée (terracotta, brun, crème, Londrina logo)
mais la couleur devient fonctionnelle : action ou statut, jamais
décorative. Une seule action primaire par écran.
═══════════════════════════════════════════════════════════════ */
:root{
/* Encres */
--encre:#3E2B1A; --encre-2:#6E5B47; --muet:#98876F;
/* Surfaces */
--fond:#F7F4ED; --carte:#FFFFFF; --surface-2:#FBF9F4;
--ligne:#ECE4D4; --ligne-2:#E0D5C0;
/* Marque */
--terra:#E96646; --terra-h:#D14F30; --terra-pale:#FCEDE7;
--creme:#FFEDC4;
/* Statuts : sens fixe dans toute l'app */
--vert:#55803B; --vert-pale:#EFF4E7;
--jaune:#A97614; --jaune-pale:#FAF1DB; --jaune-txt:#A97614;
--rouge:#C43C43; --rouge-pale:#FAEBEC;
--bleu:#5A6EA5; --bleu-pale:#EDF0F7;
--violet:#8A5E86; --violet-pale:#F3EDF4;
/* Alias hérités (anciens noms encore référencés en inline) */
--brun:#6E5B47; --brun-fonce:#3E2B1A;
--creme-fonce:#EFE1BE; --creme-40:#FBF9F4;
--vert-fonce:#55803B; --terra-fonce:#D14F30;
--rouge-fonce:#C43C43; --bleu-fonce:#4A5A8C; --violet-fonce:#7A4F76;
--jaune-fonce:#A97614; --charbon:#37322F; --texte:#3E2B1A;
/* ── DEUX SIGNES DESSINÉS ── (v14.72)
Le « + » et le « ✓ » des pastilles étaient des glyphes de fonte :
épais, mal centrés, différents d'une machine à l'autre. Ce sont
deux traits, à la graisse des icônes du kit, portés en masque sur
la couleur courante — ils suivent donc le texte. */
--ic-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
--ic-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
/* Typo */
--f-logo:'Londrina Solid',cursive;
--f-titre:'Bricolage Grotesque',sans-serif;
--f-ui:'Instrument Sans',sans-serif;
--fd:var(--f-titre); --f-disp:var(--f-titre);
--fb:var(--f-ui); --f-body:var(--f-ui);
/* Métriques */
--side-l:236px; --r:12px; --r-sm:9px;
--ombre:0 1px 2px rgba(62,43,26,.05);
--ombre-2:0 8px 28px -10px rgba(62,43,26,.16);
}
*{margin:0;padding:0;box-sizing:border-box}
html{min-width:1024px}
body{font-family:var(--f-ui);background:var(--fond);color:var(--encre);
-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;font-size:14px}
button,input,select,textarea{font-family:var(--f-ui)}
a{color:inherit;text-decoration:none}
:is(button,a,input,select,textarea):focus-visible{outline:2px solid var(--terra);outline-offset:2px}
.ico{width:16px;height:16px;flex:none;vertical-align:-3px}
/* ═══ Garde mobile : desktop uniquement ═══ */
.mgate{display:none}
@media(max-width:767px){
html{min-width:0}
body>.app,body>.dwr,body>.modal,body>.toast,body>.delzone{display:none!important}
.mgate{position:fixed;inset:0;z-index:999;background:var(--fond);
display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;padding:32px 24px;gap:6px}
.mgate .lg-tile{margin-bottom:12px}
.mgate h2{font-family:var(--f-titre);font-weight:600;font-size:21px}
.mgate p{font-size:13.5px;color:var(--encre-2);line-height:1.6;max-width:300px}
.mgate .stores{display:flex;gap:10px;margin-top:18px}
.mgate .stores span{border:1px solid var(--ligne-2);background:var(--carte);
border-radius:10px;padding:9px 16px;font-size:12px;font-weight:600;color:var(--muet)}
}
/* ═══ Coquille ═══ */
.app{display:block;min-height:100vh}
/* — Sidebar blanche — */
.lg-tile{font-family:var(--f-logo);font-size:17px;color:#fff;background:var(--terra);
border-radius:8px;width:34px;height:34px;display:flex;align-items:center;
justify-content:center;transform:rotate(-3deg);flex:none;box-shadow:var(--ombre)}
.lgm{font-family:var(--f-logo);font-size:22px;line-height:1;color:var(--encre)}
.lgm span{color:var(--terra)}
.lgs{font-size:9px;font-weight:600;letter-spacing:.14em;color:var(--muet);margin-top:2px}
.nc .ico{color:var(--muet)}
.nc.on .ico{color:var(--terra-h)}
.nc .pill{margin-left:auto}
.psw{background:var(--surface-2);border:1px solid var(--ligne);border-radius:10px;
padding:3px;display:flex;gap:3px;margin-bottom:12px}
.psw button{flex:1;border:none;border-radius:7px;padding:6px 4px;font-size:10.5px;
font-weight:600;background:transparent;color:var(--encre-2);cursor:pointer}
.psw button.on{background:var(--encre);color:#fff}
.av{width:32px;height:32px;border-radius:50%;background:var(--bleu);color:#fff;
display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none}
.usr .u1{font-size:12.5px;font-weight:600}
.usr .u2{font-size:11px;color:var(--muet)}
/* — Topbar — */
.main{display:flex;flex-direction:column;min-width:0}
.top{background:var(--carte);border-bottom:1px solid var(--ligne);height:58px;
display:flex;align-items:center;gap:14px;padding:0 26px;position:sticky;top:0;z-index:40}
.burger{display:none}
.crumb{font-size:12.5px;color:var(--muet)}
.crumb b{color:var(--encre);font-weight:600}
.content{padding:26px 26px 70px;max-width:1360px;width:100%;margin:0 auto}
body.wide .content{max-width:none}
.vh{display:flex;align-items:flex-end;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.eb{font-size:12px;font-weight:600;color:var(--muet)}
.vh h1{font-family:var(--f-titre);font-weight:600;font-size:26px;letter-spacing:-.01em;
color:var(--encre);margin-top:3px;line-height:1.15}
.vh .vs{font-size:13px;color:var(--muet);margin-top:4px}
.va{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* ── L'EN-TÊTE QUI TIENT SUR UNE LIGNE ── (v13.21)
« On perd beaucoup de place en haut. » Le titre était déjà dans le
fil d'Ariane et dans le rail ; le pavé de description répétait ce
que les colonnes montrent. Les onglets et les actions partagent la
ligne, et l'écran commence 130 px plus haut. */
.vbar{display:flex;align-items:center;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.vbar .tabs{flex:1 1 auto;min-width:0;max-width:760px}
.vbar .va{margin-left:auto}
/* Le rôle porte la couleur choisie à sa création (ABS_PALETTE) : deux
jeux de couleurs pour un même rôle feraient deux rôles à l'œil. */
.rlpill{display:inline-block;font-size:11.5px;font-weight:600;padding:2px 9px;
border-radius:20px;border:1px solid;white-space:nowrap;margin:1px 3px 1px 0}
/* Sélecteur d'établissement (topbar) */
.topsel{display:flex;align-items:center;gap:8px;background:var(--surface-2);
border:1px solid var(--ligne);border-radius:10px;padding:0 4px 0 11px;height:36px}
.topsel select{border:none;background:transparent;font-family:var(--f-ui);font-size:12.5px;
font-weight:600;color:var(--encre);padding:0 26px 0 2px;cursor:pointer;appearance:none;
-webkit-appearance:none;height:34px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%2398876F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 8px center}
.topsel select:focus{outline:none}
.topsel:hover{border-color:var(--ligne-2)}
/* ═══ Actions : 4 niveaux, un seul primaire par écran ═══ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
border-radius:10px;padding:0 15px;height:37px;font-weight:600;font-size:13px;
cursor:pointer;border:1px solid var(--ligne-2);background:var(--carte);
color:var(--encre);transition:background .12s,border-color .12s}
.btn:hover{border-color:var(--muet);background:var(--surface-2)}
.btn.p{background:var(--terra);border-color:var(--terra);color:#fff;box-shadow:var(--ombre)}
.btn.p:hover{background:var(--terra-h);border-color:var(--terra-h)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--encre-2)}
.btn.ghost:hover{background:var(--surface-2);color:var(--encre)}
/* ── DEUX ROUGES, ET UN SEUL ÉTAIT ATTEIGNABLE ── (v12.6)
« .btn.danger » était défini DEUX FOIS dans ce fichier : ici, en
contour, et huit cents lignes plus bas en fond rouge plein. La
seconde définition l'emportait, et les vingt-deux écrans qui
emploient la classe rendaient tous un bouton rouge PLEIN — la
variante contour n'était atteignable nulle part, depuis le jour où
le doublon est arrivé.
Le doublon est retiré. Les deux rouges se distinguent maintenant
par ce qu'ils font :
.btn.danger détruire, ou revenir sur une décision, quand le
bouton vit À CÔTÉ d'un autre. Il ne doit pas peser
plus que celui qu'on est venu presser.
.btn.dp détruire quand c'est TOUT ce que l'écran propose —
la fenêtre qui confirme une suppression. Là, le
rouge plein est le sujet de l'écran, et non un
risque posé à côté d'autre chose. */
.btn.danger{background:transparent;border-color:var(--rouge);color:var(--rouge)}
.btn.danger:hover{background:var(--rouge-pale);border-color:var(--rouge);color:#A32D34}
.btn.dp{background:var(--rouge);border-color:var(--rouge);color:#fff}
.btn.dp:hover{background:#A93036;border-color:#A93036}
.btn.sm{height:31px;padding:0 11px;font-size:12px;border-radius:8px}
/* ── UN BOUTON DÉSACTIVÉ DOIT SE VOIR ── (v14.11)
« [disabled] » n'était habillé qu'à deux endroits : « .btn.danger »
et la barre d'émargement. Partout ailleurs, un bouton désactivé
gardait EXACTEMENT l'allure d'un bouton cliquable — on cliquait, il
ne se passait rien, et on cherchait la panne. Le hover est
neutralisé aussi : un bouton mort qui s'éclaire au survol promet
quelque chose qu'il ne tiendra pas. */
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn:disabled:hover{background:var(--carte);border-color:var(--ligne-2)}
.btn.p:disabled:hover{background:var(--terra);border-color:var(--terra)}
.btn .ico{width:15px;height:15px}
.w100{width:100%;justify-content:center}
.lk{font-size:12.5px;font-weight:600;color:var(--terra-h);cursor:pointer;
background:none;border:none;letter-spacing:0}
.lk:hover{text-decoration:underline;text-underline-offset:3px}
/* ═══ Statuts : point + mot, sens fixe ═══ */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
padding:3px 10px 3px 8px;border-radius:20px;white-space:nowrap;letter-spacing:0;
text-transform:none}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.pill.ok{background:var(--vert-pale);color:var(--vert)}
.pill.wa{background:var(--jaune-pale);color:var(--jaune)}
.pill.ko{background:var(--rouge-pale);color:var(--rouge)}
.pill.in{background:var(--bleu-pale);color:var(--bleu)}
.pill.vi{background:var(--violet-pale);color:var(--violet)}
.pill.gr{background:var(--surface-2);color:var(--encre-2);border:1px solid var(--ligne)}
.alert{border-radius:var(--r);padding:12px 15px;font-size:13px;font-weight:500;
margin-bottom:14px;border:1px solid}
.alert.ok{background:var(--vert-pale);color:var(--vert);border-color:#D8E5C9}
.alert.ko{background:var(--rouge-pale);color:var(--rouge);border-color:#F0CFD1}
.mono{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
/* ═══ Cartes & lignes ═══ */
.card{background:var(--carte);border:1px solid var(--ligne);border-radius:var(--r);
box-shadow:var(--ombre);overflow:hidden;margin-bottom:16px}
.ch{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--ligne)}
.ch h3{font-family:var(--f-titre);font-weight:600;font-size:15.5px;flex:1;color:var(--encre)}
/* ── « META » ÉTAIT ÉCRIT 413 FOIS, ET DÉFINI NULLE PART ── (v14.10.1)
Neuf déclarations, toutes SCOPÉES — .ch, .sec-h, .tA td, .absline,
.histoline, .cloh, .clgrp, .mdsal, .mdx — et pas une seule de base.
Hors de ces neuf endroits, « class="meta" » ne faisait donc RIEN :
le texte sortait en 14 px encre, à la taille d'un paragraphe, là où
l'auteur voulait un aparté. C'est le défaut que le kit existe pour
empêcher : un nom qu'on écrit en croyant qu'il habille.
La base est celle qu'on trouvait le plus souvent (12 px, muet) ;
les neuf scopes restent des variantes et continuent de gagner. */
.meta{font-size:12px;font-weight:500;color:var(--muet)}
.ch .meta{font-size:12px;font-weight:500;color:var(--muet)}
.g2{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;align-items:start}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.kpi{background:var(--carte);border:1px solid var(--ligne);border-radius:var(--r);
box-shadow:var(--ombre);padding:16px 18px}
.kpi b{font-family:var(--f-titre);font-size:30px;font-weight:600;display:block;
line-height:1;color:var(--encre);letter-spacing:-.02em}
.kpi span{font-size:12.5px;color:var(--muet);display:block;margin-top:6px}
.kpi .k1{font-size:11.5px;font-weight:600;color:var(--muet)}
.kpi .k2{font-family:var(--f-titre);font-size:26px;font-weight:600;line-height:1.15;
color:var(--encre);margin-top:4px;letter-spacing:-.01em}
.kpi .k3{font-size:11.5px;color:var(--muet);margin-top:3px}
.row{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--surface-2)}
.row:last-child{border-bottom:none}
.row:hover{background:var(--surface-2)}
.r1{font-weight:600;font-size:13px}
.r2{font-size:12px;color:var(--muet);margin-top:2px}
.rr{margin-left:auto;flex:none;text-align:right}
.av-m{width:30px;height:30px;border-radius:50%;color:#fff;display:flex;align-items:center;
justify-content:center;font-size:11px;font-weight:700;flex:none}
/* ═══ L'ÉTAT VIDE ═══ (v14.14)
Quand un élément n'a pas de valeur, l'écran le dit en UNE phrase,
grise, centrée, sous l'icône du sujet. Pas de titre en gras, pas de
paragraphe d'explication : un écran vide n'est pas l'endroit où on
apprend à s'en servir, c'est l'endroit où on constate qu'il n'y a
rien. L'explication, quand elle est nécessaire, se met à côté du
réglage qu'elle concerne.
Il remplace cinq classes retirées d'ici (.rgvide, .atrien, .sgvide,
.orgvide, .aidvide), les blocs .row/.r1/.r2 détournés en état vide,
et les .meta / .fhelp / .einfo / .vide posés faute de mieux — dont
quatre .vide de bloc que RIEN ne stylait, comme .meta avant la
v14.10.1. La feuille imprimée et la borne gardent les leurs
(.prvide, .jl-rien, .frise-vide, .tbvide) : ce ne sont pas des
cartes, et leur mise en page n'est pas celle de l'application.
S'écrit :
Dans un tableau, la classe se pose sur le . */
.neant{padding:28px 16px;text-align:center;font-size:13px;color:var(--muet);line-height:1.5}
.neant .lk{display:block;margin-top:9px}
/* Un écran entièrement vide n'a parfois pas d'autre chemin : un bouton,
et un seul. Dans une carte parmi d'autres, c'est le lien qui suffit. */
.neant .btn{margin-top:13px}
.neant.sm{padding:16px 12px;font-size:12.5px}
td.neant{padding:28px 16px}
.tA tr:hover td.neant{background:none}
/* L'icône du sujet, pâle : elle nomme ce qui manque, elle ne décore pas. */
.neant .nic{width:22px;height:22px;display:block;margin:0 auto 10px;
stroke-width:1.4;opacity:.5;vertical-align:0}
.neant.sm .nic{width:18px;height:18px;margin-bottom:7px}
/* ═══ LA PANNE ═══ (v14.15)
Le pendant exact de l'état vide, et il ne faut jamais les confondre :
.neant dit « il n'y a rien », .panne dit « ça n'a pas marché ».
L'onglet Planification affichait du blanc pour la seconde raison, et
on a cherché la première pendant trois jours.
Hors production, elle porte ce qui a lâché, le fichier et la ligne. */
.panne{margin:14px 18px;padding:13px 15px;border-radius:11px;
background:var(--rouge-pale);border:1px solid #EBC9CB;color:#8E3038;font-size:13px}
.panne b{display:block;font-weight:700}
.panne span{display:block;margin-top:5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
font-size:12px;line-height:1.5;word-break:break-word}
.panne .ou{color:#A85C62;font-size:11.5px}
.panne.pleine{margin:18px}
/* ═══ Tableaux ═══ */
/* UN TABLEAU QUI CONTINUE LE DIT — (v14.133)
Pas d'ombre : le contenu s'estompe sur 26 px du côté où il reste
quelque chose à voir. Les classes tbfg / tbfd sont posées par le
défilement (footer.php) ; au bout, il n'y a plus de fondu du tout. */
.scrollx{overflow-x:auto}
.scrollx.tbfg{-webkit-mask-image:linear-gradient(to right, transparent 0, #000 26px);
mask-image:linear-gradient(to right, transparent 0, #000 26px)}
.scrollx.tbfd{-webkit-mask-image:linear-gradient(to left, transparent 0, #000 26px);
mask-image:linear-gradient(to left, transparent 0, #000 26px)}
.scrollx.tbfg.tbfd{-webkit-mask-image:linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
mask-image:linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%)}
/* Un tableau dont la première colonne est figée ne s'estompe qu'à droite :
sinon le fondu mangerait les noms. */
.scrollx.tbfx.tbfg{-webkit-mask-image:none;mask-image:none}
.scrollx.tbfx.tbfd,.scrollx.tbfx.tbfg.tbfd{-webkit-mask-image:linear-gradient(to left, transparent 0, #000 26px);
mask-image:linear-gradient(to left, transparent 0, #000 26px)}
.tA{width:100%;border-collapse:collapse;min-width:640px}
.tA th{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
color:var(--muet);text-align:left;padding:11px 16px;background:var(--surface-2);
border-bottom:1px solid var(--ligne)}
.tA th.rt,.tA td.rt{text-align:right}
.tA td{padding:12px 16px;border-bottom:1px solid var(--surface-2);font-size:13px;vertical-align:middle}
.tA tr:last-child td{border-bottom:none}
.tA tr:hover td{background:var(--surface-2)}
.tA .nomcell{display:flex;align-items:center;gap:10px;font-weight:600;font-size:13px}
/* ═══ Planning v1 (heures, historique…) ═══ */
/* ═══ LA BARRE D'OUTILS TIENT SUR UNE LIGNE ═══ (v12.9)
Elle se repliait : sous 1200 px, le groupe « Vue · Favoris ·
Affichage · Outils · Publier » passait à la ligne et la barre
doublait de hauteur — 39 px devenaient 86. Sur un portable, deux
rangées de boutons mangeaient la place du planning lui-même.
Une ligne, et elle DÉFILE quand elle déborde. C'est le même choix
que pour la grille juste en dessous : plutôt que d'entasser, on
laisse glisser.
── LE PIÈGE, ET SA SORTIE ──
« overflow-x:auto » fait passer « overflow-y » de « visible » à
« auto » : le conteneur ROGNE alors ce qui dépasse en hauteur. Or
les menus « Affichage » et « Outils » sont des panneaux absolus
POSÉS DANS la barre. Mesuré : le panneau « Affichage » fait 630 px
de haut et se retrouvait coupé à 30 px — le menu devenait
inutilisable, et rien à l'écran ne l'expliquait.
Les panneaux passent donc en « position:fixed » et se placent au
clic, comme le fait déjà « poserPanneau() » pour la fenêtre météo
(v12.4) : hors du flux, ils ne connaissent plus le rognage. */
.plbar{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;margin-bottom:16px;
overflow-x:auto;overflow-y:visible;scrollbar-width:thin}
/* Rien ne se comprime : un bouton écrasé est pire qu'un bouton qu'on
atteint en glissant. Seul l'espaceur garde son élasticité — c'est
lui qui centre le sélecteur de vue quand il y a de la place. */
.plbar > *{flex:none}
.plbar > .plsp{flex:1 1 0;min-width:0}
.plactions{flex-wrap:nowrap}
/* La barre défilante ne doit pas rogner ce qui dépasse EN HAUTEUR.
« overflow-y:visible » ne suffit pas seul — le navigateur le
ramène à « auto » dès que l'axe X défile —, d'où les panneaux en
position fixe. Ce retrait laisse la place à leur ombre. */
.plbar{padding-bottom:2px}
.wknav{display:flex;align-items:center;gap:2px;background:var(--carte);
border:1px solid var(--ligne);border-radius:10px;padding:3px;box-shadow:var(--ombre)}
.wknav a{width:31px;height:31px;border-radius:7px;color:var(--encre-2);
display:flex;align-items:center;justify-content:center;font-weight:600}
.wknav a:hover{background:var(--surface-2);color:var(--encre)}
.wknav .wkd{font-size:13px;font-weight:600;color:var(--encre);padding:0 12px;
display:flex;align-items:center;gap:8px}
.wknav .sem{font-size:10.5px;font-weight:700;color:var(--muet);background:none;
border-radius:5px;padding:0}
.plwrap{overflow-x:auto}
.plgrid{min-width:1020px}
/* L'en-tête des jours forme son propre plan, au-dessus des cases :
un shift qui déborde de sa colonne passait par-dessus « Lun 24 »
au premier jour et au dernier (v7.90). */
.plh{display:grid;grid-template-columns:200px repeat(7,1fr);background:var(--surface-2);
border-bottom:1px solid var(--ligne);position:relative;z-index:6}
/* Et une case ne laisse pas son contenu s'échapper. */
.plrow .pcell{min-width:0}
.pcell .sh{max-width:100%}
.plh .plc0{padding:11px 14px;font-size:11px;font-weight:600;letter-spacing:.06em;
text-transform:uppercase;color:var(--muet)}
.plh .pld{padding:9px 6px;text-align:center;border-left:1px solid var(--ligne)}
.plh .pld .d1{font-size:10.5px;font-weight:600;text-transform:capitalize;
letter-spacing:0;color:var(--muet)}
.plh .pld .d2{font-family:var(--f-titre);font-weight:600;font-size:16px;color:var(--encre);line-height:1.15}
.plh .pld.today{background:var(--terra-pale)}
.plh .pld.today .d1{color:var(--terra-h)}
.plh .pld.today .d2{color:var(--terra-h)}
.plrow{display:grid;grid-template-columns:200px repeat(7,1fr);border-bottom:1px solid var(--surface-2)}
.plemp{padding:11px 14px;display:flex;gap:10px;align-items:flex-start}
.plemp .pn{font-weight:600;font-size:13px;color:var(--encre);line-height:1.25}
.plemp .pc{font-size:11px;font-weight:500;color:var(--muet);margin-top:2px}
.plcell{border-left:1px solid var(--surface-2);padding:5px;display:flex;
flex-direction:column;gap:4px;min-height:60px}
.shift{display:block;border-radius:8px;padding:6px 8px;cursor:pointer;
border:none;border-left:3px solid var(--bleu);background:var(--bleu-pale);
text-align:left;width:100%}
.shift:hover{filter:brightness(.975)}
.shift .st{font-size:10px;font-weight:600;letter-spacing:0;text-transform:none;
display:block;color:var(--encre-2)}
.shift .sh{font-size:11.5px;font-weight:700;margin-top:1px;display:block}
.cellplus{background:transparent;border:1px dashed transparent;border-radius:8px;flex:1;
min-height:18px;color:transparent;cursor:pointer;font-weight:700}
.plcell:hover .cellplus{border-color:var(--ligne-2);color:var(--muet)}
.legpl{display:flex;gap:14px;padding:12px 18px;border-top:1px solid var(--ligne);flex-wrap:wrap}
.legpl span{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;color:var(--muet)}
.legpl i{width:11px;height:11px;border-radius:4px;display:block}
.plfoot{display:grid;grid-template-columns:210px repeat(7,1fr);border-top:1px solid var(--ligne);
background:var(--surface-2)}
.plfoot .plemp{padding:10px 14px}
.plfoot .plcell{padding:9px 8px;text-align:center;border-left:1px solid var(--ligne);min-height:0}
.plfoot .plcell b{display:block;font-size:12.5px;color:var(--encre)}
.plfoot .plcell span{font-size:10px;color:var(--muet);font-weight:600}
.plfoot .plcell.today{background:var(--terra-pale)}
/* ═══ Modale ═══ */
.modal{position:fixed;inset:0;display:none;z-index:220}
.modal.open{display:block}
.modal-veil{position:absolute;inset:0;background:rgba(43,32,24,.42)}
.modal-box{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:min(480px,94vw);max-height:92vh;overflow-y:auto;background:var(--carte);
border-radius:14px;box-shadow:var(--ombre-2)}
.mh{padding:16px 20px 14px;border-bottom:1px solid var(--ligne);display:flex;
align-items:flex-start;gap:10px}
.mh h2{font-family:var(--f-titre);font-weight:600;font-size:17px;color:var(--encre);flex:1}
.mh .de{font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--muet);text-transform:none}
/* La croix est tantôt un , tantôt un : un bouton centre
son texte tout seul, pas un lien. Sans display:flex, la croix se
posait donc en haut à gauche de son cadre au lieu d'en occuper le
centre — c'est le genre de détail qu'on voit sans savoir le nommer
(v11.14). */
.mclose{width:30px;height:30px;border-radius:8px;border:1px solid var(--ligne);
background:var(--carte);cursor:pointer;color:var(--muet);font-size:14px;flex:none;
display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1;
text-decoration:none}
.mclose:hover{background:var(--surface-2);color:var(--encre)}
.mb{padding:16px 20px 20px}
.mf{display:flex;gap:9px;margin-top:16px}
.mf .btn{flex:1}
.veil{display:none}
/* ═══ Formulaires ═══ */
.fg{margin-bottom:13px}
.fl{display:block;font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;
color:var(--encre-2);margin:12px 0 5px}
.fl:first-child,.fg .fl{margin-top:0}
.freq{color:var(--terra);font-weight:700}
.fhelp{font-size:11.5px;color:var(--muet);margin-top:4px;line-height:1.45}
.fi{width:100%;border:1px solid var(--ligne-2);border-radius:10px;padding:9px 12px;
font-size:13px;font-weight:500;background:#fff;color:var(--encre);
transition:border-color .12s,box-shadow .12s}
.fi:hover{border-color:var(--muet)}
.fi:focus{outline:none;border-color:var(--terra)}
.fi::placeholder{color:#BFB2A0;font-weight:400}
.fi:disabled{background:var(--surface-2);color:var(--muet);cursor:not-allowed}
.fi.err{border-color:var(--rouge);box-shadow:0 0 0 3px rgba(196,60,67,.12)}
.fi.sm,.smsel{padding:6px 10px;font-size:12px;border-radius:8px;width:auto}
textarea.fi{min-height:84px;resize:vertical;line-height:1.5}
/* ── DES PARTS VRAIMENT ÉGALES ── (v14.31)
« 1fr » vaut « minmax(auto,1fr) » : une colonne ne descend jamais
sous la taille minimale de son contenu, et cette taille dépend du
plus long mot d'un libellé ou du format de date du navigateur. Deux
colonnes annoncées égales ne l'étaient donc pas, et les bords ne
tombaient pas au même endroit. « minmax(0,1fr) » tient la promesse. */
.f2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.f3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
/* Quatre champs courts sur une ligne — des nombres, des durées. Au-delà
de quatre, on ne lit plus les libellés : on passe à deux rangs. */
.f4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
/* ── UNE LIGNE DE CHAMPS AVEC UN BOUTON AU BOUT ── (v14.31)
« Le champ, et le geste qui s'applique dessus » : un select et
« Gérer », deux selects et « Ajouter ». Les champs se partagent ce
que le bouton laisse, et le bord droit de la ligne tombe sur celui
des autres champs du formulaire.
Elle existe parce que `.row` — qui a l'air d'un utilitaire — est en
réalité une LIGNE DE LISTE : elle porte un rembourrage de dix-huit
pixels et un filet en bas. S'en servir comme d'une rangée de
formulaire rentrait la ligne de dix-huit pixels, et son bord droit
ne tombait au même endroit que rien. */
.fline{display:flex;align-items:center;gap:8px}
.fline > .fi,.fline > select.fi{flex:1;min-width:0}
.fline > .btn{flex:none}
.fico{position:relative}
.fico .fi{padding-left:36px}
.fico svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:16px;height:16px;
stroke:var(--muet);pointer-events:none}
.fico:focus-within svg{stroke:var(--terra)}
input[type="date"].fi,input[type="time"].fi,input[type="datetime-local"].fi{color:var(--encre)}
input[type="date"].fi::-webkit-calendar-picker-indicator,
input[type="time"].fi::-webkit-calendar-picker-indicator{opacity:.45;cursor:pointer}
select.fi{appearance:none;-webkit-appearance:none;padding-right:32px;cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2398876F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 11px center}
/* Switch */
.sw{display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none}
.sw input{position:absolute;opacity:0;width:0;height:0}
/* Interrupteur : le curseur est centré par calcul, pas par des
valeurs ajustées à la main qui se décalent dès qu'on touche à
la taille. --swh = hauteur, --swp = jeu autour du curseur. */
.sw .swt{--swh:22px;--swp:3px;width:40px;height:var(--swh);border-radius:20px;
background:var(--ligne-2);position:relative;transition:background .18s;flex:none;
box-sizing:border-box}
.sw .swt::after{content:'';position:absolute;top:var(--swp);left:var(--swp);
width:calc(var(--swh) - var(--swp) * 2);height:calc(var(--swh) - var(--swp) * 2);
border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(62,43,26,.3);
transition:transform .18s;box-sizing:border-box}
.sw input:checked+.swt{background:var(--vert)}
.sw input:checked+.swt::after{transform:translateX(calc(40px - var(--swh)))}
.sw input:focus-visible+.swt{outline:2px solid var(--terra);outline-offset:2px}
.sw .swl{font-size:13px;font-weight:600;color:var(--encre)}
.sw input:not(:checked)~.swl{color:var(--muet)}
/* Case / radio */
.chk{display:flex;align-items:flex-start;gap:9px;cursor:pointer;user-select:none;
font-size:13px;font-weight:500;color:var(--encre);line-height:1.35}
.chk input{position:absolute;opacity:0;width:0;height:0}
.chk .bx{width:19px;height:19px;border-radius:6px;border:1.5px solid var(--ligne-2);
background:#fff;flex:none;position:relative;transition:all .13s;margin-top:0}
.chk .bx::after{content:'';position:absolute;left:5px;top:1.5px;width:5px;height:9px;
border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(0);transition:transform .13s}
.chk input:checked+.bx{background:var(--vert);border-color:var(--vert)}
.chk input:checked+.bx::after{transform:rotate(45deg) scale(1)}
.chk input:focus-visible+.bx{outline:2px solid var(--terra);outline-offset:2px}
.chk:hover .bx{border-color:var(--vert)}
.rad{display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none;
font-size:13px;font-weight:500;color:var(--encre)}
.rad input{position:absolute;opacity:0;width:0;height:0}
.rad .rd{width:19px;height:19px;border-radius:50%;border:1.5px solid var(--ligne-2);
background:#fff;flex:none;position:relative;transition:all .13s}
.rad .rd::after{content:'';position:absolute;inset:4px;border-radius:50%;
background:var(--terra);transform:scale(0);transition:transform .13s}
.rad input:checked+.rd{border-color:var(--terra)}
.rad input:checked+.rd::after{transform:scale(1)}
.rad input:focus-visible+.rd{outline:2px solid var(--terra);outline-offset:2px}
.radrow{display:flex;gap:18px;flex-wrap:wrap;padding:4px 0}
.chkcol{display:flex;flex-direction:column;gap:9px;padding:4px 0}
/* Chips */
/* ── LA PASTILLE À COCHER ── (v14.7.1)
UNE seule définition. Il y en avait deux : celle-ci en vert, et
« .chips .chip » en bleu huit cents lignes plus bas — plus
spécifique, donc c'est elle que les quatre écrans employaient. Le
kit documentait une pastille verte que personne n'a jamais vue.
Et la v14.6.1 en a écrit une TROISIÈME, `.zp`, pour les zones de
vacances, faute d'avoir cherché celle qui existait.
Le bleu l'emporte parce que c'est ce qui est à l'écran aujourd'hui
— habilitations, langues, primes, paie. Les teintes de zone sont
des variantes, pas des composants. */
.chips{display:flex;flex-wrap:wrap;gap:7px;padding:2px 0}
.chip{cursor:pointer;user-select:none;position:relative}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ligne-2);
background:#fff;border-radius:20px;padding:6px 13px;font-size:12px;font-weight:600;
color:var(--encre-2);transition:all .13s}
/* ── LE SIGNE DE LA PASTILLE, DESSINÉ ── (v14.72)
« Supprimer le tick moche pour le remplacer par un tick sobre. »
C'étaient deux GLYPHES — « + » et « ✓ » — donc deux dessins tirés
d'une fonte système, épais, mal centrés et différents d'une machine
à l'autre. Ce sont maintenant deux traits, masqués sur la couleur
courante : même graisse que les icônes du kit, même arrondi, et
rigoureusement le même rendu partout. */
.chip span::before{content:'';width:10px;height:10px;flex:none;background:currentColor;opacity:.42;
-webkit-mask:var(--ic-plus) center/10px 10px no-repeat;
mask:var(--ic-plus) center/10px 10px no-repeat}
.chip:hover span{border-color:var(--muet);background:var(--surface-2)}
.chip input:checked+span{background:var(--bleu-pale);border-color:var(--bleu);color:var(--bleu)}
.chip input:checked+span::before{opacity:1;
-webkit-mask:var(--ic-check) center/11px 11px no-repeat;
mask:var(--ic-check) center/11px 11px no-repeat}
.chip input:focus-visible+span{outline:2px solid var(--terra);outline-offset:2px}
/* Ce que la pastille porte en plus de son nom : « · 12 périodes ». */
.chip i{font-style:normal;opacity:.75;font-weight:500}
/* Les variantes de teinte. Une zone scolaire garde sa couleur, une
pastille qui appelle l'attention passe au jaune. */
.chip.terra input:checked+span{background:var(--terra-pale);border-color:var(--terra);color:var(--terra)}
.chip.zA input:checked+span{background:#E4EFDC;border-color:#6E8F52;color:#3D5C2A}
.chip.zB input:checked+span{background:var(--bleu-pale);border-color:var(--bleu);color:var(--bleu)}
.chip.zC input:checked+span{background:#F8EBD4;border-color:#B8863A;color:#7A5510}
.chip.zCorse input:checked+span{background:var(--violet-pale);border-color:var(--violet);color:var(--violet)}
.chip.att input:checked+span{background:var(--jaune-pale);border-color:var(--jaune);color:var(--jaune)}
/* Zone de dépôt */
.drop{border:1.5px dashed var(--ligne-2);border-radius:var(--r);background:var(--surface-2);
padding:22px 16px;text-align:center;cursor:pointer;transition:all .15s;display:block}
.drop:hover,.drop.over{border-color:var(--terra);background:var(--terra-pale)}
.drop input{display:none}
.drop .d1{font-weight:600;font-size:13px;color:var(--encre)}
.drop .d1 u{color:var(--terra-h);text-decoration-thickness:1.5px;text-underline-offset:2px}
.drop .d2{font-size:11.5px;color:var(--muet);margin-top:3px}
.drop .dfile{font-size:12px;font-weight:600;color:var(--vert);margin-top:6px;display:none}
/* Onglets */
/* ═══ UN SEUL COMPOSANT D'ONGLETS ═══ (v11.5)
Il y en avait DEUX, presque identiques et pourtant différents :
« .tabs » sur les fiches, fond blanc et onglet actif teinté
terracotta, et « .pgt » sur les pages à sections, fond crème et
onglet actif en pastille blanche. Deux composants pour un même
geste, c'est un design system qui a cessé de tenir.
On garde l'apparence de « .pgt » — la pastille blanche se
détache mieux et supporte les libellés longs — et « .tabs » n'en
est plus qu'une VARIANTE DE LARGEUR : ses onglets se partagent la
ligne, ce qui reste juste pour une fiche à cinq onglets fixes.
Rien à changer dans les pages : elles gardent leur classe. */
.tabs,.pgt{display:inline-flex;gap:3px;background:var(--surface-2);
border:1px solid var(--ligne);border-radius:99px;padding:4px;margin-bottom:18px}
.tabs{display:flex;overflow-x:auto}
.tabs a,.pgt a{display:inline-flex;align-items:center;justify-content:center;gap:7px;
font-size:14px;font-weight:600;color:var(--encre-2);padding:7px 20px;border-radius:99px;
text-decoration:none;white-space:nowrap}
.tabs a{flex:1;font-size:13px;padding:7px 14px}
.tabs a.on,.pgt a.on{background:var(--carte);color:var(--encre);box-shadow:var(--ombre)}
.tabs a:hover:not(.on),.pgt a:hover:not(.on){color:var(--encre)}
.tabs .tbadge,.pgt .tbadge{background:var(--terra);color:#fff;border-radius:20px;
padding:1px 7px;font-size:11px;font-weight:700;flex:none}
/* ═══ Fiche salarié ═══ */
.fichehead,.band{display:flex;align-items:center;gap:15px;background:var(--carte);
border:1px solid var(--ligne);border-radius:var(--r);box-shadow:var(--ombre);
padding:16px 20px;margin-bottom:18px;flex-wrap:wrap}
.fichehead .av-xl,.band .avatar{width:50px;height:50px;border-radius:50%;color:#fff;
display:flex;align-items:center;justify-content:center;font-family:var(--f-titre);
font-weight:600;font-size:19px;flex:none}
.fichehead h1,.band h1{font-family:var(--f-titre);font-weight:600;font-size:21px;
color:var(--encre);line-height:1.15;letter-spacing:-.01em}
.fichehead .fsub,.band .bsub{font-size:12.5px;color:var(--muet);font-weight:500;margin-top:3px;
display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.band .ba{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dosgrid{display:grid;grid-template-columns:190px 1fr;gap:22px;align-items:start}
.toc{position:sticky;top:120px}
.toc .tt{font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
color:var(--muet);margin-bottom:8px;padding-left:12px}
.toc a{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:var(--r-sm);
font-size:13px;font-weight:500;color:var(--encre-2);margin-bottom:1px;border:none}
.toc a .n{width:18px;height:18px;border-radius:6px;background:var(--surface-2);
border:1px solid var(--ligne);font-size:9.5px;font-weight:700;display:flex;
align-items:center;justify-content:center;flex:none;color:var(--muet)}
.toc a:hover{color:var(--encre);background:var(--surface-2)}
.toc a.on{color:var(--terra-h);background:var(--terra-pale);font-weight:600;border:none}
.toc a.on .n{background:var(--terra);border-color:var(--terra);color:#fff}
.toc a .cnt{margin-left:auto;font-size:11px;font-weight:600;color:var(--muet)}
.toc .sep{height:1px;background:var(--ligne);margin:10px 12px}
.toc .mini{padding:8px 12px;font-size:11px;color:var(--muet);line-height:1.6;font-weight:500}
.toc .mini b{color:var(--rouge)}
.sec{margin-bottom:26px;scroll-margin-top:130px}
.sec-h{display:flex;align-items:baseline;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.sec-h h2{font-family:var(--f-titre);font-weight:600;font-size:17px;color:var(--encre)}
.sec-h .meta{font-size:12px;font-weight:500;color:var(--muet)}
.sec-h .act{margin-left:auto;display:flex;gap:8px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.tile{background:var(--carte);border:1px solid var(--ligne);border-radius:var(--r);
box-shadow:var(--ombre);padding:13px 15px}
.tile .tk{font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;
color:var(--muet);display:flex;align-items:center;gap:6px}
.tile .tk .ico{width:14px;height:14px;color:var(--muet)}
.tile .tv{font-size:13.5px;font-weight:600;color:var(--encre);margin-top:6px;line-height:1.35;word-break:break-word}
.tile .ts{font-size:11.5px;color:var(--muet);font-weight:500;margin-top:1px;word-break:break-word}
.tile.warn{border-color:#EAD0D1;background:#FFFCFC}
.tile.warn .tk,.tile.warn .tk .ico{color:var(--rouge)}
/* Contrats */
.cwrap{display:grid;grid-template-columns:1.5fr 1fr;gap:12px;align-items:start}
.cmain{border-color:#D8E5C9;box-shadow:0 0 0 3px var(--vert-pale)}
.cmh{padding:13px 16px;display:flex;gap:10px;align-items:center;border-bottom:1px solid var(--surface-2)}
.cmh .t1{font-weight:600;font-size:13.5px;color:var(--encre)}
.cmh .t2{font-size:11.5px;color:var(--muet);font-weight:500;margin-top:2px}
.cgridd{display:grid;grid-template-columns:repeat(2,1fr)}
.cgridd>div{padding:10px 16px;border-bottom:1px solid var(--surface-2)}
.cgridd>div:nth-child(odd){border-right:1px solid var(--surface-2)}
.cgridd .k{font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muet)}
.cgridd .v{font-size:12.5px;font-weight:600;color:var(--encre);margin-top:3px}
.avnrow{display:flex;gap:10px;align-items:center;padding:9px 16px;
border-bottom:1px solid var(--surface-2);font-size:12px}
.avnrow .a1{font-weight:600;color:var(--encre)}
.avnrow .a2{color:var(--muet);font-size:11px}
/* align-items : sans lui, une note et un bouton posés côte à côte
s'étirent chacun à la hauteur de la rangée et ne s'alignent sur
rien (v11.14). */
.cfoot{display:flex;gap:8px;padding:10px 16px;background:var(--surface-2);flex-wrap:wrap;
align-items:center}
.chist{display:flex;flex-direction:column;gap:10px}
.chitem{background:var(--carte);border:1px solid var(--ligne);border-radius:var(--r);
padding:12px 14px;cursor:pointer;text-align:left;width:100%;box-shadow:var(--ombre)}
.chitem:hover{border-color:var(--ligne-2);background:var(--surface-2)}
.chitem .t1{font-weight:600;font-size:12.5px;color:var(--encre);display:flex;gap:8px;align-items:center}
.chitem .t1 .pill{margin-left:auto}
.chitem .t2{font-size:11px;color:var(--muet);font-weight:500;margin-top:3px}
.chitem.ghost{border-style:dashed;text-align:center;color:var(--muet);font-weight:600;
font-size:12px;box-shadow:none}
.chitem.ghost:hover{color:var(--terra-h);border-color:var(--terra)}
/* Sections d'onglet */
.fsec{padding:16px 18px;border-bottom:1px solid var(--ligne)}
.fsec:last-child{border-bottom:none}
.fsec h4{font-family:var(--f-titre);font-weight:600;font-size:14.5px;color:var(--encre);
margin-bottom:12px;display:flex;align-items:center;gap:8px}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.fgrid .colspan2{grid-column:span 2}
.fgrid .colspan3{grid-column:span 3}
.fsave{position:sticky;bottom:0;background:linear-gradient(transparent,var(--fond) 30%);
padding:14px 0 4px;display:flex;justify-content:flex-end;gap:9px}
/* Documents */
.filtbar{display:flex;gap:7px;padding:11px 15px;border-bottom:1px solid var(--ligne);
flex-wrap:wrap;align-items:center}
.fchip{border:1px solid var(--ligne-2);background:#fff;border-radius:20px;padding:5px 12px;
font-size:11.5px;font-weight:600;color:var(--muet);cursor:pointer}
.fchip .c{font-size:10px;opacity:.7}
.fchip.on{background:var(--encre);border-color:var(--encre);color:#fff}
.fchip:hover:not(.on){border-color:var(--muet);color:var(--encre)}
.docrow{display:flex;align-items:center;gap:12px;padding:11px 18px;border-bottom:1px solid var(--surface-2)}
.docrow:last-child{border-bottom:none}
.docic{width:36px;height:36px;border-radius:10px;background:var(--surface-2);
border:1px solid var(--ligne);display:flex;align-items:center;justify-content:center;
font-size:9.5px;font-weight:700;color:var(--terra-h);flex:none}
.docrow .d1{font-weight:600;font-size:12.5px;color:var(--encre)}
.docrow .d2{font-size:11px;color:var(--muet);margin-top:1px}
.docrow .cat{font-size:10px;font-weight:600;color:var(--muet);background:var(--surface-2);
border:1px solid var(--ligne);border-radius:6px;padding:3px 7px;white-space:nowrap}
.hline{display:flex;gap:10px;align-items:center;padding:10px 16px;
border-bottom:1px solid var(--surface-2);font-size:12px}
.hline:last-child{border-bottom:none}
.hline .h1x{font-weight:600;color:var(--encre);font-size:12.5px}
.hline .h2x{font-size:11px;color:var(--muet);margin-top:1px}
.hline .rr{margin-left:auto;display:flex;gap:7px;align-items:center}
/* Deux enfants, et deux seulement : l'icône, puis UN élément qui
porte tout le texte. Le gap du flex sépare les items, donc une
balise inline laissée nue dans la ligne s'en détachait de 8 px
(v11.16). Le sélecteur ci-dessous rattrape le cas. */
.warnline{display:flex;gap:8px;align-items:center;font-size:11.5px;font-weight:600;
border-radius:9px;padding:7px 11px;margin-top:8px}
.warnline>span,.warnline>div{min-width:0}
.warnline.w{background:var(--jaune-pale);color:var(--jaune)}
.warnline.k{background:var(--rouge-pale);color:var(--rouge)}
.warnline.i{background:var(--bleu-pale);color:var(--bleu)}
/* Fil d'activité */
.feed{padding:4px 0}
.fitem{display:flex;gap:12px;padding:9px 16px;font-size:12px;position:relative}
.fitem::before{content:'';position:absolute;left:27px;top:31px;bottom:-3px;width:2px;background:var(--surface-2)}
.fitem:last-child::before{display:none}
.fdot{width:23px;height:23px;border-radius:50%;background:var(--surface-2);
border:1px solid var(--ligne);flex:none;display:flex;align-items:center;
justify-content:center;color:var(--terra-h);z-index:1}
.fdot .ico{width:10px;height:10px}
.fitem .f1{font-weight:600;color:var(--encre)}
.fitem .f2{font-size:10.5px;color:var(--muet);margin-top:1px;display:block;grid-template-columns:none}
/* ═══ Tiroir latéral ═══ */
.dwr{position:fixed;inset:0;z-index:90;pointer-events:none}
.dwr .dveil{position:absolute;inset:0;background:rgba(43,32,24,.38);opacity:0;transition:.18s}
/* ── UNE SEULE LARGEUR DE TIROIR ── (v11.73)
Elle était déclarée DEUX fois : 440 px ici, 560 px cinq cents
lignes plus bas — la seconde gagnait, sans que personne sache
qu'il y en avait une première. Et le tiroir d'émargement, lui,
faisait 520. Trois largeurs pour un même objet.
Une seule, et plus large : ces tiroirs portent des tableaux
légaux de cinq lignes et des sections à deux colonnes. */
.dwr .panel{position:absolute;right:0;top:0;bottom:0;width:min(640px,96vw);background:var(--carte);
box-shadow:var(--ombre-2);display:flex;flex-direction:column;transform:translateX(100%);transition:.2s ease}
.dwr.open{pointer-events:auto}
.dwr.open .dveil{opacity:1}
.dwr.open .panel{transform:none}
.dwr .ph{padding:16px 18px;border-bottom:1px solid var(--ligne);display:flex;align-items:flex-start;gap:10px}
.dwr .ph .de{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:none;color:var(--muet)}
.dwr .ph h2{font-family:var(--f-titre);font-weight:600;font-size:17px;color:var(--encre);flex:1;line-height:1.2}
.dwr .mclose{border:1px solid var(--ligne);background:var(--carte);border-radius:8px;
font-size:14px;color:var(--muet);cursor:pointer;padding:4px 8px}
.dwr .pb{padding:15px 18px;overflow-y:auto;flex:1}
/* ═══ LES LIBELLÉS À GAUCHE ═══ (v14.31)
Une VARIANTE DE DISPOSITION d'un corps de tiroir, pas une seconde
famille de champs : les mêmes « .fg », « .fl », « .fi », « .fhelp »
qu'ailleurs, rangés autrement.
Le libellé au-dessus du champ donne un formulaire dont la colonne
de gauche change de largeur à chaque ligne, parce que chaque ligne
se découpe comme elle veut. Le libellé à gauche donne DEUX axes
verticaux pour tout le tiroir : celui des libellés et celui des
champs. Un seul regard suffit alors pour voir ce qui manque.
À réserver aux formulaires à libellés COURTS — au-delà, le libellé
se coupe sur deux lignes et le gain disparaît. Un formulaire d'état
civil garde ses libellés au-dessus. */
.dwr .pb.fgau .fg{display:grid;grid-template-columns:132px minmax(0,1fr);
gap:0 14px;align-items:start;margin-bottom:12px}
.dwr .pb.fgau .fg > .fl{grid-column:1;grid-row:1;padding-top:10px;margin:0}
/* Tout ce qui n'est pas le libellé se range sous le précédent, dans
la colonne des champs — aide comprise. */
.dwr .pb.fgau .fg > *:not(.fl){grid-column:2}
/* Un champ seul, sans libellé (une ligne de rappel, un interrupteur),
se cale quand même sur l'axe des champs. */
.dwr .pb.fgau .fgd{margin-left:146px}
/* Le filet qui sépare deux temps du formulaire traverse tout. */
.dwr .pb.fgau .fgsep{height:1px;background:var(--ligne);margin:17px 0}
@media(max-width:560px){
.dwr .pb.fgau .fg{grid-template-columns:minmax(0,1fr)}
.dwr .pb.fgau .fg > .fl{grid-column:1;padding-top:0;margin-bottom:5px}
.dwr .pb.fgau .fg > *:not(.fl){grid-column:1}
.dwr .pb.fgau .fgd{margin-left:0}
}
/* ═══ LE PIED D'UN TIROIR : TROIS RANGS ═══ (v11.71)
La règle n'est pas nouvelle — elle est écrite dans le kit depuis la
v11.45, à « .sgcta », pour les enveloppes de signature :
· ce qu'on vient faire OCCUPE LA LARGEUR ;
· ce qu'on fait parfois se range en creux, côte à côte ;
· ce qui DÉTRUIT est en rouge, en bas, seul — jamais collé au
bouton d'à côté.
Les tiroirs du planning sont antérieurs et ne la suivaient pas :
« Annuler + Créer » à la création, CINQ boutons à plat à la
modification, UN bouton étiré sur l'absence. Le même geste ne se
trouvait jamais au même endroit.
── POURQUOI UNE CLASSE NEUVE, ET PAS « .pf » CORRIGÉE ──
Parce que « .dwr .pf .btn{flex:1} » étire TOUT bouton de pied, et
que quinze écrans s'en défendent un par un avec « flex:none ».
Retirer cette règle les remettrait tous d'aplomb — ou les casserait
tous d'un coup. « .dwcta » vit à côté ; « .pf » ne bouge pas tant
que les douze autres tiroirs n'ont pas été repris un par un.
Le rang 2 est FACULTATIF : les tiroirs de shift n'en ont pas, il
n'y a qu'un geste à faire. »
═══════════════════════════════════════════════════════════════ */
/* ── LE PIED COLLE AU BAS, IL NE DÉFILE PAS ──
Le formulaire d'un tiroir est LUI-MÊME la zone qui défile
(« .dwr .pb »). Un pied posé dedans part donc avec le contenu :
sur une absence qui porte un justificatif, « Enregistrer » se
retrouvait deux écrans plus bas. « sticky » le retient en bas de la
zone visible ; les marges négatives annulent le retrait de « .pb »
pour qu'il aille d'un bord à l'autre. */
/* ── DEUX RANGS, ET NON TROIS ── (v11.82.1)
Trois boutons pleine largeur empilés, c'est un pied de tiroir qui
occupe le quart de l'écran pour dire trois choses dont deux sont
rares. Ce qu'on vient faire et ce qu'on fait parfois tiennent sur
UNE ligne : le geste secondaire garde la largeur de son texte, le
principal prend ce qui reste et finit à droite, là où l'œil sort du
formulaire.
Ce qui DÉTRUIT reste au rang du dessous, seul et centré. C'est la
seule part de la règle de la v11.45 qui protège vraiment quelque
chose : on ne clique pas « Supprimer » en visant « Enregistrer ».
« wrap » est un filet, pas une intention : sur un panneau étroit ou
un libellé très long, mieux vaut deux lignes qu'un bouton coupé. */
/* ── LA ZONE QUI DÉFILE NE GARDE PAS DE RETRAIT SOUS LE PIED ──
« sticky » ne descend jamais plus bas que son bloc conteneur : avec
les quinze pixels de retrait de « .pb » sous lui, le bandeau crème
s'arrêtait quinze pixels avant le bas du panneau, et l'on voyait une
bande blanche sous les boutons. Une marge négative n'y change rien —
c'est la CONTENANCE qui s'arrête là. On retire donc le retrait à la
zone, et c'est le pied qui le porte, dans son propre rembourrage. */
/* ── ET « margin-top:auto » DEMANDE UN CONTENEUR QUI SACHE LIRE ──
(v14.46)
La règle au-dessous dit depuis la v12.6 que la marge haute
automatique pousse le pied au bas du panneau. Elle ne l'a jamais
fait : « .pb » était un bloc ordinaire, et dans le flux normal une
marge « auto » verticale vaut zéro. Sur un tiroir court, le pied se
posait donc juste sous le dernier champ — exactement le défaut que
le commentaire décrivait comme corrigé.
Une colonne flexible, et la marge reprend son sens. Le retrait
vertical revient aux enfants pour que la zone qui défile n'en ait
plus (voir juste en dessous). */
.dwr .pb:has(> .dwcta){padding-bottom:0;display:flex;flex-direction:column}
/* Un enfant de colonne flexible ne se comprime pas tout seul : sans
cela, une liste longue rétrécirait au lieu de faire défiler. */
.dwr .pb:has(> .dwcta) > *{flex:none}
.dwr .pb:has(> .dwcta) > .dwcta{margin-top:auto}
/* Le débord horizontal ne vaut que DANS la zone qui défile : c'est
son retrait de 18 px qu'il annule. Le tiroir du type d'absence,
lui, porte son pied À CÔTÉ de « .pb » — la même marge l'y faisait
dépasser du panneau de dix-huit pixels de chaque côté. */
.dwr .pb > .dwcta{margin-left:-18px;margin-right:-18px}
.dwr .dwcta{position:sticky;bottom:0;z-index:2;
margin:auto 0 0;padding:13px 18px 15px;
border-top:1px solid var(--ligne);background:var(--surface-2);
display:flex;flex-wrap:wrap;align-items:center;gap:8px}
/* ── LE PIED TOMBE AU BAS, MÊME QUAND LE CONTENU EST COURT ──
« sticky » ne retient un élément QUE s'il y a de quoi défiler.
Sur une absence courte, le pied se posait juste sous le dernier
champ, et le tiroir montrait un grand vide crème en dessous. La
marge haute automatique le pousse au bas ; quand le contenu
déborde, elle vaut zéro et « sticky » reprend la main. */
/* ── UNE SEULE LIGNE, UNE SEULE TAILLE ── (v12.6)
RÈGLE D'OR : jamais deux tailles de boutons sur la même ligne.
Le pied avait trois rangs — un petit bouton à gauche, le principal
au milieu, un lien rouge dessous. Trois hauteurs pour trois gestes
du même tiroir : on lisait trois écrans superposés au lieu d'un
pied. Les trois rangs deviennent une ligne, et tous ses boutons ont
la même hauteur.
L'ordre de la ligne est celui du BALISAGE, et il dit la gravité :
à gauche ce qui détruit ou revient sur une décision .btn.danger
au milieu ce qu'on fait parfois .btn
à droite ce qu'on est venu faire — UN SEUL .btn.p
ou .btn.vert pour valider
Un pied dit ce qu'on PEUT faire ; il n'explique pas ce qu'on ne
peut pas. La phrase qui expliquait, au pied du type d'absence,
qu'une obligation légale ne se supprime pas, est partie : l'absence
du bouton le dit déjà. */
.dwr .dwcta > .btn{flex:1 1 auto;justify-content:center;white-space:nowrap;order:2}
/* (« .dwcta2 » vivait ici — le rang 1, à gauche, en « .btn.sm ». La
règle d'or l'a retiré : ses deux derniers usagers, « Relancer » et
« Désactiver ce type », posaient un petit bouton à côté d'un grand.
Le premier est descendu dans la section des justificatifs, où il
parle de ce qu'il relance ; le second est revenu sur la ligne, à la
taille des autres. v12.6) */
/* Rang 3 : sur sa propre ligne — « flex-basis 100 % » force le
retour. Il ne reste qu'un usager, « Reprendre le calcul
automatique » dans le tiroir des heures, gardé tel quel. */
.dwcta3{order:3;flex:1 0 100%;text-align:center;padding-top:1px}
.dwcta3 .lkq{font-size:12.5px;font-weight:600;color:var(--rouge)}
/* « .lkq + .lkq » pose un filet de séparation. Il se posait aussi
APRÈS un bouton masqué — « Dévalider » ne s'affiche que sur un shift
validé —, et le pied portait alors une barre verticale toute seule
devant « Supprimer », sans rien à séparer. */
.dwcta3 .lkq[hidden] + .lkq{margin-left:0;padding-left:0;border-left:0}
.dwcta3 .lkq:hover{color:#A32D34;text-decoration:underline}
/* Un pied peut n'avoir aucun rang 1 : un shift validé n'attend rien
de vous, c'est le ruban qui porte l'information. */
.dwr .dwcta:empty{display:none}
/* ═══ LE RUBAN D'ÉTAT ═══ (v11.71)
« Où en est cet objet » se lisait à deux endroits : au milieu du
formulaire pour un shift validé, tout en bas pour le justificatif
d'une absence. Une seule place, sous le récapitulatif, avant le
formulaire — on sait dans quoi on entre avant de modifier quoi que
ce soit. */
.dwetat{margin:10px 18px 0;padding:9px 12px;border-radius:10px;display:flex;gap:9px;
align-items:baseline;font-size:12.5px;border:1px solid;line-height:1.4}
.dwetat[hidden]{display:none}
.dwetat b{font-weight:700;flex:none}
.dwetat span{opacity:.86}
.dwetat.ok{background:var(--vert-pale);border-color:#D7E3C8;color:#3F6129}
.dwetat.att{background:var(--jaune-pale);border-color:#EDDCB4;color:#8A5F0F}
.dwetat.ko{background:var(--rouge-pale);border-color:#F0CFD1;color:#A32D34}
.dwetat.info{background:var(--bleu-pale);border-color:#D5DDEE;color:#465A8C}
.dwr .pf,.dwr .pfx{padding:13px 18px;border-top:1px solid var(--ligne);display:flex;gap:9px;margin-top:0}
.dwr .pfx{padding:13px 0 2px;margin-top:14px}
.dwr .pf .btn,.dwr .pfx .btn{flex:1;justify-content:center}
.fl2{display:block;font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;
color:var(--encre-2);margin:13px 0 6px}
.fl2:first-of-type{margin-top:0}
.fn{background:var(--surface-2);border:1px solid var(--ligne);color:var(--encre-2);
border-radius:6px;padding:1px 6px;margin-left:4px;font-size:10px}
.pillgrid{display:flex;flex-wrap:wrap;gap:6px}
.spill{cursor:pointer}
.spill input{position:absolute;opacity:0}
.spill span{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ligne-2);
border-radius:20px;padding:3px 11px 3px 3px;font-size:11.5px;font-weight:600;color:var(--muet)}
/* Les initiales flottaient dans leur cercle : sans « line-height:1 »,
c'est la HAUTEUR DE LIGNE qu'on centre, pas les lettres — et elle
traîne une descendante invisible qui les pousse vers le haut.
« flex:none » les empêche par ailleurs de rétrécir quand le nom
est long (v11.69). */
.spill .avm{width:22px;height:22px;flex:none;border-radius:50%;color:#fff;
display:flex;align-items:center;justify-content:center;
font-size:9px;line-height:1;font-weight:700;font-style:normal;letter-spacing:.02em}
.spill .avm img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.spill input:checked+span{border-color:var(--terra);background:var(--terra-pale);color:var(--encre)}
.jsel{display:flex;gap:4px}
.jsel label{flex:1;cursor:pointer;position:relative}
.jsel input{position:absolute;opacity:0}
.jsel span{display:block;text-align:center;font-size:10px;font-weight:700;color:var(--muet);
border:1px solid var(--ligne-2);border-radius:8px;padding:5px 0;line-height:1.35}
.jsel input:checked+span{background:var(--terra);border-color:var(--terra);color:#fff}
/* SUPPRIMÉ v11.18 — « .repjours » n'était plus posé nulle part, mais
ses règles restaient et retombaient sur « .repj », qui désigne
depuis la v11.16 le CONTENEUR de la répartition et non plus une
tuile. Deux composants pour un même nom : le second héritait des
marges, du hover et de l'opacity du premier. */
.tagopt{display:flex;flex-wrap:wrap;gap:6px}
.tago{cursor:pointer;position:relative}
.tago input{position:absolute;opacity:0}
.tago span{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ligne-2);
border-radius:20px;padding:5px 11px;font-size:11.5px;font-weight:600;color:var(--muet)}
/* Le rond de couleur laisse la place à l'ICÔNE du poste, à sa
teinte (v11.71). « etiquettes.icone » existait et n'était pas lue
ici. « Sans poste » garde son rond : il n'a pas d'icône. */
.tago i{width:9px;height:9px;border-radius:50%}
.tago .ico{width:14px;height:14px;flex:none}
.tago input:checked+span{border-color:var(--encre);background:var(--surface-2);color:var(--encre)}
.swpick{cursor:pointer;position:relative}
.swpick input{position:absolute;opacity:0}
.swpick i{display:block;width:24px;height:24px;border-radius:8px;border:2px solid transparent}
.swpick input:checked+i{border-color:var(--encre)}
.swpick:hover i{border-color:var(--ligne-2)}
/* ═══ Filtres & menus déroulants ═══ */
.filtres{display:flex;gap:8px;align-items:center;margin-left:auto}
.ddown{position:relative}
/* > summary : uniquement celui du menu Outils lui-même. Sans le
sélecteur d'enfant direct, la règle noircissait aussi les
sections repliées à l'intérieur du panneau. */
.ddown > summary{list-style:none;cursor:pointer;user-select:none}
.ddown > summary::-webkit-details-marker{display:none}
.ddown[open] > summary{background:var(--encre);color:#fff;border-color:var(--encre)}
/* « fixed » et non « absolute » : la barre d'outils défile
désormais (v12.9), et un conteneur qui défile rogne ce qui dépasse.
Le placement se fait au clic, dans planning_modales.php. */
.ddpanel{position:fixed;z-index:60;width:330px;
background:var(--carte);border:1px solid var(--ligne);border-radius:var(--r);
box-shadow:var(--ombre-2);padding:13px;display:flex;flex-direction:column;gap:8px}
.ddt{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
color:var(--muet);margin-top:4px}
.ddt:first-child{margin-top:0}
.ddhelp{font-size:11px;color:var(--muet);font-weight:500;line-height:1.5}
.ddline{display:flex;gap:7px;align-items:center}
/* ═══ LE SEGMENT ═══ (v14.17)
Trois crans quand l'interrupteur ne suffit plus : entre « pas
d'absences » et « les absences avec leur motif », il y a le cran que
tout le monde veut — le fait, sans la cause.
── IL EXISTE EN DEUX EXEMPLAIRES, ET C'EST VOULU ──
La feuille d'impression (assets/print.css) est AUTONOME : le
document imprimé ne charge pas app.css, pour ne pas emporter huit
cents règles d'écran dans un fichier destiné au papier. Le
composant y est donc redit à l'identique. Le kit reste la
référence : toute retouche ici se reporte là-bas, et le banc 112
éprouve le comportement, pas l'apparence. */
.prseg{display:flex;gap:2px;background:var(--surface-2);border:1px solid var(--ligne);
border-radius:9px;padding:3px}
.prseg label{flex:1;cursor:pointer;position:relative}
.prseg input{position:absolute;opacity:0;pointer-events:none}
.prseg label span{display:block;text-align:center;font-size:11px;font-weight:600;
color:var(--encre-2);padding:5px 3px;border-radius:6px}
.prseg label.on span{background:var(--terra);color:#fff}
.prseg label.ko{cursor:not-allowed}
.prseg label.ko span{color:var(--ligne-2)}
.prgn{font-size:10.5px;color:var(--muet);line-height:1.5;margin-top:6px}
.prgn b{color:var(--encre-2)}
/* ═══ LA VIGILANCE, DANS LA BARRE DU PLANNING ═══ (v14.16)
Elle était dans la barre supérieure, sur les soixante-neuf écrans.
Elle ne parle que du planning : elle vit là où on la corrige. Le
panneau réutilise l'habillage des lignes de notification (.tpic,
.tptx) — deux listes qui disent la même chose doivent se ressembler.
Le bouton porte le jaune de l'attente, jamais le rouge : ce ne sont
pas des erreurs, ce sont des choses à faire. */
.vigmenu .ddpanel{width:370px;padding:0;gap:0;max-height:70vh;overflow-y:auto}
.vigmenu .ddpanel .ddt{padding:12px 15px 8px;margin:0}
.vigmenu .ddpanel .neant{padding:22px 16px}
.vigmenu .nb{background:var(--jaune-pale);color:var(--jaune-txt);border-radius:20px;
padding:0 6px;font-size:10.5px;font-weight:700;margin-left:5px}
.vigmenu .vigon{border-color:var(--jaune)}
.vigi{display:flex;gap:11px;padding:11px 15px;border-top:1px solid var(--surface-2);
text-decoration:none;color:var(--encre)}
.vigi:hover{background:var(--surface-2)}
/* ═══ Planning v2 (planning.php / jour.php) ═══ */
.pl2card{overflow:hidden}
.pwrap{overflow-x:auto}
/* ═══ LA COLONNE DES SALARIÉS RESTE À L'ÉCRAN ═══ (v12.9)
Sous 1180 px, « .pl2{min-width:1100px} » fait défiler le planning
horizontalement — et la colonne des noms partait avec le reste. On
se retrouvait devant sept colonnes de shifts sans savoir À QUI
elles appartenaient : il fallait revenir en arrière, lire un nom,
repartir. Un planning qu'on ne peut pas lire en une passe.
La vue Jour gèle déjà sa colonne de noms depuis longtemps
(« .jgrid .jlab »). On lui emprunte sa solution plutôt que d'en
inventer une : « position:sticky; left:0 », et un fond OPAQUE —
sans lui, les shifts défileraient en transparence dessous.
Chaque famille de rangée porte son propre fond, et il faut le
redire sur la case gelée : « background » ne s'hérite pas, et une
case sans fond laisse voir ce qui passe derrière. */
.pl2 .pgh > .c0,
.prow > .pemp,
.pfoot > .c0,
.trow > .tlab,
.eqsep > .eql,
.pl2 .besrow > .c0{position:sticky;left:0;z-index:6}
/* Les fonds, famille par famille. La rangée ordinaire est sur la
carte ; l'en-tête, le pied et le besoin sont sur la surface ; les
non-assignés ont leur crème à eux. */
.prow > .pemp{background:var(--carte)}
.prow-na > .pemp{background:#FCF9F1}
.prow:hover > .pemp{background:#FDFCF9}
.pl2 .pgh > .c0,
.pfoot > .c0,
.eqsep > .eql,
.pl2 .besrow > .c0{background:var(--surface-2)}
.trow > .tlab{background:var(--carte)}
/* Un filet à la limite du gel : sans lui, on ne voit pas que le
reste glisse dessous, et les deux zones se confondent. */
.pl2 .pgh > .c0,
.prow > .pemp,
.pfoot > .c0,
.trow > .tlab,
.eqsep > .eql,
.pl2 .besrow > .c0{box-shadow:1px 0 0 var(--ligne)}
/* ── UNE SEULE DÉFINITION POUR LES CINQ GRILLES ── (v12.8)
Le planning n'est pas un tableau : c'est une pile de GRILLES
indépendantes — l'en-tête, chaque rangée de salarié, la rangée des
non-assignés, les rangées de la vue par postes, celles du besoin
théorique, le pied des totaux. Rien dans le CSS ne les obligeait à
s'accorder : chacune redéclarait ses colonnes dans son coin.
Elles avaient déjà divergé. « .besrow » ouvrait sa première colonne
à « var(--c0w,210px) » quand toutes les autres tenaient 236 px — et
« --c0w » n'était défini NULLE PART, si bien que le repli de 210 px
s'appliquait toujours : ces rangées étaient décalées de 26 px, en
permanence, sur tous les écrans.
Le gabarit vit désormais ici, en un seul endroit, et les cinq le
lisent. C'est la même doctrine que « shift_bande() » en v12.7 :
une règle recopiée est une règle qui diverge. */
.pl2{min-width:1100px;--pl2c0:236px;--pl2cols:var(--pl2c0) repeat(7,minmax(0,1fr));
/* ── LA TEINTE DU JOUR, UNE SEULE FOIS ── (v13.3)
Il y en avait DEUX : « --terra-pale » (252,237,231) pour
l'en-tête, le pied et les bandeaux d'équipe, et « #FEF7F0 »
(254,247,240) pour les cases de jour. MESURÉ en descendant la
colonne pixel par pixel : onze bandes, alternant les deux
valeurs — la colonne du jour se lisait comme un empilement de
rectangles plutôt que comme une colonne.
Elle vaut désormais une seule chose, et cette chose a un nom :
changer la teinte du jour se fait ici, et nulle part ailleurs. */
--auj:var(--terra-pale)}
/* ═══ LES SEPT COLONNES SONT ÉGALES, ET LE RESTENT ═══ (v12.8)
Le planning n'est pas UN tableau : c'est une pile de GRILLES
indépendantes — l'en-tête des jours, chaque rangée de salarié, la
rangée des non-assignés, le pied des totaux, les rangées de la vue
par postes. Elles déclaraient toutes « repeat(7,1fr) », et l'on
pouvait croire que cela suffisait à les aligner.
Cela ne suffit pas. « 1fr » vaut « minmax(auto,1fr) » : le minimum
AUTO empêche une colonne de descendre sous la largeur minimale de
son contenu. Une grille dont une case porte quelque chose de large
et d'insécable voit donc cette colonne DÉBORDER de sa part égale,
et les six autres se serrer pour compenser.
Chaque grille sizant ses colonnes d'après SON propre contenu, elles
divergent dès que leurs contenus diffèrent.
MESURÉ, à 1280 px de fenêtre, avec la météo dans l'en-tête :
l'en-tête donnait 121 · 121 · 121 · 121 · 167 · 121 · 121 — la
cinquième colonne, celle du jour même, gonflée par son bloc météo —
pendant que les rangées de salariés donnaient sept fois 128. Les
colonnes se décalaient jusqu'à 339 px de l'en-tête, et le planning
« se cassait la gueule » d'autant plus que l'écran était petit,
puisque la part égale y devient plus étroite que le contenu.
« minmax(0,1fr) » retire ce minimum : les sept colonnes sont
strictement égales, quoi qu'elles portent. C'est au CONTENU de
savoir se réduire — d'où les « min-width:0 » qui suivent. Le
défilement horizontal de « .pwrap », borné par « .pl2 », reste le
filet de sécurité quand la fenêtre devient vraiment étroite. */
.pl2 .pgh{display:grid;grid-template-columns:var(--pl2cols);
border-bottom:1px solid var(--ligne);background:var(--surface-2)}
.pl2 .pgh .c0{padding:9px 12px;font-size:10.5px;font-weight:600;letter-spacing:.06em;
text-transform:uppercase;color:var(--muet);display:flex;align-items:center;gap:8px}
/* Sans « min-width:0 », la case reprendrait par le bas ce que
« minmax(0,1fr) » lui a retiré par le haut : son contenu la
ferait déborder de sa colonne au lieu de se réduire (v12.8). */
.pl2 .dd{padding:0;text-align:left;border-left:1px solid var(--ligne);min-width:0}
.dd .dtop{min-width:0}
/* ── LA CASE D'EN-TÊTE PASSE À LA LIGNE ── (v12.8)
Colonnes égales, la case d'un jour vaut 128 px à 1280 px de
fenêtre. Or, météo affichée, sa rangée en réclame 175 : la date
(67), le relevé (48), le bouton de copie (24), plus les marges.
Elle les prenait EN ÉLARGISSANT SA COLONNE — c'est très exactement
ce qui désalignait le planning.
Les colonnes ne cédant plus, c'est au contenu de s'arranger. La
date garde sa largeur minimale et le relevé passe DESSOUS quand il
n'y a pas la place : l'en-tête grandit d'une ligne sur les écrans
étroits, et de rien du tout sur les larges. Aucun seuil à choisir,
aucune règle de média — la mise en page décide toute seule.
L'alternative était de porter « .pl2{min-width} » à 1461 px pour
que sept cases de 175 px tiennent : le planning aurait défilé
horizontalement sur tous les portables. */
.dd .dtop{display:flex;align-items:center;gap:8px;padding:8px 10px 7px;flex-wrap:wrap}
.dd .dgauche{min-width:62px;flex:1 1 auto}
.dd .evts{display:flex;flex-direction:column;gap:3px;flex:none}
.pl2 .dd .d1{font-size:11.5px;font-weight:600;line-height:1.1;color:var(--encre-2);
text-transform:capitalize;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl2 .dd .d2{font-family:var(--f-titre);font-weight:600;font-size:26px;line-height:1;color:var(--encre);
margin:1px 0 0;letter-spacing:-.02em}
.pl2 .dd .d3{font-size:10.5px;font-weight:500;color:var(--muet);line-height:1.2;text-transform:lowercase;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl2 .dd.we{background:#F6F2E9}
.pl2 .dd.today{background:var(--auj)}
.pl2 .dd.today .d1,.pl2 .dd.today .d3{color:var(--terra-h)}
.pl2 .dd.today .d2{color:var(--terra-h)}
.prow{display:grid;grid-template-columns:var(--pl2cols);border-bottom:1px solid var(--surface-2)}
.prow:last-of-type{border-bottom:none}
.prow:hover{background:#FDFCF9}
.prow-na{background:#FCF9F1}
.pemp{padding:10px 10px 10px 14px;display:flex;gap:10px;align-items:center;
border-right:1px solid var(--surface-2);min-width:0}
.pemp .avm{width:32px;height:32px;border-radius:50%;color:#fff;display:flex;align-items:center;
justify-content:center;font-size:11px;font-weight:700;flex:none}
/* Le badge d'alerte a quitté cette zone : il se pose dans le coin
de la cellule (.wcoin), sans rien pousser ni masquer. */
.pemp .pn{font-weight:600;font-size:13px;color:var(--encre);line-height:1.15;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pemp .pn a:hover{color:var(--terra-h)}
.pemp .cnt{display:flex;gap:5px;align-items:center;margin-top:4px;font-size:10.5px;
font-weight:500;color:var(--muet);white-space:nowrap}
.pemp .cnt b{font-weight:600;color:var(--encre-2)}
.pemp .cnt b:first-child{font-weight:700;color:var(--encre)}
.pemp .cnt i{font-style:normal;opacity:.45}
.dlt{font-size:9.5px;font-weight:700;padding:1px 6px;border-radius:6px;border:1px solid transparent}
.dlt.plus2{background:var(--jaune-pale);border-color:#EBD9AC;color:var(--jaune)}
.dlt.moins{background:var(--bleu-pale);border-color:#D6DDEC;color:var(--bleu)}
.dlt.zero{background:var(--vert-pale);border-color:#D8E5C9;color:var(--vert)}
.pcell{border-left:1px solid var(--surface-2);padding:6px;display:flex;flex-direction:column;
gap:6px;min-height:74px;position:relative}
.pcell.we{background:#FBF8F1}
.pcell.today{background:var(--auj)}
.pcell.dover{background:var(--bleu-pale)!important;outline:2px dashed var(--bleu);
outline-offset:-3px;border-radius:10px}
.pcell .plus{border:1.5px dashed var(--ligne-2);border-radius:8px;background:none;color:var(--terra);
font-size:15px;font-weight:700;cursor:pointer;min-height:26px;opacity:0;transition:opacity .12s;
pointer-events:none}
.pcell:hover .plus{opacity:1;pointer-events:auto}
.pcell:hover .plus:hover{background:var(--terra-pale);border-color:var(--terra);border-style:solid}
.pcell .plus:hover{background:var(--surface-2)}
/* La vignette de favori reprend l'apparence d'un shift SANS en
porter la classe : « .sh[draggable] » sert au glisser-déposer des
shifts, et une vignette n'en est pas un (v7.91). */
.sh,.favbar .favtag{border-radius:8px;padding:6px 9px;font-size:13px;font-weight:600;line-height:1.3;
cursor:grab;border:1px solid transparent;border-left-width:3px;display:block;user-select:none}
.sh:active{cursor:grabbing}
.sh.dragsrc{opacity:.35}
.sh .tg,.favbar .favtag .tg{display:block;font-size:10.5px;font-weight:600;letter-spacing:0;text-transform:none;
opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:1px}
.sh .hh,.favbar .favtag .hh{white-space:nowrap;font-weight:700}
.sh:hover,.favbar .favtag:hover{filter:brightness(.97)}
.sh{position:relative}
.sh .pz,.favbar .favtag .pz{display:block;font-size:10px;font-weight:600;opacity:.72;margin-top:1px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wemp.wshift{position:absolute;top:-6px;right:-6px;margin:0;padding:1.5px 5px;
border:1.5px solid #fff;box-shadow:var(--ombre)}
/* ═══ Pause(s) répétables dans les tiroirs ═══ */
/* Les pastilles de durée et le réglage détaillé se touchaient : la
ligne de paramètres semblait faire partie des boutons. Un espace
les distingue — ce sont deux gestes différents (v7.80). */
.pauses{display:flex;flex-direction:column;gap:8px}
.pauses:not(:empty){margin-top:12px}
.pline{display:flex;align-items:center;gap:9px}
.pdur{display:flex;align-items:center;border:1px solid var(--ligne-2);border-radius:10px;
background:#fff;padding:0 10px 0 12px;height:37px;flex:none;width:104px}
.pdur input{border:none;outline:none;width:44px;font-family:var(--f-ui);font-size:13px;
font-weight:600;color:var(--encre);background:none;-moz-appearance:textfield}
.pdur input::-webkit-outer-spin-button,.pdur input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pdur span{font-size:11.5px;font-weight:600;color:var(--muet);margin-left:auto}
.pdur:focus-within{border-color:var(--terra)}
.pdur.ko{border-color:var(--rouge)}
.phadd{border:none;background:none;font-family:var(--f-ui);font-size:12.5px;font-weight:600;
color:var(--encre-2);cursor:pointer;padding:0 4px;white-space:nowrap;flex:1;text-align:left}
.phadd:hover{color:var(--terra-h)}
.phrs{display:none;align-items:center;gap:6px;flex:1;min-width:0}
.pline.withh .phadd{display:none}
.pline.withh .phrs{display:flex}
.phrs .fi{height:37px;padding:0 8px;font-size:12.5px;width:auto;flex:1;min-width:0}
.phrs .pto{font-size:11.5px;font-weight:600;color:var(--muet);flex:none}
.phdel{border:none;background:none;color:var(--muet);cursor:pointer;font-size:13px;
padding:2px 4px;flex:none;font-family:var(--f-ui)}
.phdel:hover{color:var(--encre)}
.pdel{border:none;background:none;color:var(--rouge);cursor:pointer;padding:4px;flex:none;
display:flex;align-items:center;border-radius:8px}
.pdel svg{width:16px;height:16px}
.pdel:hover{background:var(--rouge-pale)}
.addp{border:none;background:none;font-family:var(--f-ui);font-size:12.5px;font-weight:600;
color:var(--encre-2);cursor:pointer;padding:8px 2px 2px;text-align:left;display:block}
.addp:hover{color:var(--terra-h)}
.perr{display:none;align-items:flex-start;gap:8px;background:var(--rouge-pale);
border:1px solid #F0CFD1;border-radius:10px;padding:9px 12px;margin-top:8px;
font-size:11.5px;font-weight:500;color:var(--rouge);line-height:1.45}
.perr.on{display:flex}
.perr::before{content:'⚠';font-size:12px;flex:none;line-height:1.3}
.sh .who{display:block;font-size:11px;font-weight:600;opacity:.85;margin-bottom:1px}
/* L'écart suit l'heure : « float:right » l'envoyait au bord droit,
loin de la valeur qu'il commente (v8.1). */
/* ── L'écart, dans la couleur de l'étiquette ──
Vert et rouge annonçaient un JUGEMENT — bien / mal — là où il n'y
a qu'une mesure : arriver dix minutes plus tôt n'est pas une bonne
nouvelle, et partir dix minutes plus tard n'est pas une faute. Et
deux rouges au milieu d'un planning déjà coloré par les étiquettes
faisaient trois systèmes de couleur qui se disputaient l'œil.
L'encadré prend donc la bordure de son étiquette : il appartient
visiblement à son shift, et la couleur ne dit plus rien qu'elle ne
sait pas (v10.0). */
.sh .dl, .jsh .dl{display:inline-block;font-size:9px;font-weight:700;margin-left:5px;vertical-align:1px;
background:var(--tbd,var(--ligne-2));color:var(--ttx,var(--encre));
border-radius:5px;padding:1px 5px;line-height:1.35}
/* v10.1 · Un cran plus grand : les horaires d'un shift se lisent de
biais, sur un écran partagé, souvent debout. Le gain de densité que
donnaient 12 px ne valait pas de plisser les yeux. */
.sh .dl, .jsh .dl{font-size:10px}
/* Shift EN COURS : le contour pointillé dit que le chiffre n'est pas
arrêté — il se recalculera au départ. */
.sh .dl.enc{background:transparent;border:1px dashed var(--tbd,var(--ligne-2));
color:var(--ttx,var(--encre))}
/* Une absence se lit comme une PÉRIODE : bande continue d'un bout
à l'autre, arrondie seulement à ses extrémités, libellé au seul
premier jour visible. Les marges négatives suppriment l'espace
entre les cases pour que la bande ne se coupe pas. */
/* ── LA BANDE D'ABSENCE, EN UNE SEULE PIÈCE ── (v11.66)
Elle se dessinait case par case : sept rubans dont seul le premier
portait le libellé — d'où une première case plus haute que les
autres, et un nom coupé à deux centimètres.
Elle est maintenant UN élément posé sur la grille de la ligne, qui
enjambe autant de colonnes que l'absence dure de jours. Le texte
dispose donc de toute la période, et il n'y a plus qu'une seule
hauteur.
Elle RECOUVRE les cases (même rangée de grille) : c'est ce qui la
rend continue par-dessus les bordures. Les cases reçoivent en
échange un retrait par le haut, sans quoi un shift passerait
dessous. */
/* ── DEUX RANGÉES EXPLICITES, PAS UN RECOUVREMENT ──
Premier essai : la bande posée SUR les cases, même rangée de
grille, avec un retrait par le haut pour que les shifts ne
passent pas dessous.
Ça ne tenait pas. La bande, placée en colonnes mais sans rangée
explicite dans le flux d'auto-placement, se retrouvait sur une
SECONDE rangée — la ligne faisait alors le double de sa hauteur,
et les fonds de week-end et du jour s'arrêtaient au milieu.
On déclare donc les deux rangées : la bande en haut, les cases en
dessous, le nom à cheval sur les deux. Plus rien à deviner, plus
rien à recouvrir, et la ligne fait exactement la hauteur qu'il
faut. */
.prow.avecabs{grid-template-rows:auto 1fr}
.prow.avecabs > .pemp{grid-row:1 / span 2}
.prow.avecabs > .pcell{grid-row:2}
.absx{grid-row:1;margin:4px 3px;min-width:0;
/* Conteneur de requête : ce qui se range dedans se décide sur la
largeur de LA BANDE, pas sur celle de l'écran (v11.83, plus bas). */
container-type:inline-size;
display:flex;align-items:center;gap:8px;
border-radius:6px;padding:2px 9px;min-height:19px;
font-size:10px;font-weight:700;letter-spacing:.01em;
background:var(--surface-2);color:var(--encre-2);
border:1px solid var(--ligne-2);cursor:pointer}
/* Coupée par le bord de la semaine : le coin reste droit et la bande
file jusqu'au bord — « ça continue » se voit sans qu'on l'écrive. */
.absx:not(.deb){border-top-left-radius:0;border-bottom-left-radius:0;
border-left:none;margin-left:0}
.absx:not(.fin){border-top-right-radius:0;border-bottom-right-radius:0;
border-right:none;margin-right:0}
.absx .ai{flex:none;display:flex;align-items:center;opacity:.75}
.absx .ai .ico{width:11px;height:11px;vertical-align:0}
/* Le libellé prend ce qu'il lui faut, pas toute la bande : la durée
se lit JUSTE APRÈS lui. Collée au bord droit d'une bande de sept
jours, elle se retrouvait à dix centimètres du nom qu'elle
qualifie. */
.absx .absnom{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.absx .aj{flex:none;font-weight:700;font-size:9px;opacity:.7;
background:rgba(255,255,255,.55);border-radius:20px;padding:0 6px}
/* ── ET LES HEURES, QUAND LA BANDE EN A LA PLACE ── (v11.83)
« 8 j » dit combien de jours l'absence couvre ; il ne dit pas ce
qu'elle a RETIRÉ au planning. Sur un temps partiel, huit jours
d'arrêt ne valent pas huit journées de travail.
Sur une bande d'un jour il n'y a la place ni pour le nom du type,
ni pour la pastille du justificatif, ni pour deux nombres. Ce sont
donc les HEURES qui cèdent — le chiffre exact reste dans le panneau
de survol et dans le tiroir.
La mesure est celle de la BANDE, pas de l'écran : deux bandes de
largeurs différentes sur la même ligne ne doivent pas se décider
ensemble. C'est exactement ce que fait une requête de conteneur ;
une média-requête les traiterait toutes pareil.
« inline-size » seul : la hauteur continue de venir du contenu, et
les dix-neuf pixels de la bande — gagnés en v11.68 après deux
tentatives — ne bougent pas. Le « container-type » est déclaré une
seule fois, dans « .absx » plus haut : deux fois, et l'on ne saurait
plus laquelle gagne (leçon de la v11.73). */
@container (max-width: 190px){ .absx .ajh{display:none} }
/* ── « 1/2 » ── (v11.87)
Une bande EST une période : elle dit ses jours et ses heures, pas
ceux de l'arrêt. Rien ne disait pourtant qu'il y en avait une autre.
Trois caractères le disent ; le reste se lit dans le tiroir. Ils
cèdent avant les heures : c'est l'indice le moins nécessaire des
trois. */
.absx .ajp{margin-left:5px;padding:0 4px;border-radius:20px;
background:rgba(255,255,255,.34);font-size:9px;font-weight:800}
@container (max-width: 250px){ .absx .ajp{display:none} }
/* En attente de validation : trame hachurée, la décision n'est pas prise. */
/* En attente de validation : un contour en pointillés, pas une
trame. Le hachuré salissait la bande et rendait le libellé moins
lisible sans rien dire de plus qu'un trait discontinu. */
.absx.att{border-style:dashed}
.absx:hover{filter:brightness(.97)}
/* La pastille du justificatif (v11.70). Elle ne se voit que là où un
papier est attendu — les congés payés n'en portent aucune.
Elle ne rétrécit pas : c'est le LIBELLÉ du type qui cède la place
quand la bande est courte. Un « en retard » tronqué en « en re… »
ne dit plus rien, alors qu'un nom d'absence coupé se devine. */
/* LA HAUTEUR EST CONTRAINTE, et ce n'est pas de l'esthétique : la
bande fait 19 px, dont 4 de retrait et 2 de contour — il reste 13
pour son contenu. Une pastille plus haute ÉPAISSIT la bande, donc
la ligne, donc toute la grille. Onze pixels de ligne plus un
contour d'un pixel de chaque côté : treize. */
.absx .absmq{flex:none;font-weight:800;font-size:9px;letter-spacing:.02em;
border-radius:20px;padding:0 7px;line-height:11px;
background:rgba(255,255,255,.72);color:inherit;
border:1px solid currentColor}
/* Le retard tient sa couleur de lui-même : la bande porte déjà la
teinte du type d'absence, et le rouge doit passer devant. */
.absx .absmq.ko{background:var(--rouge);color:#fff;border-color:transparent}
.absx .absmq.att{background:rgba(255,255,255,.9);border-style:dashed}
.absx .absmq.ok{background:rgba(255,255,255,.55);border-color:transparent;font-weight:700;opacity:.8}
/* Les rubans « .absb » — une absence dessinée case par case — ont
été retirés en v11.66 : voir « .absx » plus haut. */
.pfoot{display:grid;grid-template-columns:var(--pl2cols);border-top:1px solid var(--ligne);
background:var(--surface-2)}
.pfoot .c0{padding:10px 14px;font-size:11px;font-weight:600;color:var(--encre-2);
letter-spacing:.04em;text-transform:uppercase}
.pfoot .fc{padding:8px 4px;text-align:center;border-left:1px solid var(--ligne)}
.pfoot .fc b{display:block;font-size:12px;color:var(--encre)}
.pfoot .fc span{font-size:9.5px;font-weight:500;color:var(--muet)}
.pfoot .fc.low b{color:var(--rouge)}
.pfoot .fc.today{background:var(--auj)}
.pfoot .fc .eur{display:block;font-size:10px;font-weight:700;color:var(--terra-h)}
/* Publication & notes de jour */
.pubpill{display:inline-flex;align-items:center;gap:6px;border-radius:20px;padding:6px 13px;
font-size:12px;font-weight:600;letter-spacing:0;cursor:pointer;border:1px solid;font-family:var(--f-ui)}
.pubpill .ico{width:12px;height:12px}
.pubpill.ok{background:var(--vert-pale);border-color:#D8E5C9;color:var(--vert)}
.pubpill.brouillon{background:var(--jaune-pale);border-color:#EBD9AC;color:var(--jaune)}
.pubpill:hover{filter:brightness(.97)}
.dnote{display:flex;align-items:center;justify-content:center;gap:5px;width:100%;
padding:4px 8px;margin-top:2px;border:none;border-top:1px solid var(--ligne);background:var(--jaune-pale);
color:var(--jaune);font-size:10px;font-weight:600;font-family:var(--f-ui);cursor:pointer;
text-align:center;line-height:1.3}
.dnote span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dnote svg{width:11px;height:11px;flex:none}
.dnote:hover{background:#F6E9C8}
.dnote .ico{width:9px;height:9px;flex:none}
.dnote.add{background:none;color:var(--muet);border-top-color:var(--surface-2);opacity:0;
transition:opacity .12s}
.dd:hover .dnote.add{opacity:1}
.dnote.add:hover{background:var(--surface-2);color:var(--encre-2)}
.pl2 .dd:hover .dnote.add{color:var(--muet)}
.dnote.add:hover{color:var(--terra-h);background:var(--surface-2)}
/* Gestes */
.delzone{position:fixed;left:50%;bottom:20px;transform:translateX(-50%) translateY(12px);z-index:120;
background:var(--rouge-pale);border:2px dashed var(--rouge);color:var(--rouge);
padding:15px 30px;border-radius:14px;font-weight:600;font-size:13px;
display:flex;align-items:center;gap:9px;
opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s,transform .15s}
.delzone.on{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);pointer-events:auto}
.delzone.hot{background:var(--rouge);border-style:solid;color:#fff;
transform:translateX(-50%) translateY(0) scale(1.03)}
.delzone svg{width:16px;height:16px}
.chooser{position:fixed;z-index:85;background:#fff;border:1px solid var(--ligne);border-radius:12px;
box-shadow:var(--ombre-2);display:none;overflow:hidden}
.chooser.on{display:flex}
.chooser button{border:none;background:none;padding:11px 16px;font-size:12.5px;font-weight:600;
color:var(--encre);cursor:pointer;display:flex;align-items:center;gap:8px}
.chooser button:first-child{border-right:1px solid var(--surface-2)}
.chooser button:hover{background:var(--surface-2);color:var(--terra-h)}
.chooser .ico{width:14px;height:14px}
.toast{position:fixed;bottom:20px;right:20px;background:var(--encre);color:#fff;
padding:12px 17px;border-radius:12px;font-size:12.5px;font-weight:500;z-index:80;opacity:0;
transform:translateY(8px);transition:.2s;max-width:360px;pointer-events:auto;box-shadow:var(--ombre-2)}
.toast.on{opacity:1;transform:none}
.toast.ko{background:var(--rouge);color:#fff}
.toast b{color:#fff;font-weight:700}
.tundo{margin-left:8px;border:1px solid rgba(255,255,255,.4);background:none;color:#fff;
border-radius:7px;padding:2px 8px;font-size:11px;font-weight:600;cursor:pointer;
font-family:var(--f-ui);pointer-events:auto}
.tundo:hover{background:rgba(255,255,255,.15)}
/* Sélecteur de vue & vue étiquettes */
.vseg{display:flex;background:var(--carte);border:1px solid var(--ligne);border-radius:10px;
padding:3px;gap:2px;box-shadow:var(--ombre)}
.vseg a{padding:6px 12px;border-radius:7px;font-size:12px;font-weight:600;color:var(--muet)}
.vseg a.on{background:var(--terra-pale);color:var(--terra-h)}
.trow{display:grid;grid-template-columns:var(--pl2cols);border-bottom:1px solid var(--surface-2)}
.trow .tlab{padding:14px 12px 14px 14px;display:flex;align-items:flex-start;
border-right:1px solid var(--surface-2)}
.trow .tpil{display:inline-flex;align-items:center;gap:7px;border-radius:20px;
padding:6px 12px;font-size:11.5px;font-weight:600}
.trow .tpil i{width:9px;height:9px;border-radius:50%}
/* ═══ Vue frise ═══
L'échelle couvre les 24 heures : une largeur fixe par heure et
un défilement horizontal, plutôt que de deviner les bornes.
La colonne des noms et celle des totaux restent visibles. */
.frcard{overflow:hidden;padding-bottom:4px}
.frscroll{overflow-x:auto;overflow-y:visible}
.frrule,.frday,.frrow{display:grid;
grid-template-columns:200px minmax(calc(var(--frh, 80px) * 24), 1fr) 74px;
align-items:center;min-width:max-content}
.frl,.frt{position:sticky;z-index:3;background:var(--carte)}
.frl{left:0}
.frt{right:0}
.frrule .frl,.frrule .frt,.frday .frl,.frday .frt{background:var(--surface-2)}
.frday.today .frl,.frday.today .frt{background:var(--terra-pale)}
.frrule{border-bottom:1px solid var(--ligne);background:var(--surface-2);height:30px}
.frscale{position:relative;height:100%}
.frscale span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.frscale span.gh{top:7px;font-size:10px;font-weight:700;color:var(--encre)}
/* Les quarts d'heure de la frise n'apparaissent qu'au zoom, quand
une heure dépasse 150 px. */
.frscale span.gq{top:9px;font-size:8.5px;font-weight:500;color:var(--muet);visibility:hidden}
.frcard.frfin .frscale span.gq{visibility:visible}
.frt{font-size:10px;font-weight:600;color:var(--muet);text-align:center;
text-transform:uppercase;letter-spacing:.04em}
.frt.mono{font-size:11px;color:var(--encre);font-weight:700}
.frl{padding:0 10px 0 14px;font-size:12px;font-weight:600;color:var(--encre);display:flex;
align-items:center;gap:8px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frday{background:var(--surface-2);border-top:1px solid var(--ligne);height:46px}
.frday.today{background:var(--terra-pale)}
.frday .frl b{font-family:var(--f-titre);font-weight:600;font-size:15px;text-transform:none;letter-spacing:0}
.frday .frl span{font-size:9.5px;color:var(--muet);font-weight:500;text-transform:uppercase}
.frrow{border-top:1px solid var(--surface-2);height:46px}
.frrow:hover{background:#FDFCF9}
.frrow .frl{font-weight:500;font-size:12px}
.frrow .avm{width:22px;height:22px;border-radius:50%;color:#fff;display:inline-flex;
align-items:center;justify-content:center;font-size:8px;font-weight:700;flex:none}
.frband{position:relative;height:100%}
.frband .fre{position:absolute;top:50%;transform:translateY(-50%);text-align:center;
font-size:10px;font-weight:600;color:#BCAF9B;font-style:normal}
.frband .fre.hi{color:var(--encre);font-size:11px}
.frband i.frh,.frband .frpic{display:none}
.frtrack{position:relative;height:100%;cursor:pointer;background:none}
/* Trois niveaux de repères, DESSINÉS EN CSS : les rendre en HTML
demandait 8 000 éléments par semaine, soit un mégaoctet de page.
Trois dégradés répétitifs font le même travail pour rien.
--frh = largeur d'une heure ; 24 h occupent donc 24 × --frh. */
.frtrack{background-image:
repeating-linear-gradient(to right, #FAF6EE 0 1px, transparent 1px calc(var(--frh) / 12)),
repeating-linear-gradient(to right, #EFE7D8 0 1px, transparent 1px calc(var(--frh) / 4)),
repeating-linear-gradient(to right, var(--ligne-2) 0 1px, transparent 1px var(--frh));
background-position:0 0;background-repeat:repeat}
.frbar{position:absolute;top:8px;bottom:8px;border-radius:8px;overflow:hidden;
border:1px solid rgba(62,43,26,.08);border-left-width:3px;display:flex;
align-items:center;justify-content:flex-start;gap:7px;padding:0 8px}
.frbar .btg{font-size:8.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
opacity:.7;white-space:nowrap}
.frbar .bhh{font-size:10.5px;font-weight:700;white-space:nowrap}
.frbar i{display:none}
.frv{color:var(--muet);font-size:10.5px;font-weight:500;font-style:italic}
.nowline{position:absolute;top:0;bottom:0;width:2px;background:var(--rouge);z-index:2}
.nowline.nowdot::after{content:'';display:block;position:absolute;top:-1px;left:-3px;
width:8px;height:8px;border-radius:50%;background:var(--rouge)}
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.rc{border:1px solid var(--ligne);border-radius:var(--r);padding:11px 14px;display:flex;
align-items:center;gap:10px;background:var(--carte)}
.rc .avm2{width:30px;height:30px;border-radius:50%;color:#fff;display:flex;align-items:center;
justify-content:center;font-size:10px;font-weight:700;flex:none}
.rc .n{font-size:12px;font-weight:600;color:var(--encre)}
.rc .h{font-size:10.5px;font-weight:500;color:var(--muet)}
.rc .d{margin-left:auto;font-size:11px;font-weight:700;padding:3px 8px;border-radius:8px}
.rc .d.p{background:var(--vert-pale);color:var(--vert)}
.rc .d.m{background:var(--rouge-pale);color:var(--rouge)}
/* ═══ Rail latéral (pages planning, $navMini) ═══ */
body.navmini .content{padding:16px 20px 40px;max-width:none}
.plhero{margin-bottom:12px}
.phero{margin-right:6px}
.phero .eb{font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--muet)}
.phero h1{font-family:var(--f-titre);font-weight:600;font-size:21px;color:var(--encre);
line-height:1.15;margin:0;letter-spacing:-.01em}
.grow{flex:1}
/* ═══ Espace salarié (moi.php — consultation desktop) ═══ */
.mjour{display:grid;grid-template-columns:150px 1fr;border-bottom:1px solid var(--surface-2);
min-height:56px;align-items:center}
.mjour:last-child{border-bottom:none}
.mjour.today{background:var(--terra-pale)}
.mjl{padding:10px 14px;font-size:12.5px}
.mjl b{display:block;color:var(--encre);font-weight:600}
.mjl span{font-size:10px;color:var(--muet);font-weight:600;text-transform:capitalize}
.mjc{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:9px 12px}
.msh{border-radius:8px;padding:6px 10px;font-weight:600;border:1px solid transparent;border-left-width:3px}
/* ── L'ÉCHANGE DEMANDÉ ── (v13.15)
Le shift NE QUITTE PAS le planning de celui qui le propose : tant
que personne ne l'a pris, c'est lui qui y va. La pastille dit une
demande en cours, rien de plus — un shift retiré d'emblée
fabriquerait un trou que personne ne tient. */
/* ── L'APERÇU LÉGAL D'UN ÉCHANGE ── (v13.15)
La question de l'écran, et la seule : si je valide, qu'est-ce que
ça casse ? La réponse se lit SOUS la demande, sans cliquer — et
« aucun contrôle en défaut » s'écrit comme un manquement s'écrit :
un écran qui ne montre que les problèmes laisse croire qu'il n'a
pas regardé. */
.echr{align-items:flex-start}
.echap{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:8px}
.echap > b{font-size:12px;font-weight:700}
.echh{font-size:11.5px;color:var(--muet)}
.echf{display:inline-flex}
.echc{display:flex;gap:8px;flex:none;align-items:center}
/* ── L'ESPACE PERSONNEL, EN TÊTE DU TABLEAU DE BORD ── (v13.16)
« Mon espace » était un écran ; c'est devenu le premier étage du
tableau de bord. Son en-tête doit donc se lire comme une SECTION et
non comme un titre de page : le h1 « Tableau de bord » est au-dessus,
deux h1 sur un écran ne se hiérarchisent plus. */
.mesp{margin-bottom:18px;padding-bottom:2px;border-bottom:1px solid var(--ligne)}
/* Seul sur l'écran, le bloc EST la page : plus de filet séparateur,
puisqu'il n'y a rien dont il se sépare (v13.17). */
.mesp.meseul{border-bottom:0;padding-bottom:0}
.meh{font-family:var(--police-titre,inherit);font-size:20px;font-weight:700;margin:0;line-height:1.2}
/* ── L'ONGLET MODULATION DE LA FICHE SALARIÉ ── (v13.19)
Un compteur affichait « −795h00 » dans une pastille de trois
caractères : un verdict sans preuve. Ces blocs déplient la même
donnée — ce qui est dû, ce qui est fait, et le chemin. */
.modinfo{display:flex;flex-direction:column}
.modinfo .mdl{display:flex;align-items:baseline;gap:14px;padding:11px 16px;
border-top:1px solid var(--ligne)}
.modinfo .mdl:first-child{border-top:0}
.mdl>span{flex:1;min-width:0;font-size:13px;color:var(--muet)}
.mdl>b{font-size:13.5px;font-weight:700;text-align:right}
.mdgros{font-size:17px!important}
.mdn{display:block;font-size:11.5px;color:var(--muet);font-weight:500;font-style:normal}
.mdd{display:block;font-size:11.5px;color:var(--muet);font-weight:400;font-style:normal;
max-width:340px;line-height:1.4;margin-top:2px}
/* Le point d'interrogation d'une explication au survol : discret par
défaut, il ne doit pas rivaliser avec la valeur qu'il commente. */
.mdq{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;
border:1px solid var(--ligne);border-radius:50%;font-size:9px;font-style:normal;
color:var(--muet);cursor:help;vertical-align:1px;margin-left:3px}
.modecart{display:flex;gap:18px;padding:16px;align-items:stretch;flex-wrap:wrap}
/* Le chiffre qu'on vient chercher : il porte seul la moitié de la
carte, parce qu'il est la réponse et le reste est la preuve. */
.mdgrand{flex:1;min-width:220px;display:flex;align-items:center;justify-content:center;
font-size:38px;font-weight:800;letter-spacing:-.02em;border:1px solid var(--ligne);
border-radius:12px;padding:22px 16px}
.mdgrand.p{color:var(--vert-h,#2E6B4F)}
.mdgrand.m{color:var(--terra)}
.mdcol{flex:1;min-width:260px;display:flex;flex-direction:column;justify-content:center}
.mdcol .mdl{border-top:1px solid var(--ligne);padding:10px 0}
.mdcol .mdl:first-child{border-top:0}
/* Huit colonnes de chiffres : le tableau défile dans SA boîte plutôt
que de pousser la page — un dossier salarié se lit à la verticale. */
.modtwrap{overflow-x:auto}
.modt{width:100%;border-collapse:collapse;font-size:12.5px}
.modt th{text-align:left;font-size:11px;font-weight:700;color:var(--muet);
text-transform:uppercase;letter-spacing:.03em;padding:10px 12px;
background:var(--surface-2);white-space:nowrap;position:sticky;top:0}
.modt td{padding:9px 12px;border-top:1px solid var(--ligne);white-space:nowrap}
.modt tbody tr:hover{background:var(--surface-2)}
.mdc{color:var(--muet)}
.mde{font-weight:700}
.mde.p{color:var(--vert-h,#2E6B4F)}
.mde.m{color:var(--terra)}
/* La semaine en cours est le repère : c'est elle qu'on cherche en
ouvrant le tableau. Les semaines à venir s'effacent — elles disent
une prévision, pas un fait. */
.mdnow td{background:var(--terra-pale);font-weight:700}
.mdfut td{color:var(--muet)}
.mdfut .mde{opacity:.75}
.mdsem{display:block;font-size:10.5px;color:var(--muet);font-weight:500;font-style:normal}
/* ── LE CHOIX DES ÉTABLISSEMENTS DU REGISTRE ── (v13.23)
Chaque ligne annonce ce qu'elle contient : cocher un établissement
sans savoir qu'il porte huit lignes incomplètes, c'est imprimer un
registre non conforme et le découvrir au contrôle. */
.rupl{display:flex;flex-direction:column;border:1px solid var(--ligne);
border-radius:var(--r-sm);overflow:hidden}
.rupi{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;
border-top:1px solid var(--ligne);font-size:13px}
.rupl .rupi:first-child{border-top:0}
.rupi:hover{background:var(--surface-2)}
#rupMode .rupi{border:1px solid var(--ligne);border-radius:var(--r-sm);margin-top:6px}
.rupn{font-weight:600}
.rupc{margin-left:auto;font-size:11.5px;color:var(--muet);white-space:nowrap}
.rupk{color:var(--rouge)}
/* ── LA DPAE, SUR L'ONGLET CONTRAT ── (v13.22)
Le seul bloc de la fiche qui porte une échéance légale. Il ne crie
que quand il reste moins de vingt-quatre heures : une carte rouge en
permanence ne se voit plus. */
.dpcard.urgent{border-color:var(--rouge);box-shadow:0 0 0 1px var(--rouge) inset}
.dprow{display:grid;grid-template-columns:repeat(3,1fr);padding:4px 0}
.dprow>div{padding:12px 18px;border-left:1px solid var(--ligne)}
.dprow>div:first-child{border-left:0}
.dpk span{display:block;font-size:11.5px;color:var(--muet);margin-bottom:3px}
.dpk b{font-family:var(--f-titre);font-size:16px;font-weight:700;display:block}
.dpk i{font-style:normal;font-size:11.5px;color:var(--muet)}
.dpurg{color:var(--rouge)}
.dpmanque{padding:14px 18px 16px}
.dpmanque .r1{font-weight:700;margin-bottom:8px}
.dplist{list-style:none;display:flex;flex-direction:column;gap:6px}
.dplist li{font-size:13px;display:flex;align-items:baseline;gap:10px;
padding:7px 0;border-top:1px solid var(--ligne)}
.dplist li .lk{margin-left:auto;font-size:12px;white-space:nowrap}
.dpmotif{display:flex;gap:10px;align-items:flex-start;margin:0 18px 14px;
background:var(--rouge-pale);color:var(--rouge);border-radius:var(--r-sm);
padding:11px 14px;font-size:12.5px;line-height:1.5}
.dpmotif svg{flex:none;margin-top:2px}
.dpform{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
@media(max-width:1080px){.dprow{grid-template-columns:1fr}
.dprow>div{border-left:0;border-top:1px solid var(--ligne)}
.dprow>div:first-child{border-top:0}}
/* ── OÙ FINIT LA PÉRIODE, ET LA COURBE ── (v13.20)
Le solde dit d'où l'on vient ; ces deux blocs disent où l'on va. */
.mdphrase{padding:16px 18px 4px;font-family:var(--f-titre);font-size:19px;
line-height:1.5;font-weight:500}
.mdphrase b{font-weight:700}
.mdp{color:var(--vert)} .mdm{color:var(--rouge)}
.mdlev{display:grid;grid-template-columns:repeat(4,1fr);padding:12px 0 0}
.mdlev>div{padding:10px 18px;border-left:1px solid var(--ligne)}
.mdlev>div:first-child{border-left:0}
.mdlev span{display:block;font-size:11.5px;color:var(--muet);margin-bottom:3px}
.mdlev b{font-family:var(--f-titre);font-size:20px;font-weight:700;display:block}
.mdlev i{font-style:normal;font-size:11.5px;color:var(--muet)}
.mdbar{padding:14px 18px 16px}
.mdbl{display:flex;justify-content:space-between;font-size:12px;color:var(--encre-2);margin-bottom:6px}
.mdbar .jauge{max-width:none;margin-top:0}
@media(max-width:1080px){.mdlev{grid-template-columns:repeat(2,1fr)}
.mdlev>div:nth-child(3){border-left:0}}
/* L'ÉCART cumulé, et non les deux cumuls : deux courbes qui montent
ensemble se touchent presque, et l'œil ne lit pas 50 h sur 900. */
.modtraj{padding:14px 18px 0}
.mdg{width:100%;height:250px;display:block}
.mdgr line{stroke:var(--ligne);stroke-width:1}
.mdgr text{fill:var(--muet);font-size:10px;text-anchor:end;font-family:var(--f-ui)}
.mdgx{fill:var(--muet);font-size:10px;text-anchor:middle;font-family:var(--f-ui)}
.mdga{fill:var(--terra-pale);opacity:.85}
.mdgf{fill:none;stroke:var(--terra);stroke-width:2.4;stroke-linejoin:round}
.mdgp{fill:none;stroke:var(--rouge);stroke-width:2;stroke-dasharray:5 5;opacity:.7}
.mdg0{stroke:var(--encre-2);stroke-width:1.2}
.mdgz{fill:var(--encre-2);font-size:10.5px;text-anchor:end;font-family:var(--f-ui);font-weight:600}
.mdgn{stroke:var(--encre);stroke-width:1;stroke-dasharray:3 3;opacity:.35}
.mdgpt{fill:var(--terra);stroke:#fff;stroke-width:2}
.mdgpf{fill:var(--rouge);stroke:#fff;stroke-width:2}
.mdleg{display:flex;gap:20px;flex-wrap:wrap;padding:4px 0 14px;font-size:12px;color:var(--encre-2)}
.mdleg span{display:inline-flex;align-items:center;gap:7px}
.mdleg i{width:16px;height:3px;border-radius:2px;display:block}
.mdleg i.l1{background:var(--terra)}
.mdleg i.l2{background:repeating-linear-gradient(90deg,var(--rouge) 0 4px,transparent 4px 8px)}
.mdleg .mdn{display:inline;color:var(--muet)}
.mdtri{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ligne)}
.mdtri>div{padding:13px 18px;border-left:1px solid var(--ligne)}
.mdtri>div:first-child{border-left:0}
.mdtri span{display:block;font-size:11.5px;color:var(--muet);margin-bottom:4px}
.mdtri b{font-family:var(--f-titre);font-size:22px;font-weight:700;letter-spacing:-.01em}
/* ── AUJOURD'HUI ET DEMAIN ── (v13.17)
L'écran d'arrivée du salarié portait sa semaine entière : sept
lignes dont six disaient « repos ». Deux jours suffisent — ce sont
les seuls qui se périment — et la semaine se lit au planning. */
.mejour .mjl b{display:block;font-size:13.5px}
.mejour .mjl span{font-size:11.5px;color:var(--muet)}
/* La ligne de semaine capitalisait chaque mot pour « Lun 31 / Août »,
où le mois était SEUL sur sa ligne. Ici la date est d'un tenant :
« Dim 6 Septembre » écrit un mois avec une majuscule qui n'existe
pas en français (v13.17). */
.mejour .mjl span{text-transform:none}
/* Deux boutons de même taille sur une ligne : refuser et accepter
sont deux réponses de même rang, et la règle d'or interdit d'en
grossir une pour pousser à la choisir. */
.mact2{display:flex;gap:8px;flex:none;align-items:center}
/* ── LE TIROIR DU SALARIÉ SUR SON SHIFT ── (v13.17)
« Je clique sur le shift et je demande l'échange avec quelqu'un. »
Un salarié pose UNE question à son shift ; ce tiroir répond à
celle-là et s'arrête. Il réemploie la coquille du kit (.dwr .panel
.ph .pb) : c'est le même objet, ce n'est pas le même contenu. */
.mnres{font-size:15px;padding:14px 18px;border-bottom:1px solid var(--ligne)}
.mnpo{font-weight:800}
.mnti{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
color:var(--muet);padding:16px 18px 0}
.mnsub{font-size:12.5px;color:var(--muet);padding:4px 18px 10px;line-height:1.45}
.mncands{display:flex;flex-direction:column;gap:7px;padding:0 18px}
/* Un collègue = un bouton pleine largeur : la liste se parcourt du
pouce comme de l'œil, et le nom ne se coupe pas. */
.mncand{display:block}
.mncand .btn{width:100%;justify-content:flex-start;gap:10px;padding:9px 12px}
.mnav{width:26px;height:26px;border-radius:50%;flex:none;display:inline-flex;
align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:800}
/* « ou » sépare deux gestes de même rang : demander à quelqu'un, ou
ouvrir à tous. Ni l'un ni l'autre n'est le repli de l'autre. */
.mnou{display:flex;align-items:center;gap:10px;padding:16px 18px 10px;
font-size:11.5px;color:var(--muet);text-transform:uppercase;letter-spacing:.06em}
.mnou::before,.mnou::after{content:"";height:1px;background:var(--ligne);flex:1}
.mnform{padding:0 18px 16px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.mnaide{font-size:11.5px;color:var(--muet)}
.mnbox{margin:14px 18px;padding:13px 15px;border:1px dashed var(--terra);
border-radius:11px;background:var(--terra-pale)}
.mnbt{font-size:13.5px;font-weight:800;color:var(--terra)}
.mnbs{font-size:12.5px;color:var(--texte);margin:4px 0 10px;line-height:1.45}
.mnbox .mnform{padding:0}
.mnhors{margin:14px 18px;font-size:12.5px;color:var(--muet);font-style:italic;line-height:1.5}
.mech{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;
color:var(--terra);background:var(--terra-pale);border-radius:20px;padding:2px 9px;
border:1px dashed var(--terra)}
/* Hors de la fenêtre d'échange, on ne grise pas le bouton : on dit
pourquoi. Un bouton mort fait chercher la panne. */
.mhors{margin-left:auto;font-size:11.5px;color:var(--muet);font-style:italic}
.mact{margin-left:auto}
.mjc .mact + .mact,.mjc .mhors + .mhors{margin-left:8px}
.msh .tg{display:block;font-size:9.5px;letter-spacing:0;text-transform:none;opacity:.75}
.msh .hh{font-size:12px;white-space:nowrap;font-weight:700}
.mrepos{font-size:11.5px;color:var(--muet);font-style:italic;font-weight:500}
.mcol{font-size:10.5px;color:var(--muet);font-weight:500}
/* ═══ Pages auth ═══ (v11.89)
── CE QUI N'ALLAIT PAS ──
Une carte de 400 px au milieu de 1440 px de crème, et sous le
bouton quatre liens du même poids : « mot de passe oublié »,
« essai gratuit 30 jours », « borne de pointage ». Trois publics et
trois gestes sans rapport, traités pareil. La page ne disait pas non
plus ce qu'elle ouvre — « PLANNING & RH » en 8 px et en capitales
est une signature, pas une phrase.
── CE QU'ON MET À LA PLACE ──
Deux volets. À gauche, sur le fond encre de la borne : la marque,
une phrase, et UNE SEMAINE DE PLANNING dessinée avec le vocabulaire
de l'application. Ce n'est pas un décor — la règle de la maison
interdit l'image décorative — c'est une démonstration, et elle ne
pèse pas un octet : ni photo, ni illustration, ni icône.
À droite, le formulaire, et rien d'autre. La borne et l'essai
gratuit ont quitté la page : installer une tablette se fait depuis
le tableau de bord, une fois connecté, par la personne qui en a le
droit. Se connecter est le seul geste de la page de connexion. */
.page-auth{min-height:100vh;background:var(--fond)}
.authduo{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
/* ── LE VOLET, ÉCRIT UNE FOIS POUR CINQ PAGES ──
Connexion, oubli, réinitialisation, code de vérification,
inscription : il ne bouge pas d'un pixel de l'une à l'autre. C'est
ce qui fait qu'on sait toujours où l'on est. */
/* ── LE VOLET EST CLAIR ── (v11.91)
Il était encre — le brun du texte de l'application, et celui de la
borne de pointage. Très contrasté, très sérieux, et sévère pour une
porte d'entrée : on voulait accueillir, on ouvrait sur un mur sombre.
Le crème est le fond de l'application elle-même. Le planning
miniature s'y dessine EXACTEMENT comme il apparaît une fois
connecté — mêmes fonds, mêmes filets, mêmes couleurs de bande — au
lieu d'une version claire sur fond sombre qu'on ne reverra jamais.
Il n'y a plus de rupture entre la porte et la maison.
Deux fonds clairs côte à côte demandent un filet, sans quoi la
frontière se lit comme un accident d'affichage. */
.authvg{background:var(--surface-2);color:var(--encre);padding:38px 40px 30px;
border-right:1px solid var(--ligne);
display:flex;flex-direction:column;gap:18px;overflow:hidden}
/* ── LE BLOC RESPIRE AU MILIEU, LE PIED RESTE EN BAS ──
Deux « margin auto » qui se partagent la place libre : le contenu se
centre entre le haut et le pied, sans que le pied quitte le bas. Un
« justify-content:center » aurait décollé le pied. */
.authmq{display:flex;align-items:center;gap:11px;margin-top:auto}
.authmq .lg-tile{margin:0}
.authmq .lgm{color:var(--encre)}
.authvg h1{font-family:var(--f-titre);font-size:27px;font-weight:600;line-height:1.28;
letter-spacing:-.015em;margin:4px 0 0;color:var(--encre);max-width:20ch}
.authbl{margin:0;font-size:13.5px;line-height:1.6;color:var(--encre-2);max-width:36ch}
.authpd{margin-top:auto;font-size:10.5px;color:var(--muet);letter-spacing:.06em;
text-transform:uppercase;font-weight:600}
/* ── LE PANNEAU DE DROITE ──
Centré verticalement sur grand écran, collé en haut sur petit : le
clavier d'un téléphone mange la moitié de l'écran dès qu'on touche
un champ, et un formulaire centré passe alors sous lui. */
.authvd{background:var(--carte);padding:40px;display:flex;flex-direction:column;
justify-content:center;min-width:0}
.authvd > .in{width:min(360px,100%);margin:0 auto}
.authvd h1{font-family:var(--f-titre);font-size:25px;font-weight:600;letter-spacing:-.015em;
margin:0 0 4px;line-height:1.2}
.auth-p{font-size:12.5px;color:var(--muet);text-align:left;line-height:1.55;margin:0 0 4px}
.auth-p code{background:var(--surface-2);border:1px solid var(--ligne);border-radius:5px;
padding:1px 5px;font-size:11px}
.authvd form{margin-top:18px}
.authvd .btn{margin-top:16px}
.authvd .alert{text-align:left;margin:0 0 16px}
/* ── LE VOLET RACONTE ── (v13.4)
La v11.89 dessinait une semaine figée (« .authsem »). Le volet joue
désormais une histoire en quatre scènes — voir auth_volet.php pour
la règle de ce qui bouge. Les classes « an… » sont les siennes ;
« .apl2 / .aphd / .aprow / .apcell » dessinent la grille miniature
avec les formes du vrai planning.
La pile a une HAUTEUR FIXE : les scènes n'ont pas la même hauteur
naturelle, et sans cela le volet respirerait à chaque changement. */
.authanim{position:relative;height:284px;margin-top:4px}
.anscene{position:absolute;inset:0 0 26px 0;opacity:0;transition:opacity .6s ease;pointer-events:none}
.anscene.on{opacity:1}
.anleg{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:8px}
.anlt{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muet);
margin-right:auto;transition:opacity .3s}
.anpts{display:flex;gap:5px}
.anpts i{width:6px;height:6px;border-radius:50%;background:var(--ligne-2);transition:all .3s}
.anpts i.on{background:var(--terra);width:16px;border-radius:3px}
/* L'ondée d'un toucher : le seul effet qui n'existe pas dans le
produit, et il ne sert qu'à montrer OÙ le doigt s'est posé. */
.antap{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
background:rgba(233,102,70,.45);opacity:0;pointer-events:none}
.antap.go{animation:antap .7s ease-out}
@keyframes antap{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(7)}}
/* 1 · le planning */
.apl2{position:relative;background:var(--carte);border:1px solid var(--ligne);border-radius:12px;
padding:10px 12px 11px;font-size:9px}
.aphd,.aprow{display:grid;grid-template-columns:78px repeat(7,minmax(0,1fr));gap:3px;align-items:center}
.aphd{margin-bottom:5px}
.aphd span{text-align:center;color:var(--muet);font-weight:700;letter-spacing:.04em;font-size:8px;
display:flex;flex-direction:column;align-items:center;gap:1px;padding:3px 0;border-radius:5px}
.aphd span b{font-family:var(--f-titre);font-size:13px;color:var(--encre);font-weight:600}
.aphd span.auj{background:var(--auj,var(--terra-pale))}
.aphd span.auj b,.aphd span.auj{color:var(--terra-h)}
.apc0{text-align:left!important;color:var(--encre-2)!important;font-weight:600!important;
display:flex!important;flex-direction:row!important;align-items:center;gap:5px;padding:0!important;
white-space:nowrap;overflow:hidden;font-size:9.5px!important;background:none!important}
.antot{flex-direction:column!important;align-items:flex-start!important;gap:2px!important}
.antot > span{display:flex;align-items:baseline;gap:3px}
.antot b{font-family:var(--f-titre);font-size:12px!important;color:var(--encre);font-weight:600;
font-variant-numeric:tabular-nums}
.anpub{font-style:normal;font-size:7.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
background:var(--jaune-pale);color:var(--jaune);border:1px solid #EBD9AC;border-radius:20px;padding:1px 7px;
transition:all .4s}
.anpub.go{background:var(--vert-pale);color:var(--vert);border-color:#D8E5C9}
.apav{width:16px;height:16px;border-radius:50%;color:#fff;font-size:7px;font-weight:700;display:inline-flex;
align-items:center;justify-content:center;flex:none;font-style:normal}
.aprow{margin-bottom:3px}
/* Sans « grid-row », une colonne explicite suffit à faire descendre
l'élément à la ligne suivante (leçon de la v11.89). */
.aprow > *{grid-row:1}
.apcell{height:26px;border-radius:4px;background:#FBF9F4;display:flex;align-items:stretch;padding:2px;
transition:background .3s,box-shadow .3s}
.apcell.auj{background:var(--auj,var(--terra-pale))}
.apcell.cible{box-shadow:inset 0 0 0 1.5px var(--terra);background:var(--auj,var(--terra-pale))}
.ansh{flex:1;border-radius:4px;border-left:3px solid;font-style:normal;font-weight:700;font-size:8.5px;
display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden;
opacity:0;transform:scale(.8);transition:opacity .25s,transform .3s cubic-bezier(.2,.9,.3,1.2)}
.ansh.go{opacity:1;transform:none}
/* La carte qu'on déplace vit HORS de la grille : elle glisse d'une
case à l'autre, et c'est le geste le plus fréquent du planning. */
.andrag{position:absolute;width:0;height:22px;left:0;top:0;opacity:0;transform:none;
box-shadow:0 6px 14px rgba(62,43,26,.22);
transition:left .8s cubic-bezier(.4,0,.2,1),top .8s cubic-bezier(.4,0,.2,1),opacity .2s,transform .3s}
.andrag.go{opacity:1}
.andrag.pose{box-shadow:none}
.apabs{height:18px;align-self:center;border-radius:4px;font-weight:700;font-size:8px;display:flex;
align-items:center;padding:0 7px;white-space:nowrap;overflow:hidden;background:#E7F1EF;color:#2F6A5F}
.apabs.anabs{opacity:0;transform:scaleX(.3);transform-origin:left;border:1px dashed #2F6A5F;
transition:opacity .3s,transform .5s cubic-bezier(.2,.9,.3,1.1)}
.anabs.go{opacity:1;transform:none}
.anabs.ok{border-style:solid;border-color:transparent}
/* 2 · le téléphone */
.an-moi{display:flex;justify-content:center}
.authph{position:relative;width:186px;background:var(--carte);border:6px solid var(--encre);border-radius:22px;
padding:12px 11px;box-shadow:0 8px 22px rgba(62,43,26,.16);overflow:hidden}
.authpht{margin-bottom:6px}
.authpht b{display:block;font-family:var(--f-titre);font-size:14px;font-weight:600;color:var(--encre)}
.authpht i{font-style:normal;font-size:9px;color:var(--muet)}
.authpl{display:flex;align-items:center;gap:6px;padding:5px 0;border-top:1px solid var(--surface-2);font-size:9px}
.authpl span{width:36px;color:var(--muet);font-weight:600}
.authpl b{flex:1;color:var(--encre);font-weight:700}
.authpl i{width:8px;height:8px;border-radius:2px;flex:none}
.authpl em{font-style:normal;font-size:7.5px;color:#2F6A5F;background:#E7F1EF;border-radius:8px;padding:1px 5px;font-weight:700}
.authpl.auj span{color:var(--terra-h)}
.authpl.anrow{max-height:0;padding:0;opacity:0;overflow:hidden;transition:max-height .4s,padding .4s,opacity .4s}
.anrow.go{max-height:30px;padding:5px 0;opacity:1}
.authpb{position:relative;margin-top:9px;background:var(--terra);color:#fff;border-radius:9px;padding:7px;
text-align:center;font-size:10px;font-weight:700;overflow:hidden}
.ansheet{position:absolute;left:0;right:0;bottom:0;background:var(--carte);border-top:1px solid var(--ligne);
border-radius:16px 16px 0 0;padding:10px 12px 12px;transform:translateY(105%);
transition:transform .45s cubic-bezier(.2,.9,.3,1);box-shadow:0 -6px 18px rgba(62,43,26,.12)}
.ansheet.go{transform:none}
.anshh{font-family:var(--f-titre);font-size:12px;font-weight:600;color:var(--encre);margin-bottom:6px}
.anshf{display:flex;justify-content:space-between;align-items:center;font-size:9px;padding:5px 0;
border-top:1px solid var(--surface-2)}
.anshf span{color:var(--muet);font-weight:600}
.anshf b{color:var(--encre);opacity:0;transition:opacity .3s}
.anshf b.go{opacity:1}
.ansent{position:absolute;left:0;right:0;bottom:0;background:var(--vert);color:#fff;text-align:center;
font-size:10px;font-weight:700;padding:9px;transform:translateY(105%);
transition:transform .4s cubic-bezier(.2,.9,.3,1)}
.ansent.go{transform:none}
.ansent b{display:inline-block;margin-right:5px}
/* 3 · la tablette */
.authtab{background:var(--carte);border:1px solid var(--ligne);border-radius:12px;overflow:hidden}
.authth{background:var(--encre);color:#fff;padding:9px 12px;display:flex;align-items:center;gap:9px}
.authtr{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.14);display:flex;
align-items:center;justify-content:center;font-size:14px;flex:none}
.authth b{display:block;font-size:12px;font-weight:700}
.authth i{font-style:normal;font-size:9px;opacity:.6}
.andemn{text-decoration:none;color:var(--terra);font-weight:700;transition:opacity .4s}
.andemn.off{opacity:0}
.authtj{display:flex;gap:4px;padding:8px 10px;border-bottom:1px solid var(--ligne)}
.authtj span{flex:1;display:flex;flex-direction:column;align-items:center;border:1px solid var(--ligne);
border-radius:7px;padding:4px 0;background:var(--carte)}
.authtj span i{font-style:normal;font-size:7.5px;font-weight:700;color:var(--muet);text-transform:uppercase}
.authtj span b{font-family:var(--f-titre);font-size:14px;font-weight:600;color:var(--encre)}
.authtj span.on{background:var(--terra);border-color:var(--terra)}
.authtj span.on i,.authtj span.on b{color:#fff}
.authts{padding:9px 10px 10px;display:flex;flex-direction:column;gap:6px;background:var(--surface-2)}
.authtc{background:var(--carte);border:1px solid var(--ligne);border-left:3px solid;border-radius:8px;padding:6px 10px}
.authtc b{display:block;font-size:11px;font-weight:700;color:var(--encre)}
.authtc i{font-style:normal;font-size:8.5px;color:var(--muet)}
.andem{display:flex;align-items:center;gap:8px;background:#E7F1EF;border:1px dashed #2F6A5F;border-radius:8px;
padding:0 10px;max-height:0;opacity:0;overflow:hidden;
transition:max-height .45s,opacity .4s,padding .45s,border-color .4s,background .4s}
.andem.go{max-height:60px;opacity:1;padding-top:6px;padding-bottom:6px}
.andem.ok{border-style:solid;border-color:transparent;background:var(--vert-pale)}
.andem > div{flex:1;min-width:0}
.andem b{display:block;font-size:10.5px;font-weight:700;color:#2F6A5F}
.andem i{font-style:normal;font-size:8.5px;color:var(--muet)}
.anval{position:relative;background:var(--vert);color:#fff;border-radius:7px;padding:5px 10px;font-size:9.5px;
font-weight:700;overflow:hidden;flex:none;transition:background .3s}
.andem.ok .anval{background:transparent;color:var(--vert)}
/* 4 · la borne — la grille des cartes, telle qu'on la touche. */
.anborne{background:var(--encre);color:#fff;border-radius:12px;padding:12px 14px 14px;height:100%;
box-sizing:border-box;display:flex;flex-direction:column;gap:10px}
.anbh{display:flex;align-items:baseline;gap:10px}
.anbh b.anheure{font-family:var(--f-titre);font-size:26px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.anbh > span{font-size:10px;opacity:.7;text-transform:capitalize}
.anbc{margin-left:auto;font-size:9.5px;opacity:.9!important;text-transform:none!important}
.anbc b{font-family:var(--f-titre);font-size:14px;font-weight:600;transition:color .3s}
.anbc b.tick{color:var(--terra)}
.anbg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;flex:1}
.anbp{position:relative;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:12px;
padding:9px 10px;display:flex;flex-direction:column;gap:3px;overflow:hidden;transition:background .4s,border-color .4s}
.anbp i{width:26px;height:26px;border-radius:50%;font-style:normal;font-size:8px;font-weight:700;display:flex;
align-items:center;justify-content:center}
.anbp em{font-style:normal;font-size:8.5px;opacity:.55}
.anbp.ok{background:rgba(96,140,72,.28);border-color:rgba(140,190,110,.6)}
.anbp.ok em{opacity:1;color:#BFE3A6;font-weight:700}
/* Sans animation : chaque scène est montrée dans son état FINAL, et
rien ne glisse. */
.authanim.fige .ansh,.authanim.fige .anabs,.authanim.fige .anrow,.authanim.fige .andem{opacity:1;transform:none;max-height:none}
@media (prefers-reduced-motion:reduce){.authanim *{transition:none!important;animation:none!important}}
/* ── LE MOT DE PASSE ET SON ŒIL ── (v13.4)
Le bouton vit DANS le champ, au bout de la ligne ; le champ garde
sa place à droite pour ne pas écrire sous lui. */
.mdpw{position:relative}
.mdpw .fi{padding-right:40px}
.mdpo{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:0;
border-radius:7px;background:none;color:var(--muet);cursor:pointer;display:flex;align-items:center;
justify-content:center;padding:0}
.mdpo svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
.mdpo:hover{background:var(--surface-2);color:var(--encre-2)}
/* Œil ouvert = mot de passe VISIBLE : le bouton dit l'état, pas le
geste. Barré, il dirait « masqué » alors qu'on le voit. */
.mdpo.on{color:var(--terra-h)}
.mdpo.on::after{content:'';position:absolute;width:20px;height:1.8px;background:currentColor;
transform:rotate(-45deg);border-radius:2px}
/* ── LE CODE À SIX CASES ── (v13.4)
La longueur se voit sans se lire, le curseur avance seul, un code
collé remplit les six. « width:0 + flex:1 » : les cases se
partagent la ligne, quelle que soit sa largeur. */
.authcode{display:flex;gap:7px}
.authcode .c6{width:0;flex:1;text-align:center;font-family:var(--f-titre);font-size:22px;font-weight:600;
padding:10px 0;letter-spacing:0}
.authren{color:var(--muet)}
.authren b{color:var(--encre-2);font-variant-numeric:tabular-nums}
/* ── LA PORTE DE L'ESSAI ── (v13.4.1)
Sur sa propre ligne, et l'argument après le lien, en muet : collé à
la question, « 30 jours, sans carte bancaire » se coupait en deux.
(La pastille verte « Vous êtes déconnecté » de la v13.4 a vécu un
jour : l'état est le TITRE, il n'a pas besoin d'un badge.) */
.authpied-essai{margin-top:22px;line-height:1.7}
.authpied-essai span{color:var(--muet);font-weight:400}
.authpied-essai span::before{content:'·';margin:0 6px}
/* ── LE VOLET PASSE AU-DESSUS, ET MAIGRIT ──
La miniature disparaît la première : à 400 px de large elle serait
illisible, et ce qu'on vient faire est en dessous. */
@media (max-width:880px){
/* Le panneau blanc occupe ce qui reste : sans « 1fr », la page se
termine sur une bande de crème qui n'appartient à rien. */
.authduo{grid-template-columns:1fr;grid-template-rows:auto 1fr}
/* Le volet passe au-dessus : son filet passe donc en dessous. */
.authvg{padding:22px 22px 20px;gap:11px;border-right:0;border-bottom:1px solid var(--ligne)}
.authmq{margin-top:0}
.authvg h1{font-size:19px;max-width:26ch}
.authbl,.authanim,.authpd{display:none}
.authvd{padding:26px 22px 34px;justify-content:flex-start}
}
/* ═══ Borne (tablette — hors garde mobile) ═══ */
.page-borne{min-height:100vh;background:var(--encre);display:flex;align-items:center;
justify-content:center;padding:20px}
.borne-box{width:min(430px,96vw);text-align:center}
.borne-clock{font-family:var(--f-titre);font-weight:600;font-size:60px;color:#fff;line-height:1}
.borne-date{font-size:13px;color:var(--creme);font-weight:500;margin-top:6px;text-transform:capitalize}
.borne-card{background:var(--carte);border-radius:18px;padding:22px;margin-top:20px;
box-shadow:0 24px 60px rgba(0,0,0,.35)}
.pinrow{display:flex;justify-content:center;gap:10px;margin:6px 0 16px}
.pindot{width:16px;height:16px;border-radius:50%;border:2px solid var(--ligne-2)}
.pindot.full{background:var(--terra);border-color:var(--terra)}
.pinpad{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.pinpad button{border:1px solid var(--ligne);background:var(--surface-2);border-radius:12px;
padding:15px 0;font-size:19px;font-weight:700;color:var(--encre);cursor:pointer}
.pinpad button:active{background:var(--ligne)}
.borne-actions{display:flex;gap:8px;margin-top:14px}
.borne-actions button{flex:1;border:none;border-radius:11px;padding:13px 4px;font-weight:600;
font-size:12.5px;cursor:pointer;color:#fff}
.ba-arr{background:var(--vert)}.ba-pau{background:#D8A125;color:#fff!important}
.ba-rep{background:var(--bleu)}.ba-dep{background:var(--terra)}
.borne-msg{border-radius:12px;padding:12px;font-size:13px;font-weight:600;margin-bottom:12px}
.borne-msg.ok{background:var(--vert-pale);color:var(--vert)}
.borne-msg.ko{background:var(--rouge-pale);color:var(--rouge)}
.borne-quit{margin-top:16px;font-size:11.5px;color:rgba(255,255,255,.6);display:inline-block}
/* ═══ Kit / styleguide ═══ */
.kitrow{display:grid;grid-template-columns:190px 1fr;gap:16px;padding:15px 18px;
border-bottom:1px solid var(--ligne);align-items:start}
.kitrow:last-child{border-bottom:none}
.kitrow .kn{font-size:12px;font-weight:600;color:var(--encre);padding-top:6px}
.kitrow .kn small{display:block;font-size:11px;color:var(--muet);font-weight:500;margin-top:2px}
.kitswatch{display:flex;gap:8px;flex-wrap:wrap}
.kitswatch div{width:74px;border-radius:10px;overflow:hidden;border:1px solid var(--ligne);
font-size:9px;font-weight:600;text-align:center}
.kitswatch div i{display:block;height:36px}
.kitswatch div b{display:block;padding:4px 2px;background:#fff;color:var(--muet)}
/* ═══ Impression du planning ═══ */
@media print{
.side,.rail,.top,.va,.plbar,.legpl,.cellplus,.pcell .plus,.modal,.filtres,.ddown,.alert,
.delzone,.toast,.chooser,.dwr{display:none!important}
html{min-width:0}
body{background:#fff}
.app{display:block}
.content{padding:0;margin:0;max-width:none}
.vh{margin-bottom:8px}
.vh h1{font-size:20px}
.card{border:1px solid #bbb;border-radius:0;box-shadow:none;break-inside:avoid}
.plgrid,.pl2{min-width:0}
.shift,.sh,.absx,.pld,.dd,.pfoot .fc,.plfoot .plcell{-webkit-print-color-adjust:exact;print-color-adjust:exact}
@page{size:A4 landscape;margin:10mm}
}
/* ═══ Dépôt scindé : Déplacer | Dupliquer au moment du drop ═══ */
.pcell.dover{background:var(--bleu-pale)!important;outline:none;border-radius:10px}
.dropsplit{position:absolute;inset:3px;display:flex;gap:3px;z-index:6;pointer-events:none}
.ds-half{flex:1;border:1.5px dashed var(--ligne-2);border-radius:8px;background:rgba(255,255,255,.88);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
font-size:9.5px;font-weight:700;color:var(--muet);min-width:0;overflow:hidden;transition:all .08s}
.ds-half svg{width:14px;height:14px;flex:none}
.ds-half span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:92%}
.ds-half.hot{border-color:var(--bleu);border-style:solid;background:var(--bleu-pale);color:var(--bleu)}
/* ═══ Alertes : badge dans la case du salarié + panneau flottant ═══ */
.wemp{display:inline-flex;align-items:center;gap:3px;background:var(--rouge);color:#fff;
border:none;border-radius:7px;padding:2px 6px;cursor:pointer;vertical-align:1px;margin-left:7px;
font-family:var(--f-ui);font-size:10px;font-weight:700;line-height:1.3}
.wemp:hover{filter:brightness(.92)}
.wpanel{position:fixed;z-index:70;width:min(400px,90vw);background:var(--carte);
border:1px solid var(--ligne);border-radius:14px;box-shadow:var(--ombre-2);
display:none;overflow:hidden}
.wpanel.on{display:block}
/* Bandeau de titre en rouge plein : on doit voir au premier coup
d'œil qu'il s'agit d'alertes, avant même de lire. */
.wpt{display:flex;align-items:center;gap:8px;font-family:var(--f-titre);font-weight:600;
font-size:13.5px;color:#fff;background:var(--rouge);padding:11px 16px;
border-radius:13px 13px 0 0;margin:0}
.wpt::before{content:'';width:16px;height:16px;flex:none;background-color:currentColor;
-webkit-mask:var(--ico-warn) center/contain no-repeat;
mask:var(--ico-warn) center/contain no-repeat}
/* Le panneau n'a plus de marge en tête : le bandeau touche les bords */
.wpanel{padding-top:0;overflow:hidden}
.wpanel .wpl{max-height:calc(55vh - 44px);overflow-y:auto}
.wpi{display:flex;gap:11px;padding:11px 16px;border-bottom:1px solid var(--surface-2);align-items:flex-start}
.wpi:last-child{border-bottom:none}
.wpi .avm{width:30px;height:30px;border-radius:50%;color:#fff;display:flex;align-items:center;
justify-content:center;font-size:10px;font-weight:700;flex:none}
.wpi b{display:block;font-size:12.5px;color:var(--encre)}
.wpi span{display:block;font-size:12px;color:var(--encre-2);line-height:1.45;margin-top:2px}
/* ═══ Configuration : établissements ═══ */
.etabgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.etabcard{background:var(--carte);border:1px solid var(--ligne);border-radius:var(--r);
box-shadow:var(--ombre);overflow:hidden;display:block;color:var(--encre)}
.etabcard:hover{border-color:var(--ligne-2);box-shadow:var(--ombre-2)}
.ecc{display:flex;align-items:center;gap:12px;padding:15px 17px 13px}
.ecc .ei{width:38px;height:38px;border-radius:11px;background:var(--terra-pale);
display:flex;align-items:center;justify-content:center;color:var(--terra-h);flex:none}
.ecc b{display:block;font-family:var(--f-titre);font-weight:600;font-size:15px;line-height:1.2}
.ecc .es{display:block;font-size:11.5px;color:var(--muet);margin-top:2px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ecs{display:flex;gap:16px;padding:10px 17px;background:var(--surface-2);
border-top:1px solid var(--ligne);font-size:11.5px;color:var(--muet)}
.ecs b{color:var(--encre);font-weight:700;font-size:12.5px}
/* Fiche établissement */
.cfgform{max-width:720px}
.cfgactions{max-width:720px;display:flex;justify-content:flex-end;gap:9px;margin:4px 0 26px}
.ch .sico{width:28px;height:28px;border-radius:9px;background:var(--vert-pale);color:var(--vert);
display:flex;align-items:center;justify-content:center;flex:none}
.ch .sico.ko{background:var(--rouge-pale);color:var(--rouge)}
.ch .sico svg{width:15px;height:15px}
.danger-card{max-width:720px;border-color:#EAD0D1}
.kvrow{display:flex;gap:20px;padding:12px 18px;border-bottom:1px solid var(--surface-2);align-items:baseline}
.kvrow:last-child{border-bottom:none}
.kvrow .k{font-size:12.5px;font-weight:600;color:var(--encre-2);width:220px;flex:none}
.kvrow .vv{font-size:13px;color:var(--encre);flex:1}
.kvrow .vide{color:var(--muet);font-style:italic;font-size:12.5px}
.cfoot{padding:12px 18px;background:var(--surface-2);border-top:1px solid var(--ligne);
display:flex;justify-content:flex-end}
/* Équipes & étiquettes */
.tagwrap{display:flex;flex-wrap:wrap;gap:8px;padding:14px 18px;align-items:center}
.eqchip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--ligne-2);
background:#fff;border-radius:10px;padding:7px 9px 7px 11px;font-size:12.5px;color:var(--encre)}
.eqchip b{font-weight:600}
.eqchip .tn{font-size:10.5px;font-weight:700;color:var(--muet);background:var(--surface-2);
border-radius:6px;padding:1px 6px}
.eqpen{border:none;background:none;color:var(--muet);cursor:pointer;padding:2px 3px;
display:inline-flex;align-items:center;font-size:11px;font-family:var(--f-ui);border-radius:6px}
.eqpen:hover{background:var(--surface-2);color:var(--encre)}
.eqpen.ko:hover{background:var(--rouge-pale);color:var(--rouge)}
.tagsec{padding:12px 18px 14px;border-top:1px solid var(--surface-2)}
.tsh{font-family:var(--f-titre);font-weight:600;font-size:13.5px;color:var(--encre);margin-bottom:9px}
.tagchip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--ligne-2);
background:#fff;border-radius:8px;padding:7px 13px;font-family:var(--f-ui);font-size:12.5px;
font-weight:600;color:var(--encre);cursor:pointer}
.tagchip:hover{filter:brightness(.97)}
.tagchip .tn{font-size:10px;font-weight:700;opacity:.65}
.tagadd{border:1px dashed var(--ligne-2);background:none;border-radius:8px;padding:7px 13px;
font-family:var(--f-ui);font-size:12.5px;font-weight:600;color:var(--muet);cursor:pointer}
.tagadd:hover{border-color:var(--terra);color:var(--terra-h);border-style:solid}
/* ═══ Recherche SIRET (base Sirene) ═══ */
.siretbar{display:flex;gap:8px;align-items:center}
.siretbar .fi{flex:1}
.siretres{margin-top:9px;display:flex;flex-direction:column;gap:6px}
.siretres:empty{margin:0}
.srt{font-size:11.5px;font-weight:600;color:var(--muet);padding:2px 0}
.sret{text-align:left;border:1px solid var(--ligne-2);background:#fff;border-radius:10px;
padding:10px 13px;cursor:pointer;font-family:var(--f-ui);display:block;width:100%}
.sret:hover{border-color:var(--terra);background:var(--terra-pale)}
.sret b{display:block;font-size:13px;font-weight:600;color:var(--encre)}
.sret .sr1{display:block;font-size:12px;color:var(--encre-2);margin-top:2px}
.sret .sr2{display:block;font-size:11px;color:var(--muet);margin-top:3px}
.sload,.sok,.sko{font-size:12px;font-weight:500;border-radius:10px;padding:9px 12px;line-height:1.45}
.sload{background:var(--surface-2);color:var(--muet);border:1px solid var(--ligne)}
.sok{background:var(--vert-pale);color:var(--vert);border:1px solid #D8E5C9}
.sko{background:var(--rouge-pale);color:var(--rouge);border:1px solid #F0CFD1}
.fi.rempli{border-color:var(--vert);box-shadow:0 0 0 3px rgba(85,128,59,.14);
transition:border-color .3s,box-shadow .3s}
/* ═══ Équipes & étiquettes fusionnées ═══ */
.eqbloc{padding:13px 18px 14px;border-top:1px solid var(--surface-2)}
.eqhead{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.eqhead b{font-family:var(--f-titre);font-weight:600;font-size:14px;color:var(--encre)}
.eqhead .eqm{font-size:11.5px;color:var(--muet);margin-right:auto}
/* Palette de couleurs (modale étiquette) */
.swgrid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:7px;padding:2px 0 4px}
.swopt{cursor:pointer;position:relative}
.swopt input{position:absolute;opacity:0;width:0;height:0}
.swopt span{display:flex;align-items:center;justify-content:center;height:34px;border-radius:9px;
border:1px solid;font-size:11px;font-weight:700;transition:transform .1s}
.swopt:hover span{transform:scale(1.06)}
.swopt input:checked+span{box-shadow:0 0 0 2px var(--encre);border-color:var(--encre)}
.swopt input:focus-visible+span{outline:2px solid var(--terra);outline-offset:2px}
/* Neuf places quand la première sert à hériter : huit teintes plus
« celle de la liste », sur un seul rang. Deux rangs pour neuf
pastilles laisseraient une ligne d'une seule case. (v14.31) */
.swgrid.sw9{grid-template-columns:repeat(9,minmax(0,1fr))}
/* Grille d'icônes */
/* Grille du choix d'icône d'ÉTIQUETTE : des colonnes de largeur
égale, qui s'adaptent au nombre d'icônes sans jamais les écraser. */
.icgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));
gap:7px;padding:2px 0 4px}
.icopt{cursor:pointer;position:relative}
.icopt input{position:absolute;opacity:0;width:0;height:0}
.icopt span{display:flex;align-items:center;justify-content:center;height:40px;border-radius:9px;
border:1px solid var(--ligne-2);background:#fff;color:var(--encre-2);transition:all .12s}
.icopt span svg{width:18px;height:18px}
.icopt .icnone{font-size:10px;font-weight:600;color:var(--muet)}
.icopt:hover span{border-color:var(--muet);background:var(--surface-2)}
.icopt input:checked+span{border-color:var(--terra);background:var(--terra-pale);color:var(--terra-h)}
.icopt input:focus-visible+span{outline:2px solid var(--terra);outline-offset:2px}
/* Aperçu de l'étiquette */
.tgprev{background:var(--surface-2);border:1px solid var(--ligne);border-radius:10px;padding:12px}
.tgprev .sh{max-width:180px;cursor:default}
.tgi{display:inline-flex;vertical-align:-2px;margin-right:4px}
.tgi svg{width:11px;height:11px}
.tagchip svg{flex:none}
/* ═══ Utilisateurs : comptes et accès ═══ */
.urow{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--surface-2);flex-wrap:wrap}
.urow:last-child{border-bottom:none}
.urow:hover{background:var(--surface-2)}
.urow .uinfo{min-width:190px}
.urow .uacces{display:flex;gap:5px;flex-wrap:wrap;flex:1;min-width:180px}
.urow .uact{display:flex;gap:6px;margin-left:auto}
/* ═══ Organisation & facturation ═══ */
.cfg2{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr);gap:20px;align-items:start}
.cfg2 .cfgform{max-width:none}
.cfg2 .cfgactions{max-width:none}
.factapercu{padding:16px 18px;display:flex;flex-direction:column;gap:2px;font-size:12.5px;line-height:1.5}
.factapercu b{font-family:var(--f-titre);font-weight:600;font-size:14.5px;margin-bottom:3px}
.factapercu .fmeta{color:var(--muet);font-size:11.5px;margin-top:4px}
.factapercu .vide{color:#C4B7A3;font-style:italic}
/* ═══ Abonnement : formules et tarif ═══ */
.tarifbox{display:flex;align-items:center;gap:16px;padding:16px 18px;background:var(--surface-2);
border-bottom:1px solid var(--ligne);flex-wrap:wrap}
.tarifbox .tb1 b{font-family:var(--f-titre);font-weight:600;font-size:17px;display:block}
.tarifbox .tb1 span{font-size:12px;color:var(--muet)}
.tarifbox .tb2{margin-left:auto;text-align:right}
.tarifbox .tb2 b{font-family:var(--f-titre);font-weight:600;font-size:26px;color:var(--terra-h);
display:block;line-height:1.1;letter-spacing:-.01em}
.tarifbox .tb2 span{font-size:11.5px;color:var(--muet)}
/* v15.1.25 : les avoirs dans la liste des factures (montants négatifs, facture d'origine). */
.tA.ab-fact th,.tA.ab-fact td{padding:10px 12px}
.tA.ab-fact td.num,.tA.ab-fact td.mono,.tA.ab-fact td:nth-child(2){white-space:nowrap}
.tA.ab-fact tr.ab-avoir td{background:var(--surface-2)}
.ab-mut{font-family:var(--f-ui);font-size:11px;color:var(--muet);font-weight:500}
.formules{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px 18px}
.fcard{border:1.5px solid var(--ligne-2);border-radius:var(--r);padding:14px 15px;cursor:pointer;
display:flex;flex-direction:column;gap:5px;background:#fff;position:relative}
.fcard input{position:absolute;opacity:0}
.fcard:hover{border-color:var(--muet)}
.fcard.on,.fcard:has(input:checked){border-color:var(--terra);background:var(--terra-pale)}
.fc-h{display:flex;align-items:center;gap:8px}
.fc-h b{font-family:var(--f-titre);font-weight:600;font-size:15px}
.fc-p{font-family:var(--f-titre);font-weight:600;font-size:20px;color:var(--encre);letter-spacing:-.01em}
.fc-p i{font-style:normal;font-size:11.5px;font-weight:500;color:var(--muet);margin-left:5px;font-family:var(--f-ui)}
.fc-d{font-size:12px;color:var(--encre-2);line-height:1.45}
.fc-i{font-size:11.5px;color:var(--muet)}
/* ═══ Facture imprimable ═══ */
.factpage{max-width:800px;margin:0 auto;padding:24px 20px 60px}
.factbar{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.factbar .btn:last-child{margin-left:auto}
.factdoc{background:#fff;border:1px solid var(--ligne);border-radius:var(--r);
box-shadow:var(--ombre);padding:34px 38px}
.fdh{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
padding-bottom:20px;border-bottom:2px solid var(--encre)}
.fdnum{text-align:right}
.fdnum b{font-family:var(--f-titre);font-weight:600;font-size:22px;display:block}
.fdnum span{display:block;font-size:12.5px;color:var(--encre-2)}
.fdparties{display:grid;grid-template-columns:1fr 1fr;gap:26px;padding:22px 0}
.fdparties .fdt{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
color:var(--muet);margin-bottom:6px}
.fdparties b{font-size:14px;display:block;margin-bottom:2px}
.fdparties span{display:block;font-size:12.5px;color:var(--encre-2);line-height:1.5}
.fdparties .fdm{font-size:11.5px;color:var(--muet);margin-top:6px}
.fdtable{width:100%;border-collapse:collapse;margin-top:6px}
.fdtable th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:var(--muet);padding:9px 0;border-bottom:1px solid var(--ligne-2)}
.fdtable th.rt,.fdtable td.rt{text-align:right}
.fdtable td{padding:14px 0;border-bottom:1px solid var(--surface-2);vertical-align:top;font-size:13px}
.fdtable td b{font-size:13.5px}
.fdp{display:block;font-size:12px;color:var(--muet);margin-top:3px;line-height:1.5}
.fdtot{margin-left:auto;width:min(300px,100%);margin-top:14px}
.fdtot div{display:flex;justify-content:space-between;padding:6px 0;font-size:13px}
.fdtot div span{color:var(--encre-2)}
.fdtot .ttc{border-top:2px solid var(--encre);margin-top:6px;padding-top:10px;font-size:16px}
.fdtot .ttc b{font-family:var(--f-titre);font-weight:600;color:var(--terra-h)}
.fdpied{margin-top:30px;padding-top:16px;border-top:1px solid var(--surface-2);
font-size:11.5px;color:var(--encre-2);line-height:1.6}
.fdpied .fdm{color:var(--muet);margin-top:6px}
@media print{
body{background:#fff}
.factbar{display:none}
.factpage{max-width:none;padding:0}
.factdoc{border:none;box-shadow:none;padding:0;border-radius:0}
@page{size:A4;margin:16mm}
}
/* ═══ Liste des salariés ═══ */
.tabs a .cnt{font-size:10.5px;font-weight:700;color:var(--muet);margin-left:5px}
.tabs a.on .cnt{color:var(--terra-h)}
.tA .nomcell span:last-child{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.tA td .r2{font-size:11.5px;color:var(--muet);margin-top:2px;font-weight:500}
.tA td .meta{font-size:12px;color:var(--muet)}
.filtbar .fico .fi{padding-left:34px}
.filtbar .fico svg{left:10px}
/* ═══ Absences : tableau dépliable ═══ */
.absline{cursor:pointer}
.absline .chev{border:none;background:none;color:var(--muet);cursor:pointer;padding:4px;
display:inline-flex;vertical-align:middle;transition:transform .15s}
.absline .chev svg{width:16px;height:16px}
.absline.ouvert .chev{transform:rotate(90deg);color:var(--encre)}
.absline.conflit{background:#FFFCFC}
.absline .meta{font-size:12.5px;color:var(--encre-2)}
.absdet{display:none}
.absdet.on{display:table-row}
.absdet>td{padding:0!important;background:var(--surface-2);border-bottom:1px solid var(--ligne)!important}
.detwrap{padding:6px 18px 18px}
.detsec{display:grid;grid-template-columns:180px 1fr;gap:18px;padding:14px 0;
border-bottom:1px solid var(--ligne);align-items:start}
.detsec:last-child{border-bottom:none}
.detlab{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muet);padding-top:3px}
.detval{font-size:13px;color:var(--encre)}
.detval textarea.fi{background:#fff}
.detact{display:flex;justify-content:flex-end;gap:9px;margin-top:10px;align-items:center}
.repbox{background:#fff;border:1px solid var(--ligne);border-radius:10px;padding:10px 13px;font-size:12.5px}
.cptab{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--ligne);border-radius:10px;overflow:hidden}
.cptab th{font-size:11px;font-weight:600;color:var(--encre-2);padding:9px 10px;text-align:center;
background:var(--surface-2);border-bottom:1px solid var(--ligne)}
.cptab td{padding:11px 10px;text-align:center;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.cptab td.neg{color:var(--terra-h)}
.calinfo{font-size:12.5px;color:var(--encre-2);margin-bottom:8px}
.calinfo b{font-weight:700;color:var(--encre)}
/* Calendrier d'équipe */
.calleg{display:flex;gap:14px;flex-wrap:wrap;padding:8px 0 10px;font-size:11.5px;color:var(--encre-2)}
.calleg span{display:inline-flex;align-items:center;gap:6px}
.calleg i{width:11px;height:11px;border-radius:3px;display:block;border:1px solid rgba(0,0,0,.06)}
.calleg i.c-dem{background:#8A4B2A}
.calleg i.c-att{background:var(--terra)}
.calleg i.c-val{background:var(--bleu)}
.calleg i.c-auj{background:var(--terra-pale);border-color:var(--terra)}
.calgrid{display:grid;grid-template-columns:150px repeat(var(--nj),minmax(20px,1fr));
background:#fff;border:1px solid var(--ligne);border-radius:10px;overflow:hidden;min-width:600px}
.calh{padding:5px 2px;text-align:center;background:var(--surface-2);border-bottom:1px solid var(--ligne);
border-left:1px solid var(--surface-2);font-size:9.5px;line-height:1.25}
.calh span{display:block;color:var(--muet);font-weight:600}
.calh b{display:block;font-size:11px;color:var(--encre)}
.calh.calc0{grid-column:1;text-align:left;padding-left:12px;font-size:10.5px;font-weight:600;
color:var(--muet);text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;border-left:none}
.calh.we{background:#F3EFE6}
.calh.auj{background:var(--terra-pale)}
.calh.auj b{color:var(--terra-h)}
.calnom{padding:5px 8px 5px 12px;font-size:11.5px;border-top:1px solid var(--surface-2);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center}
.calnom a:hover{color:var(--terra-h)}
.calc{border-top:1px solid var(--surface-2);border-left:1px solid var(--surface-2);min-height:22px}
.calc.we{background:#FBF8F1}
.calc.auj{box-shadow:inset 0 0 0 1px var(--terra-pale)}
.calc.c-dem{background:#8A4B2A}
.calc.c-att{background:var(--terra)}
.calc.c-val{background:var(--bleu)}
/* Sélecteur matin / après-midi */
.demirow{display:flex;gap:10px;align-items:center;margin-bottom:4px}
.demirow .fi{flex:1}
.demiseg{display:flex;background:var(--surface-2);border:1px solid var(--ligne);border-radius:10px;padding:3px;gap:3px}
.demiseg label{cursor:pointer;position:relative}
.demiseg input{position:absolute;opacity:0}
.demiseg span{display:block;padding:6px 13px;border-radius:8px;font-size:12px;font-weight:600;color:var(--encre-2)}
.demiseg input:checked+span{background:#fff;color:var(--encre);box-shadow:var(--ombre)}
.demiseg input:focus-visible+span{outline:2px solid var(--terra);outline-offset:1px}
/* ═══ Convention & types d'absence (réglages établissement) ═══ */
.ccngrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ligne);
border-top:1px solid var(--ligne)}
.ccngrid>div{background:#fff;padding:11px 14px}
.ccngrid span{display:block;font-size:11px;font-weight:600;color:var(--muet)}
.ccngrid b{display:block;font-size:14px;font-weight:600;margin-top:3px}
.abschip{display:inline-flex;align-items:center;border-radius:7px;padding:4px 10px;
font-size:12px;font-weight:600;white-space:nowrap}
.abspal{display:flex;gap:8px;flex-wrap:wrap;padding:2px 0}
.abspick{cursor:pointer;position:relative}
.abspick input{position:absolute;opacity:0}
.abspick i{display:block;width:34px;height:26px;border-radius:8px;border:1.5px solid transparent}
.abspick input:checked+i{outline:2px solid var(--encre);outline-offset:2px}
.abspick:hover i{filter:brightness(.97)}
/* ═══ Logo, icônes d'absence, jours fériés ═══ */
.logorow{display:flex;gap:12px;align-items:center;flex-wrap:nowrap}
/* L'input fichier natif est masqué : sa largeur dépend du nom du
fichier choisi et dilatait toute la mise en page. */
.logoinput{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
.logofield{flex:1;min-width:0;display:flex;align-items:center;gap:10px}
.logofield label.btn{flex:none;cursor:pointer}
.logonom{font-size:12px;color:var(--muet);white-space:nowrap;overflow:hidden;
text-overflow:ellipsis;min-width:0;flex:1}
.logoretire{flex:none;white-space:nowrap}
.logoprev{width:64px;height:64px;border-radius:12px;border:1px solid var(--ligne);background:var(--surface-2);
display:flex;align-items:center;justify-content:center;flex:none;overflow:hidden}
.logoprev img{max-width:100%;max-height:100%;object-fit:contain}
.logorow .chk{flex:none;padding-top:9px}
/* Choix d'icône d'ABSENCE — à ne pas confondre avec celui des
étiquettes, plus haut, qui utilise une grille régulière. */
.icgrid-abs{display:flex;flex-wrap:wrap;gap:7px;padding:2px 0}
.icpick{cursor:pointer;position:relative}
.icpick input{position:absolute;opacity:0}
.icpick span{display:flex;align-items:center;justify-content:center;width:36px;height:32px;
border:1px solid var(--ligne-2);border-radius:9px;background:#fff;color:var(--encre-2);font-size:12px}
.icpick span svg{width:17px;height:17px}
.icpick input:checked+span{border-color:var(--terra);background:var(--terra-pale);color:var(--terra-h)}
.icpick:hover span{border-color:var(--muet)}
.lg-fiche{width:54px;height:54px;border-radius:14px;flex:none}
.lg-fiche:hover{border-color:var(--terra)}
.ecc .ei img{width:100%;height:100%;object-fit:contain;border-radius:9px}
.ecc .ei{overflow:hidden;padding:3px;background:#fff;border:1px solid var(--ligne)}
.histoline{display:flex;gap:12px;align-items:baseline;padding:6px 0;font-size:12.5px;
border-bottom:1px solid var(--surface-2)}
.histoline:last-child{border-bottom:none}
.histoline .mono{color:var(--muet);flex:none;width:80px}
.histoline .meta{margin-left:auto;font-size:11.5px;color:var(--muet)}
/* ═══ Configuration des positions (fiche établissement) ═══ */
.posconf{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,1.4fr);gap:0;align-items:start}
.posconf .pcol{border-right:1px solid var(--ligne);min-height:180px}
.posconf .pgrp{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
color:var(--muet);padding:10px 16px 5px;background:var(--surface-2);border-bottom:1px solid var(--surface-2)}
.posconf .pitem{display:flex;align-items:center;gap:9px;padding:9px 16px;
border-bottom:1px solid var(--surface-2);flex-wrap:wrap}
.posconf .pitem:hover{background:var(--surface-2)}
.posconf .pitem.on{background:var(--terra-pale)}
.posconf .pmeta{font-size:11px;color:var(--muet);width:100%}
.posconf .pdet{min-width:0}
.posconf .pdeth{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--surface-2)}
.posconf .pdeth b{font-family:var(--f-titre);font-weight:600;font-size:14.5px}
.posconf .modbloc{margin-bottom:10px}
.posconf .modh{font-size:11px;font-weight:600;color:var(--encre-2);background:var(--surface-2);
border-radius:7px;padding:4px 9px;margin-bottom:6px;display:inline-block}
.posgrid .plab .etq{font-size:9.5px;font-weight:700;color:var(--bleu);background:var(--bleu-pale);
border-radius:5px;padding:1px 5px;flex:none}
/* ═══════════════════════════════════════════════════════════════
DÉPLOIEMENT DES POSITIONS (v3.6)
Tout est cloisonné sous .depgrid ou préfixé, pour ne jamais
interférer avec le planning des équipes.
═══════════════════════════════════════════════════════════════ */
.depgrid{display:grid;grid-template-columns:minmax(0,1fr) 272px;gap:12px;align-items:start}
.depgrid .gwrap{overflow-x:auto}
.depgrid .dgrid{display:grid;grid-template-columns:var(--lab) var(--cols)}
.depgrid .dlab{grid-column:1;border-right:1px solid var(--ligne);padding:5px 10px;display:flex;
align-items:center;gap:7px;min-width:0}
.depgrid .dlab.head{background:var(--surface-2);font-size:10.5px;font-weight:600;text-transform:uppercase;
letter-spacing:.05em;color:var(--muet);border-bottom:1px solid var(--ligne)}
.depgrid .hc{grid-row:1;text-align:center;font-size:9.5px;font-weight:600;color:var(--muet);padding:5px 0;
border-left:1px solid #F1EBE0}
.depgrid .hc::after{content:'';display:block;height:4px;margin:2px auto 0;width:1px;background:#E3DACA}
.depgrid .hc.pleine::after{height:7px;background:var(--ligne-2);width:1.5px}
.depgrid .hc.demi::after{height:5px;background:var(--ligne)}
.depgrid .hc.pleine{border-left-color:var(--ligne-2);color:var(--encre-2)}
.depgrid .hc.demi{border-left-color:var(--ligne)}
.depgrid .hc.now{background:var(--terra-pale);color:var(--terra-h)}
.depgrid .hc.head{background:var(--surface-2);border-bottom:1px solid var(--ligne)}
/* Fréquentation */
.depgrid .flab{grid-column:1;border-right:1px solid var(--ligne);padding:6px 11px;display:flex;
flex-direction:column;justify-content:center;gap:1px}
.depgrid .flab .t{font-size:11px;font-weight:600}
.depgrid .flab .s{font-size:10px;color:var(--muet)}
.depgrid .fb{grid-row:1;border-left:1px solid var(--surface-2);height:40px;display:flex;align-items:flex-end}
.depgrid .fb.pleine{border-left-color:var(--ligne-2)}
.depgrid .fb i{display:block;width:100%;background:var(--bleu-pale);border-top:2px solid #B9C4DC}
.depgrid .fb.fort i{background:#DDE3F0;border-top-color:var(--bleu)}
.depgrid .fb.now{background:#FEF9F6}
/* Équipe du jour */
.depgrid .eqline{border-top:1px solid var(--surface-2)}
.depgrid .sallab{cursor:pointer;border-left:3px solid transparent}
.depgrid .sallab:hover{background:var(--surface-2)}
.depgrid .sallab.on{background:var(--terra-pale);border-left-color:var(--terra)}
.depgrid .sallab .av{width:22px;height:22px;border-radius:50%;color:#fff;font-size:8.5px;font-weight:700;
display:flex;align-items:center;justify-content:center;flex:none}
.depgrid .sallab .nn{font-size:11.5px;font-weight:600;line-height:1.15;display:block;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.depgrid .sallab .hh{font-size:9.5px;color:var(--muet);display:block}
.depgrid .sallab .rr{margin-left:auto;font-size:9px;font-weight:700;border-radius:5px;padding:1px 5px;flex:none}
.depgrid .sallab .rr.libre{background:var(--jaune-pale);color:var(--jaune)}
.depgrid .sallab .rr.ok{background:var(--vert-pale);color:var(--vert)}
.depgrid .eqc{grid-row:1;border-left:1px solid var(--surface-2);height:30px}
.depgrid .eqc.pleine{border-left-color:var(--ligne-2)}
.depgrid .eqc.now{background:#FEF9F6}
.depgrid .shiftbar{grid-row:1;align-self:stretch;margin:5px 1px;border-radius:7px;background:#F6E3C8;
border:1px solid #E8CFA8;display:flex;align-items:center;padding:0 8px;font-size:10.5px;font-weight:700;
color:#8A6A33;white-space:nowrap;pointer-events:none;overflow:hidden}
.depgrid .shiftbar .lb{background:rgba(255,255,255,.82);border-radius:5px;padding:1px 6px;font-size:9.5px}
.depgrid .eqseg{grid-row:1;align-self:stretch;margin:6px 1px;border-radius:5px;font-size:9px;font-weight:700;
display:flex;align-items:center;padding:0 5px;overflow:hidden;white-space:nowrap;color:var(--encre-2);z-index:2}
.depgrid .eqseg.libre{background:repeating-linear-gradient(-45deg,#E7DECD,#E7DECD 3px,#F2ECE0 3px,#F2ECE0 7px);
border:1px solid #DCD1BC;cursor:pointer}
.depgrid .eqseg.libre:hover{background:var(--terra-pale);border-color:var(--terra);color:var(--terra-h)}
.depgrid .creux{grid-row:1;align-self:stretch;margin:6px 0;background:#FDF8EE;border-left:1px dashed #E0C9A0;
border-right:1px dashed #E0C9A0;position:relative;z-index:3}
.depgrid .creux.hors{background:repeating-linear-gradient(-45deg,#F7DCDE,#F7DCDE 3px,#FDF0F1 3px,#FDF0F1 6px);
border-color:#E3A6AA}
.depgrid .creux span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:8.5px;
font-weight:700;color:#B09468;white-space:nowrap}
.depgrid .bilan{background:var(--surface-2);border-top:1px solid var(--ligne)}
.depgrid .bc{grid-row:1;border-left:1px solid var(--ligne);height:19px;display:flex;align-items:center;
justify-content:center;font-size:9px;font-weight:800}
.depgrid .bc.eq{background:#F4F8EF;color:#9DB88A}
.depgrid .bc.manque{background:var(--rouge-pale);color:var(--rouge)}
.depgrid .bc.trop{background:var(--bleu-pale);color:var(--bleu)}
.depgrid .bc.nul{background:var(--surface-2);color:var(--muet)}
/* Grille des positions */
.depgrid .zn{display:flex;align-items:center;gap:8px;padding:7px 14px;background:#F3EEE3;
border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);min-width:1040px}
.depgrid .zn b{font-family:var(--f-titre);font-weight:600;font-size:12.5px}
.depgrid .zn .n{font-size:10.5px;color:var(--muet);margin-left:auto}
.depgrid .posbloc{border-top:1px solid var(--ligne)}
.depgrid .plab2{grid-column:1;border-right:1px solid var(--ligne);padding:9px 12px 9px 0;display:flex;
flex-direction:column;justify-content:center;gap:3px;min-width:0;position:relative}
.depgrid .plab2::before{content:'';position:absolute;left:0;top:7px;bottom:7px;width:3px;
border-radius:0 3px 3px 0;background:var(--cpos)}
.depgrid .plab2 .ttl{display:flex;align-items:center;gap:7px;padding-left:12px;min-width:0}
.depgrid .plab2 .nm2{font-family:var(--f-titre);font-weight:600;font-size:13.5px;line-height:1.15;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.depgrid .plab2 .cnt{font-size:10px;font-weight:700;color:var(--muet);background:var(--surface-2);
border:1px solid var(--ligne);border-radius:20px;padding:1px 7px;flex:none}
.depgrid .plab2 .hrs{font-size:10.5px;color:var(--muet);padding-left:12px;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
.depgrid .plab2 .tags{display:flex;gap:4px;flex-wrap:wrap;padding-left:12px}
.depgrid .plab2 .tags span{font-size:9px;font-weight:700;border-radius:4px;padding:1px 5px}
.depgrid .plab2 .tags .etq{background:var(--bleu-pale);color:var(--bleu)}
.depgrid .plab2 .tags .hab{background:#F3EDF4;color:#8A5E86}
.depgrid .plab2 .tags .mq{background:var(--rouge-pale);color:var(--rouge)}
.depgrid .cel{border-left:1px solid #F5F0E7;border-top:1px solid var(--surface-2);min-height:38px}
.depgrid .cel[data-voie="0"]{border-top:none}
.depgrid .cel.pleine{border-left-color:var(--ligne-2)}
.depgrid .cel.demi{border-left-color:var(--ligne)}
.depgrid .cel.now{background:#FEF9F6}
.depgrid .cel.ferme{background:repeating-linear-gradient(-45deg,#F2EEE5,#F2EEE5 3px,#F7F4ED 3px,#F7F4ED 7px)}
.depgrid .cel.facult{background:#FCFAF6}
.depgrid .cel.libre{cursor:cell}
.depgrid .cel.libre:hover{box-shadow:inset 0 0 0 1px var(--ligne-2)}
.depgrid.masque .cel,.depgrid.masque .blk,.depgrid.masque .vide{opacity:.3}
.depgrid #grillePos.masque .cel.possible{opacity:1;background:#FBFDF8;box-shadow:inset 0 0 0 1px #DDEBD0;cursor:cell}
.depgrid #grillePos.masque .cel.possible:hover{box-shadow:inset 0 0 0 1.5px var(--vert);background:var(--vert-pale)}
.depgrid .vide{grid-row:1;align-self:stretch;margin:5px 2px;border-radius:8px;z-index:1;pointer-events:none;
background:rgba(196,60,67,.07);border:1.5px dashed rgba(196,60,67,.42);display:flex;align-items:center;
justify-content:center;font-size:10.5px;font-weight:700;color:#B8555B;overflow:hidden;white-space:nowrap;padding:0 6px}
.depgrid .vide.gros{background:rgba(196,60,67,.14);border-color:rgba(196,60,67,.6);color:#9E3F45}
.depgrid .vide.court{font-size:0}
.depgrid .blk{align-self:stretch;margin:4px 2px;border-radius:7px;padding:0 7px;font-size:11.5px;
font-weight:600;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;z-index:2;
border-left:3px solid;cursor:grab;position:relative;min-width:0}
.depgrid .blk .av{width:19px;height:19px;border-radius:50%;color:#fff;font-size:8px;font-weight:700;
display:flex;align-items:center;justify-content:center;flex:none}
.depgrid .blk .hd{position:absolute;top:0;bottom:0;width:9px;cursor:ew-resize;opacity:0;z-index:3}
.depgrid .blk:hover .hd{opacity:1;background:rgba(62,43,26,.16)}
.depgrid .blk .hd.g{left:0;border-radius:7px 0 0 7px}
.depgrid .blk .hd.d{right:0;border-radius:0 7px 7px 0}
.depgrid .blk .hd::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:2px;height:12px;border-radius:2px;background:rgba(255,255,255,.85)}
.depgrid .blk.alerte{outline:1.5px solid var(--rouge);outline-offset:-1px}
.depgrid .blk.alerte::after{content:'!';margin-left:auto;color:var(--rouge);font-weight:800}
.depgrid .blk.rot{box-shadow:inset 0 0 0 1.5px #C58A2E}
.depgrid .blk.rot::before{content:'⟳';color:#A97614;font-weight:800;font-size:12px}
.depgrid .blk.renfort{border-left-style:dashed}
.depgrid .blk.encours{z-index:5;box-shadow:0 4px 14px -4px rgba(62,43,26,.35);opacity:.92}
.depgrid .blk.fantome{opacity:.3}
/* Conseil et légendes */
.depgrid .conseil{padding:8px 16px;font-size:12px;color:var(--encre-2);background:var(--surface-2);
border-bottom:1px solid var(--ligne)}
.depgrid .lg{display:flex;gap:11px;font-size:10.5px;color:var(--muet);flex-wrap:wrap}
.depgrid .lg span{display:flex;align-items:center;gap:5px}
.depgrid .lg i{width:11px;height:11px;border-radius:3px;display:block}
.depgrid .lg i.lgvide{background:rgba(196,60,67,.07);border:1.5px dashed rgba(196,60,67,.42)}
.depgrid .lg i.lgvide2{background:rgba(196,60,67,.16)}
.depgrid .lg i.lgfac{background:#FCFAF6;border:1px solid var(--ligne)}
.depgrid .lg i.lgferme{background:repeating-linear-gradient(-45deg,#F2EEE5,#F2EEE5 2px,#F7F4ED 2px,#F7F4ED 5px)}
.depgrid .lg i.lgshift{background:#F6E3C8;border:1px solid #E8CFA8}
.depgrid .lg i.lgpause{background:#FDF8EE;border:1px dashed #E0C9A0}
.depgrid .lg i.lglibre{background:repeating-linear-gradient(-45deg,#E7DECD,#E7DECD 2px,#F2ECE0 2px,#F2ECE0 5px)}
/* Panneau */
.depgrid .msg{padding:10px 13px;font-size:12px;line-height:1.5;border-bottom:1px solid var(--surface-2)}
.depgrid .msg:last-child{border-bottom:none}
.depgrid .msg.ko{background:var(--rouge-pale);color:#8E2A30}
.depgrid .msg.wa{background:var(--jaune-pale);color:#7A5510}
.depgrid .eqrow{display:flex;align-items:center;gap:8px;padding:7px 13px;
border-bottom:1px solid var(--surface-2);font-size:12px}
.depgrid .eqrow .av{width:22px;height:22px;border-radius:50%;color:#fff;font-size:8px;font-weight:700;
display:flex;align-items:center;justify-content:center;flex:none}
.depgrid .eqrow .n{flex:1;font-weight:600;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.depgrid .mini{display:flex;gap:2px;flex:none}
.depgrid .mini i{width:14px;height:14px;border-radius:3px;display:block}
.depgrid .eqrow .pv{font-size:9.5px;font-weight:700;border-radius:5px;padding:1px 5px;flex:none}
.depgrid .eqrow .pv.faible{background:var(--rouge-pale);color:var(--rouge)}
.depgrid .eqrow .pv.ok{background:var(--vert-pale);color:var(--vert)}
.depgrid .aide{padding:10px 13px;font-size:11.5px;color:var(--muet);line-height:1.55;border-top:1px solid var(--ligne)}
.kbd{display:inline-block;border:1px solid var(--ligne-2);border-bottom-width:2px;border-radius:5px;
padding:0 5px;font-size:10.5px;font-weight:700;background:var(--surface-2)}
/* Barre de modèle */
.modbar{display:flex;align-items:center;gap:10px;background:var(--carte);border:1px solid var(--ligne);
border-left:4px solid var(--terra);border-radius:var(--r);padding:10px 14px;margin-bottom:12px;flex-wrap:wrap}
.modbar .lbl{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muet)}
.modpick{display:flex;gap:5px;flex-wrap:wrap}
.modpick button{border:1px solid var(--ligne-2);background:#fff;border-radius:9px;padding:6px 12px;
font-size:12.5px;font-weight:600;color:var(--encre-2);text-align:left;line-height:1.25;font-family:var(--f-ui)}
.modpick button i{display:block;font-style:normal;font-size:10px;font-weight:500;color:var(--muet)}
.modpick button:hover{border-color:var(--muet)}
.modpick button.on{background:var(--terra-pale);border-color:var(--terra);color:var(--terra-h)}
.modpick button.on i{color:var(--terra-h);opacity:.8}
.modbar .droite{margin-left:auto;display:flex;gap:8px;align-items:center}
/* Fenêtre contextuelle */
.pop{position:fixed;z-index:200;background:#fff;border:1px solid var(--ligne);border-radius:12px;
box-shadow:var(--ombre-2);padding:8px;display:none;min-width:230px;max-height:60vh;overflow:auto}
.pop.on{display:block}
.pop .pt{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muet);padding:5px 8px}
.pop button{display:flex;align-items:center;gap:9px;width:100%;border:none;background:none;border-radius:8px;
padding:7px 9px;font-size:12.5px;font-weight:600;text-align:left;font-family:var(--f-ui)}
.pop button:hover{background:var(--surface-2)}
.pop button .x{margin-left:auto;font-size:10px;color:var(--muet);font-weight:500}
.pop button.no{opacity:.45}
/* ═══ Tiroir de configuration des positions ═══ */
.dwr{position:fixed;inset:0;z-index:180;pointer-events:none}
.dwr .dveil{position:absolute;inset:0;background:rgba(43,32,24,.36);opacity:0;transition:.18s}
/* (La largeur est déclarée une seule fois, plus haut — v11.73.) */
.dwr .panel{position:absolute;right:0;top:0;bottom:0;background:var(--carte);
box-shadow:var(--ombre-2);display:flex;flex-direction:column;transform:translateX(100%);transition:.2s ease}
.dwr.open{pointer-events:auto}
.dwr.open .dveil{opacity:1}
.dwr.open .panel{transform:none}
.dwr .ph{padding:15px 20px;border-bottom:1px solid var(--ligne);display:flex;align-items:center;gap:12px}
.dwr .ph h2{font-family:var(--f-titre);font-weight:600;font-size:17px;line-height:1.2}
.dwr .ph .de{font-size:11.5px;color:var(--muet);margin-top:2px}
.dwr .pb{overflow-y:auto;flex:1}
.dwr .pf{padding:12px 20px;border-top:1px solid var(--ligne);display:flex;gap:9px;align-items:center;
background:var(--surface-2)}
/* Un tiroir dont le contenu EST un formulaire : sans cette règle, le
formulaire ne s'étire pas, .pb ne défile pas et le pied se retrouve
au milieu du panneau (v11.14). */
.dwr .panel > form{display:flex;flex-direction:column;flex:1;min-height:0}
.dwr .blk{padding:16px 20px;border-bottom:1px solid var(--surface-2)}
.dwr .blk .bt{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:var(--muet);margin-bottom:11px}
/* Cartes de modèle dans le tiroir */
.modcard{border:1px solid var(--ligne);border-radius:11px;margin-bottom:10px;overflow:hidden;background:#fff}
.modcard.def{border-color:#E2D7BE;background:#FDFBF6}
.modcard .mh2{display:flex;align-items:center;gap:9px;padding:10px 13px;background:var(--surface-2);
border-bottom:1px solid var(--ligne);flex-wrap:wrap}
.modcard .mh2 b{font-size:13px;font-family:var(--f-titre);font-weight:600}
.modcard .mb2{padding:11px 13px;display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.modcard .eff{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muet)}
.modcard .eff input{width:60px;text-align:right}
.plg{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);border:1px solid var(--ligne);
border-radius:9px;padding:4px 8px;font-size:12px;font-weight:600}
.plg input[type=time]{width:88px;padding:4px 6px;font-size:12px;border-radius:7px;border:1px solid var(--ligne-2)}
.plg .x{border:none;background:none;color:var(--muet);cursor:pointer;font-size:12px;padding:0 2px}
.plg .x:hover{color:var(--rouge)}
.addplg{border:1px dashed var(--ligne-2);background:none;border-radius:9px;padding:6px 12px;
font-size:12px;font-weight:600;color:var(--muet);cursor:pointer;font-family:var(--f-ui)}
.addplg:hover{border-color:var(--terra);color:var(--terra-h);border-style:solid}
.palzone{border-top:1px dashed var(--ligne);padding:11px 13px;background:#FDFCF9}
.palzone .palt{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
color:var(--muet);margin-bottom:8px}
.pal{display:flex;align-items:center;gap:7px;font-size:12px;margin-bottom:7px;flex-wrap:wrap}
.pal .des{color:var(--muet)}
.pal input[type=number]{width:82px;text-align:right;border:1px solid var(--ligne-2);border-radius:8px;
padding:5px 8px;font-size:12px;font-family:var(--f-ui)}
.pal .x{border:none;background:none;color:var(--muet);cursor:pointer;font-size:12px;padding:0 3px}
.pal .x:hover{color:var(--rouge)}
.lienpal{border:none;background:none;font-size:11.5px;font-weight:600;color:var(--terra-h);
cursor:pointer;padding:0;font-family:var(--f-ui)}
/* Chips d'étiquettes */
/* La seconde définition de .chip est retirée (v14.7.1) : elle vivait
ici, huit cents lignes après la première, et l'emportait par sa
spécificité. Une seule règle, tout en haut. */
/* Palette de couleurs */
.abspal{display:flex;gap:8px;flex-wrap:wrap;padding:2px 0}
.abspick{cursor:pointer;position:relative}
.abspick input{position:absolute;opacity:0}
.abspick i{display:block;width:36px;height:27px;border-radius:9px;border:1.5px solid}
.abspick input:checked+i{outline:2px solid var(--encre);outline-offset:2px}
/* Interrupteur */
/* Une SEULE définition de l'interrupteur : il y en avait deux, de
tailles différentes (40×23 et 38×22, curseur 18 et 17 px). La
seconde écrasait la première, mais pas toutes ses propriétés —
d'où un rond blanc désaligné. Voir la définition unique plus
haut dans ce fichier. */
.sw .swl{font-size:12.5px;font-weight:600}
/* ═══ Matrice positions × modèles (paramétrage) ═══ */
.mx{width:100%;border-collapse:separate;border-spacing:0}
.mx th{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muet);
text-align:left;padding:10px 14px;background:var(--surface-2);border-bottom:1px solid var(--ligne)}
.mx th.mod{text-align:center;border-left:1px solid var(--ligne);min-width:150px}
.mx th.mod b{display:block;font-size:12.5px;text-transform:none;letter-spacing:0;color:var(--encre);
font-family:var(--f-titre);font-weight:600}
.mx th.mod .ch2{display:block;font-size:9.5px;font-weight:500;text-transform:none;letter-spacing:0;
color:var(--muet);margin-top:2px}
.mx th.mod.def b::after{content:' · défaut';font-size:9px;color:var(--muet);font-weight:500}
.mx td{padding:0;border-bottom:1px solid var(--surface-2);vertical-align:middle}
.mx tr:last-child td{border-bottom:none}
.mx td.pn{padding:11px 14px;position:relative}
.mx td.pn::before{content:'';position:absolute;left:0;top:9px;bottom:9px;width:3px;
border-radius:0 3px 3px 0;background:var(--cpos)}
.mx td.pn .n{font-family:var(--f-titre);font-weight:600;font-size:13.5px;padding-left:11px}
.mx td.pn .t{display:flex;gap:4px;flex-wrap:wrap;padding-left:11px;margin-top:4px}
.mx td.pn .t span{font-size:9px;font-weight:700;border-radius:4px;padding:1px 5px}
.mx td.pn .t .etq{background:var(--bleu-pale);color:var(--bleu)}
.mx td.pn .t .hab{background:#F3EDF4;color:#8A5E86}
.mx td.pn .t .pl,.mx td.pn .t .eq{background:var(--surface-2);color:var(--muet);border:1px solid var(--ligne)}
.mx td.cl{border-left:1px solid var(--ligne);padding:6px}
.cellmod{width:100%;border:1px solid var(--ligne);background:#fff;border-radius:9px;padding:8px 10px;
text-align:left;font-family:var(--f-ui);cursor:pointer;display:block}
.cellmod:hover{border-color:var(--terra);background:var(--terra-pale)}
.cellmod .hh{font-size:11.5px;font-weight:600;line-height:1.35;display:block}
.cellmod .ee{font-size:10.5px;color:var(--muet);margin-top:2px;display:block}
.cellmod.ferme{background:repeating-linear-gradient(-45deg,#F4F1EA,#F4F1EA 4px,#FBF9F4 4px,#FBF9F4 8px);
border-style:dashed}
.cellmod.ferme .hh{font-weight:500;color:var(--muet)}
.mx .rt{text-align:right}
/* Ajustements du tiroir de cellule : mêmes respirations que le reste */
.dwr #cl_plages{display:flex;flex-wrap:wrap;gap:7px}
.dwr #cl_pal{margin-bottom:4px}
.dwr .blk .fhelp{margin-top:8px}
.mx td.cl:last-of-type{border-right:1px solid var(--ligne)}
.mx thead th:last-child{border-left:1px solid var(--ligne)}
/* Bande des indicateurs de charge */
.depgrid .indline{border-top:1px solid var(--surface-2)}
.depgrid .indline:first-child{border-top:none}
.depgrid .flab{position:relative;padding-left:14px}
.depgrid .flab::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;
border-radius:0 3px 3px 0;background:var(--ci,var(--bleu))}
.depgrid .indline .fb{height:34px}
/* ═══ Saisie des indicateurs de charge ═══ */
.sgrid{overflow-x:auto}
.sg{min-width:900px}
.srow{display:grid;grid-template-columns:230px var(--hcols);border-top:1px solid var(--surface-2)}
.srow.head{border-top:none;background:var(--surface-2);border-bottom:1px solid var(--ligne)}
.srow .slab{grid-column:1;padding:9px 13px;border-right:1px solid var(--ligne);display:flex;
flex-direction:column;justify-content:center;gap:3px;min-width:0;position:relative}
.srow .slab::before{content:'';position:absolute;left:0;top:9px;bottom:9px;width:3px;
border-radius:0 3px 3px 0;background:var(--ci)}
.srow .slab .n{font-size:12.5px;font-weight:600;padding-left:11px}
.srow .slab .z{font-size:10px;color:var(--muet);padding-left:11px;display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.srow.head .slab{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muet)}
.srow.head .slab::before{display:none}
.srow .hcell{grid-row:1;text-align:center;font-size:10.5px;font-weight:700;color:var(--encre-2);
padding:9px 0;border-left:1px solid var(--ligne)}
.srow .scell{border-left:1px solid var(--surface-2);padding:5px 4px;display:flex;flex-direction:column;gap:3px}
.srow .scell input{width:100%;border:1px solid var(--ligne-2);border-radius:7px;padding:4px 6px;
font-size:12px;text-align:right;font-family:var(--f-ui);background:#fff;font-variant-numeric:tabular-nums}
.srow .scell input.reel{background:var(--vert-pale);border-color:#CBDCBB;font-weight:700}
.srow .scell .prop{font-size:9px;color:var(--muet);text-align:right;padding-right:3px;line-height:1.2}
.srow .scell .prop b{color:var(--violet);font-weight:700}
.srow .scell.now{background:#FEF9F6}
.szone{padding:7px 14px;background:#F3EEE3;border-top:1px solid var(--ligne);
border-bottom:1px solid var(--ligne);font-family:var(--f-titre);font-weight:600;font-size:12.5px}
.unite{font-size:10px;font-weight:700;color:var(--muet);background:var(--surface-2);
border:1px solid var(--ligne);border-radius:5px;padding:1px 6px}
.src{font-size:9.5px;font-weight:700;border-radius:5px;padding:1px 6px}
.src.saisi{background:var(--bleu-pale);color:var(--bleu)}
.src.mesure{background:var(--vert-pale);color:var(--vert)}
.src.histo{background:var(--violet-pale);color:var(--violet)}
.leg{display:flex;gap:13px;font-size:11px;color:var(--muet);flex-wrap:wrap}
.leg span{display:flex;align-items:center;gap:5px}
.leg i{width:11px;height:11px;border-radius:3px;display:block}
.leg i.lgprev{background:#fff;border:1px solid var(--ligne-2)}
.leg i.lgreel{background:var(--vert-pale);border:1px solid #CBDCBB}
.leg i.lghisto{background:var(--violet-pale)}
.ind{display:inline-flex;align-items:center;gap:7px;font-weight:600}
.ind i{width:10px;height:10px;border-radius:3px;flex:none}
/* ═══════════════════════════════════════════════════════════════
PLANNING : MÉTÉO, ÉVÉNEMENTS, BORNES DE CONTRAT (v3.9)
═══════════════════════════════════════════════════════════════ */
/* Animations longues et douces : un mouvement rapide devient
pénible sur un écran regardé toute la journée. */
@keyframes m-flotte{0%,100%{transform:translateX(0)}50%{transform:translateX(2.5px)}}
@keyframes m-tombe{0%{opacity:0;transform:translateY(-3px)}30%{opacity:1}100%{opacity:0;transform:translateY(6px)}}
@keyframes m-tourne{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes m-pulse{0%,100%{opacity:.85}50%{opacity:1}}
.msvg .m-nuage{animation:m-flotte 4s ease-in-out infinite}
.msvg .m-goutte{animation:m-tombe 1.4s linear infinite}
.msvg .m-goutte:nth-of-type(2){animation-delay:.45s}
.msvg .m-goutte:nth-of-type(3){animation-delay:.9s}
.msvg .m-rayons{animation:m-tourne 26s linear infinite;transform-origin:center}
.msvg .m-pulse{animation:m-pulse 3.5s ease-in-out infinite}
.msvg .m-eclair{animation:m-pulse 1.1s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.msvg *{animation:none!important}}
/* Bandeau météo dans l'en-tête de jour */
.pl2 .dd .meteo{display:flex;flex-direction:column;align-items:center;gap:1px;flex:none;
padding:3px 6px;border:1px solid transparent;border-radius:9px;background:none;cursor:pointer;
font-family:var(--f-ui)}
.pl2 .dd .meteo:hover{background:var(--bleu-pale);border-color:#D3DBEB}
.pl2 .dd .meteo .mi{display:flex}
.pl2 .dd .meteo .mv{font-size:11px;font-weight:700;color:var(--encre);display:flex;align-items:baseline;gap:3px}
.pl2 .dd .meteo .mv i{font-style:normal;font-size:9.5px;font-weight:600;color:var(--muet)}
.pl2 .dd .meteo .mp{font-size:9px;font-weight:700;color:var(--bleu)}
/* Événements */
.pl2 .dd .evts{display:flex;flex-direction:column;gap:3px;flex:none}
.pl2 .dd .evt{width:19px;height:19px;border-radius:6px;display:flex;align-items:center;justify-content:center}
.pl2 .dd .evt svg{width:12px;height:12px}
.pl2 .dd .evt.anniv{background:var(--violet-pale);color:var(--violet)}
.pl2 .dd .evt.ferie{background:var(--rouge-pale);color:var(--rouge)}
.pl2 .dd .ferielbl{font-size:9.5px;font-weight:700;color:var(--rouge);background:var(--rouge-pale);
padding:2px 9px;border-top:1px solid #F2D8DA;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Hors période de contrat */
.pl2 .pcell.horsc{background:repeating-linear-gradient(-45deg,#F4F1EA,#F4F1EA 4px,#FAF8F2 4px,#FAF8F2 8px)}
.pl2 .pcell.horsc .sh{opacity:.5}
.pl2 .pcell.cdeb{box-shadow:inset 3px 0 0 var(--vert)}
.pl2 .pcell.cfin{box-shadow:inset -3px 0 0 var(--jaune)}
/* ── LA BORNE DE CONTRAT : UNE PASTILLE, PAS UN VOILE ── (v13.6)
Elle était posée en « inset:0 », centrée : elle occupait la case
ENTIÈRE, par-dessus tout ce qu'elle contenait. Sur une case vide,
c'était juste ; sur une case qui porte un shift, « 09h00–17h00 »
passait sous l'icône et « pause 30 mn » sous le mot.
Elle devient une pastille de coin, sur le fond de la carte — et la
case lui réserve sa bande (« padding-top » plus bas), sinon on
aurait déplacé le recouvrement d'un centimètre au lieu de le
supprimer. Le libellé raccourcit parce qu'une pastille n'a pas la
largeur d'une case. */
.pl2{--borne-h:19px}
.pl2 .pcell .borne{position:absolute;inset:auto 4px auto auto;top:3px;height:var(--borne-h);
display:flex;align-items:center;gap:3px;font-size:9px;font-weight:700;
letter-spacing:.02em;color:var(--muet);background:var(--carte);
border:1px solid currentColor;border-radius:20px;padding:0 7px 0 5px;
pointer-events:none;z-index:1;line-height:1;white-space:nowrap;box-sizing:border-box}
.pl2 .pcell .borne svg{width:10px;height:10px;stroke-width:1.7;flex:none}
/* La case lui réserve SA bande. Les deux nombres vont ensemble — une
pastille plus haute que le retrait se reposerait sur le shift,
c'est-à-dire exactement le défaut qu'on répare ; d'où la variable
plutôt que deux valeurs à tenir d'accord à la main. */
.pl2 .pcell.cdeb,.pl2 .pcell.cfin{padding-top:calc(var(--borne-h) + 6px)}
.pl2 .pcell .borne.deb{color:var(--vert)}
.pl2 .pcell .borne.fin{color:var(--jaune)}
.pl2 .pcell.cdeb{box-shadow:inset 0 3px 0 var(--vert)}
.pl2 .pcell.cfin{box-shadow:inset 0 -3px 0 var(--jaune)}
/* ═══ Modale de détail météo ═══ */
.mmodal{position:fixed;inset:0;z-index:210;display:none;align-items:center;justify-content:center;padding:20px}
.mmodal.on{display:flex}
.mmveil{position:absolute;inset:0;background:rgba(43,32,24,.42)}
.mmbox{position:relative;background:var(--carte);border-radius:16px;box-shadow:var(--ombre-2);
width:min(880px,96vw);max-height:92vh;overflow:auto}
.mmtop{display:flex;align-items:flex-start;gap:16px;padding:20px 22px;
background:linear-gradient(135deg,var(--bleu-pale),var(--fond));border-bottom:1px solid var(--ligne)}
.mmico{flex:none;display:flex}
.mminfo{flex:1;min-width:0}
.mmj{font-size:12px;font-weight:600;color:var(--muet);text-transform:capitalize}
.mminfo h2{font-family:var(--f-titre);font-weight:600;font-size:23px;line-height:1.15;margin:2px 0 5px}
.mmtemp{font-size:15px;font-weight:600;display:flex;align-items:baseline;gap:5px;
flex-wrap:wrap;justify-content:flex-start}
.mmtemp .moy{margin-left:9px}
.mmtemp .mx{color:var(--terra-h)}
.mmtemp .mn{color:var(--bleu)}
.mmtemp .sep{color:var(--muet);font-weight:400}
.mmtemp .moy{font-size:12px;color:var(--muet);font-weight:500}
.mmlieu{font-size:11.5px;color:var(--muet);margin-top:4px}
.mmclose{width:34px;height:34px;border-radius:10px;border:1px solid var(--ligne);background:#fff;
color:var(--muet);font-size:16px;flex:none;cursor:pointer;font-family:var(--f-ui)}
.mmclose:hover{background:var(--surface-2);color:var(--encre)}
.mmstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-bottom:1px solid var(--ligne)}
.mmstat{padding:13px 16px;border-right:1px solid var(--surface-2)}
.mmstat:last-child{border-right:none}
.mmstat .l{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muet)}
.mmstat .v{font-size:19px;font-weight:600;font-family:var(--f-titre);margin-top:3px;
display:flex;align-items:center;gap:5px}
.mmstat .v small{font-size:11.5px;font-weight:500;color:var(--muet)}
.mmstat .s{font-size:10.5px;color:var(--muet);margin-top:3px}
.mmstat .s.alerte{color:var(--rouge);font-weight:600}
.mmheures{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(54px,1fr);overflow-x:auto;
border-bottom:1px solid var(--ligne)}
.mmh{padding:11px 4px 10px;text-align:center;border-right:1px solid var(--surface-2)}
.mmh:last-child{border-right:none}
.mmh .hh{font-size:10.5px;font-weight:700;color:var(--muet)}
.mmh svg{margin:5px auto 3px;display:block}
.mmh .tt{font-size:12.5px;font-weight:700}
.mmh .pp{font-size:9.5px;color:var(--bleu);font-weight:700;min-height:12px}
.mmh .pbar{height:3px;border-radius:2px;background:var(--bleu);margin:3px auto 0;opacity:.75}
.mmh .vv{font-size:9px;color:var(--muet);margin-top:3px}
.mmfoot{padding:12px 18px;font-size:11.5px;color:var(--muet);line-height:1.55;background:var(--surface-2)}
/* Anniversaire du jour, écrit en toutes lettres sous les notes */
.dd .danniv{display:flex;align-items:center;justify-content:center;gap:5px;width:100%;
padding:4px 8px;border-top:1px solid var(--surface-2);background:var(--violet-pale);
color:var(--violet);font-size:10px;font-weight:600;line-height:1.3;text-align:center}
.dd .danniv svg{width:12px;height:12px;flex:none}
.dd .danniv span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ═══ Parcours à étapes : dupliquer et publier ═══ */
.mmbox.etp{width:min(680px,96vw);display:flex;flex-direction:column}
.mmbox.etp .eh{padding:18px 22px 14px;border-bottom:1px solid var(--ligne);position:relative}
.mmbox.etp .eh h2{font-family:var(--f-titre);font-weight:600;font-size:20px}
.mmbox.etp .eh .sub{font-size:12px;color:var(--muet);margin-top:2px}
.mmbox.etp .eh .mmclose{position:absolute;top:16px;right:18px}
/* ── LE FIL D'ÉTAPES ── (v11.16)
Il était écrit ici, à l'intérieur de « .mmbox.etp » : la modale
à étapes savait l'afficher, aucun autre écran ne le pouvait. On
le sort tel quel — même dessin, mêmes classes — pour qu'un
tiroir s'en serve aussi. La modale garde seulement ses marges. */
.ebar{padding:13px 18px 12px;border-bottom:1px solid var(--ligne);background:var(--surface-2)}
.el{font-size:11.5px;font-weight:600;color:var(--encre-2);margin-bottom:7px}
.el b{color:var(--terra-h)}
.eb3{display:flex;gap:6px}
.eb3 i{flex:1;height:3px;border-radius:2px;background:var(--ligne);display:block}
.eb3 i.on{background:var(--terra)}
.mmbox.etp .ebar{padding:14px 22px 0;border-bottom:0;background:none}
.mmbox.etp .emb{padding:18px 22px;overflow-y:auto;flex:1}
.mmbox.etp .ef{padding:14px 22px;border-top:1px solid var(--ligne);display:flex;gap:9px;
align-items:center;background:var(--surface-2)}
.einfo{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;border-radius:11px;
background:var(--bleu-pale);border:1px solid #D3DBEB;font-size:12.5px;line-height:1.5;
color:#3F4E75;margin-bottom:14px}
.einfo.legal{background:var(--violet-pale);border-color:#DCC9DA;color:#6B4768}
.einfo svg{width:17px;height:17px;flex:none;margin-top:1px}
.eopt{display:flex;align-items:flex-start;gap:11px;padding:13px 15px;border:1px solid var(--ligne);
border-radius:11px;margin-bottom:9px;cursor:pointer;background:#fff}
.eopt:hover{border-color:var(--muet)}
.eopt:has(input:checked){border-color:var(--terra);background:var(--terra-pale)}
.eopt input{margin-top:2px;flex:none;accent-color:var(--terra);width:16px;height:16px}
.eopt .t{font-size:13.5px;font-weight:600;display:block}
.eopt .d{font-size:12px;color:var(--muet);margin-top:2px;line-height:1.5;display:block}
.esem{display:flex;align-items:center;gap:11px;padding:11px 14px;border:1px solid var(--ligne);
border-radius:10px;margin-bottom:7px;cursor:pointer;background:#fff}
.esem:hover{border-color:var(--muet)}
.esem:has(input:checked){border-color:var(--terra);background:var(--terra-pale)}
.esem.vide{opacity:.55;cursor:default}
.esem input{accent-color:var(--terra);width:16px;height:16px;flex:none}
.esem .lbl{font-size:13px;font-weight:600;display:flex;align-items:center;gap:7px}
.esem .n{font-size:11.5px;color:var(--muet);margin-left:auto}
.esem .warn{font-size:11.5px;font-weight:600;color:var(--jaune);margin-left:auto}
.esem .tagpub{font-size:9.5px;font-weight:700;background:var(--vert-pale);color:var(--vert);
border-radius:5px;padding:1px 6px}
.lientout{border:none;background:none;font-size:12px;font-weight:600;color:var(--terra-h);
cursor:pointer;padding:0;margin-bottom:10px;font-family:var(--f-ui)}
.erecap{background:var(--surface-2);border:1px solid var(--ligne);border-radius:11px;
padding:13px 15px;font-size:12.5px;line-height:1.6;margin-top:12px}
.ehline{display:flex;align-items:center;gap:11px;padding:13px 15px;border:1px solid var(--ligne);
border-radius:11px;background:#fff;margin-bottom:10px;cursor:pointer}
.ehline .fhelp{margin-left:auto}
.mmbox.etp textarea.fi{width:100%;min-height:80px;resize:vertical;line-height:1.5;
border:1px solid var(--ligne-2);border-radius:11px;padding:11px 13px;font-size:13px;
font-family:var(--f-ui);background:#fff}
/* Choix du type d'absence et demi-journées */
.abstypes{display:flex;flex-wrap:wrap;gap:6px}
.abstype{cursor:pointer;position:relative}
.abstype input{position:absolute;opacity:0}
.abstype span{display:inline-flex;align-items:center;border:1px solid var(--ligne-2);border-radius:20px;
padding:5px 12px;font-size:12px;font-weight:600;color:var(--encre-2);background:#fff}
.abstype input:checked+span{background:var(--bg);border-color:var(--bd);color:var(--bd)}
.demi{display:flex;gap:5px;margin-top:6px}
.demi label{cursor:pointer;position:relative;flex:1}
.demi input{position:absolute;opacity:0}
.demi span{display:block;text-align:center;border:1px solid var(--ligne-2);border-radius:8px;
padding:5px 4px;font-size:11.5px;font-weight:600;color:var(--muet);background:#fff}
.demi input:checked+span{background:var(--terra-pale);border-color:var(--terra);color:var(--terra-h)}
.mmbox.etp .fg{margin-bottom:13px}
.mmbox.etp .fl{display:block;font-size:12px;font-weight:600;color:var(--encre-2);margin-bottom:5px}
.mmbox.etp .fi{width:100%;border:1px solid var(--ligne-2);border-radius:9px;padding:8px 11px;
font-size:13px;font-family:var(--f-ui);background:#fff}
.mmbox.etp .f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* Météo dans les vues Jour et Frise */
.jmeteo{display:inline-flex;align-items:center;gap:9px;padding:5px 11px;border:1px solid var(--ligne);
border-radius:11px;background:#fff}
.jmeteo>span{display:flex;flex-direction:column;line-height:1.2}
.jmeteo b{font-size:14px;font-weight:700;font-family:var(--f-titre)}
.jmeteo i{font-style:normal;font-size:11px;color:var(--muet);font-weight:600;margin-left:4px}
.jmeteo em{font-style:normal;font-size:10.5px;color:var(--muet)}
.jmeteo .mp{font-size:10.5px;font-weight:700;color:var(--bleu);background:var(--bleu-pale);
border-radius:6px;padding:2px 7px}
.jmeteo .mr{font-size:10.5px;font-weight:700;color:var(--rouge);background:var(--rouge-pale);
border-radius:6px;padding:2px 7px}
.frl .frmeteo{display:inline-flex;vertical-align:-4px;margin-right:5px}
/* Bascule shift / absence dans le tiroir */
/* Le bascule Shift/Absence touchait le récapitulatif au-dessus et le
bloc « Qui » en dessous : trois zones distinctes se lisaient comme
un seul pavé. On les sépare (v7.80). */
.dwseg{display:flex;gap:3px;margin:12px 20px 16px;background:var(--surface-2);border:1px solid var(--ligne);
border-radius:11px;padding:3px}
.dwseg button{flex:1;border:none;background:transparent;border-radius:9px;padding:8px 12px;
font-size:12.5px;font-weight:600;color:var(--muet);font-family:var(--f-ui)}
.dwseg button.on{background:#fff;color:var(--encre);box-shadow:var(--ombre)}
.dwhelp{font-size:11.5px;color:var(--muet);line-height:1.55;margin-top:10px}
#f-abs{gap:0}
#f-abs .fl2{margin-top:14px}
#f-abs .fl2:first-of-type{margin-top:0}
/* Barres modifiables dans les vues Jour et Frise */
.frbar.cliq{cursor:pointer}
.frbar.cliq:hover{filter:brightness(.96);box-shadow:0 2px 8px -3px rgba(62,43,26,.35)}
.frtrack{cursor:cell}
/* ═══ Tiroir aéré : blocs séparés, listes déroulantes ═══ */
.dwform{gap:0}
.dwbloc{padding:15px 20px;border-bottom:1px solid var(--surface-2)}
.dwbloc .fl2{display:block;font-size:12px;font-weight:600;color:var(--encre-2);margin-bottom:7px}
.dwbloc .fi{width:100%}
.dwbloc select.fi{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398876F' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 11px center;background-size:15px;padding-right:34px}
.perline{display:flex;align-items:center;gap:9px;margin-bottom:9px;flex-wrap:wrap}
.perline:last-child{margin-bottom:0}
.perline .pl{font-size:12px;font-weight:600;color:var(--muet);width:24px;flex:none}
.perline .fi{width:150px;flex:none}
.perline .demi{display:flex;gap:4px;margin-top:0;flex:1;min-width:150px}
/* Conflit avec des shifts existants */
.dwbloc.conflit{background:var(--jaune-pale);border-bottom-color:#EBDCB4}
.dwbloc.conflit .cfh{display:flex;align-items:center;gap:8px;font-size:13px;color:#7A5510;margin-bottom:9px}
.dwbloc.conflit .cfh svg{width:16px;height:16px;flex:none}
.dwbloc.conflit .cfl{display:flex;flex-wrap:wrap;gap:5px}
.dwbloc.conflit .cfp{font-size:10.5px;font-weight:600;background:#fff;border:1px solid #EBDCB4;
border-radius:20px;padding:3px 9px;color:#7A5510}
.copt{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid #EBDCB4;
border-radius:10px;background:#fff;margin-bottom:7px;cursor:pointer}
.copt:last-child{margin-bottom:0}
.copt input{margin-top:2px;flex:none;accent-color:var(--jaune);width:15px;height:15px}
.copt b{font-size:12.5px;font-weight:600;display:block}
.copt i{font-style:normal;font-size:11.5px;color:var(--muet);display:block;margin-top:2px;line-height:1.5}
.copt:has(input:checked){border-color:var(--jaune);background:#FFFBF2}
/* Lignes sans shift dans les vues Jour et Frise */
.frrow.vide .frl{color:var(--muet)}
.frrow.vide .frtrack{background:repeating-linear-gradient(-45deg,#FBF9F4,#FBF9F4 5px,#FDFCF9 5px,#FDFCF9 10px)}
.frrow.vide:hover .frtrack{background:var(--surface-2)}
/* ═══════════════════════════════════════════════════════════════
MENU EN RAIL (v4.3) — 78 px au lieu de 224
═══════════════════════════════════════════════════════════════ */
/* Largeur du rail : elle respire sur les grands écrans. */
:root{--rail-l:96px}
@media(min-width:1600px){:root{--rail-l:112px}}
@media(min-width:1920px){:root{--rail-l:124px}}
.rail{position:fixed;top:0;bottom:0;left:0;width:var(--rail-l);z-index:60;display:flex;
flex-direction:column;align-items:center;padding:16px 0 14px;gap:5px;background:var(--carte);
border-right:1px solid var(--ligne)}
.rail .rlogo{width:46px;height:46px;border-radius:14px;background:var(--terra);color:#fff;
display:flex;align-items:center;justify-content:center;font-family:var(--f-logo,'Londrina Solid',cursive);
font-size:21px;margin-bottom:16px;flex:none;letter-spacing:.02em}
.rail .rit{width:calc(var(--rail-l) - 20px);height:auto;min-height:0;padding:11px 6px 10px;
border-radius:13px;display:flex;flex-direction:column;align-items:center;gap:6px;
color:var(--encre-2);position:relative;flex:none;text-decoration:none;overflow:visible}
.rail .rit svg{width:23px;height:23px;stroke-width:1.6}
.rail .rit span{font-size:10.5px;font-weight:600;line-height:1.2;text-align:center;letter-spacing:.005em}
@media(min-width:1600px){
.rail .rit svg{width:25px;height:25px}
.rail .rit span{font-size:11.5px}
.rail .rlogo{width:50px;height:50px;font-size:23px}
}
.rail .rit:hover{background:var(--surface-2);color:var(--encre)}
.rail .rit.on{background:var(--terra-pale);color:var(--terra-h)}
.rail .rit.on::before{content:'';position:absolute;left:-10px;top:50%;transform:translateY(-50%);
width:3px;height:26px;border-radius:0 3px 3px 0;background:var(--terra)}
.rail .rit .rpt{position:absolute;top:7px;right:11px;width:7px;height:7px;border-radius:50%;
background:var(--terra);border:1.5px solid var(--carte)}
.rail .rsep{width:40px;height:1px;background:var(--ligne);margin:9px 0;flex:none}
/* ── LA LISTE DES RUBRIQUES DÉFILE SEULE ── (v13.5)
Le logo, sept rubriques et la version font 635 px : sur un écran de
600 px, la version passait sous le bord. Seule la liste défile —
défiler le rail entier aurait emporté la version avec elle. */
.rail .rlist{display:flex;flex-direction:column;align-items:center;gap:5px;
width:100%;min-height:0;flex:0 1 auto;overflow-y:auto;overflow-x:hidden;
scrollbar-width:thin;scrollbar-color:var(--ligne-2) transparent}
.rail .rlist::-webkit-scrollbar{width:6px}
.rail .rlist::-webkit-scrollbar-track{background:transparent}
.rail .rlist::-webkit-scrollbar-thumb{background:var(--ligne-2);border-radius:9px}
/* Le filet de la rubrique active déborde de 10 px à gauche : dans une
liste qui défile, il serait rogné. On le rentre. */
.rail .rlist .rit.on::before{left:-4px}
.rail .rbas{margin-top:auto;padding-top:8px}
/* ── SUR UN ÉCRAN COURT, LE RAIL SE RESSERRE ── (v13.5)
La liste peut défiler, mais un rail qu'il faut faire défiler pour
atteindre sa dernière rubrique est un rail qui a échoué : c'est le
seul endroit d'où l'on part. Sept rubriques demandent 505 px, un
écran de 600 px en laisse 448 — il manque exactement la hauteur
d'une rubrique. On la reprend sur les blancs, pas sur les mots :
l'étiquette reste, sinon le rail cesse de NOMMER, et c'est tout ce
qu'il sait faire. Le défilement reste dessous, pour plus court
encore. */
@media(max-height:760px){
.rail{padding:12px 0 10px}
.rail .rlogo{margin-bottom:9px}
.rail .rit{padding:7px 6px 7px;gap:5px}
.rail .rsep{margin:5px 0}
.rail .rbas{padding-top:4px}
}
/* ═══ v11.36 · LA VERSION EN BAS DU RAIL ═══
Elle a remplacé l'initiale de l'utilisateur, qui répétait le
bandeau du haut. Assez discrète pour ne pas concurrencer les
rubriques, assez lisible pour répondre à « c'est à jour ? » sans
cliquer. */
.rail .rvers{display:flex;flex-direction:column;align-items:center;gap:2px;
padding:7px 4px;border-radius:10px;text-decoration:none;color:var(--muet);
transition:background .12s,color .12s}
.rail .rvers .ico{width:15px;height:15px;opacity:.65}
.rail .rvers span{font-size:9.5px;font-weight:700;letter-spacing:.01em;
max-width:52px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail .rvers:hover{background:rgba(255,255,255,.10);color:#fff}
.rail .rvers:hover .ico{opacity:1}
.rail .rvers.on{background:rgba(255,255,255,.14);color:#fff}
/* ═══ v11.36 · LE JOURNAL DES VERSIONS ═══
Deux colonnes : le numéro et sa date à gauche, ce qui a changé à
droite. Un journal se parcourt par version, pas par phrase. */
.nvrow{display:flex;gap:22px;padding:18px 20px;border-top:1px solid var(--ligne)}
.nvrow:first-child{border-top:none}
.nvv{flex:none;width:120px;display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.nvv b{font-family:var(--f-tit);font-size:17px;color:var(--encre)}
.nvv span{font-size:11px;color:var(--muet)}
.nvv .pill{margin-top:4px;font-style:normal}
.nvc{flex:1;min-width:0}
.nvc h3{font-family:var(--f-tit);font-size:15px;margin:0 0 8px;color:var(--encre)}
.nvc ul{margin:0;padding-left:17px}
.nvc li{font-size:12.5px;line-height:1.65;color:var(--encre-2,var(--encre));margin-bottom:5px}
.nvc li:last-child{margin-bottom:0}
.nvrow.on .nvv b{color:var(--terra)}
/* Panneau volant */
/* ── IL TIENT DANS L'ÉCRAN ── (v13.5)
Dix-sept entrées font 859 px : sur un portable de 600 px, la moitié
basse du menu Développeur n'existait pas — hors de l'écran, et la
molette ne la ramenait pas. Le panneau s'arrête donc au bord et
défile.
Le plafond n'est pas 100vh : le script pose le panneau à 46 px du
haut au minimum, et lui laisse 14 px sous le pied. 60 px de moins
que la fenêtre, c'est exactement ce qui reste. Les deux nombres
doivent bouger ENSEMBLE — c'est pourquoi celui-ci est écrit ici,
en face de l'autre. */
.rfly{position:fixed;left:var(--rail-l);z-index:59;min-width:238px;background:var(--carte);
border:1px solid var(--ligne);border-radius:0 14px 14px 0;box-shadow:var(--ombre-2);
padding:13px 8px 10px;opacity:0;visibility:hidden;transform:translateX(-8px);
transition:opacity .13s,transform .13s;
max-height:calc(100vh - 60px);overflow-y:auto;overscroll-behavior:contain;
scrollbar-width:thin;scrollbar-color:var(--ligne-2) transparent}
.rfly::-webkit-scrollbar{width:7px}
.rfly::-webkit-scrollbar-track{background:transparent}
.rfly::-webkit-scrollbar-thumb{background:var(--ligne-2);border-radius:9px}
.rfly.on{opacity:1;visibility:visible;transform:none}
.rfly .ft{font-family:var(--f-titre);font-weight:600;font-size:14px;padding:0 12px 9px;
border-bottom:1px solid var(--ligne)}
.rfly a{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:9px;
font-size:13px;font-weight:500;color:var(--encre-2);margin-top:2px;text-decoration:none}
.rfly a:first-of-type{margin-top:7px}
.rfly a:hover{background:var(--surface-2);color:var(--encre)}
.rfly a.on{background:var(--terra-pale);color:var(--terra-h);font-weight:600}
.rfly a .fic{width:16px;height:16px;stroke-width:1.7;flex:none;opacity:.75}
.rfly a .bdg{margin-left:auto;font-size:10px;font-weight:700;background:var(--jaune-pale);
color:var(--jaune);border-radius:20px;padding:1px 7px}
/* Le contenu récupère la place */
body .main{margin-left:var(--rail-l);min-height:100vh}
/* Panneau latéral du déploiement des positions (ex-.side) */
.pnlat{display:flex;flex-direction:column;gap:12px;min-width:0}
/* Absences dans les vues Jour et Frise */
.frabs{position:absolute;inset:3px 2px;border-radius:8px;border:1px dashed;display:flex;
align-items:center;padding:0 10px;font-size:10.5px;font-weight:700;z-index:1;
background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,.5),rgba(255,255,255,.5) 5px,transparent 5px,transparent 10px)}
.frabs.cliq{cursor:pointer}
.frabs.cliq:hover{filter:brightness(.97)}
.absx.cliq{cursor:pointer}
/* Poignées de redimensionnement sur l'échelle continue */
.frbar.cliq{cursor:grab}
.frbar.endrag{cursor:grabbing;z-index:6;box-shadow:0 4px 14px -4px rgba(62,43,26,.45)}
.frbar .hpg{position:absolute;top:0;bottom:0;width:8px;cursor:ew-resize;opacity:0;z-index:2}
.frbar .hpg.g{left:-2px}
.frbar .hpg.d{right:-2px}
.frbar:hover .hpg{opacity:1;background:rgba(62,43,26,.14)}
.frbar .hpg.g{border-radius:7px 0 0 7px}
.frbar .hpg.d{border-radius:0 7px 7px 0}
/* ═══ Gestes sur les vues Jour et Frise ═══ */
.frbar.cliq{cursor:grab;user-select:none}
.frbar.cliq:active{cursor:grabbing}
.frbar.gdrag{z-index:20;box-shadow:0 6px 20px -6px rgba(62,43,26,.45);opacity:.94;cursor:grabbing}
.frbar .gh{position:absolute;top:0;bottom:0;width:8px;cursor:ew-resize;opacity:0;
transition:opacity .12s;background:rgba(62,43,26,.18)}
.frbar .gh-g{left:0;border-radius:7px 0 0 7px}
.frbar .gh-d{right:0;border-radius:0 7px 7px 0}
.frbar:hover .gh{opacity:1}
.frtrack.gcible{background:var(--terra-pale);box-shadow:inset 0 0 0 1.5px var(--terra)}
body.gencours{cursor:grabbing;user-select:none}
/* Pendant un geste, les boutons « + » disparaissent : ils invitent
à créer alors qu'on est en train de déplacer. */
body.gencours .jplus,body.gencours .frplus,body.gencours .plus,
body.gencours .dcopie{opacity:0!important;pointer-events:none}
body.gencours .frbar:not(.gdrag){opacity:.65}
/* Infobulle de geste */
.gtip{position:fixed;z-index:250;background:var(--encre);color:#fff;font-size:11.5px;font-weight:600;
padding:5px 10px;border-radius:8px;pointer-events:none;opacity:0;transform:translateX(-50%);
transition:opacity .1s;white-space:nowrap;font-variant-numeric:tabular-nums}
.gtip.on{opacity:1}
/* Les poignées sont à l'intérieur de la barre : elles survivent au
rognage du texte, et passent au-dessus du libellé. */
.frbar>.btg,.frbar>.bhh{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.frbar .gh{z-index:3}
/* Sur une barre étroite, les poignées se rejoignent : on garde
au moins un tiers de largeur pour le déplacement. */
.frbar .gh{max-width:33%}
/* Bouton « + » flottant sur la piste survolée */
.gplus{position:fixed;z-index:70;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:9px;
border:1.5px dashed var(--ligne-2);background:#fff;color:var(--terra);font-size:15px;
font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;
opacity:0;visibility:hidden;pointer-events:none;transition:opacity .1s;font-family:var(--f-ui)}
.gplus.on{opacity:1;visibility:visible;pointer-events:auto}
.gplus:hover{background:var(--terra-pale);border-color:var(--terra);border-style:solid}
/* Choix au dépôt : déplacer ou dupliquer */
.gchoix{position:fixed;z-index:250;display:flex;background:#fff;border:1px solid var(--ligne);
border-radius:11px;box-shadow:var(--ombre-2);overflow:hidden;transform:translate(-50%,-50%)}
.gchoix button{border:none;background:none;padding:10px 15px;font-size:12.5px;font-weight:600;
color:var(--encre);font-family:var(--f-ui);white-space:nowrap}
.gchoix button+button{border-left:1px solid var(--ligne)}
.gchoix button:hover{background:var(--terra-pale);color:var(--terra-h)}
/* Pistes des vues Jour et Frise : elles gardent leur mise en page
temporelle, la classe .pcell ne sert qu'au partage des styles. */
.frtrack,.frtrack.pcell{display:block!important;padding:0!important;min-height:0!important;
height:100%;gap:0;border-left:none;position:relative!important;cursor:cell}
/* Le « + » est ancré sur SA piste : sans position:relative sur le
parent, tous les boutons se superposaient sur la première ligne. */
.frtrack .plus,.frtrack.pcell .plus{position:absolute!important;left:8px;top:50%;
transform:translateY(-50%);width:26px;height:26px;min-height:0!important;margin:0;z-index:4;
border:1.5px dashed var(--ligne-2);border-radius:9px;background:#fff;color:var(--terra);
font-size:15px;font-weight:700;line-height:1;display:flex;align-items:center;
justify-content:center;opacity:0;pointer-events:none;transition:opacity .12s}
.frrow:hover .frtrack .plus,.frtrack:hover .plus{opacity:1;pointer-events:auto}
.frtrack .plus:hover{background:var(--terra-pale);border-color:var(--terra);border-style:solid}
.frtrack.gcible{background:var(--terra-pale);box-shadow:inset 0 0 0 1.5px var(--terra)}
.frbar.sh{cursor:grab}
.frbar.sh.gdrag{cursor:grabbing;z-index:30;box-shadow:0 6px 20px -6px rgba(62,43,26,.45)}
/* ═══════════════════════════════════════════════════════════════
VUES JOUR ET FRISE : des lignes manipulables (v4.5.2)
Des barres de 30 px sur des lignes de 46 px sont trop fines pour
être attrapées à la souris, et la colonne des noms tronquait.
═══════════════════════════════════════════════════════════════ */
.frrule,.frday,.frrow{grid-template-columns:230px 1fr 84px}
.frrow{height:62px}
.frrow .frl{font-size:13px;font-weight:600}
.frrow .avm{width:28px;height:28px;font-size:9.5px}
.frbar{top:11px;bottom:11px;border-radius:9px}
.frbar .btg{font-size:9px}
.frbar .bhh{font-size:11px}
/* Poignées : assez larges pour être visées sans loupe */
.frbar .gh{width:11px;background:rgba(62,43,26,.14)}
.frbar:hover .gh{opacity:1;background:rgba(62,43,26,.22)}
.frbar .gh::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:2px;height:12px;border-radius:2px;background:rgba(255,255,255,.85)}
/* Le « + » se voit à la hauteur des lignes agrandies */
.frtrack .plus,.frtrack.pcell .plus{width:28px;height:28px;font-size:16px}
/* La vue Jour a de la place : on aère davantage */
.vjour .frrow{height:74px}
.vjour .frbar{top:15px;bottom:15px}
/* ═══════════════════════════════════════════════════════════════
VUE JOUR EN GRILLE DE QUARTS D'HEURE (v4.6)
Une colonne = 15 minutes. Les shifts sont placés en colonnes de
grille, pas en pixels : ils suivent la largeur de l'écran.
═══════════════════════════════════════════════════════════════ */
.jcard{overflow:hidden}
.jwrap{overflow-x:auto}
.jgrid{display:grid;width:100%;min-width:max-content}
/* Colonne des noms, figée au défilement horizontal */
.jgrid .jlab{grid-column:1;position:sticky;left:0;z-index:5;background:#fff;
border-top:1px solid var(--surface-2);padding:9px 14px;display:flex;align-items:center;
gap:10px;min-width:0}
.jgrid .jlab.jhead,.jgrid .jlab.jeff{background:var(--surface-2);border-top:none;
border-bottom:1px solid var(--ligne);font-size:10.5px;font-weight:700;letter-spacing:.05em;
text-transform:uppercase;color:var(--muet);padding:10px 14px}
.jgrid .jlab.jeff{background:#fff;text-transform:none;letter-spacing:0;font-size:11px}
.jgrid .jlab .avm{width:30px;height:30px;border-radius:50%;color:#fff;font-size:10.5px;
font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.jgrid .jlab .n{display:block;font-size:13px;font-weight:600;line-height:1.2;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jgrid .jlab .c{display:block;font-size:10.5px;color:var(--muet)}
.jgrid .jlab.jna .n{color:var(--terra-h)}
/* En-tête des heures */
.jgrid .jh{background:var(--surface-2);border-bottom:1px solid var(--ligne);
border-left:1px solid var(--ligne);font-size:11px;font-weight:700;color:var(--encre-2);
padding:10px 0 9px 6px;white-space:nowrap;overflow:hidden}
/* Les quarts d'heure n'apparaissent QUE si la colonne est assez
large : au zoom, on gagne « h15 », « h30 », « h45 » ; au repos,
ils resteraient illisibles. Le seuil est porté par --jcol, que
le zoom modifie. */
.jgrid .jh.jq{font-size:9px;font-weight:600;color:transparent;
border-left-color:var(--surface-2)}
.jgrid.jfin .jh.jq{color:var(--muet)}
/* Le texte devient transparent, la case reste opaque : en vue
Semaine l'en-tête des heures est figé en haut, et des cases
« visibility:hidden » y laissaient des trous par lesquels les
shifts défilant dessous apparaissaient. */
.jgrid .jt{border-left:1px solid var(--ligne);border-top:1px solid var(--surface-2);
background:var(--surface-2);display:flex;align-items:center;justify-content:center;
font-size:12px;font-weight:700;color:var(--encre-2)}
.jgrid .jt.jhead{border-top:none;border-bottom:1px solid var(--ligne);font-size:10px;
font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muet)}
/* Bande d'effectif */
/* Effectif : le CHIFFRE par quart d'heure. Une barre oblige à
comparer des hauteurs pour deviner un nombre qu'on peut lire. */
.jgrid .jec{border-bottom:1px solid var(--ligne);border-left:1px solid var(--surface-2);
display:flex;align-items:center;justify-content:center;height:26px;
font-size:10.5px;font-weight:600;color:var(--muet);font-variant-numeric:tabular-nums}
.jgrid .jec.q0{border-left-color:var(--ligne)}
.jgrid .jec.hi{color:var(--encre);font-weight:700;background:var(--surface-2)}
/* Cellules */
.jgrid .jcell{border-top:1px solid var(--surface-2);border-left:1px solid var(--surface-2);
min-height:58px;position:relative}
.jgrid .jcell.q0{border-left-color:var(--ligne-2)}
.jgrid .jcell.q2{border-left-color:var(--ligne)}
.jgrid .jcell.hors{background:repeating-linear-gradient(-45deg,#F6F3EC,#F6F3EC 5px,#FBF9F4 5px,#FBF9F4 10px)}
.jgrid .jcell.jcible{background:var(--terra-pale);box-shadow:inset 0 0 0 1.5px var(--terra)}
.jgrid .jplus{position:absolute;inset:6px;border:1.5px dashed var(--ligne-2);border-radius:8px;
background:none;color:var(--terra);font-size:15px;font-weight:700;opacity:0;
display:flex;align-items:center;justify-content:center;pointer-events:none;
transition:opacity .12s;font-family:var(--f-ui);padding:0}
.jgrid .jcell:hover .jplus{opacity:1;pointer-events:auto}
.jgrid .jcell:hover .jplus:hover{background:var(--terra-pale);border-color:var(--terra);border-style:solid}
/* Shifts */
.jgrid .jsh{position:relative;margin:7px 1px;border-radius:9px;padding:5px 9px;overflow:clip;
border:1px solid rgba(62,43,26,.1);border-left-width:3px;display:flex;flex-direction:column;
justify-content:center;cursor:grab;z-index:2;min-width:0}
.jgrid .jsh:active{cursor:grabbing}
.jgrid .jsh .t{font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
opacity:.72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jgrid .jsh .h{font-size:11.5px;font-weight:700;white-space:nowrap}
.jgrid .jsh.jdrag{opacity:.6;z-index:20;box-shadow:0 8px 22px -8px rgba(62,43,26,.5)}
.jgrid .jsh .jgh{position:absolute;top:0;bottom:0;width:12px;cursor:ew-resize;display:flex;
align-items:center;justify-content:center;opacity:0;transition:opacity .12s;z-index:3}
.jgrid .jsh .jgh::after{content:'';width:3px;height:16px;border-radius:2px;background:rgba(62,43,26,.42)}
/* ═══ L'ÉTAT DU SHIFT, SUR LA PISTE ═══ (v13.6)
Les vues Jour et Semaine ne disaient RIEN : validé, à valider et en
cours portaient le même rectangle. On ne réinvente pas un langage —
ce sont les modificateurs de la vue Salariés, appliqués au bloc. */
.jgrid .jsh.shvalide{filter:saturate(1.4) brightness(.95);
border-color:currentColor;border-width:1.5px;border-left-width:4px}
.jgrid .jsh.shencours{border-color:transparent;border-width:2px;border-left-width:3px}
.jgrid .jsh.shencours::before{content:'';position:absolute;inset:-2px;border-radius:10px;padding:2px;
background:conic-gradient(from var(--ang,0deg),transparent 0deg,currentColor 60deg,
transparent 130deg,transparent 360deg);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;
animation:shtour 2.4s linear infinite;pointer-events:none;z-index:1}
@supports not (background:conic-gradient(from 0deg,red,blue)){
.jgrid .jsh.shencours{border-color:currentColor;border-style:dashed}
.jgrid .jsh.shencours::before{display:none}
}
@media (prefers-reduced-motion:reduce){
.jgrid .jsh.shencours::before{animation:none;background:currentColor;opacity:.5}
}
/* La pastille vit DANS la ligne des heures, qui est déjà collante :
posée au bout du bloc, elle serait à huit heures du regard sur un
bloc de huit heures, et par-dessus le libellé sur un bloc court.
Elle rétrécit un peu — la carte de la vue Salariés a deux fois
cette hauteur de texte. */
.jgrid .jsh .h{display:flex;align-items:center;gap:6px}
/* ── AU COIN BAS-DROIT, COMME SUR LA CARTE ── (v13.11)
Elle a d'abord vécu DANS la ligne des heures, pour rester sous
l'œil sur un bloc de huit heures. Deux inconvénients l'en ont
chassée : elle cognait le bloc soudé des heures retenues, et
surtout elle n'était pas au même endroit d'un écran à l'autre —
on la cherche là où la vue Salariés l'a mise. */
.jgrid .jsh .shtick,.jgrid .jsh .shring{width:13px;height:13px;
position:absolute;right:5px;bottom:4px;z-index:2}
.jgrid .jsh .shtick{border-radius:50%;background:currentColor;display:flex;
align-items:center;justify-content:center;box-shadow:0 0 0 1.5px rgba(255,255,255,.65);
flex:none}
.jgrid .jsh .shtick::before{content:'✓';color:#fff;font-size:8px;font-weight:700;line-height:1}
/* Le libellé ne passe pas dessous : le kit règle déjà le même cas
sur la carte (« .sh.shvalide{padding-right:24px} »). */
.jgrid .jsh.shvalide,.jgrid .jsh.shavalider{padding-right:22px}
/* ── LE PRÉVU ET LE RÉEL, DANS UN SEUL BLOC ── (v13.6 · v13.13)
Le bloc couvre L'UNION du prévu et de ce qui a eu lieu. Dedans,
trois zones — et c'est tout le vocabulaire :
plein ce qui était prévu ET fait
.jhors fait sans être prévu — hachuré
.jcreux prévu et non fait — creux, le fond de la carte
Il en a fallu trois pour arriver là. La v13.6 posait la part À
CÔTÉ du bloc (« .jdep » dehors, « .jman » par-dessus) parce que le
bloc restait sur le prévu ; la v13.11 a fait sauter le bloc sur le
retenu à la validation, et la part est passée dedans. Le même
dépassement se dessinait donc de deux façons selon qu'on avait
cliqué « Valider ». Une seule géométrie, une seule règle : le bloc
ne bouge plus, seule la marque d'état change.
── HACHURES ET CREUX, PAS DEUX VOILES ──
Le VOILE clair est déjà la pause (« .jpz ») : deux choses
différentes qui se ressemblent sont pires que deux choses
différentes qu'on ne voit pas. Ce qui a été fait porte donc de la
matière — des hachures ; ce qui n'a pas eu lieu n'en porte aucune :
il montre le fond de la carte, entre deux pointillés.
La couleur vient du POSTE : les zones sont filles du bloc, dont
elles héritent « color » — c'est ce qui les dispense du piège que
les pièces posées à côté avaient (« currentColor » leur donnait le
noir du texte). */
.jsh .jhors,.jsh .jcreux{position:absolute;top:0;bottom:0;z-index:1;pointer-events:none;
border-left:1px dashed currentColor;border-right:1px dashed currentColor}
.jsh .jhors{background:repeating-linear-gradient(-45deg,transparent 0 3px,currentColor 3px 4.5px);
opacity:.45}
.jsh .jcreux{background:var(--carte);opacity:.92}
/* Une zone COLLÉE au bord du bloc n'a qu'un pointillé : le second
doublerait la bordure du bloc, et « overflow:clip » l'aurait de
toute façon rogné à moitié. Le côté est posé au rendu, pas déduit
d'un « :first-child » — le libellé et la coche sont des enfants
eux aussi, et l'ordre du balisage n'a pas à porter du sens. */
.jsh .jzg{border-left:0}
.jsh .jzd{border-right:0}
/* ── LE LIBELLÉ NE SE POSE PAS SUR UNE ZONE ──
Il commence au bord gauche du bloc, et le bloc commence maintenant
plus tôt que le service quand on est arrivé en avance. « --jdec »
porte la largeur de la zone de gauche ; le calage collant, lui, ne
bouge pas. */
.jsh .t,.jsh .h{margin-left:var(--jdec,0)}
.jgrid .jsh:hover .jgh{opacity:1}
.jgrid .jsh .jgg{left:0}
.jgrid .jsh .jgd{right:0}
/* Absence : bandeau sur toute la journée */
.jgrid .jabs{position:relative;margin:0 1px;align-self:center;min-height:22px;border-radius:7px;border:1px solid;
display:flex;align-items:center;padding:2px 10px;font-size:10px;font-weight:600;z-index:1;
overflow:clip}
/* v7.20.1 : même hauteur que le ruban d'absence de la vue
Salariés (22 px, centré dans la ligne) ; un bloc à la hauteur
d'un shift faisait lire une absence comme un poste. */
/* Instant présent */
.jgrid .jnow{background:var(--terra);width:2px;justify-self:start;margin-left:-1px;z-index:8;
pointer-events:none;position:relative}
.jgrid .jnow::before{content:'';position:absolute;top:-3px;left:-3px;width:8px;height:8px;
border-radius:50%;background:var(--terra)}
/* Pied et densité */
.jpied{display:flex;gap:14px;align-items:center;padding:11px 16px;border-top:1px solid var(--ligne);
background:var(--surface-2);font-size:11.5px;color:var(--muet);flex-wrap:wrap}
.jpied .lg{display:flex;align-items:center;gap:6px}
.jpied .lg i{width:11px;height:11px;border-radius:3px;display:block}
.jpied .astuce{margin-left:auto;font-weight:600;color:var(--encre-2)}
.jzoom{display:flex;gap:2px;background:var(--surface-2);border:1px solid var(--ligne);
border-radius:9px;padding:2px}
.jzoom button{border:none;background:none;border-radius:7px;padding:5px 10px;font-size:11.5px;
font-weight:600;color:var(--muet);font-family:var(--f-ui)}
.jzoom button.on{background:#fff;color:var(--terra-h);box-shadow:var(--ombre)}
/* ═══ Sélecteur parcs & équipes (v4.8) ═══ */
.psel{position:relative;width:min(360px,100%)}
.psel .pchamp{display:flex;align-items:center;gap:10px;border:1px solid var(--ligne-2);
background:#fff;border-radius:11px;padding:0 12px;height:38px;cursor:text}
.psel .pchamp:hover{border-color:var(--muet)}
.psel .pchamp.ouvert{border-color:var(--terra);box-shadow:0 0 0 3px var(--terra-pale)}
.psel .pchamp .loupe{width:16px;height:16px;stroke:var(--muet);fill:none;stroke-width:1.8;flex:none}
.psel .pchamp input{flex:1;min-width:0;border:none;outline:none;font-size:13.5px;
font-family:var(--f-ui);background:none;color:var(--encre)}
.psel .pchamp input::placeholder{color:var(--encre);opacity:1;font-weight:600}
.psel .pchamp .chev{width:15px;height:15px;stroke:var(--muet);fill:none;stroke-width:2;flex:none;
transition:transform .15s}
.psel .pchamp.ouvert .chev{transform:rotate(180deg)}
/* ── LE PANNEAU NE VIT PLUS DANS LA BARRE ── (v14.15)
Il était en position:absolute. Or la barre du planning défile en
largeur (« overflow-x:auto »), et le navigateur ramène alors
« overflow-y » à « auto » : le conteneur ROGNE ce qui dépasse en
hauteur. Le panneau s'ouvrait bien — classe posée, chevron
retourné — mais il était coupé à zéro. À l'écran, le bouton avait
l'air mort.
C'est exactement le piège relevé en v12.4 pour les menus Affichage
et Outils, passés à l'époque en position fixe. Celui-ci avait été
oublié. Il se place donc au clic, comme eux : hors du flux, plus
rien ne le rogne. Sa largeur et sa place viennent du champ. */
.psel .ppan{position:fixed;left:0;top:0;width:340px;z-index:130;
background:#fff;border:1px solid var(--ligne);border-radius:13px;box-shadow:var(--ombre-2);
opacity:0;visibility:hidden;transform:translateY(-6px);transition:.14s;overflow:hidden}
.psel .ppan.on{opacity:1;visibility:visible;transform:none}
.psel .corps{max-height:340px;overflow-y:auto;padding:5px 0}
.psel .pgrp{border-top:1px solid var(--ligne)}
.psel .pgrp:first-child{border-top:none}
.psel .pline{display:flex;align-items:center;gap:10px;padding:10px 15px;cursor:pointer;
font-size:13.5px;color:var(--encre)}
.psel .pline:hover{background:var(--surface-2)}
.psel .pline .ic{width:16px;height:16px;stroke:var(--encre-2);fill:none;stroke-width:1.7;flex:none}
.psel .pline.eq{padding-left:32px;font-size:13px}
.psel .pline.eq .ic{stroke:var(--muet)}
.psel .pline .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.psel .pline .nb{color:var(--muet);font-weight:500}
/* Un cercle vide marque le non-retenu, une pastille pleine le
retenu : sans contraste, on ne distingue pas les deux. */
.psel .pline .ck{width:18px;height:18px;min-width:18px;border-radius:50%;flex:none;
position:relative;border:1.5px solid var(--ligne-2);background:#fff;transition:.12s;
box-sizing:border-box;display:block}
.psel .pline:hover .ck{border-color:var(--muet)}
.psel .pline.coche .ck{background:var(--terra);border-color:var(--terra)}
/* Retenu : une pastille pleine au centre du cercle, comme un bouton
radio. Plus lisible qu'une coche à cette taille, et cohérent
entre le parc et ses équipes. */
.psel .pline.coche .ck{border-color:var(--terra);background:#fff}
.psel .pline.coche .ck::after{content:'';position:absolute;left:50%;top:50%;
width:9px;height:9px;border-radius:50%;background:var(--terra);
transform:translate(-50%,-50%)}
/* Parc dont une partie seulement des équipes est retenue :
même pastille, en plus petit et estompée. */
.psel .pline.part .ck{border-color:var(--terra);background:#fff}
.psel .pline.part .ck::after{content:'';position:absolute;left:50%;top:50%;
width:6px;height:6px;border-radius:50%;background:var(--terra);opacity:.5;
transform:translate(-50%,-50%)}
/* La ligne retenue se lit d'un coup d'œil, pas seulement à la coche */
.psel .pline.coche{background:var(--terra-pale)}
.psel .pline.coche .n{font-weight:600;color:var(--terra-h)}
.psel .pline.coche:hover{background:#F9DFD6}
.psel .pline.parc.coche .ic,.psel .pline.parc.part .ic{stroke:var(--terra-h)}
.psel .ppied{display:flex;gap:10px;align-items:center;padding:9px 13px;
border-top:1px solid var(--ligne);background:var(--surface-2)}
.psel .ppied .lien{border:none;background:none;font-size:11.5px;font-weight:600;
color:var(--terra-h);padding:0;font-family:var(--f-ui)}
.psel .ppied .info{margin-left:auto;font-size:11px;color:var(--muet)}
/* Parc du contrat en cours, dans la liste des salariés */
.pparc{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
background:var(--surface-2);border:1px solid var(--ligne);border-radius:20px;padding:3px 10px;
color:var(--encre-2)}
/* ═══════════════════════════════════════════════════════════════
OUTILS DE SAISIE DU PLANNING (v5.0)
═══════════════════════════════════════════════════════════════ */
/* Bibliothèque d'horaires types */
/* Déposer un favori, c'est COPIER : même signalement que le
déplacement d'un shift — pointillé sur la case visée — mais en
vert, la couleur de l'ajout, et avec la mention « Copier ».
Une case orange pleine ne disait pas quel geste était en cours
(v7.88). */
.pcell.vcible{background:var(--vert-pale,#EDF3E6)!important;outline:2px dashed var(--vert,#55773B);
outline-offset:-3px;border-radius:10px;position:relative}
.pcell.vcible::after{content:'Copier';position:absolute;left:50%;top:50%;
transform:translate(-50%,-50%);background:var(--vert,#55773B);color:#fff;
font:700 10px/1 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;
padding:4px 8px;border-radius:6px;pointer-events:none;white-space:nowrap;z-index:4}
/* Sélection multiple */
.sh.shsel{outline:2px solid var(--terra);outline-offset:1px;z-index:3}
.selbar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:200;
display:flex;align-items:center;gap:9px;padding:10px 15px;background:var(--encre);color:#fff;
border-radius:12px;font-size:12.5px;font-weight:600;box-shadow:var(--ombre-2)}
.selbar button{border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);color:#fff;
border-radius:8px;padding:5px 11px;font-size:12px;font-weight:600;font-family:var(--f-ui)}
.selbar button:hover{background:rgba(255,255,255,.22)}
.selbar button.x{border:none;background:none;font-size:15px;padding:0 4px}
/* Reproduire sur la semaine */
.appsem{position:absolute;right:6px;bottom:6px;margin:0;display:flex;z-index:4}
.pemp{position:relative}
/* v7.21 : le bouton se logeait en bout de ligne et se superposait
au nom dès que la colonne manquait de place ; il est désormais
dans le coin bas droit de la case, au survol. */
.appsem button{border:1px solid var(--ligne-2);background:#fff;border-radius:8px;padding:0 8px;
height:23px;font-size:10px;font-weight:600;color:var(--encre-2);display:inline-flex;
align-items:center;gap:4px;opacity:0;transition:opacity .12s;font-family:var(--f-ui)}
.appsem button svg{width:11px;height:11px}
.prow:hover .appsem button{opacity:1}
.appsem button:hover{border-color:var(--terra);color:var(--terra-h)}
/* Commentaire sur un shift */
.sh .shnote{display:block;font-size:9.5px;font-style:italic;opacity:.82;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
/* Recherche d'un salarié */
.rechsal{display:flex;align-items:center;gap:7px;border:1px solid var(--ligne-2);border-radius:9px;
padding:0 10px;height:30px;background:#fff;width:190px}
.rechsal .lp{width:14px;height:14px;stroke:var(--muet);fill:none;stroke-width:1.8;flex:none}
.rechsal input{border:none;outline:none;font-size:12px;font-family:var(--f-ui);width:100%;background:none}
.prow.surli .pemp{background:var(--jaune-pale);box-shadow:inset 3px 0 0 var(--jaune)}
.prow.estompe{opacity:.32}
/* Densité */
body.dens-dense .pcell{min-height:48px;padding:4px}
body.dens-dense .sh{padding:3px 6px;font-size:10px}
body.dens-dense .sh .hh{font-size:9px}
body.dens-dense .sh .pz,body.dens-dense .sh .shnote{display:none}
body.dens-dense .pemp{padding:6px 10px}
body.dens-lache .pcell{min-height:104px}
body.dens-lache .sh{padding:7px 10px}
/* ═══ Favoris (v5.1) ═══ */
.favbtn{gap:6px}
.favbtn svg{width:14px;height:14px}
.favbtn .nb{background:var(--terra-pale);color:var(--terra-h);border-radius:20px;
padding:1px 7px;font-size:10.5px;font-weight:700}
.favnew summary::-webkit-details-marker{display:none}
.favnew .fl2{display:block;font-size:12px;font-weight:600;color:var(--encre-2);margin:12px 0 5px}
.favnew .fl2:first-of-type{margin-top:0}
.favnew .fi{width:100%;border:1px solid var(--ligne-2);border-radius:9px;padding:8px 11px;
font-size:13px;font-family:var(--f-ui);background:#fff}
.favnew .f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* Le panneau s'efface pendant qu'on glisse vers la grille */
.mmodal.translucide{pointer-events:none}
.mmodal.translucide .mmbox{opacity:.14;transition:opacity .15s}
.mmodal.translucide .mmveil{opacity:0}
/* ═══ Lot 2 : disponibilités, besoins, demandes en attente (v5.2) ═══ */
/* ── UNE DEMANDE, UNE BANDE, UNE DÉCISION ── (v14.13)
« .absatt » vivait DANS la case : une demande de six jours posait
six encadrés hachurés et SIX paires de boutons « Accepter /
Refuser » pour une seule décision. On ne voyait pas que c'était la
même demande, et rien ne disait où elle commençait.
Elle emprunte maintenant la bande des absences validées (.absx,
v11.66) : une pièce qui enjambe ses jours, hachurée pour dire
qu'elle n'est pas tranchée, et la décision AU BOUT. Coupée par le
bord de la semaine, elle reparaît la semaine suivante avec ses
boutons — on décide depuis la semaine qu'on regarde.
Quand une même ligne porte une absence validée ET une demande, la
demande prend une seconde rangée : deux bandes sur la même rangée
se recouvriraient là où leurs jours se croisent. */
.absx.att{background:repeating-linear-gradient(-45deg,#F7F1F6,#F7F1F6 4px,#FDFBFD 4px,#FDFBFD 8px);
border:1.5px dashed var(--violet);color:var(--violet);cursor:default;
/* Une bande d'un seul jour est étroite : elle rétrécit ce qu'elle
porte, elle ne s'empile pas sur deux lignes — une ligne du
planning plus haute que les autres se remarque plus que le
libellé qu'on a sauvé. */
flex-wrap:nowrap}
.absx.att .absnom{color:var(--violet)}
.absx.att .aj{color:var(--violet);opacity:.75}
.prow.avecatt{grid-template-rows:auto auto 1fr}
.prow.avecatt > .pemp{grid-row:1 / span 3}
.prow.avecatt > .absx.att{grid-row:2}
.prow.avecatt > .pcell{grid-row:3}
/* La décision, au bout de la bande : deux boutons de même taille,
l'un plein — c'est celui qu'on prend neuf fois sur dix. */
.absdec{margin-left:auto;display:flex;gap:4px;flex:none}
.absdec button{border:none;border-radius:6px;padding:2px 8px;font-size:10px;
font-weight:700;font-family:var(--f-ui);cursor:pointer;white-space:nowrap}
.absdec .ok{background:var(--vert);color:#fff}
.absdec .ok:hover{background:#47702F}
.absdec .no{background:#fff;border:1px solid var(--ligne-2);color:var(--muet)}
.absdec .no:hover{border-color:var(--rouge);color:var(--rouge)}
/* Trop étroite pour porter des mots : la bande garde ses boutons mais
les réduit à leur signe. Le survol dit lequel est lequel. */
@container (max-width: 210px){
.absdec button{font-size:0;padding:2px 6px}
.absdec button::after{font-size:11px}
.absdec .ok::after{content:'✓'}
.absdec .no::after{content:'✕'}
/* Le nombre de jours passe à la trappe avant le nom : sur une
bande d'un jour, « 1 j » n'apprend rien que la largeur ne dise. */
.absx.att .aj{display:none}
}
/* Indisponibilité récurrente */
.pcell .indz{font-size:9.5px;font-weight:600;color:var(--muet);text-align:center;
padding:3px 6px;border-radius:6px;margin-bottom:3px;
background:repeating-linear-gradient(-45deg,#F2EFE8,#F2EFE8 4px,#F9F7F2 4px,#F9F7F2 8px)}
/* Bouton « disponibles » dans l'en-tête de jour */
/* Panneau des disponibles */
.dispoline{display:flex;align-items:center;gap:10px;padding:10px 13px;border:1px solid var(--ligne);
border-radius:10px;margin-bottom:7px;background:#fff;cursor:grab}
.dispoline:hover{border-color:var(--muet)}
.dispoline .n{flex:1;min-width:0;font-size:13px;font-weight:600}
.dispoline .n small{display:block;font-size:10.5px;font-weight:500;color:var(--muet)}
.dispoline .e{font-size:11.5px;font-weight:700;border-radius:20px;padding:3px 9px;flex:none}
.dispoline .e.moins{background:var(--bleu-pale);color:var(--bleu)}
.dispoline .e.plus{background:var(--jaune-pale);color:var(--jaune)}
/* Besoin contre planifié */
.pl2 .besrow{display:grid;grid-template-columns:var(--pl2cols);
border-top:1px solid var(--surface-2);background:var(--surface-2)}
.pl2 .besrow .c0{padding:6px 12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pl2 .besrow .bpil{font-size:10.5px;font-weight:600;border-radius:20px;padding:2px 8px}
.pl2 .besrow .bl{font-size:9.5px;color:var(--muet)}
.pl2 .besrow .besc{text-align:center;padding:6px 0;font-size:11.5px;font-weight:700;
color:var(--muet);border-left:1px solid var(--ligne)}
.pl2 .besrow .besc.ok{color:var(--vert)}
.pl2 .besrow .besc.tr{background:var(--jaune-pale);color:var(--jaune)}
.pl2 .besrow .besc.ko{background:var(--rouge-pale);color:var(--rouge)}
/* ═══ Bandeau des favoris (v5.3) ═══
Escamotable : une barre de vignettes qu'on affiche à la demande,
plutôt qu'une fenêtre qui masque la grille. */
.favbar{display:none;gap:7px;padding:9px 12px;flex-wrap:wrap;align-items:center;
background:var(--carte);border:1px solid var(--ligne);border-radius:var(--r);
box-shadow:var(--ombre);margin-bottom:11px}
.favbar.on{display:flex}
/* La vignette EST un shift : elle en reprend la classe .sh, donc le
bandeau vertical, la typographie et le survol. Seuls la largeur et
le bouton de retrait lui sont propres. */
.favbar .favtag{position:relative;min-width:118px;padding-right:24px;flex:none}
.favbar .favtag:active{cursor:grabbing}
.favbar .favtag.vdrag{opacity:.4}
.favbar .favtag .fx{position:absolute;top:2px;right:2px}
.favbar .favtag .fx button{border:none;background:none;color:currentColor;opacity:.35;
font-size:11px;padding:2px 4px;line-height:1;font-family:var(--f-ui)}
.favbar .favtag .fx button:hover{opacity:1}
.favbar .favplus{width:32px;height:32px;border:1.5px dashed var(--ligne-2);border-radius:9px;
background:none;color:var(--muet);font-size:17px;line-height:1;font-family:var(--f-ui)}
.favbar .favplus:hover{border-color:var(--terra);color:var(--terra-h)}
.favbar .favvide{font-size:12px;color:var(--muet)}
.favbtn.actif{background:var(--terra-pale);border-color:var(--terra);color:var(--terra-h)}
/* ═══ Menu Affichage ═══ */
.affmenu .ddpanel{min-width:250px;max-height:70vh;overflow-y:auto}
.affmenu summary svg{width:14px;height:14px}
/* Options d'affichage : les BASCULES utilisent l'interrupteur
officiel (.sw/.swt), les CHOIX EXCLUSIFS de densité restent des
boutons radio — un interrupteur ne sait pas dire « l'un parmi
trois ». */
.aopt{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:8px;cursor:pointer;
font-size:12.5px}
.aopt:hover{background:var(--surface-2)}
.aopt input[type="radio"]{width:15px;height:15px;accent-color:var(--terra);flex:none;cursor:pointer}
/* Variante interrupteur : le curseur remplace la case */
.aopt.sw{gap:10px}
.aopt.sw .swl{flex:1;min-width:0;font-size:12.5px}
.aopt.sw:hover{background:var(--surface-2)}
/* Familles masquables depuis le menu */
/* La bande n'est plus DANS la case : elle est posée sur la grille de
la ligne. Le sélecteur qui la masque doit suivre, sinon
« masquer les absences » cesse de masquer quoi que ce soit
(v11.66). */
body.sans-abs .absx,
body.sans-attente .pcell .absatt,
body.sans-dispo .pcell .indz,
/* Note portée par un shift : elle se coupe séparément de la note du
jour, qui concerne tout l'établissement (v7.91). */
body.sans-shnotes .sh .shnote{display:none}
body.sans-meteo .pl2 .dd .meteo,
body.sans-notes .pl2 .dd .dnote,
body.sans-besoin .pl2 .besrow,
body.sans-na .pl2 .prow-na{display:none!important}
.pl2 .prow.masque{display:none}
/* Le bandeau accepte le dépôt d'un shift du planning */
.favbar .favdrop{font-size:11px;color:var(--muet);font-style:italic;margin-left:4px}
.favbar.favcible{border-color:var(--terra);background:var(--terra-pale);
box-shadow:0 0 0 3px rgba(233,102,70,.12)}
.favbar.favcible .favdrop,.favbar.favcible .favvide{color:var(--terra-h);font-weight:600;font-style:normal}
/* ═══ Conformité : prévenance et journal (v5.4) ═══ */
.prevbar{display:flex;align-items:flex-start;gap:12px;padding:12px 15px;margin-bottom:11px;
background:var(--jaune-pale);border:1px solid #EBDCB4;border-left:3px solid var(--jaune);
border-radius:var(--r)}
.prevbar .ico{width:19px;height:19px;stroke:var(--jaune);fill:none;stroke-width:1.7;flex:none;margin-top:1px}
.prevbar .pv1{flex:1;min-width:0}
.prevbar .pv1 b{display:block;font-size:13px;font-weight:600;color:#7A5510}
.prevbar .pv1 span{display:block;font-size:12px;color:var(--encre-2);line-height:1.55;margin-top:2px}
.prevbar .btn{flex:none;background:#fff}
.jrn{display:flex;flex-direction:column}
.jl{display:grid;grid-template-columns:88px 118px 1fr 92px 62px;gap:10px;align-items:baseline;
padding:9px 4px;border-bottom:1px solid var(--surface-2);font-size:12px}
.jl.pub{background:var(--vert-pale);border-radius:8px;padding-left:8px;padding-right:8px}
/* Décision de paie : liseré bleu, la couleur des faits constatés
dans l'application. Elle se distingue d'une modification de
planning sans crier plus fort qu'elle (v10.9). */
.jl.jpaie{background:var(--bleu-pale);border-radius:8px;padding-left:8px;padding-right:8px;
box-shadow:inset 2px 0 0 var(--bleu)}
.jl.jpaie .a{color:var(--bleu-fonce)}
.jl .h{font-size:11px;color:var(--muet);font-variant-numeric:tabular-nums}
.jl .a{font-weight:600}
.jl .q{min-width:0;color:var(--encre-2)}
.jl .q b{font-weight:600;color:var(--encre);margin-right:5px}
.jl .q i{font-style:normal;color:var(--muet);margin-left:5px}
.jl .w{font-size:11px;color:var(--muet);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jl .badge{font-size:10px;font-weight:700;border-radius:20px;padding:2px 8px;text-align:center;
background:var(--surface-2);color:var(--muet);border:1px solid var(--ligne)}
.jl .badge.ok{background:var(--vert-pale);color:var(--vert);border-color:#CFE0BE}
.jl .badge.ko{background:var(--rouge-pale);color:var(--rouge);border-color:#F2D8DA}
/* ═══ Préparation d'impression (v5.5) ═══ */
/* ═══ Identité visuelle de l'établissement (v5.6) ═══ */
.idvis{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:start}
@media(max-width:760px){.idvis{grid-template-columns:1fr}}
.idlogo{border:1px solid var(--ligne);border-radius:11px;background:var(--surface-2);
height:110px;display:flex;align-items:center;justify-content:center;padding:12px;overflow:hidden}
.idlogo img{max-width:100%;max-height:100%;object-fit:contain}
.idvide{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--ligne-2)}
.idvide svg{width:28px;height:28px}
.idvide span{font-size:11px;font-weight:600;color:var(--muet)}
.idpal{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.idpick{cursor:pointer;position:relative}
.idpick input{position:absolute;opacity:0}
.idpick i{display:block;width:26px;height:26px;border-radius:8px;border:2px solid transparent;
box-shadow:inset 0 0 0 1px rgba(62,43,26,.12)}
.idpick input:checked+i{border-color:var(--encre);box-shadow:0 0 0 2px #fff inset}
/* Choix de la mise en page à l'impression */
/* Aperçu miniature de chaque mise en page */
.apercu{display:flex;flex-direction:column;gap:3px;height:38px;justify-content:center;
padding:6px 8px;background:var(--surface-2);border-radius:7px}
/* ═══ Alertes de saisie, verrou, historique (v6.3) ═══ */
.valert{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:400;width:min(430px,94vw);
background:#fff;border:1px solid var(--ligne);border-radius:14px;box-shadow:var(--ombre-2);overflow:hidden}
.valert[hidden]{display:none}
.valert .vah{display:flex;align-items:center;gap:10px;padding:13px 16px;background:var(--jaune-pale);
border-bottom:1px solid #EBDCB4}
.valert .vic{font-size:17px}
.valert .vah b{font-family:var(--f-titre);font-size:14.5px;font-weight:600;color:#7A5510}
.valert .vab{padding:12px 16px;max-height:52vh;overflow-y:auto}
.valert .val{border-left:3px solid var(--jaune);padding:2px 0 2px 11px;margin-bottom:11px}
.valert .val:last-child{margin-bottom:0}
.valert .val.bloc{border-left-color:var(--rouge)}
.valert .val.info{border-left-color:var(--bleu)}
.valert .val b{display:block;font-size:13px;font-weight:600;line-height:1.3}
.valert .val span{display:block;font-size:12px;color:var(--encre-2);margin-top:2px;line-height:1.5}
.valert .val i{display:block;font-style:normal;font-size:10.5px;color:var(--muet);margin-top:3px;
font-weight:600;letter-spacing:.02em}
.valert .vaf{display:flex;gap:8px;justify-content:flex-end;padding:11px 16px;
border-top:1px solid var(--ligne);background:var(--surface-2)}
/* (Le doublon de « .btn.danger » vivait ici — en fond rouge plein. Il
écrasait la définition en contour du haut du fichier, qui devenait
inatteignable. Retiré en v12.6 ; le rouge plein s'appelle
« .btn.dp » et il est réservé aux fenêtres de confirmation.) */
/* Bandeau de verrouillage */
.verrbar{display:flex;align-items:center;gap:12px;padding:12px 15px;margin-bottom:11px;
background:var(--vert-pale);border:1px solid #CFE0BE;border-left:3px solid var(--vert);
border-radius:var(--r)}
.verrbar .ico{width:19px;height:19px;stroke:var(--vert);fill:none;stroke-width:1.8;flex:none}
.verrbar .vb1{flex:1;min-width:0}
.verrbar .vb1 b{display:block;font-size:13px;font-weight:600;color:#3D5C2A}
.verrbar .vb1 span{display:block;font-size:12px;color:var(--encre-2);margin-top:1px}
/* Historique au survol */
.histpop{position:fixed;z-index:350;width:418px;background:#fff;border:1px solid var(--ligne);
border-radius:13px;box-shadow:var(--ombre-2);overflow:hidden;pointer-events:none}
.histpop[hidden]{display:none}
.histpop .hpt{padding:10px 14px;border-bottom:1px solid var(--ligne);background:var(--surface-2)}
.histpop .hpt b{font-family:var(--f-titre);font-size:13.5px;font-weight:600}
.histpop .hpt span{font-size:11px;color:var(--muet);margin-left:7px}
.histpop .hpg{width:100%;border-collapse:collapse;font-size:11px}
.histpop .hpg th{padding:5px 4px;font-size:9.5px;font-weight:700;color:var(--muet);
text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--ligne)}
.histpop .hpg td{padding:5px 4px;text-align:center;border-bottom:1px solid var(--surface-2);
font-weight:600;color:var(--encre-2)}
.histpop .hpg .sm{font-weight:700;color:var(--muet);font-size:10px;text-align:left;padding-left:12px}
.histpop .hpg .tt{font-weight:700;color:var(--encre);background:var(--surface-2)}
.histpop .hpg .we{background:#FCFAF5}
.histpop .hpg .off{color:var(--ligne-2)}
.histpop .hpf{display:flex;gap:14px;padding:9px 14px;background:var(--surface-2);
border-top:1px solid var(--ligne);font-size:11px;color:var(--muet);flex-wrap:wrap}
.histpop .hpf b{color:var(--encre);font-weight:700}
.histpop .hpf .neg b{color:var(--rouge)}
.histpop .hpf .pos b{color:var(--vert)}
/* Bandeau de semaine de référence */
.refbar{display:flex;align-items:center;gap:12px;padding:11px 15px;margin-bottom:11px;
background:var(--bleu-pale);border:1px solid #D5DDEC;border-left:3px solid var(--bleu);
border-radius:var(--r)}
.refbar .ico{width:18px;height:18px;stroke:var(--bleu);fill:none;stroke-width:1.8;flex:none}
.refbar .rb1{flex:1;min-width:0}
.refbar .rb1 b{display:block;font-size:13px;font-weight:600;color:#3E5480}
.refbar .rb1 span{display:block;font-size:12px;color:var(--encre-2);margin-top:1px}
.refbar .btn{background:#fff}
.refbar .rbx{border:none;background:none;color:var(--muet);font-size:14px;padding:2px 5px;
line-height:1;font-family:var(--f-ui)}
.refbar .rbx:hover{color:var(--encre)}
/* ═══ Renforts entre parcs (v6.7) ═══ */
.pemp .renf{display:inline-flex;align-items:center;gap:4px;margin-top:3px;font-size:9.5px;
font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--bleu);
background:var(--bleu-pale);border-radius:20px;padding:2px 8px}
.pemp .renf svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2}
.pemp .renf.sort{color:var(--violet);background:var(--violet-pale)}
.prow:has(.renf:not(.sort)) .pemp{box-shadow:inset 3px 0 0 var(--bleu)}
/* Bandeau des demandes reçues */
.renfbar{display:flex;align-items:flex-start;gap:12px;padding:12px 15px;margin-bottom:11px;
background:var(--bleu-pale);border:1px solid #D5DDEC;border-left:3px solid var(--bleu);
border-radius:var(--r)}
.renfbar .ico{width:19px;height:19px;stroke:var(--bleu);fill:none;stroke-width:1.8;flex:none;margin-top:1px}
.renfbar .rf1{flex:1;min-width:0}
.renfbar .rf1 b{display:block;font-size:13px;font-weight:600;color:#3E5480;margin-bottom:6px}
.renfbar .rfl{display:flex;align-items:center;gap:10px;padding:6px 0;flex-wrap:wrap;
border-top:1px solid rgba(90,110,165,.15)}
.renfbar .rfl span{flex:1;min-width:200px;font-size:12px;color:var(--encre-2)}
.renfbar .rfl form{display:flex;gap:6px}
.renfbar .btn{background:#fff}
/* Liste des renforts en cours */
.renfline{display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid var(--ligne);
border-radius:10px;margin-bottom:7px;background:#fff}
.renfline .rn{flex:1;min-width:0}
.renfline .rn b{display:block;font-size:13px;font-weight:600}
.renfline .rn i{display:block;font-style:normal;font-size:11px;color:var(--muet);margin-top:1px}
.renfline .rs{font-size:10.5px;font-weight:700;border-radius:20px;padding:3px 10px;flex:none}
.renfline .rs.ok{background:var(--vert-pale);color:var(--vert)}
.renfline .rs.att{background:var(--jaune-pale);color:var(--jaune)}
/* Ventilation des heures */
.vent{display:grid;gap:7px}
.ventl{display:flex;align-items:center;gap:11px;padding:9px 12px;border:1px solid var(--ligne);
border-radius:10px;background:#fff}
.ventl .vn{flex:1;min-width:0;font-size:13px;font-weight:600}
.ventl .vn small{display:block;font-size:11px;font-weight:500;color:var(--muet)}
.ventl .vb{width:120px;height:7px;border-radius:4px;background:var(--surface-2);
overflow:hidden;flex:none}
.ventl .vb i{display:block;height:100%;border-radius:4px;background:var(--terra)}
.ventl .vh{font-family:var(--f-titre);font-size:14px;font-weight:600;min-width:56px;
text-align:right;flex:none}
.ventl .vp{font-size:11px;color:var(--muet);min-width:38px;text-align:right;flex:none}
/* ═══ Socle des contrôles de formulaire ═══════════════════════
98 cases à cocher dans l'application, 6 portaient accent-color :
toutes les autres affichaient la coche BLEUE du navigateur, hors
charte. Une règle globale suffit — les composants qui masquent
l'input natif (interrupteurs, pastilles) ne sont pas concernés. */
input[type="checkbox"],
input[type="radio"]{accent-color:var(--terra)}
/* La sélection de texte suit aussi la charte */
::selection{background:var(--terra-pale);color:var(--terra-h)}
/* ── Anneau de focus, au clavier seulement ──
L'ancienne règle imposait « border-radius:4px » à TOUT élément
focalisé : les champs arrondis se carraient au clic, et l'anneau
orange décalé de 2 px donnait ce halo flou qui débordait des
angles. Le rayon n'est plus touché — chaque élément garde le sien
— et le contour épouse la forme (v8.9). */
:focus-visible{outline:2px solid var(--terra);outline-offset:1px}
/* Les champs ont déjà leur propre marque de focus : un contour en
plus ferait double emploi. */
.fi:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none}
/* ═══ Sélecteur de semaine (v7.0) ═══ */
.wkdbtn{border:none;background:none;font-family:inherit;font-size:inherit;font-weight:inherit;
color:inherit;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.wkdbtn:hover{color:var(--terra-h)}
.datepop{position:fixed;inset:0;z-index:340;display:flex;align-items:center;justify-content:center}
.datepop[hidden]{display:none}
.datepop .dpv{position:absolute;inset:0;background:rgba(43,32,24,.42)}
.datepop .dpbox{position:relative;width:min(390px,94vw);background:#fff;border-radius:15px;
box-shadow:var(--ombre-2);overflow:hidden}
.dph{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--ligne)}
.dph b{flex:1;text-align:center;font-family:var(--f-titre);font-size:15px;font-weight:600;
text-transform:capitalize}
.dph button{width:34px;height:34px;border:1px solid var(--ligne);border-radius:10px;background:#fff;
font-size:17px;line-height:1;color:var(--encre-2);font-family:var(--f-ui)}
.dph button:hover{border-color:var(--terra);color:var(--terra-h)}
.dpg{display:grid;grid-template-columns:44px repeat(7,1fr);gap:2px;padding:10px}
.dpj{text-align:center;font-size:10px;font-weight:700;color:var(--muet);padding:4px 0;
text-transform:uppercase}
.dpsem{display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;
color:var(--muet);border:none;background:none;border-radius:8px;font-family:var(--f-ui)}
.dpsem.lien{cursor:pointer}
.dpsem.lien:hover{background:var(--terra-pale);color:var(--terra-h)}
.dpsem.on{background:var(--terra);color:#fff}
.dpd{border:none;background:none;border-radius:8px;padding:8px 0;font-size:13px;font-weight:500;
color:var(--encre);font-family:var(--f-ui);cursor:pointer;font-variant-numeric:tabular-nums}
.dpd:hover{background:var(--surface-2)}
.dpd.hors{color:var(--ligne-2)}
.dpd.auj{font-weight:700;color:var(--terra-h)}
.dpd.sem{background:var(--terra-pale)}
.dpd.sem:hover{background:#F9DFD6}
.dpf{display:flex;align-items:center;gap:10px;padding:11px 14px;border-top:1px solid var(--ligne);
background:var(--surface-2);flex-wrap:wrap}
.dpsaisie{display:flex;align-items:center;gap:7px;margin-left:auto;font-size:11.5px;
color:var(--muet)}
.dpsaisie input{border:1px solid var(--ligne-2);border-radius:8px;padding:5px 8px;
font-size:12px;font-family:var(--f-ui)}
/* Dépôt interdit sur une absence ou hors contrat */
.pcell.dinterdit{background:var(--rouge-pale)!important;
box-shadow:inset 0 0 0 1.5px var(--rouge);cursor:not-allowed}
.pcell.dinterdit::after{content:'⃠';position:absolute;top:50%;left:50%;
transform:translate(-50%,-50%);font-size:20px;color:var(--rouge);opacity:.55;
pointer-events:none;z-index:5}
/* L'affichage des alertes se coupe depuis le menu Affichage :
utile pour relire un planning sans le bruit des badges.
Le BANDEAU de prévenance, lui, n'est plus concerné (v10.4) : une
pastille de plus sur un shift est du bruit qu'on peut vouloir
couper le temps d'une relecture, mais une semaine publiée trop
tard est un fait juridique, et il tient en une ligne en haut de
l'écran. Le masquer parce qu'on a coché une case il y a six mois,
c'est exactement ce qu'on ne pourra pas expliquer devant un
inspecteur. */
body.sans-alertes .wemp,
body.sans-alertes .wshift{display:none!important}
/* ── On ne coupe pas une alerte légale en silence ──
Le réglage vit dans le navigateur : décoché une fois, il le reste
des mois, sur ce poste-là seulement, sans que rien à l'écran ne le
rappelle. Un bandeau discret le dit, et propose de les rétablir. */
.alertesoff{display:none}
body.sans-alertes .alertesoff{display:flex;align-items:center;gap:10px;
background:var(--jaune-pale);border:1px solid #EFD3A6;color:#8A5A17;
border-radius:11px;padding:9px 13px;font-size:12.5px;margin:0 0 12px}
.alertesoff b{font-weight:700}
.alertesoff button{margin-left:auto}
/* ═══ Ligne Événements (v7.2) ═══
Une bande basse entre les jours et les non-assignés. Les
vacances forment une rangée continue, fériés et anniversaires
s'alignent dessous — sans quoi une cellule chargée décalait
toutes les autres. */
.pl2 .evrow{border-top:1px solid var(--ligne);background:#FCFAF5}
.pl2 .evrow .evlab{display:flex;align-items:center;gap:7px;padding:5px 12px;
font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:var(--muet);background:var(--surface-2)}
.pl2 .evrow .evlab .ico{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.9}
.evcell{padding:0;display:grid;grid-template-rows:auto auto;align-content:start;
border-left:1px solid var(--surface-2);min-height:24px}
.evcell.we{background:#FBF8F1}
.evcell.today{background:var(--auj)}
/* Rangée 1 : la bande de vacances, toujours à la même hauteur */
.evcell .ev.vac{grid-row:1}
/* Rangée 2 : fériés et anniversaires, côte à côte */
.evcell .ev.ferie,.evcell .ev.anniv{grid-row:2;margin:2px 4px}
.evcell:not(:has(.ev.vac)) .ev.ferie,
.evcell:not(:has(.ev.anniv)) .ev.vac{grid-row:1}
.ev{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:600;
line-height:1.25;border-radius:4px;padding:2px 6px;white-space:nowrap;overflow:hidden;
text-overflow:ellipsis;min-width:0}
.ev .ico{width:10px;height:10px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9}
.ev.ferie{background:var(--rouge-pale);color:var(--rouge);justify-self:start}
.ev.anniv{background:var(--violet-pale);color:var(--violet);justify-self:start}
.ev.anniv i{font-style:normal;opacity:.7}
/* Vacances : une bande pleine, teintée selon sa composition.
Un changement de libellé ou de zones fait changer la couleur —
la coupure se voit sans avoir à lire. */
.ev.vac{border-radius:0;padding:2px 7px;min-height:17px;font-size:9px;
justify-content:flex-start;display:flex;width:100%;font-weight:600;
border-top:1px solid rgba(62,43,26,.07);border-bottom:1px solid rgba(62,43,26,.07)}
.ev.vac.deb{border-radius:4px 0 0 4px}
.ev.vac.fin{border-radius:0 4px 4px 0}
.ev.vac.deb.fin{border-radius:4px}
.ev.vac .vl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Huit teintes claires, assez distinctes pour marquer un changement
sans jamais gêner la lecture des shifts en dessous. */
.ev.vac.t0{background:#E7F0DE;color:#3D5C2A}
.ev.vac.t1{background:#E4EAF6;color:#3E5480}
.ev.vac.t2{background:#FAEDD6;color:#7A5510}
.ev.vac.t3{background:#F3E7F2;color:#6B4768}
.ev.vac.t4{background:#DDEEEE;color:#245D5D}
.ev.vac.t5{background:#FBE7E4;color:#A2452F}
.ev.vac.t6{background:#EFE9DC;color:#5C4A2E}
.ev.vac.t7{background:#E2EDF4;color:#2F5872}
/* Masquables depuis le menu Affichage */
body.sans-anniv .ev.anniv,
body.sans-feries .ev.ferie,
body.sans-vacances .ev.vac{display:none}
body.sans-anniv.sans-feries.sans-vacances .evrow{display:none}
/* ── LA FAMILLE, ET L'AIDE À LA DEMANDE ── (v14.7.1)
Les titres de section du kit employaient `.kith h2 + p` — trois
classes qui n'ont JAMAIS été définies nulle part. Les titres
tombaient sur le style par défaut du navigateur : mauvaise fonte,
mauvaise taille, mauvaise couleur, interlignes au hasard. Un design
system dont les propres titres ne sont pas dans le design system.
Ils emploient maintenant l'en-tête de carte, qui, lui, est
documenté et employé par toute l'application. */
.kitfam{margin-top:26px}
.kitfam .ch h3{font-size:15px}
.kitfamh{border-bottom:1px solid var(--ligne);margin-bottom:2px}
/* Le « ? » : la règle d'un composant se lit quand on la demande.
Elle faisait quinze lignes grises sous chaque démonstration —
c'est ce qui rendait la page illisible et interminable. Le survol
la montre, le clic la garde ouverte. */
.kitq{margin-left:6px;width:17px;height:17px;border-radius:50%;
border:1px solid var(--ligne-2);background:#fff;color:var(--muet);
font:700 10.5px/1 var(--f-ui);cursor:pointer;vertical-align:middle;padding:0}
.kitq:hover,.kitq[aria-expanded="true"]{border-color:var(--terra);color:var(--terra);
background:var(--terra-pale)}
/* Le repli compte : la classe `kitaide` est posée par le script. Sans
script, aucun « ? » n'apparaît — et l'aide reste donc VISIBLE, au
lieu d'être cachée derrière un bouton qui n'existe pas. */
.kitaide .kitrow .kithelp{display:none}
.kitaide .kitrow.aide .kithelp{display:block}
/* ── LE SOMMAIRE DU KIT ── (v14.7)
Cent soixante-sept composants sur une page. Sans sommaire, vérifier
qu'un composant existe demande de tout parcourir à la molette — et
l'on finit par en réécrire un qui existait déjà. Il colle en haut :
on cherche justement quand on est au milieu. */
.kitnav{position:sticky;top:0;z-index:20;margin-bottom:16px}
.kitnavl{display:flex;flex-wrap:wrap;gap:5px;padding:10px 14px}
.kitnavl a{padding:5px 11px;border-radius:20px;border:1px solid var(--ligne-2);
background:#fff;font-size:12px;font-weight:600;color:var(--encre-2);text-decoration:none}
.kitnavl a:hover{border-color:var(--terra);color:var(--terra);background:var(--terra-pale)}
/* ═══ LE CHARGEMENT ═══ (v14.6.3)
Un écran qui va chercher quelque chose sur le réseau doit le
DIRE. Sans cela on presse deux fois, on croit que c'est cassé, ou
l'on quitte la page pendant l'appel.
Deux formes, une seule idée :
· `.charge` — une ligne : un rond qui tourne et ce qu'on
attend, en clair (« Régions d'Allemagne… »).
· `.chargel` — des barres grises à la place du contenu à venir,
de la taille de ce qui arrive. La page ne saute
pas quand le contenu se pose.
Ni l'un ni l'autre ne remplace un bouton : ils remplacent le VIDE
entre le geste et sa réponse. */
.charge{display:flex;align-items:center;gap:10px;padding:12px 2px;
font-size:12.5px;color:var(--muet)}
.chargeb{flex:none;width:16px;height:16px;border-radius:50%;
border:2px solid var(--ligne);border-top-color:var(--terra);
animation:chargetourne .8s linear infinite}
@keyframes chargetourne{to{transform:rotate(360deg)}}
.chargel{display:flex;flex-wrap:wrap;gap:7px;padding:2px 0}
.chargel i{display:block;height:30px;border-radius:20px;background:var(--surface-2);
border:1px solid var(--ligne);animation:chargepulse 1.2s ease-in-out infinite}
.chargel i:nth-child(3n+1){width:104px}
.chargel i:nth-child(3n+2){width:148px;animation-delay:.15s}
.chargel i:nth-child(3n+3){width:82px;animation-delay:.3s}
@keyframes chargepulse{0%,100%{opacity:1}50%{opacity:.45}}
/* Un mouvement permanent fatigue : on le ralentit, on ne le retire
pas — sinon plus rien ne dit que ça travaille. */
/* Un mouvement permanent fatigue : on le ralentit, on ne le retire
pas — sinon plus rien ne dit que ça travaille. Le filet et les
barres, eux, s'immobilisent : ils occupent déjà la place. */
@media (prefers-reduced-motion:reduce){
.chargeb,.btn.occupe::after,.chip.occupe span::before,.chargevoile::after{animation-duration:2.4s}
.chargel i{animation:none;opacity:.7}
.chargefilet::after{animation:none;background-position:0 0;background-size:100% 100%;opacity:.5}
}
.charge.ko{color:var(--rouge)}
.charge.ko .chargeb{animation:none;border-color:var(--rouge-pale);border-top-color:var(--rouge)}
/* ── LE FILET ── (v14.6.4)
Un rafraîchissement d'ENSEMBLE : plusieurs endroits de la carte
vont changer, aucun en particulier. Un rond posé quelque part
désignerait un coupable arbitraire ; le filet court en haut de la
carte et laisse tout le contenu lisible et cliquable.
`.card` porte `overflow:hidden` : le filet se colle à `top:0`, pas
au-dessus, sinon il est rogné et l'on ne voit rien. */
.chargefilet{position:relative}
.chargefilet::after{content:'';position:absolute;left:0;right:0;top:0;height:3px;z-index:4;
background:linear-gradient(90deg,transparent,var(--terra),transparent);
background-size:44% 100%;background-repeat:no-repeat;
animation:chargeglisse 1.15s ease-in-out infinite;pointer-events:none}
@keyframes chargeglisse{0%{background-position:-45% 0}100%{background-position:145% 0}}
/* ── LE GESTE ATTEND LÀ OÙ IL A ÉTÉ FAIT ── (v14.6.4)
Un bouton qui part chercher quelque chose ne se remplace pas par
un rond ailleurs : il devient son propre chargement, SANS changer
de largeur — sinon la rangée se réorganise sous le doigt et le
bouton d'à côté vient se placer là où l'on allait cliquer.
Le texte reste dans le flux (`color:transparent`) : c'est lui qui
tient la largeur. `pointer-events:none` fait le reste — on ne
clique pas deux fois. */
.btn.occupe{color:transparent;position:relative;pointer-events:none}
.btn.occupe::after{content:'';position:absolute;inset:0;margin:auto;width:14px;height:14px;
border-radius:50%;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;
animation:chargetourne .7s linear infinite}
.btn:not(.p):not(.dp):not(.danger).occupe::after{border-color:var(--ligne);border-top-color:var(--terra)}
/* La pastille qu'on vient de cocher : le signe devient un rond le
temps de l'aller-retour, à l'endroit exact du clic. Le masque est
levé, sans quoi il découperait le rond (v14.72). */
.chip.occupe{pointer-events:none}
.chip.occupe span{opacity:.6}
.chip.occupe span::before{content:'';width:11px;height:11px;border-radius:50%;
background:none;-webkit-mask:none;mask:none;opacity:1;
border:2px solid var(--ligne-2);border-top-color:var(--terra);
animation:chargetourne .7s linear infinite}
/* ── LE VOILE ── (v14.6.4)
Le seul cas où l'on fige : le bloc entier va être REMPLACÉ, et ce
qu'on y lit est déjà faux. Partout ailleurs il est trop brutal —
il éteint une zone pour un geste qui n'en concerne qu'une partie.
Le parent doit porter `position:relative`. */
.chargevoile{position:relative}
.chargevoile::before{content:'';position:absolute;inset:0;z-index:2;border-radius:inherit;
background:rgba(251,249,244,.72)}
.chargevoile::after{content:'';position:absolute;left:50%;top:50%;width:20px;height:20px;
margin:-10px 0 0 -10px;border-radius:50%;border:2px solid var(--ligne);
border-top-color:var(--terra);animation:chargetourne .8s linear infinite;z-index:3}
/* Choix des zones suivies */
.zonepick{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
/* État du calendrier scolaire */
.vacetat{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;
padding:10px 13px;border:1px solid var(--ligne);border-radius:10px;background:var(--surface-2)}
.vacetat span{flex:1;min-width:200px;font-size:12px;line-height:1.5}
.vacetat .ok{color:var(--vert);font-weight:600}
.vacetat .att{color:var(--encre-2)}
/* ── Les vacances d'ailleurs ── (v14.6)
Un volet par pays : replié tant qu'aucune région n'est suivie,
sinon vingt-six cantons suisses noieraient les quatre zones
françaises. */
.vacp{border:1px solid var(--ligne);border-radius:10px;margin-top:8px;background:#fff}
.vacp[open]{background:var(--surface-2)}
.vacpt{display:flex;align-items:center;gap:10px;padding:9px 13px;cursor:pointer;
font-size:13px;list-style:none}
.vacpt::-webkit-details-marker{display:none}
.vacpt::before{content:'';width:6px;height:6px;border-right:1.5px solid var(--muet);
border-bottom:1.5px solid var(--muet);transform:rotate(-45deg);transition:transform .15s}
.vacp[open] .vacpt::before{transform:rotate(45deg)}
.vacpt span{margin-left:auto;color:var(--muet);font-size:12px;font-weight:500}
.vacz{padding:0 13px 13px}
.vacz .chip span{font-weight:500}
/* Les périodes saisies à la main : l'Angleterre, et les oublis. */
/* L'état d'une région : ce qu'elle porte, et quand elle sert. */
.vacpr{flex-direction:column;align-items:stretch;gap:6px}
.vacpr span{min-width:0}
.vacpr b{color:var(--encre);margin-right:4px}
.vacpr a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* Le choix d'un pays : une liste déroulante, pas six volets. */
.vacsel{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.vacsel select{max-width:260px}
.vacpan{border:1px solid var(--ligne);border-radius:10px;margin-top:8px;
background:var(--surface-2);padding:10px 13px}
.vacpan h4{margin:0 0 8px;font-size:13px;display:flex;align-items:center;gap:8px}
.vacpan h4 b{font-weight:600}
.vacpan h4 button{margin-left:auto;background:none;border:0;color:var(--muet);
font-size:12px;cursor:pointer;padding:2px 4px}
.vacpan h4 button:hover{color:var(--rouge);text-decoration:underline}
/* L'état d'une région tient DANS sa pastille : « Bavière · 12
périodes ». Une colonne d'états à côté obligeait à faire le
rapprochement de l'œil. */
.vacz2{display:flex;flex-wrap:wrap;gap:7px}
.vacz2 i{font-style:normal;opacity:.75;font-weight:500}
.vacml{margin-top:18px}
.vacmr{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 0;
border-top:1px solid var(--ligne);font-size:12.5px}
.vacmr b{font-weight:600}
.vacmr span{color:var(--muet)}
.vacmr form{margin-left:auto}
.vacmr .fi{width:auto;min-width:120px}
/* Badge d'alerte du salarié, ancré dans le coin de sa cellule */
.pemp{position:relative}
.wemp.wcoin{position:absolute;top:4px;right:4px;z-index:4;padding:1px 5px;
border-radius:20px;line-height:1.35;font-size:9.5px;gap:3px}
.wemp.wcoin svg{width:10px;height:10px}
/* Sur les lignes serrées, le badge ne doit pas chevaucher le total */
body.dens-dense .wemp.wcoin{top:2px;right:2px;font-size:9px;padding:0 4px}
/* Icône d'avertissement, en masque pour suivre la couleur du texte.
Sur une seule ligne : une URL coupée par un antislash n'est pas
interprétée de la même façon par tous les navigateurs. */
:root{--ico-warn:url("data:image/svg+xml;utf8,er avril » s'affichait « 1 er avril ». Le flex ne
servait qu'à aligner une icône ; on le fait à la main. */
.champ .cv{font-size:14px;font-weight:500;color:var(--encre);line-height:1.4;word-break:break-word;
display:block}
.champ .cv .ico{width:14px;height:14px;color:var(--muet);vertical-align:-2px;margin-right:5px}
.champ .cv>.pill{margin-left:6px;vertical-align:1px}
.champ .cv.mono{font-family:ui-monospace,Menlo,monospace;font-size:12.5px}
/* Un champ vide se dit, il ne se laisse pas deviner : un blanc se
confond avec un champ qu'on aurait oublié d'afficher. */
.champ .cv.vide{color:var(--muet);font-weight:400;font-style:italic}
.champ .ch2{font-size:11px;color:var(--muet);margin-top:3px;line-height:1.4}
/* L'intertitre d'un groupe de champs, dans une carte. */
.champt{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
color:var(--terra);margin:0 0 11px}
.champt.sep{margin-top:18px;padding-top:16px;border-top:1px solid var(--ligne)}
/* ═══ LA DONNÉE SENSIBLE ═══ (v11.15)
Violet, comme la mobilité : il dit « accès restreint », pas
« attention ». Le rouge et l'ambre servent déjà à alerter — s'ils
servaient aussi à classer, ils n'alerteraient plus. */
.sensible{background:var(--violet-pale);border:1px solid #E4D2E0;border-radius:var(--r-sm);
padding:12px 14px;margin-bottom:14px}
.sensible .st{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
color:var(--violet);display:flex;align-items:center;gap:6px;margin-bottom:11px}
.sensible .st .ico{width:12px;height:12px}
.masque{font-family:ui-monospace,Menlo,monospace;letter-spacing:1px;color:var(--muet)}
/* ═══ LA LISTE DE COMPLÉTUDE ═══ (v11.15)
Ce qu'on attend d'un dossier, et ce qui y est. Trois états et
trois seulement : présent, manquant, facultatif. Un quatrième
obligerait à réfléchir avant de lire. */
.pieces{display:flex;flex-direction:column;gap:1px}
.piece{display:flex;align-items:center;gap:9px;font-size:12.5px;padding:3.5px 0;color:var(--encre-2)}
.piece .pb{width:15px;height:15px;border-radius:5px;flex:none;display:flex;align-items:center;
justify-content:center;color:#fff;font-size:9px;font-weight:700}
.piece .pb .ico{width:10px;height:10px}
.piece .pb.ok{background:var(--vert)}
.piece .pb.no{background:var(--ligne-2)}
.piece .pb.ko{background:var(--rouge)}
.piece em{font-style:normal;margin-left:auto;font-size:10.5px;color:var(--muet);flex:none}
.piece b{color:var(--encre)}
/* L'anneau de complétude : une proportion se lit plus vite qu'un
pourcentage écrit. */
.anneau{display:flex;align-items:center;gap:13px;margin-bottom:12px}
.anneau svg{transform:rotate(-90deg);flex:none}
.anneau .at b{font-family:var(--f-titre);font-size:17px;font-weight:700;display:block;line-height:1.1}
.anneau .at span{font-size:12px;color:var(--muet)}
/* La grille de l'onglet Identité : le dossier à gauche, ce qui parle
du dossier lui-même à droite (v11.15). */
.dosgrid2{display:grid;grid-template-columns:1fr 330px;gap:16px;align-items:start}
@media(max-width:1080px){.dosgrid2{grid-template-columns:1fr}}
.bkeys{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:3px 18px;
margin-top:14px;padding-top:13px;border-top:1px solid var(--ligne)}
.bkeys .k i{display:block;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.06em;
text-transform:uppercase;color:var(--muet)}
.bkeys .k b{font-weight:600;font-size:12.5px}
.bkeys .k b.vk{color:var(--rouge)}
/* ═══ LES ONGLETS DANS L'EN-TÊTE DE FICHE ═══ (v11.15)
Troisième dessin d'onglet, et le dernier : il ne remplace pas
.tabs / .pgt, il répond à un autre besoin. Ceux-là posent une
barre AU-DESSUS d'un contenu ; celui-ci vit DANS l'en-tête de
fiche, sous le nom de la personne.
Ce qu'on y gagne se mesure : une barre séparée coûte sa hauteur
plus deux marges — une soixantaine de pixels avant le premier mot
du dossier. Ici, la carte d'identité et la navigation ne font
qu'un bloc, et le nom du salarié reste collé à ses onglets : on
ne se demande jamais de qui on lit la fiche.
D'où le soulignement plutôt que la pastille : sur un fond crème
déjà encadré, une pastille blanche dans un cadre blanc ne se
détache plus. Le filet terracotta, lui, se lit. */
.bandtabs{display:flex;gap:2px;margin:14px -18px -16px;padding:0 12px;
border-top:1px solid var(--ligne);background:var(--surface-2);
border-radius:0 0 var(--r) var(--r);overflow-x:auto;scrollbar-width:none}
.bandtabs::-webkit-scrollbar{display:none}
.bandtabs .ftab{border:0;background:none;border-radius:0;padding:11px 15px;
border-bottom:2px solid transparent;font-size:13.5px;font-weight:600;color:var(--muet);
white-space:nowrap;flex:none}
.bandtabs .ftab:hover{border-color:transparent;color:var(--encre);background:none}
.bandtabs .ftab.on{background:none;color:var(--encre);border-bottom-color:var(--terra)}
.bandtabs .ftab .n{background:var(--ligne);color:var(--encre-2)}
.bandtabs .ftab.on .n{background:var(--terra);color:#fff}
.bandtabs .ftab .n.al{background:var(--rouge);color:#fff}
.ftabs{display:flex;gap:5px;margin:14px 0;flex-wrap:wrap}
.ftab{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--ligne);
background:var(--carte);border-radius:11px;font-family:var(--f-ui);font-size:12.5px;font-weight:600;
color:var(--encre-2);cursor:pointer;box-shadow:var(--ombre)}
.ftab .n{font-size:10px;font-weight:700;background:var(--surface-2);border-radius:9px;padding:0 6px;color:var(--muet)}
.ftab .n.al{background:var(--rouge-pale);color:var(--rouge)}
.ftab:hover{border-color:var(--muet)}
.ftab.on{background:var(--encre);border-color:var(--encre);color:#fff}
.ftab.on .n{background:rgba(255,255,255,.2);color:#fff}
.dospane .pane{display:none}
.dospane .pane.on{display:block}
.apgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:14px;align-items:start}
.g3s{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
@media(max-width:1150px){.apgrid,.g3s{grid-template-columns:1fr}}
.stat5{display:flex;gap:14px;padding:14px 16px;flex-wrap:wrap}
.stat5 .s5{flex:1;min-width:110px}
.stat5 .s5 b{display:block;font-family:var(--f-titre);font-size:21px;font-weight:700;line-height:1.1}
.stat5 .s5 b.p{color:var(--vert)} .stat5 .s5 b.m{color:var(--rouge)}
.stat5 .s5 span{display:block;font-size:11px;color:var(--muet)}
.stat5 .s5 .d{font-size:10.5px;color:var(--muet)}
.kvl{display:flex;justify-content:space-between;gap:12px;padding:9px 16px;border-bottom:1px solid var(--ligne);
font-size:12.5px}
.kvl:last-child{border-bottom:none}
.kvl span{color:var(--encre-2)}
.kvl b{font-weight:600;text-align:right}
.kvl b.miss{color:var(--rouge)}
.vigl{display:flex;align-items:center;gap:11px;padding:11px 16px;border-bottom:1px solid var(--ligne)}
.vigl:last-child{border-bottom:none}
.vigl .ic{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;
font-weight:700;flex:none;font-size:13px}
.vigl.r .ic{background:var(--rouge-pale);color:var(--rouge)}
.vigl.w .ic{background:var(--jaune-pale);color:var(--jaune)}
.vigl .tx{flex:1;font-size:12.5px;font-weight:600}
.semh{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:12px 16px 4px;font-size:9.5px;
color:var(--muet);text-align:center;text-transform:uppercase;font-weight:700}
.semg{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:0 16px 14px}
.semg div{height:34px;border-radius:7px;display:flex;align-items:center;justify-content:center;
font-family:var(--f-titre);font-size:11.5px;font-weight:700;background:var(--surface-2);color:var(--muet)}
.semg div.w{background:var(--vert-pale);color:var(--vert)}
.semg div.a{background:var(--violet-pale);color:var(--violet)}
.semg div.auj{box-shadow:inset 0 0 0 2px var(--terra)}
/* ── DEUX CRÉNEAUX LE MÊME JOUR ── (v11.78)
« Indisponible le matin » ET « indisponible en soirée » le même
lundi : la case s'allonge et les empile plutôt que de n'en montrer
qu'un. Elle ne grandit QUE dans ce cas — une grille dont toutes les
cases font deux lignes pour une seule qui en a besoin se lit moins
bien. Modificateur, jamais objet : « .ind2 » n'existe pas seul. */
.semg div.ind2{height:auto;min-height:34px;flex-direction:column;gap:1px;
padding:5px 3px;font-size:9.5px;line-height:1.25}
/* ═══ v7.29 · Autocomplétion d'adresse (BAN) ═══ */
.banbox{position:absolute;z-index:400;background:var(--carte);border:1px solid var(--ligne);
border-radius:12px;box-shadow:var(--ombre-2);overflow:hidden;max-width:520px}
.banit{display:block;width:100%;text-align:left;border:none;background:none;padding:9px 13px;
cursor:pointer;font-family:var(--f-ui);font-size:13px;color:var(--encre)}
.banit b{display:block;font-weight:600}
.banit span{font-size:11.5px;color:var(--muet)}
.banit:hover,.banit.on{background:var(--terra-pale)}
.banpied{padding:6px 13px;font-size:10.5px;color:var(--muet);background:var(--surface-2);
border-top:1px solid var(--ligne)}
/* ═══ v7.29 · Formulaire de contrat : sections et unités ═══ */
.fsec2{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muet);
margin:18px 0 10px;padding-top:14px;border-top:1px solid var(--ligne)}
.fsec2:first-child{margin-top:0;padding-top:0;border-top:none}
.fbloc{background:var(--surface-2);border:1px solid var(--ligne);border-radius:12px;padding:12px 13px;
margin-bottom:12px}
.fbloc .fg:last-child{margin-bottom:0}
.funit{position:relative;display:block}
.funit input{padding-right:30px;width:100%}
.funit span{position:absolute;right:11px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--muet)}
.fhelp b.alr{color:var(--rouge)} .fhelp b.alw{color:var(--jaune)}
/* ═══ v7.29 · Hiérarchie de la fiche : le bloquant d'abord ═══ */
.alertefiche{display:flex;align-items:center;gap:13px;background:var(--rouge-pale);
border:1px solid #EED6D7;border-left:4px solid var(--rouge);border-radius:12px;
padding:12px 15px;margin-bottom:14px}
.alertefiche .ic{width:26px;height:26px;border-radius:50%;background:var(--rouge);color:#fff;
display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.alertefiche .tx{flex:1;font-size:12.5px;color:#8A2C31;line-height:1.5}
.alertefiche .tx b{display:block;font-family:var(--f-titre);font-size:13.5px;color:var(--rouge)}
.alertefiche .btn{background:#fff;border-color:#E3BFC1;color:var(--rouge);font-weight:700}
.alertefiche .btn:hover{background:var(--rouge);border-color:var(--rouge);color:#fff}
.ch.chko{background:var(--rouge-pale);border-bottom-color:#EED6D7}
.ch.chko h3{color:var(--rouge)}
/* ═══ v7.30 · Listes déroulantes avec recherche ═══
Un natif à 180 pays oblige à faire défiler ; ici on tape. */
.selr{position:relative}
.selrb{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:#fff;
border:1px solid var(--ligne-2);border-radius:10px;padding:8px 11px;font-family:var(--f-ui);
font-size:13px;color:var(--encre);cursor:pointer;min-height:38px}
.selrb:hover{border-color:var(--muet)}
.selrb .lbl{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.selrb .car{color:var(--muet);font-size:12px}
.selrb.vide .lbl{color:var(--muet)}
.selrp{position:absolute;z-index:400;background:var(--carte);border:1px solid var(--ligne);
border-radius:12px;box-shadow:var(--ombre-2);overflow:hidden;max-width:420px}
.selrs{padding:8px;border-bottom:1px solid var(--ligne);background:var(--surface-2)}
.selrs input{width:100%;font-family:var(--f-ui);font-size:13px;border:1px solid var(--ligne-2);
border-radius:9px;padding:7px 10px;background:#fff}
.selrs input:focus{outline:none;border-color:var(--terra)}
.selrl{max-height:264px;overflow-y:auto}
.selro{display:flex;align-items:center;gap:8px;width:100%;text-align:left;border:none;background:none;
padding:8px 13px;cursor:pointer;font-family:var(--f-ui);font-size:13px;color:var(--encre)}
.selro i{margin-left:auto;font-style:normal;color:var(--terra)}
.selro:hover,.selro.on{background:var(--terra-pale)}
.selro.sel{font-weight:600}
.selrv{padding:14px;text-align:center;color:var(--muet);font-size:12.5px}
/* ═══ v7.35 · Champ téléphone (forme B) ═══
Un seul bloc : l'indicatif est un préfixe cliquable, pas un
second champ. Le drapeau confirme le pays d'un coup d'œil. */
.telf{display:flex;align-items:stretch;border:1px solid var(--ligne-2);border-radius:10px;
background:#fff;overflow:hidden}
.telf:focus-within{border-color:var(--terra)}
.telpfx{display:flex;align-items:center;gap:6px;padding:0 10px;background:var(--surface-2);
border:none;border-right:1px solid var(--ligne);cursor:pointer;font-family:var(--f-ui);
font-size:13px;color:var(--encre);white-space:nowrap}
.telpfx:hover{background:var(--terra-pale)}
.telpfx .dr{font-size:15px;line-height:1}
.telpfx .chv{font-size:10px;color:var(--muet)}
.telnum{flex:1;min-width:0;border:none;padding:9px 11px;font-family:var(--f-ui);font-size:13.5px;
font-variant-numeric:tabular-nums;letter-spacing:.02em;background:none;color:var(--encre)}
.telnum:focus{outline:none}
.telnum.ko{background:#FFFDF6}
.telpop{position:absolute;z-index:400;width:266px;background:var(--carte);border:1px solid var(--ligne);
border-radius:12px;box-shadow:var(--ombre-2);overflow:hidden}
.telpop .tr{padding:8px;border-bottom:1px solid var(--ligne);background:var(--surface-2)}
.telpop .tr input{width:100%;border:1px solid var(--ligne-2);border-radius:9px;padding:7px 10px;
font-family:var(--f-ui);font-size:13px;background:#fff}
.telpop .tr input:focus{outline:none;border-color:var(--terra);box-shadow:0 0 0 3px var(--terra-pale)}
.telpop .tl{max-height:240px;overflow-y:auto}
.telpop .topt{display:flex;align-items:center;gap:9px;width:100%;border:none;background:none;
padding:8px 12px;cursor:pointer;font-family:var(--f-ui);font-size:13px;text-align:left;color:var(--encre)}
.telpop .topt .ind{margin-left:auto;color:var(--muet);font-size:12px}
.telpop .topt:hover{background:var(--terra-pale)}
.telpop .topt.on{font-weight:600}
.telpop .tvide{padding:14px;text-align:center;color:var(--muet);font-size:12.5px}
.fi.ko{border-color:var(--jaune);box-shadow:0 0 0 3px var(--jaune-pale)}
.fhelp .alv{color:var(--vert);font-weight:600}
.fnir{display:flex;gap:8px;align-items:center}
.fnir .fi{flex:1;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.fnir .btn.cache{display:none}
/* Bascule temps plein / temps partiel */
.segf{display:flex;background:var(--surface-2);border:1px solid var(--ligne);border-radius:10px;padding:3px}
.segf button{flex:1;border:none;background:none;font-family:var(--f-ui);font-weight:600;font-size:12.5px;
color:var(--encre-2);padding:7px 10px;border-radius:8px;cursor:pointer}
.segf button.on{background:#fff;color:var(--encre);box-shadow:var(--ombre)}
/* ═══ v7.32 · Titres de section dans les formulaires ═══
Un intertitre en petites capitales grises se confond avec une
aide ; il faut un vrai titre pour découper un formulaire long. */
.ftitre{font-family:var(--f-titre);font-size:15px;font-weight:700;color:var(--encre);
margin:22px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--terra-pale);
display:flex;align-items:center;gap:9px}
.ftitre::before{content:'';width:4px;height:16px;border-radius:2px;background:var(--terra);flex:none}
.pb > .ftitre:first-child,.estep > .ftitre:first-child{margin-top:0}
/* Bulle d'information : le détail d'un calcul, à la demande */
.bulle{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;
border-radius:50%;background:var(--surface-2);border:1px solid var(--ligne-2);color:var(--muet);
font-size:10px;font-weight:700;cursor:help;position:relative;margin-left:5px}
.bulle:hover,.bulle:focus{background:var(--encre);border-color:var(--encre);color:#fff;outline:none}
.bulle .bt{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
width:290px;background:var(--encre);color:#fff;border-radius:10px;padding:10px 12px;font-size:11.5px;
font-weight:400;line-height:1.55;box-shadow:var(--ombre-2);opacity:0;pointer-events:none;
transition:opacity .12s;z-index:60;text-align:left}
.bulle:hover .bt,.bulle:focus .bt{opacity:1}
.bulle .bt::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);
border:6px solid transparent;border-top-color:var(--encre)}
/* v14.146 : sans place au-dessus, la bulle s'ouvre dessous. */
.bulle .bt.btbas{bottom:auto;top:calc(100% + 8px)}
.bulle .bt.btbas::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--encre)}
/* v14.153 : la bulle n'hérite plus de son en-tête — une colonne en
capitales l'écrivait en capitales, un bloc de tiroir aussi. Et elle
sort de son cadre : footer.php la pose en position fixe, dans la
fenêtre, là où rien ne la coupe. */
.bulle .bt,.dwr .blk .bulle .bt{text-transform:none;letter-spacing:normal;white-space:normal;
font-style:normal;font-size:11.5px;font-weight:400;font-family:var(--f-ui);color:#fff;word-break:normal;margin:0}
.bulle .bt.btfx,.dwsh .bulle .bt.btfx{position:fixed;left:var(--fl, 0px);right:auto;top:var(--ft, 0px);bottom:auto;
transform:none;max-width:calc(100vw - 16px)}
.bulle .bt.btfx::after,.dwsh .bulle .bt.btfx::after{left:var(--fa, 50%);right:auto;transform:translateX(-50%)}
.kithelp{font-size:12px;color:var(--encre-2);line-height:1.6;background:var(--surface-2);
border:1px solid var(--ligne);border-radius:10px;padding:10px 12px}
/* ═══ v7.33 · Assistant d'avenant ═══ */
.avetapes{display:flex;gap:10px;margin-bottom:14px}
.avetapes span{flex:1;font-size:11.5px;font-weight:700;color:var(--muet);padding-bottom:7px;
border-bottom:2px solid var(--ligne)}
.avetapes span.on{color:var(--terra-h);border-bottom-color:var(--terra)}
.legal2{display:flex;gap:11px;align-items:flex-start;border:1px solid #DED2E4;background:var(--violet-pale);
color:#5C3F59;border-radius:12px;padding:12px 14px;font-size:12px;line-height:1.55;margin-bottom:6px}
.legal2 svg{width:17px;height:17px;flex:none;margin-top:1px}
.legal2 b{display:block;font-weight:700;margin-bottom:2px}
.legal2.bl{border-color:#D6DDEE;background:var(--bleu-pale);color:#3D4E7A}
.avport{display:grid;gap:9px}
.avp{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--ligne-2);border-radius:12px;
padding:11px 13px;cursor:pointer}
.avp:has(input:checked){border-color:var(--terra);box-shadow:0 0 0 3px var(--terra-pale)}
.avp input{margin-top:2px;accent-color:var(--terra)}
.avp b{display:block;font-size:13px;font-weight:600}
.avp i{font-style:normal;font-size:11.5px;color:var(--muet);line-height:1.5}
.avchamps{display:grid;gap:2px}
/* v11.16 — .avc redessinait la case à cocher du kit avec un autre
survol et une autre coche. Elle ne porte plus que l'espacement de
la liste ; le dessin vient de .chk, comme partout ailleurs. */
.avc{padding:9px 11px;border-radius:10px;align-items:center}
.avc:hover{background:var(--surface-2)}
.avbloc{margin-bottom:6px}
.avbloc .ftitre{font-size:13px;margin:16px 0 10px}
/* ═══ v7.33 · Choix et ordre des colonnes ═══ */
.colpop{position:absolute;z-index:300;width:280px;background:var(--carte);border:1px solid var(--ligne);
border-radius:12px;box-shadow:var(--ombre-2);overflow:hidden}
.colpop .cph{display:flex;align-items:center;gap:10px;padding:11px 13px;border-bottom:1px solid var(--ligne);
background:var(--surface-2);font-size:12.5px}
.colpop .cph b{flex:1;font-weight:600}
.colpop .cpl{max-height:320px;overflow-y:auto;padding:5px}
.cpi{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:9px;cursor:grab;font-size:12.5px}
.cpi:hover{background:var(--surface-2)}
.cpi.drag{opacity:.4}
.cpi .poi{color:var(--ligne-2);font-size:12px;cursor:grab}
.colpop .cpf{padding:9px 13px;border-top:1px solid var(--ligne);font-size:11px;color:var(--muet);line-height:1.5}
.avchg{display:flex;align-items:center;gap:8px;font-size:11.5px;margin-top:5px;flex-wrap:wrap}
.avchg > span:first-child{color:var(--muet);min-width:150px}
.avchg b{font-weight:700}
.avchg b.old{color:var(--muet);text-decoration:line-through;font-weight:500}
.avchg .fl2{color:var(--ligne-2)}
/* ═══ v7.35 · Mode développeur ═══
Rouge, partout : c'est un pouvoir sur toutes les organisations,
il ne doit jamais se confondre avec un réglage client. */
:root{--dev:#B3261E}
.rail .lkdev,.rflyout .lkdev{color:var(--dev);font-weight:700}
.rail .lkdev .fic,.rflyout .lkdev .fic{color:var(--dev)}
.rail .lkdev.on,.rflyout .lkdev.on{background:#FBE9E7;color:var(--dev)}
.devbar{background:var(--dev);color:#fff;padding:9px 20px;display:flex;align-items:center;gap:12px;
font-size:12.5px;border-radius:12px;margin-bottom:16px;flex-wrap:wrap}
.devbar b{font-family:var(--f-titre);font-weight:700}
.devbar .sp{flex:1}
.devbar .btn{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.35);color:#fff;
border-radius:8px;padding:4px 11px;font-size:12px;font-weight:600;text-decoration:none}
.devbar .btn:hover{background:#fff;color:var(--dev)}
.devtabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.devtab{display:inline-flex;align-items:center;padding:8px 14px;border:1px solid var(--ligne);
background:var(--carte);border-radius:11px;text-decoration:none;color:var(--encre-2);
font-size:13px;font-weight:600;box-shadow:var(--ombre)}
.devtab:hover{border-color:var(--muet)}
.devtab.on{background:var(--dev);border-color:var(--dev);color:#fff}
.note.dv{background:#FBE9E7;color:#8E1D17;border:1px solid #F2C7C2;display:flex;gap:10px;
align-items:flex-start;border-radius:11px;padding:11px 13px;font-size:12px;line-height:1.55;margin-bottom:14px}
.note.dv b{display:block;font-weight:700;margin-bottom:2px}
.btn.dv{background:var(--dev);border-color:var(--dev);color:#fff}
.btn.dv:hover{background:#8E1D17;border-color:#8E1D17}
.tA tr.sel td{background:var(--terra-pale)}
.socform{display:flex;gap:12px;align-items:flex-end;padding:14px 16px;border-bottom:1px solid var(--ligne);
background:var(--surface-2);flex-wrap:wrap}
.socform .fg{margin:0;min-width:150px}
.hline2{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--ligne);font-size:12.5px}
.hline2:last-child{border-bottom:none}
.hline2.fut{background:var(--jaune-pale)}
.hline2 .d{min-width:92px;font-family:var(--f-titre);font-weight:700;font-size:11.5px;color:var(--muet)}
.hline2 .c{flex:1}
.hline2 .c b{font-family:var(--f-titre);font-size:14px}
.hline2 .c i{font-style:normal;display:block;font-size:11.5px;color:var(--muet)}
.res{background:var(--encre);color:#fff;border-radius:12px;padding:14px 16px;font-size:13px;line-height:1.7;
margin-top:12px}
.res b{font-family:var(--f-titre);font-size:19px;display:block}
.res .l{opacity:.75;font-size:11.5px;display:block}
.socgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1px;background:var(--ligne)}
.socv{background:var(--carte);padding:11px 14px}
.socv i{display:block;font-style:normal;font-size:11px;color:var(--muet);margin-bottom:2px}
.socv b{font-family:var(--f-titre);font-size:15px}
.lede2{color:var(--encre-2);line-height:1.6;max-width:880px;margin:0 0 16px}
/* ═══ v7.36 · Préférences de notification ═══
Un tableau : une ligne par événement, une colonne par canal. La
forme dit tout de suite qu'on peut choisir moyen par moyen. */
.ntable{display:block}
.nth,.ntr{display:grid;grid-template-columns:minmax(0,1fr) repeat(4,100px);gap:0;align-items:center}
.nth{background:var(--surface-2);border-bottom:1px solid var(--ligne);padding:10px 16px}
.nth .nlbl{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muet)}
.nth .ncan{text-align:center}
.nth .ncan b{display:block;font-size:11.5px;font-weight:700}
.nth .ncan i{display:block;font-style:normal;font-size:10px;color:var(--muet);line-height:1.35;margin-top:2px}
.ntr{padding:11px 16px;border-bottom:1px solid var(--ligne)}
.ntr:last-child{border-bottom:none}
.ntr:hover{background:var(--surface-2)}
.ntr .nlbl b{display:block;font-weight:600;font-size:13px}
.ntr .nlbl i{font-style:normal;font-size:11.5px;color:var(--muet)}
.ntr .ncan{display:flex;justify-content:center}
.ngrp{background:var(--surface-2);padding:7px 16px;font-size:10.5px;font-weight:700;letter-spacing:.07em;
text-transform:uppercase;color:var(--encre-2);border-bottom:1px solid var(--ligne);
border-top:1px solid var(--ligne)}
/* v14.253 : la catégorie et son interrupteur, au-dessus de ses lignes. */
.ngrp.ncat{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 16px}
.ntr.ncoupe{opacity:.4;pointer-events:none}
@media(max-width:760px){
.nth{display:none}
.ntr{grid-template-columns:1fr;gap:8px}
.ntr .ncan{justify-content:flex-start}
}
/* ═══ v7.37 · Bandeau et rubrique développeur ═══
Rouge et en haut de tout : une simulation invisible ferait croire
à des bugs qui n'existent pas. */
.devband{position:sticky;top:0;z-index:900;background:var(--dev,#B3261E);color:#fff;
display:flex;align-items:center;gap:12px;padding:8px 18px;font-size:12.5px}
.devband.sim{background:#8E1D17;box-shadow:inset 0 -3px 0 rgba(255,255,255,.35)}
.devband .ic{display:flex}
.devband .ic svg{width:16px;height:16px}
.devband b{font-family:var(--f-titre);font-weight:700;white-space:nowrap}
.devband .tx{opacity:.92;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.devband .sp{flex:1}
.devband .dbtn{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);color:#fff;
border-radius:8px;padding:4px 11px;font-family:var(--f-ui);font-size:12px;font-weight:600;
cursor:pointer;text-decoration:none;white-space:nowrap}
.devband .dbtn:hover{background:#fff;color:var(--dev,#B3261E)}
.devband .dbtn.plein{background:#fff;color:var(--dev,#B3261E)}
.devband .dbtn.plein:hover{background:rgba(255,255,255,.85)}
body.aveedev .rail{top:37px;height:calc(100vh - 37px)}
.devpop{text-transform:none;position:absolute;z-index:950;width:340px;background:var(--carte);border:1px solid var(--ligne);
border-radius:14px;box-shadow:var(--ombre-2);overflow:hidden}
.devpop .dvh{padding:12px 15px;background:#FBE9E7;border-bottom:1px solid #F2C7C2;color:#8E1D17}
.devpop .dvh b{display:block;font-family:var(--f-titre);font-size:13.5px;text-transform:none}
.devpop .dvh span{font-size:11.5px;line-height:1.5;display:block;margin-top:3px}
.devpop .dvb{padding:14px 15px}
.devpop .dvb .fg{margin-bottom:11px}
.devpop .dvf{display:flex;gap:8px;justify-content:flex-end;padding:12px 15px;border-top:1px solid var(--ligne);
background:var(--surface-2)}
.devpop .dbtn{border:1px solid var(--ligne-2);background:#fff;color:var(--encre);border-radius:9px;
padding:7px 13px;font-family:var(--f-ui);font-size:12.5px;font-weight:600;cursor:pointer}
.devpop .dbtn.plein{background:var(--dev,#B3261E);border-color:var(--dev,#B3261E);color:#fff}
.rail .rit.ritdev{color:var(--dev,#B3261E)}
.rail .rit.ritdev svg{color:var(--dev,#B3261E)}
.rail .rit.ritdev.on{background:#FBE9E7;color:var(--dev,#B3261E)}
/* ═══ v7.38 · Organisations (mode dev) et centre d'aide ═══ */
.orgbloc{border-top:1px solid var(--ligne);padding:14px 16px}
.orgbloc.off{background:var(--surface-2);opacity:.72}
.orgh{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.orgn{flex:1;min-width:220px}
.orgn b{font-family:var(--f-titre);font-size:15px;font-weight:700;margin-right:8px}
.orgn i{display:block;font-style:normal;font-size:11.5px;color:var(--muet);margin-top:3px}
.orga{display:flex;gap:7px}
.orgedit{display:flex;gap:8px;align-items:center;margin-top:10px}
.orgedit .fi{flex:1;max-width:340px}
.orget{display:flex;align-items:center;gap:11px;padding:10px 12px;margin-top:9px;
background:var(--surface-2);border:1px solid var(--ligne);border-radius:11px}
.orget.encours{border-color:var(--dev,#B3261E);background:#FBE9E7}
.orget .ic{width:16px;height:16px;color:var(--muet);flex:none}
.orget .n{flex:1;font-size:13px;font-weight:600}
.orget .n i{display:block;font-style:normal;font-size:11.5px;font-weight:400;color:var(--muet)}
.simf{display:flex;gap:7px;align-items:center}
.simf .fi{width:150px}
.g2s{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;align-items:start}
.aidart{display:flex;align-items:center;gap:10px;padding:11px 16px;border-top:1px solid var(--ligne);font-size:12.5px}
.aidart .n{flex:1;min-width:0}
.aidart .n b{display:block;font-weight:600}
.aidart .n i{font-style:normal;font-size:11.5px;color:var(--muet)}
.aidlien{display:block;padding:12px 16px;border-top:1px solid var(--ligne);text-decoration:none;color:inherit}
.aidlien:first-of-type{border-top:none}
.aidlien:hover{background:var(--surface-2)}
.aidlien b{display:block;font-weight:600;font-size:13.5px;color:var(--terra-h)}
.aidlien i{font-style:normal;font-size:12px;color:var(--muet)}
/* .aidcorps : réécrit en v14.8, avec le centre d'aide (fin du fichier). */
/* L'attribut hidden perd contre un display:flex : on le rétablit,
sinon les formulaires repliés s'affichent tous ouverts. */
.socform[hidden],.orgedit[hidden]{display:none}
/* ── LE TITRE DE GROUPE CHUCHOTE, ET IL COLLE ── (v13.5)
La v7.40 lui donnait le même poids qu'un titre de rubrique : 14 px
gras foncé, une icône, un trait pleine largeur. L'entrée, elle,
est en 13 px moyen gris — ce qu'on lisait d'abord était donc ce
qu'on ne pouvait pas cliquer, et trois traits coupaient le panneau
en trois petits menus.
Il devient une étiquette : petites capitales, muette, sans icône
(celle de l'entrée suffit à distinguer les lignes ; deux icônes de
même famille l'une sur l'autre brouillent la hiérarchie au lieu de
la poser) et sans trait — l'espace au-dessus sépare aussi bien.
Et il COLLE : dans un panneau qui défile, savoir dans quel groupe
on se trouve vaut plus qu'un trait. Les marges négatives le font
saigner jusqu'aux bords du panneau, sinon les entrées défileraient
dans les 8 px de marge, à côté de lui. */
.rfly .fgr{position:relative}
.rfly .ft.fgrp{position:sticky;top:0;z-index:2;background:var(--carte);
display:block;font-family:inherit;font-size:10.5px;font-weight:700;letter-spacing:.07em;
text-transform:uppercase;color:var(--muet);
border:0;margin:0 -8px;padding:12px 20px 4px}
.rfly .fgr:first-child .ft.fgrp{padding-top:2px}
.rfly .ft.fgrp .fic{display:none}
/* Le premier lien d'un panneau respire sous le titre de rubrique ;
dans un groupe, le titre a déjà posé cette respiration. */
.rfly .fgr .ft.fgrp + a{margin-top:1px}
.etnum{width:24px;height:24px;border-radius:50%;background:var(--dev,#B3261E);color:#fff;
display:flex;align-items:center;justify-content:center;font-family:var(--f-titre);font-weight:700;
font-size:12px;flex:none}
/* ═══ v7.41 · Formules d'abonnement ═══ */
.formules{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;padding:16px}
.form1{border:1px solid var(--ligne-2);border-radius:14px;padding:15px;background:#fff;display:flex;
flex-direction:column}
.form1.brouil{background:var(--surface-2);border-style:dashed}
.form1 h4{font-family:var(--f-titre);font-size:16px;margin:0 0 3px;display:flex;align-items:center;gap:7px}
.form1 .sous{font-size:11.5px;color:var(--muet);min-height:32px;line-height:1.5}
.form1 .prix{font-family:var(--f-titre);font-size:26px;font-weight:700;margin:10px 0 0}
.form1 .prix span{font-size:12px;font-weight:600;color:var(--muet)}
.form1 .par{font-size:11.5px;color:var(--encre-2);margin-bottom:12px}
.form1 ul{margin:0 0 auto;padding:0;list-style:none;font-size:12px}
.form1 li{display:flex;gap:8px;align-items:flex-start;padding:4px 0;color:var(--encre-2)}
.form1 li .ic{color:var(--vert);font-weight:700;flex:none}
.form1 li .ic.opt{color:var(--jaune)}
.form1 .pied{margin-top:13px;padding-top:11px;border-top:1px solid var(--ligne);display:flex;gap:7px;
align-items:center}
.simline{display:flex;align-items:center;gap:12px;padding:9px 0;font-size:13px;border-bottom:1px solid var(--ligne)}
.simline:last-child{border-bottom:none}
.simline > label:not(.sw){flex:1;color:var(--encre-2)}
.simline .fi{width:130px;text-align:right}
.simline select.fi{text-align:left}
/* Recherche d'entreprise */
.entsearch .entres,.entsearch .entetabs{border:1px solid var(--ligne);border-radius:12px;margin-top:9px;
overflow:hidden;background:#fff}
.entsearch .entres:empty{display:none}
.enttitre{padding:9px 13px;background:var(--surface-2);border-bottom:1px solid var(--ligne);
font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muet)}
.entitem{display:flex;gap:12px;align-items:flex-start;padding:11px 13px;border-top:1px solid var(--ligne);
cursor:pointer}
.entitem:first-child{border-top:none}
.entitem:hover{background:var(--terra-pale)}
.entitem.sel{background:var(--terra-pale);box-shadow:inset 3px 0 0 var(--terra)}
.entitem .n{flex:1;min-width:0}
.entitem .n b{display:block;font-weight:600;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.entitem .n i{font-style:normal;font-size:11.5px;color:var(--muet);line-height:1.5}
.entbadge{font-size:10px;font-weight:700;border-radius:6px;padding:2px 7px;background:var(--surface-2);
color:var(--muet);font-family:ui-monospace,monospace;flex:none}
/* ═══ v7.42 · Encarts d'information ═══
La classe « note i » était employée dans dix écrans sans avoir
jamais été définie : les encarts s'affichaient en texte brut, au
milieu d'un formulaire, sans qu'on distingue l'explication du
champ à remplir. */
.note{display:flex;gap:10px;align-items:flex-start;border-radius:11px;padding:11px 13px;
font-size:12px;line-height:1.55;margin:0 0 14px}
.note > span:first-child{flex:none;font-size:14px;line-height:1.3;opacity:.85}
/* Le gras d'une note est un TITRE quand il ouvre le message, et une
simple emphase partout ailleurs. La règle valait pour tous les
« b » : une note qui insistait sur deux mots au milieu d'une
phrase se retrouvait coupée en trois lignes (corrigé en v11.5). */
.note b{font-weight:700}
.note > span:last-child > b:first-child{display:block;margin-bottom:2px}
.note.i{background:var(--bleu-pale);color:#3D4E7A;border:1px solid #D6DDEE}
.note.w{background:var(--jaune-pale);color:#7A5410;border:1px solid #EEDFBB}
.note.k{background:var(--rouge-pale);color:#8A2C31;border:1px solid #EED6D7}
.note a{color:inherit;font-weight:600}
/* ═══ v7.43 · Barre d'étapes d'un parcours ═══
Un formulaire long sans annonce se referme : les étapes disent
d'emblée ce qu'il faudra fournir. */
.etapes{display:flex;gap:9px;margin-bottom:16px;flex-wrap:wrap}
.etape{flex:1;min-width:170px;background:var(--carte);border:1px solid var(--ligne);border-radius:12px;
padding:11px 13px;font-size:12px;display:flex;gap:10px;align-items:center;box-shadow:var(--ombre)}
.etape.on{border-color:var(--dev,#B3261E);box-shadow:0 0 0 3px #FBE9E7}
.etape.fait{background:var(--vert-pale);border-color:#CFE0C1}
.etape .n{width:24px;height:24px;border-radius:50%;background:var(--surface-2);color:var(--muet);
display:flex;align-items:center;justify-content:center;font-family:var(--f-titre);font-weight:700;
font-size:12px;flex:none}
.etape.on .n{background:var(--dev,#B3261E);color:#fff}
.etape.fait .n{background:var(--vert);color:#fff}
.etape b{display:block;font-weight:600}
.etape i{font-style:normal;font-size:11px;color:var(--muet)}
/* ═══ v7.44 · Lignes de fonctionnalité d'une formule ═══
Tout se règle sur la ligne : incluse, ou en supplément, et à quel
prix. Un tableau où l'on lit sans cliquer. */
.modh,.modl{display:grid;grid-template-columns:minmax(0,1fr) 80px 190px 120px;gap:12px;align-items:center}
.modh{padding:0 0 8px;border-bottom:1px solid var(--ligne);font-size:10px;font-weight:700;
letter-spacing:.07em;text-transform:uppercase;color:var(--muet)}
.modh .c{text-align:center}
.modl{padding:11px 0;border-bottom:1px solid var(--ligne)}
.modl:last-of-type{border-bottom:none}
.modl.socle{opacity:.72}
.modl.inclus .u,.modl.inclus .c:last-child{opacity:.4}
.modl .n b{font-weight:600;font-size:13px}
.modl .n i{display:block;font-style:normal;font-size:11.5px;color:var(--muet)}
.modl .c{display:flex;justify-content:center}
.modl .funit{width:100%}
@media(max-width:900px){
.modh{display:none}
.modl{grid-template-columns:1fr;gap:7px;padding:12px 0}
.modl .c{justify-content:flex-start}
}
/* ═══ v7.45 · Changement d'abonnement daté ═══ */
.aboprev{display:flex;align-items:center;gap:11px;margin-top:10px;padding:10px 13px;
background:var(--bleu-pale);border:1px solid #D6DDEE;border-radius:11px;font-size:12.5px;color:#3D4E7A}
.aboprev .ic{width:16px;height:16px;flex:none}
.aboform{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-top:12px;padding:13px;
background:var(--surface-2);border:1px solid var(--ligne);border-radius:12px}
.aboform[hidden]{display:none}
.aboform .fg{margin:0;min-width:150px}
/* ═══ v7.48 · Borne de pointage ═══
Écran mural : cibles larges, texte gros, contraste fort. On pointe
avec des mains mouillées, en gants, à contre-jour. */
body.borne{margin:0;background:#F2EFE7;font-family:var(--f-ui);color:var(--encre);
-webkit-user-select:none;user-select:none;overflow:hidden}
/* ═══ LA BORNE TIENT DANS L'ÉCRAN, ET ELLE DÉFILE ═══ (v14.38)
Deux défauts, une seule cause.
« Je ne peux pas défiler quand les shifts dépassent de la tablette »
et « la colonne de gauche doit être de la hauteur disponible et non
de la hauteur de l'app » sont le MÊME bug, vu de deux endroits.
Un enfant de grille — comme un enfant de flex — porte
« min-height:auto » par défaut : il ne descend JAMAIS sous la taille
de son contenu. « .bapp » avait beau valoir 100vh, ses deux colonnes
s'étiraient à la hauteur de ce qu'elles contenaient. Mesuré sur une
tablette de 1024×768 avec vingt-neuf cartes : la colonne faisait
1319 px de haut, et la dernière carte tombait 515 px SOUS le bas de
l'écran. Comme « body » porte « overflow:hidden », elle était
invisible et inatteignable : on ne pouvait ni la voir, ni la
toucher, ni deviner qu'elle existait.
Et « .bgrille » avait pourtant « overflow:auto » depuis toujours —
sans effet, puisqu'elle avait la taille de son contenu : une zone
qui fait la hauteur de ce qu'elle montre n'a rien à faire défiler.
Trois « min-height:0 » réparent l'ensemble. Le reste tombe tout
seul : la colonne se cale sur la hauteur de l'écran, sa zone médiane
défile, son pied reste en vue, et la grille des cartes défile de son
côté. */
.bapp{display:grid;grid-template-columns:320px 1fr;grid-template-rows:100%;
height:100vh;height:100dvh;overflow:hidden}
.bside{background:#2C2418;color:#EFE9DC;padding:20px;display:flex;flex-direction:column;gap:14px;
min-height:0;overflow:hidden}
.bhd{display:flex;align-items:center;justify-content:space-between}
.blogo{width:46px;height:46px;border-radius:12px;background:var(--terra);color:#fff;
display:flex;align-items:center;justify-content:center;font-family:var(--f-titre);font-weight:700;font-size:16px}
.bhh{font-family:var(--f-titre);font-size:34px;font-weight:700;letter-spacing:-.02em}
.bcarte{background:rgba(255,255,255,.07);border-radius:14px;padding:15px}
.bcarte h4{font-family:var(--f-titre);font-size:16px;margin:0 0 10px}
.bli{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;padding:6px 0;opacity:.92;line-height:1.45}
.bav{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.14);flex:none;
display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700}
/* Devenu un BOUTON en v14.36 : il recharge au clic. D'où la remise à
zéro des styles de bouton, le curseur et le texte à gauche — un
bouton centré se lirait comme une action, alors qu'il dit d'abord
un état. */
.bstat{display:flex;gap:11px;align-items:center;background:rgba(85,128,59,.28);border-radius:12px;
padding:11px 13px;font-size:12.5px;margin-top:auto;border:none;width:100%;
text-align:left;color:inherit;font-family:var(--f-ui);cursor:pointer}
.bstat:hover{background:rgba(85,128,59,.4)}
.bstat.off{background:rgba(196,60,67,.3)}
.bstat.off:hover{background:rgba(196,60,67,.42)}
.bstat b{display:block}
.bstat i{font-style:normal;opacity:.8;font-size:11.5px;line-height:1.4}
.bstat .pt{width:10px;height:10px;border-radius:50%;background:#8FCB6B;flex:none}
.bstat.off .pt{background:#E88}
/* Le temps d'un rechargement demandé à la main : la pastille bat,
sinon rien ne distingue « j'ai appuyé » de « il ne se passe rien ». */
.bstat.bstatwait .pt{animation:bstatbat .5s ease-in-out infinite}
@keyframes bstatbat{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}
.bpied{font-size:11px;opacity:.5;line-height:1.5}
.bmain{padding:20px;display:flex;flex-direction:column;gap:13px;min-width:0;
min-height:0;overflow:hidden}
.bfiltres{display:flex;gap:9px;flex-wrap:wrap}
.bfil{border:none;background:#fff;border-radius:24px;padding:11px 18px;font-family:var(--f-ui);
font-size:14px;font-weight:600;color:var(--encre-2);cursor:pointer;box-shadow:var(--ombre)}
.bfil span{opacity:.55;margin-left:4px}
.bfil.on{background:var(--encre);color:#fff}
.bfil.dr{background:#2C2418;color:#fff}
/* ═══ LA BARRE DE LA BORNE ═══ (v14.36)
Six filtres au lieu de quatre : « En poste » et « Terminés »
manquaient, et sur une borne de fin de service ce sont les deux
seules questions qu'on se pose.
Un filtre à ZÉRO reste en place, pâli et inerte : le retirer
ferait bouger la barre sous les doigts à chaque arrivée, et on
appuierait sur le mauvais. */
.bfil.bfilvide{opacity:.42;pointer-events:none}
.bfil[disabled]{opacity:.35;pointer-events:none}
/* La bascule du planning n'est pas un filtre : elle ne restreint pas
la liste, elle change ce qu'on regarde. D'où le trait, et la place
à droite, avec les gestes. */
/* ── LA BASCULE « .bbasc » N'EXISTE PLUS ── (v14.39)
Elle vivait dans la rangée des gestes, à côté de « + Shift non
planifié » : un bouton parmi sept pour changer de VUE. Les onglets
« .bponglets » disent la même chose au bon rang, en haut, et ses
règles sont parties avec elle plutôt que de rester à décorer une
classe que plus personne ne pose. */
/* Le rang du bas : le champ prend la place, les gestes suivent. */
.brechrow{display:flex;gap:9px;align-items:stretch;flex-wrap:wrap}
/* `display:flex` l'emporte sur l'attribut `hidden` : sans cette
ligne, la barre des gestes restait affichée sous le planning, et
« + Shift non planifié » s'y lisait comme un geste du planning
alors qu'il appartient à la liste (v14.39). */
.brechrow[hidden]{display:none}
.brechrow .brech{flex:1;min-width:200px;width:auto}
.brechrow .bfil{flex:none;white-space:nowrap}
/* ═══ LE PLANNING, EN VUE JOUR ═══ (v14.39)
« Fais quelque chose de ressemblant à la frise ou à la vue jour du
vrai planning. » On reprend donc la grammaire de `jour.php` : la
colonne des noms, l'en-tête des heures, l'effectif EN CHIFFRES, les
blocs aux couleurs de leur étiquette avec la bordure gauche, le
voile hachuré des pauses, et le repère de l'heure.
Deux onglets de même rang remplacent la bascule discrète de la
v14.36 : « on voit pas le planning » était juste — elle vivait en
bas à droite, et il fallait savoir qu'elle existait. */
/* Le repère de version, en pied de colonne : un dépannage, pas une
information de service. Assez lisible pour être lu à voix haute au
téléphone, assez discret pour ne pas se remarquer (v14.42). */
.bver{opacity:.55;font-variant-numeric:tabular-nums;letter-spacing:.02em}
/* L'état du lecteur qui ne peut PAS démarrer doit se distinguer de
« Lecteur actif » : c'est une panne, pas un état. */
.bqrtx i.ko{color:#C4564E;opacity:1;font-weight:600}
body.borne.theme-clair .bqrtx i.ko{color:var(--rouge,#C4564E)}
/* ═══ LE LECTEUR DE BADGE QR ═══ (v14.40)
« C'est pas le salarié qui scanne le QR de la tablette, c'est la
tablette qui scanne le badge du salarié. » D'où une caméra qui
tourne, et non un bouton qui la démarre.
L'aperçu est PETIT à dessein : il sert à se cadrer, pas à se
regarder. Une caméra en grand sur une borne de hall filmerait les
visiteurs toute la journée pour rien, et prendrait la place des
cartes — qui restent l'écran. */
.bqr{display:flex;align-items:center;gap:15px;margin-bottom:11px;padding:11px 13px;
border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
body.borne.theme-clair .bqr{background:var(--carte);border-color:var(--ligne)}
.bqrvue{position:relative;flex:none;width:132px;height:99px;border-radius:10px;overflow:hidden;
background:#000}
.bqrvue video{width:100%;height:100%;object-fit:cover;display:block}
/* Un viseur, parce qu'une image de caméra sans cadre ne dit pas où
tendre le badge : on le présente au centre, et le cadre le dit. */
.bqrviseur{position:absolute;inset:16% 20%;border:2px solid rgba(255,255,255,.72);
border-radius:7px;pointer-events:none;box-shadow:0 0 0 999px rgba(0,0,0,.28)}
.bqrtx{min-width:0;display:flex;flex-direction:column;gap:3px}
.bqrtx b{font-family:var(--f-titre);font-size:17px;line-height:1.25}
/* L'état du lecteur : « Lecteur actif », ou la raison pour laquelle
il ne l'est pas. Une caméra noire et muette se prend pour une
panne de matériel, et quelqu'un finit par dévisser la tablette. */
.bqrtx i{font-style:normal;font-size:12.5px;opacity:.66;line-height:1.4}
.bponglets{display:inline-flex;gap:5px;background:rgba(255,255,255,.07);
border-radius:26px;padding:4px;align-self:flex-start;flex:none}
.bponglets button{border:0;background:transparent;color:inherit;border-radius:22px;
padding:10px 20px;font:600 14px/1 var(--f-ui);cursor:pointer;opacity:.6;
display:inline-flex;align-items:center;gap:7px}
.bponglets button svg{width:17px;height:17px}
.bponglets button.on{background:#fff;color:var(--encre);opacity:1;box-shadow:var(--ombre)}
body.borne.theme-clair .bponglets{background:var(--surface-2);border:1px solid var(--ligne)}
body.borne.theme-clair .bponglets button.on{background:var(--encre);color:#fff}
.bplan{flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:11px;
-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.bpjvue{min-width:0}
.bpjbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bpjnav{display:flex;gap:5px;background:rgba(255,255,255,.07);border-radius:13px;padding:4px}
body.borne.theme-clair .bpjnav{background:var(--surface-2);border:1px solid var(--ligne)}
.bpjnav button{border:0;background:transparent;color:inherit;border-radius:10px;
padding:9px 14px;font:600 13px/1.25 var(--f-ui);cursor:pointer;opacity:.72;
display:flex;flex-direction:column;gap:2px;align-items:center}
.bpjnav button span{font-size:9.5px;opacity:.65;font-weight:500}
.bpjnav button.on{background:var(--terra);color:#fff;opacity:1}
.bpjnav button.off{opacity:.34}
.bpjpub{font:600 11px/1 var(--f-ui);border-radius:20px;padding:6px 11px;
background:rgba(85,128,59,.28);color:#B8D69C}
.bpjpub.non{background:rgba(169,118,20,.3);color:#E9C579}
body.borne.theme-clair .bpjpub{background:var(--vert-pale);color:var(--vert);border:1px solid #CADCBB}
body.borne.theme-clair .bpjpub.non{background:var(--jaune-pale);color:var(--jaune);border-color:#EAD9AE}
/* ── « overflow:hidden » ET « sticky » NE COHABITENT PAS ──
(v14.41)
La grille portait « overflow:hidden » pour que ses cellules soient
coupées par les coins arrondis. Un ancêtre qui masque son
débordement devient le conteneur de défilement de ses enfants
collants : l'en-tête des heures « collait » donc à une boîte qui
ne défile pas, c'est-à-dire à rien. On ne voyait plus les heures
dès qu'on descendait dans la liste.
On retire donc le masque, et on arrondit les CELLULES des coins.
Le rayon coûte quatre règles ; le défilement, lui, valait la
lecture de toute la grille. */
.bpjgrid{display:grid;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
border-radius:12px;min-width:0}
.bpjgrid > .bpjhead{border-top-left-radius:11px}
.bpjgrid > .bpjh:last-of-type{border-top-right-radius:11px}
.bpjgrid > *:last-child{border-bottom-right-radius:11px}
body.borne.theme-clair .bpjgrid{background:var(--carte);border-color:var(--ligne)}
.bpjlab{grid-column:1;border-top:1px solid rgba(255,255,255,.07);padding:6px 11px;
display:flex;align-items:center;gap:9px;min-width:0}
body.borne.theme-clair .bpjlab{background:var(--carte);border-top-color:var(--surface-2)}
.bpjav{width:27px;height:27px;border-radius:50%;flex:none;overflow:hidden;color:#fff;
display:flex;align-items:center;justify-content:center;font:700 9.5px/1 var(--f-ui)}
.bpjav img{width:100%;height:100%;object-fit:cover}
.bpjtx{min-width:0;display:flex;flex-direction:column}
.bpjtx b{font:600 12.5px/1.2 var(--f-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bpjtx i{font-style:normal;font-size:9.5px;opacity:.55;white-space:nowrap;overflow:hidden;
text-overflow:ellipsis}
/* ── CE QU'ON GARDE SOUS LES YEUX ── (v14.41)
« La barre d'horaire et d'équipe doit être en mode sticky, sinon
on ne voit plus les heures. » Vingt lignes plus bas, un bloc posé
au milieu de la frise ne veut plus rien dire : on ne sait plus à
quelle heure il commence, ni de quelle équipe il est.
Trois étages, et leurs hauteurs sont FIXES parce que les décalages
du dessous s'y appuient : 34 px pour les heures, 24 px pour
l'effectif — un étage qui grandirait ferait flotter les deux
autres. */
.bpjhead,.bpjh{position:sticky;top:0;z-index:7;height:34px;box-sizing:border-box;
/* OPAQUE, obligatoirement : un blanc translucide laisserait défiler
les lignes derrière la barre. « --bfond » existe déjà pour cette
raison exacte, ailleurs sur la borne. */
background-color:var(--bfond);
background-image:linear-gradient(rgba(255,255,255,.06),rgba(255,255,255,.06));
border-bottom:1px solid rgba(255,255,255,.12);
border-top:none;font:700 10px/1 var(--f-ui);letter-spacing:.05em;text-transform:uppercase;
/* ── PAS D'« OPACITY » SUR UNE BARRE COLLANTE ── (v14.41)
« opacity » rend TOUT le bloc translucide, son fond compris : la
barre restait bien en haut, et les lignes du planning défilaient
visiblement au travers. On atténue donc le TEXTE, par sa
couleur, et le fond reste plein. La même faute guettait les
trois étages. */
color:rgba(255,255,255,.62);padding:10px 11px;white-space:nowrap;overflow:hidden}
.bpjh{border-left:1px solid rgba(255,255,255,.12);padding:10px 0 9px 4px;letter-spacing:0}
body.borne.theme-clair .bpjhead,body.borne.theme-clair .bpjh{background-image:none;
background-color:var(--surface-2);border-color:var(--ligne);color:var(--encre-2)}
/* L'effectif : un CHIFFRE par pas. Une barre oblige à comparer des
hauteurs pour deviner un nombre qu'on peut lire — c'est la règle de
la vue Jour, et elle vaut ici. */
.bpjeff,.bpjecs{position:sticky;top:34px;z-index:6;background-color:var(--bfond)}
.bpjeff{border-bottom:1px solid rgba(255,255,255,.12);border-top:none;box-sizing:border-box;
font:600 11px/1 var(--f-ui);text-transform:none;letter-spacing:0;padding:8px 11px;
color:rgba(255,255,255,.8);display:flex;align-items:center;height:24px}
/* La couleur du texte DOIT suivre le fond : en remplaçant l'opacité
par une couleur claire, on écrit blanc sur blanc dès que le thème
clair repeint le fond. */
body.borne.theme-clair .bpjeff{background-color:var(--carte);border-bottom-color:var(--ligne);
color:var(--encre-2)}
body.borne.theme-clair .bpjecs{background-color:var(--carte)}
.bpjec{border-bottom:1px solid rgba(255,255,255,.12);border-left:1px solid rgba(255,255,255,.05);
display:flex;align-items:center;justify-content:center;height:24px;box-sizing:border-box;
font:600 10.5px/1 var(--f-ui);color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums}
.bpjec.q0{border-left-color:rgba(255,255,255,.12)}
/* « background-image » et non « background » : le fond PLEIN des
cases collantes vit sur « background-color », et un raccourci
l'effacerait — la ligne redeviendrait transparente. */
.bpjec.hi{color:#fff;font-weight:700;
background-image:linear-gradient(rgba(255,255,255,.09),rgba(255,255,255,.09))}
.bpjec.bas{font-weight:700;color:#E9C579;
background-image:linear-gradient(rgba(169,118,20,.22),rgba(169,118,20,.22))}
body.borne.theme-clair .bpjec{border-color:var(--ligne);color:var(--muet)}
body.borne.theme-clair .bpjec.q0{border-left-color:var(--ligne)}
body.borne.theme-clair .bpjec.hi{background-image:none;background-color:var(--surface-2);color:var(--encre)}
body.borne.theme-clair .bpjec.bas{background-image:none;background-color:var(--jaune-pale);color:var(--jaune)}
.bpjcell{border-top:1px solid rgba(255,255,255,.05);border-left:1px solid rgba(255,255,255,.05)}
body.borne.theme-clair .bpjcell{border-color:var(--surface-2)}
.bpjcell.q0{border-left-color:rgba(255,255,255,.1)}
body.borne.theme-clair .bpjcell.q0{border-left-color:var(--ligne-2)}
.bpjsh{position:relative;margin:5px 1px;border-radius:9px;padding:4px 8px;overflow:hidden;
border:1px solid rgba(62,43,26,.1);border-left-width:3px;display:flex;flex-direction:column;
justify-content:center;z-index:2;min-width:0}
.bpjsh .t{font:700 8.5px/1.2 var(--f-ui);letter-spacing:.05em;text-transform:uppercase;
opacity:.72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bpjsh .h{font:700 11px/1.3 var(--f-ui);white-space:nowrap;font-variant-numeric:tabular-nums}
.bpjpz{position:absolute;top:0;bottom:0;pointer-events:none;
background:repeating-linear-gradient(-45deg,rgba(62,43,26,.17) 0 3px,transparent 3px 6px)}
/* Une pause ESTIMÉE au milieu du service se dessine plus légèrement
que celle dont on connaît l'heure : la grille ne doit pas affirmer
plus qu'elle ne sait (v14.41). */
.bpjpz.bpjest{background:repeating-linear-gradient(-45deg,rgba(62,43,26,.13) 0 2px,transparent 2px 7px)}
/* Le trait du bas : ce qui a été RÉELLEMENT pointé. Même idée que
« prévu / pointé » sur la bulle, à l'échelle de la journée. */
.bpjdone{position:absolute;bottom:0;height:3px;background:currentColor;opacity:.85}
.bpjnow{background:var(--terra);width:2px;justify-self:start;margin-left:-1px;z-index:8;
position:relative;pointer-events:none}
.bpjnow::before{content:'';position:absolute;top:-3px;left:-3px;width:8px;height:8px;
border-radius:50%;background:var(--terra)}
/* ── LE SÉPARATEUR D'ÉQUIPE PORTE SON EFFECTIF ── (v14.40)
Il occupait toute la largeur pour n'y écrire qu'un nom. Il tient
maintenant la première colonne, et les cases de la frise portent
l'effectif de CETTE équipe, pas à pas — même règle et même
comptage que le total du site. */
.bpjsep,.bpjeqc{position:sticky;top:58px;z-index:5;background-color:var(--bfond)}
.bpjsep{grid-column:1;border-top:1px solid rgba(255,255,255,.08);box-sizing:border-box;height:24px;
border-bottom:1px solid rgba(255,255,255,.08);font:700 9.5px/1 var(--f-ui);letter-spacing:.06em;
text-transform:uppercase;color:rgba(255,255,255,.62);padding:0 11px;
display:flex;align-items:center}
body.borne.theme-clair .bpjsep{background-color:var(--carte);border-color:var(--ligne);
color:var(--muet)}
body.borne.theme-clair .bpjeqc{background-color:var(--carte)}
/* ── LE MÊME CHIFFRE, LE MÊME STYLE ── (v14.41)
Les cases d'équipe avaient leur propre allure — plus pâle, un
autre fond. Sur une même grille, deux styles pour la même chose
obligent à comprendre la différence avant de lire le nombre, et il
n'y en avait aucune à comprendre : ce sont les mêmes personnes
comptées de la même façon. Les cases d'équipe sont donc des
« .bpjec », exactement. « .bpjeqc » ne sert plus qu'à les
retrouver — il ne peint rien. */
.bpjvide{padding:44px 20px;text-align:center;opacity:.62;line-height:1.75;font-size:13px;
background:rgba(255,255,255,.04);border-radius:12px}
.bpjvide b{display:block;font:600 16px/1.35 var(--f-titre);opacity:1;margin-bottom:6px}
body.borne.theme-clair .bpjvide{background:var(--carte);border:1px solid var(--ligne);
color:var(--muet)}
.bpjleg{display:flex;gap:16px;flex-wrap:wrap;font-size:11px;opacity:.55;padding:2px}
.bpjleg i{display:inline-block;vertical-align:middle;margin-right:5px}
.bpjleg i.lgd{width:20px;height:3px;border-radius:2px;background:currentColor}
.bpjleg i.lgp{width:14px;height:9px;border-radius:2px;
background:repeating-linear-gradient(-45deg,currentColor 0 2px,transparent 2px 5px)}
/* La pause ESTIMÉE : même hachure, plus pâle et plus espacée. Elle
doit se distinguer de la pause horodatée sans crier — c'est une
convention annoncée, pas une alerte. */
.bpjleg i.lgpe{width:14px;height:9px;border-radius:2px;opacity:.5;
background:repeating-linear-gradient(-45deg,currentColor 0 1px,transparent 1px 5px)}
.bpjleg i.lgn{width:2px;height:11px;background:var(--terra)}
.bpjleg b{color:#E9C579}
body.borne.theme-clair .bpjleg b{color:var(--jaune)}
/* ═══ DEUX DENSITÉS ═══ (v14.38)
La liste sert à deux choses opposées : chercher son nom pour
pointer, et regarder où en est l'équipe. Un seul gabarit les
servait mal toutes les deux.
« GRANDE » — la borne du hall. De grands noms, l'état en clair,
rien d'autre : ni poste, ni horaires, ni pointé. Celui qui vient
pointer connaît son poste, et les horaires ne l'aident pas à se
reconnaître dans une liste de quarante.
« TABLEAU » — le local du personnel. Tout, resserré : trois cartes
de front deviennent quatre ou cinq. */
/* ── PLUS PETITES QU'AU PREMIER JET ── (v14.39)
Une carte plus grande n'est pas une carte plus lisible : elle est
une carte de moins à l'écran, donc un défilement de plus. Sur une
tablette de 1024, huit cartes « grandes » tiennent désormais sans
défiler là où il n'en tenait que six. */
.bcdens-grande{grid-template-columns:repeat(auto-fill,minmax(236px,1fr))}
.bcdens-grande .bcart{flex-direction:row;align-items:center;gap:11px;
padding:13px 15px 13px 12px;flex-wrap:wrap}
.bcdens-grande .bcet{order:1;flex-basis:100%;font-size:9.5px}
.bcdens-grande .bcqui{order:2;flex:1 1 100%;width:100%;gap:10px}
.bcdens-grande .bav3{width:44px;height:44px;font-size:14px}
.bcdens-grande .bcpr{font-size:18px}
.bcdens-grande .bcnf{font-size:12px}
.bcdens-grande .bcetq,.bcdens-grande .bchrs{display:none}
.bcdens-grande .bcact{order:3;flex-basis:100%;margin-top:0;font-size:12px}
.bcdens-tableau{grid-template-columns:repeat(auto-fill,minmax(202px,1fr))}
.bcdens-tableau .bcart{gap:4px;padding:10px 11px 10px 9px}
.bcdens-tableau .bcqui{gap:8px}
.bcdens-tableau .bav3{width:30px;height:30px;font-size:10.5px}
.bcdens-tableau .bcet{font-size:9px}
.bcdens-tableau .bcpr{font-size:13.5px}
.bcdens-tableau .bcnf{font-size:10.5px}
.bcdens-tableau .bck{font-size:9px}
.bcdens-tableau .bcv{font-size:11.5px}
.bcdens-tableau .bcetq{font-size:10.5px}
.bcdens-tableau .bcact{font-size:11.5px}
/* En densité tableau, un retardataire dit déjà trois fois la même
chose : « En retard de 9h44 », « Pointé : rien depuis 07h00 », et
« Arrivée attendue 07h00 ». Les deux premières suffisent — la
troisième ne sert que là où les horaires sont masqués. */
.bcdens-tableau .bcart[data-retard="1"] .bcact{display:none}
/* ═══ POINTER SANS SHIFT ═══ (v14.36)
Le bouton ne faisait que placer le curseur dans un champ de
recherche : il fallait savoir qu'il fallait taper, et taper juste,
debout devant une tablette murale. Il ouvre la liste des noms. */
/* ── DES VISAGES, ET UNE SORTIE ── (v14.39)
Une liste de quarante noms se parcourt trois fois plus vite avec
les photos : on cherche un visage, pas une chaîne de caractères.
Et la sortie passe EN HAUT, à côté du titre : « Annuler » sous une
liste qui défile n'est pas une sortie, c'est une récompense. */
.bsslarge{justify-content:flex-start;max-width:780px;width:100%;margin:0 auto}
.bsshd{display:flex;align-items:center;gap:12px;width:100%}
.bsshd .tt{flex:1;text-align:left;min-width:0}
/* « .bsous » est bridé à 54 caractères pour rester lisible au centre
d'un écran ; dans cette liste il court sur toute la largeur. */
.bsslarge .bsous{max-width:none;width:100%;text-align:left}
.bssret{flex:none;border:1px solid rgba(255,255,255,.24);background:transparent;color:inherit;
border-radius:12px;padding:11px 16px;font:600 13.5px/1 var(--f-ui);cursor:pointer;
display:flex;align-items:center;gap:8px}
.bssret:hover{background:rgba(255,255,255,.08)}
body.borne.theme-clair .bssret{border-color:var(--ligne-2);color:var(--encre-2)}
body.borne.theme-clair .bssret:hover{background:var(--surface-2)}
/* « avatar_html » pose le FOND en ligne, jamais la couleur du texte :
chaque pastille doit donner la sienne, sinon les initiales restent
en encre sombre sur un aplat sombre — illisibles. */
.bssav{width:36px;height:36px;border-radius:50%;flex:none;overflow:hidden;color:#fff;
display:flex;align-items:center;justify-content:center;font:700 12px/1 var(--f-ui)}
.bssav img{width:100%;height:100%;object-fit:cover}
.bsstx{min-width:0;display:flex;flex-direction:column;justify-content:center}
/* « flex:0 1 auto » et non « flex:1 » : avec trois noms, une liste
qui s'étire sur toute la hauteur repousse « Annuler » à huit cents
pixels du dernier bouton. Elle prend sa taille, et ne défile que
lorsqu'elle dépasse. */
.bssliste{width:100%;overflow:auto;flex:0 1 auto;min-height:0}
.bssh{font:700 11px/1 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;
opacity:.5;padding:16px 2px 7px;text-align:left}
/* 230 px et non 200 : « Marie-Claire N'GUYEN-DUPONT » se coupait,
et un nom coupé sur un écran où l'on cherche le sien est un nom
qu'on ne trouve pas. */
.bssgr{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.bssl{display:flex;flex-direction:row;align-items:center;gap:10px;border:none;
background:rgba(255,255,255,.08);border-radius:12px;padding:10px 13px;cursor:pointer;
font-family:var(--f-ui);color:inherit;text-align:left;min-width:0;width:100%}
.bssl:hover{background:rgba(255,255,255,.16)}
/* Le nom passe à la ligne plutôt que de se couper : sur un écran où
chacun cherche le sien, « Marie-Claire N'GUYEN-DU… » ne se trouve
pas. */
.bssn{font-size:15px;font-weight:600;max-width:100%;line-height:1.3}
.bsss{font-size:11.5px;opacity:.6}
.bssvide{padding:34px;text-align:center;opacity:.6}
/* La liste vient tout de suite après le titre, et le renoncement
juste après elle : « Annuler » collé au bas d'un écran de 900 px
n'est plus le même geste que « Annuler » sous la liste. */
.bsslarge .bssliste{margin-top:4px}
.bsslarge .blien{margin-top:16px;align-self:center}
/* ── LE THÈME CLAIR ──
Les fonds de la borne sont des blancs TRANSPARENTS : posés sur le
crème du thème clair, ils ne se voient pas. Chaque surface neuve
doit donc dire sa version claire, sinon elle disparaît de moitié
des bornes (v14.36). */
/* Les anciennes lignes « .bplanl » et leur pastille « .bplanp » ont
disparu avec la liste plate du planning (v14.39) : le thème clair
de la vue jour vit plus haut, avec les « .bpj* ». */
body.borne.theme-clair .bssl{background:#fff;border:1px solid var(--ligne)}
body.borne.theme-clair .bssl:hover{border-color:var(--terra);background:#fff}
.brech{width:100%;border:none;background:#fff;border-radius:13px;padding:13px 16px;font-family:var(--f-ui);
font-size:15px;box-shadow:var(--ombre);color:var(--encre)}
.brech:focus{outline:2px solid var(--terra)}
.bliste{background:#fff;border-radius:16px;overflow-y:auto;box-shadow:var(--ombre);flex:1}
.bl{display:flex;align-items:center;gap:15px;padding:15px 18px;border-bottom:1px solid var(--ligne);
width:100%;border-left:none;border-right:none;border-top:none;background:none;text-align:left;cursor:pointer}
.bl:last-child{border-bottom:none}
.bl:active{background:var(--terra-pale)}
.bav2{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;
font-family:var(--f-titre);font-weight:700;color:#fff;font-size:15px;flex:none}
.bn{flex:1;min-width:0}
.bn b{display:block;font-size:16px;font-weight:600}
.bn i{font-style:normal;font-size:13px;color:var(--muet)}
.bet{font-size:13px;font-weight:700;border-radius:22px;padding:7px 14px;white-space:nowrap}
.bet.present{background:var(--vert-pale);color:var(--vert)}
.bet.pause{background:var(--jaune-pale);color:var(--jaune)}
.bet.fini{background:var(--surface-2);color:var(--muet)}
.bet.attendu{background:#fff;color:var(--encre-2);border:1px solid var(--ligne-2)}
.bet.retard{background:var(--rouge-pale);color:var(--rouge)}
.bleg{display:flex;gap:12px;font-size:12px;color:var(--muet)}
.bleg span:last-child{margin-left:auto}
.bvide{padding:40px;text-align:center;color:var(--muet);line-height:1.7}
/* Écrans plein cadre */
.bmodal{position:fixed;inset:0;background:rgba(44,36,24,.55);display:flex;align-items:center;
justify-content:center;z-index:100}
.bmodal[hidden]{display:none}
.bmbox{background:#F2EFE7;border-radius:20px;width:min(880px,94vw);max-height:94vh;overflow:auto;
box-shadow:var(--ombre-2)}
.bplein{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
padding:38px 30px;text-align:center;position:relative}
.bplein h1{font-family:var(--f-titre);font-size:28px;font-weight:700;margin:0}
.bplein p{margin:0;color:var(--encre-2);max-width:560px;line-height:1.6;font-size:15px}
.bpetit{font-size:13px;color:var(--muet)}
/* Renommé « .bferm » : « .bx » est la case à cocher de TOUT le kit,
et cette règle de la borne l'écrasait dans l'application entière —
les cases se retrouvaient décalées de 14 px vers le bas, hors de
leur libellé. Un nom de classe à deux lettres finit toujours par
entrer en collision (v8.5). */
.bferm{position:absolute;top:14px;right:16px;width:42px;height:42px;border-radius:50%;
border:1px solid var(--ligne-2);
background:#fff;font-size:18px;cursor:pointer;color:var(--encre-2)}
.bpill{font-size:11.5px;font-weight:700;background:var(--surface-2);border:1px solid var(--ligne);
border-radius:20px;padding:4px 12px;color:var(--muet)}
.bcode{font-family:ui-monospace,monospace;font-size:46px;font-weight:700;letter-spacing:.16em;
background:#fff;border:2px dashed var(--ligne-2);border-radius:18px;padding:20px 32px}
.bpts{display:flex;gap:11px}
.bpts i{width:18px;height:18px;border-radius:50%;background:var(--ligne-2);display:block}
.bpts i.on{background:var(--encre)}
.bpav{display:grid;grid-template-columns:repeat(3,96px);gap:12px}
.bpav button{height:76px;border:1px solid var(--ligne-2);background:#fff;border-radius:16px;
font-family:var(--f-titre);font-size:26px;font-weight:600;cursor:pointer;color:var(--encre)}
.bpav button:active{background:var(--terra-pale);border-color:var(--terra)}
.bpav button.eff,.bpav button.ann{font-family:var(--f-ui);font-size:14px;font-weight:600;color:var(--encre-2)}
.bgestes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:15px;width:100%;max-width:720px}
.bgeste{border:none;border-radius:18px;padding:26px 20px;font-family:var(--f-ui);cursor:pointer;text-align:left;
box-shadow:var(--ombre)}
.bgeste b{display:block;font-family:var(--f-titre);font-size:20px;margin-bottom:4px}
.bgeste i{font-style:normal;font-size:13px;opacity:.88}
.bgeste.arr{background:var(--vert);color:#fff}
.bgeste.dep{background:var(--terra);color:#fff}
.bgeste.pau{background:var(--jaune);color:#fff}
.bgeste.rep{background:var(--bleu);color:#fff}
.bbtn{border:1px solid var(--ligne-2);background:#fff;border-radius:12px;padding:12px 22px;
font-family:var(--f-ui);font-size:14px;font-weight:600;cursor:pointer;color:var(--encre)}
.bmotifs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:680px}
.bmotifs button{border:1px solid var(--ligne-2);background:#fff;border-radius:24px;padding:12px 18px;
font-family:var(--f-ui);font-size:14px;cursor:pointer;color:var(--encre)}
.bmotifs button:active{border-color:var(--terra);color:var(--terra-h)}
.brond{width:104px;height:104px;border-radius:50%;background:var(--vert);color:#fff;
display:flex;align-items:center;justify-content:center;font-size:48px}
@media(max-width:820px){
.bapp{grid-template-columns:1fr}
.bside{flex-direction:row;align-items:center;gap:14px;padding:12px 16px}
/* En bandeau, la colonne n'a plus la place de raconter la journée :
météo, note, événements et thème s'effacent, l'essentiel reste —
l'heure et l'état de connexion (v9.5). */
.bcarte,.bpied,.bside .bmeteo,.bside .bnote,.bside .bevts,.bthemebtn{display:none}
.bstat{margin:0}
}
/* Réglages pointeuse */
.ptline{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--ligne);font-size:12.5px}
.ptline:last-of-type{border-bottom:none}
.ptline.off{opacity:.6}
.ptline .tx{flex:1}
.ptline .tx b{display:block;font-weight:600}
.ptline .tx i{font-style:normal;font-size:11.5px;color:var(--muet)}
.ptedit{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 16px;background:var(--surface-2);
border-bottom:1px solid var(--ligne)}
.ptedit[hidden]{display:none}
/* ── Cases à cocher en ligne ──
« .chk » aligne sa case et son libellé par flex, mais dans une
grille « .f2 » les items s'étiraient et la case se retrouvait
séparée de son texte. On en fait des pastilles autonomes : chacune
porte sa bordure, rien ne peut plus les disloquer (v8.5). */
.cases{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start}
.cases .chk{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
border:1px solid var(--ligne-2);border-radius:10px;padding:8px 12px;background:#fff;
transition:border-color .12s,background .12s;max-width:100%}
.cases .chk:hover{border-color:var(--muet)}
.cases .chk:has(input:checked){border-color:var(--vert);background:var(--vert-pale,#EDF3E6)}
.cases .chk .bx{margin-top:0;position:relative;top:0;left:0}
.ligne2{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--ligne);font-size:12.5px}
.ligne2:last-child{border-bottom:none}
.ligne2 .tx{flex:1}
.ligne2 .tx b{display:block;font-weight:600}
.ligne2 .tx i{font-style:normal;font-size:11.5px;color:var(--muet)}
/* ═══ v7.52 · Fenêtre de suppression définitive ═══
Rouge, centrée, avec le compte de ce qui va disparaître. Un
« êtes-vous sûr ? » se clique sans lire ; recopier huit caractères,
non. */
.supmodal{position:fixed;inset:0;background:rgba(44,36,24,.55);display:flex;align-items:center;
justify-content:center;z-index:960;padding:20px}
.supmodal[hidden]{display:none}
.supbox{background:var(--carte);border-radius:16px;width:min(560px,96vw);overflow:hidden;
box-shadow:var(--ombre-2)}
.suph{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;background:var(--rouge-pale);
border-bottom:1px solid #EED6D7;color:#8A2C31}
.suph .ic{font-size:20px;line-height:1.2}
.suph b{display:block;font-family:var(--f-titre);font-size:15px}
.suph i{font-style:normal;font-size:12px;opacity:.85}
.supc{padding:16px 18px}
.supc p{margin:0 0 12px;font-size:13px;line-height:1.6;color:var(--encre-2)}
.supliste{background:var(--surface-2);border:1px solid var(--ligne);border-radius:10px;
padding:11px 13px;font-size:12.5px;line-height:1.7;color:var(--encre-2);margin-bottom:14px}
.supf{display:flex;gap:9px;align-items:center;padding:13px 18px;border-top:1px solid var(--ligne);
background:var(--surface-2)}
.btn.danger[disabled]{opacity:.45;cursor:not-allowed}
/* ═══ Bandeau d'environnement ═══
Une PASTILLE centrée, pas une barre pleine largeur : elle doit se
voir sans manger une ligne d'écran ni décaler la mise en page. */
.envband{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:940;
display:inline-flex;align-items:center;gap:7px;padding:3px 13px 4px;
border-radius:0 0 9px 9px;font-size:10.5px;font-weight:700;letter-spacing:.04em;
text-transform:uppercase;color:#fff;box-shadow:0 2px 8px -2px rgba(0,0,0,.3);
white-space:nowrap;pointer-events:none}
.envband.dev{background:#4A6FA5}
.envband.beta{background:#8A5E86}
.envband .pt,.envband .d{display:none} /* la couleur et le mot suffisent */
.envband .v{opacity:.65;font-family:ui-monospace,monospace;font-weight:600;
text-transform:none;letter-spacing:0}
@media(max-width:600px){.envband{font-size:9.5px;padding:2px 10px 3px}}
/* La pastille flotte : aucune règle de décalage n'est nécessaire. */
body.borne .envband{position:fixed;top:0}
/* ═══ v7.53 · Édition en place et tokens ═══ */
.orgedit2{margin-top:12px;padding:14px;background:var(--surface-2);border:1px solid var(--ligne);
border-radius:12px}
.orgedit2[hidden]{display:none}
.orgedit2 .fg{margin-bottom:10px}
.tokneuf{background:var(--encre);color:#fff;border-radius:10px;padding:14px 16px;font-size:14px;
word-break:break-all;-webkit-user-select:all;user-select:all}
/* ═══ v7.54 · Bandeau développeur sur les écrans réels ═══
L'écran est celui du client ; le bandeau ajoute les outils, sans
se confondre avec l'interface qu'il surplombe. */
.devbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 16px;
padding:9px 14px;background:var(--rouge-pale);border:1px solid #EED6D7;border-radius:12px;
font-size:12px;color:#8A2C31}
.devbar .lbl{display:flex;align-items:center;gap:6px;font-weight:700;white-space:nowrap}
.devbar .ic{width:15px;height:15px}
.devbar .idt{background:#fff;border:1px solid #EED6D7;border-radius:7px;padding:3px 9px;
font-size:11px;cursor:pointer;user-select:all}
.devbar .idt.copie{background:var(--vert-pale);border-color:#CFE0BF;color:var(--vert)}
.devbar .idt.copie::after{content:' ✓'}
.devbar .sp{flex:1}
/* ═══ v7.61 · Alerte de schéma ═══
Une erreur de colonne manquante ne doit pas se lire comme une
absence de données. Rouge, en tête, avec la commande à lancer. */
.dbalerte{background:var(--rouge-pale);border-bottom:1px solid #EED6D7;color:#8A2C31;
padding:9px 18px;font-size:12.5px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.dbalerte b{font-weight:700;white-space:nowrap}
.dbalerte span{opacity:.9}
.dbalerte .cmd{margin-left:auto;font-family:ui-monospace,monospace;font-size:11.5px;
background:#fff;border:1px solid #EED6D7;border-radius:7px;padding:3px 9px;user-select:all}
/* ═══ v7.62 · Écrans d'authentification annexes ═══ */
.authpied{margin-top:14px;text-align:center;font-size:12.5px;color:var(--muet)}
.authpied a{color:var(--terra-h);text-decoration:none;font-weight:600}
.authpied a:hover{text-decoration:underline}
.code2fa{text-align:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
font-size:26px;letter-spacing:.32em;padding:12px 10px}
/* ═══ v7.70 · Vider les données (mode développeur) ═══
Chaque catégorie annonce son volume : une case « Pointages · 0 »
se coche sans crainte, « Pointages · 1 240 » fait réfléchir. */
.vidliste{border:1px solid var(--ligne);border-radius:11px;overflow:hidden;margin-bottom:14px}
.vidcat{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;cursor:pointer;
border-bottom:1px solid var(--ligne);background:var(--carte)}
.vidcat:last-child{border-bottom:0}
.vidcat:hover{background:var(--surface-2)}
.vidcat.vide{opacity:.45;cursor:default}
.vidcat.vide:hover{background:var(--carte)}
.vidcat .txt{flex:1;min-width:0}
.vidcat .txt b{display:block;font-size:13px;font-weight:600;color:var(--encre)}
.vidcat .txt i{display:block;font-style:normal;font-size:11.5px;line-height:1.5;color:var(--muet);margin-top:2px}
.vidcat .n{font-family:ui-monospace,monospace;font-size:12px;font-weight:600;color:var(--encre-2);
background:var(--surface-2);border:1px solid var(--ligne);border-radius:7px;padding:2px 8px;white-space:nowrap}
.vidcat.vide .n{background:transparent;border-color:transparent}
/* ═══ v7.72 · Dépôt d'image : on réutilise .drop du kit ═══
Même bordure, même état « .over », mêmes couleurs. Seule
l'icône est ajoutée — le kit n'en prévoyait pas. */
/* L'attribut « hidden » ne suffit pas : .drop impose display:block,
qui l'emporte. On le rétablit explicitement. */
.drop[hidden]{display:none}
.drop .dico{display:block;margin:0 auto 9px;width:26px;height:26px;color:var(--muet)}
.drop .dico svg{width:26px;height:26px}
.drop:hover .dico,.drop.over .dico{color:var(--terra-h)}
.drop .dfile{display:none}
/* ═══ v7.73 · Photos et logos ═══
L'image est affichée EN ENTIER et le cadre se déplace par-dessus :
on peut donc sélectionner bord à bord. Un logo n'a pas de cadre du
tout — le rogner reviendrait à mutiler une marque. */
.avphoto{padding:0!important;overflow:hidden;background:var(--surface-2)!important;
display:inline-flex;flex:none;position:relative;color:transparent}
.avphoto>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
border-radius:inherit}
.imgzone{display:flex;justify-content:center;margin:0 0 14px}
.imgwrap{position:relative;user-select:none;touch-action:none;
background:var(--surface-2);border:1px solid var(--ligne);border-radius:10px;
/* Le voile du cadre est une ombre de 9999px : sans confinement, il
assombrissait toute la fenêtre, boutons compris, qui semblaient
alors désactivés. */
overflow:hidden;isolation:isolate}
.imgwrap img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;
border-radius:9px}
/* Le voile assombrit ce qui SORT du cadre : on voit d'un coup d'œil
ce qui sera conservé. */
.imgcadre{position:absolute;cursor:move;box-shadow:0 0 0 9999px rgba(62,43,26,.45);
outline:2px solid #fff;outline-offset:-1px}
.imgcadre::before{content:'';position:absolute;inset:0;
background:linear-gradient(to right,transparent 33%,rgba(255,255,255,.35) 33%,
rgba(255,255,255,.35) 33.4%,transparent 33.4%,transparent 66.6%,
rgba(255,255,255,.35) 66.6%,rgba(255,255,255,.35) 67%,transparent 67%),
linear-gradient(to bottom,transparent 33%,rgba(255,255,255,.35) 33%,
rgba(255,255,255,.35) 33.4%,transparent 33.4%,transparent 66.6%,
rgba(255,255,255,.35) 66.6%,rgba(255,255,255,.35) 67%,transparent 67%);
pointer-events:none}
.imgcadre .p{position:absolute;width:16px;height:16px;background:#fff;border:2px solid var(--terra);
border-radius:3px}
/* Les poignées sont À L'INTÉRIEUR du cadre : le conteneur est
désormais confiné, et tout ce qui déborde serait rogné. */
.imgcadre .nw{left:-1px;top:-1px;cursor:nwse-resize}
.imgcadre .ne{right:-1px;top:-1px;cursor:nesw-resize}
.imgcadre .sw{left:-1px;bottom:-1px;cursor:nesw-resize}
.imgcadre .se{right:-1px;bottom:-1px;cursor:nwse-resize}
/* .avatar n'existait que dans .band et .fichehead : posé ailleurs —
sur le profil — il n'avait ni taille ni forme. Base autonome, que
les contextes existants continuent d'écraser. */
.avatar{width:38px;height:38px;border-radius:50%;color:#fff;display:inline-flex;
align-items:center;justify-content:center;font-family:var(--f-titre);font-weight:600;
font-size:15px;flex:none}
/* .avedit doit être le RÉFÉRENTIEL du crayon : sans
position:relative, celui-ci se positionne par rapport à la page et
part hors de l'écran. */
.avedit{position:relative;display:inline-flex;cursor:pointer;flex:none;vertical-align:middle}
/* .logoprev rogne son contenu — c'est voulu pour l'image, qui doit
rester dans le cadre arrondi. Mais le crayon, lui, DOIT dépasser :
on lève le rognage uniquement quand la pastille porte le bouton, et
on redonne l'arrondi à l'image. */
.logoprev.avedit{overflow:visible}
.logoprev.avedit img{border-radius:11px}
.avedit .stylo{position:absolute;right:-3px;bottom:-3px;width:24px;height:24px;border-radius:50%;
background:var(--carte);border:1px solid var(--ligne);display:flex;align-items:center;
justify-content:center;box-shadow:var(--ombre-1);color:var(--encre-2);transition:all .15s}
.avedit .stylo .ico{width:12px;height:12px;vertical-align:0}
.avedit:hover .stylo{background:var(--terra);border-color:var(--terra);color:#fff}
/* ═══ v7.79 · Familles d'icônes d'étiquette ═══
Un intitulé discret sépare les métiers : le regard trouve sa
famille avant de choisir un pictogramme. */
.icfam{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
color:var(--muet);margin:12px 0 5px}
.icfam:first-of-type{margin-top:8px}
/* ═══ v7.80 · Modèles de saisie (écran Planification) ═══
Chaque modèle montre son contenu — horaires ou durée — plutôt que
son seul nom : « Ouverture » ne dit pas à quelle heure. */
.msbloc{border-top:1px solid var(--ligne)}
.mshead{display:flex;align-items:center;gap:10px;padding:13px 18px 9px}
.mshead b{font-size:13.5px;font-weight:600;color:var(--encre)}
.mshead .msm{flex:1;font-size:11.5px;color:var(--muet)}
.mslist{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 12px}
.msitem{display:flex;flex-direction:column;align-items:flex-start;gap:1px;position:relative;
border:1px solid var(--ligne-2);background:#fff;border-radius:11px;padding:9px 30px 9px 13px;
cursor:pointer;text-align:left;transition:all .12s;min-width:132px}
.msitem:hover{border-color:var(--terra);background:var(--terra-pale)}
.msitem b{font-size:13px;font-weight:600;color:var(--encre)}
.msitem i{font-style:normal;font-size:11.5px;color:var(--muet)}
.msitem .mspen{position:absolute;right:10px;top:50%;transform:translateY(-50%);
color:var(--muet);opacity:0;transition:opacity .12s}
.msitem:hover .mspen{opacity:1}
.msvide{padding:0 18px 12px;font-size:12.5px;color:var(--muet)}
/* ═══ v7.81 · Choix des jours dans un modèle ═══ */
.jselmod{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.jselmod label{flex:none}
/* Sept parts égales, quand les sept jours occupent une ligne à eux
seuls : « L » est une lettre étroite et « D » une lettre large, et
sept pastilles dimensionnées sur leur lettre ne tombent sur aucun
bord commun. Dans une grille, elles doivent partager la largeur
comme les colonnes la partagent. (v14.31) */
.jselmod.jsm7{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.jselmod.jsm7 span{min-width:0}
.jselmod span{min-width:42px;padding:9px 6px;text-align:center;border:1px solid var(--ligne-2);
border-radius:9px;background:#fff;font-size:12.5px;font-weight:600;color:var(--encre-2);
display:block;cursor:pointer;transition:all .12s}
.jselmod input{position:absolute;opacity:0;width:0;height:0}
.jselmod input:checked+span{background:var(--terra);border-color:var(--terra);color:#fff}
/* ═══ v7.85 · Sélecteurs de date et d'heure ═══
Le champ natif reste VISIBLE et saisissable au clavier : taper
« 0930 » est plus rapide que de faire défiler deux colonnes quand
on connaît l'heure. On masque seulement l'icône du navigateur, et
la nôtre ouvre le sélecteur maison. */
/* ── L'ENVELOPPE NE DOIT RIEN IMPOSER ── (v14.31)
Elle était en « inline-flex ». Un élément en ligne prend la largeur
de son contenu, et le contenu d'un champ de date est la largeur que
le navigateur donne au format du pays : 137 px pour jj/mm/aaaa,
105 px pour hh:mm. L'enveloppe imposait donc la seule chose qu'elle
ne devait pas imposer — la largeur. Le champ n'occupait plus sa
colonne, et rien ne tombait au même bord dans une grille ; trois
écrans avaient déjà contourné le défaut chacun de son côté.
« flex » de niveau bloc rend au champ son comportement nu : dans un
parent en bloc il prend toute la largeur, comme le veut
« .fi{width:100%} » ; dans un parent en flex ou en grille il reste
un élément qui se dimensionne sur son contenu. */
.dtwrap{position:relative;display:flex;align-items:center;max-width:100%}
/* Le champ remplit son enveloppe sans descendre sous elle. La base
« auto » respecte une largeur voulue ailleurs — la ligne d'horaires
compacte du planning — avant de s'étirer. */
.dtwrap > input{flex:1 1 auto;min-width:0;padding-right:30px!important}
.perline .dtwrap{width:150px;flex:none}
.rowf .dtwrap{flex:1;min-width:0}
/* L'icône du navigateur disparaît : deux horloges côte à côte
n'aideraient personne. */
.dtnatifvu::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}
.dtnatifvu::-webkit-inner-spin-button{display:none}
.dtouvre{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:22px;height:22px;
border:0;background:transparent;padding:0;cursor:pointer;color:var(--muet);
display:flex;align-items:center;justify-content:center;border-radius:6px}
.dtouvre svg{width:15px;height:15px}
.dtouvre:hover{color:var(--terra-h);background:var(--surface-2)}
/* Dans le bandeau d'horaires du tiroir, l'icône suit la typographie
du champ. */
.qheures .dtouvre{right:2px}
.qheures .dtwrap > input{padding-right:26px!important}
.dtpop{position:fixed;inset:0;z-index:420}
.dtpop[hidden]{display:none}
.dtveil{position:absolute;inset:0}
.dtbox{position:absolute;background:#fff;border:1px solid var(--ligne);border-radius:13px;
box-shadow:var(--ombre-2);overflow:hidden;width:236px}
.dthead{display:flex;border-bottom:1px solid var(--ligne);background:var(--surface-2)}
.dthead span{flex:1;text-align:center;padding:7px 0;font:700 10px/1 var(--f-ui);
letter-spacing:.07em;text-transform:uppercase;color:var(--muet)}
.dtcols{display:flex;height:184px}
.dtcol{flex:1;overflow-y:auto;border-right:1px solid var(--ligne);scrollbar-width:thin}
.dtcol:last-child{border-right:0}
.dtcol button{display:block;width:100%;border:0;background:transparent;padding:9px 0;
font-family:var(--f-ui);font-size:14px;color:var(--encre-2);cursor:pointer}
.dtcol button:hover{background:var(--surface-2)}
.dtcol button.on{background:var(--terra);color:#fff;font-weight:700}
.dtracc{display:flex;gap:5px;flex-wrap:wrap;padding:9px;border-top:1px solid var(--ligne)}
.dtracc button{border:1px solid var(--ligne-2);background:#fff;border-radius:8px;padding:5px 9px;
font:600 12px/1 var(--f-ui);color:var(--encre-2);cursor:pointer}
.dtracc button:hover{border-color:var(--terra);color:var(--terra-h)}
.dtbox:has(.dtcal){width:272px}
.dth{display:flex;align-items:center;gap:8px;padding:10px 11px;border-bottom:1px solid var(--ligne)}
.dth b{flex:1;text-align:center;font-family:var(--f-titre);font-size:14px;font-weight:600;
text-transform:capitalize}
.dth button{width:28px;height:28px;border:1px solid var(--ligne);border-radius:8px;background:#fff;
font-size:15px;line-height:1;color:var(--encre-2);cursor:pointer}
.dtcal{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;padding:9px}
.dtcal i{text-align:center;font:700 10px/1 var(--f-ui);color:var(--muet);padding:3px 0;font-style:normal}
.dtj{border:1px solid transparent;background:transparent;border-radius:8px;padding:7px 0;
font:600 12.5px/1 var(--f-ui);color:var(--encre);cursor:pointer}
.dtj:hover{background:var(--surface-2)}
.dtj.auj{border-color:var(--ligne-2)}
.dtj.on{background:var(--terra);color:#fff;border-color:var(--terra)}
/* Légende d'une ligne du kit d'interface. */
.kitrow .kh{font-size:11.5px;color:var(--muet);line-height:1.55;margin-top:5px;flex-basis:100%}
.kitrow code{font-family:ui-monospace,monospace;font-size:11.5px;background:var(--surface-2);
border:1px solid var(--ligne);border-radius:5px;padding:1px 4px}
/* ═══ v7.87 · Étoile « ajouter à la bibliothèque » ═══
Posée près de la fermeture, discrète tant qu'on ne la survole pas :
c'est une action occasionnelle, pas le geste principal. */
.dwfav{width:34px;height:34px;border:1px solid var(--ligne);border-radius:10px;background:#fff;
color:var(--muet);display:flex;align-items:center;justify-content:center;cursor:pointer;
flex:none;margin-right:6px;transition:all .12s}
.dwfav[hidden]{display:none}
.dwfav svg{width:16px;height:16px}
.dwfav:hover{color:var(--jaune-h,#8F6512);border-color:var(--jaune-h,#8F6512);background:var(--jaune-pale,#FCF3D8)}
/* Étoile remplie : ce shift est déjà dans la bibliothèque. */
.dwfav.on{color:#8F6512;border-color:#F4CB4B;background:#FCF3D8}
.dwfav.on svg{fill:#F4CB4B}
/* Le groupe d'actions se comporte comme un élément de la barre. */
.plactions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* ═══ v7.93 · Shift validé et sélection pour validation ═══
Deux états seulement : validé ou non. La couleur de l'étiquette
reste, le fond se soutient, le bord fonce, une coche pleine
apparaît. Pas de pastille d'état à apprendre. */
/* Validé : les QUATRE côtés foncent, le gauche restant épais.
Garder à gauche la teinte claire de l'étiquette le rendait
invisible sur un fond de la même famille — un liseré bleu pâle sur
un bleu pâle ne se voit pas (v7.99). Le poste reste identifié par
le fond et par son nom ; c'est la validation qui a besoin d'être
lisible d'un coup d'œil. */
.sh.shvalide{filter:saturate(1.4) brightness(.95);
border-color:currentColor!important;
border-width:1.5px;border-left-width:4px}
/* ── Shift EN COURS : pointé à l'entrée, pas encore à la sortie ──
Un pointillé qui tourne dit « ce n'est pas fini » sans ajouter de
texte dans une case déjà dense. */
/* ── Shift EN COURS ──
Un liseré qui fait LE TOUR du shift. Le pointillé a disparu : deux
signaux pour la même chose se concurrençaient, et le trait du bas
seul ne se lisait pas comme « en cours » (v8.0).
Technique : un dégradé conique tourne dans un pseudo-élément
placé DERRIÈRE le contenu, et un masque ne laisse voir que la
bordure. Aucun décalage de mise en page. */
.sh.shencours{position:relative;border-color:transparent;border-width:2px;border-left-width:3px}
.sh.shencours::before{content:'';position:absolute;inset:-2px;border-radius:9px;padding:2px;
background:conic-gradient(from var(--ang,0deg),transparent 0deg,currentColor 60deg,
transparent 130deg,transparent 360deg);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;
animation:shtour 2.4s linear infinite;pointer-events:none}
@property --ang{syntax:'';inherits:false;initial-value:0deg}
@keyframes shtour{to{--ang:360deg}}
/* Repli pour les navigateurs sans @property : un liseré fixe, qui
dit au moins que le shift est particulier. */
@supports not (background:conic-gradient(from 0deg,red,blue)){
.sh.shencours{border-color:currentColor;border-style:dashed}
.sh.shencours::before{display:none}
}
@media (prefers-reduced-motion:reduce){
.sh.shencours::before{animation:none;background:currentColor;opacity:.5}
}
.sh .shtick{position:absolute;right:5px;bottom:4px;width:15px;height:15px;border-radius:50%;
background:currentColor;display:flex;align-items:center;justify-content:center;
box-shadow:0 0 0 1.5px rgba(255,255,255,.65)}
.sh .shtick::before{content:'✓';color:#fff;font-size:9px;font-weight:700;line-height:1}
/* Écart au pointage : rouge si l'on a fait PLUS que prévu — c'est un
coût —, vert si moins. La couleur porte le sens. */
/* Le MÊME composant sur une piste (v13.11) : un shift validé y
porte ses heures retenues, et l'écart au prévu se dit exactement
comme sur la carte. Un second jeu de règles pour le même objet
finirait par en dire autre chose. */
.sh .dl, .jsh .dl{display:inline-block;font-size:9px;font-weight:700;padding:2px 5px;border-radius:4px;
margin-left:4px;vertical-align:1px;letter-spacing:.02em}
.sh .dl.p, .jsh .dl.p{background:#BA3E45;color:#fff}
.sh .dl.m, .jsh .dl.m{background:#55773B;color:#fff}
/* Le chiffre vit dans un « » — même gabarit que le segment du
bloc soudé, qui en a besoin, lui, pour échapper au piège de
« currentColor ». Une seule forme pour les deux (v12.7). */
.sh .dl > i, .jsh .dl > i{font-style:normal;color:inherit}
/* ═══ LE BLOC SOUDÉ D'UN SHIFT VALIDÉ ═══ (v12.7)
Les heures RETENUES et leur écart au prévu forment UN SEUL objet :
ils partent en paie ensemble, et le bloc le dit. Il n'apparaît
qu'au dernier état — celui où le nombre ne bougera plus. Tant
qu'il n'y a pas de bloc, le chiffre est encore susceptible de
changer.
Un seul bord, un seul arrondi : « overflow:hidden » suffit à faire
suivre les coins aux deux segments, il n'y a aucun rayon à
recalculer de part et d'autre. */
.sh .shret,.jsh .shret{display:inline-flex;align-items:stretch;border-radius:6px;overflow:hidden;
margin:1px 0;vertical-align:1px;max-width:100%;border:1.5px solid currentColor}
.sh .shret .shrh,.jsh .shret .shrh{padding:2px 7px;background:rgba(255,255,255,.85);
display:flex;align-items:center;min-width:0}
/* Les heures cèdent quand la colonne rétrécit ; l'écart, JAMAIS.
Un « +21mn » tronqué en « +2… » serait un chiffre faux à l'écran. */
.sh .shret .shrh > span,.jsh .shret .shrh > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ── LE PIÈGE DE « currentColor » ──
« background:currentColor » AVEC « color:#fff » dans la même règle
donne un bloc blanc sur blanc : « currentColor » y vaut la couleur
qu'on vient d'y poser. Le kit résout déjà cela pour « .shtick » —
le fond sur le parent, la couleur du texte sur l'ENFANT. On copie.
L'écart prend la couleur DU POSTE, et non un rouge ou un vert
fixes : mesuré sur les 31 couleurs de la palette, huit d'entre
elles (Rouge à 0,3° de teinte, Vert à 3,4°, Corail, Framboise,
Terracotta, Rose, Prune, Orange) avalaient une pastille rouge ou
verte. Le blanc sur le plein tient de 5,14:1 à 11,12:1 sur toute
la palette — le seuil lisible est 4,5:1. */
.sh .shret .shre,.jsh .shret .shre{background:currentColor;padding:2px 7px;display:flex;
align-items:center;flex:none}
.sh .shret .shre > i,.jsh .shret .shre > i{font-style:normal;color:#fff;font-size:10px;font-weight:800;
letter-spacing:.02em;line-height:1}
/* ── LA COCHE ET L'ENCADRÉ SE COGNAIENT ──
« .shtick » est posée en ABSOLU au coin bas-droit. Tant que la
carte portait des heures nues, elle tombait dans le vide ; le bloc
va jusqu'au bord, et elle se posait dessus — sur une colonne
étroite, elle mangeait le chiffre de l'écart. Aucune carte isolée
ne le montrait : il a fallu une grille à la largeur réelle.
Le kit règle déjà le même cas pour la case à cocher d'un shift
pointé (« .sh.shpointe{padding-right:26px} ») : on lui emprunte sa
solution plutôt que d'en inventer une. */
.sh.shvalide{padding-right:24px}
/* ── LA PASTILLE CREUSE : « À VALIDER » ── (v13.6)
Quatre états, et un seul appelait un geste sans porter la moindre
marque : on le déduisait de la date. Même place et même taille que
la coche — le regard cherche au même endroit — et c'est la FORME
qui porte le sens : creuse, il reste à faire ; pleine, c'est fait.
Le pointillé achève de dire « pas encore ».
Pas de couleur propre : elle prend celle du poste, comme la coche.
Un vert « validé » et un ambre « à valider » se seraient battus
avec les 31 couleurs d'étiquettes, dont un vert et un ambre. */
.shring{width:15px;height:15px;border-radius:50%;border:1.5px dashed currentColor;
opacity:.7;box-sizing:border-box;flex:none}
.sh.shavalider{padding-right:24px}
/* Case de sélection, à droite, révélée au survol et maintenue une
fois cochée : sans elle, rien n'indique qu'un shift est
sélectionnable pour la validation. */
.sh .shcocher{position:absolute;right:5px;top:5px;width:16px;height:16px;border-radius:5px;
border:1.5px solid currentColor;background:rgba(255,255,255,.78);opacity:0;
transition:opacity .12s;display:flex;align-items:center;justify-content:center}
.sh:hover .shcocher{opacity:.7}
.sh.shsel .shcocher,.sh:hover.shsel .shcocher{opacity:1;background:var(--terra);
border-color:var(--terra)}
.sh.shsel .shcocher::before{content:'✓';color:#fff;font-size:10px;font-weight:700;line-height:1}
.sh.shpointe{padding-right:26px}
.selbar .bvalider{background:#55773B!important;border-color:#55773B!important}
/* ═══ v7.94 · Borne : salariés hors journée ═══
Ils ne sont pas dans la liste du jour, mais restent joignables par
la recherche — c'est ce que promettait le code sans le faire. */
/* Masquée par défaut, mais le filtre JS doit pouvoir la montrer :
« display:none » en CSS l'emportait sur le style en ligne, et la
recherche ne révélait rien. On utilise un attribut piloté. */
.bl.bhors[hidden]{display:none}
.bl.bhors .bn i{color:var(--muet)}
.bhorsinfo{margin:0 0 10px;padding:9px 12px;border-radius:10px;background:#FBEEDB;
border:1px solid #EFD3A6;color:#8A5A17;font-size:13px;line-height:1.5}
.brech.brech-on{border-color:var(--terra);box-shadow:0 0 0 3px rgba(233,102,70,.14)}
/* ═══ v7.94 · Sélection pour validation ═══
Dès qu'une case est cochée, TOUTES les cases apparaissent : sinon
il faut survoler chaque shift pour deviner qu'il est
sélectionnable. */
body.modesel .sh .shcocher{opacity:.7}
body.modesel .sh.shsel .shcocher{opacity:1}
/* La case rend le clic à elle seule : sans « pointer-events », un
clic dessus ouvrait le tiroir de modification. */
.sh .shcocher{pointer-events:auto;cursor:pointer;z-index:4}
.jcocher{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--ligne-2);
background:#fff;cursor:pointer;flex:none;margin-left:6px;opacity:0;transition:opacity .12s;
display:flex;align-items:center;justify-content:center;padding:0}
.dd:hover .jcocher,body.modesel .jcocher{opacity:.75}
.jcocher.on{opacity:1;background:var(--terra);border-color:var(--terra)}
.jcocher.on::before{content:'✓';color:#fff;font-size:11px;font-weight:700;line-height:1}
/* Second geste de validation : sans pointage, on valide au planifié.
Teinte plus sobre — c'est l'exception, pas la routine. */
.selbar .bvalider2{background:rgba(255,255,255,.16)!important;
border-color:rgba(255,255,255,.35)!important}
/* ═══ v7.97 · Borne : logo, secondes, dissociation ═══ */
.blogo.blogoimg{padding:0;overflow:hidden;background:#fff}
.blogo.blogoimg img{width:100%;height:100%;object-fit:contain;display:block}
.bhh small{font-size:.44em;font-weight:600;opacity:.55;margin-left:3px;vertical-align:top;
letter-spacing:0}
.bdissoc{width:100%;border:1px solid rgba(255,255,255,.22);background:transparent;color:inherit;
border-radius:10px;padding:9px 12px;font:600 12.5px/1 var(--f-ui);cursor:pointer;opacity:.55;
transition:opacity .12s}
.bdissoc:hover{opacity:1;border-color:rgba(255,255,255,.4)}
/* Bouton de la barre pendant l'envoi : il dit qu'il a été pressé. */
.selbar button:active{transform:translateY(1px)}
.selbar button.encours{opacity:.7;cursor:progress}
/* Logo de borne plus grand : lisible à deux mètres. */
.bhd .blogo{width:64px;height:64px;font-size:20px}
.bhd .blogo.blogoimg{padding:5px}
/* Dévalider : rouge, et distinct du bouton de validation. */
.selbar .bdevalider{background:#BA3E45!important;border-color:#BA3E45!important}
/* « .btn{display:inline-flex} » l'emporte sur l'attribut hidden : un
bouton masqué restait visible. Même piège que « .drop » en v7.72 —
toute classe qui impose un display doit rendre hidden explicite. */
.btn[hidden],.qchip[hidden],.bfil[hidden]{display:none!important}
/* ═══ v8.0 · Bloc de validation dans le tiroir ═══ */
.valbloc{border:1px solid var(--ligne);border-radius:13px;background:var(--surface-2);
padding:12px 14px;margin-bottom:14px}
.valbloc[hidden]{display:none!important}
.rappelp{display:flex;align-items:baseline;gap:9px;padding:8px 11px;background:var(--carte);
border:1px solid var(--ligne);border-radius:10px;margin-bottom:11px;font-size:12.5px}
.rappelp span{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muet)}
.rappelp i{font-style:normal;color:var(--muet);font-size:11.5px;margin-left:auto}
.frise{position:relative;padding-left:22px;margin-bottom:11px}
.frise:empty{display:none}
.frise::before{content:'';position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:var(--ligne)}
.frev{position:relative;padding:6px 0;display:block}
.frev .frpt{position:absolute;left:-22px;top:11px;width:12px;height:12px;border-radius:50%;
border:2.5px solid var(--carte)}
.frev .frpt.in{background:#55773B;box-shadow:0 0 0 1.5px #55773B}
.frev .frpt.out{background:#BA3E45;box-shadow:0 0 0 1.5px #BA3E45}
.frev .frpt.pa{background:var(--muet);box-shadow:0 0 0 1.5px var(--muet)}
.frevh{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.frevh b{font-size:14px;font-weight:700;font-family:var(--f-titre);min-width:46px}
.frevt{font-size:12px;font-weight:600;color:var(--encre-2)}
.prev{font-size:10.5px;color:var(--muet);background:var(--carte);border:1px solid var(--ligne);
border-radius:5px;padding:2px 5px}
.frevn{margin-top:4px;background:var(--carte);border:1px solid var(--ligne);border-radius:9px;
padding:6px 9px;font-size:11.5px;color:var(--encre-2);line-height:1.5}
.frevn .src{display:block;font-size:10px;color:var(--muet);margin-top:2px}
.frvide{font-size:12px;color:var(--muet);line-height:1.55;padding:2px 0 8px}
.bilanp{display:flex;align-items:baseline;gap:9px;padding:9px 11px;border:1px solid var(--ligne);
border-radius:10px;background:var(--carte)}
.bilanp span:first-child{font-size:10px;font-weight:700;letter-spacing:.06em;
text-transform:uppercase;color:var(--muet)}
.bilanp b{font-family:var(--f-titre);font-size:18px;font-weight:600;margin-left:auto}
.ecart-pos{background:#BA3E45;color:#fff;font-size:9.5px;font-weight:700;padding:2px 5px;border-radius:4px}
.ecart-neg{background:#55773B;color:#fff;font-size:9.5px;font-weight:700;padding:2px 5px;border-radius:4px}
.tracev{margin-top:10px;font-size:11.5px;color:var(--muet);font-style:italic}
.tracev[hidden]{display:none}
.tracev b{font-style:normal;color:var(--encre-2)}
/* Verrouillé : on le VOIT, on ne le devine pas. */
.dwform.verrouille .dwsect:not(.valbloc){opacity:.55}
/* ═══ v8.2 · Retard constaté, blocs figés ═══ */
.retardb{margin-top:11px;background:#FBEEDB;border:1px solid #EFD3A6;color:#8A5A17;
border-radius:11px;padding:10px 12px;font-size:12.5px}
.retardb[hidden]{display:none!important}
.retardb b{display:block;margin-bottom:7px}
.retardb .rch{display:flex;gap:6px;flex-wrap:wrap}
.retardb .rch button{border:1px solid #E0C089;background:#fff;border-radius:8px;padding:5px 10px;
font:600 11.5px/1 var(--f-ui);color:#8A5A17;cursor:pointer}
.retardb .rch button.on{background:#8A5A17;color:#fff;border-color:#8A5A17}
/* Bloc figé : un fait constaté ne se modifie pas. */
.dwsect.fige{opacity:.6;pointer-events:none}
/* ═══ v8.3 · Appairage saisi sur la borne ═══ */
.bappform{display:flex;gap:12px;justify-content:center;align-items:center;margin:22px 0 8px;
flex-wrap:wrap}
.bappcode{font-family:var(--f-titre);font-size:38px;font-weight:700;letter-spacing:.14em;
text-align:center;width:290px;padding:14px 10px;border:2px solid var(--ligne-2);
border-radius:14px;background:#fff;text-transform:uppercase}
.bappcode:focus{outline:none;border-color:var(--terra);box-shadow:0 0 0 4px rgba(233,102,70,.16)}
.bapperr{background:#FBE7E8;border:1px solid #F0C9CB;color:#A8323A;border-radius:12px;
padding:12px 16px;font-size:15px;margin:0 auto;max-width:520px}
/* Code d'appairage affiché dans ExpéRHia : il doit se lire depuis
l'autre bout de la pièce, une tablette à la main. */
.codecard{border-color:var(--terra);box-shadow:0 0 0 3px rgba(233,102,70,.1)}
.codegros{font-family:var(--f-titre);font-size:44px;font-weight:700;letter-spacing:.16em;
color:var(--terra-h);background:var(--terra-pale);border:1px solid #F0C4B4;
border-radius:14px;padding:16px 20px;display:inline-block}
/* ═══ v8.4 · Fiche tablette et photo au pointage ═══ */
.ptcode{font-family:var(--f-titre);font-size:15px;font-weight:700;letter-spacing:.1em;
background:var(--terra-pale);border:1px solid #F0C4B4;color:var(--terra-h);
border-radius:8px;padding:5px 10px;white-space:nowrap}
.ptbloc{flex-basis:100%;padding-top:4px}
.ptbloc .fl{display:block;margin-bottom:5px}
/* Prise de photo sur la borne : plein écran, décompte lisible à deux
mètres, aucun bouton — un déclencheur manuel se contourne en ne le
touchant pas. */
.bphoto{position:fixed;inset:0;background:rgba(30,22,14,.94);z-index:600;display:flex;
flex-direction:column;align-items:center;justify-content:center;gap:18px}
.bphoto[hidden]{display:none}
.bphoto video{width:min(72vw,520px);border-radius:18px;transform:scaleX(-1);background:#000}
.bphoto .bpc{font-family:var(--f-titre);font-size:96px;font-weight:700;color:#fff;line-height:1}
.bphoto .bpt{color:rgba(255,255,255,.85);font-size:17px;text-align:center;max-width:520px;
line-height:1.5}
.bphoto .bpflash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.bphoto .bpflash.on{animation:bpflash .45s ease-out}
@keyframes bpflash{from{opacity:.85}to{opacity:0}}
/* ═══ v8.6 · Choix du mode d'identification ═══
Deux pastilles larges, avec leur explication : le choix engage la
manière dont on pointe, il mérite plus qu'un mot. */
.cases.modes{gap:10px}
.cases.modes .chk{align-items:flex-start;padding:12px 14px;max-width:340px}
.cases.modes .mtx{display:flex;flex-direction:column;gap:2px}
.cases.modes .mtx b{font-size:13px;font-weight:600}
.cases.modes .mtx i{font-style:normal;font-size:11.5px;color:var(--muet);line-height:1.45}
.cases.modes .chk .bx{margin-top:2px;border-radius:50%}
/* ═══ v8.6 · Signature au doigt ═══ */
.bsign{position:fixed;inset:0;background:rgba(30,22,14,.94);z-index:620;display:flex;
align-items:center;justify-content:center;padding:20px}
.bsign[hidden]{display:none}
.bsigncard{background:#fff;border-radius:20px;padding:24px;max-width:760px;width:100%;
text-align:center}
.bsigncard h2{font-family:var(--f-titre);font-size:24px;font-weight:600;margin:0 0 4px}
.bsigncard p{color:var(--muet);margin:0 0 16px;font-size:15px}
#bsigncv{width:100%;height:auto;max-height:46vh;border:2px dashed var(--ligne-2);
border-radius:14px;background:var(--surface-2);touch-action:none;cursor:crosshair}
.bsignact{display:flex;gap:10px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.bsignact .bbtn:disabled{opacity:.45;cursor:not-allowed}
/* ═══ LES POINTEUSES EN LIGNES ═══ (v14.46)
── CE QUE LA GRILLE DE CARTES NE SAVAIT PAS FAIRE ──
Trois cartes de hauteurs différentes ne se comparent pas. La seule
question qu'on se pose en ouvrant cet écran — « est-ce que mes
bornes tournent ? » — demande de lire UNE colonne, pas de parcourir
des blocs. À trente bornes sur six sites, la grille devenait un mur.
Et elle inversait la gravité : « Supprimer » était le bouton le
plus voyant de chaque carte, pour le geste le plus rare, quand
« Modifier » — le plus fréquent — venait en dernier. La ligne
applique la règle du pied de tiroir : ce qu'on vient faire est
visible, le reste vit dans un menu.
Les colonnes sont fixes pour que tout s'aligne d'une ligne à
l'autre ; seuls le nom et le périmètre respirent. */
.ptbar{display:flex;align-items:flex-start;gap:16px;margin:4px 0 16px;flex-wrap:wrap}
.pth{font-family:var(--f-titre);font-size:21px;font-weight:600;margin:0}
.ptsub{margin:4px 0 0;color:var(--muet);font-size:13px;max-width:62ch;line-height:1.5}
.ptbar .btn{margin-left:auto}
/* ── LA SANTÉ DU PARC ──
La première question, répondue en premier, avant la liste. Chaque
puce porte un NOMBRE et ce qu'il compte : « 1 silencieuse » se lit
de loin, « en veille » ne dit rien. */
.ptsant{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.ptsp{display:inline-flex;align-items:center;gap:9px;background:var(--surface-2);
border:1px solid var(--ligne);border-radius:11px;padding:9px 14px;min-width:0}
.ptsp b{font-family:var(--f-titre);font-size:19px;line-height:1;font-variant-numeric:tabular-nums}
.ptsp i{font-style:normal;font-size:12.5px;color:var(--encre-2);line-height:1.35}
.ptsp i span{display:block;font-size:11.5px;color:var(--muet)}
.ptsp.ok{background:var(--vert-pale);border-color:#CFDEC0}.ptsp.ok b{color:var(--vert)}
.ptsp.wa{background:var(--jaune-pale);border-color:#EAD9AE}.ptsp.wa b{color:var(--jaune)}
.ptsp.ko{background:var(--rouge-pale);border-color:#EED2D4}.ptsp.ko b{color:var(--rouge)}
.ptbar2{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.ptsrch{flex:1;min-width:210px;position:relative}
.ptsrch .fi{padding-left:35px}
.ptsrch .ico{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muet)}
/* Un intertitre d'établissement, avec son filet : il sépare sans
peser, et disparaît quand la recherche ne laisse qu'un site. */
.ptlg{font:700 11px/1 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muet);
margin:18px 0 9px;display:flex;align-items:center;gap:9px}
.ptlg:first-child{margin-top:0}
.ptlg::after{content:'';flex:1;height:1px;background:var(--ligne)}
.ptl{display:grid;grid-template-columns:13px minmax(170px,1.2fr) 150px 88px minmax(190px,1.5fr) auto;
gap:14px;align-items:center;background:var(--carte);border:1px solid var(--ligne);
border-radius:12px;padding:11px 15px;margin-bottom:8px}
.ptl:hover{border-color:var(--ligne-2);background:var(--surface-2)}
/* Une borne jamais installée n'est pas en panne : elle est À FAIRE.
Le trait discontinu le dit sans ajouter de pastille. */
.ptl.neuve{border-style:dashed;border-color:var(--ligne-2);background:var(--surface-2)}
.ptl.off{opacity:.62}
.ptlet{width:9px;height:9px;border-radius:50%;justify-self:center}
.ptlet.v{background:var(--vert);box-shadow:0 0 0 3px var(--vert-pale)}
.ptlet.j{background:var(--jaune);box-shadow:0 0 0 3px var(--jaune-pale)}
.ptlet.r{background:var(--rouge);box-shadow:0 0 0 3px var(--rouge-pale)}
.ptlet.g{background:var(--ligne-2);box-shadow:0 0 0 3px var(--surface-2)}
.ptlnom{min-width:0}
.ptlnom b{display:block;font-family:var(--f-titre);font-size:15px;font-weight:600;line-height:1.25;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptlnom i{font-style:normal;font-size:12px;color:var(--muet)}
/* ── L'ÉTAT DEVIENT UNE DATE ──
« En veille » ne dit pas s'il faut aller voir ; « il y a 6 jours »
le dit. La donnée existait depuis toujours (`derniere_vue`) et
l'écran n'en montrait qu'une pastille vague. */
.ptlvue{font-size:12.5px;color:var(--muet);line-height:1.35}
.ptlvue b{display:block;font-weight:600;font-size:13px;color:var(--encre)}
.ptlvue.wa b{color:var(--jaune)}
.ptlvue.ko b{color:var(--rouge)}
/* Les pointages du jour : une borne vue il y a quatre minutes mais à
zéro pointage à quinze heures n'est pas en panne — elle ne sert à
personne. Ce n'est pas le même problème, et rien ne le disait. */
.ptlptg{text-align:right;font-variant-numeric:tabular-nums}
.ptlptg b{display:block;font-family:var(--f-titre);font-size:17px;font-weight:600;line-height:1}
.ptlptg i{font-style:normal;font-size:11.5px;color:var(--muet)}
.ptlptg.rien b{color:var(--ligne-2)}
.ptlmeta{display:flex;flex-wrap:wrap;gap:5px;min-width:0}
.ptlact{display:flex;gap:7px;align-items:center;justify-self:end;position:relative}
/* ── LE MENU DES GESTES RARES ──
Renouveler l'identifiant, délier, supprimer : trois gestes qu'on
fait une fois dans la vie d'un appareil. Ils ne méritent pas trois
boutons sur chaque ligne. Supprimer y est en dernier et en rouge —
l'ordre dit la gravité, comme au pied d'un tiroir. */
.ptlmenu{width:31px;height:31px;border:1px solid var(--ligne-2);background:var(--carte);
border-radius:8px;cursor:pointer;color:var(--encre-2);font-size:15px;line-height:1;
display:grid;place-items:center;flex:none}
.ptlmenu:hover{background:var(--surface-2);color:var(--encre)}
.ptmn{position:absolute;top:calc(100% + 5px);right:0;z-index:20;min-width:216px;
background:var(--carte);border:1px solid var(--ligne-2);border-radius:11px;
box-shadow:var(--ombre-2);padding:5px;display:flex;flex-direction:column}
.ptmn[hidden]{display:none}
.ptmn form{display:contents}
.ptmni{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:0;
background:transparent;border-radius:8px;padding:8px 10px;font:600 13px var(--f-ui);
color:var(--encre);cursor:pointer}
.ptmni:hover{background:var(--surface-2)}
.ptmni .ico{color:var(--muet)}
.ptmni span{flex:1;min-width:0}
/* L'identifiant se copie depuis le menu : il ne se renouvelle pas,
alors il se lit là où on le cherche (v14.47). */
.ptmni code{font:700 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;
color:var(--encre-2);background:var(--surface-2);border:1px solid var(--ligne);
border-radius:6px;padding:2px 6px;margin-left:4px}
.ptmni.dgr{color:var(--rouge)}
.ptmni.dgr:hover{background:var(--rouge-pale)}
.ptmni.dgr .ico{color:var(--rouge)}
.ptmnsep{height:1px;background:var(--ligne);margin:4px 6px}
/* Le code d'appairage n'est montré que là où il sert : sur une borne
qui n'a jamais été vue. Ailleurs, il encombre une ligne avec une
chaîne dont personne n'a plus besoin. */
.ptlcode{display:inline-flex;align-items:center;gap:8px;background:var(--jaune-pale);
border:1px solid #EAD9AE;border-radius:9px;padding:4px 9px}
.ptlcode code{font:700 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.09em;
color:var(--jaune)}
.ptcopy{border:0;background:transparent;color:var(--jaune);cursor:pointer;font-size:13px;
padding:1px 3px;line-height:1}
.ptcopy:hover{color:var(--encre)}
@media(max-width:900px){
.ptl{grid-template-columns:13px minmax(0,1fr) auto;row-gap:9px}
.ptl > .ptlvue,.ptl > .ptlptg,.ptl > .ptlmeta{grid-column:2/-1}
.ptlptg{text-align:left}
}
/* ═══ L'ARBRE DES ÉTABLISSEMENTS ═══ (v14.35)
Une pointeuse peut desservir plusieurs sites : son périmètre se
coche dans un arbre — l'établissement, puis ses équipes en
retrait. La branche s'éclaire quand le site est coché, et les
équipes ne s'ouvrent qu'à ce moment-là : proposer de resserrer sur
un site qu'on n'affiche pas n'a aucun sens. */
.ptarb{border:1px solid var(--ligne);border-radius:12px;overflow:hidden;background:var(--surface-2)}
.ptarbe{border-bottom:1px solid var(--ligne)}
.ptarbe:last-child{border-bottom:0}
.ptarbh{padding:11px 14px;margin:0;align-items:center}
.ptarbh b{font-size:13px}
.ptarbe.on{background:var(--carte)}
.ptarbq{display:none;padding:0 14px 12px 43px;gap:8px;flex-wrap:wrap}
.ptarbe.on .ptarbq{display:flex}
.ptarbq .chk{align-items:center;font-size:12.5px}
/* Les trois positions du pointage mobile, dans une cellule de
tableau : trois boutons de MÊME taille — la règle vaut aussi ici —,
et celui qui est en vigueur est plein et inerte (v14.37). */
.ptmob{display:flex;gap:5px;margin-top:6px}
.ptmob .btn{padding:3px 9px;font-size:11px}
.ptmob .btn[disabled]{opacity:1;cursor:default}
.ptvide{background:var(--carte);border:1px dashed var(--ligne-2);border-radius:14px;
padding:38px 22px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.ptvide .ptvi{font-size:26px;opacity:.4}
.ptvide b{font-family:var(--f-titre);font-size:17px;font-weight:600}
.ptvide span{color:var(--muet);font-size:13px;max-width:44ch;line-height:1.5}
.ptvide .btn{margin-top:8px}
.ptnone{font-size:11.5px;color:var(--muet);font-style:italic}
/* ═══ v8.8 · Prise de photo : on VOIT qu'une photo se prend ═══ */
.bpcadre{position:relative;display:flex;align-items:center;justify-content:center;
transition:transform .16s ease}
.bpcadre.declic{transform:scale(.94)}
.bpcoin{position:absolute;width:34px;height:34px;border:3px solid rgba(255,255,255,.85);
border-radius:4px;pointer-events:none;transition:all .16s ease}
.bpcoin.ht{top:-8px;left:-8px;border-right:0;border-bottom:0}
.bpcoin.hd{top:-8px;right:-8px;border-left:0;border-bottom:0}
.bpcoin.bg{bottom:-8px;left:-8px;border-right:0;border-top:0}
.bpcoin.bd{bottom:-8px;right:-8px;border-left:0;border-top:0}
.bpcadre.declic .bpcoin{width:22px;height:22px}
.bpring{position:absolute;width:150px;height:150px;transform:rotate(-90deg);pointer-events:none}
.bprfond{fill:none;stroke:rgba(255,255,255,.18);stroke-width:6}
.bprjauge{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;
transition:stroke-dashoffset .8s linear}
.bphoto .bpc{position:absolute;font-family:var(--f-titre);font-size:66px;font-weight:700;
color:#fff;line-height:1;text-shadow:0 2px 18px rgba(0,0,0,.5)}
.bphoto .bpc.pulse{animation:bppulse .8s ease-out}
@keyframes bppulse{from{transform:scale(1.5);opacity:.4}to{transform:scale(1);opacity:1}}
/* ── La photo prise s'affiche AU CENTRE ──
Elle grandissait dans le coin en bas à droite pendant que le viseur
vide restait au milieu : on regardait deux choses à la fois, et la
plus importante — l'image qu'on vient de prendre — était la plus
petite et la plus loin du regard. Elle prend maintenant la place du
viseur, puis s'efface en fondu (v10.1). */
.bpvignette{position:absolute;top:50%;left:50%;width:0;height:0;border-radius:18px;
transform:translate(-50%,-50%) scale(.9);object-fit:cover;opacity:0;
transition:opacity .28s ease,transform .28s ease;border:3px solid rgba(255,255,255,.9);
box-shadow:0 18px 50px -12px rgba(0,0,0,.7);z-index:2}
/* « min() » : sur une tablette de 8 pouces en paysage, une image de
340 px déborderait sous le texte. */
.bpvignette.on{width:min(340px,52vh);height:min(340px,52vh);opacity:1;
transform:translate(-50%,-50%) scale(1)}
/* Le fondu de sortie : l'image s'éloigne légèrement en s'effaçant,
elle ne disparaît pas d'un coup. */
.bpvignette.part{opacity:0;transform:translate(-50%,-50%) scale(1.04)}
/* Pendant l'affichage, le viseur s'efface : deux cadres superposés
feraient un empilement illisible. */
.bpcadre.montre > video,
.bpcadre.montre > .bpcoin,
.bpcadre.montre > .bpring{opacity:0;transition:opacity .2s ease}
/* Le viseur PREND LA TAILLE de l'image affichée : la photo est
posée en absolu au centre de l'écran, et sans cette réservation
de place le texte « Photo enregistrée » se retrouvait dessous,
caché par l'image. */
.bpcadre.montre{width:min(340px,52vh);height:min(340px,52vh);transition:width .28s ease,height .28s ease}
@media (prefers-reduced-motion:reduce){
.bpcadre,.bpcoin,.bprjauge,.bpvignette{transition:none}
.bphoto .bpc.pulse{animation:none}
}
/* ═══ v8.9 · Justificatifs déployables ═══
Le survol montre la pièce elle-même : signature, photo, position.
Savoir qu'une signature existe ne sert à rien si on ne peut pas la
regarder. */
/* Pastilles rangées côte à côte, sans émoji. */
.frevh .pj{background:var(--surface-2);border:1px solid var(--ligne);border-radius:20px;
padding:2px 9px;font-size:10.5px;font-weight:600;color:var(--encre-2);white-space:nowrap}
.pj.pjm{opacity:.8}
.pj.pjv{position:relative;cursor:zoom-in}
.pj.pjv:hover{border-color:var(--terra);color:var(--terra-h)}
.pjbulle{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) scale(.94);
background:#fff;border:1px solid var(--ligne);border-radius:12px;padding:6px;
box-shadow:var(--ombre-2);opacity:0;pointer-events:none;transition:opacity .13s,transform .13s;
z-index:30}
.pjbulle img{display:block;width:210px;height:auto;max-height:150px;object-fit:contain;
border-radius:8px;background:var(--surface-2)}
.pjbulle.pjtxt{padding:8px 11px;font-size:11.5px;font-family:ui-monospace,monospace;
white-space:nowrap;color:var(--encre-2)}
.pj.pjv:hover .pjbulle,.pj.pjv:focus-within .pjbulle{opacity:1;transform:translateX(-50%) scale(1)}
/* ═══ v8.9 · Focus des champs ═══
L'anneau orange flou débordait des angles et changeait la forme du
champ. Un liseré net, de la couleur du champ, suffit à dire où l'on
écrit sans repeindre l'écran. */
/* Une bordure ORANGE, et rien d'autre. L'ombre portée épaississait
le champ et brouillait ses angles ; la couleur de la charte suffit
à dire où l'on écrit (v9.0). */
.fi:focus,.fi:focus-visible,
.pdur:focus-within,.telf:focus-within,.selrs input:focus,
input[type=time]:focus,input[type=date]:focus,input[type=number]:focus,
textarea:focus,select:focus{
outline:none;
border-color:var(--terra);
box-shadow:none;
}
/* Ne PAS toucher au rayon : « inherit » prenait celui du parent et
carrait les angles au focus — c'est précisément ce qu'on voulait
corriger (v8.9). */
/* ═══ v8.9 · Simulation des heures retenues ═══ */
.simu{margin-top:14px;border:1px solid var(--ligne);border-radius:12px;overflow:hidden;
background:var(--surface-2)}
.simuh{padding:10px 14px;font-size:12.5px;color:var(--encre-2);border-bottom:1px solid var(--ligne);
background:var(--carte)}
.simug{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.simuc{padding:12px 14px}
.simuc + .simuc{border-left:1px solid var(--ligne)}
.simut{font:700 10.5px/1 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;
color:var(--muet);margin-bottom:9px}
.simut i{font-style:normal;font-weight:500;text-transform:none;letter-spacing:0;opacity:.8}
.simul{display:flex;align-items:baseline;gap:10px;padding:5px 0;font-size:12.5px}
.simul span{color:var(--muet);flex:1}
.simul b{font-family:var(--f-titre);font-size:15px;font-weight:600}
.simup{padding:10px 14px;border-top:1px solid var(--ligne);background:var(--carte);
font-size:12.5px;color:var(--encre-2)}
/* Service terminé sur la borne : visible, mais plus cliquable. */
.bl.bfini{opacity:.5;cursor:default;pointer-events:none}
/* ═══ Réglages d'affichage d'une pointeuse ═══ (v14.46)
── CE QUI EST PARTI, ET POURQUOI ──
`.ptsh` doublait `.ftitre` — un intertitre en petites capitales
grises se confond avec une aide, c'est écrit dans le kit. `.ptopt`,
`.ptol` et `.ptsw` redessinaient l'interrupteur du kit, `.sw`, en
quarante pixels plus large et d'un autre vert : deux composants qui
se ressemblent sans se ressembler tout à fait. Le tiroir reprend
les vrais.
`.ptsous` reste : il n'a pas d'équivalent. Les sous-options de la
météo et le délai de veille suivent leur interrupteur — un délai
réglable sous une veille éteinte n'a aucun sens (v9.7). Il se cale
maintenant sous une ligne de `.swliste`, d'où le retrait. */
.ptsous{padding:1px 0 2px 45px;margin:-4px 0 4px}
.ptsous[hidden]{display:none}
/* ═══ v9.1 · Borne : logo libre, météo en ligne, thème ═══ */
.blogoimg2{max-width:170px;max-height:52px;width:auto;height:auto;object-fit:contain;display:block}
/* Météo EN LIGNE : une colonne d'heures obligeait à lire de haut en
bas ce qui se déroule de gauche à droite. */
.bmeteo{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
border-radius:14px;padding:12px}
.bmnow{display:flex;align-items:center;gap:11px}
.bmnow b{display:block;font-family:var(--f-titre);font-size:26px;font-weight:600;line-height:1}
.bmnow i{display:block;font-style:normal;font-size:11.5px;opacity:.7;line-height:1.4;margin-top:2px}
.bmi{display:flex;flex:none}
.bmh{display:flex;gap:5px;margin-top:11px}
.bmhc{flex:1;text-align:center;background:rgba(255,255,255,.05);border:1px solid transparent;
border-radius:9px;padding:6px 2px;min-width:0}
.bmhc.pluie{border-color:rgba(110,155,200,.5);background:rgba(110,155,200,.16)}
.bmhc b{display:block;font-size:10px;font-weight:600;opacity:.6}
.bmhc span{display:flex;justify-content:center;margin:2px 0}
.bmhc i{display:block;font-style:normal;font-size:11.5px;font-weight:600}
.bmhc u{display:block;text-decoration:none;font-size:9.5px;opacity:.75}
.bmjour{display:flex;gap:12px;flex-wrap:wrap;margin-top:9px;font-size:11.5px;opacity:.8}
.bnote{background:rgba(233,162,59,.14);border:1px solid rgba(233,162,59,.35);border-radius:14px;
padding:12px 14px}
.bnote b{display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
opacity:.8;margin-bottom:4px}
.bnote span{display:block;font-size:13px;line-height:1.5}
/* ── Thème clair ──
Une borne dans un hall vitré à midi et une borne de couloir à 22 h
n'ont pas les mêmes contraintes. */
body.borne.theme-clair{background:#F2EFE7;color:var(--encre)}
/* La barre latérale fixait « color:#EFE9DC » : en thème clair, un
texte crème sur fond blanc était invisible. On reprend la couleur
ET tout ce qui en dépend (v9.1). */
body.borne.theme-clair .bside{background:#fff;color:var(--encre);
border-right:1px solid var(--ligne)}
body.borne.theme-clair .bside h4,
body.borne.theme-clair .bhh,
body.borne.theme-clair .bmnow b,
body.borne.theme-clair .bmhc i,
body.borne.theme-clair .bnote span{color:var(--encre)}
body.borne.theme-clair .bmnow i,
body.borne.theme-clair .bmjour,
body.borne.theme-clair .bli{color:var(--encre-2)}
body.borne.theme-clair .bnote{background:var(--terra-pale);border-color:#F0C4B4;color:var(--terra-h)}
body.borne.theme-clair .bnote b{color:var(--terra-h)}
body.borne.theme-clair .bav{background:var(--surface-2);color:var(--encre-2)}
body.borne.theme-clair .bpied,
body.borne.theme-clair .bside small{color:var(--muet)}
body.borne.theme-clair .bcarte,
body.borne.theme-clair .bmeteo{background:var(--surface-2);border-color:var(--ligne)}
body.borne.theme-clair .bmhc{background:#fff;border-color:var(--ligne)}
body.borne.theme-clair .bmhc.pluie{background:#E7EEF6;border-color:#B7CBE0}
body.borne.theme-clair .bdissoc{border-color:var(--ligne-2);color:var(--encre-2)}
/* ═══ v9.2 · Thème sur la borne ═══
(La météo « en bande » de cette version a vécu : elle est revenue
dans la colonne en v9.5, la bande poussait la grille des noms vers
le bas.)
Le bouton de thème vit EN BAS de la colonne, avec une icône qui
montre l'état — soleil, lune, cadran auto. En haut, il se lisait
avant la date, comme s'il était le plus important de l'écran
(v9.5). */
.bthemebtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
border:1px solid rgba(255,255,255,.2);background:transparent;color:inherit;
border-radius:11px;padding:10px 12px;font:600 12px/1 var(--f-ui);cursor:pointer;
opacity:.75;transition:opacity .12s}
.bthemebtn:hover{opacity:1}
.bthemebtn .bico{width:16px;height:16px;flex:none;display:block}
body.borne.theme-clair .bthemebtn{border-color:var(--ligne-2);color:var(--encre-2)}
/* ═══ v9.2 · Le geste attendu sur chaque ligne ═══
« Enregistrer mon arrivée », « Prendre ma pause » : la ligne dit
ce qu'on vient faire, pas seulement qui l'on est. */
.bl .bgest{display:block;text-decoration:none;margin-top:3px;font-size:13px;font-weight:600;
color:var(--or,#E9A23B)}
body.borne.theme-clair .bl .bgest{color:var(--terra-h)}
.bl.bfini .bgest{display:none}
/* ═══ v9.3 · Récapitulatif après pointage, événements ═══ */
.brecap{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:11px;
width:100%;max-width:680px;margin:6px 0}
.brc{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
border-radius:14px;padding:14px;text-align:left}
.brc b{display:block;font-family:var(--f-titre);font-size:24px;font-weight:600;line-height:1}
.brc i{display:block;font-style:normal;font-size:12px;opacity:.7;margin-top:3px;line-height:1.35}
.bnote2{max-width:680px;text-align:left}
body.borne.theme-clair .brc{background:var(--surface-2);border-color:var(--ligne)}
/* Événements du jour : une ligne de pastilles, sans emphase. */
.bevts{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.bevt{font-size:12.5px;padding:6px 13px;border-radius:20px;
background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.bevt.anniv{background:rgba(233,162,59,.16);border-color:rgba(233,162,59,.4)}
.bevt.ferie{background:rgba(196,86,78,.16);border-color:rgba(196,86,78,.4)}
.bevt.vacances{background:rgba(108,151,76,.16);border-color:rgba(108,151,76,.4)}
body.borne.theme-clair .bevt{background:var(--surface-2);border-color:var(--ligne);color:var(--encre-2)}
body.borne.theme-clair .bevt.anniv{background:#FBF0DC;border-color:#EBD3A8;color:#8A5A17}
body.borne.theme-clair .bevt.ferie{background:#FBE7E8;border-color:#F0C9CB;color:#A8323A}
body.borne.theme-clair .bevt.vacances{background:#EDF3E6;border-color:#CBDBB9;color:#3F6127}
/* ═══ v9.3 · Écran de veille ═══ */
.bveille{position:fixed;inset:0;z-index:500;background:inherit;display:flex;
flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;
padding:24px}
.bveille[hidden]{display:none}
.bvlogo{max-width:220px;max-height:78px;width:auto;height:auto;object-fit:contain}
.bvh{font-family:var(--f-titre);font-size:clamp(64px,11vw,120px);font-weight:700;line-height:1}
.bvh small{font-size:.34em;opacity:.5;margin-left:5px;vertical-align:top}
.bvj{font-size:17px;opacity:.7;text-transform:capitalize}
.bvcartes{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.bvc{min-width:132px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
border-radius:14px;padding:14px 18px;text-align:left}
.bvc b{display:block;font-family:var(--f-titre);font-size:30px;font-weight:600;line-height:1}
.bvc i{display:block;font-style:normal;font-size:12.5px;opacity:.7;margin-top:3px}
.bvc.alerte{background:rgba(196,86,78,.16);border-color:rgba(196,86,78,.42)}
.bvnote{max-width:620px;font-size:15px;line-height:1.55;opacity:.8}
.bvtouch{font-size:14px;opacity:.5}
body.borne.theme-clair .bvc{background:var(--surface-2);border-color:var(--ligne)}
body.borne.theme-clair .bvc.alerte{background:#FBE7E8;border-color:#F0C9CB}
/* ═══ v9.4 · La borne en cartes ═══
Une liste de lignes se lit de haut en bas, une par une. Une grille
de cartes se balaie du regard : sur une borne où l'on passe en dix
secondes, c'est ce qui compte. */
.btitre{font-family:var(--f-titre);font-size:26px;font-weight:600;margin:0 0 14px}
/* « min-height:0 » : sans lui, « flex:1 » ne peut pas rétrécir la
grille sous la taille de ses cartes, et « overflow:auto » n'a rien
à faire défiler (v14.38). L'inertie tactile est demandée
explicitement : sur iPad, une zone qui défile sans élan se manipule
comme une fenêtre, pas comme un écran. */
.bgrille{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;
align-content:start;overflow-y:auto;overflow-x:hidden;flex:1 1 auto;min-height:0;padding:2px;
-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
/* ═══ LA BULLE DE SALARIÉ ═══ (v14.38)
« Manque de clarté sur qui a pointé, pas pointé, quand — je parle
seulement de la bulle de salarié. »
Trois défauts, et ils se tenaient :
· TOUT PESAIT PAREIL. Six lignes de même poids, aucun point
d'entrée : l'œil lisait de haut en bas comme un formulaire.
· L'ÉTAT — la chose qu'on cherche — tenait dans une pastille de
dix pixels, dans le coin, loin du nom. Il fallait décoder une
couleur de mémoire.
· « QUI A POINTÉ, PAS POINTÉ, QUAND » était réparti sur trois
endroits qui ne se lisaient pas ensemble : l'horaire prévu, les
pastilles de pointage, le prochain geste.
La carte porte maintenant un filet d'état sur son bord gauche et le
mot en toutes lettres ; la photo occupe sa propre colonne avec le
prénom et le nom empilés à côté, centrés sur elle ; et le PRÉVU est
suivi du POINTÉ, deux lignes alignées au pixel. */
.bcart{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:18px;
border-left:5px solid rgba(255,255,255,.22);
padding:15px 15px 15px 13px;cursor:pointer;text-align:left;font-family:inherit;color:inherit;
transition:transform .13s,border-color .13s}
.bcart[data-etat=retard],.bcart[data-retard="1"]{border-left-color:#C4564E}
.bcart[data-etat=present]{border-left-color:#6C974C}
.bcart[data-etat=pause]{border-left-color:#E9A23B}
.bcart[data-etat=fini]{border-left-color:rgba(255,255,255,.18)}
.bcet{font:700 10px/1.25 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;opacity:.62}
.bcart[data-retard="1"] .bcet{color:#E88A84;opacity:1}
.bcart[data-etat=present] .bcet{color:#8FCB6B;opacity:1}
.bcart[data-etat=pause] .bcet{color:#E9A23B;opacity:1}
/* La photo dans SA colonne, le nom empilé à côté et centré sur elle. */
.bcqui{display:flex;align-items:center;gap:11px;width:100%;min-width:0}
/* « flex:1 » ET « min-width:0 » : sans le premier le bloc garde sa
largeur naturelle et le nom se coupe alors que la carte a de la
place ; sans le second il refuse de se réduire quand elle n'en a
pas. Il faut les deux. */
.bcid{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center}
.bcpr{display:block;font-family:var(--f-titre);font-size:17px;font-weight:600;line-height:1.15;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bcnf{display:block;font-style:normal;font-size:12.5px;font-weight:600;letter-spacing:.02em;
opacity:.7;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Le prévu, et le réel juste dessous. Deux colonnes : le mot, la
valeur. Chiffres à chasse fixe, pour que l'écart se voie sans se
calculer. */
.bchrs{display:grid;grid-template-columns:auto 1fr;gap:1px 9px;width:100%;
font-variant-numeric:tabular-nums;margin-top:1px}
.bck{font-style:normal;font:600 9.5px/1.6 var(--f-ui);letter-spacing:.05em;text-transform:uppercase;
opacity:.5;align-self:center}
.bcv{font-family:var(--f-titre);font-size:13.5px;font-weight:600;line-height:1.35;
display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;min-width:0}
.bcv em{font-style:normal;opacity:.35;font-size:.9em}
.bcv u{text-decoration:none;font-family:var(--f-ui);font-weight:400;font-size:10.5px;opacity:.5}
.bcreel{color:#8FCB6B}
.bcreel.pz{color:#E9A23B}
.bcreel.gr{opacity:.65}
.bcreel.ko{color:#E88A84;font-family:var(--f-ui);font-size:12px}
/* Le survol ne teint QUE trois côtés : passer la bordure gauche en or
effacerait la seule information que la carte donne de loin. */
.bcart:hover{transform:translateY(-2px);border-top-color:var(--or,#E9A23B);
border-right-color:var(--or,#E9A23B);border-bottom-color:var(--or,#E9A23B)}
.bcart:active{transform:translateY(0)}
.bcart.bhors[hidden]{display:none}
.bcart.bfini{opacity:.45;cursor:default;pointer-events:none}
/* v14.255 : service terminé, nouvelle arrivée possible : la carte reste touchable. */
.bcart.bfini.brouv{pointer-events:auto;cursor:pointer;opacity:.6}
/* L'avatar occupe sa propre ligne, en tête de carte : à côté du nom
il écrasait un nom long sur trois lignes (v9.4). */
.bav3{width:52px;height:52px;border-radius:50%;font-size:16px;font-weight:700;flex:none;
display:flex;align-items:center;justify-content:center;overflow:hidden}
.bav3 img{width:100%;height:100%;object-fit:cover}
.bcnom{font-size:15px;font-weight:600;line-height:1.25}
.bchr{font-size:12px;opacity:.72;line-height:1.4}
.bcptg{font-size:11.5px;opacity:.55;line-height:1.4}
/* ── L'HEURE DU PROCHAIN GESTE ── (v14.36)
« Arriver » ne disait pas quand. L'heure passe en chiffres, et le
compte à rebours derrière, en plus discret : c'est l'heure qu'on
compare à la pendule, le « dans 12 min » ne fait que confirmer. */
.bcact{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;
font-size:13px;font-weight:600;color:var(--or,#E9A23B);margin-top:auto;padding-top:3px}
.bcact b{font-variant-numeric:tabular-nums}
.bcact i{font-style:normal;font-weight:500;opacity:.62;font-size:12px}
.bcart.bfini .bcact{color:inherit;opacity:.7;font-weight:500}
/* Pastille d'état : la couleur dit où en est la personne. */
.bpt2{position:absolute;top:14px;right:14px;width:10px;height:10px;border-radius:50%}
.bpt2.attendu{background:rgba(255,255,255,.3)}
.bpt2.present{background:#6C974C;box-shadow:0 0 0 4px rgba(108,151,76,.22)}
.bpt2.pause{background:#E9A23B;box-shadow:0 0 0 4px rgba(233,162,59,.22)}
.bpt2.retard{background:#C4564E;box-shadow:0 0 0 4px rgba(196,86,78,.22)}
.bpt2.fini{background:transparent;border:2px solid rgba(255,255,255,.3)}
body.borne.theme-clair .bcart{background:#fff;border-color:var(--ligne);
border-left-color:var(--ligne-2)}
body.borne.theme-clair .bcart:hover{border-top-color:var(--terra);
border-right-color:var(--terra);border-bottom-color:var(--terra)}
body.borne.theme-clair .bcart[data-etat=retard],
body.borne.theme-clair .bcart[data-retard="1"]{border-left-color:var(--rouge)}
body.borne.theme-clair .bcart[data-etat=present]{border-left-color:var(--vert)}
body.borne.theme-clair .bcart[data-etat=pause]{border-left-color:var(--jaune)}
body.borne.theme-clair .bcart[data-etat=fini]{border-left-color:var(--ligne-2)}
body.borne.theme-clair .bcart[data-retard="1"] .bcet{color:var(--rouge)}
body.borne.theme-clair .bcart[data-etat=present] .bcet{color:var(--vert)}
body.borne.theme-clair .bcart[data-etat=pause] .bcet{color:var(--jaune)}
body.borne.theme-clair .bcreel{color:var(--vert)}
body.borne.theme-clair .bcreel.pz{color:var(--jaune)}
body.borne.theme-clair .bcreel.ko{color:var(--rouge)}
body.borne.theme-clair .bcact{color:var(--terra-h)}
body.borne.theme-clair .bpt2.attendu{background:var(--ligne-2)}
body.borne.theme-clair .bpt2.fini{border-color:var(--ligne-2)}
/* ═══ v9.4 · Thème sombre, pour de bon ═══
La borne était CLAIRE par défaut : mes règles « theme-sombre » ne
repeignaient que ce que j'avais ajouté, et la zone principale
restait crème. On reprend le fond, les cartes et les filtres. */
body.borne.theme-sombre{background:#1B140D;color:#F2EDE3}
body.borne.theme-sombre .bside{background:#2C2418;color:#EFE9DC;border-right:1px solid #40311F}
body.borne.theme-sombre .bmain{background:transparent}
body.borne.theme-sombre .btitre{color:#fff}
body.borne.theme-sombre .bfil{background:#2C2418;color:#DCCDB4}
body.borne.theme-sombre .bfil.on{background:#E9A23B;color:#231A0F}
body.borne.theme-sombre .bfil span{opacity:.6}
body.borne.theme-sombre .brech{background:#2C2418;border-color:#40311F;color:#F2EDE3}
body.borne.theme-sombre .brech::placeholder{color:#8C7B64}
body.borne.theme-sombre .bcarte{background:#2C2418;border-color:#40311F}
body.borne.theme-sombre .bleg{color:#8C7B64}
body.borne.theme-sombre .bvide{color:#8C7B64}
/* ═══ v9.5 · Le contexte du jour dans la colonne ═══
Météo, note et événements quittent la zone principale, comme sur
la maquette : la grille des noms remonte — elle est la raison
d'être de la borne — et la colonne raconte la journée, du haut vers
le bas : l'heure, les oublis, le ciel, la consigne, les
anniversaires. */
/* La colonne ne défile pas elle-même : c'est « .bsmid » qui le fait.
Sans quoi le bouton « Connectée » et le bouton de thème partiraient
hors de vue dès qu'on ferait défiler la météo (v14.38). */
.bside{overflow:hidden}
.bside .bmeteo,.bside .bnote,.bside .bevts{flex:none}
.bside .bevts{margin-bottom:0}
/* En thème clair, la colonne est blanche et les blocs reprennent les
surfaces du kit : les règles « theme-clair » de la v9.1 couvrent
déjà .bmeteo, .bnote et .bevt. Rien à ajouter — les blocs étaient
nés pour cette colonne avant leur détour en bande (v9.2). */
/* ═══════════════════════════════════════════════════════════════
v9.6 · Les écrans du flux, dans le châssis de la borne
Jusqu'ici, pointer faisait surgir une boîte crème par-dessus toute
la borne : la colonne disparaissait, le thème sombre sautait, et
l'on changeait visiblement d'application au milieu d'un geste. Les
écrans occupent désormais la ZONE PRINCIPALE — la colonne reste,
l'heure continue de battre. C'est le châssis des écrans 2 à 4 de
la maquette.
═══════════════════════════════════════════════════════════════ */
/* Le fond de la borne, nommé : les écrans du flux doivent le
reprendre exactement, sinon la grille des noms transparaît. */
body.borne{--bfond:#F2EFE7}
body.borne.theme-clair{--bfond:#F2EFE7}
body.borne.theme-sombre{--bfond:#1B140D}
.bmain{position:relative}
.bapp .bmodal{position:absolute;inset:0;z-index:40;background:var(--bfond);
display:flex;align-items:stretch;justify-content:center;padding:0}
.bapp .bmodal[hidden]{display:none}
.bapp .bmbox{background:transparent;border-radius:0;width:100%;max-width:none;max-height:none;
box-shadow:none;overflow:auto;display:flex;flex-direction:column}
/* ── La colonne pendant un pointage ──
Elle se vide de la journée : la météo et les anniversaires ne sont
plus le sujet, la personne l'est. */
body.borne.bflux .bcarte,
body.borne.bflux .bside .bmeteo,
body.borne.bflux .bside .bnote,
body.borne.bflux .bside .bevts,
body.borne.bflux .bbloc:not(.bctx),
body.borne.bflux .bstat,
body.borne.bflux .bthemebtn,
body.borne.bflux #fdissoc{display:none}
/* Bloc de colonne, forme unique : effectif, et contexte du flux. */
.bbloc{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
border-radius:12px;padding:12px 13px}
.bbloc[hidden]{display:none}
.bbloc b{display:block;font-size:12px;font-weight:600;margin-bottom:5px;opacity:.9}
.bbloc i{display:block;font-style:normal;font-size:11.5px;line-height:1.5;opacity:.62}
body.borne.theme-clair .bbloc{background:var(--surface-2);border-color:var(--ligne)}
body.borne.theme-clair .bbloc b{color:var(--encre)}
body.borne.theme-clair .bbloc i{color:var(--encre-2);opacity:1}
/* ── Écran centré d'une personne ── */
.bsolo{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:17px;text-align:center;padding:22px}
.bsolo h1{font-family:var(--f-titre);font-size:clamp(26px,3.1vw,34px);font-weight:600;margin:0}
.bsous{font-size:15px;line-height:1.6;max-width:54ch;margin:0;opacity:.74}
.bsolo .bpetit{margin:0;min-height:19px}
/* La grande pastille : photo si elle existe, initiales sinon. */
.bavg{width:96px;height:96px;border-radius:50%;flex:none;overflow:hidden;color:#fff;
display:flex;align-items:center;justify-content:center;
font:700 30px/1 var(--f-ui)}
.bavg img{width:100%;height:100%;object-fit:cover}
/* ── Les gestes, en gros ──
La couleur dit la nature du geste : arriver et reprendre sont le
travail (vert), partir est le seul qu'on ne défait pas (rouge), la
pause n'engage rien (neutre). */
.bgros{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:2px}
.bgbtn{border:0;border-radius:20px;padding:24px 38px;min-width:250px;cursor:pointer;
display:flex;flex-direction:column;gap:4px;align-items:center;font-family:var(--f-ui);
transition:transform .13s,filter .13s}
.bgbtn b{display:block;font-family:var(--f-titre);font-size:22px;font-weight:600}
.bgbtn i{display:block;font-style:normal;font-size:12.5px;opacity:.82}
.bgbtn:hover{transform:translateY(-2px)}
.bgbtn:active{transform:translateY(0);filter:brightness(.94)}
.bgbtn.p{background:#6C974C;color:#fff}
.bgbtn.d{background:#C4564E;color:#fff}
.bgbtn.s{background:rgba(255,255,255,.07);color:inherit;border:1px solid rgba(255,255,255,.16)}
body.borne.theme-clair .bgbtn.p{background:var(--vert)}
body.borne.theme-clair .bgbtn.d{background:var(--rouge)}
body.borne.theme-clair .bgbtn.s{background:#fff;border-color:var(--ligne-2);color:var(--encre-2)}
/* Lien discret : « Continuer sans donner de motif ». Il ne doit
surtout pas ressembler à un geste de pointage. */
.blien{background:none;border:0;color:inherit;opacity:.55;font-family:var(--f-ui);
font-size:13.5px;cursor:pointer;text-decoration:underline;padding:6px 10px}
.blien:hover{opacity:.9}
/* ── L'ICÔNE DU GESTE ── (v14.85)
Au-dessus du mot, centrée comme lui : le bouton garde exactement
la même largeur, et la rangée des gestes ne se réorganise pas. */
.bgbi{width:26px;height:26px;flex:0 0 auto;opacity:.92}
/* ── LE RETOUR ── (v14.85)
« Ce n'est pas moi » était un lien souligné de treize pixels sous
un mur de boutons de cinquante : le seul chemin de sortie de
l'écran, et son plus petit élément.
Il est seul sur sa ligne — la règle d'or tient : jamais deux
tailles de bouton côte à côte. Il reste secondaire par sa couleur,
pas par sa taille : sortir d'un écran ouvert par erreur n'est pas
un geste de pointage, mais ce n'est pas non plus un geste qu'on
doit chercher. */
.bret{display:inline-flex;align-items:center;justify-content:center;gap:10px;
border-radius:18px;padding:15px 30px;min-width:250px;cursor:pointer;
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:inherit;
font-family:var(--f-ui);font-size:16.5px;font-weight:600;margin-top:2px;
transition:transform .13s,filter .13s}
.bret:hover{transform:translateY(-2px)}
.bret:active{transform:translateY(0);filter:brightness(.94)}
.bret .bgbi{width:21px;height:21px}
body.borne.theme-clair .bret{background:#fff;border-color:var(--ligne-2);color:var(--encre-2)}
/* Le décompte du retour automatique. Il bat à la seconde : un écran
qui s'en va sans prévenir passe pour un plantage. */
.brdec{font-style:normal;font-variant-numeric:tabular-nums;
min-width:25px;height:25px;border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.14);font-size:13px;font-weight:600;opacity:.9}
body.borne.theme-clair .brdec{background:var(--fond-2)}
.brdec[hidden]{display:none}
/* ── Consigne : pause légale, note du jour ──
Un filet vertical plutôt qu'un encadré complet : on la remarque
sans qu'elle prenne le pas sur le geste. */
.bconsigne{display:flex;gap:12px;text-align:left;max-width:660px;padding:14px 16px;
border-radius:14px;background:rgba(233,162,59,.13);border:1px solid rgba(233,162,59,.32)}
.bconsigne .pt{width:7px;border-radius:4px;background:#E9A23B;flex:none}
.bconsigne b{display:block;font-size:13px;font-weight:700;margin-bottom:3px}
.bconsigne span{font-size:12.8px;line-height:1.55}
body.borne.theme-clair .bconsigne{background:var(--jaune-pale);border-color:#E9D6A8;color:#7A5410}
body.borne.theme-clair .bconsigne .pt{background:var(--jaune)}
/* ── LES TÂCHES DU JOUR, SUR LA BORNE ── (v14.32)
Sous la note du jour, à l'écran de confirmation : le seul moment où
la personne est arrêtée devant la tablette.
La cible fait 56 px de haut, et c'est la LIGNE ENTIÈRE qui coche —
viser une pastille de treize pixels debout, à bout de bras, sur une
tablette murale, ne marche pas. C'est l'inverse du site, où la
pastille seule est cliquable parce qu'on a une souris.
Pas de retour en arrière ici : une ligne verte ne réagit plus.
Décocher est un geste de correction, il se fait dans
l'application, où l'on voit qui avait coché et quand. */
.btk{width:100%;max-width:660px;margin-top:16px;text-align:left}
.btkh{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
opacity:.62;margin-bottom:7px}
.btkl{display:flex;align-items:center;gap:12px;min-height:56px;padding:9px 14px;
border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
margin-bottom:7px;cursor:pointer;transition:background .12s,border-color .12s,opacity .18s}
.btkl:active{background:rgba(255,255,255,.11)}
.btkc{width:26px;height:26px;flex:none;border-radius:50%;position:relative;
border:2px solid rgba(255,255,255,.5);transition:background .14s,border-color .14s}
.btkc::after{content:'';position:absolute;left:50%;top:48%;width:7px;height:13px;
border:solid #fff;border-width:0 2.5px 2.5px 0;
transform:translate(-50%,-56%) rotate(45deg) scale(.4);
opacity:0;transition:opacity .14s,transform .14s}
.btkt{flex:1;min-width:0;font-size:14.5px;font-weight:600;line-height:1.35}
.btkq{font-size:12.5px;font-weight:600;opacity:.6;flex:none}
/* Ce qui explique pourquoi une ligne se comporte autrement : sans
destinataire, ou à faire ailleurs. */
.btkp{font-size:11px;font-weight:600;opacity:.6;flex:none;padding:3px 8px;border-radius:7px;
background:rgba(255,255,255,.09)}
.btkl.ok{background:rgba(74,124,89,.17);border-color:rgba(74,124,89,.45);cursor:default}
.btkl.ok .btkc{background:#4A7C59;border-color:#4A7C59}
.btkl.ok .btkc::after{opacity:1;transform:translate(-50%,-56%) rotate(45deg) scale(1)}
.btkl.ok .btkt{text-decoration:line-through;opacity:.68}
/* Une tâche qui demande un commentaire se montre, ne se coche pas :
on ne remplit pas un champ de texte debout devant une tablette
murale. La pastille devient un trait, et la ligne le dit. */
.btkl.mot{cursor:default;opacity:.72}
.btkl.mot .btkc{border-style:dashed}
.btkl.rate{border-color:var(--rouge);background:rgba(196,60,67,.16)}
.btkr{font-size:12px;opacity:.6;padding:4px 2px}
body.borne.theme-clair .btkl{background:#fff;border-color:var(--ligne-2)}
body.borne.theme-clair .btkl:active{background:var(--surface-2)}
body.borne.theme-clair .btkc{border-color:var(--ligne-2)}
body.borne.theme-clair .btkp{background:var(--surface-2)}
body.borne.theme-clair .btkl.ok{background:var(--vert-pale);border-color:#A9C6B0}
/* Sur une petite tablette, la colonne devient un bandeau et la place
manque : les tâches restent, plus serrées. */
@media(max-height:680px){
.btkl{min-height:48px;padding:7px 12px}
.btkt{font-size:13.5px}
}
/* ── Le pavé numérique ──
Trois colonnes de 86 px, touches de 76 px : on tape sans regarder.
La dernière rangée garde une case vide pour que le « 0 » reste au
centre — un pavé désaligné se tape de travers. */
.bapp .bpav{grid-template-columns:repeat(3,86px);gap:11px}
.bapp .bpav button{height:76px;border-radius:18px;background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.14);color:inherit}
.bapp .bpav button:active{background:rgba(233,162,59,.2);border-color:#E9A23B}
.bapp .bpav button.vide{visibility:hidden;pointer-events:none}
.bapp .bpav button.eff{font-family:var(--f-titre);font-size:24px}
body.borne.theme-clair .bapp .bpav button{background:#fff;border-color:var(--ligne-2);color:var(--encre)}
body.borne.theme-clair .bapp .bpav button:active{background:var(--terra-pale);border-color:var(--terra)}
.bapp .bpts i{width:15px;height:15px;background:rgba(255,255,255,.2)}
.bapp .bpts i.on{background:#E9A23B}
body.borne.theme-clair .bapp .bpts i{background:var(--ligne-2)}
body.borne.theme-clair .bapp .bpts i.on{background:var(--terra)}
/* Motifs d'écart : des pastilles, dans le thème de la borne. */
.bapp .bmotifs button{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);
color:inherit;font-size:14.5px;padding:13px 20px}
.bapp .bmotifs button:active{border-color:#E9A23B;color:#E9A23B}
body.borne.theme-clair .bapp .bmotifs button{background:#fff;border-color:var(--ligne-2);color:var(--encre)}
body.borne.theme-sombre .bpetit{color:#8C7B64}
/* ── Signature : la carte reprend le thème ──
Une carte blanche au milieu d'une borne sombre éblouissait celui
qui signe, la nuit, à trente centimètres de l'écran. */
.bsign{background:rgba(20,14,9,.92)}
.bsigncard{background:var(--bfond);border:1px solid rgba(255,255,255,.12);
color:inherit;max-width:720px}
.bsigncard h2{font-size:26px}
.bsigncard p{color:inherit;opacity:.65}
/* ── La zone de signature reste du PAPIER, dans les deux thèmes ──
Le trait est enregistré en encre sombre : c'est ainsi qu'il sera
relu, plus tard, dans le tiroir de validation du planning. Sur un
canevas sombre, on signait à l'encre invisible — et rien ne le
disait avant l'enregistrement (v9.6). */
#bsigncv{border-color:var(--ligne-2);background:#FBF8F1}
body.borne.theme-clair .bsigncard{border-color:var(--ligne)}
body.borne.theme-clair #bsigncv{border-color:var(--ligne-2);background:var(--surface-2)}
.bapp .bsignact .bbtn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:inherit}
.bapp .bsignact .bbtn.dr{background:#6C974C;border-color:#6C974C;color:#fff}
body.borne.theme-clair .bapp .bsignact .bbtn{background:#fff;border-color:var(--ligne-2);color:var(--encre)}
body.borne.theme-clair .bapp .bsignact .bbtn.dr{background:var(--vert);border-color:var(--vert);color:#fff}
/* La date, sous l'heure : elle appartient à l'horloge, pas à une
carte d'alerte, et elle reste lisible pendant un pointage. */
/* Pas de « capitalize » : la date arrive déjà bien formée de PHP,
et la règle transformait « 25 août » en « 25 Août ». */
.bjour{font-size:12.5px;opacity:.6;margin-top:-6px}
body.borne.theme-clair .bjour{color:var(--encre-2);opacity:1}
/* En mode flux, c'est le PIED qui tient le bas : « .bstat », qui
jouait ce rôle avec son « margin-top:auto », est masqué. Sans
cela, le nom du parc remontait se coller au bloc contextuel. */
body.borne.bflux .bpied{margin-top:auto}
/* En bandeau étroit, la colonne n'a plus de place pour le contexte. */
@media(max-width:820px){
.bjour{display:none}
.bbloc{display:none}
.bgbtn{min-width:0;flex:1 1 220px;padding:20px 24px}
.bapp .bpav{grid-template-columns:repeat(3,74px);gap:9px}
.bapp .bpav button{height:66px}
}
/* ═══════════════════════════════════════════════════════════════
v9.7 · La borne à l'échelle de son écran
Tout était en pixels fixes, calibré sur un grand écran. Sur une
tablette de 8 pouces — souvent moins de 1000 px de large en
pixels CSS —, la colonne mangeait le tiers de l'écran, les cartes
passaient à deux par ligne et la moitié des informations tombait
sous le pli.
Une poignée de variables portent maintenant l'échelle. Elles ont
toutes un PLANCHER (lisible de près sur un petit écran) et un
PLAFOND (la mise en page validée sur grand écran) : rien ne
devient minuscule, rien ne s'étire indéfiniment.
═══════════════════════════════════════════════════════════════ */
body.borne{
--side:clamp(198px, 21vw, 320px);
--pad:clamp(11px, 1.35vw, 20px);
--gap:clamp(7px, .95vw, 14px);
--f-nom:clamp(12.5px, 1.12vw, 15px);
--f-det:clamp(10.5px, .92vw, 12px);
--f-act:clamp(11px, 1.02vw, 13px);
--f-h:clamp(30px, 3.6vw, 46px);
--av:clamp(38px, 3.9vw, 52px);
/* ── « --carte » VOULAIT DIRE DEUX CHOSES ── (v14.41)
La palette définit « --carte:#FFFFFF » — la couleur d'une
surface. La borne le redéfinissait ici en LARGEUR de carte.
Conséquence invisible : partout sur la borne,
« background:var(--carte) » résolvait une longueur, donc une
valeur invalide, donc TRANSPARENT. Une douzaine de surfaces du
thème clair — la colonne des noms du planning, la grille, les
barres collantes — n'ont jamais rien peint, et la règle était
pourtant écrite, lisible, et vérifiée par un banc qui ne
regardait que son existence.
La largeur s'appelle maintenant « --bcarte ». Elle ne sert plus
qu'à un repli : les deux densités (v14.38) posent leur propre
« grid-template-columns », et gagnent toujours. */
--bcarte:clamp(146px, 15.5vw, 210px);
--r-c:clamp(12px, 1.2vw, 18px);
}
/* Écran bas (tablette en paysage, barre de navigation) : on serre la
verticale plutôt que l'horizontale — c'est elle qui manque. */
@media(max-height:720px){
body.borne{--pad:clamp(9px,1.1vw,14px);--gap:clamp(6px,.8vw,10px);--f-h:clamp(26px,3vw,34px);
--av:clamp(34px,3.4vw,44px)}
}
.bapp{grid-template-columns:var(--side) 1fr}
.bside{padding:var(--pad);gap:var(--gap)}
.bmain{padding:var(--pad);gap:var(--gap)}
/* ── Le bandeau : logo, heure, date — une ligne chacun ──
Côte à côte, le logo bornait la largeur de l'horloge. Empilée,
elle prend toute la colonne : c'est ce qu'on lit à deux mètres. */
.bhd{flex-direction:column;align-items:flex-start;gap:clamp(6px,.7vw,10px);
justify-content:flex-start}
.bhh{font-size:var(--f-h);line-height:1}
.bhh small{font-size:.36em;opacity:.5;margin-left:4px;vertical-align:top;letter-spacing:0}
.bhd .bjour{margin-top:-2px}
.blogo{width:clamp(36px,3.6vw,46px);height:clamp(36px,3.6vw,46px);
font-size:clamp(13px,1.25vw,16px)}
.blogoimg2{max-height:clamp(38px,4vw,52px)}
/* ── Météo : une heure par LIGNE ──
En colonnes, chaque case s'empilait — heure, icône, température —
et il fallait lire quatre petites colonnes verticales dans une
bande de 280 px. En lignes, chaque heure est une phrase qu'on
parcourt de gauche à droite. */
.bmeteo{padding:clamp(9px,1.05vw,13px)}
.bmnow b{font-size:clamp(20px,2vw,26px)}
.bmnow i{font-size:var(--f-det)}
.bmh{flex-direction:column;gap:3px;margin-top:10px}
.bmhc{display:flex;align-items:center;gap:9px;flex:none;text-align:left;
padding:clamp(5px,.55vw,7px) clamp(7px,.8vw,10px);border-radius:8px;width:auto}
.bmhc b{font-size:var(--f-det);opacity:.6;width:3.1em;flex:none}
.bmhc span{margin:0;flex:none;display:flex;align-items:center}
.bmhc i{font-size:var(--f-det);font-weight:600}
/* La pluie se range à droite : c'est la seule valeur facultative de
la ligne, elle ne doit pas décaler les autres. */
.bmhc u{margin-left:auto;font-size:calc(var(--f-det) - .5px);opacity:.75;text-align:right}
.bmjour{font-size:var(--f-det);gap:10px}
/* ── Événements : un par ligne, l'icône devant ──
En pastilles côte à côte, « Anniversaire de Chloé » et « Vacances
de la Toussaint » se coupaient au milieu d'un mot. */
.bevts{flex-direction:column;gap:5px}
.bevt{display:flex;align-items:center;gap:9px;border-radius:10px;
padding:clamp(6px,.65vw,8px) clamp(9px,.95vw,12px);font-size:var(--f-det);line-height:1.35}
.bevi{width:16px;height:16px;flex:none;opacity:.85}
/* ── La liste : cartes, filtres, recherche ── */
.bgrille{grid-template-columns:repeat(auto-fill,minmax(var(--bcarte),1fr));gap:var(--gap)}
.bcart{padding:clamp(11px,1.15vw,16px);gap:clamp(5px,.55vw,7px);border-radius:var(--r-c)}
.bav3{width:var(--av);height:var(--av);font-size:calc(var(--av) * .31)}
.bcnom{font-size:var(--f-nom)}
.bchr{font-size:var(--f-det)}
.bcptg{font-size:calc(var(--f-det) - .5px)}
.bcact{font-size:var(--f-act)}
.bpt2{top:clamp(10px,1vw,14px);right:clamp(10px,1vw,14px)}
.bfil{font-size:var(--f-act);padding:clamp(8px,.85vw,11px) clamp(12px,1.4vw,18px)}
.brech{font-size:var(--f-nom);padding:clamp(9px,1vw,13px) clamp(11px,1.2vw,16px)}
.bleg{font-size:calc(var(--f-det) - .5px)}
.bbloc{padding:clamp(9px,1.05vw,13px)}
.bbloc b{font-size:var(--f-det)}
.bbloc i{font-size:calc(var(--f-det) - .5px)}
.bnote{padding:clamp(9px,1.05vw,13px) clamp(10px,1.15vw,15px)}
.bnote span{font-size:var(--f-det)}
.bcarte{padding:clamp(10px,1.15vw,15px)}
.bpied{font-size:calc(var(--f-det) - 1px)}
.bjour{font-size:var(--f-det)}
.bthemebtn,.bdissoc{padding:clamp(8px,.85vw,11px) 12px;font-size:var(--f-det)}
/* ── Les écrans du flux suivent la même échelle ── */
.bsolo{gap:clamp(11px,1.4vw,18px);padding:clamp(14px,1.6vw,22px)}
.bavg{width:clamp(64px,7vw,96px);height:clamp(64px,7vw,96px);
font-size:clamp(21px,2.3vw,30px)}
.bsous{font-size:clamp(13px,1.15vw,15px)}
.bgbtn{padding:clamp(16px,1.9vw,24px) clamp(24px,3vw,38px);
min-width:clamp(180px,21vw,250px);border-radius:var(--r-c)}
.bgbtn b{font-size:clamp(17px,1.7vw,22px)}
.bgbtn i{font-size:var(--f-det)}
.bgbi{width:clamp(21px,2.3vw,26px);height:clamp(21px,2.3vw,26px)}
.bret{padding:clamp(11px,1.3vw,15px) clamp(22px,3vw,30px);
min-width:clamp(180px,21vw,250px);border-radius:var(--r-c);
font-size:clamp(14px,1.35vw,16.5px)}
.bret .bgbi{width:clamp(17px,1.8vw,21px);height:clamp(17px,1.8vw,21px)}
.bconsigne{padding:clamp(10px,1.15vw,14px) clamp(12px,1.3vw,16px)}
.bconsigne span{font-size:var(--f-det)}
.brc{padding:clamp(10px,1.15vw,14px)}
.brc b{font-size:clamp(18px,1.9vw,24px)}
.brc i{font-size:var(--f-det)}
.bapp .bpav{grid-template-columns:repeat(3,clamp(64px,7vw,86px));gap:clamp(8px,.85vw,11px)}
.bapp .bpav button{height:clamp(56px,6.2vw,76px);border-radius:clamp(13px,1.4vw,18px);
font-size:clamp(20px,2vw,26px)}
.bapp .bpts{gap:clamp(9px,1vw,12px)}
.bapp .bpts i{width:clamp(12px,1.2vw,15px);height:clamp(12px,1.2vw,15px)}
.bapp .bmotifs button{font-size:var(--f-nom);padding:clamp(10px,1.1vw,13px) clamp(14px,1.6vw,20px)}
/* ── Veille : elle vit sur toute la surface, elle peut respirer ── */
.bvh{font-size:clamp(56px,10vw,120px)}
.bvc{min-width:clamp(104px,11vw,132px);padding:clamp(10px,1.2vw,14px) clamp(12px,1.5vw,18px)}
.bvc b{font-size:clamp(22px,2.5vw,30px)}
.bvnote{font-size:clamp(13px,1.2vw,15px)}
/* ── Palier intermédiaire ──
Sous 1100 px, la colonne coûte trop cher : on la resserre pour
rendre une carte de plus par ligne à la grille. */
@media(max-width:1100px){
body.borne{--side:clamp(180px,19vw,220px);--bcarte:clamp(142px,17vw,168px)}
.bmhc u{display:none}
}
/* ── La borne n'est pas l'application ──
« html{min-width:1024px} » est une décision de l'application, qui
est desktop et l'assume. La borne vit sur une tablette murale :
sous ce plancher, une tablette de 8 pouces devait défiler
HORIZONTALEMENT pour voir la dernière colonne de noms. */
html.borne{min-width:0}
/* ── Colonne : le milieu défile, le bas reste ──
La journée (météo, effectif, note, événements) dépasse la hauteur
d'un écran de 8 pouces. Le bouton de thème et le nom du parc
tombaient sous le pli, et rien ne disait qu'il fallait faire
défiler. */
.bside{overflow:hidden}
.bsmid{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;
gap:var(--gap);padding-bottom:2px;
/* Le dernier bloc s'efface au ras du bord : un bloc coupé net se
lit comme un défaut d'affichage, un bloc qui s'estompe dit qu'il
y a la suite. Quand tout tient, la zone estompée est vide et
personne ne la voit. */
-webkit-mask-image:linear-gradient(#000 calc(100% - 16px), transparent);
mask-image:linear-gradient(#000 calc(100% - 16px), transparent)}
.bsbas{flex:none;display:flex;flex-direction:column;gap:clamp(6px,.7vw,10px)}
/* Le « margin-top:auto » qui poussait l'état de connexion vers le bas
n'a plus lieu d'être : c'est « .bsmid » qui prend la place libre. */
.bsbas .bstat{margin-top:0}
body.borne.bflux .bpied{margin-top:0}
/* En mode flux, le milieu ne contient plus que le bloc contextuel :
il ne doit pas garder la hauteur de la journée qu'il vient de
masquer. */
body.borne.bflux .bsmid{flex:0 0 auto}
/* Écran court : on rend une heure de météo plutôt que d'obliger à
faire défiler pour voir la note du jour. */
@media(max-height:680px){
.bmh .bmhc:nth-child(n+4){display:none}
}
/* Bandeau étroit : la colonne devient une barre, tout le contexte
s'efface — y compris « Dissocier », qui n'a rien à faire à portée
de pouce sur un écran réduit. */
@media(max-width:820px){
/* À réaffirmer ICI : la règle « .bapp{grid-template-columns:var(--side) 1fr} »
de la v9.7 vient plus loin dans la feuille et écrasait, à
spécificité égale, le passage en pleine largeur de la v7.48. La
colonne restait donc large de 180 px, et son contenu débordait. */
.bapp{grid-template-columns:1fr;grid-template-rows:auto 1fr}
.bside{flex-direction:row;align-items:center;overflow:hidden}
.bsmid,#fdissoc{display:none}
.bhd{flex-direction:row;align-items:baseline;gap:12px;flex:none}
.bsbas{flex-direction:row;align-items:center;margin-left:auto;gap:10px}
.bsbas .bpied{display:none}
}
/* ═══════════════════════════════════════════════════════════════
v9.8 · Le bandeau centré, et la carte d'un shift
═══════════════════════════════════════════════════════════════ */
/* ── Bandeau centré ──
Aligné à gauche, l'ensemble logo / heure / date pesait tout d'un
côté de la colonne alors que rien ne venait équilibrer l'autre. */
.bhd{align-items:center;text-align:center}
/* La date reprend la typographie de l'heure et gagne en taille :
c'est la seconde information de la borne, elle ne peut pas rester
une mention de bas de page. Nettement plus petite que l'heure —
sinon les deux se disputent le regard. */
.bhd .bjour{font-family:var(--f-titre);font-weight:600;
font-size:clamp(14px,1.55vw,21px);opacity:.62;margin-top:0;line-height:1.15}
body.borne.theme-clair .bhd .bjour{color:var(--encre-2);opacity:.9}
/* ── L'étiquette du shift ──
Une puce de la couleur choisie, l'icône du métier, le nom. Fondue
dans la phrase grise des horaires, elle ne se distinguait pas —
et son icône n'arrivait même pas jusqu'à la borne. */
.bcetq{display:flex;align-items:center;gap:6px;max-width:100%;min-width:0;color:var(--ec)}
.bcetq i{width:7px;height:7px;border-radius:50%;flex:none;background:currentColor}
.bcetq svg{width:13px;height:13px;flex:none;opacity:.85}
/* Sur fond clair, c'est la teinte franche du kit qui porte ; sur
fond sombre, la pâle. L'inverse s'éteint dans les deux cas. */
body.borne.theme-clair .bcetq{color:var(--ec2)}
.bcetq b{font-size:var(--f-det);font-weight:600;opacity:.92;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* ── Les horaires prévus ──
Chiffres alignés, dans la typographie des titres : ce sont eux
qu'on vérifie d'un coup d'œil, pas la pause. */
.bch{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;
font-family:var(--f-titre);font-variant-numeric:tabular-nums;line-height:1.25}
.bch b{font-size:clamp(13px,1.2vw,15.5px);font-weight:600}
.bch i{font-style:normal;opacity:.38;font-size:.92em}
.bch u{text-decoration:none;font-family:var(--f-ui);font-weight:400;
font-size:calc(var(--f-det) - .5px);opacity:.5;flex-basis:100%}
.bcsans{font-size:var(--f-det);opacity:.5;font-style:italic}
/* ── Ce qui a été pointé ──
En phrase, il fallait lire pour savoir où en était la personne.
En pastilles colorées, on le voit. */
.bcptg{display:flex;flex-wrap:wrap;gap:4px}
.bcp{display:inline-flex;align-items:center;gap:5px;line-height:1.3;
font-size:calc(var(--f-det) - .5px);font-weight:600;
padding:2px 9px 2px 7px;border-radius:20px;
background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09)}
.bcp::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.bcp.arrivee{color:#8FBF6B}
.bcp.depart{color:#DE9089}
.bcp.pause{color:#E9A23B}
body.borne.theme-clair .bcp{background:var(--surface-2);border-color:var(--ligne)}
body.borne.theme-clair .bcp.arrivee{color:var(--vert)}
body.borne.theme-clair .bcp.depart{color:var(--rouge)}
body.borne.theme-clair .bcp.pause{color:var(--jaune)}
/* Une journée finie ne réclame plus rien : ses pastilles s'éteignent
avec le reste de la carte. */
.bcart.bfini .bcp{color:inherit;opacity:.75}
/* ═══ v10.0 · Motifs et notes de pointage ═══════════════════════
Le motif était demandé au salarié devant la borne (« votre
responsable le verra ») puis n'apparaissait sur aucun écran. Il se
lit maintenant partout où l'on regarde un pointage.
═══════════════════════════════════════════════════════════════ */
/* ── Sur la borne : choisir un motif, et préciser ── */
.bmotifs button.on{border-color:#E9A23B;color:#E9A23B;background:rgba(233,162,59,.14)}
body.borne.theme-clair .bmotifs button.on{border-color:var(--terra);color:var(--terra-h);
background:var(--terra-pale)}
.bnotein{width:min(560px,100%);border-radius:13px;padding:13px 16px;font-family:var(--f-ui);
font-size:var(--f-nom);background:rgba(255,255,255,.06);color:inherit;
border:1px solid rgba(255,255,255,.16)}
.bnotein::placeholder{opacity:.45;color:inherit}
.bnotein:focus{outline:2px solid #E9A23B;outline-offset:1px}
body.borne.theme-clair .bnotein{background:#fff;border-color:var(--ligne-2);color:var(--encre)}
/* Rien de choisi, rien d'écrit : on le signale sur place plutôt que
de faire un aller-retour au serveur pour se faire redemander la
même chose. */
@keyframes bmreq{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.bmreq{animation:bmreq .3s ease-in-out 2}
/* ── Dans le tiroir : motif et note se lisent différemment ──
Le motif vient d'une liste, la note est écrite à la main. Les
confondre reviendrait à prêter au salarié des mots qu'il n'a pas
choisis. */
/* Le motif : une pastille, comme sur la pointeuse où il a été
choisi. Sa forme dit sa provenance, aucune légende n'est
nécessaire. */
.frevm{display:inline-block;margin-top:4px;font-style:normal;font-size:12px;font-weight:600;
background:var(--carte);border:1px solid var(--ligne-2);border-radius:20px;
padding:2px 11px;color:var(--encre-2)}
/* ── Sur la fiche des pointages ── */
.ptgnotes{max-width:340px}
.ptgn{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;padding:3px 0;font-size:12px;
line-height:1.4}
.ptgn + .ptgn{border-top:1px solid var(--ligne)}
.ptgn b{font-family:ui-monospace,monospace;font-size:11px;color:var(--muet);flex:none}
.ptgm{background:var(--surface-2);border:1px solid var(--ligne);border-radius:20px;
padding:1px 9px;font-weight:600;color:var(--encre-2)}
.ptgn i{font-style:italic;color:var(--encre-2)}
/* ═══════════════════════════════════════════════════════════════
v10.2 · Le tiroir de VALIDATION, allégé
Valider un shift et le planifier sont deux gestes différents, et
le tiroir ne montrait que le second : créneaux types, pauses
types, date modifiable, choix du salarié, étoile de bibliothèque,
cinq boutons. Or la question tient en un mot — est-ce que je
valide ? — et tout le reste éloignait d'elle.
Ce qui disparaît en validation ne disparaît PAS de l'application :
ce sont des outils de planification, ils restent là où l'on
planifie.
═══════════════════════════════════════════════════════════════ */
/* La personne et le jour sont des FAITS : ils figurent dans le
récapitulatif en tête, ils n'ont pas à être re-choisis. */
#f-edit.valmode #e_sect_qui,
#f-edit.valmode #e_row_date,
/* Créneaux types (« Journée », « Matin », « Ouverture »…) : ils
servent à poser une prévision, jamais à corriger un relevé. */
#f-edit.valmode #e_chips_cren,
/* Pauses types : de même — la pause à saisir ici est celle qui a été
PRISE, pas une durée standard. « Ajouter une pause » reste. */
#f-edit.valmode #e_chips_p,
/* Filet : tout raccourci de composition ajouté plus tard dans ce
formulaire disparaît en validation sans qu'on ait à y penser.
« #e_chips_h » était visé ici jusqu'en v10.7 alors que cet
identifiant appartient au formulaire multiple : la règle ne
désignait rien, et les créneaux types restaient à l'écran (v10.8). */
#f-edit.valmode .qchips{display:none}
/* Les sous-titres de section (« salarié affecté », « date et
horaires »…) expliquent un formulaire qu'on ne remplit plus. Celui
du déroulé réel reste : il dit ce qui sera retenu pour la paie. */
#f-edit.valmode .dwsect:not(.valbloc) .dwsh i{display:none}
/* ── La frise, resserrée ──
Chaque note ou motif s'affichait dans une carte encadrée de pleine
largeur : trois pointages et le tiroir doublait de hauteur, pour
des textes qui font rarement six mots. Un filet à gauche suffit à
les rattacher à leur pointage, et ils tiennent sur une ligne
(v10.2). */
/* ── Ce que le salarié a dit, LISIBLE ──
La note était plus petite que la légende qui l'expliquait. On
retire la légende — personne n'a besoin qu'on lui dise d'où vient
un texte — et la note reprend la taille du reste du tiroir. Les
deux natures se distinguent par la FORME : le motif vient d'une
liste, c'est une pastille ; la note est écrite à la main, elle est
entre guillemets (v10.3). */
#f-edit.valmode .frevn{background:transparent;border:0;border-left:2px solid var(--ligne-2);
border-radius:0;margin-top:4px;padding:1px 0 1px 10px;font-size:13px;
color:var(--encre);line-height:1.45}
#f-edit.valmode .frev{padding:5px 0}
#f-edit.valmode .valbloc{padding:11px 12px;margin-bottom:12px}
#f-edit.valmode .rappelp,
#f-edit.valmode .frise{margin-bottom:9px}
/* Les sections d'un tiroir de validation sont trois fois moins
nombreuses : elles peuvent se resserrer sans se toucher.
« :not(.valbloc) » : le déroulé réel est une CARTE, avec son propre
encadré — à spécificité égale cette règle lui reprenait son
rembourrage horizontal, et son titre venait coller la bordure. */
#f-edit.valmode .dwsect:not(.valbloc){padding:12px 0}
/* ═══════════════════════════════════════════════════════════════
v10.4 · Le relevé, et les deux interrupteurs
La frise verticale doublait la hauteur du tiroir pour la même
information. Un relevé se lit en lignes : arrivée, départ, pause,
chacune avec son heure prévue en regard.
═══════════════════════════════════════════════════════════════ */
#f-edit .frise{padding-left:0;margin-bottom:10px}
#f-edit .frise::before{display:none}
.rl{display:flex;align-items:center;gap:8px;padding:5px 0;flex-wrap:wrap}
.rlp{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
border-radius:5px;padding:2px 7px;flex:none;min-width:62px;text-align:center}
.rlp.in{background:#EDF3E6;color:#55773B;border:1px solid #CBDBB9}
.rlp.out{background:#FBE7E8;color:#BA3E45;border:1px solid #F0C9CB}
.rlp.pa{background:var(--surface-2);color:var(--muet);border:1px solid var(--ligne-2)}
.rl b{font-family:var(--f-titre);font-size:15px;font-weight:600;min-width:52px}
.rl .pj{background:var(--carte);border:1px solid var(--ligne);border-radius:20px;
padding:2px 9px;font-size:10.5px;font-weight:600;color:var(--encre-2);white-space:nowrap}
/* La note du salarié, lisible, sur sa propre ligne. */
.rlnote{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
border-left:2px solid var(--ligne-2);padding:1px 0 1px 10px;margin:0 0 7px 4px}
.rltxt{font-size:13px;color:var(--encre);line-height:1.45}
/* ── Les deux interrupteurs ── */
.swliste{display:flex;flex-direction:column;gap:11px}
.swaide{font-size:12px;color:var(--muet);margin-top:8px;line-height:1.5}
#e_sect_retenu .sw{margin-top:2px}
#e_sect_retenu .sw[hidden]{display:none}
/* ── Le bloc d'absence ──
Il n'apparaît que si personne n'est venu : un type d'absence, et
la décision de la déduire ou non. Décalé vers la droite, il se lit
comme une CONSÉQUENCE de l'interrupteur au-dessus, pas comme un
réglage de plus au même niveau (v10.6). */
.absbloc{margin:11px 0 4px;padding:12px 13px;border-left:2px solid var(--ligne-2);
background:var(--surface-2);border-radius:0 11px 11px 0;
display:flex;flex-direction:column;gap:11px}
.absbloc[hidden]{display:none}
.absbloc .fg{margin:0}
/* ── LES PIÈCES D'UN ARRÊT, DANS LE TIROIR ── (v11.70)
Frère du formulaire d'absence, jamais son enfant : un dépôt de
fichier demande son propre formulaire, et un formulaire ne
s'imbrique pas dans un autre. */
/* Le retrait horizontal recopie celui de « .dwr .pb » : le bloc est
HORS du formulaire, il n'en hérite donc pas, et sans cela il
traverse le tiroir d'un bord à l'autre pendant que tout le reste
est en retrait. */
.arretbloc{padding:15px 18px;border-top:1px solid var(--ligne);
display:flex;flex-direction:column;gap:11px}
.arretbloc[hidden]{display:none}
/* Le formulaire d'absence occupe tout le tiroir (« .dwr .pb{flex:1} »).
Quand le bloc des pièces s'ouvre en dessous, cette élasticité
creuse un vide de deux cents pixels entre les deux. Le
formulaire reprend donc sa taille naturelle — et seulement
quand le bloc est là. */
.dwr .pb:has(~ .arretbloc:not([hidden])){flex:none}
.arretbloc .fg{margin:0}
/* L'état, sur la ligne du titre : ce qui manque se lit avant ce
qu'on peut déposer. */
.arretmq{font-style:normal;font-size:11.5px;color:var(--muet)}
/* ── DEUX NOMS POUR DEUX FAMILLES ── (v11.87)
« .att » porte AILLEURS une règle NUE — c'est un encadré à part
entière, plus bas dans cette feuille. Tant que l'état vivait dans un
« .dwsh », le contexte l'emportait ; descendu dans la ligne d'une
période, il s'est mis à dessiner un bloc rose pleine largeur autour
de « 1 attendu ». Le modificateur porte donc un nom qui n'appartient
qu'à lui : c'est la leçon de la famille « .dr / .an / .dv ». */
.arretmq.mqko{color:var(--rouge);font-weight:600;background:none;padding:0;display:inline}
.arretmq.mqatt{color:var(--terra-h,var(--encre));font-weight:600;background:none;padding:0;display:inline}
.arretli{display:flex;align-items:baseline;gap:9px;
padding:7px 0;border-bottom:1px dashed var(--ligne-2)}
.arretli:last-child{border-bottom:0}
.arretnat{font-size:12px;font-weight:700;color:var(--encre);flex:none}
.arretdt{font-style:normal;font-size:11.5px;color:var(--muet);
flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arretlk{flex:none;font-size:11.5px;font-weight:600;color:var(--terra,var(--encre))}
.arretform{display:flex;flex-direction:column;gap:11px}
/* ── LE REGISTRE À L'ÉCRAN ── (v11.80)
La ligne d'une période reprend « .docrow », le gabarit du classeur :
une pièce d'arrêt EST une pièce du classeur, la dessiner autrement
ferait croire à un autre objet.
Trois modificateurs seulement, tous SCOPÉS — aucun n'existe seul,
pour qu'aucun ne définisse par accident un objet qu'il ne fait que
qualifier ailleurs. C'est la règle depuis « .dv » et « .an ». */
.dwr .docrow{padding:9px 0}
.dwr .docrow .btn.sm{flex:none;gap:6px}
.dwr .docrow .btn.sm .ico{width:14px;height:14px}
/* Une période ATTENDUE n'a pas de fichier : son badge est creux. */
.docic.arretvide{background:transparent;border-style:dashed;color:var(--muet)}
/* La pièce choisie au classeur, avant de valider. */
.dwr .docrow.prise{background:var(--vert-pale);border-radius:9px}
.dwr .docrow.prise .btn.sm{border-color:var(--vert);color:var(--vert)}
/* ── LA LISTE DU CLASSEUR DÉFILE CHEZ ELLE ── (v11.80)
On ORDONNE sans filtrer : un salarié qui a vingt pièces au dossier
les voit toutes. Mais vingt lignes dans un tiroir poussent le pied
hors de vue — la liste défile donc dans sa propre boîte, et le
geste reste à sa place. */
#arret_cllist{max-height:272px;overflow-y:auto;
border:1px solid var(--ligne-2);border-radius:10px;padding:0 11px}
/* Rien à proposer : l'onglet reste lisible mais s'efface. */
.tabs a.arretoff{opacity:.45}
/* ── LE REGISTRE : CE QUI EST RÉCLAMÉ ── (v11.76)
Une période attendue tient sa place dans la chronologie, entre les
pièces reçues. « à fournir » la distingue sans la sortir de la
liste : deux listes séparées obligeraient à recomposer l'ordre des
dates dans sa tête. */
.arretatt{flex:none;font-size:11px;font-weight:700;letter-spacing:.02em;
color:var(--terra-h);background:var(--terra-pale);
border-radius:5px;padding:2px 7px}
/* La période que le dépôt va remplir. Ce n'est pas un champ : on ne
la choisit plus, on la lit. Même hauteur que le « .fi » d'à côté
pour que les deux colonnes commencent au même endroit. */
.arretcib{min-height:36px;display:flex;align-items:center;
font-size:12px;font-weight:600;color:var(--encre);
padding:0 11px;border:1px dashed var(--ligne);border-radius:8px;
background:var(--surface-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Personne n'est venu : le poste et la pause n'ont plus d'objet, les
heures restent VISIBLES mais figées — elles disent ce qui était
prévu, et ce n'est plus modifiable. */
/* Poste et pause disparaissent — ils n'ont plus d'objet. Les HEURES
restent, figées : elles disent ce qui était prévu, et c'est
précisément ce qui n'a pas eu lieu. Les retirer effacerait la
raison d'être du shift. */
#f-edit.absent .dwsect:not(.valbloc):not(#e_sect_retenu):not(#e_sect_note):not(#e_sect_quand){display:none}
#f-edit.absent #e_sect_quand .qheures{opacity:.45;pointer-events:none}
#f-edit.absent #e_titre_quand{color:var(--muet)}
/* La note SURVIT : c'est justement quand personne n'est venu qu'on a
quelque chose à écrire. */
/* ── Aucun contrôle de conformité actif ──
Un bandeau rouge, pas jaune : ce n'est pas une préférence
d'affichage, c'est un parc qui tourne sans aucune vérification
légale. Il ne se ferme pas — il disparaît quand on réactive les
contrôles (v10.5). */
.ctloff{display:flex;align-items:center;gap:10px;background:var(--rouge-pale);
border:1px solid #F0C9CB;color:#8A2C31;border-radius:11px;padding:10px 13px;
font-size:12.5px;margin:0 0 12px}
.ctloff .ico{width:16px;height:16px;flex:none}
.ctloff b{font-weight:700}
.ctloff .btn{margin-left:auto;flex:none}
/* ═══ v10.7 · Les marques d'un shift validé ═══════════════════════
La coche de validation dit « c'est arrêté ». Elle ne dit pas
qu'une RETENUE sur salaire a été décidée, ni que les heures
retenues ne sont pas celles qui ont été pointées. Deux faits qui
changent un bulletin de paie : ils méritent leur propre marque,
lisible sans ouvrir le tiroir.
Les icônes se rangent en ligne, la coche toujours en dernier —
c'est elle qu'on cherche, les autres la qualifient. */
.sh .shmarq{position:absolute;right:5px;bottom:4px;display:flex;align-items:center;gap:3px}
.sh .shmarq .shtick{position:static}
.shm{width:15px;height:15px;border-radius:50%;flex:none;
display:flex;align-items:center;justify-content:center;
box-shadow:0 0 0 1.5px rgba(255,255,255,.65);cursor:help}
.shm svg{width:10px;height:10px;stroke-width:2.1}
/* Retenue sur salaire : rouge, comme tout ce qui retire de l'argent
à quelqu'un dans cette application. */
.shm-eu{background:var(--rouge);color:#fff}
/* Validé à la main : neutre. Ce n'est ni bien ni mal — c'est un
fait, et le survol en donne le détail. */
.shm-ma{background:var(--encre-2);color:#fff}
body.dens-dense .sh .shmarq{gap:2px}
body.dens-dense .shm{width:13px;height:13px}
body.dens-dense .shm svg{width:9px;height:9px}
/* ═══ v10.7 · Le fil du jour ═══════════════════════════════════════
La journée se raconte de haut en bas, et la décision se prend LÀ
OÙ est l'anomalie : l'interrupteur de décompte est posé sous
l'arrivée en retard, pas relégué en bas de l'écran. On lit le
problème et on tranche sans déplacer le regard. */
#f-edit .frise{padding-left:20px;margin:2px 0 10px;position:relative}
#f-edit .frise::before{display:block;content:'';position:absolute;left:5px;top:10px;bottom:10px;
width:2px;background:var(--ligne)}
.fj{position:relative;padding:7px 0}
.fjp{position:absolute;left:-20px;top:12px;width:12px;height:12px;border-radius:50%;
background:var(--ligne-2);border:2.5px solid var(--surface-2);box-shadow:0 0 0 1.5px var(--ligne-2)}
.fjp.in{background:#55773B;box-shadow:0 0 0 1.5px #55773B}
.fjp.out{background:#BA3E45;box-shadow:0 0 0 1.5px #BA3E45}
.fjko .fjp{background:#BA3E45;box-shadow:0 0 0 1.5px #BA3E45}
.fjh{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.fjh b{font-family:var(--f-titre);font-size:15px;font-weight:600;min-width:50px}
.fjt{font-size:12.5px;font-weight:600;color:var(--encre-2)}
/* Les pastilles de justificatif étaient stylées par « .frevh .pj » :
le conteneur s'appelle « .fjh » depuis le passage au fil. */
.fjh .pj,.rl .pj{background:var(--carte);border:1px solid var(--ligne);border-radius:20px;
padding:2px 9px;font-size:10.5px;font-weight:600;color:var(--encre-2);white-space:nowrap}
.fjbadge{font-size:10.5px;font-weight:700;color:#BA3E45;background:#FBE7E8;
border:1px solid #F0C9CB;border-radius:20px;padding:2px 9px}
/* La décision, au contact du problème. */
.fjdec{margin-top:9px;padding:10px 12px;background:#FBEEDB;border:1px solid #EFD3A6;border-radius:10px}
.fjdec .sw{display:flex}
.fjdec .swl{color:#8A5A17}
.fjdec .sw[hidden]{display:none}
/* ═══ v10.9 · ÉMARGEMENT ═══════════════════════════════════════════
Paie › Émargement : la journée de la borne relue avant la paie.
Trois regards (le détail, les anomalies, la semaine) sur la même
donnée, dans le même écran.
Le principe visuel : une PREUVE appartient à un geste, pas à une
ligne. Elle se pose donc à côté de l'heure qui la porte — et la
photo se MONTRE au lieu de s'annoncer, parce qu'une pastille
« il y a une photo » oblige à cliquer pour savoir s'il y a
quelqu'un dessus. */
/* ── Onglets de la rubrique ── */
/* .pgt est défini avec .tabs plus haut : un seul composant. */
/* ── Barre de date et compteur ── */
.emf{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.emnav{display:inline-flex;align-items:center;gap:4px}
.emnav .btn{padding:7px 11px;min-width:34px;justify-content:center}
.emdate{display:inline-flex;align-items:center;gap:9px;background:var(--carte);
border:1px solid var(--ligne-2);border-radius:9px;padding:8px 16px;font-size:14px;
font-weight:600;font-variant-numeric:tabular-nums}
.emdate .ico{width:15px;height:15px;color:var(--muet)}
.emsp{flex:1}
.emreste{display:inline-flex;align-items:center;gap:8px;background:var(--bleu-pale);
color:var(--bleu-fonce);border:1px solid var(--bleu);border-radius:99px;padding:6px 14px;
font-size:13.5px;font-weight:600}
.emreste b{font-variant-numeric:tabular-nums;font-size:15px}
.emreste.zero{background:var(--vert-pale);color:var(--vert-fonce);border-color:var(--vert)}
/* ── Filtres d'état ── */
.emchips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.emchip{border:1px solid var(--ligne-2);background:var(--carte);border-radius:99px;
padding:5px 13px;font-size:13.5px;cursor:pointer;font-family:var(--f-ui);
color:var(--encre-2);display:inline-flex;align-items:center;gap:7px}
.emchip:hover{border-color:var(--muet)}
.emchip.on{background:var(--encre);color:var(--fond);border-color:var(--encre)}
.emchip .n{font-variant-numeric:tabular-nums;opacity:.7;font-weight:700}
/* ── Barre de sélection ── */
.embar{display:flex;align-items:center;gap:14px;background:var(--surface-2);
border:1px solid var(--ligne);border-radius:var(--r);padding:12px 16px;margin-bottom:12px;
transition:background .15s,border-color .15s}
.embar.actif{background:var(--creme);border-color:var(--creme-fonce)}
.embar .txt{font-size:14px;color:var(--encre-2)}
.embar.actif .txt{color:var(--encre);font-weight:600}
.embar .sp{flex:1}
.embar .btn[disabled]{opacity:.45;cursor:not-allowed}
/* ── Le tableau ── */
.emwrap{background:var(--carte);border:1px solid var(--ligne);border-radius:var(--r);
box-shadow:var(--ombre);overflow:hidden}
.emscroll{overflow-x:auto}
table.emt{width:100%;border-collapse:collapse;min-width:1080px}
.emt th{text-align:left;font-size:12.5px;font-weight:700;color:var(--encre-2);padding:12px;
background:var(--surface-2);border-bottom:1px solid var(--ligne);white-space:nowrap;
font-family:var(--f-ui)}
.emt th .aide{display:inline-grid;place-items:center;width:14px;height:14px;border-radius:50%;
background:var(--encre);color:var(--fond);font-size:9px;font-weight:700;margin-left:5px;
cursor:help;vertical-align:1px}
.emt td{padding:11px 12px;border-bottom:1px solid var(--surface-2);vertical-align:middle;
font-size:13.5px}
.emt tbody tr:last-child td{border-bottom:0}
.emt tbody tr:hover{background:var(--surface-2)}
.emt tbody tr.sel,.emt tbody tr.sel:hover{background:var(--creme-40)}
.emt tbody tr.fait{opacity:.72}
.emt .cbc{width:44px;padding-left:16px}
.emt .cact{width:78px;text-align:right;padding-right:16px}
.emt .cact .btn{padding:5px 13px;font-size:13px}
.emcb{width:18px;height:18px;border:1.5px solid var(--ligne-2);border-radius:5px;
background:var(--carte);cursor:pointer;display:grid;place-items:center;padding:0}
.emcb:hover{border-color:var(--muet)}
.emcb.on,.emcb.part{background:var(--encre);border-color:var(--encre)}
.emcb.on::after{content:'✓';color:var(--fond);font-size:11px;font-weight:700;line-height:1}
.emcb.part::after{content:'–';color:var(--fond);font-size:12px;font-weight:700;line-height:1}
.emcb[disabled]{opacity:.3;cursor:not-allowed}
.emqui{display:flex;align-items:center;gap:9px;min-width:0}
.emqui .avm{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
color:#fff;font-size:11px;font-weight:700;flex:none}
.emqui .nn{min-width:0}
.emqui .nn b{display:block;font-weight:600;font-size:13.5px;white-space:nowrap}
.emqui .nn span{display:block;font-size:11.5px;color:var(--muet);white-space:nowrap}
.emh{font-variant-numeric:tabular-nums;white-space:nowrap}
.emh .p2{display:block;font-size:12px;color:var(--muet);margin-top:3px}
.emh .ko{color:var(--terra-fonce);font-weight:600}
.emvide{color:var(--muet);font-style:italic}
.emsrc{display:block;font-size:11.5px;color:var(--muet);margin-top:3px}
.emdur{font-family:var(--f-titre);font-weight:700;font-size:15px;font-variant-numeric:tabular-nums}
.emdur .ec{display:block;font-family:var(--f-ui);font-size:11.5px;font-weight:600;margin-top:2px}
.emdur .ec.plus{color:var(--vert-fonce)}
.emdur .ec.moins{color:var(--terra-fonce)}
/* ── Un geste et ses preuves ── */
.gst{display:flex;align-items:center;gap:8px;padding:2px 0;max-width:460px}
.gst + .gst{margin-top:5px}
.gp{width:9px;height:9px;border-radius:50%;flex:none}
.gp.a{background:var(--vert)}
.gp.d{background:var(--encre-2)}
.gp.man{background:var(--ligne-2);box-shadow:inset 0 0 0 1.5px var(--muet)}
.gh{font-variant-numeric:tabular-nums;font-weight:600;font-size:14px;min-width:48px}
.gh.ko{color:var(--terra-fonce)}
.gpr{font-size:11.5px;color:var(--muet);white-space:nowrap}
.gec{font-size:11px;font-weight:700;padding:1px 7px;border-radius:99px;white-space:nowrap;
background:var(--surface-2);color:var(--muet)}
.gec.tard{background:var(--rouge-pale);color:var(--rouge-fonce)}
.gec.tot{background:var(--jaune-pale);color:var(--jaune-fonce)}
.gsp{flex:1;min-width:6px}
/* ═══ L'ÉMARGEMENT SUR UNE LIGNE ═══ (v14.48)
Un shift tenait sur trois rangs : une ligne de geste par pointage,
chacune avec sa bande de preuves. Mesuré sur une journée réelle de
quatorze shifts : 92 px la ligne, 1 300 px de tableau — on ne
voyait jamais la journée entière.
Ici l'heure, son point d'état, son écart et la note du salarié
tiennent sur un rang ; « .p2 » n'apparaît que s'il y a une pause à
dire. Les preuves partent dans leur colonne. 92 px → ~56 px. */
.emh .gh{display:inline;min-width:0;font-size:13.5px}
.gsep{color:var(--ligne-2);font-weight:400;margin:0 5px}
/* Le point d'état collé à son heure : vert dans la tolérance, jaune
quand on a fait moins, terracotta quand on a fait plus. */
.emh .gp{display:inline-block;vertical-align:middle;margin:0 0 1px 5px;width:7px;height:7px}
.emh .gp.t{background:var(--rouge)}
.emh .gp.v{background:var(--jaune)}
/* L'écart contre chaque heure a été retiré en v14.50 : il se lit sous
la DURÉE, qui est le chiffre qui part en paie. Le point d'état reste
ici — lui seul dit lequel des deux gestes a dérivé. */
/* La pause, avec ses heures — elle ne se lisait que dans le total. */
.empz{font-variant-numeric:tabular-nums}
.empz.t{color:var(--jaune-fonce);font-weight:600}
.empz.ko{color:var(--terra-fonce);font-weight:600}
.empz + .empz{margin-left:10px}
/* La note du salarié, à côté de l'heure qu'elle explique. Bleue :
un commentaire n'est pas une preuve, c'est lui qui s'explique. */
/* « .pv » est en « display:grid » : posée au milieu d'une phrase
d'heures, la pastille cassait la ligne et rendait les 30 px qu'on
venait de gagner. Elle passe en « inline-grid ». */
.pv.emcm{display:inline-grid;width:19px;height:19px;border-radius:6px;margin-left:6px;
vertical-align:middle;border-color:#C9D3E8;background:var(--bleu-pale);
color:var(--bleu);cursor:help}
.pv.emcm svg{width:11px;height:11px}
.pv.emcm:hover{border-color:var(--bleu);background:#DCE4F4;color:var(--bleu)}
/* La colonne Contrôle : les preuves des deux gestes côte à côte, un
filet entre elles. On la lit à la verticale, et qui n'a laissé
aucune trace se voit sans lire une heure. */
.cctl{white-space:nowrap;width:1%}
/* « .prv » est un flex : deux groupes à la suite s'empilaient, et la
ligne reprenait les 30 px qu'on venait de lui retirer. Ils passent
en ligne, séparés par un filet — arrivée à gauche, départ à
droite, comme les deux heures juste avant. */
.cctl .prv{display:inline-flex;vertical-align:middle}
.cctl .prv + .prv{margin-left:9px;padding-left:9px;border-left:1px solid var(--ligne)}
/* Plus grandes : à 28 px on visait mal, et une photo de pointage de
la taille d'une icône ne se regarde pas. */
.cctl .pv{width:32px;height:32px}
.cctl .pv svg{width:16px;height:16px}
/* La photo du salarié : « avatar_html() » rend « .avm.avphoto » avec
son à l'intérieur du sous-titre reste dans la phrase : sans
cette précision, « programmée » partait à la ligne et coupait
la phrase en trois. */
.e-hv .c span b{display:inline;font-weight:700}
.e-hv .c span{color:var(--muet);font-size:12px}
/* La fusion des intitulés en texte libre */
.e-fus{border:1px solid var(--ligne);border-radius:11px;background:var(--carte);padding:12px 14px;
margin-bottom:9px}
.e-fus label{display:flex;align-items:center;gap:9px;font-size:13.5px;cursor:pointer}
.e-fus .n{flex:1}
/* L'étape sélectionnée dans l'entonnoir (v11.1) : sans marque, on
ne sait pas pourquoi le tableau ne montre qu'une colonne. */
.r-ent .e.on{background:var(--surface-2);box-shadow:inset 0 -3px 0 var(--terra)}
.r-ent .e.on b{color:var(--terra-h)}
/* Une seule colonne quand le pipeline est filtré : elle ne doit pas
s'étirer sur toute la largeur. */
.r-kb:has(.r-kc:only-child){grid-template-columns:minmax(260px,420px)}
/* ═══════════════════════════════════════════════════════════════
CONVENTIONS COLLECTIVES — mode développeur (v11.2)
═══════════════════════════════════════════════════════════════ */
.ccn-kpi{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:16px}
@media(max-width:900px){.ccn-kpi{grid-template-columns:repeat(2,1fr)}}
.ccn-kpi .k{background:var(--carte);border:1px solid var(--ligne);border-radius:var(--r);
padding:12px 14px;box-shadow:var(--ombre)}
.ccn-kpi .k b{display:block;font-family:var(--f-titre);font-size:24px;font-weight:700;line-height:1.1;
font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ccn-kpi .k span{display:block;font-size:11.5px;color:var(--muet);margin-top:3px;line-height:1.35}
/* Le titre de secteur, à l'intérieur d'une carte : il sépare sans
faire une carte de plus. */
.ccn-sect{padding:11px 16px 7px;font-size:12px;font-weight:700;letter-spacing:.05em;
text-transform:uppercase;color:var(--muet);border-top:1px solid var(--ligne);
background:var(--surface-2);display:flex;align-items:center;gap:8px}
.ccn-sect span{font-weight:400;letter-spacing:0;text-transform:none;font-size:11.5px}
/* La tête d'une fiche de convention */
.ccn-tete{display:flex;gap:16px;align-items:flex-start;background:var(--carte);
border:1px solid var(--ligne);border-radius:var(--r);padding:16px 18px;margin-bottom:16px;
box-shadow:var(--ombre);flex-wrap:wrap}
.ccn-tete .i{font-family:var(--f-titre);font-size:22px;font-weight:700;background:var(--encre);
color:var(--fond);border-radius:11px;padding:8px 13px;letter-spacing:-.02em;flex:none}
.ccn-tete .n{flex:1;min-width:220px}
.ccn-tete .n h2{font-family:var(--f-titre);font-size:20px;margin:0 0 3px;letter-spacing:-.015em;
line-height:1.2}
.ccn-tete .n .m{font-size:12.5px;color:var(--muet);line-height:1.5}
.ccn-tete .a{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* La barre d'action qui encadre les paramètres, en haut et en bas :
quarante-neuf lignes, on ne remonte pas chercher le bouton. */
.ccn-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--carte);
border:1px solid var(--ligne);border-radius:var(--r);padding:11px 15px;margin-bottom:14px;
box-shadow:var(--ombre)}
.ccn-bar .l{flex:1;min-width:200px;font-size:12.5px;color:var(--encre-2);line-height:1.45}
/* Le tableau des paramètres : une ligne saisie se distingue d'une
ligne laissée au code du travail. */
.ccn-p td{vertical-align:top}
.ccn-p tr.saisi{background:var(--surface-2)}
.ccn-p tr.saisi td:first-child{box-shadow:inset 3px 0 0 var(--terra)}
.ccn-p .fi{margin:0}
.ccn-mod{border-color:var(--terra) !important;background:var(--terra-pale) !important;font-weight:600}
.ccn-plus{color:var(--terra-h) !important}
/* Les colonnes attendues par un import */
.ccn-cols{display:flex;flex-wrap:wrap;gap:6px}
.ccn-cols span{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;background:var(--surface-2);
border:1px solid var(--ligne);border-radius:6px;padding:3px 9px;color:var(--encre-2)}
.ccn-cols span.req{background:var(--terra-pale);border-color:var(--terra);color:var(--terra-h);
font-weight:700}
/* La ligne de secteur, à l'intérieur du tableau : elle découpe sans
répéter l'en-tête dix fois. */
.ccn-sectr td{background:var(--surface-2);font-size:11.5px;font-weight:700;letter-spacing:.05em;
text-transform:uppercase;color:var(--muet);padding:9px 12px !important;
border-top:1px solid var(--ligne)}
.ccn-sectr td span{font-weight:400;letter-spacing:0;text-transform:none;opacity:.75}
/* ═══════════════════════════════════════════════════════════════
LA SYNTHÈSE D'UNE CONVENTION (v11.3)
Quatre écrans nouveaux : identité, barèmes, texte, publications.
Tout est préfixé « ccn- » : app.css contient des sélecteurs nus
(.bl, .art…) qu'une classe générique heurterait sans prévenir.
═══════════════════════════════════════════════════════════════ */
/* Une modale large : l'identité juridique a des champs de texte
long, et 480 px les rendent illisibles. */
.modal-box.lg{width:min(760px,94vw)}
/* Les codes NAF du champ d'application. */
.ccn-naf{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.ccn-naf span{font-family:ui-monospace,Menlo,monospace;font-size:12px;background:var(--surface-2);
border:1px solid var(--ligne);border-radius:6px;padding:3px 8px;color:var(--encre-2)}
/* Ce qui est EXCLU du champ se lit autrement que ce qui l'inclut :
c'est souvent la partie qui tranche. */
.ccn-exclu{border-left:2px solid var(--ligne);padding-left:11px}
/* Le sélecteur de barème : onze pastilles, celles qui sont vides
en retrait — l'état du travail se voit sans cliquer. */
.ccn-btabs{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:7px;
margin-bottom:14px}
.ccn-btabs a{display:block;background:var(--carte);border:1px solid var(--ligne);
border-radius:10px;padding:9px 12px;text-decoration:none;color:var(--encre);
transition:border-color .12s,background .12s}
.ccn-btabs a:hover{border-color:var(--terra)}
.ccn-btabs a b{display:block;font-size:13px;font-weight:600;line-height:1.3}
.ccn-btabs a span{display:block;font-size:11px;color:var(--muet);margin-top:2px}
.ccn-btabs a.vide{background:transparent;border-style:dashed}
.ccn-btabs a.vide b{color:var(--muet);font-weight:500}
.ccn-btabs a.on{background:var(--encre);border-color:var(--encre)}
.ccn-btabs a.on b,.ccn-btabs a.on span{color:#fff}
.ccn-btabs a.on span{opacity:.7}
/* Les articles rédigés, numérotés comme au dictionnaire. */
.ccn-txt .art{padding:12px 0;border-bottom:1px solid var(--surface-2)}
.ccn-txt .art:first-child{padding-top:0}
.ccn-txt .art:last-child{border-bottom:0;padding-bottom:0}
.ccn-txt .art.vise{background:var(--terra-pale);border-radius:10px;padding:12px 14px;
box-shadow:inset 3px 0 0 var(--terra)}
.ccn-txt .art .h{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.ccn-txt .art .h .n{font-family:var(--f-titre);font-size:14px;font-weight:700;color:var(--terra);
min-width:22px;font-variant-numeric:tabular-nums}
.ccn-txt .art .h b{font-size:14.5px;font-weight:600}
.ccn-txt .art .c{font-size:13.5px;line-height:1.6;color:var(--encre-2);margin-top:5px;
padding-left:31px;max-width:76ch}
/* Une section standard non rédigée est cliquable : elle mène au
formulaire. Sans cette règle elle prendrait la couleur des liens
et cesserait de ressembler aux autres pastilles. */
a.r-mp{text-decoration:none;color:inherit}
/* Un texte qui n'est pas encore applicable ne se lit pas comme un
texte en vigueur. */
.ccn-futur td{opacity:.62}
.ccn-futur td:first-child,.ccn-futur td:nth-child(2){opacity:1}
/* ═══════════════════════════════════════════════════════════════
LES RÉGLAGES À QUATRE ÉTAGES (v11.4)
Préfixe « rg- » : app.css contient des sélecteurs nus qu'une
classe générique heurterait sans prévenir.
═══════════════════════════════════════════════════════════════ */
/* Un champ dont ce niveau a pris la main : le liseré dit d'un coup
d'œil ce qui a été décidé ici, sans lire la colonne « source ». */
.rg-mod{border-color:var(--terra) !important;background:var(--terra-pale) !important;font-weight:600}
.rg-t td{vertical-align:top}
.rg-t .fi{margin:0}
.rg-t tr.saisi{background:var(--surface-2)}
.rg-t tr.saisi td:first-child{box-shadow:inset 3px 0 0 var(--terra)}
/* Une valeur de parc devenue inopérante parce que le réglage est
passé au niveau entreprise. Ce n'est pas une erreur, mais il faut
que ça se voie : quelqu'un l'avait saisie et croit qu'elle
s'applique. */
.rg-alerte{color:var(--terra-h) !important;font-weight:600}
/* Les cases d'un réglage à choix multiples. Un
est inutilisable sur un téléphone, et personne ne devine qu'il
faut garder Ctrl enfoncé. */
.rg-multi{display:flex;flex-wrap:wrap;gap:5px 12px}
.rg-multi label{display:inline-flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;
color:var(--encre-2)}
.rg-multi input{accent-color:var(--terra);width:15px;height:15px;cursor:pointer}
/* ═══════════════════════════════════════════════════════════════
NOUVEAUTÉS ET VERROUS DANS LE MENU (v11.5)
Deux composants du kit, section 5.
═══════════════════════════════════════════════════════════════ */
/* ── L'étiquette de nouveauté ──
Elle s'éteint seule : pleine 15 jours, pâle jusqu'à 45, puis le
PHP ne la rend plus. Une étiquette « Nouveau » qui reste trois
ans ne signale plus rien — elle devient un élément de décor. */
.neuf{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.02em;
background:var(--terra-pale);color:var(--terra-h);padding:2px 8px;border-radius:20px;
display:inline-flex;align-items:center;gap:5px;flex:none}
.neuf::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--terra);
animation:neufpouls 2.4s ease-in-out infinite}
.neuf.gris{background:var(--surface-2);color:var(--muet)}
.neuf.gris::before{background:var(--ligne-2);animation:none}
@keyframes neufpouls{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
@media(prefers-reduced-motion:reduce){.neuf::before{animation:none}}
/* ── L'entrée verrouillée ──
On ne masque pas ce qu'on ne vend pas : le client ne découvrirait
jamais l'option. Elle reste à sa place, en gris, avec un cadenas
qui n'est ni rouge ni barré — ce n'est pas une interdiction,
c'est une invitation. */
.rfly a.verr{color:var(--muet)}
.rfly a.verr .fic{color:var(--ligne-2)}
.rfly a.verr:hover{background:var(--surface-2);color:var(--encre-2)}
.verr .cad,.cad{margin-left:auto;display:flex;align-items:center;flex:none}
.verr .cad .fic,.cad .fic{width:14px;height:14px;color:var(--muet)}
.rfly a.verr:hover .cad .fic{color:var(--terra)}
/* ═══════════════════════════════════════════════════════════════
ABSENCES ET CONGÉS (v11.5)
Préfixe « ab- ». Les composants génériques — cartes, pastilles,
interrupteurs, notes — viennent du kit sans être redéfinis.
═══════════════════════════════════════════════════════════════ */
.ab-head{display:grid;grid-template-columns:minmax(210px,1.5fr) 1.1fr 1.3fr 130px auto;gap:14px;
padding:9px 18px;border-bottom:1px solid var(--ligne);font-size:10px;font-weight:700;
letter-spacing:.07em;text-transform:uppercase;color:var(--muet);background:var(--surface-2)}
.ab-liste{display:flex;flex-direction:column}
.ab-l{display:grid;grid-template-columns:minmax(210px,1.5fr) 1.1fr 1.3fr 130px auto;gap:14px;
align-items:center;padding:13px 18px;border-bottom:1px solid var(--surface-2)}
.ab-l:last-child{border-bottom:0}
.ab-l:hover{background:var(--surface-2)}
/* La ligne entière ouvre la fiche : le curseur doit le dire avant
le clic, et « Modifier » se colore pour montrer où l'on va —
sinon la ligne cliquable est une surprise (v11.13). */
.cliq{cursor:pointer}
tr.cliq:hover{background:var(--surface-2)}
.cliq:hover .btn.ghost{border-color:var(--terra);color:var(--terra)}
/* Le temps de l'aller-retour, la ligne ne répond plus : sans cela
trois clics rapides envoient trois bascules qui se croisent. */
.ab-l.occupe{opacity:.55;pointer-events:none}
/* Un type désactivé reste lisible : on l'estompe sans l'effacer,
parce qu'on doit pouvoir le retrouver pour le réactiver. */
.ab-l.off{opacity:.5}
.ab-nom{display:flex;align-items:center;gap:11px;min-width:0}
.ab-chip{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;
justify-content:center;flex:none}
.ab-chip .ico{width:17px;height:17px}
.ab-nom b{font-size:14px;font-weight:600;display:block;line-height:1.3}
.ab-nom .c{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--muet)}
.ab-col{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--encre-2);min-width:0}
.ab-col .t{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muet)}
.ab-manque{color:var(--terra-h) !important;font-weight:600}
/* ═══ LE SÉLECTEUR D'ABSENCE ═══════════════════════ (v11.13)
Un ne montre qu'une chaîne. Ici on veut la pastille de
couleur, l'icône et la ligne qui dit ce que le type fait — sinon
la couleur réglée avec soin ne sert à rien à l'instant précis où
l'on choisit. Le champ natif reste dans le formulaire, caché par
.apk-off ; ce qui suit n'est que sa façade. */
.apk-off{display:none !important}
.apk{position:relative}
.apk-b{width:100%;display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer;
background:var(--carte);border:1px solid var(--ligne-2);border-radius:var(--r-sm);
padding:7px 10px;min-height:42px;color:var(--encre);font:inherit;transition:border-color .12s}
.apk-b:hover{border-color:var(--muet)}
.apk.on .apk-b{border-color:var(--terra);box-shadow:0 0 0 3px rgba(233,102,70,.13)}
.apk-v{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.apk-c{width:15px;height:15px;flex:none;color:var(--muet);transition:transform .15s}
.apk.on .apk-c{transform:rotate(180deg)}
.apk-ch{width:28px;height:28px;border-radius:9px;display:flex;align-items:center;
justify-content:center;flex:none}
.apk-ch .ico{width:15px;height:15px}
.apk-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.apk-t b{font-size:13.5px;font-weight:600;line-height:1.25;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap}
.apk-t i{font-style:normal;font-size:11px;color:var(--muet);line-height:1.3;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.apk-p{position:absolute;z-index:70;left:0;right:0;top:calc(100% + 6px);background:var(--carte);
border:1px solid var(--ligne);border-radius:var(--r);box-shadow:var(--ombre-2);overflow:hidden}
.apk-s{padding:9px 10px;border-bottom:1px solid var(--ligne);background:var(--surface-2)}
.apk-q{width:100%;border:1px solid var(--ligne-2);border-radius:8px;padding:6px 9px;
font:inherit;font-size:12.5px;background:var(--carte);color:var(--encre)}
.apk-q:focus{outline:none;border-color:var(--terra)}
.apk-l{max-height:326px;overflow-y:auto;padding:5px}
.apk-g{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
color:var(--muet);padding:9px 9px 5px}
.apk-o{width:100%;display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer;
background:none;border:0;border-radius:9px;padding:7px 9px;color:var(--encre);font:inherit}
.apk-o:hover{background:var(--surface-2)}
.apk-o.on{background:var(--surface-2)}
.apk-k{width:15px;height:15px;flex:none;color:var(--terra);opacity:0;margin-left:auto}
.apk-o.on .apk-k{opacity:1}
.apk-n{padding:16px;text-align:center;font-size:12.5px;color:var(--muet)}
/* Dans un tiroir ou une fenêtre modale, le panneau tomberait sous le
pied : le JS mesure la place et le retourne au-dessus du bouton
quand il n'y en a pas assez dessous. */
.apk-p.haut{top:auto;bottom:calc(100% + 6px)}
/* ── L'ÉTOILE DES FAVORIS ── (v11.12)
Elle ne retire rien : elle range. Un type favori remonte en tête
du menu de saisie du planning, devant les trente autres. D'où un
bouton discret — creux tant qu'il est éteint, plein en ambre une
fois posé — plutôt qu'un second interrupteur qui se confondrait
avec celui de l'activation, juste à côté. */
.ab-fav{width:30px;height:30px;border-radius:9px;border:1px solid transparent;background:none;
display:inline-flex;align-items:center;justify-content:center;flex:none;padding:0;
color:var(--muet);cursor:pointer;transition:color .12s,background .12s,border-color .12s}
.ab-fav .ico{width:17px;height:17px}
.ab-fav:hover{background:var(--surface-2);border-color:var(--ligne);color:var(--encre-2)}
.ab-fav.on{color:#D9A021}
.ab-fav.on .ico{fill:currentColor}
.ab-fav.on:hover{background:rgba(217,160,33,.10);border-color:rgba(217,160,33,.30);color:#D9A021}
/* Sur un type éteint, l'étoile n'a pas d'objet : on la laisse en
place pour que la colonne garde la même forme, mais inerte. */
.ab-fav.vide{opacity:.28;cursor:default}
/* La mention d'héritage : une valeur d'entreprise se signale, sinon
on croit régler son parc. */
.ab-herit{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muet)}
.ab-herit i{width:6px;height:6px;border-radius:50%;background:var(--vert);flex:none}
/* Le calcul d'exemple : montrer vaut mieux qu'expliquer. */
.ab-calc{border:1px solid var(--ligne);border-radius:10px;overflow:hidden;margin-top:12px}
.ab-calc>div{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;
border-bottom:1px solid var(--surface-2);font-size:13.5px}
.ab-calc>div:last-child{border-bottom:0}
.ab-calc .tot{background:var(--surface-2)}
/* Les jours fériés : trois états, un segment par jour. */
.ab-fer{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:9px}
.ab-fer .fer{border:1px solid var(--ligne);border-radius:10px;padding:10px 12px;background:var(--carte)}
.ab-fer .fer.cle{border-color:var(--terra)}
.ab-fer .fer.local{border-style:dashed}
.ab-fer .fer>b{font-size:13.5px;font-weight:600;display:block;margin-bottom:6px}
.ab-fer .seg{display:flex;gap:2px;background:var(--surface-2);border-radius:8px;padding:3px}
.ab-fer .seg label{flex:1;cursor:pointer}
.ab-fer .seg input{position:absolute;opacity:0;pointer-events:none}
.ab-fer .seg label span{display:block;text-align:center;font-size:11.5px;font-weight:600;
color:var(--encre-2);padding:5px 4px;border-radius:6px}
.ab-fer .seg label.on span{background:var(--carte);box-shadow:var(--ombre)}
.ab-fer .seg label.on.chome span{color:var(--vert)}
.ab-fer .seg label.on.trav span{color:var(--terra-h)}
.ab-fer .seg input:focus-visible + span{outline:2px solid var(--terra);outline-offset:1px}
.ab-fer .loc{display:block;font-size:10.5px;color:var(--muet);margin-top:6px;line-height:1.4}
/* La palette de couleurs d'un type. */
/* ── Le tiroir latéral ──
Préféré à une modale : on modifie un type en gardant la liste
sous les yeux, et le formulaire peut être long sans étouffer. */
@media(max-width:820px){
.ab-l,.ab-head{grid-template-columns:1fr;gap:8px}
.ab-head{display:none}
}
/* Fond hachuré des démonstrations du kit : il dit « ceci est un
composant montré hors contexte », et non un élément de la page. */
.kitdemo{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start;padding:14px;
background:repeating-linear-gradient(45deg,var(--surface-2),var(--surface-2) 9px,
transparent 9px,transparent 18px);
border:1px solid var(--ligne);border-radius:11px}
/* Le panneau volant montré dans le kit n'est pas fixe : il vit dans
le flux de la page. Il faut aussi défaire ce qui le CACHE — il
n'apparaît normalement qu'au survol du rail, par opacité et
visibilité. Sans ces trois lignes, le kit affichait trois cadres
hachurés parfaitement vides. */
.kitdemo .rfly{position:static !important;box-shadow:var(--ombre);
opacity:1;visibility:visible;transform:none;pointer-events:auto}
/* ── Le calendrier des jours fériés ── (v11.6)
Six traitements, la vraie date, et le jour de la semaine : un
férié qui tombe un dimanche ne se règle pas comme un férié en
pleine semaine de juillet. */
.fer-an{display:inline-flex;align-items:center;gap:8px}
.fer-an b{font-family:var(--f-titre);font-size:15px;min-width:44px;text-align:center}
.fer-t td{vertical-align:top}
.fer-t .fi.sm{margin:0}
.fer-t tr.fer-off td{opacity:.5}
.fer-t tr.fer-off .fi{opacity:1}
.fer-aide{max-width:34ch;line-height:1.45}
/* ── Le cadre légal d'un type d'absence ── (v11.11)
En lecture seule : ces valeurs viennent du socle et ne se
négocient pas dans la fiche de l'établissement. La présentation
dit « information » et non « formulaire » — pas de bordure de
champ, pas de fond blanc. */
.ab-legal{display:flex;flex-direction:column;gap:1px;background:var(--ligne);
border:1px solid var(--ligne);border-radius:11px;overflow:hidden;margin-bottom:4px}
.ab-lg{background:var(--surface-2);padding:9px 13px;display:grid;
grid-template-columns:1fr auto;gap:2px 12px;align-items:baseline}
.ab-lg .t{font-size:12.5px;font-weight:600;color:var(--encre)}
.ab-lg .v{font-family:ui-monospace,monospace;font-size:12.5px;font-weight:700;color:var(--terra-h);
text-align:right;white-space:nowrap}
.ab-lg .a{grid-column:1/-1;font-size:11.5px;color:var(--muet);line-height:1.45}
.ab-verrou{color:var(--jaune);display:flex;align-items:flex-start;gap:5px;line-height:1.45}
/* Le tableau des sous-motifs vit dans un tiroir de 580 px : sans
largeur fixée, « Décès d'un enfant de moins de 25 ans » poussait
la colonne des durées HORS du tiroir — la seule colonne qu'on
vient y lire (v11.12). */
.ab-sm{width:100%;min-width:0;table-layout:fixed}
.ab-sm td{font-size:12.5px;white-space:normal;word-break:break-word}
.ab-sm td b{font-family:ui-monospace,monospace;color:var(--terra-h)}
.ab-sm th:last-child,.ab-sm td:last-child{text-align:right;white-space:nowrap}
/* ═══════════════════════════════════════════════════════════════
LE CONTRAT (v11.16)
═══════════════════════════════════════════════════════════════ */
/* ── LE CHAMP VERROUILLÉ ──
Un contrat commencé et déclaré ne se réécrit pas : la durée, la
rémunération, la qualification, le terme sont des CLAUSES, et il
faut un avenant. Le dire dans un texte ne suffit pas — on
l'essaie quand même, on se heurte à un refus, on s'énerve. Le
verrou doit se voir AVANT le geste : champ grisé, libellé grisé,
cadenas à côté du libellé. Ce n'est pas un composant de plus,
c'est un « .fi » avec « disabled » et trois lignes de dessin. */
.fl.off{color:var(--muet)}
.fi.verr{background:var(--surface-2);color:var(--muet);border-color:var(--ligne)}
.fi.verr:focus{border-color:var(--ligne);box-shadow:none}
.cadn{color:var(--muet);display:inline-flex;vertical-align:-1px}
.cadn .ico{width:11px;height:11px}
/* Ce qui part au registre unique du personnel (R1221-26) : le dire
explique pourquoi c'est verrouillé. */
.rup{font-size:10px;font-weight:700;letter-spacing:.05em;background:var(--surface-2);
border:1px solid var(--ligne);border-radius:5px;padding:1px 5px;color:var(--muet);
vertical-align:1px;font-family:var(--f-ui)}
/* ── LA RÉPARTITION HEBDOMADAIRE ──
Obligatoire au contrat d'un temps partiel (L3123-6). Sept cases,
jamais un champ libre : c'est la seule forme qui interdit
d'écrire « du lundi au vendredi » et de croire que c'est écrit. */
.repj{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:10px}
/* CORRECTIF v11.16.3 — « .rj input » masquait AUSSI le champ de
durée niché dans la case : il héritait de position:absolute et
d'opacity 0, donc la tuile n'avait plus de surface cliquable et
la case ne se cochait pas. On ne masque que la case elle-même. */
.rj{cursor:pointer;position:relative}
.rj>input[type=checkbox]{position:absolute;opacity:0;inset:0;width:100%;height:100%;
margin:0;cursor:pointer;z-index:1}
.rj span{display:flex;flex-direction:column;align-items:center;gap:2px;border:1px solid var(--ligne-2);
border-radius:9px;padding:7px 2px;font-size:11px;color:var(--muet);background:#fff}
.rj span b{font-size:12px;font-weight:700;color:var(--encre-2)}
.rj input:checked+span{border-color:var(--terra);background:var(--terra-pale);color:var(--terra-h)}
.rj input:checked+span b{color:var(--terra-h)}
/* ── AVANT → APRÈS ──
Dans le tiroir d'avenant : l'ancienne valeur à côté de la
nouvelle, au moment où on la remplace. Elle était déjà stockée,
mais montrée seulement dans l'historique — c'est-à-dire trop
tard pour éviter la faute de frappe. */
.avv{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:"k k k" "o f n";
gap:5px 10px;align-items:center;padding:9px 0}
.avv+.avv{border-top:1px solid var(--ligne)}
/* Même intitulé que .champ .ck : 10,5 px, 700, majuscules, gris. */
.avk{grid-area:k;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:var(--muet)}
.avo{grid-area:o;font-size:13px;color:var(--muet);text-decoration:line-through}
.avfl{grid-area:f;color:var(--muet);display:flex}
.avfl .ico{width:15px;height:15px;transform:rotate(-90deg)}
.avn{grid-area:n}
.avn .fi{width:100%}
/* ═══ LA FRISE DU CONTRAT ═══ (v11.16)
Le seul dessin vraiment nouveau du lot : le kit n'avait rien pour
raconter une durée. Une liste d'avenants dit CE QUI a changé ;
elle ne dit pas QUAND, ni combien de temps, ni où l'on en est.
Trois couches. Le RAIL porte la durée du travail à chaque
instant — essai hachuré, régime normal en terracotta, période
temporaire en violet. Les JALONS se répartissent au-dessus et
au-dessous : sur sept mois de contrat, une fin d'essai et un
avenant peuvent tomber à quinze jours l'un de l'autre, et deux
étiquettes centrées se recouvriraient. Le CURSEUR dit
aujourd'hui.
Les jalons des extrémités se calent sur le bord au lieu d'être
centrés : « Début » centré sur 0 % dépasse de la carte. */
.frz{position:relative;padding:2px 0}
.frjh,.frjb{position:relative;height:40px}
.frj{position:absolute;text-align:center;white-space:nowrap}
/* Même paire que .docrow : un titre en 12,5/600 et sa précision en
11 px gris. On ne crée pas d'échelle pour la frise. */
.frj b{display:block;font-size:12.5px;font-weight:600;color:var(--encre);line-height:1.25}
.frj i{display:block;font-style:normal;font-size:11px;color:var(--muet)}
.frjh .frj{bottom:10px}
.frjb .frj{top:10px}
.frj::after{content:'';position:absolute;left:50%;width:1px;height:10px;background:var(--ligne-2)}
.frjh .frj::after{top:100%}
.frjb .frj::after{bottom:100%}
.frj.bord0::after{left:6px}
.frj.bord1::after{left:auto;right:6px}
.frj.jav b,.frj.jtmp b{color:var(--violet)}
.frj.jfin b{color:var(--terra-h)}
/* La pastille d'aujourd'hui reprend exactement .pill : 10 px,
700, majuscules, arrondi 20. */
.frj.jauj b{background:var(--encre);color:#fff;border-radius:20px;padding:2px 9px;font-size:10px;
font-weight:700;letter-spacing:.04em;text-transform:uppercase;display:inline-block}
/* Sa propre voie, juste sous le rail : dans la rangée des jalons
elle recouvrait son voisin le jour où le contrat commence
(v11.20.3). Le trait vient du rail au-dessus, elle n'en dessine
donc pas un second. */
.frauj{position:relative;height:22px}
.frauj .frj{top:4px}
.frj.jauj::after{display:none}
.frr{position:relative;height:26px;border-radius:8px;background:var(--surface-2);overflow:hidden}
.frs{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;
font-size:11px;font-weight:700;color:#fff;overflow:hidden}
.frs span{padding:0 4px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.frs.essai{background:repeating-linear-gradient(135deg,#D9C08A,#D9C08A 5px,#CFB27C 5px,#CFB27C 10px);
color:#4A3818}
.frs.base{background:var(--terra)}
.frs.temp{background:var(--violet)}
.frs.futur{background:var(--ligne-2)}
.frd{position:absolute;top:0;bottom:0;width:2px;background:rgba(255,255,255,.7);
transform:translateX(-1px)}
.fraj{position:absolute;top:40px;height:32px;width:2px;background:var(--encre);
transform:translateX(-1px);z-index:3;border-radius:2px}
/* Sans contrat : le trou entre deux saisons se voit, il ne se
devine pas. */
.frt{position:absolute;top:5px;bottom:5px;border:1px dashed var(--ligne-2);border-radius:7px;
display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--muet);
overflow:hidden}
@media(max-width:700px){.frj i{display:none}.frjh,.frjb{height:30px}.fraj{top:30px}}
/* ── LA PILE DE MESSAGES ──
Le toast était unique parce que « flash() » n'avait qu'une place.
Maintenant qu'il y a une file, ils s'empilent — le plus récent en
bas, contre le bord (v11.16). */
.toasts{position:fixed;bottom:20px;right:20px;z-index:80;display:flex;flex-direction:column;
gap:8px;align-items:flex-end;max-width:min(400px,92vw);pointer-events:none}
.toasts .toast{position:static;bottom:auto;right:auto;max-width:100%}
/* Trois tons, pas deux : « enregistré » n'est pas « échoué », et une
réserve — « ce CDD peut être requalifié en CDI » — n'est ni l'un
ni l'autre : elle n'annule rien, elle prévient (v11.16). */
.toast.wa{background:var(--jaune);color:#fff}
/* Un segment verrouillé doit se voir comme un champ verrouillé :
sinon on clique, rien ne bouge, et on croit à une panne (v11.16). */
.segf button:disabled,.demi input:disabled+span{opacity:.5;cursor:not-allowed}
/* La sortie : c'est le jalon qu'on vient lire quand un contrat s'est
arrêté avant son terme (v11.16). */
.frj.jsor b{color:var(--rouge)}
/* La durée de chaque jour, dans la répartition : un champ minuscule
sous le nom du jour, pas une ligne de plus (v11.16.2). */
/* La durée du jour reste au-dessus de la case, sinon on ne peut
plus la saisir : la case couvre toute la tuile. */
.rj .rjh{position:relative;z-index:2;width:100%;border:0;background:none;text-align:center;
font-size:12px;font-weight:700;color:var(--encre-2);font-family:var(--f-ui);padding:0;
opacity:1;-moz-appearance:textfield}
/* CORRECTIF v11.18 — le champ de durée couvre le tiers bas de la
tuile. Tant que le jour n'est pas coché il n'a rien à saisir, mais
il captait quand même le clic : la tuile ne répondait que sur sa
moitié haute. En passant la souris le long de la ligne, un jour se
cochait et pas son voisin — selon la hauteur exacte du curseur.
Désactivé, le champ ne reçoit plus rien : toute la tuile coche. */
.rj .rjh:disabled{color:var(--ligne-2);pointer-events:none}
.rj .rjh::-webkit-outer-spin-button,.rj .rjh::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.rj input:checked+span .rjh{color:var(--terra-h)}
.rj .rjh:focus{outline:none}
/* ══════════════════════════════════════════════════════════════
LA RÉMUNÉRATION ACCESSOIRE (v11.18)
Presque rien de neuf : la ligne de rémunération est une .docrow,
la même que les documents et les autres contrats — une icône, un
titre, sa règle en dessous. Trois ajouts seulement.
══════════════════════════════════════════════════════════════ */
/* Une ligne de catalogue désactivée : même règle que .ab-l.off, on
ne la répète pas, on la reprend. */
.docrow.off{opacity:.55}
/* ── LE TABLEAU DE RÉMUNÉRATION ── (v11.20)
C'est « .tA », celui de l'onglet Temps. Il lui manquait une ligne
de séparation de bloc et une pastille de couleur : rien d'autre.
La v11.18 posait ici une tuile d'icône de 36 px par ligne et un
montant sur deux chiffres. Les deux sont partis avec le calcul du
mois — la fiche porte ce qui est ACCORDÉ, la paie calcule ce qui
est VERSÉ. La tuile coûtait plus de hauteur qu'elle n'en faisait
gagner en lecture ; la pastille de 8 px dit la même chose. */
.tA tr.sect td{background:var(--surface-2);font-size:10.5px;font-weight:700;letter-spacing:.06em;
text-transform:uppercase;color:var(--terra);padding:7px 16px;
border-bottom:1px solid var(--ligne)}
.tA tr.sect td i{font-style:normal;text-transform:none;letter-spacing:0;font-weight:500;
color:var(--muet);margin-left:8px}
.tA tr.sect:hover td{background:var(--surface-2)}
.tA tr.tot td{font-weight:700;color:var(--encre);border-top:1px solid var(--ligne)}
.tA tr.tot td:first-child{text-align:right;font-weight:600;color:var(--muet);font-size:12px}
.pastille{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:9px;
vertical-align:1px;flex:none}
.trem{min-width:720px}
.trem td{padding:9px 16px}
.trem b.mo{color:var(--jaune)}
/* ══════════════════════════════════════════════════════════════
L'AVENANT COMME COUCHE DU CONTRAT (v11.21)
Les avenants vivaient dans une carte séparée. Un avenant n'existe
pas sans son contrat : le lire ailleurs oblige à faire le
rapprochement de tête. Ils entrent dans la carte, en tableau .tA,
et deux marques suffisent.
« .tav » a été essayé d'abord — et c'est DÉJÀ l'avatar rond de
28 px du kit, si bien que le tableau s'est affiché large de
28 pixels. Troisième collision après .av et .repj : le nom est
maintenant explicite, et le contrôle outillé.
══════════════════════════════════════════════════════════════ */
/* Le numéro de l'avenant. « L'avenant nº 2 » est ce que disent le
juriste, le comptable et le salarié ; sans numéro on désigne par
la date, et deux avenants du même mois se confondent. */
.avnum{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
border-radius:50%;background:var(--violet-pale);color:var(--violet);
font-size:12px;font-weight:700;flex:none}
/* La marque d'un champ dont la valeur vient d'un avenant. Le champ
porte la valeur d'AUJOURD'HUI ; la pastille dit qui l'a posée. */
.champ.av-mod .cv{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.avtag{font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
background:var(--violet);color:#fff;border-radius:20px;padding:2px 7px;white-space:nowrap}
.tavenants{min-width:700px}
.tavenants td{padding:11px 16px;vertical-align:top}
/* Le contrat d'origine ferme la liste : c'est le point de départ,
et la seule ligne qui ne se modifie pas. */
.tavenants tr.sect2 td{background:var(--surface-2);color:var(--muet)}
.tavenants tr.sect2 b{color:var(--encre-2)}
/* ══════════════════════════════════════════════════════════════
LE CLASSEUR DES DOCUMENTS (v11.23)
L'onglet Documents affichait une liste plate, filtrée par des
pastilles grises, avec le nom du dossier écrit en petit en bout
de ligne. Le rangement ne se voyait pas : il se lisait.
Le classeur en fait un OBJET. Chaque rayon est un carreau
vertical — icône en haut, nom en bas, du vide entre les deux —
et le rayon ouvert déroule ses pièces juste en dessous, sans
quitter la page.
Une tuile HORIZONTALE a été essayée d'abord : pastille, nom,
compteur et deux badges sur une seule ligne. Sept barres
empilées, c'est-à-dire la même liste qu'avant avec des coins
arrondis. C'est le vide qui rend l'icône lisible.
Trois variables portent la couleur du catalogue, comme partout
ailleurs : --cc le trait, --cb le bord, --cf le fond pâle.
══════════════════════════════════════════════════════════════ */
.clg{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:11px;padding:16px}
.clt{position:relative;display:flex;flex-direction:column;background:#fff;
border:1px solid var(--ligne);border-radius:12px;padding:15px 16px 14px;min-height:104px;
cursor:pointer;overflow:hidden;text-align:left;font-family:inherit;
transition:border-color .12s,box-shadow .12s,background .12s}
.clt:hover{border-color:var(--cc);box-shadow:0 1px 5px rgba(45,38,32,.09)}
.clt.on{border-color:var(--cc);background:var(--cf);box-shadow:inset 0 0 0 1px var(--cb)}
.clt:focus-visible{outline:2px solid var(--terra);outline-offset:2px}
/* Le bandeau : trois pixels en tête, comme une tranche de
classeur. C'est lui qui porte la couleur, ce qui laisse l'icône
en gris — donc lisible même quand deux rayons ont des icônes
proches. L'icône dit QUOI, la couleur dit LEQUEL. */
.clbd{position:absolute;top:0;left:0;right:0;height:3px;background:var(--cc)}
.clh{display:flex;align-items:flex-start;gap:6px;color:var(--muet);margin-bottom:auto}
.cln{font-size:13px;font-weight:600;color:var(--encre);line-height:1.3;margin-top:14px}
.clm{font-size:11px;color:var(--muet);margin-top:3px}
.clvide{opacity:.6}
/* « à compléter » : le seul état du carreau qui demande une action.
Il ne prend pas la couleur du rayon — un manque se lit pareil
partout, sinon on le cherche. */
.clman{color:var(--jaune);font-weight:600}
.clv{display:inline-flex;color:var(--vert);opacity:.85}
.clal{width:7px;height:7px;border-radius:50%;flex:none;margin-top:4px}
.clal.wa{background:var(--jaune)}
.clal.ko{background:var(--rouge)}
/* « Toutes les pièces » n'est pas un rayon : pas de bandeau, pas de
couleur de catalogue. Sans cette distinction on croit à un
huitième dossier — et on cherche à le modifier. */
.clt.cltous{background:var(--surface-2);border-style:dashed}
.clt.cltous .clh{color:var(--muet)}
.clt.cltous.on{background:var(--surface-2);border-style:solid}
/* Le rayon ouvert, juste sous la grille. Il reprend la couleur du
carreau : c'est ce qui fait le lien entre les deux sans flèche
ni animation. */
.clo{border-top:1px solid var(--ligne)}
.cloh{display:flex;align-items:center;gap:9px;padding:11px 18px;background:var(--cf);
border-bottom:1px solid var(--ligne);color:var(--cc);flex-wrap:wrap}
.cloh b{font-size:13px;color:var(--encre)}
.cloh .meta{color:var(--muet)}
/* La marque « ouvert au salarié / interne ». Elle sert au catalogue
comme à la fiche : la question se pose devant la pièce, donc la
réponse est devant la pièce. */
.dvis{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;font-weight:700;
letter-spacing:.03em;text-transform:uppercase;border-radius:20px;padding:3px 9px;
white-space:nowrap}
.dvis.oui{background:var(--vert-pale);color:var(--vert)}
.dvis.non{background:var(--surface-2);color:var(--muet)}
/* Les deux flèches d'ordre du catalogue : deux formulaires collés,
sans l'espacement que .docrow met entre ses enfants. */
.ordf{display:inline-flex;gap:2px}
.ordf form{display:inline}
.ordf .lk{padding:0 4px;font-size:14px;line-height:1}
.ordf .lk:disabled{opacity:.3;cursor:default}
/* ══════════════════════════════════════════════════════════════
L'ATTRIBUT « hidden » CACHE VRAIMENT (v11.23)
Le navigateur ne pose `display:none` sur [hidden] que dans SA
feuille de style, la moins prioritaire de toutes. Le moindre
`display:flex` d'auteur l'écrase — donc `el.hidden = true` ne
cachait rien sur .warnline, .clv, .docrow et tout ce qui est en
flex. Le symptôme est déroutant : le JS est juste, la propriété
passe bien à true, et l'élément reste à l'écran.
Le kit contournait le problème DIX fois, une par composant :
.valert[hidden], .histpop[hidden], .datepop[hidden],
.socform[hidden], .aboform[hidden], .bmodal[hidden],
.ptedit[hidden], .supmodal[hidden], .orgedit2[hidden],
.drop[hidden]. Dix rustines pour une règle. Elles restent — elles
ne gênent pas — mais on n'en écrira pas une onzième.
══════════════════════════════════════════════════════════════ */
[hidden]{display:none !important}
/* ══════════════════════════════════════════════════════════════
LE MATRICULE DE PAIE (v11.24)
Trois règles, pas un composant : le réglage réutilise .eopt et
.dwsect, la saisie réutilise .fg. Il ne manquait qu'un exemple
dans l'option, un cadre pour l'aperçu, et une ligne de formulaire.
══════════════════════════════════════════════════════════════ */
/* L'exemple collé au titre de l'option : « GNMN » en dit plus que
trois lignes d'explication, à condition d'être VU en même temps
que le titre. */
.eopt .t .matex{margin-left:8px;background:var(--surface-2);border-radius:4px;padding:1px 6px;
font-size:11px;font-family:ui-monospace,Menlo,monospace;color:var(--muet);font-weight:600}
/* ══════════════════════════════════════════════════════════════
LES MODÈLES DE DOCUMENTS (v11.25)
L'éditeur est Jodit (assets/jodit.fat.min.*) — on ne redessine
pas un moteur, on aligne ses bords sur le kit et on ajoute ce qui
est à nous : la pastille de variable, le bloc conditionnel, le
saut de page, l'en-tête logo.
Ces quatre-là vivent DANS le contenu du modèle : ils doivent donc
être stylés partout où ce contenu s'affiche — l'éditeur, et rien
d'autre (le document généré emporte ses propres styles dans sa
page autonome).
══════════════════════════════════════════════════════════════ */
/* La barre du modèle, au-dessus du moteur. */
.edtop{display:flex;align-items:center;gap:9px;flex-wrap:wrap;background:var(--carte);
border:1px solid var(--ligne);border-radius:var(--r);padding:9px 14px;margin-bottom:10px}
.edtop input.fi{max-width:330px;border:1px solid transparent;background:none;
font-size:14px;font-weight:600}
.edtop input.fi:hover,.edtop input.fi:focus{border-color:var(--ligne-2);background:#fff}
.edstat{font-size:11px;color:var(--muet)}
.mdlv{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
background:var(--surface-2);color:var(--muet);border-radius:20px;padding:3px 9px;
white-space:nowrap}
/* La grille : le moteur à gauche, les variables à droite. Le
panneau se replie — c'est un écran de travail, la place est au
document. */
.edwrap{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:10px;align-items:start}
.edwrap.replie{grid-template-columns:minmax(0,1fr) 34px}
@media(max-width:900px){.edwrap{grid-template-columns:1fr}.edside{display:none}}
.edmain{min-width:0}
.edside{background:var(--carte);border:1px solid var(--ligne);border-radius:var(--r);
padding:12px;max-height:calc(100vh - 150px);overflow-y:auto;position:sticky;top:12px}
.edwrap.replie .edside{padding:6px;overflow:hidden}
.edwrap.replie .edside>*{display:none}
.edwrap.replie .edside .edrepli{display:flex}
.edrepli{display:flex;align-items:center;justify-content:center;width:100%;border:none;
background:none;color:var(--muet);cursor:pointer;padding:4px;border-radius:6px;
font-family:var(--f-ui);font-size:11px;gap:5px}
.edrepli:hover{background:var(--surface-2);color:var(--encre)}
.edpanh{font-size:12.5px;font-weight:700;color:var(--encre);margin-bottom:10px}
.edsearch{display:flex;align-items:center;gap:7px;background:var(--surface-2);
border:1px solid var(--ligne-2);border-radius:9px;padding:6px 10px;margin-bottom:12px}
.edsearch input{border:none;outline:none;font-size:11.5px;flex:1;font-family:var(--f-ui);
background:none;color:var(--encre)}
.vgh{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;
letter-spacing:.07em;text-transform:uppercase;color:var(--muet);margin:12px 0 6px}
.vgrid{display:grid;grid-template-columns:1fr;gap:4px}
.vitem{display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--ligne);
border-radius:8px;padding:6px 10px;font-size:11.5px;color:var(--encre);cursor:pointer;
font-family:var(--f-ui);text-align:left}
.vitem .ico{opacity:.35;flex:none}
.vitem:hover{border-color:var(--violet);color:var(--violet)}
/* La pastille de variable — l'OBJET qui rend la fusion fiable. Un
{{nom}} tapé se coupe en trois ; une pastille, jamais. */
.vchip{display:inline-flex;align-items:center;gap:4px;background:var(--violet-pale);
color:var(--violet);border:1px solid #E3D2E0;border-radius:6px;padding:0 6px;
font-size:.86em;font-weight:600;white-space:nowrap;vertical-align:baseline;
line-height:1.7;cursor:default;user-select:all}
.vchip .ico{width:9px;height:9px;opacity:.65}
.vmiss{background:var(--rose-pale,#FDF2F3);color:var(--rouge);border:1px dashed var(--rouge);
border-radius:6px;padding:0 7px;font-size:.86em;font-weight:700;white-space:nowrap}
/* Le bloc conditionnel : la condition en FRANÇAIS dans l'en-tête,
choisie dans une liste fermée. Une syntaxe d'expressions serait
plus puissante — et personne ne l'écrirait juste. */
.edcond{border:1px solid #D8CBE0;border-left:3px solid var(--violet);border-radius:8px;
padding:0;margin:10px 0;background:#FBF8FB;overflow:hidden}
.edcondh{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--violet);
padding:7px 11px;border-bottom:1px dashed #E3D2E0}
.edcondh b{font-weight:600}
.edcondsel{font-size:11px;color:var(--violet);background:#fff;border:1px solid #E3D2E0;
border-radius:6px;padding:2px 6px;font-weight:600;font-family:inherit}
.edcondx{margin-left:auto;border:none;background:none;color:var(--muet);cursor:pointer;
font-size:14px;line-height:1;padding:2px 4px;border-radius:4px}
.edcondx:hover{background:#fff;color:var(--rouge)}
.edcondb{padding:9px 12px}
.edcondb p:last-child{margin-bottom:0}
/* Le saut de page — visible à l'édition, agissant à l'impression. */
.pgbrk{display:flex;align-items:center;gap:10px;margin:16px 0;user-select:none}
.pgbrk::before,.pgbrk::after{content:'';flex:1;border-top:2px dashed var(--ligne-2)}
.pgbrk span{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:var(--muet)}
/* L'en-tête logo : un clic le pose, un clic le retire. */
.edlogo{display:flex;align-items:center;font-size:11px;color:var(--muet);cursor:pointer;
border:1px dashed var(--ligne-2);border-radius:8px;padding:10px 13px;margin-bottom:18px}
.edlogo .avec{display:none;font-size:14px;color:var(--encre);letter-spacing:.05em}
.edlogo.avec{border-style:solid;background:var(--surface-2)}
.edlogo.avec .sans{display:none}
.edlogo.avec .avec{display:block}
/* Jodit, aligné sur le kit : bords, fonds, et la mise en page d'un
contrat dans la zone d'écriture. */
.jodit-container:not(.jodit_inline){border:1px solid var(--ligne);border-radius:var(--r);
background:var(--carte)}
.jodit-toolbar__box:not(:empty){background:var(--surface-2);
border-radius:var(--r) var(--r) 0 0}
.jodit-wysiwyg{padding:34px clamp(24px,6vw,72px) 60px!important;font-family:var(--f-ui);
font-size:13.5px;line-height:1.9;color:var(--encre)}
.jodit-wysiwyg h1{font-family:var(--f-tit);font-size:23px;margin:4px 0 14px}
.jodit-wysiwyg h2{font-family:var(--f-tit);font-size:15.5px;margin:20px 0 6px}
.jodit-wysiwyg h3{font-size:13.5px;font-weight:700;margin:14px 0 4px}
.jodit-wysiwyg p{margin:0 0 9px}
.jodit-wysiwyg table td,.jodit-wysiwyg table th{border:1px solid var(--ligne-2);
padding:7px 10px;vertical-align:top;text-align:left}
.jodit-wysiwyg table th{background:var(--surface-2)}
.jodit-wysiwyg table.edsign td{border:none;padding:18px 10px 34px;width:50%}
.jodit-status-bar a.jodit-status-bar-link{display:none}
/* Le choix d'un salarié dans le tiroir aperçu / générer. */
.mdlpick{display:flex;align-items:center;gap:12px;width:100%;background:#fff;
border:1px solid var(--ligne);border-radius:11px;padding:10px 13px;cursor:pointer;
font-family:var(--f-ui);margin-bottom:7px}
.mdlpick:hover{border-color:var(--terra)}
.mdlpick .gav{width:34px;height:34px;border-radius:50%;background:var(--terra);color:#fff;
display:inline-flex;align-items:center;justify-content:center;font-weight:700;
font-size:12px;flex:none}
.mdlpick b{display:block;font-size:12.5px;color:var(--encre)}
.mdlpick i{display:block;font-size:10.5px;font-style:normal;color:var(--muet);margin-top:1px}
/* ═══ v11.27 · MODÈLE WORD À VARIABLES ═══
La photographie du contenu d'un modèle Word natif : une feuille
blanche, à l'échelle réduite, défilable. Ce n'est PAS un éditeur —
c'est un aperçu figé, pris à l'import. */
.wpage{background:#fff;border:1px solid var(--ligne);border-radius:8px;
padding:26px 30px;max-height:62vh;overflow:auto;font-family:Georgia,'Times New Roman',serif;
font-size:12.5px;line-height:1.55;color:#1A1A1A}
.wpage h1{font-size:19px;margin:0 0 12px}
.wpage h2{font-size:15px;margin:16px 0 6px}
.wpage h3{font-size:13px;margin:12px 0 4px}
.wpage table{border-collapse:collapse;margin:8px 0;max-width:100%}
.wpage table td,.wpage table th{border:1px solid #C9C2B4;padding:5px 8px;vertical-align:top;
text-align:left}
.wpage img{max-width:100%;height:auto}
/* ═══ v11.28 · LE PANNEAU DES VARIABLES À COPIER ═══
Le pendant Word de la pastille-objet : ici on ne peut pas insérer
un nœud dans un fichier qu'on n'ouvre pas — alors on donne le
marqueur exact, au presse-papier, en un clic. */
.vcpan h4{font-family:var(--f-tit);font-size:16px;color:var(--encre);margin:18px 0 9px}
.vcpan h4:first-of-type{margin-top:14px}
.vgrid2{display:flex;flex-wrap:wrap;gap:7px}
.vcopy{display:inline-flex;align-items:center;gap:7px;background:var(--surface-2);
border:1px solid transparent;border-radius:20px;padding:7px 13px;font-size:12px;
color:var(--encre);cursor:pointer;font-family:var(--f-ui);text-align:left;
transition:background .12s,color .12s}
.vcopy .ico{opacity:.4;flex:none}
.vcopy:hover{background:var(--violet-pale);color:var(--violet)}
.vcopy:hover .ico{opacity:.7}
.vcpret{background:var(--vert-pale);border-radius:var(--r);padding:16px 18px;margin-top:22px}
.vcpret h4{margin:0 0 12px}
/* ═══ v11.28 · L'ÉDITEUR EN PAGES A4 ═══
Le moteur ne sait rien du format : c'est le CSS qui fait de sa
zone éditable une feuille A4 posée sur un fond gris, avec un
repère tous les 29,7 cm. L'en-tête et le pied sont NOS zones,
déplacées par le script de part et d'autre de la feuille — à
l'écran on lit une page, à l'impression ils se répètent. */
/* Jodit pose « .jodit-container .jodit-workplace .jodit-wysiwyg
{height:100%;width:100%} » — trois classes. Il en faut donc quatre
pour reprendre la main sur la largeur, sinon la feuille s'etale et
le format A4 n'existe pas. Pas de !important : de la specificite
honnete. */
.edmain .jodit-workplace{background:var(--surface-2);padding:18px 0;overflow:auto}
.edmain .jodit-container .jodit-workplace .jodit-wysiwyg{
width:21cm;max-width:100%;height:auto;min-height:29.7cm;margin:0 auto;
box-sizing:border-box;padding:1.4cm 2cm;background:#fff;
background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 29.6cm,
var(--ligne-2) 29.6cm,var(--ligne-2) 29.7cm);
background-origin:border-box;
box-shadow:0 1px 4px rgba(45,38,32,.10);border-radius:2px}
.edmain .jodit-container{border-color:var(--ligne)}
/* Les deux bandes. Même largeur que la feuille, collées à elle. */
.edhf{background:var(--surface-2);padding:18px 0 0}
.edhf.bas{padding:0 0 4px}
.edhfin{width:21cm;max-width:100%;margin:0 auto}
.edhfl{display:flex;align-items:center;gap:6px;font-size:9.5px;font-weight:700;
letter-spacing:.07em;text-transform:uppercase;color:var(--muet);padding:0 2px 5px}
.edhf.bas .edhfl{padding:5px 2px 0}
.edhfl span{font-weight:500;letter-spacing:0;text-transform:none;font-size:10px;opacity:.8}
.edhftb{display:flex;gap:2px;margin-left:auto}
.edhftb button{border:1px solid var(--ligne);background:#fff;border-radius:6px;
width:23px;height:22px;font-size:11px;line-height:1;cursor:pointer;color:var(--encre);
font-family:var(--f-ui);display:inline-flex;align-items:center;justify-content:center;
padding:0}
.edhftb button:last-child{width:auto;padding:0 8px;font-size:10px}
.edhftb button:hover{border-color:var(--terra);color:var(--terra)}
.edhfc{background:#fff;border:1px dashed var(--ligne-2);box-sizing:border-box;
padding:.55cm 2cm;min-height:1.5cm;font-size:11.5px;line-height:1.6;color:var(--encre);
outline:none;box-shadow:0 1px 4px rgba(45,38,32,.06)}
.edhfc:focus{border-style:solid;border-color:var(--terra)}
.edhfc p{margin:0}
.edhfc img{max-height:44px;width:auto;vertical-align:middle}
.edhfc:empty::before{content:'Cliquez pour écrire l’en-tête — logo, dénomination, adresse…';
color:var(--muet);font-size:11px}
.edhf.bas .edhfc:empty::before{content:'Cliquez pour écrire le pied de page — mentions, page…'}
/* ═══ v11.28.2 · LE CHOIX DU FICHIER À L'IMPORT ═══
Le champ de fichier nu dit « Choose File / No file chosen » — en
anglais, dans une police qui n'est pas la nôtre. On le cache
derrière un bouton, et on affiche le nom choisi à côté. */
.impfile{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.impfn{font-size:12px;color:var(--muet);min-width:0;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap}
/* Un tiroir qui s'ouvre PAR-DESSUS un autre : le panneau des
variables est appelé depuis le tiroir d'import, dont le voile
mangeait les clics (v11.28.2). */
.dwr.dwrhaut{z-index:200}
/* Le relevé de schéma, replié : zéro poids visuel tant qu'on ne
clique pas, et il ne s'affiche que quand la base est en retard. */
.schdiag{margin-top:10px;font-size:12px}
.schdiag summary{cursor:pointer;font-weight:600}
.schdiag>div{margin-top:7px;line-height:1.6}
/* ═══ v11.31 · LES DOSSIERS DE RANGEMENT DES MODÈLES ═══
Une colonne de filtres, pas une arborescence : ranger ses modèles
ne doit pas demander plus d'attention que les modèles eux-mêmes. */
.rangl{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:9px;
font-size:12.5px;color:var(--encre);text-decoration:none;margin-bottom:2px}
.rangl:hover{background:var(--surface-2)}
.rangl.on{background:var(--terra-pale,var(--surface-2));color:var(--terra);font-weight:600}
.rangl span{margin-left:auto;font-size:11px;color:var(--muet);font-weight:500}
.rangl.on span{color:var(--terra)}
.rangl button{border:none;background:none;padding:2px;cursor:pointer;color:var(--muet);
display:none;line-height:0}
.rangl:hover button{display:inline-flex}
.rangl button:hover{color:var(--terra)}
/* ═══ v11.33 · LE RAIL DES VARIABLES ═══
Le panneau de droite de l'onglet Modèles. Il ne s'ouvre pas, il est
LÀ : on rédige son Word à côté, on pioche, on colle. Il se colle en
haut et défile pour son compte — la liste des modèles peut être
longue sans emporter le rail hors de l'écran.
Le survol montre la VALEUR au lieu du libellé, pour les variables
qui en ont une sans salarié (établissement, compte, global) : on ne
promet pas « Nom de l'établissement », on montre « Expéria Parc ». */
.modrail{position:sticky;top:14px;max-height:calc(100vh - 28px);overflow:auto}
.modrail .fsec{padding-top:10px}
.vcopy .vsim{display:none;font-weight:600}
.vcopy.vsimok:hover .l{display:none}
.vcopy.vsimok:hover .vsim{display:inline}
/* ═══ v11.33 · LE DÉPÔT PAR GLISSER/DÉPOSER ═══
Un champ de fichier nu dit « Choose File » en anglais. La zone dit
ce qu'on peut y faire, et prend le fichier des deux façons. */
.dzon{border:1.5px dashed var(--ligne);border-radius:var(--r);background:var(--surface-2);
padding:22px 18px;text-align:center;cursor:pointer;color:var(--muet);font-size:12.5px;
transition:border-color .12s,background .12s,color .12s}
.dzon:hover{border-color:var(--terra);color:var(--encre)}
.dzon .ico{width:22px;height:22px;opacity:.45;margin-bottom:7px}
.dzon b{display:block;color:var(--encre);font-size:13px;margin-bottom:3px}
.dzon.dzok{border-color:var(--vert);border-style:solid;background:var(--vert-pale);
color:var(--vert)}
.dzon.dzok .ico{opacity:.8}
/* Le fichier survole la zone : elle le dit avant qu'on lâche, sinon
on ne sait pas si l'on vise juste. (v14.31) */
.dzon.dzsur{border-color:var(--terra);border-style:solid;background:var(--terra-pale);
color:var(--encre)}
/* ═══ v11.34 · LE SWITCH DANS LA LIGNE ═══
Ouvrir un dossier au salarié est le réglage qu'on change le plus
souvent : il se pose dans la LISTE, pas au fond d'un tiroir. La
ligne entière est cliquable — le formulaire arrête la propagation,
sinon basculer le switch ouvrirait le tiroir en même temps. */
.dvsw{flex:none;margin:0}
.dvsw .sw{gap:7px}
.dvsw .swl{font-size:11.5px;font-weight:600}
/* ═══ v11.35 · LES CONDITIONS DANS LE RAIL ═══
Distinguées des variables par la couleur, parce qu'elles ne se
collent pas au même endroit : une variable se pose au milieu d'une
phrase, une condition encadre des paragraphes. Le clic copie le
squelette entier — ouverture, sinon, fermeture. */
.vcopy.vcond{background:var(--jaune-pale)}
.vcopy.vcond:hover{background:var(--jaune);color:#fff}
.vcopy.vcond:hover .ico{opacity:.9}
/* ═══ v11.36 · LA SYNTAXE, LÀ OÙ ELLE SE TAPE ═══
Une liste de noms n'apprend pas une syntaxe. Le rail montre donc
le squelette tel qu'il se tape, avec un vrai exemple — au-dessus
des pastilles, parce qu'on lit avant de cliquer. */
.vaide{background:var(--surface-2);border-radius:var(--r);padding:12px 14px;
margin:6px 0 12px;font-size:11.5px;line-height:1.55;color:var(--muet)}
.vaide p{margin:0 0 8px}
.vaide p:last-child{margin-bottom:0}
.vaide b{color:var(--encre)}
.vaide code{font-size:11px}
.vaide p.ko{color:var(--rouge)}
.vaide p.ko b{color:var(--rouge)}
.vsq{background:#fff;border:1px solid var(--ligne);border-radius:8px;
padding:9px 11px;margin:0 0 9px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size:11px;line-height:1.6;color:var(--encre);white-space:pre;overflow-x:auto}
/* ═══ v11.36 · LE CHEMIN CLIQUABLE ═══
Le bandeau porte le chemin complet, chaque maillon cliquable sauf
le dernier. Il remplace les boutons « retour » que chaque écran
profond posait à sa façon — un bouton dit d'où l'on vient, un
chemin dit où l'on EST. */
.crumb{display:flex;align-items:center;gap:5px;min-width:0}
.crumb b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crlk{color:var(--muet);text-decoration:none;white-space:nowrap;border-radius:6px;
padding:2px 5px;margin:0 -5px;transition:background .12s,color .12s}
.crlk:hover{background:var(--surface-2);color:var(--encre)}
.crsep{display:inline-flex;color:var(--ligne-2,var(--ligne));flex:none}
.crsep .ico{width:13px;height:13px}
/* Sur un écran étroit, seul le dernier maillon compte : on est
dessus, les autres se retrouvent par le rail. */
@media (max-width:900px){ .crumb a.crlk, .crumb .crsep{display:none} }
/* ═══ v11.37 · LES RÔLES ═══
Aucune icône ici, et c'est la règle §3 : une image qui répète le
libellé à côté d'elle ne dit rien de plus. Ce qu'un rôle a besoin
de porter — le fait que ce soit CELUI-LÀ, reconnu de loin dans une
liste — une couleur le porte mieux qu'un dessin, et sans prétendre
signifier quelque chose. */
/* Le trait de couleur du rôle. 3px : assez pour se voir en balayant
la liste, trop peu pour se lire comme un élément à cliquer. */
.rcol{width:3px;align-self:stretch;min-height:30px;border-radius:2px;flex:none}
.rcol.lg{width:4px;min-height:44px;border-radius:3px}
.rrow{display:flex;align-items:center;gap:12px;padding:11px 18px;
border-bottom:1px solid var(--surface-2)}
.rrow:last-child{border-bottom:none}
.rrow .d1{font-weight:600;font-size:12.5px;color:var(--encre)}
.rrow .d2{font-size:11px;color:var(--muet);margin-top:1px}
.rrow form{display:flex}
/* L'en-tête de famille, dans la liste comme dans les permissions.
Il porte son compte à droite : « 5 sur 9 » se lit d'un coup, et
c'est la seule façon de repérer un module largement ouvert sans
parcourir ses lignes. */
.rmod{display:flex;align-items:center;gap:8px;padding:9px 18px;
background:var(--surface-2);border-bottom:1px solid var(--ligne);
font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--encre-2)}
.rmod .n{font-weight:500;letter-spacing:0;color:var(--muet)}
/* Une permission. Éteinte, elle s'efface — sans disparaître : on doit
pouvoir la trouver pour l'allumer. */
.rperm{display:flex;align-items:center;gap:14px;padding:9px 18px;
border-bottom:1px solid var(--surface-2);opacity:.55;transition:opacity .12s}
.rperm:last-child{border-bottom:none}
.rperm.on{opacity:1}
.rperm .d1{font-weight:600;font-size:12.5px;color:var(--encre)}
.rcode{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size:10px;color:var(--muet);margin-top:1px}
/* La portée : trois choix côte à côte, jamais un menu déroulant. Un
menu cache deux réponses sur trois, et c'est justement leur
comparaison qui fait la décision. */
.rpor{display:inline-flex;border:1px solid var(--ligne);border-radius:8px;
overflow:hidden;flex:none;background:var(--carte)}
.rpor label{position:relative;cursor:pointer}
.rpor label+label{border-left:1px solid var(--ligne)}
.rpor input{position:absolute;opacity:0;width:0;height:0}
.rpor span{display:block;padding:5px 10px;font-size:11px;color:var(--muet);
white-space:nowrap;transition:background .12s,color .12s}
.rpor label:hover span{background:var(--surface-2);color:var(--encre)}
.rpor label.on span{background:var(--terra-pale,var(--surface-2));color:var(--terra-h);font-weight:600}
.rpor input:disabled+span{cursor:default}
.rpor label:has(input:disabled){cursor:default}
.rmeta{font-size:11px;color:var(--muet);white-space:nowrap;flex:none}
/* ── v11.37.1 · CE QUE LA POSITION VEUT DIRE ──
« ouvre les fiches de : Manager, Employé ». C'est une PHRASE, pas un
identifiant : elle ne prend donc pas le chasse-fixe de .rcode, qui
sert aux paie.montants et compagnie. Elle vit sous la description,
plus discrète qu'elle — on la lit quand on cherche la hiérarchie,
pas quand on cherche le rôle. */
.rvoit{font-size:10.5px;color:var(--muet);margin-top:2px;line-height:1.4}
.rvoit b{font-weight:600;color:var(--encre-2)}
/* ── v11.38 · LE SÉLECTEUR D'ORGANISATION ──
Dans le menu du compte, et seulement quand il y en a plusieurs.
Chaque ligne est un dans son propre