/* ═══════════════════════════════════════════════════════════════
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;
/* 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}
/* 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)}
.btn.danger{color:var(--rouge)}
.btn.danger:hover{background:var(--rouge-pale);border-color:var(--rouge)}
.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}
.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)}
.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}
/* ═══ Tableaux ═══ */
.scrollx{overflow-x:auto}
.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…) ═══ */
.plbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.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}
.plh{display:grid;grid-template-columns:200px repeat(7,1fr);background:var(--surface-2);
border-bottom:1px solid var(--ligne)}
.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}
.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}
.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);box-shadow:0 0 0 3px rgba(233,102,70,.13)}
.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}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.f3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.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 */
.chips{display:flex;flex-wrap:wrap;gap:7px;padding:2px 0}
.chip{cursor:pointer;user-select:none}
.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}
.chip span::before{content:'+';font-weight:700;color:var(--muet)}
.chip:hover span{border-color:var(--muet);background:var(--surface-2)}
.chip input:checked+span{background:var(--vert-pale);border-color:var(--vert);color:var(--vert)}
.chip input:checked+span::before{content:'✓';color:var(--vert)}
.chip input:focus-visible+span{outline:2px solid var(--terra);outline-offset:2px}
/* 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 */
.tabs{display:flex;gap:3px;background:var(--carte);border:1px solid var(--ligne);
border-radius:11px;padding:4px;margin-bottom:16px;overflow-x:auto;box-shadow:var(--ombre)}
.tabs a{flex:1;text-align:center;padding:8px 13px;border-radius:8px;font-size:12.5px;
font-weight:600;color:var(--muet);white-space:nowrap}
.tabs a:hover{color:var(--encre);background:var(--surface-2)}
.tabs a.on{background:var(--terra-pale);color:var(--terra-h)}
.tabs a .tbadge{display:inline-block;background:var(--terra);color:#fff;border-radius:8px;
font-size:9.5px;font-weight:700;padding:1px 6px;margin-left:5px;vertical-align:1px}
/* ═══ 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}
.cfoot{display:flex;gap:8px;padding:10px 16px;background:var(--surface-2);flex-wrap:wrap}
.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}
.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.w{background:var(--jaune-pale);color:var(--jaune)}
.warnline.k{background:var(--rouge-pale);color:var(--rouge)}
/* 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}
.dwr .panel{position:absolute;right:0;top:0;bottom:0;width:min(440px,95vw);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}
.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)}
.spill .avm{width:22px;height:22px;border-radius:50%;color:#fff;display:flex;align-items:center;
justify-content:center;font-size:8px;font-weight:700;font-style:normal}
.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}
.repjours{display:flex;gap:5px}
.repj{flex:1;cursor:pointer}
.repj input{position:absolute;opacity:0}
.repj 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.3}
.repj input:checked+span{background:var(--terra);border-color:var(--terra);color:#fff}
.repj:hover span{border-color:var(--muet)}
.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)}
.tago i{width:9px;height:9px;border-radius:50%}
.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)}
.ddpanel{position:absolute;right:0;top:calc(100% + 8px);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}
/* ═══ Planning v2 (planning.php / jour.php) ═══ */
.pl2card{overflow:hidden}
.pwrap{overflow-x:auto}
.pl2{min-width:1100px}
.pl2 .pgh{display:grid;grid-template-columns:236px repeat(7,1fr);
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}
.pl2 .dd{padding:0;text-align:left;border-left:1px solid var(--ligne)}
.dd .dtop{display:flex;align-items:center;gap:8px;padding:8px 10px 7px}
.dd .dgauche{min-width:0;flex:1}
.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(--terra-pale)}
.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:236px repeat(7,1fr);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:#FEF7F0}
.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)}
.sh{border-radius:8px;padding:6px 9px;font-size:12px;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{display:block;font-size:9.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{white-space:nowrap;font-weight:700}
.sh:hover{filter:brightness(.97)}
.sh{position:relative}
.sh .pz{display:block;font-size:9px;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 ═══ */
.pauses{display:flex;flex-direction:column;gap:8px}
.pline{display:flex;align-items:center;gap:8px}
.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);box-shadow:0 0 0 3px rgba(233,102,70,.13)}
.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:10px;font-weight:600;opacity:.85;margin-bottom:1px}
.sh .dl{float:right;font-size:9px;font-weight:700;margin-left:6px;margin-top:1px}
.sh .dl.p{color:var(--vert)}
.sh .dl.m{color:var(--rouge)}
/* 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. */
.absb{border-radius:0;padding:3px 8px;font-size:10px;font-weight:600;letter-spacing:0;
text-transform:none;display:flex;align-items:center;gap:7px;min-height:22px;
margin:0 -5px;background:var(--surface-2);color:var(--encre-2);
border-top:1px solid var(--ligne-2);border-bottom:1px solid var(--ligne-2)}
.absb.deb{border-radius:7px 0 0 7px;margin-left:0;border-left:1px solid var(--ligne-2)}
.absb.fin{border-radius:0 7px 7px 0;margin-right:0;border-right:1px solid var(--ligne-2)}
.absb.deb.fin{border-radius:7px}
.absb .an{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.absb .aj{flex:none;font-weight:700;font-size:9px;opacity:.8;
background:rgba(255,255,255,.6);border-radius:20px;padding:1px 7px}
/* En attente de validation : trame hachurée, la décision n'est pas prise */
.absb.att{border-style:dashed}
.pfoot{display:grid;grid-template-columns:236px repeat(7,1fr);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(--terra-pale)}
.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.dr{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:236px repeat(7,1fr);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}
.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 ═══ */
.page-auth{min-height:100vh;display:flex;align-items:center;justify-content:center;
background:var(--fond);padding:20px}
.auth-box{background:var(--carte);border:1px solid var(--ligne);border-radius:16px;
padding:32px 30px;width:min(400px,94vw);text-align:center;box-shadow:var(--ombre-2)}
.auth-box .lgm{font-size:34px}
.auth-box form{text-align:left;margin-top:20px}
.auth-box .btn{margin-top:16px}
.auth-p{font-size:12.5px;color:var(--muet);text-align:left;line-height:1.55}
.auth-p code{background:var(--surface-2);border:1px solid var(--ligne);border-radius:5px;
padding:1px 5px;font-size:11px}
.auth-link{display:block;margin-top:16px;font-size:12px;font-weight:600;color:var(--terra-h)}
.auth-box .alert{text-align:left;margin-top:14px}
/* ═══ 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,.absb,.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,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}
/* Grille d'icônes */
.icgrid{display:grid;grid-template-columns:repeat(7,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:38px;border-radius:9px;
border:1px solid var(--ligne-2);background:#fff;color:var(--encre-2)}
.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)}
.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}
.icgrid{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}
.depgrid
/* 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}
.dwr .panel{position:absolute;right:0;top:0;bottom:0;width:min(560px,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: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)}
.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 */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips .chip{cursor:pointer;position:relative}
.chips .chip input{position:absolute;opacity:0}
.chips .chip span{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ligne-2);
background:#fff;border-radius:20px;padding:5px 12px;font-size:12px;font-weight:600;color:var(--encre-2)}
.chips .chip span::before{content:'+';font-weight:700;color:var(--muet)}
.chips .chip input:checked+span{background:var(--bleu-pale);border-color:var(--bleu);color:var(--bleu)}
.chips .chip input:checked+span::before{content:'✓';color:var(--bleu)}
/* 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)}
/* Bornes de contrat : centrées dans la case, avec leur icône */
.pl2 .pcell .borne{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:3px;font-size:10px;font-weight:600;color:var(--muet);
pointer-events:none;z-index:1;text-align:center;line-height:1.2}
.pl2 .pcell .borne svg{width:16px;height:16px;stroke-width:1.6}
.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}
.mmbox.etp .ebar{padding:14px 22px 0}
.mmbox.etp .el{font-size:11.5px;font-weight:600;color:var(--encre-2);margin-bottom:7px}
.mmbox.etp .el b{color:var(--terra-h)}
.mmbox.etp .eb3{display:flex;gap:6px}
.mmbox.etp .eb3 i{flex:1;height:3px;border-radius:2px;background:var(--ligne);display:block}
.mmbox.etp .eb3 i.on{background:var(--terra)}
.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 */
.dwseg{display:flex;gap:3px;margin:0 20px 4px;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}
.rail .rbas{margin-top:auto}
.rail .rusr{width:40px;height:40px;border-radius:50%;font-size:14px;background:var(--vert);color:#fff;
display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;text-decoration:none}
.rail .rusr:hover{filter:brightness(.94)}
/* Panneau volant */
.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}
.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)}
.absb.cliq{cursor:pointer}
.absb.cliq:hover{filter:brightness(.96)}
/* 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 .p{font-size:9.5px;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.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)}
.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)}
.psel .ppan{position:absolute;top:calc(100% + 5px);left:0;min-width:100%;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 .vide{padding:16px;text-align:center;font-size:12.5px;color:var(--muet)}
.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 */
.pcell.vcible{background:var(--terra-pale);box-shadow:inset 0 0 0 1.5px var(--terra)}
/* 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) ═══ */
/* Demande d'absence en attente, validable sur place */
.pcell .absatt{border:1.5px dashed var(--violet);border-radius:8px;
background:repeating-linear-gradient(-45deg,#F7F1F6,#F7F1F6 4px,#FDFBFD 4px,#FDFBFD 8px);
padding:5px 7px;margin-bottom:4px;display:flex;flex-direction:column;gap:5px}
.pcell .absatt .t{font-size:10px;font-weight:700;color:var(--violet)}
.pcell .absatt .b{display:flex;gap:4px}
.pcell .absatt .b button{flex:1;border:none;border-radius:6px;padding:3px 0;font-size:10px;
font-weight:700;font-family:var(--f-ui)}
.pcell .absatt .b .ok{background:var(--vert);color:#fff}
.pcell .absatt .b .ok:hover{background:#47702F}
.pcell .absatt .b .no{background:#fff;border:1px solid var(--ligne-2);color:var(--muet)}
.pcell .absatt .b .no:hover{border-color:var(--rouge);color:var(--rouge)}
/* 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(--c0w,210px) repeat(7,1fr);
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}
.favbar .favtag{position:relative;display:flex;flex-direction:column;gap:1px;line-height:1.25;
border:1px solid;border-radius:9px;padding:6px 24px 6px 11px;cursor:grab;user-select:none}
.favbar .favtag:active{cursor:grabbing}
.favbar .favtag b{font-size:11px;font-weight:700;letter-spacing:.02em}
.favbar .favtag span{font-size:11px;font-weight:600;opacity:.85}
.favbar .favtag span i{font-style:normal;opacity:.75}
.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 */
body.sans-abs .pcell .absb,
body.sans-attente .pcell .absatt,
body.sans-dispo .pcell .indz,
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}
.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)}
.btn.danger{background:var(--rouge);border-color:var(--rouge);color:#fff}
.btn.danger:hover{background:#A8323A}
/* 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 unique, au clavier seulement */
:focus-visible{outline:2px solid var(--terra);outline-offset:2px;border-radius:4px}
/* ═══ 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. */
body.sans-alertes .wemp,
body.sans-alertes .wshift,
body.sans-alertes .prevbar{display:none!important}
/* ═══ 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(--terra-pale)}
/* 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}
/* Choix des zones suivies */
.zonepick{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.zp{display:flex;align-items:center;gap:7px;border:1px solid var(--ligne);border-radius:9px;
padding:7px 12px;cursor:pointer;font-size:12.5px;font-weight:600;background:#fff}
.zp input{width:15px;height:15px;accent-color:var(--terra);cursor:pointer}
.zp:has(input:checked){border-color:currentColor}
.zp.zA:has(input:checked){background:#E4EFDC;color:#3D5C2A}
.zp.zB:has(input:checked){background:var(--bleu-pale);color:var(--bleu)}
.zp.zC:has(input:checked){background:#F8EBD4;color:#7A5510}
.zp.zCorse:has(input:checked){background:var(--violet-pale);color:var(--violet)}
/* É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)}
/* 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,")}
/* Colonnes horaires : rafales et orientation (v7.4) */
.mmh .rf{font-size:9.5px;color:var(--muet);font-weight:600;margin-top:1px}
.mmh .rf.fort{color:var(--rouge)}
.mmh .dd{display:flex;align-items:center;justify-content:center;gap:3px;font-size:9.5px;
color:var(--muet);font-weight:600;margin-top:1px}
.mmh .dd .fl{display:inline-block;line-height:1;font-size:11px;color:var(--bleu)}
/* Pied de la modale météo */
.mmfoot{display:flex;flex-direction:column;gap:4px;padding:12px 18px;
border-top:1px solid var(--ligne);background:var(--surface-2);font-size:11.5px;
color:var(--muet);line-height:1.5}
.mmfoot a{color:var(--bleu);font-weight:600}
.mmfoot .pr{font-style:italic}
/* ═══ Menu Outils réorganisé (v7.5) ═══ */
.ddgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:14px}
.ddtile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
padding:12px 6px;border:1px solid var(--ligne);border-radius:11px;background:#fff;
font-size:11px;font-weight:600;color:var(--encre);text-align:center;line-height:1.2;
font-family:var(--f-ui);cursor:pointer;text-decoration:none}
.ddtile:hover{border-color:var(--terra);background:var(--terra-pale);color:var(--terra-h)}
.ddtile svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7}
/* Sections repliées : ce qu'on ouvre rarement ne doit pas allonger le menu */
.ddplus{border-top:1px solid var(--ligne);margin-top:4px}
.ddplus > summary{display:flex;align-items:center;gap:8px;padding:10px 2px;cursor:pointer;
font-size:12px;font-weight:600;color:var(--encre-2);list-style:none;
background:none;border:none;border-radius:0}
.ddplus[open] > summary{background:none;color:var(--encre)}
.ddplus summary::-webkit-details-marker{display:none}
.ddplus summary::after{content:'›';margin-left:auto;font-size:15px;color:var(--muet);
transform:rotate(90deg);transition:transform .15s}
.ddplus[open] summary::after{transform:rotate(-90deg)}
.ddplus summary:hover{color:var(--terra-h)}
.ddplus summary .ic{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8}
.ddplusin{padding:2px 0 10px}
/* Icône de copie sur l'en-tête du jour, révélée au survol */
.dcopie{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:7px;
border:1px solid var(--ligne);background:#fff;color:var(--muet);cursor:pointer;
display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .12s;
font-family:var(--f-ui);z-index:3}
.dcopie svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.9}
.pgh .dd{position:relative}
.pgh .dd:hover .dcopie,.dcopie:focus-visible{opacity:1}
.dcopie:hover{border-color:var(--terra);color:var(--terra-h);background:var(--terra-pale)}
/* Choix des jours de destination */
.cjjours{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cjj{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px;
border:1px solid var(--ligne);border-radius:9px;cursor:pointer;background:#fff}
.cjj input{position:absolute;opacity:0;pointer-events:none}
.cjj .j{font-size:9.5px;font-weight:700;text-transform:uppercase;color:var(--muet)}
.cjj .n{font-family:var(--f-titre);font-size:16px;font-weight:600;line-height:1}
.cjj:has(input:checked){border-color:var(--terra);background:var(--terra-pale)}
.cjj:has(input:checked) .n,.cjj:has(input:checked) .j{color:var(--terra-h)}
.cjj.off{opacity:.35;cursor:not-allowed;background:var(--surface-2)}
.radline{display:flex;align-items:flex-start;gap:10px;padding:9px 11px;border-radius:9px;
cursor:pointer;font-size:12.5px}
.radline:hover{background:var(--surface-2)}
.radline input{margin-top:2px;accent-color:var(--terra);width:15px;height:15px;flex:none}
.radline b{display:block;font-weight:600}
.radline i{display:block;font-style:normal;font-size:11.5px;color:var(--muet);margin-top:1px}
/* Section dangereuse du menu Outils */
.ddplus.danger > summary{color:var(--rouge)}
.ddplus.danger > summary .ic{stroke:var(--rouge)}
.ddplus.danger[open] > summary{color:var(--rouge)}
/* ═══ Durée au survol d'un shift (v7.8) ═══
Les horaires cèdent la place à la durée : même emplacement, une
information de plus, aucun encombrement supplémentaire. */
.sh .hh{position:relative;display:block}
.sh .hh .hd{display:none}
.sh:hover .hh .hv{display:none}
.sh:hover .hh .hd{display:inline}
/* ═══ Panneau de détail d'une absence ═══
Reprend la mécanique du panneau d'alertes : bandeau de titre
coloré, lignes libellé / valeur, motif cité. */
#apanel{position:fixed;z-index:70;width:min(330px,90vw);background:var(--carte);
border:1px solid var(--ligne);border-radius:14px;box-shadow:var(--ombre-2);
display:none;overflow:hidden}
#apanel.on{display:block}
.apt{display:flex;align-items:center;gap:8px;font-family:var(--f-titre);font-weight:600;
font-size:13.5px;color:#fff;background:var(--encre-2);padding:11px 16px}
.apt i{font-style:normal;font-size:9.5px;font-weight:700;text-transform:uppercase;
letter-spacing:.08em;background:rgba(255,255,255,.22);border-radius:20px;padding:2px 8px}
.apt.att{background:var(--jaune)}
.apl{padding:4px 0}
.apr{display:flex;gap:12px;padding:7px 16px;font-size:12px;align-items:baseline}
.apr b{flex:none;width:70px;font-weight:600;color:var(--muet);font-size:11px}
.apr span{flex:1;color:var(--encre);font-weight:500}
.apm{margin:6px 16px 4px;padding:9px 11px;background:var(--surface-2);border-radius:9px;
font-size:12px;font-style:italic;color:var(--encre-2);line-height:1.5}
.apf{padding:9px 16px;border-top:1px solid var(--surface-2);font-size:11px;color:var(--muet)}
/* ═══ Séparateurs d'équipe (v7.10) ═══
Une bande fine entre deux équipes : on voit d'un coup d'œil qui
travaille avec qui, sans avoir à lire chaque ligne. */
.eqsep{display:grid;grid-template-columns:236px 1fr;background:var(--surface-2);
border-top:1px solid var(--ligne-2);border-bottom:1px solid var(--ligne)}
.eqsep .eql{display:flex;align-items:center;gap:8px;padding:6px 14px}
.eqsep .ep{width:3px;height:13px;border-radius:2px;background:var(--terra);flex:none}
.eqsep b{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
color:var(--encre)}
.eqsep .en{font-size:10.5px;color:var(--muet);font-weight:500}
.eqsep .eqt{display:flex;align-items:center;justify-content:flex-end;padding:6px 14px;
font-family:var(--f-titre);font-size:12px;font-weight:600;color:var(--encre-2)}
/* Sans équipe : c'est un cas à régulariser, pas une équipe */
.eqsep.sans .ep{background:var(--ligne-2)}
.eqsep.sans b{color:var(--muet)}
/* Densité dense : la bande se resserre */
body.dens-dense .eqsep .eql,body.dens-dense .eqsep .eqt{padding:3px 12px}
body.dens-dense .eqsep b{font-size:10px}
/* Masquable depuis le menu Affichage */
body.sans-equipes .eqsep{display:none}
/* Séparateur d'équipe en vue Jour : une ligne pleine largeur dans
la grille de quarts d'heure. */
.jeqsep{display:flex;align-items:center;gap:8px;padding:5px 14px;
background:var(--surface-2);border-top:1px solid var(--ligne-2);
border-bottom:1px solid var(--ligne);position:sticky;left:0}
.jeqsep .ep{width:3px;height:12px;border-radius:2px;background:var(--terra);flex:none}
.jeqsep b{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
color:var(--encre)}
.jeqsep .en{font-size:10px;color:var(--muet);font-weight:500}
.jeqsep.sans .ep{background:var(--ligne-2)}
.jeqsep.sans b{color:var(--muet)}
/* L'effectif par équipe accompagne le séparateur : masquer l'un
sans l'autre laisserait une ligne de chiffres orpheline. */
body.sans-equipes .jeqsep,body.sans-equipes .jeqe{display:none}
/* Séparateur d'équipe en frise */
.freqsep{display:flex;align-items:center;gap:8px;padding:5px 14px;margin:6px 0 2px;
background:var(--surface-2);border-radius:7px;border:1px solid var(--ligne)}
.freqsep .ep{width:3px;height:12px;border-radius:2px;background:var(--terra);flex:none}
.freqsep b{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em}
.freqsep .en{font-size:10px;color:var(--muet);margin-left:auto}
.freqsep.sans .ep{background:var(--ligne-2)}
.freqsep.sans b{color:var(--muet)}
body.sans-equipes .freqsep{display:none}
/* Copie de journée : révélée au survol dans la frise aussi */
.frday .frl{position:relative}
.frday:hover .dcopie{opacity:1}
/* ═══ Barre supérieure enrichie (v7.12) ═══ */
.top{display:flex;align-items:center;gap:8px;position:relative}
.tsp{flex:1}
.tsep{width:1px;height:22px;background:var(--ligne);flex:none}
.tbtn{display:flex;align-items:center;gap:7px;height:34px;padding:0 11px;border-radius:10px;
border:1px solid transparent;background:none;color:var(--encre-2);font-size:12.5px;
font-weight:600;font-family:var(--f-ui);position:relative;flex:none}
.tbtn:hover{background:var(--surface-2);color:var(--encre)}
.tbtn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8}
.tbtn.tico{width:34px;padding:0;justify-content:center}
.tsearch{border-color:var(--ligne);background:var(--surface-2);color:var(--muet);
min-width:190px;font-weight:500}
.tsearch:hover{border-color:var(--ligne-2)}
.tsearch kbd{margin-left:auto;font-family:var(--f-ui);font-size:10px;font-weight:600;
background:#fff;border:1px solid var(--ligne);border-radius:4px;padding:1px 5px;color:var(--muet)}
.tpast{position:absolute;top:2px;right:2px;min-width:16px;height:16px;border-radius:20px;
background:var(--rouge);color:#fff;font-size:9.5px;font-weight:700;display:flex;
align-items:center;justify-content:center;padding:0 4px;border:2px solid var(--carte)}
.tpast.j{background:var(--jaune)}
/* Compte */
.tcompte{display:flex;align-items:center;gap:9px;height:38px;padding:0 7px 0 5px;
border-radius:11px;border:1px solid transparent;background:none;font-family:var(--f-ui);flex:none}
.tcompte:hover{background:var(--surface-2)}
.tav{width:28px;height:28px;border-radius:50%;color:#fff;font-size:11px;font-weight:700;
display:flex;align-items:center;justify-content:center;flex:none}
.tid{text-align:left;line-height:1.15}
.tid b{display:block;font-size:12.5px;font-weight:600;color:var(--encre)}
.tid span{display:block;font-size:10.5px;color:var(--muet)}
.tchev{width:13px;height:13px;stroke:var(--muet);fill:none;stroke-width:2}
@media(max-width:820px){.tid,.tsearch span,.tsearch kbd{display:none}
.tsearch{min-width:0;width:34px;padding:0;justify-content:center}}
/* Panneaux */
.tpan{position:absolute;top:calc(100% + 6px);right:14px;width:min(348px,94vw);
background:var(--carte);border:1px solid var(--ligne);border-radius:14px;
box-shadow:var(--ombre-2);z-index:200;overflow:hidden;display:none}
.tpan.on{display:block}
.tpanh{display:flex;align-items:center;gap:9px;padding:12px 15px;border-bottom:1px solid var(--ligne)}
.tpanh .ic{width:16px;height:16px;stroke:var(--encre-2);fill:none;stroke-width:1.9}
.tpanh b{font-family:var(--f-titre);font-size:14px;font-weight:600}
.tlk{font-size:11.5px;color:var(--terra-h);font-weight:600;background:none;border:none;
font-family:var(--f-ui);padding:0}
.tlk:hover{text-decoration:underline}
.tpanl{max-height:340px;overflow-y:auto}
.tpani{display:flex;gap:11px;padding:11px 15px;border-bottom:1px solid var(--surface-2);
text-decoration:none;color:var(--encre);position:relative}
.tpani:hover{background:var(--surface-2)}
.tpani.neuf::before{content:'';position:absolute;left:6px;top:50%;transform:translateY(-50%);
width:5px;height:5px;border-radius:50%;background:var(--terra)}
.tpic{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;
justify-content:center;flex:none}
.tpic svg{width:15px;height:15px;fill:none;stroke-width:1.9}
.tpic.att{background:var(--jaune-pale)}.tpic.att svg{stroke:var(--jaune)}
.tpic.inf{background:var(--bleu-pale)}.tpic.inf svg{stroke:var(--bleu)}
.tpic.ko{background:var(--rouge-pale)}.tpic.ko svg{stroke:var(--rouge)}
.tpic.ok{background:var(--vert-pale)}.tpic.ok svg{stroke:var(--vert)}
.tptx{flex:1;min-width:0}
.tptx b{display:block;font-size:12.5px;font-weight:600;line-height:1.3}
.tptx span{display:block;font-size:11.5px;color:var(--muet);margin-top:2px;line-height:1.4}
.tpq{font-size:10.5px;color:var(--muet);flex:none;white-space:nowrap}
.tpanv{display:flex;flex-direction:column;align-items:center;gap:8px;padding:28px 18px;
font-size:12.5px;color:var(--muet)}
.tpanv svg{fill:none;stroke-width:1.8}
.tpanf{padding:9px 15px;background:var(--surface-2);border-top:1px solid var(--ligne)}
.tpanf a{display:block;text-align:center;border:1px solid var(--ligne-2);background:#fff;
border-radius:9px;padding:7px;font-size:12px;font-weight:600;color:var(--encre);
text-decoration:none}
.tpanf a:hover{border-color:var(--terra);color:var(--terra-h)}
/* Menu compte */
.tpan.tcpt{width:min(250px,92vw)}
.tmtete{padding:13px 15px;border-bottom:1px solid var(--ligne)}
.tmtete b{display:block;font-family:var(--f-titre);font-size:14px;font-weight:600}
.tmtete>span{display:block;font-size:11.5px;color:var(--muet);margin-top:1px;
overflow:hidden;text-overflow:ellipsis}
.tmrole{display:inline-block!important;margin-top:6px;font-size:10px;font-weight:700;
text-transform:uppercase;letter-spacing:.07em;background:var(--terra-pale);
color:var(--terra-h)!important;border-radius:20px;padding:2px 8px}
.tmline{display:flex;align-items:center;gap:10px;padding:9px 15px;font-size:12.5px;
color:var(--encre);text-decoration:none}
.tmline:hover{background:var(--surface-2)}
.tmline svg{width:15px;height:15px;stroke:var(--muet);fill:none;stroke-width:1.8;flex:none}
.tmline.dgr{color:var(--rouge)}
.tmline.dgr svg{stroke:var(--rouge)}
.tmsep{height:1px;background:var(--ligne);margin:5px 0}
/* ═══ Sélecteur de vue (v7.13) ═══
Une liste déroulante au lieu de cinq boutons : la barre respire
et la vue courante se lit sans compter les onglets. */
.vuesel{position:relative}
.vuesel > summary{display:inline-flex;align-items:center;gap:7px;list-style:none}
.vuesel > summary::-webkit-details-marker{display:none}
.vuesel > summary .vsl{flex:1;text-align:left}
.vuesel[open] > summary{background:var(--terra-pale);border-color:var(--terra);
color:var(--terra-h)}
.vuepan{width:270px;left:0;right:auto;padding:6px;gap:2px}
.vuel{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;
text-decoration:none;color:var(--encre)}
.vuel:hover{background:var(--surface-2)}
.vuel.on{background:var(--terra-pale)}
.vuel .vic{width:30px;height:30px;border-radius:9px;background:var(--surface-2);
display:flex;align-items:center;justify-content:center;flex:none}
.vuel.on .vic{background:#fff}
.vuel .vic svg{width:15px;height:15px;stroke:var(--encre-2);fill:none;stroke-width:1.8}
.vuel.on .vic svg{stroke:var(--terra-h)}
.vuel .vtx{flex:1;min-width:0}
.vuel .vtx b{display:block;font-size:12.5px;font-weight:600;line-height:1.25}
.vuel.on .vtx b{color:var(--terra-h)}
.vuel .vtx i{display:block;font-style:normal;font-size:11px;color:var(--muet);margin-top:1px}
.vuel .vok svg{width:15px;height:15px;stroke:var(--terra);fill:none;stroke-width:2.4;flex:none}
/* Bouton d'ajout sur la piste de la frise : discret, révélé au
survol, à droite pour ne pas recouvrir les shifts du matin. */
.frtrack{position:relative}
.frplus{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);z-index:4;
width:22px;height:22px;border-radius:7px;border:1px dashed var(--ligne-2);
background:#fff;color:var(--muet);font-size:14px;line-height:1;cursor:pointer;
opacity:0;transition:opacity .12s;font-family:var(--f-ui)}
.frtrack:hover .frplus,.frplus:focus-visible{opacity:1}
.frplus:hover{border-color:var(--terra);border-style:solid;color:var(--terra-h);
background:var(--terra-pale)}
/* Vue Étiquettes : la case reçoit un dépôt comme celle des salariés */
.trow .pcell{position:relative}
.trow .pcell .plus{opacity:0}
.trow .pcell:hover .plus{opacity:1}
/* Bandeau d'événements de la vue Jour : une seule journée, donc
une ligne d'étiquettes plutôt qu'une grille à sept colonnes. */
.jevts{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:9px 15px;
margin-bottom:11px;background:#FCFAF5;border:1px solid var(--ligne);border-radius:var(--r)}
.jevts .jel{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:700;
letter-spacing:.06em;text-transform:uppercase;color:var(--muet);flex:none}
.jevts .jel .ico{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.9}
.jevts .ev{white-space:nowrap}
.jevts .dnote{margin-left:auto}
body.sans-anniv.sans-feries.sans-vacances .jevts{display:none}
/* Largeur d'une heure : le seul réglage à toucher pour resserrer
ou étirer la frise. */
.frcard{--frh:80px}
body.dens-dense .frcard{--frh:62px}
body.dens-lache .frcard{--frh:104px}
/* Vue Jour : repères de 5 minutes à l'intérieur de chaque quart
d'heure, dessinés en CSS. Le quart et l'heure gardent leurs
bordures existantes. */
.jcell{background-image:repeating-linear-gradient(to right,
#FAF6EE 0 1px, transparent 1px 33.333%)}
.jcell.hors{background-image:none}
/* Vue Jour : cases plus larges, la lecture au quart d'heure était
trop serrée. */
.jgrid{--jcol:34px}
body.dens-dense .jgrid{--jcol:26px}
body.dens-lache .jgrid{--jcol:44px}
/* Voile de pause sur un shift, à sa place réelle */
.jsh{position:relative}
.jsh .jpz{position:absolute;top:0;bottom:0;z-index:1;background:rgba(255,255,255,.6);
border-left:1px dashed rgba(62,43,26,.28);border-right:1px dashed rgba(62,43,26,.28);
pointer-events:none}
/* Le texte SUIT LE DÉFILEMENT à l'intérieur de son bloc.
ATTENTION à l'offset : « left:0 » colle le texte au bord du
conteneur, c'est-à-dire SOUS la colonne des noms qui y est
figée — il restait donc invisible. L'offset vaut la largeur de
cette colonne, plus une marge. */
.jgrid{--jnoms:230px}
.jsh .t,.jsh .h,.jsh .p{position:sticky;left:calc(var(--jnoms) + 10px);z-index:2;
align-self:flex-start;max-width:100%}
.jgrid .jabs .absin{position:sticky;left:calc(var(--jnoms) + 10px);display:flex;
align-items:center;gap:8px;max-width:100%}
/* Absence cliquable */
.jabs.cliq{cursor:pointer}
.jabs.cliq:hover{filter:brightness(.97)}
/* Ligne visée pendant un geste : c'est la LIGNE entière qui se
marque, et elle se coupe en deux dans sa HAUTEUR — moitié haute
pour déplacer, moitié basse pour dupliquer. La couleur dit
laquelle est active, sans avoir à lire l'infobulle. */
.jgrid .jcell.jcible{position:relative}
.jgrid .jcell.jcible{box-shadow:inset 0 1px 0 var(--ligne-2),inset 0 -1px 0 var(--ligne-2)}
/* Le sélecteur Déplacer / Dupliquer est le MÊME qu'en vue
Salariés, mais partagé dans la HAUTEUR puisque c'est une ligne
qu'on vise. Il n'occupe que la moitié droite de la colonne des
noms : le nom du salarié doit rester lisible — c'est lui qu'on
vérifie avant de lâcher. */
/* ═══ Sélecteur Déplacer / Dupliquer (vues Jour et Frise) ═══
Il couvre la PISTE du salarié visé, sur toute sa largeur, et se
partage en DEUX BANDES HORIZONTALES : haut pour déplacer, bas
pour dupliquer. C'est une ligne qu'on vise — le choix se fait
donc en haut ou en bas de cette ligne, pas à gauche ou à droite.
Il est rendu dans le HTML et masqué : le créer en JavaScript le
rendait dépendant d'une portée et d'un ordre d'exécution. */
.jsplit{display:none;position:relative;z-index:9;pointer-events:none;
flex-direction:column;gap:3px;padding:3px;overflow:clip}
/* La ligne visée GRANDIT pour que les deux libellés tiennent :
des bandes de 12 px rognaient le texte, qui devenait invisible. */
.jgrid .jsplit.jcible{min-height:58px}
.frtrack .jsplit{position:absolute;inset:2px;z-index:9}
/* La classe est posée SUR le sélecteur lui-même, pas sur un
parent : « .jcible > .jsplit » ne pouvait donc jamais
correspondre. */
.jsplit.jcible,.jsplit.frcible{display:flex}
/* overflow:CLIP et non hidden : hidden crée un contexte de
défilement, sur lequel les libellés sticky se calaient — ils ne
suivaient donc jamais la fenêtre. C'est le même piège que pour
le texte des shifts. */
.jsplit .ds-half{flex:1;display:flex;flex-direction:row;align-items:center;
justify-content:flex-start;gap:8px;
padding:0 14px;border:1.5px dashed var(--ligne-2);border-radius:7px;
background:rgba(255,255,255,.95);font-size:11px;font-weight:700;color:var(--encre-2);
min-height:24px;white-space:nowrap;overflow:clip}
/* Le libellé SUIT LE DÉFILEMENT : les bandes couvrent 24 heures,
donc leur début se trouve loin à gauche, souvent hors écran.
Sticky le retient au bord visible, après la colonne des noms. */
.jsplit .ds-half > *{position:sticky;left:calc(var(--jnoms, 230px) + 16px)}
.frtrack .jsplit .ds-half > *{left:calc(var(--frnoms, 200px) + 16px)}
.jsplit .ds-half span{max-width:none;overflow:visible;text-overflow:clip}
.jsplit .ds-half svg{width:14px;height:14px;stroke:currentColor;fill:none;
stroke-width:1.9;flex:none}
.jsplit .ds-half.hot{border-style:solid;border-color:var(--terra);
background:var(--terra-pale);color:var(--terra-h)}
.jsplit .ds-half[data-a="dup"].hot{border-color:var(--vert);
background:var(--vert-pale);color:var(--vert)}
/* La ligne visée se marque discrètement : le sélecteur porte
l'information, la couleur ne fait que la confirmer. */
.jgrid .jlab.jcible,.frrow .frl.frcible{background:var(--surface-2)}
.jgrid .jcell.jcible{background:var(--surface-2)}
/* v7.19.8 — Vue Jour.
1. La colonne des noms passe AU-DESSUS du sélecteur : la bande
Déplacer / Dupliquer couvre toute la journée et, une fois la
grille défilée, son début glissait sous les noms et les
recouvrait — on ne voyait plus qui l'on visait.
2. Les libellés se placent au CENTRE de la piste visible (--cx
est calculé par le geste) au lieu de se coller au bord gauche. */
.jgrid .jlab{z-index:21}
.jgrid .jsplit .ds-half{position:relative;justify-content:flex-start;padding:0}
.jgrid .jsplit .ds-half > .dsl{position:absolute;left:var(--cx,50%);top:50%;
transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:8px;
font:inherit;white-space:nowrap}
.jgrid .jsplit .ds-half > .dsl > *{position:static}
/* ═══ En-tête de planning (v7.16) ═══ */
/* Espaceurs de centrage : flex-basis à 0 pour qu'ils ne poussent
personne à la ligne, et min-width nulle pour qu'ils se réduisent
sur écran étroit. */
.plsp{flex:1 1 0;min-width:0}
@media(max-width:1100px){.plsp{display:none}}
/* Le sélecteur de vue prend la taille du sélecteur de date.
.btn.sm (0,2,0) l'emportait sur .vuesel > summary (0,1,1) : il
restait donc petit malgré cette règle. On cible les trois
classes pour passer devant. */
.vuesel > summary.btn.sm{height:39px;padding:0 15px;font-size:13.5px;min-width:170px;
border-radius:11px;font-weight:600}
.vuesel > summary.btn.sm svg:first-child{width:16px;height:16px}
.vuesel > summary .vsl{font-weight:600;font-size:13.5px}
/* Cadenas : l'état se lit sur l'icône, le clic le change. */
.cadenas{justify-content:flex-start;gap:9px}
.cadenas svg{stroke:var(--muet);fill:none;stroke-width:1.9}
.cadenas:hover svg{stroke:var(--encre)}
.cadenas.on{background:var(--vert-pale);border-color:#CFE0BE}
.cadenas.on svg{stroke:var(--vert)}
.cadenas.on:hover{background:#E4EFDC}
.plverrou{display:flex}
/* Le filtre d'étiquettes, désormais dans le menu Affichage */
.affmenu .filtres{margin:2px 0 4px}
.affmenu .smsel.w100{width:100%}
/* Effectif par équipe, sur la ligne du séparateur */
.jgrid .jeqe{background:var(--surface-2);border-top:1px solid var(--ligne-2);
border-bottom:1px solid var(--ligne);border-left:1px solid rgba(224,213,192,.5);
display:flex;align-items:center;justify-content:center;
font-size:10px;font-weight:600;color:var(--muet);font-variant-numeric:tabular-nums}
.jgrid .jeqe.q0{border-left-color:var(--ligne-2)}
.jgrid .jeqe.hi{color:var(--terra-h);font-weight:700}
.jgrid .jeqe.jeqt{font-family:var(--f-titre);font-size:11px;color:var(--encre-2);
border-left:1px solid var(--ligne)}
/* Le libellé d'équipe suit le défilement, comme les noms */
.jgrid .jeqsep{position:sticky;left:0;z-index:5}
/* Frise : le texte des shifts suit aussi le défilement. La colonne
des noms y fait 200 px. */
.frscroll{--frnoms:200px}
.frbar .btg,.frbar .bhh{position:sticky;left:calc(var(--frnoms) + 10px);max-width:100%}
.frabs{overflow:clip}
.frabs .absin{position:sticky;left:calc(var(--frnoms) + 10px)}
/* Frise : piste visée pendant un geste, coupée en deux dans sa
hauteur — haut pour déplacer, bas pour dupliquer. */
.frtrack.frcible.jmove{background-color:var(--terra-pale);
box-shadow:inset 0 2px 0 var(--terra)}
.frtrack.frcible.jdup{background-color:var(--vert-pale);
box-shadow:inset 0 -2px 0 var(--vert)}
/* Zoom et plage horaire dans le menu Affichage */
.zoomrow{display:flex;align-items:center;gap:9px;padding:6px 10px}
.zlab{font-size:12px;color:var(--encre-2);flex:1;white-space:nowrap}
.zbtns{display:flex;align-items:center;gap:5px;flex:none}
.zbtns .btn{width:28px;padding:0;justify-content:center;font-size:15px;line-height:1}
.zval{font-size:11.5px;font-weight:600;color:var(--encre);min-width:44px;text-align:center;
font-variant-numeric:tabular-nums}
.plagerow{display:flex;align-items:center;gap:7px;padding:4px 10px 6px;flex-wrap:wrap}
.plagerow .zlab{flex:none}
.plagerow .fi.sm{width:96px;height:29px;font-size:12px;padding:0 8px}
/* Frise : la ligne visée grandit, comme en vue Jour */
.frrow:has(.jsplit.frcible){height:62px}
.frrow:has(.jsplit.frcible) .frl,.frrow:has(.jsplit.frcible) .frt{height:62px}
/* ═══ Vue Semaine (v7.20) — la vue Jour, sept fois ═══
Le cadre défile dans les deux sens : les heures restent figées en
haut, les noms à gauche, et le séparateur du jour courant se
cale sous les heures. */
.jwrap.jsem{position:relative;overflow:auto;max-height:calc(100vh - 230px);min-height:360px}
.jgrid.jgsem .jh,.jgrid.jgsem .jt.jhead{position:sticky;top:0;z-index:22}
.jgrid.jgsem .jlab.jhead{top:0;z-index:24}
.jgrid.jgsem .jdaysep{position:sticky;top:33px;left:0;z-index:23;
background:var(--encre);color:#fff;border-top:1px solid var(--encre);border-bottom:1px solid var(--encre);
padding:0;min-height:34px;display:flex;align-items:center}
.jgrid.jgsem .jdaysep.we{background:#5A4636}
.jgrid.jgsem .jdaysep.today{background:var(--terra);border-color:var(--terra)}
/* Le contenu du séparateur suit le défilement horizontal : la
bande couvre 24 heures, son début serait hors écran. */
.jgrid.jgsem .jdaysep .jdin{position:sticky;left:0;display:inline-flex;align-items:center;gap:10px;
padding:6px 14px;max-width:100%;white-space:nowrap}
.jgrid.jgsem .jdaysep .jdn{font-family:var(--f-titre);font-size:14px;font-weight:700;color:#fff}
.jgrid.jgsem .jdaysep .jdm{font-size:11.5px;color:rgba(255,255,255,.7);margin-left:-6px}
.jgrid.jgsem .jdaysep .jdmeteo{display:inline-flex;align-items:center;gap:3px;font-size:11px;color:#fff}
.jgrid.jgsem .jdaysep .jdmeteo i{font-style:normal}
.jgrid.jgsem .jdaysep .jdtot{font-size:11px;font-weight:600;color:rgba(255,255,255,.85);
font-family:var(--f-titre);padding-left:8px;border-left:1px solid rgba(255,255,255,.3)}
.jgrid.jgsem .jdaysep .dcopie{opacity:.55}
.jgrid.jgsem .jdaysep:hover .dcopie{opacity:1}
body.sans-meteo .jdmeteo,body.sans-feries .jdaysep .ferie,body.sans-anniv .jdaysep .anniv,
body.sans-vacances .jdaysep .vac,body.sans-notes .jdaysep .dnote{display:none}
/* Barre des jours : un raccourci vers chaque journée */
.jsemnav{display:flex;gap:6px;margin:0 0 12px}
.jsemnav .jsd{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;
min-width:58px;padding:6px 10px;border:1px solid var(--ligne);border-radius:10px;background:var(--carte);
cursor:pointer;font:inherit;color:var(--encre-2);line-height:1.1}
.jsemnav .jsd b{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.jsemnav .jsd span{font-family:var(--f-titre);font-size:16px;font-weight:700;color:var(--encre)}
.jsemnav .jsd i{position:absolute;top:-6px;right:-6px;font-style:normal;font-size:10px;font-weight:700;
background:var(--encre);color:#fff;border-radius:9px;padding:1px 6px}
.jsemnav .jsd.we{background:#F6F3EC}
.jsemnav .jsd.ferie span{color:var(--rouge)}
.jsemnav .jsd.today{border-color:var(--terra)}
.jsemnav .jsd.today span{color:var(--terra-h)}
.jsemnav .jsd.on{background:var(--encre);border-color:var(--encre);color:#fff}
.jsemnav .jsd.on span,.jsemnav .jsd.on b{color:#fff}
.jsemnav .jsd:hover:not(.on){border-color:var(--encre-2)}
/* v7.20.1 — Vue Jour : le bouton « + note » du bandeau Événements
était invisible (révélé seulement au survol d'une case .dd du
planning, qui n'existe pas ici). */
.jevts .dnote{width:auto;margin:0;border:1px solid var(--ligne);border-radius:20px;padding:3px 10px}
.jevts .dnote.add{opacity:1;color:var(--muet);border-style:dashed}
/* Badge d'alerte sur un shift de la grille horaire : à l'intérieur
du bloc (overflow:clip y rognerait un badge débordant), et
au-dessus du texte collant. */
.jgrid .jsh .wshift{position:absolute;top:4px;right:14px;margin:0;z-index:4}
/* v7.20.1 — Séparateur de jour (vue Semaine) : chaque repère est
un élément en ligne, côte à côte. Les règles héritées du
planning (copie en absolu, note pleine largeur, bande de
vacances) se chevauchaient. */
.jgrid.jgsem .jdaysep .jdin{gap:8px}
.jgrid.jgsem .jdaysep .jdin > *{flex:none}
.jgrid.jgsem .jdaysep .dcopie{position:static;top:auto;right:auto;opacity:.85;margin-left:2px;
background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35);color:#fff}
.jgrid.jgsem .jdaysep .dcopie:hover{opacity:1;background:#fff;color:var(--terra-h)}
.jgrid.jgsem .jdaysep .dnote{width:auto;margin:0;border:1px solid var(--ligne);border-radius:20px;
padding:3px 10px;max-width:260px}
.jgrid.jgsem .jdaysep .dnote.add{opacity:1;color:rgba(255,255,255,.8);border-style:dashed;
border-color:rgba(255,255,255,.45);background:none}
.jgrid.jgsem .jdaysep .dnote.add:hover{background:#fff;color:var(--encre)}
.jgrid.jgsem .jdaysep .ev{margin:0}
.jgrid.jgsem .jdaysep .ev.vac{border-radius:20px;min-height:auto;width:auto}
.jgrid.jgsem .jdaysep .jdtot{margin-left:4px}
/* v7.21 — Météo cliquable sur toutes les vues */
.jevts .jmeteo,.jgrid.jgsem .jdaysep .jdmeteo{border:none;background:none;cursor:pointer;
padding:2px 6px;border-radius:8px;font:inherit;display:inline-flex;align-items:center;gap:4px}
.jevts .jmeteo{font-size:11px;font-weight:600;color:var(--encre-2)}
.jevts .jmeteo i{font-style:normal}
.jevts .jmeteo:hover{background:var(--surface-2)}
.jgrid.jgsem .jdaysep .jdmeteo:hover{background:rgba(255,255,255,.15)}
/* Barre des jours dans l'en-tête : compacte */
.plbar .jsemnav{margin:0;gap:3px}
.plbar .jsemnav .jsd{min-width:34px;padding:3px 4px;gap:0;border-radius:8px}
.plbar .jsemnav .jsd b{font-size:8px;letter-spacing:.02em}
.plbar .jsemnav .jsd span{font-size:12.5px}
.plbar .jsemnav .jsd i{display:none}
/* Le sélecteur de parcs cède de la place à la barre des jours */
body.vue-semaine .psel{width:min(300px,100%)}
/* ═══ v7.23 · Tiroir shift / absence — fiche en sections ═══
Un résumé permanent en tête, des sections nommées, et les
décisions courantes (créneau, pause) en pastilles plutôt qu'en
champs. Les actions rares passent dans un menu, pour ne laisser
qu'une action évidente en pied. */
.dwr .panel.dwr2{width:min(500px,96vw)}
.dwrecap{display:flex;align-items:center;gap:11px;margin:12px 18px 0;padding:10px 13px;
background:var(--surface-2);border:1px solid var(--ligne);border-radius:12px}
.dwrecap .avm{width:28px;height:28px;border-radius:50%;color:#fff;display:flex;align-items:center;
justify-content:center;font-size:10px;font-weight:700;flex:none;background:var(--encre-2)}
.dwrecap .qq{min-width:0;flex:1}
.dwrecap .qq b{display:block;font-size:13.5px;font-weight:600;color:var(--encre);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dwrecap .qq i{display:block;font-style:normal;font-size:11.5px;color:var(--muet);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dwrecap .dd{text-align:right;flex:none}
.dwrecap .dd b{display:block;font-family:var(--f-titre);font-size:17px;font-weight:700;line-height:1;color:var(--encre)}
.dwrecap .dd i{font-style:normal;font-size:10.5px;color:var(--muet)}
.dwsect{padding:15px 0;border-bottom:1px solid var(--ligne)}
.dwsect:first-child{padding-top:4px}
.dwsect:last-of-type{border-bottom:none}
.dwsh{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
.dwsh b{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--encre)}
.dwsh i{font-style:normal;font-size:11.5px;color:var(--muet)}
.dwsect .rowf{margin-bottom:9px}
.dwsect .fl{display:block;font-size:11.5px;font-weight:600;color:var(--encre-2);margin-bottom:5px}
/* Horaires en gros : c'est la donnée qu'on relit le plus */
.qheures{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--ligne);
border-radius:13px;padding:10px 13px;margin-top:10px}
.qheures input[type=time]{font-family:var(--f-titre);font-size:21px;font-weight:700;color:var(--encre);
border:none;background:none;padding:0;width:auto;min-width:96px;max-width:150px;text-align:center;
font-feature-settings:"tnum"}
.qheures input[type=time]:focus{outline:none;color:var(--terra-h)}
.qheures .fl{color:var(--muet);font-size:15px}
.qheures .dd{margin-left:auto;text-align:right}
.qheures .dd b{display:block;font-family:var(--f-titre);font-size:17px;font-weight:700;line-height:1}
.qheures .dd i{font-style:normal;font-size:10.5px;color:var(--muet)}
.qchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.qchip{border:1px solid var(--ligne-2);background:#fff;border-radius:20px;padding:5px 12px;
font-family:var(--f-ui);font-size:11.5px;font-weight:600;color:var(--encre-2);cursor:pointer}
.qchip:hover{border-color:var(--muet)}
.qchip.on{background:var(--encre);border-color:var(--encre);color:#fff}
/* Les lignes de pause détaillées ne s'affichent qu'au besoin */
.dwsect .pauses:not(.ouvert){display:none}
.dwmore{border:none;background:none;font-family:var(--f-ui);font-size:12.5px;font-weight:600;
color:var(--encre-2);cursor:pointer;padding:11px 0;display:flex;align-items:center;gap:7px;
width:100%;border-top:1px solid var(--ligne)}
.dwmore span{transition:transform .15s;display:inline-block}
.dwmore.open span{transform:rotate(90deg)}
.dwextra{display:none;padding:2px 0 12px}
.dwextra.open{display:block}
/* Menu des actions rares, en pied */
.dwkeb{position:relative}
.dwkeb > .btn{flex:none;width:40px;padding:9px 0}
.dwkmenu{position:absolute;bottom:calc(100% + 6px);left:0;background:#fff;border:1px solid var(--ligne);
border-radius:11px;box-shadow:var(--ombre-2);padding:5px;display:none;min-width:210px;z-index:5}
.dwkeb.open .dwkmenu{display:block}
.dwkmenu button{display:flex;width:100%;gap:9px;align-items:center;border:none;background:none;
font-family:var(--f-ui);font-size:12.5px;font-weight:500;color:var(--encre);padding:9px 10px;
border-radius:8px;cursor:pointer;text-align:left}
.dwkmenu button:hover{background:var(--surface-2)}
.dwkmenu button.d{color:var(--rouge)}
/* ═══ v7.23 · Vue Postes — la couverture d'une journée ═══
Le fond de chaque quart d'heure porte l'information : tenu,
doublé, ou trou pendant l'ouverture. On lit une ligne sans
compter les blocs. */
.jgrid.jgpos .jh.ouv{background:#fff}
.jgrid.jgpos .jcell.ok{background:var(--vert-pale)}
.jgrid.jgpos .jcell.plus{background:var(--bleu-pale)}
.jgrid.jgpos .jcell.trou{background:var(--rouge-pale);box-shadow:inset 0 -2px 0 var(--rouge)}
.jgrid.jgpos .jcell.hors{background:var(--surface-2);background-image:none}
.jgrid.jgpos .jlab.jposte{gap:9px}
.jgrid.jgpos .jlab .pastille{width:10px;height:26px;border-radius:4px;flex:none}
/* Deux personnes sur le même poste à la même heure : on EMPILE
plutôt que de superposer, et la ligne grandit d'autant (sa
hauteur est posée par le serveur, qui seul connaît le nombre de
piles). */
.jgrid.jgpos .jsh.jshp{align-self:start;height:26px;padding:3px 9px;
margin-top:calc(5px + var(--pi,0) * 30px);margin-bottom:0;
flex-direction:row;align-items:center;gap:8px}
.jgrid.jgpos .jsh.jshp .t{font-size:9px;flex:none}
.jgrid.jgpos .jsh.jshp .h{font-size:10.5px}
.jgrid.jgpos .jsh .t .conf{font-style:normal;font-weight:700;color:var(--rouge);
background:var(--rouge-pale);border-radius:5px;padding:0 5px;margin-left:4px}
.jgrid.jgpos .jsh.jshna{border-style:dashed}
/* Liste des trous : chaque ligne est une action, pas un constat */
.trlist{display:flex;flex-direction:column}
.tritem{display:flex;align-items:center;gap:11px;padding:11px 16px;border:none;background:none;
border-top:1px solid var(--ligne);font-family:var(--f-ui);font-size:13px;color:var(--encre);
cursor:pointer;text-align:left;width:100%}
.tritem:first-child{border-top:none}
.tritem:hover{background:var(--surface-2)}
.tritem .pastille{width:9px;height:20px;border-radius:3px;flex:none}
.tritem b{font-weight:600;min-width:120px}
.tritem .hh{font-family:var(--f-titre);font-weight:700;color:var(--rouge)}
.tritem .du{font-size:11.5px;color:var(--muet)}
.tritem .go{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--terra-h);
border:1px solid var(--ligne-2);border-radius:20px;padding:3px 11px}
.tritem:hover .go{border-color:var(--terra);background:var(--terra-pale)}
/* ═══ v7.23 · Vue Temps réel — planning croisé aux pointages ═══ */
.trbar{display:flex;align-items:center;gap:22px;background:var(--carte);border:1px solid var(--ligne);
border-radius:14px;padding:13px 18px;margin-bottom:14px;box-shadow:var(--ombre)}
.trh .thnow{font-family:var(--f-titre);font-size:30px;font-weight:700;line-height:1;display:block}
.trh .thd{font-size:11.5px;color:var(--muet);text-transform:capitalize}
.trkpi{display:flex;gap:26px;margin-left:8px}
.trkpi .k b{display:block;font-family:var(--f-titre);font-size:22px;font-weight:700;line-height:1.1}
.trkpi .k span{font-size:11px;color:var(--muet)}
.trkpi .k.ko b{color:var(--rouge)}
.trauto{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:12px;color:var(--encre-2)}
.trlist2{display:flex;flex-direction:column}
.tri{display:flex;align-items:center;gap:12px;padding:11px 16px;border-top:1px solid var(--ligne)}
.tri:first-child{border-top:none}
/* La pastille de gauche porte l'état : on balaie la colonne sans
lire les libellés. */
.tri .pt{width:7px;height:34px;border-radius:4px;background:var(--ligne-2);flex:none}
.tri.ok .pt{background:var(--vert)} .tri.at .pt{background:var(--jaune)}
.tri.ko .pt{background:var(--rouge)} .tri.pz .pt{background:var(--bleu)}
.tri.nx .pt{background:var(--ligne-2)} .tri.fi .pt{background:var(--muet)}
.tri.np .pt{background:var(--jaune)} .tri.ab .pt{background:var(--violet)}
.tri.na .pt{background:var(--terra)}
.tri.ko{background:var(--rouge-pale)}
.tri.at{background:var(--jaune-pale)}
.tri .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}
.tri .who{min-width:190px}
.tri .who b{display:block;font-size:13.5px;font-weight:600}
.tri .who .po{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muet)}
.tri .who .po i{width:8px;height:8px;border-radius:3px;display:block}
.tri .hr{min-width:190px}
.tri .hr b{font-family:var(--f-titre);font-size:13px;font-weight:700}
.tri .hr .pt2{display:block;font-size:10.5px;color:var(--muet)}
.tri .hr .jauge{display:block;height:4px;border-radius:3px;background:var(--ligne);margin-top:5px;overflow:hidden}
.tri .hr .jauge i{display:block;height:100%;background:var(--vert)}
.tri .et{margin-left:auto;display:flex;align-items:center;gap:8px}
.tri .et .badge{font-size:11px;font-weight:700;border-radius:20px;padding:3px 11px;
background:var(--surface-2);color:var(--encre-2);white-space:nowrap}
.tri.ok .et .badge{background:var(--vert-pale);color:var(--vert)}
.tri.at .et .badge{background:#F6E9C8;color:var(--jaune)}
.tri.ko .et .badge{background:var(--rouge);color:#fff}
.tri.pz .et .badge{background:var(--bleu-pale);color:var(--bleu)}
.tri.ab .et .badge{background:var(--violet-pale);color:var(--violet)}
.tri.na .et .badge{background:var(--terra-pale);color:var(--terra-h)}
.tri .et .ret{font-size:11px;font-weight:700;color:var(--rouge)}
.tri .et .ret.nx{color:var(--muet);font-weight:600}
.tri .go{font-size:11.5px;font-weight:600;color:var(--encre-2);text-decoration:none;
border:1px solid var(--ligne-2);border-radius:20px;padding:4px 12px}
.tri .go:hover{border-color:var(--terra);color:var(--terra-h)}
/* Sélections groupées du tiroir (v7.24) */
.dwsh .qmini{margin-left:auto;border:1px solid var(--ligne-2);background:#fff;border-radius:20px;
padding:2px 9px;font-family:var(--f-ui);font-size:10.5px;font-weight:700;color:var(--encre-2);cursor:pointer}
.dwsh .qmini + .qmini{margin-left:4px}
.dwsh .qmini:hover{border-color:var(--terra);color:var(--terra-h)}
/* Modèles de saisie personnalisables (v7.25) : la pastille porte
son crayon, révélé au survol — un mode « gestion » séparé
obligerait à sortir du formulaire pour renommer un créneau. */
.qchips.gerable .qchip{position:relative;padding-right:12px}
.qchips.gerable .qchip .ed{position:absolute;top:-7px;right:-7px;width:17px;height:17px;border-radius:50%;
background:#fff;border:1px solid var(--ligne-2);color:var(--encre-2);font-size:9px;font-style:normal;
display:none;align-items:center;justify-content:center;line-height:1}
.qchips.gerable .qchip:hover .ed{display:flex}
.qchips.gerable .qchip .ed:hover{border-color:var(--terra);color:var(--terra-h);background:var(--terra-pale)}
.qchips.gerable .qchip.on .ed{background:#fff}
.qchip.add{border-style:dashed;font-weight:700;padding:5px 11px;color:var(--muet)}
.qchip.add:hover{border-color:var(--terra);color:var(--terra-h);border-style:solid}
.mdbox{width:min(460px,94vw);display:flex;flex-direction:column}
.mdh{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--ligne)}
.mdh h3{font-family:var(--f-titre);font-size:16px;font-weight:600;margin:0;flex:1}
.mdb{padding:16px 18px}
.mdb .fl{display:block;font-size:11.5px;font-weight:600;color:var(--encre-2);margin-bottom:5px}
.mdb .f2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.mdf{display:flex;gap:8px;align-items:center;padding:13px 18px;border-top:1px solid var(--ligne);
background:var(--surface-2)}
/* ═══ v7.25 · Vue Mois — le planning du mois, salarié par salarié ═══
La colonne des noms et la ligne des dates restent figées ; les
lundis portent un filet plus marqué, les week-ends une teinte.
Deux réglages font varier l'encombrement des cases. */
.moisbar{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.moisbar .mtitre{font-family:var(--f-titre);font-size:18px;font-weight:700;text-transform:capitalize;
min-width:150px;text-align:center}
.moisbar .sp2{flex:1}
.moisbar .mopt{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--encre-2)}
.moisbar .mstat{font-size:12.5px;color:var(--encre-2)}
.moisbar .mstat b{font-family:var(--f-titre);font-weight:700}
.mowrap{overflow:auto;max-height:calc(100vh - 250px)}
.mogrid{display:grid;min-width:max-content;position:relative}
.mogrid .monom{position:sticky;left:0;z-index:25;background:#fff;border-top:1px solid var(--ligne);
display:flex;align-items:center;gap:9px;padding:6px 12px;min-width:0}
.mogrid .monom .avm{width:26px;height:26px;border-radius:50%;color:#fff;display:flex;align-items:center;
justify-content:center;font-size:9.5px;font-weight:700;flex:none}
.mogrid .monom .n{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mogrid .monom .c{font-size:10.5px;color:var(--muet);margin-left:auto;font-family:var(--f-titre);font-weight:700}
.mogrid .monom.mohd{position:sticky;top:0;z-index:32;background:var(--surface-2);border-top:none;
border-bottom:1px solid var(--ligne);font-size:10.5px;font-weight:700;letter-spacing:.06em;
text-transform:uppercase;color:var(--muet)}
.mogrid .mohs{position:sticky;top:0;z-index:22;background:var(--surface-2);border-bottom:1px solid var(--ligne);
border-left:1px solid var(--ligne);padding:5px 0 6px;text-align:center}
.mogrid .mohs .sem{position:absolute;top:2px;left:3px;font-size:8.5px;font-weight:700;color:#fff;
background:var(--encre);border-radius:4px;padding:0 4px}
.mogrid .mohs .jj{display:block;font-size:9.5px;font-weight:700;letter-spacing:.05em;
text-transform:uppercase;color:var(--muet)}
.mogrid .mohs .nn{display:block;font-family:var(--f-titre);font-size:15px;font-weight:700;line-height:1.15}
.mogrid .mohs.we{background:#F4F0E7}
.mogrid .mohs.ferie .nn{color:var(--rouge)}
.mogrid .mohs.today .nn{background:var(--terra);color:#fff;border-radius:7px;display:inline-block;padding:0 6px}
.mogrid .mohs.lun,.mogrid .mocel.lun{border-left:1px solid var(--ligne-2)}
.mogrid .mohs.motot{background:var(--encre);color:#fff;border-left-color:var(--encre);z-index:23}
.mogrid .mohs.motot .jj{color:rgba(255,255,255,.7)}
.mogrid .mocel{border-left:1px solid var(--surface-2);border-top:1px solid var(--ligne);
padding:3px;display:flex;flex-direction:column;gap:2px;min-height:44px}
.mogrid .mocel.we{background:#FBF8F2}
.mogrid .mocel.today{background:#FEF7F4}
.mogrid .mocel.horsc{background:repeating-linear-gradient(-45deg,#F6F3EC,#F6F3EC 5px,#FBF9F4 5px,#FBF9F4 10px)}
.mogrid .mocel.motot{position:sticky;right:0;z-index:21;background:var(--surface-2);
border-left:1px solid var(--ligne);align-items:center;justify-content:center;gap:1px}
.mogrid .mocel.motot b{font-family:var(--f-titre);font-size:12.5px;font-weight:700}
.mogrid .mocel.motot .ec{font-size:10px;font-weight:700}
.mogrid .mocel.motot .ec.p{color:var(--vert)} .mogrid .mocel.motot .ec.m{color:var(--rouge)}
/* Un shift : ses deux heures, l'une sous l'autre — c'est ce qu'on
lit dans une case de 62 px. Le poste et les horaires s'affichent
ou se masquent selon les réglages de la barre. */
.mosh{border-radius:5px;padding:2px 4px;font-size:9.5px;font-weight:700;line-height:1.25;
border-left:2.5px solid;cursor:pointer;font-family:var(--f-titre);overflow:hidden}
.mosh:hover{filter:brightness(.96)}
.mosh i{display:block;font-style:normal;opacity:.75;font-weight:600}
.mosh .po{display:none;font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.85}
.mosh.na{border-style:dashed;border-width:1px 1px 1px 2.5px}
.mogrid.avecp .mosh .po{display:block}
.mogrid.sansh .mosh .hd,.mogrid.sansh .mosh i{display:none}
.mogrid.sansh .mosh{min-height:9px;padding:4px}
.mogrid.sansh.avecp .mosh{min-height:0;padding:2px 4px}
.moabs{border-radius:5px;font-size:9px;font-weight:700;padding:3px 4px;text-align:center;cursor:pointer;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.moabs.att{border:1px dashed currentColor}
.moplus{border:1px dashed var(--ligne-2);border-radius:5px;color:var(--muet);background:none;
font-family:var(--f-ui);font-size:11px;cursor:pointer;padding:1px 0;opacity:0;transition:.12s;margin-top:auto}
.mocel:hover .moplus{opacity:1}
.moplus:hover{border-color:var(--terra);color:var(--terra-h);background:var(--terra-pale)}
/* Le séparateur occupe TOUTE la ligne (1/-1) : posé sur la seule
colonne 1, il décalait toutes les cases suivantes d'un cran. Son
contenu, lui, est figé à gauche. */
.mogrid .moeqsep{grid-column:1/-1;background:var(--surface-2);z-index:26;
border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);
font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--encre-2)}
.mogrid .moeqsep > span.in{position:sticky;left:0;display:inline-flex;align-items:center;gap:8px;
padding:4px 12px}
.mogrid .moeqsep .ep{width:3px;height:11px;border-radius:2px;background:var(--terra);flex:none}
.mogrid .moeqsep.sans .ep{background:var(--ligne-2)}
body.sans-equipes .moeqsep{display:none}
/* Lignes de contexte : la journée, pas une personne */
.mogrid .monom.moctx,.mogrid .mocel.moctx{background:var(--surface-2);min-height:30px}
.mogrid .monom.moctx{font-size:11px;font-weight:600;color:var(--encre-2)}
.mogrid .mocel.moctx.today{background:#FBEFE9}
.evj{font-size:8.5px;font-weight:700;border-radius:5px;padding:2px 4px;line-height:1.2;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:none;font-family:var(--f-ui);
text-align:left;cursor:default}
.evj.fe{background:var(--rouge-pale);color:var(--rouge)}
.evj.an{background:var(--violet-pale);color:var(--violet)}
.evj.va{background:#E4EAF6;color:#3E5480}
.evj.va.t2{background:#EFE7F3;color:#6E4A6A} .evj.va.t3{background:#E7F0E4;color:#3E6029}
.evj.va.t4{background:#F8E9DF;color:#8C5A15}
.evj.no{background:var(--jaune-pale);color:var(--jaune);cursor:pointer}
.evj.noadd{background:none;border:1px dashed var(--ligne-2);color:var(--muet);cursor:pointer;
opacity:0;transition:.12s;margin-top:auto}
.mocel:hover .evj.noadd{opacity:1}
body.sans-feries .evj.fe,body.sans-anniv .evj.an,body.sans-vacances .evj.va,
body.sans-notes .evj.no,body.sans-notes .evj.noadd{display:none}
/* ═══ v7.25 · Vue Présences — un mois sur une page ═══ */
.srcseg{display:flex;background:var(--surface-2);border:1px solid var(--ligne);border-radius:10px;padding:3px}
.srcseg a{padding:5px 14px;border-radius:8px;font-size:12px;font-weight:600;color:var(--encre-2);text-decoration:none}
.srcseg a.on{background:#fff;color:var(--encre);box-shadow:var(--ombre)}
.prwrap{overflow:auto;max-height:calc(100vh - 260px)}
.prgrid{display:grid;min-width:max-content}
.prgrid .prh{position:sticky;top:0;z-index:20;background:var(--surface-2);border-bottom:1px solid var(--ligne);
text-align:center;padding:4px 0 5px}
.prgrid .prh .dd{display:block;font-family:var(--f-titre);font-size:12px;font-weight:700;line-height:1.1}
.prgrid .prh .jj{display:block;font-size:8.5px;color:var(--muet);text-transform:uppercase}
.prgrid .prh.we{background:#F4F0E7}
.prgrid .prh.today .dd{background:var(--terra);color:#fff;border-radius:6px}
.prgrid .prh.lun,.prgrid .prc.lun{border-left:1px solid var(--ligne-2)}
.prgrid .prn{position:sticky;left:0;z-index:25;background:#fff;padding:5px 12px;text-align:right;
font-size:12px;border-top:1px solid var(--ligne);white-space:nowrap}
.prgrid .prn b{font-weight:700}
.prgrid .prn.prhd,.prgrid .prt.prhd{position:sticky;top:0;z-index:32;background:var(--encre);color:#fff;
border-bottom:1px solid var(--encre);border-top:none;font-size:10px;font-weight:700;letter-spacing:.06em;
text-transform:uppercase;text-align:center}
.prgrid .prn.prhd{text-align:right;z-index:33}
.prgrid .prc{border-top:1px solid #fff;border-left:1px solid #fff;height:26px;display:flex;
align-items:center;justify-content:center;font-size:10.5px;font-weight:700;font-family:var(--f-titre)}
.prgrid .prc.vide{background:var(--surface-2)}
.prgrid .prc.vide.we{background:#F4F0E7}
.prgrid .prc.vide.horsc{background:repeating-linear-gradient(-45deg,#F1ECE1,#F1ECE1 3px,#FBF9F4 3px,#FBF9F4 6px)}
.prgrid .prc.trav{background:var(--vert);color:#fff}
.prgrid .prc.trav.l{background:#8FB27A}
.prgrid .prc.trav.h{background:#3F6B27}
.prgrid .prc.abs{font-size:9px;letter-spacing:.02em}
.prgrid .prc.abs.att{box-shadow:inset 0 0 0 2px #fff}
.prgrid .prt{position:sticky;right:0;z-index:24;background:var(--surface-2);border-left:1px solid var(--ligne);
border-top:1px solid var(--ligne);display:flex;align-items:center;justify-content:center;gap:6px;
font-family:var(--f-titre);font-size:11.5px;font-weight:700;padding:0 10px}
.prgrid .prt .ec{font-size:10px;font-weight:700}
.prgrid .prt .ec.p{color:var(--vert)} .prgrid .prt .ec.m{color:var(--rouge)}
.prgrid .preq{grid-column:1/-1;background:var(--surface-2);z-index:26;
border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);
font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--encre-2)}
.prgrid .preq > span.in{position:sticky;left:0;display:inline-flex;align-items:center;gap:8px;padding:3px 12px}
.prgrid .preq .ep{width:3px;height:11px;border-radius:2px;background:var(--terra);flex:none}
.prleg{display:flex;flex-wrap:wrap;gap:8px 18px;padding:12px 16px;border-top:1px solid var(--ligne);
background:var(--surface-2)}
.prleg span{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--encre-2)}
.prleg i{width:13px;height:13px;border-radius:4px;display:block}
.prleg .plus{color:var(--muet);font-style:italic;margin-left:auto}
/* v7.26 — Sélecteur de dates commun : en vue Mois il propose les
douze mois de l'année, et le bandeau propre à la vue ne porte
plus que ses réglages. */
.wknav.wkmois .wkd{min-width:132px;text-transform:capitalize}
.dpg.dpg12{grid-template-columns:repeat(3,1fr);gap:6px;padding:10px}
.dpm{border:1px solid var(--ligne-2);background:#fff;border-radius:9px;padding:9px 4px;
font-family:var(--f-ui);font-size:12px;font-weight:600;color:var(--encre-2);cursor:pointer;
text-transform:capitalize}
.dpm:hover{border-color:var(--terra);color:var(--terra-h)}
.dpm.on{background:var(--encre);border-color:var(--encre);color:#fff}
/* ═══ v7.27 · Réglages du temps de travail ═══ */
.rgtabs{display:flex;gap:6px;margin:0 0 16px;flex-wrap:wrap}
.rgtab{display:inline-flex;align-items:center;gap:8px;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)}
.rgtab .ico{width:15px;height:15px}
.rgtab:hover{border-color:var(--muet)}
.rgtab.on{background:var(--encre);border-color:var(--encre);color:#fff}
.duo{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}
@media(max-width:1150px){.duo{grid-template-columns:1fr}}
.expl{background:var(--surface-2);border:1px solid var(--ligne);border-radius:14px;padding:15px 16px;
font-size:12.5px;line-height:1.6;color:var(--encre-2);position:sticky;top:16px}
.expl h4{font-family:var(--f-titre);font-size:13px;font-weight:700;margin:0 0 9px;color:var(--encre)}
.expl p{margin:0 0 10px}
.expl .kv{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid var(--ligne)}
.expl .kv:last-of-type{border-bottom:none}
.expl .kv b{font-family:var(--f-titre);color:var(--encre);text-align:right}
/* Une période : ses paramètres se lisent d'un regard, sans ouvrir */
.rgper{display:flex;align-items:center;gap:14px;padding:13px 16px;border-top:1px solid var(--ligne);
flex-wrap:wrap}
.rgper:first-of-type{border-top:none}
.rgper.encours{background:var(--terra-pale)}
.rgper.close{opacity:.55}
.rgper .pn{min-width:230px}
.rgper .pn b{font-family:var(--f-titre);font-size:14px;font-weight:700;margin-right:7px}
.rgper .pn .dd{display:block;font-size:11.5px;color:var(--muet);margin-top:2px}
.rgper .pk{display:flex;gap:20px;flex-wrap:wrap;flex:1}
.rgper .pk span{display:block}
.rgper .pk i{display:block;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.06em;
text-transform:uppercase;color:var(--muet)}
.rgper .pk b{font-family:var(--f-titre);font-size:13px;font-weight:700}
.rgper .pa{display:flex;gap:7px}
.rgvide{padding:22px 16px;color:var(--encre-2);line-height:1.6}
.rgvide b{display:block;font-family:var(--f-titre);font-size:14px;color:var(--encre);margin-bottom:6px}
.rgvide p{margin:0 0 8px;max-width:640px}
.rgvide .pt{font-size:12px;color:var(--muet)}
/* ═══ v7.28 · Liste des salariés : l'état, pas seulement l'identité ═══ */
.av-m.avet{position:relative}
.av-m.avet::after{content:'';position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;
border-radius:50%;border:2px solid #fff;background:var(--ligne-2)}
.av-m.avet.enposte::after{background:var(--vert)}
.av-m.avet.attendu::after{background:var(--jaune)}
.av-m.avet.absent::after{background:var(--violet)}
.av-m.avet.sorti::after{background:var(--rouge)}
.jaugel{height:5px;border-radius:3px;background:var(--ligne);overflow:hidden;min-width:74px;max-width:110px}
.jaugel i{display:block;height:100%;background:var(--vert)}
.jaugel i.wa{background:var(--jaune)} .jaugel i.ko{background:var(--rouge)}
/* Un point de vigilance mène là où on le règle : le libellé est un
lien vers le bon onglet de la fiche. */
.vigc{display:inline-flex;align-items:center;gap:8px;text-decoration:none;max-width:230px}
.vigc .vgd{display:inline-flex;gap:3px;flex:none}
.vigc .vgd i{width:7px;height:7px;border-radius:50%;background:var(--jaune);display:block}
.vigc .vgd i.r{background:var(--rouge)}
.vigc .vgt{font-size:11.5px;font-weight:600;color:var(--jaune);line-height:1.35}
.vigc.r .vgt{color:var(--rouge)}
.vigc .vgt em{font-style:normal;font-weight:700;opacity:.7}
.vigc:hover .vgt{text-decoration:underline}
/* ═══ v7.28 · Fiche salarié : bandeau riche et onglets ═══ */
.band.bandx{display:block;padding:16px 18px}
.bandx .bl1{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.bandx .avatar{position:relative}
.bandx .avatar.avet::after{content:'';position:absolute;right:0;bottom:0;width:13px;height:13px;
border-radius:50%;border:2.5px solid #fff;background:var(--ligne-2)}
.bandx .avatar.avet.enposte::after{background:var(--vert)}
.bandx .avatar.avet.attendu::after{background:var(--jaune)}
.bandx .avatar.avet.absent::after{background:var(--violet)}
.bandx .avatar.avet.sorti::after{background:var(--rouge)}
.bandx .bid{min-width:210px}
.bandx .bnow{background:var(--surface-2);border:1px solid var(--ligne);border-radius:12px;
padding:9px 13px;font-size:12px;min-width:250px}
.bandx .bnow b{display:block;font-family:var(--f-titre);font-size:13.5px;margin-bottom:2px}
.bandx .bnow span{color:var(--muet)}
.bandx .ba{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.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)}
.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)}
/* ═══ 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