/* ═══════════════════════════════════════════════════════════════
   ÉDITEUR DE CALENDRIER ROULEMENT SAV — styles
   :root / reset → header → contrôles → stats → grille annuelle
   → zoom → tooltip → panels → couleurs → print → responsive
═══════════════════════════════════════════════════════════════ */

/* La page ne défile jamais horizontalement : le débordement (zoom)
   est géré par le scroll interne de .content */
html,body{overflow-x:clip;max-width:100vw}

/* ── BANDEAU HORS-LIGNE ──
   Affiché par assets/js/api.js quand le serveur est injoignable et que les
   données affichées proviennent du dernier cache local connu (lecture seule,
   pas de saisie hors-ligne). En overlay (ne pousse pas le contenu) car état
   rare/exceptionnel. */
.offline-banner{position:fixed;top:0;left:0;right:0;z-index:1000;
  background:var(--fer-bg);color:var(--fer-tx);font-size:12px;font-weight:700;
  text-align:center;padding:6px 12px;box-shadow:var(--shadow-sm)}

/* ── APP SHELL / RAIL DE NAVIGATION ── */
.app-shell{display:flex;align-items:stretch}
.rail{width:104px;flex:none;background:var(--rail-bg);display:flex;flex-direction:column;
      align-items:center;gap:8px;padding:18px 10px 14px;position:fixed;top:0;left:0;
      height:100vh;overflow-y:auto;z-index:100}
.rail-brand{display:flex;flex-direction:column;align-items:center;gap:1px;margin-bottom:2px}
.rail-brand-name{font-size:18px;font-weight:800;letter-spacing:2.5px;color:#fff}
.rail-brand-sub{font-size:8.5px;font-weight:600;letter-spacing:2.2px;color:rgba(255,255,255,.55)}
.rail-divider{width:46px;height:1px;background:rgba(255,255,255,.14);flex-shrink:0}
.rail-btn{display:flex;flex-direction:column;align-items:center;gap:4px;width:80px;
          padding:8px 4px;border:none;border-radius:11px;background:none;
          color:rgba(255,255,255,.6);cursor:pointer;font-family:inherit;
          transition:background .15s,color .15s;flex-shrink:0}
.rail-btn:hover{background:rgba(255,255,255,.08);color:#fff}
.rail-btn.active{background:rgba(255,255,255,.16);color:#fff}
.rail-btn-lbl{font-size:9.5px;font-weight:600}
.rail-btn-sub{font-size:9.5px;font-weight:500;color:rgba(255,255,255,.55)}
.rail-btn--decorative{opacity:.4;cursor:not-allowed}
.rail-btn--decorative:hover{background:none;color:rgba(255,255,255,.6)}
.rail-btn--logged{color:#fff}
.rail-btn--logged .rail-btn-lbl{color:#7CD992}
.rail-spacer{flex:1}

.content-col{flex:1;min-width:0;display:flex;flex-direction:column;margin-left:104px}

/* ── TOPBAR SMARTPHONE (repli, masqué desktop/tablette) ── */
.phone-topbar{display:none;background:var(--white);border-bottom:1px solid var(--bd);
              padding:0 12px;align-items:center;gap:10px;box-shadow:var(--shadow-sm);
              position:sticky;top:0;z-index:100;flex-shrink:0}
.phone-topbar-title{display:flex;flex-direction:column;flex:1;min-width:0}
.phone-topbar-title .hdr-title{font-size:15px;font-weight:800;letter-spacing:-.2px;
                                white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr-icon-btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--bd);
              background:var(--surf);color:var(--tx3);cursor:pointer;
              display:flex;align-items:center;justify-content:center;
              padding:0;transition:all .2s;flex-shrink:0}
.hdr-icon-btn:hover{background:var(--surf2);border-color:var(--bd2)}

/* ── TOPBAR / OPTIONSBAR (partagées vue annuelle + vue mensuelle) ── */
.topbar{background:var(--white);border-bottom:1px solid var(--bd);padding:0 16px;height:52px;
        display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:100;
        flex-shrink:0;box-shadow:var(--shadow-sm)}
.topbar-title{display:flex;flex-direction:column;flex-shrink:0}
.hdr-title{font-size:19px;font-weight:800;letter-spacing:-.4px;color:var(--tx);line-height:1.15}
.topbar-pager{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;flex:1}
.topbar-tools{display:flex;align-items:center;gap:5px;flex-shrink:0;justify-content:flex-end}
.ctrl-sep{width:1px;height:22px;background:var(--bd);flex-shrink:0;margin:0 2px}
.ctrl-group{display:flex;align-items:center;gap:5px;flex-shrink:0}
.ctrl-group--tight{gap:1px}
.pdf-menu-wrap{position:relative;display:inline-flex}

select{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:11px;font-weight:500;padding:4px 26px 4px 9px;border:1px solid var(--bd);border-radius:var(--r-sm);background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238490a8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 7px center;-webkit-appearance:none;appearance:none;color:var(--tx);cursor:pointer;height:34px;transition:border-color .15s;-webkit-tap-highlight-color:transparent}
select:hover{border-color:var(--bd2)}
select:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 2px var(--acc-lt)}
select:disabled{opacity:.45;cursor:not-allowed}

.btn{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:12px;font-weight:500;padding:5px 13px;border-radius:var(--r-sm);border:1px solid var(--bd);background:var(--surf);color:var(--tx2);cursor:pointer;transition:all .15s;white-space:nowrap;height:34px;display:flex;align-items:center;gap:5px;-webkit-tap-highlight-color:transparent}
.btn:hover{background:var(--surf);border-color:var(--bd2)}
.btn-primary{background:var(--acc-lt);border-color:var(--acc-mid);color:var(--acc);font-weight:600}
.btn-edit-on{background:#fef3c7;color:#92400e;border-color:#fcd34d!important;font-weight:600}
.btn-edit-on:hover{background:#fde68a!important}

.ctrl-btn{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 9px;
  border-radius:var(--r-sm);border:1px solid var(--bd);background:var(--surf);
  color:var(--tx2);font-size:11px;font-weight:500;cursor:pointer;white-space:nowrap;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;transition:all .13s;flex-shrink:0}
.ctrl-btn:hover{background:var(--surf2);border-color:var(--bd2);color:var(--tx)}
.ctrl-btn-pdf:hover{background:#eff6ff;border-color:#93c5fd;color:#1e40af}
.ctrl-btn--active{background:var(--acc-lt);border-color:var(--acc-mid);color:var(--acc);font-weight:600}
.ctrl-btn--active:hover{background:var(--acc-lt);border-color:var(--acc-mid);color:var(--acc)}
.pdf-menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;
  border:none;background:none;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:11px;color:var(--tx2);text-align:left;transition:background .1s}

.chk-wrap{display:flex;align-items:center;gap:5px;cursor:pointer;flex-shrink:0}
.chk-wrap input[type=checkbox]{-webkit-appearance:none;appearance:none;width:16px;height:16px;border:1px solid var(--bd2);border-radius:3px;background:var(--white);cursor:pointer;position:relative;transition:all .15s;flex-shrink:0}
.chk-wrap input[type=checkbox]:checked{background:var(--acc);border-color:var(--acc)}
.chk-wrap input[type=checkbox]:checked::after{content:'';position:absolute;left:4px;top:1px;width:5px;height:9px;border:1.5px solid #fff;border-top:none;border-left:none;transform:rotate(40deg)}

/* Calendrier annuel : cases N° semaines / jours fériés / vacances scolaires
   alignées sur la couleur des puces service/équipe sélectionnées, plutôt que
   le bleu générique --acc utilisé par les autres cases à cocher. */
#chkWk:checked,#chkFerHL:checked,#chkVac:checked{background:var(--chip-active-bg);border-color:var(--chip-active-bg)}
#chkWk:checked::after,#chkFerHL:checked::after,#chkVac:checked::after{border-color:var(--chip-active-tx)}
.chk-lbl{font-size:11.5px;color:var(--tx);font-weight:400;white-space:nowrap;user-select:none}
.lbl-s{display:none} /* libellé court, affiché sur smartphone uniquement */

/* ── OPTIONS BAR (stats annuel / légende mensuel) ── */
.optionsbar{background:var(--white);border-bottom:1px solid var(--bd);padding:0 16px;height:32px;display:flex;align-items:center;justify-content:center;gap:14px;overflow-x:auto;position:sticky;top:52px;z-index:90}
.stat-item{display:flex;align-items:center;gap:5px;flex-shrink:0}
.spill{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:16px;border-radius:3px;font-family:'SF Mono','Cascadia Code',Consolas,'Courier New',monospace;font-size:8.5px;font-weight:700;padding:0 4px;border:1px solid transparent}
.sp-M{background:var(--M-bg);color:var(--M);border-color:var(--M-bd)} .sp-A{background:var(--A-bg);color:var(--A);border-color:var(--A-bd)}
.sp-N{background:var(--N-bg);color:var(--N);border-color:var(--N-bd)} .sp-J{background:var(--J-bg);color:var(--J);border-color:var(--J-bd)}
.sp-R{background:var(--R-bg);color:var(--R);border-color:var(--R-bd)}
.scnt{font-family:'SF Mono','Cascadia Code',Consolas,'Courier New',monospace;font-size:11px;font-weight:600;color:var(--tx)}
.snm{font-size:10.5px;color:var(--tx);font-weight:400;letter-spacing:.1px}
.ssep{width:1px;height:16px;background:var(--bd);flex-shrink:0}

/* ── CONTENU ── */
.content{padding:16px 20px;display:flex;flex-direction:column;gap:12px;align-items:flex-start;transition:opacity .15s ease;width:100%;overflow-x:auto;user-select:none}
/* margin auto : centré quand ça tient, aligné à gauche (et donc entièrement
   scrollable dans .content) quand le zoom fait déborder */
.sem-container{display:flex;flex-direction:row;gap:16px;align-items:flex-start;flex-wrap:wrap;justify-content:center;margin:0 auto}
.sem-wrap{animation:fadeSlide .2s ease both;flex:none;width:auto;min-width:0;overflow-x:auto;border:1px solid var(--rail-bg);border-radius:var(--r);padding:8px;background:var(--white);box-shadow:var(--shadow-sm)}
@keyframes fadeSlide{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.sem-lbl{font-size:8.5px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:1.5px;padding:0 0 6px 2px;display:flex;align-items:center;gap:8px}
.sem-lbl::after{content:'';flex:1;height:1px;background:var(--bd)}

/* ── TABLE VERTICALE ── */
.vtable{--grid-bd:color-mix(in srgb,var(--rail-bg) 35%,white);border-collapse:collapse;table-layout:auto;font-size:11px;box-shadow:var(--shadow-sm)}
.vtable th,.vtable td{padding:0;border:1px solid var(--grid-bd)}
.vtable tr td:first-child{border-left:2px solid var(--rail-bg) !important}
.vtable tr td:last-child{border-right:2px solid var(--rail-bg) !important}
.vtable tr th:first-child{border-left:2px solid var(--rail-bg) !important}
.vtable tr th:last-child{border-right:2px solid var(--rail-bg) !important}
.vtable thead tr:first-child th{border-top:2px solid var(--rail-bg) !important}
.vtable tbody tr:last-child td{border-bottom:2px solid var(--rail-bg) !important}
.vd-wk{border-left:none !important;border-right:1px solid var(--grid-bd) !important}
.vd-wk.sep{border-left:2px solid var(--rail-bg) !important}
.vd-day-nowk{border-left:none !important}
.vm-hdr{background:var(--hdr-bg);color:var(--hdr-tx);font-size:8.5px;font-weight:700;font-family:'SF Mono','Cascadia Code',Consolas,'Courier New',monospace;text-align:center;padding:4px 0;border:1px solid var(--rail-bg) !important;letter-spacing:.8px}
.vd-day{text-align:center;font-size:7.5px;font-weight:700;color:var(--tx3);padding:0;vertical-align:middle;height:15px;width:22px;min-width:22px;border-right:none!important}
.vd-num{text-align:center;font-family:'SF Mono','Cascadia Code',Consolas,'Courier New',monospace;font-size:9px;font-weight:700;color:var(--tx);padding:0;vertical-align:middle;width:14px;min-width:14px;border-left:none!important}
.vd-shift{text-align:center;padding:0;vertical-align:middle;border-right:1px solid var(--grid-bd);font-size:9px;font-weight:700;font-family:inherit;width:18px;min-width:18px}
.vd-shift.has-M{background:var(--M-bg);color:var(--M)} .vd-shift.has-A{background:var(--A-bg);color:var(--A)}
.vd-shift.has-N{background:var(--N-bg);color:var(--N)} .vd-shift.has-J{background:var(--J-bg);color:var(--J)}
.vd-shift.has-R{background:var(--R-bg);color:var(--R)}
.vd-empty{background:var(--hdr-bg);border-color:var(--rail-bg)!important}
.vtable tr td.vd-empty{border-left:2px solid var(--rail-bg)!important;border-right:2px solid var(--rail-bg)!important}
.vrow:hover .vd-day,.vrow:hover .vd-num,.vrow:hover .vd-shift:not([class*="has-"]){filter:brightness(.97)}

/* ── MODE TOUTES ÉQUIPES : semestres empilés ── */
.sem-container--all{flex-direction:column !important;align-items:center !important;gap:12px !important}
.sem-wrap--all{flex:none !important;width:auto !important;min-width:0}
.sem-wrap--all .vtable{table-layout:auto !important;width:auto !important}
@media print{.sem-wrap--all .vtable{table-layout:fixed!important;width:100%!important}
.sem-wrap--all .vtable th,.sem-wrap--all .vtable td{min-width:0!important}}

/* ── ZOOM ── */
.zbtn{font-size:16px;font-weight:600;width:28px;height:28px;border-radius:6px;border:1px solid var(--bd);background:var(--surf);color:var(--tx2);cursor:pointer;transition:all .12s;display:inline-flex;align-items:center;justify-content:center;line-height:1;padding:0}
.zbtn:hover{color:var(--acc);background:var(--acc-lt);border-color:var(--acc-mid)}
.zbtn:active{transform:scale(.92)}
.zbtn:disabled{opacity:.25;cursor:default}
.zoom-val{font-size:12px;font-weight:600;color:var(--tx2);min-width:38px;text-align:center;user-select:none;cursor:default;background:var(--white);border:1px solid var(--bd);border-radius:5px;height:28px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px}
.content-scaler{}

/* ── TOOLTIP ── */
.tip{position:fixed;background:var(--tx);color:#fff;font-size:10px;font-weight:500;padding:4px 9px;border-radius:var(--r-sm);pointer-events:none;z-index:9999;white-space:pre-wrap;max-width:260px;box-shadow:var(--shadow-md);opacity:0;transition:opacity .1s;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
.tip.show{opacity:1}

/* ── ENCADREMENT JOURS FÉRIÉS (checkbox) ──
   box-shadow inset plutôt que border : une vraie bordure plus épaisse que la
   grille de base, combinée à border-collapse, faisait grossir de 1-2px la
   hauteur totale de la page selon le nombre de jours fériés visibles — juste
   assez pour faire apparaître une barre de défilement verticale (décalage de
   tout l'affichage vers la gauche pour lui faire de la place). Le box-shadow
   se peint par-dessus la case sans jamais influencer sa taille/mise en page. */
body.fer-hl td.vd-day[data-fer-m]{box-shadow:inset 2px 0 0 0 var(--hdr-bg),inset 0 2px 0 0 var(--hdr-bg),inset 0 -2px 0 0 var(--hdr-bg)}
body.fer-hl td.vd-num[data-fer-m]{box-shadow:inset -2px 0 0 0 var(--hdr-bg),inset 0 2px 0 0 var(--hdr-bg),inset 0 -2px 0 0 var(--hdr-bg)}

/* ── VACANCES SCOLAIRES : boutons zones + overlay ── */
.vac-zone-btns{display:flex;align-items:center;gap:4px}
.vac-zone-lbl{margin-right:2px;white-space:nowrap}
.vac-zone-btn{width:25px;height:20px;border-radius:5px;border:1px solid var(--bd);
  background:var(--surf2);color:var(--tx2);font-size:9.5px;font-weight:600;cursor:pointer;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;transition:all .12s}
.vac-zone-btn.active{background:#143A63;border-color:#0e2a4a;color:#fff;box-shadow:0 1px 4px rgba(20,58,99,.35)}
.vac-zone-btn:hover:not(.active){background:var(--surf2);border-color:var(--bd2)}
td.vd-wk[data-vac]{background:color-mix(in srgb, var(--vac-col,#fbbf24) 35%, transparent)!important}

/* ── INFO PANELS (fériés / vacances) ── */
.info-lbl{cursor:pointer;border-bottom:1px dotted var(--tx3);padding-bottom:1px;transition:color .12s}
.info-lbl:hover{color:var(--acc)}
.info-panel{position:fixed;top:50vh;transform:translateY(-50%);width:218px;max-height:calc(100vh - 80px);
  background:var(--white);border:1px solid var(--bd);border-radius:12px;
  box-shadow:0 8px 32px rgba(0,0,0,.14);z-index:120;display:none;flex-direction:column;overflow:hidden}
.info-panel--left{left:116px}
.info-panel--right{right:12px}
.info-panel--wide{width:200px}
/* Ancré sous la topbar + la ligne légende (mensuel) plutôt que centré, pour ne jamais les masquer */
#eqRosterPanel{top:92px;transform:none;max-height:calc(100vh - 112px)}
.eq-roster-svc{font-size:10px;font-weight:700;color:var(--tx3);margin-bottom:2px}
.eq-roster-row{display:flex;flex-direction:column;gap:0;padding:5px 8px;border-radius:6px;background:var(--surf);border:1px solid transparent}
.eq-roster-row--clickable{cursor:pointer}
.eq-roster-row--clickable:hover{border-color:var(--bd2)}
.eq-roster-name{font-size:11px;font-weight:600;color:var(--tx)}
.eq-roster-poste{font-size:9.5px;color:var(--tx3)}
.eq-roster-tel{display:none;font-size:10px;font-weight:600;color:var(--acc);margin-top:3px}
.eq-roster-row--open .eq-roster-tel{display:block}
.tel-link{color:inherit;text-decoration:none}
.tel-link:hover{color:var(--acc);text-decoration:underline}
.eq-roster-row--vacant{background:#fffbeb;border:1px dashed #fcd34d}
.info-panel-hdr{display:flex;align-items:center;justify-content:space-between;
  padding:9px 10px 8px 12px;border-bottom:1px solid var(--bd);flex-shrink:0;background:var(--surf)}
.info-panel-title{font-size:11.5px;font-weight:700;color:var(--tx);letter-spacing:-.1px}
.info-panel-close{width:22px;height:22px;border-radius:50%;border:1px solid var(--bd);background:none;
  font-size:15px;line-height:1;cursor:pointer;color:var(--tx3);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.info-panel-close:hover{background:var(--surf2);color:var(--tx)}
.info-panel-body{overflow-y:auto;padding:6px 8px 10px;flex:1;display:flex;flex-direction:column;gap:3px}
.ipl-item{display:flex;flex-direction:column;gap:1px;padding:5px 8px;border-radius:6px;
  background:var(--surf);border:1px solid transparent}
.ipl-item.ipl-past{opacity:.5}
.ipl-item.ipl-today{background:#eff6ff;border-color:#93c5fd}
.ipl-item.ipl-active{background:#fef9ec;border-color:#fbbf24}
.ipl-name{font-size:11px;font-weight:600;color:var(--tx);display:flex;align-items:center;gap:5px}
.ipl-date{font-size:10px;color:var(--tx3);font-variant-numeric:tabular-nums}
.ipl-yr-hdr{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  color:var(--tx3);padding:6px 8px 2px;margin-top:2px}
.ipl-badge{font-size:8.5px;font-weight:700;background:#f59e0b;color:#fff;
  padding:1px 5px;border-radius:10px;letter-spacing:.2px}

/* ── PANNEAU COULEURS ── */
.modal-overlay{position:fixed;inset:0;align-items:center;justify-content:center;z-index:200;background:rgba(0,0,0,.45)}
#colorPanel,#helpPanel{z-index:200}
.color-panel-modal{background:var(--white);border-radius:14px;padding:20px;width:min(340px,90vw);box-shadow:0 8px 32px rgba(0,0,0,.18);max-height:calc(100vh - 48px);display:flex;flex-direction:column;overflow:hidden}
.color-panel-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-shrink:0}
.color-panel-title{font-size:13px;font-weight:700;color:var(--tx)}
.color-panel-close{border:none;background:none;font-size:18px;cursor:pointer;color:var(--tx3);line-height:1}
.color-panel-rows{display:flex;flex-direction:column;gap:10px;flex:1;overflow-y:auto;min-height:0}
.color-panel-footer{margin-top:16px;display:flex;gap:8px;justify-content:flex-end;flex-shrink:0}
.color-section-hdr{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--tx3);margin-bottom:2px}
.pres-note-hdr{display:flex;align-items:center;justify-content:space-between}
.note-clear-btn{font-family:inherit;font-size:13px;line-height:1;font-weight:700;color:#DC2626;
    background:none;border:none;padding:0 2px;cursor:pointer;text-transform:none;letter-spacing:0;transition:opacity .12s}
.note-clear-btn:hover{opacity:.65}
.color-section-sep{height:1px;background:var(--bd);margin:4px 0}
.color-row{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--surf);border-radius:6px}
.color-swatch{width:28px;height:22px;border-radius:4px;display:flex;align-items:center;justify-content:center;
  font-family:'SF Mono','Cascadia Code',Consolas,'Courier New',monospace;font-size:10px;font-weight:700;flex-shrink:0}
.color-row-lbl{font-size:11px;font-weight:500;color:var(--tx2);flex:1}
.color-row-inputs{display:flex;align-items:center;gap:6px}
.color-row-inputs label{font-size:9px;color:var(--tx3)}
.color-row-inputs input[type=color]{width:28px;height:24px;border:none;cursor:pointer;padding:0;border-radius:3px;background:none}

/* ── PANNEAU AIDE ── */
.help-modal{background:var(--white);border-radius:14px;padding:20px;width:min(760px,94vw);
  max-height:calc(100vh - 48px);display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,.18)}
.help-body{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding-top:4px;min-height:0}
.help-section{display:flex;flex-direction:column;gap:6px}
.help-section-title{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:var(--tx3);padding-bottom:4px;border-bottom:1px solid var(--bd)}
.help-section--edge .help-section-title{color:#0058a3;border-bottom-color:#bfdbfe}
.help-section--edge{background:var(--acc-lt);border:1px solid var(--acc-mid);border-radius:8px;padding:10px 12px;gap:8px}
.help-row{display:flex;align-items:flex-start;gap:10px}
.help-key{flex-shrink:0;width:115px;font-size:10.5px;font-weight:600;color:var(--tx2);padding-top:1px}
.help-icon{width:13px;height:13px;vertical-align:-2.5px;margin-right:3px;flex-shrink:0}
.help-desc{font-size:11px;color:var(--tx3);line-height:1.55;flex:1}
kbd{display:inline-flex;align-items:center;justify-content:center;font-size:9.5px;font-family:'SF Mono','Cascadia Code',Consolas,monospace;
  background:var(--surf2);border:1px solid var(--bd2);border-radius:3px;padding:1px 5px;color:var(--tx2);line-height:1.4}
.help-section--mobile{background:var(--surf);border:1px solid var(--bd);border-radius:8px;padding:10px 12px;gap:8px}
.help-orientation-block{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.help-orientation-svg{width:200px;flex-shrink:0}
.help-orientation-text{font-size:11px;color:var(--tx3);line-height:1.6;margin:0;flex:1;min-width:120px}
.help-qr-block{display:flex;align-items:center;justify-content:center;gap:14px}
.help-qr-text{display:flex;flex-direction:column;gap:6px}
.help-qr-text p{font-size:11px;color:var(--tx3);line-height:1.55;margin:0}
.help-qr-url{font-size:10.5px;font-weight:600;color:var(--acc);word-break:break-all;text-decoration:none}
.help-qr-url:hover{text-decoration:underline}

/* ── Aide : mise en page compacte sur petit écran (évite les colonnes figées
   qui laissent de grands espaces vides à droite du libellé / sous l'image) ── */
@media(max-width:600px){
  .help-modal{padding:14px 14px 16px}
  .help-row{flex-direction:column;gap:2px}
  .help-key{width:auto}
  .help-orientation-block{justify-content:center;gap:10px}
  .help-orientation-svg{width:160px}
  .help-orientation-text{min-width:0;text-align:center}
  .help-qr-block{flex-direction:column;text-align:center;gap:8px}
  .help-qr-block img{margin:0 auto}
  .help-qr-text{align-items:center}
}

/* ── PRINT ── masquage de l'interface (mise en page gérée par doPrint) */
@media print{
  .rail,.topbar,.optionsbar,.phone-topbar,.tip,#shiftPop,#popOverlay,#colorPanel,#helpPanel,.info-panel,.annuel-chipbar{display:none!important}
  .content-col{margin-left:0!important}
  #contentScaler{transform:none!important;height:auto!important;zoom:1!important}
  html,body{overflow-x:visible!important;max-width:none!important}
  body{background:#fff!important}
  body:not(.view-mensuel) #print-header{display:flex!important}
  .sem-wrap{border-radius:0!important;box-shadow:none!important}
  /* Le jour actuel ne doit pas ressortir en rouge sur les éditions PDF */
  td.vd-day.vd-today{background:transparent!important}
  td.vd-day.vd-today span{color:var(--tx3)!important;font-weight:600!important}
  td.vd-num.vd-today{background:transparent!important;color:var(--tx)!important;font-weight:600!important}
}

/* ── RESPONSIVE TABLETTE (≤768px) : le rail reste visible ── */
@media(max-width:768px){
  /* flex-start : avec le scroll horizontal, un contenu centré plus large
     que l'écran rendrait son début inaccessible */
  .optionsbar{padding:0 10px;gap:10px;justify-content:flex-start}
}

/* ── RESPONSIVE SMARTPHONE (≤480px) : rail masqué, chrome minimal, zoom automatique ── */
@media(max-width:480px){
  .rail{display:none}
  .content-col{margin-left:0}
  /* Répertoire (Numéros utiles) : consultation seule sur mobile, même pour
     un compte habilité (niveau ≥ 2) — le glisser-déposer de réordonnancement
     ne se prête pas à un usage tactile fiable. Le !important est nécessaire
     car applyAuthUI() pilote l'affichage via style.display en ligne. */
  #btnNumGestion{display:none!important}
  .info-panel--left{left:12px}
  .phone-topbar{display:flex;height:48px}
  #helpPanel{display:none!important}
  .zoom-val,.zbtn,.ctrl-sep,.pdf-menu-wrap{display:none!important}
  .topbar{position:sticky;top:48px;height:44px;padding:0 8px}
  .topbar-title,.topbar-tools{display:none}
  .topbar-pager{width:100%}
  .topbar-pager select{flex:1;min-width:0;font-size:10.5px;padding:4px 22px 4px 7px}
  /* barre d'options réduite à une ligne : légende M/A/N/J/R, compteurs,
     moyenne et séparateurs masqués ; libellés courts */
  .optionsbar{position:sticky;top:92px;flex-wrap:wrap;height:auto;min-height:32px;padding:5px 8px;gap:5px 10px;justify-content:center;overflow-x:visible}
  .optionsbar .stat-item:has(.spill),#statsAvgNote,#statsAvgSep,.ssep{display:none!important}
  body.view-mensuel .optionsbar{display:none!important}
  .lbl-l{display:none}
  .lbl-s{display:inline}
  .chk-lbl,.snm{font-size:10.5px}
  .vac-zone-btn{width:26px;height:22px;font-size:10px}
  .content{padding:10px 8px}
  .sem-container{flex-direction:column;align-items:center;width:100%}
  .sem-wrap{max-width:100%}
  .info-panel{width:calc(100vw - 24px);max-height:60vh}
  .snm{font-size:9.5px}
}

/* ── TÉLÉPHONE PAYSAGE ── piloté par la classe html.phone-landscape (JS, basée
   sur screen.width/height) plutôt que par une media query (orientation+max-height) :
   sur Safari iOS cette dernière se base sur la hauteur de viewport "maximale"
   (barre d'outils repliée) et ne matche pas quand la barre d'outils est affichée,
   laissant l'interface complète (légendes, etc.) visible au lieu du chrome condensé. */
html.phone-landscape .rail{display:none}
html.phone-landscape .content-col{margin-left:0}
html.phone-landscape .phone-topbar{display:flex;height:42px}
html.phone-landscape #helpPanel{display:none!important}
html.phone-landscape .zoom-val,html.phone-landscape .zbtn,html.phone-landscape .ctrl-sep,html.phone-landscape .pdf-menu-wrap{display:none!important}
html.phone-landscape .topbar-title{display:none}
html.phone-landscape body.view-mensuel .ctrl-btn-pdf,html.phone-landscape body.view-mensuel .optionsbar{display:none!important}
html.phone-landscape .topbar{position:static;height:38px}
html.phone-landscape .mh-wk{top:42px}
html.phone-landscape .mh-day{top:56px}
html.phone-landscape .svc-order-rotate-hint{display:block!important}
/* Pied de tableau dupliqué (jours + n° semaines) : visible uniquement ici,
   et statique (ni collé en haut ni figé à gauche) puisqu'il vit déjà en bas. */
html.phone-landscape #mtfoot{display:table-footer-group}
html.phone-landscape #mtfoot th{position:static!important}

/* Sélecteur de mois fusionné dans .phone-topbar (cf. relocateMensuelPager en JS) :
   la ligne .topbar dédiée disparaît, ce qui libère sa hauteur pour le planning. */
html.phone-landscape body.view-mensuel .topbar{display:none!important}
html.phone-landscape body.view-mensuel .phone-topbar-title{flex:0 1 auto;min-width:0}
html.phone-landscape body.view-mensuel .phone-topbar .topbar-pager{flex:1;gap:4px}
html.phone-landscape body.view-mensuel .phone-topbar .nav-month{min-width:0;font-size:12px}
html.phone-landscape body.view-mensuel .phone-topbar .nav-btn{width:24px;height:24px}
html.phone-landscape body.view-mensuel .phone-topbar .today-link-btn{font-size:7px}

/* ══════════════════════════════════════════════════════════
   PLANNING MENSUEL MULTI-SERVICES
══════════════════════════════════════════════════════════ */

/* ── Commutation de vue ── */
#view-mensuel{display:none}
body.view-mensuel #view-mensuel{display:flex;flex-direction:column}
body.view-mensuel #view-annuel{display:none}

/* Le titre ("Plannings mensuels multi-services") est bien plus long que les
   outils (juste "PDF"), donc centrer le pager DANS l'espace restant (comme
   sur les autres pages) le décale visiblement vers la droite. Ici, on le
   centre sur la largeur réelle du bandeau, indépendamment de ce déséquilibre
   titre/outils. Restreint aux écrans ≥481px : en dessous, le titre et les
   outils sont déjà masqués (cf. media query plus haut) et le pager occupe
   toute la largeur, donc ce recentrage n'a pas lieu d'être. Sans effet non
   plus une fois le pager déplacé dans .phone-topbar (mode paysage
   smartphone, cf. relocateMensuelPager), qui n'est pas un descendant de
   #view-mensuel. */
@media(min-width:481px){
  #view-mensuel .topbar{justify-content:space-between}
  #view-mensuel .topbar-pager{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);flex:none}
}
/* Même recentrage absolu que #view-annuel/#view-mensuel ci-dessus — sans
   ça, le pager (flex:1, centré dans SA propre boîte) suit le déséquilibre
   entre .topbar-title et .topbar-tools au lieu du centre réel de la page,
   d'où un décalage vers la droite sur ces deux pages. */
@media(min-width:481px){
  #view-presences .topbar{justify-content:space-between}
  #view-presences .topbar-pager{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);flex:none}
  #view-semj .topbar{justify-content:space-between}
  #view-semj .topbar-pager{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);flex:none}
}

#view-effectif{display:none}
body.view-effectif #view-effectif{display:flex;flex-direction:column}
body.view-effectif #view-annuel{display:none}

#view-numeros{display:none}
body.view-numeros #view-numeros{display:flex;flex-direction:column}
body.view-numeros #view-annuel{display:none}

#view-semj{display:none}
body.view-semj #view-semj{display:flex;flex-direction:column}
body.view-semj #view-annuel{display:none}

/* ── Navigation mois (dans .topbar-pager) ── */
.nav-center-col{display:flex;flex-direction:column;align-items:center;gap:1px}
.nav-month{font-size:15px;font-weight:700;color:var(--tx);letter-spacing:-.3px;min-width:160px;text-align:center}
/* Largeur fixe (et non min-width) pour Semaine J : le texte (n° de semaine +
   dates + mois) varie beaucoup en longueur d'une semaine à l'autre, ce qui
   faisait bouger les flèches ‹ › — le bloc central étant centré dans la
   topbar, toute variation de largeur du texte déplaçait tout le groupe. */
#view-semj .nav-month{width:320px}
.nav-btn{width:30px;height:30px;border-radius:50%;border:1px solid var(--bd);background:var(--surf);
         color:var(--tx2);font-size:18px;line-height:1;cursor:pointer;display:flex;
         align-items:center;justify-content:center;transition:all .12s;flex-shrink:0;
         padding:0;font-family:inherit}
.nav-btn:hover{background:var(--chip-active-bg);color:var(--chip-active-tx);border-color:var(--chip-active-bg)}
.nav-btn:disabled{opacity:.35;cursor:not-allowed;background:var(--surf);color:var(--tx2);border-color:var(--bd)}
.today-link-btn{font-size:8px;color:var(--tx3);background:none;border:none;cursor:pointer;
                padding:0;line-height:1;white-space:nowrap;transition:color .15s;
                font-weight:500;letter-spacing:.2px;margin-top:3px}
.today-link-btn:hover{color:var(--acc)}
.nav-links-row{display:flex;align-items:center;gap:8px}
.nav-links-row .today-link-btn{margin-top:0}
#view-presences .today-link-btn{font-size:9.5px}

/* ── Calendrier annuel — navigation par année + puces service/équipe
   (ordinateur uniquement ; le mobile garde les 3 listes déroulantes) ── */
.annuel-yr-nav{display:none;align-items:center;gap:6px}
.annuel-chipbar{display:none;background:var(--white);border-bottom:1px solid var(--bd);
  padding:6px 16px;align-items:center;justify-content:center;gap:14px;overflow-x:auto}
@media(min-width:481px){
  /* html.phone-landscape exclu : un téléphone tourné en paysage a une largeur
     de viewport >480px mais reste un mobile, pas "la version ordinateur". */
  html:not(.phone-landscape) #view-annuel .topbar-pager select{display:none}
  html:not(.phone-landscape) #view-annuel .annuel-yr-nav{display:flex}
  html:not(.phone-landscape) #view-annuel .annuel-chipbar{display:flex}
  html:not(.phone-landscape) #view-annuel .topbar{justify-content:space-between}
  html:not(.phone-landscape) #view-annuel .topbar-pager{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);flex:none}
}

/* ── Légende mensuel (contenu de .optionsbar) ── */
.lb{height:16px;min-width:20px;border-radius:3px;display:inline-flex;align-items:center;
    justify-content:center;font-size:8.5px;font-weight:700;
    font-family:'SF Mono','Cascadia Code',Consolas,'Courier New',monospace;
    padding:0 4px;border:1px solid transparent}
.lb-M{background:var(--M-bg);color:var(--M);border-color:var(--M-bd)}
.lb-A{background:var(--A-bg);color:var(--A);border-color:var(--A-bd)}
.lb-N{background:var(--N-bg);color:var(--N);border-color:var(--N-bd)}
.lb-J{background:var(--J-bg);color:var(--J);border-color:var(--J-bd)}
.lb-sep{width:1px;height:14px;background:var(--bd);flex-shrink:0}
.legend-active{display:inline-flex;align-items:center;gap:3px;flex-shrink:0}
.legend-active-lbl{font-size:10.5px;color:var(--tx2);font-weight:500}
.legend-grp-lbl{display:inline-flex;flex-direction:column;flex-shrink:0;justify-content:center;line-height:1.2}
.legend-grp-name{font-size:10.5px;font-weight:700;color:var(--tx2)}
.legend-grp-cycle{font-size:10.5px;color:var(--tx3);font-weight:400}
.legend-shift{display:inline-flex;align-items:center;gap:3px;flex-shrink:0}
.legend-shift-badge{display:inline-flex;align-items:center;justify-content:center;
                    width:17px;height:17px;border-radius:3px;font-size:8.5px;font-weight:700;
                    font-family:'SF Mono','Cascadia Code',Consolas,'Courier New',monospace;
                    flex-shrink:0;border:1px solid transparent}
.legend-shift-time{font-size:10.5px;color:var(--tx2);font-weight:500}
.legend-dot-sep{color:var(--tx4);font-size:10.5px;flex-shrink:0}
.legend-vac-preview{display:inline-flex;align-items:center;gap:5px;flex-shrink:0}
.legend-vac-bars{display:inline-flex;align-items:center;flex-shrink:0}
.legend-vac-bar{width:7px;height:17px;background:rgba(251,191,36,.35);border:1px solid rgba(251,191,36,.6)}
.legend-vac-bar:first-child{border-radius:2px 0 0 2px}
.legend-vac-bar:last-child{border-radius:0 2px 2px 0}
.legend-vac-bar:not(:first-child){border-left:none}
.legend-vac-label{font-size:10.5px;color:#92400e;font-weight:500}
.mensuel-eq-hint{font-size:9.5px;font-style:italic;color:var(--tx3);text-align:center;padding:6px 0 8px;flex-shrink:0}

/* ── En-tête impression mensuel ── */
.print-header-m{align-items:center;justify-content:space-between;width:100%;
                padding-bottom:3mm;border-bottom:1.5px solid #d8dce4;margin-bottom:4mm;gap:8mm}
.print-header-spacer{flex:1}
.print-header-center{text-align:center}
.print-header-title{font-size:13px;font-weight:700;color:#0f1623}
.print-header-subtitle{font-size:9px;color:#3d4760;margin-top:2px}
.print-header-date{flex:1;text-align:right;font-size:7.5px;color:#8490a8;font-family:'SF Mono',Consolas,monospace;white-space:nowrap}

/* ── En-tête impression Semaine J (logo + titre) ── */
.print-header-semj{align-items:center;justify-content:space-between;width:100%;
  padding-bottom:3mm;border-bottom:1.5px solid #d8dce4;margin-bottom:4mm;gap:8mm}
.print-header-semj-left{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1}
.print-header-semj-logo{height:32px;width:auto;flex-shrink:0}
.print-header-semj-site{font-size:8.5px;font-weight:700;color:#3d4760;line-height:1.4;white-space:nowrap;text-align:center}
.print-header-semj-right{flex:1}
#print-header-semj .print-header-title{font-size:32.5px}

/* ── Tableau mensuel ── */
.mensuel-content{display:flex;justify-content:center;flex:none;width:fit-content;margin:16px auto 0;padding:16px 20px;
                  background:#ffffff;border:1px solid var(--rail-bg);
                  border-radius:var(--r);box-shadow:var(--shadow-sm);user-select:none}
.mtable{--grid-bd:color-mix(in srgb,var(--rail-bg) 35%,white);border-collapse:collapse;font-size:10px;white-space:nowrap;
        table-layout:fixed;width:auto}
/* Ligne jours/semaines dupliquée en pied de tableau : repère visible quand le
   défilement vertical a fait sortir l'en-tête de l'écran (smartphone paysage
   uniquement, cf. html.phone-landscape ci-dessous) */
#mtfoot{display:none}
/* Grille fine sur toutes les cellules */
.mtable th,.mtable td{border:1px solid var(--grid-bd)}
/* Bordures extérieures 2px */
.mtable th:first-child,.mtable td:first-child{border-left:2px solid var(--rail-bg)!important}
.mtable th:last-child,.mtable td:last-child{border-right:2px solid var(--rail-bg)!important}
.mtable thead tr:first-child th{border-top:2px solid var(--rail-bg)!important}
.mtable tbody tr:last-child td{border-bottom:2px solid var(--rail-bg)!important}
/* Colonnes libellé service/équipe */
.ml-svc{width:36px;min-width:36px;max-width:36px;position:sticky;left:0;z-index:10;
        background:var(--white);border-right:2px solid var(--rail-bg)!important;
        border-bottom:1px solid var(--grid-bd)!important;overflow:visible}
.ml-eq{width:78px;min-width:74px;max-width:74px;position:sticky;left:36px;z-index:10;
       background:var(--white);border-right:2px solid var(--rail-bg)!important;
       border-bottom:1px solid var(--grid-bd)!important}
/* Ligne numéros de semaine */
.mh-wk{text-align:center;font-size:9px;font-weight:700;
        font-family:'SF Mono','Cascadia Code',Consolas,'Courier New',monospace;
        color:#ffffff;background:var(--rail-bg);height:14px;
        border-bottom:1px solid var(--grid-bd);border-right:1px solid var(--grid-bd);border-left:none;
        position:sticky;top:84px;overflow:hidden}
/* Ligne des jours — séparation épaisse sous l'en-tête */
.mh-day{text-align:center;font-size:9px;font-weight:700;
        font-family:'SF Mono','Cascadia Code',Consolas,'Courier New',monospace;
        color:var(--tx3);padding:2px 0;border-bottom:2px solid var(--rail-bg);
        border-right:1px solid var(--grid-bd);border-left:none;
        min-width:20px;width:20px;background:var(--white);position:sticky;top:98px}
.mh-day.we{color:var(--we-tx)}
.mh-day.fer{color:#dc2626;font-weight:700}
.mh-day.today{background:#DC2626;color:#fff;border-radius:3px}
/* Ligne séparatrice de service */
.svc-row td{height:18px;font-size:9px;font-weight:700;letter-spacing:.3px;
            background:var(--surf);color:var(--tx2);padding:0 8px;
            border-top:2px solid var(--rail-bg)!important;border-bottom:1px solid var(--grid-bd)!important;
            border-left:none!important;border-right:none!important}
.svc-row:hover td{filter:brightness(.96)}
/* Lignes équipe — grille fine */
.eq-row td{height:17px;border-bottom:1px solid var(--grid-bd);border-left:none;border-right:none;padding:0}
.eq-row:last-of-type td{border-bottom:2px solid var(--rail-bg)!important}
.eq-lbl{font-size:9px;font-weight:600;color:var(--tx3);padding:0 6px 0 8px;
        text-align:left;background:var(--white)!important}
.eq-row .ml-eq{cursor:pointer}
.eq-row .ml-eq:hover{filter:brightness(.94)}
.eq-num{font-size:8px;font-weight:500;color:var(--tx3);padding:0 4px;
        text-align:right;background:var(--white)!important}
/* Cellules poste */
.mc{text-align:center;vertical-align:middle;font-size:8.5px;font-weight:700;
    border:1px solid var(--grid-bd);font-family:inherit;padding:0;cursor:default}
.mc.we{background:var(--we-bg)}
.mc.fer{background:var(--fer-bg)}
.mc.today-col{background:var(--today-bg)}
.mc.has-M{background:var(--M-bg);color:var(--M);border:1px solid var(--grid-bd)!important}
.mc.has-A{background:var(--A-bg);color:var(--A);border:1px solid var(--grid-bd)!important}
.mc.has-N{background:var(--N-bg);color:var(--N);border:1px solid var(--grid-bd)!important}
.mc.has-J{background:var(--J-bg);color:var(--J);border:1px solid var(--grid-bd)!important}
.mc.has-R{background:var(--R-bg);color:var(--R);border:1px solid var(--grid-bd)!important}
/* Séparation de semaine */
.mc.wk-start{border-left:1px solid var(--rail-bg)!important}
/* Hover ligne */
.eq-row:hover .mc:not(.has-M):not(.has-A):not(.has-N):not(.has-J):not(.has-R){filter:brightness(.97)}
/* Point vert équipe en service */
.active-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#16a34a}
.active-dot-live{position:absolute;right:4px;top:50%;margin-top:-3px}
/* Surbrillance colonne */
.col-hover{background-color:#d0d1d2!important}
th.mh-day.col-hover{background-color:#808284!important;color:#ffffff!important}
/* Figer les couleurs de la grille en mode clair (identique sem-wrap) */
.mtable{--bg:#eaeef4;--white:#ffffff;--surf:#f5f8fc;--surf2:#dde8ff;
        --bd:#dbe3ee;--bd2:#c2cedd;--tx:#1f2a3a;--tx2:#3d4760;--tx3:#6b7a90;
        --we-bg:#f0edfa;--we-tx:#4c3d7a;--fer-bg:#fff7ed;--fer-tx:#dc2626;--today-bg:#FEE2E2;
        background:#ffffff;color:#1f2a3a}
/* Vacances scolaires overlay mensuel */
th.mh-day[data-vac]{background:color-mix(in srgb,var(--vac-col,#fbbf24) 35%,white)!important;color:#92400e!important}
th.mh-day.fer[data-vac]{color:#dc2626!important;font-weight:900!important}
th.mh-day.today,th.mh-day.today[data-vac]{background:#DC2626!important;color:#fff!important;border-radius:3px}
/* ── Impression mensuel ── */
@media print{
  body.view-mensuel #view-annuel{display:none!important}
  body.view-mensuel #view-mensuel{display:block!important}
  body.view-mensuel #print-header-m{display:flex!important}
  body.view-mensuel{background:#fff!important}
  body.view-mensuel .mensuel-content{padding:0!important;display:block!important;
    border:none!important;border-radius:0!important;box-shadow:none!important}
  body.view-mensuel .mtable{
    width:100%!important;table-layout:fixed!important;font-size:7px!important;
    border-collapse:collapse!important;box-shadow:none!important;
    -webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;
  }
  body.view-mensuel .ml-svc{
    width:44px!important;min-width:44px!important;max-width:44px!important;
    position:static!important;font-size:7px!important;
    -webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;
  }
  body.view-mensuel .ml-eq{
    width:52px!important;min-width:52px!important;max-width:52px!important;
    position:static!important;font-size:7px!important;
    -webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;
  }
  body.view-mensuel .mh-day,body.view-mensuel .mc{width:18px!important;min-width:18px!important;max-width:22px!important;}
  body.view-mensuel .mh-day,body.view-mensuel .mh-wk{position:static!important;top:auto!important;}
  body.view-mensuel .mh-wk{height:10px!important;font-size:6px!important;padding:1px 0!important;}
  body.view-mensuel .mh-day{height:20px!important;font-size:7px!important;padding:1px 0!important;}
  body.view-mensuel .eq-row td{height:14px!important;}
  body.view-mensuel .svc-row td{height:14px!important;font-size:7px!important;padding:0 4px!important;}
  body.view-mensuel .mc.has-M{background:var(--M-bg)!important;color:var(--M)!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;}
  body.view-mensuel .mc.has-A{background:var(--A-bg)!important;color:var(--A)!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;}
  body.view-mensuel .mc.has-N{background:var(--N-bg)!important;color:var(--N)!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;}
  body.view-mensuel .mc.has-J{background:var(--J-bg)!important;color:var(--J)!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;}
  body.view-mensuel .mc.we{background:var(--we-bg)!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;}
  body.view-mensuel .mc.fer{background:var(--fer-bg)!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;}
  body.view-mensuel .svc-row td{background:var(--surf)!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;}
  body.view-mensuel .ml-svc,body.view-mensuel .ml-eq{box-shadow:none!important;}
  body.view-mensuel .mc.today-col{background:transparent!important;}
  body.view-mensuel .mh-day.today{background:transparent!important;color:inherit!important;border-radius:0!important;}
  body.view-mensuel .active-dot{display:none!important;}
  body.view-mensuel .mensuel-eq-hint{display:none!important;}
  @page{size:A4 landscape;margin:8mm 7mm}
}

/* ══════════════════════════════════════════════════════════
   EFFECTIF
══════════════════════════════════════════════════════════ */

input[type=text],input[type=tel],input[type=date]{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:11px;font-weight:500;padding:0 9px;border:1px solid var(--bd);border-radius:var(--r-sm);background:var(--white);color:var(--tx);height:34px;width:100%;transition:border-color .15s}
input[type=text]:hover,input[type=tel]:hover,input[type=date]:hover{border-color:var(--bd2)}
input[type=text]:disabled,input[type=tel]:disabled,input[type=date]:disabled{opacity:.55;cursor:not-allowed}
input[type=text]:focus,input[type=tel]:focus,input[type=date]:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 2px var(--acc-lt)}

.pres-modal-note{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:11px;font-weight:500;padding:7px 9px;border:1px solid var(--bd);border-radius:var(--r-sm);background:var(--white);color:var(--tx);width:100%;resize:vertical;transition:border-color .15s}
.pres-modal-note:hover{border-color:var(--bd2)}
.pres-modal-note:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 2px var(--acc-lt)}

#effDate.eff-date-input{width:120px;padding:0 6px}
#effSearch.eff-search-input{width:200px}
#effPager{justify-content:flex-start}

/* Glissière "parcourir l'année" — alternative rapide au champ date exact,
   les deux restent synchronisés (voir renderEffectif/onEffSliderInput). */
.eff-timeline{display:flex;align-items:center;gap:6px;flex-shrink:0}
.eff-timeline-year{min-width:38px;font-size:13px}
.eff-date-slider{width:170px;accent-color:var(--acc);cursor:pointer}

.eff-scroll{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:18px}
.eff-date-banner{font-size:11px;font-weight:600;color:var(--tx3);text-transform:uppercase;letter-spacing:.5px}

.eff-svc{background:var(--white);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden}
.eff-svc-hdr{display:flex;align-items:center;gap:8px;padding:10px 14px;background:color-mix(in srgb, var(--eff-c) 10%, var(--surf));border-bottom:1px solid var(--bd)}
.eff-svc-name{font-size:13px;font-weight:700;color:var(--eff-c)}
.eff-svc-tag{font-size:10px;font-weight:600;color:var(--tx3);background:var(--surf2);border-radius:10px;padding:2px 8px}
.eff-svc-count{margin-left:auto;font-size:10.5px;color:var(--tx3)}
.eff-vacant-badge{font-size:9.5px;font-weight:700;color:#92400e;background:#fef3c7;border:1px solid #fcd34d;border-radius:10px;padding:2px 8px;letter-spacing:.2px;white-space:nowrap}
.eff-row--vacant td{background:#fffbeb!important;font-style:italic}

.eff-eq{padding:8px 14px}
.eff-eq+.eff-eq{border-top:1px solid var(--bd)}
.eff-eq-hdr{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;color:var(--tx2);text-transform:uppercase;letter-spacing:.4px;padding:4px 0}

.eff-table{width:100%;border-collapse:collapse;font-size:11.5px;table-layout:fixed}
.eff-table th{text-align:left;font-size:9.5px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.4px;padding:4px 8px;border-bottom:1px solid var(--bd);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eff-table td{padding:5px 8px;border-bottom:1px solid var(--bd);color:var(--tx2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eff-table tr:last-child td{border-bottom:none}
.eff-table th:nth-child(1),.eff-table th:nth-child(5),.eff-table th:nth-child(6),.eff-table td:nth-child(1),.eff-table td:nth-child(5),.eff-table td:nth-child(6){text-align:center}
.eff-table th:last-child,.eff-table td:last-child{text-align:right}
.eff-row-actions{display:flex;gap:4px;justify-content:flex-end;white-space:nowrap}
.eff-icon-btn{width:20px;height:20px;border-radius:4px;border:1px solid transparent;background:none;color:var(--tx3);cursor:pointer;font-size:11px;display:inline-flex;align-items:center;justify-content:center}
.eff-icon-btn:hover{background:var(--surf2);border-color:var(--bd);color:var(--tx)}
.eff-icon-btn:disabled{opacity:.3;cursor:default;background:none}
.eff-icon-btn:disabled:hover{background:none;border-color:transparent}
.eff-empty{font-size:11px;color:var(--tx3);font-style:italic;padding:4px 0 8px}

.eff-matrix-wrap{padding:10px 14px;overflow-x:auto}
.eff-matrix{width:auto;table-layout:fixed;border-collapse:collapse;font-size:11px}
.eff-matrix th{text-align:center;font-size:9.5px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.3px;padding:6px 8px;border:1px solid var(--bd);background:var(--surf);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eff-matrix th:first-child{text-align:left}
.eff-matrix td{padding:6px 8px;border:1px solid var(--bd);vertical-align:middle;text-align:center;overflow:hidden}
.eff-matrix-poste{text-align:left!important;font-weight:600;color:var(--tx2);font-size:10.5px;background:var(--surf);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* min-width:0 indispensable : un enfant flex a par défaut min-width:auto
   (sa taille de contenu non compressible), ce qui lui permet de forcer sa
   colonne à s'élargir au-delà des 130px fixés par le colgroup dès qu'un nom
   long ou un badge "Poste vacant SAV xxx" apparaît — malgré table-layout:
   fixed. Avec min-width:0, l'ellipsis (span, ci-dessous) reprend la main et
   la colonne reste rigoureusement à sa largeur déclarée. */
.eff-matrix-names{display:flex;flex-direction:column;gap:3px;align-items:center;min-width:0}
.eff-matrix-names span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
/* Le badge "Poste vacant" (padding + bordure) est plus haut qu'une ligne de
   texte simple ; dans la vue tableau, les deux sont mélangés dans la même
   colonne, ce qui déforme légèrement les lignes. Padding vertical réduit
   pour rapprocher sa hauteur de celle du texte normal (sans le toucher
   ailleurs, où il reste seul dans sa case). */
.eff-matrix-names .eff-vacant-badge{padding:0 8px}
.eff-matrix-empty{color:var(--tx4)}

.eff-contacts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.eff-contact-card{background:var(--white);border:1px solid var(--bd);border-radius:var(--r-sm);padding:10px 12px}
.eff-contact-hdr{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;margin-bottom:6px}
.eff-contact-hdr-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eff-contact-hdr-actions{display:flex;gap:2px;flex-shrink:0}
.eff-contact-row{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--tx2);padding:2px 0;border-radius:4px}
.eff-contact-row-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eff-contact-row-right{display:flex;align-items:center;gap:2px;flex-shrink:0}
.eff-drag-handle{flex-shrink:0;cursor:grab;color:var(--tx3);font-size:12px;line-height:1;padding:0 1px;user-select:none}
.eff-drag-handle:hover{color:var(--tx)}
.eff-contact-row.dragging,.eff-contact-card.dragging{opacity:.4}
.eff-contact-row.drag-over{background:var(--surf2);box-shadow:inset 0 2px 0 0 var(--acc)}
.eff-contact-card.drag-over{box-shadow:inset 0 0 0 1px var(--bd),inset 0 2px 0 0 var(--acc)}

.agent-modal{width:min(420px,90vw)}
.agent-form{display:flex;flex-direction:column;gap:10px;overflow-y:auto}
.agent-form-row{display:flex;flex-direction:column;gap:4px}
.agent-form-row label{font-size:10px;font-weight:600;color:var(--tx3);text-transform:uppercase;letter-spacing:.3px}
.agent-form-row input[type=color]{width:48px;height:34px;padding:2px;border:1px solid var(--bd);border-radius:var(--r-sm);cursor:pointer;background:none}
.agent-form-row--split{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.agent-form-row--split>div{display:flex;flex-direction:column;gap:4px}

/* ── Modal d'édition d'un jour (Plannings par équipe) ──────────────────────
   Repris du style du panneau effectif d'équipe (#eqRosterPanel/.info-panel) :
   bandeau d'en-tête ombré + bouton de fermeture rond, corps défilant à part. */
.pres-modal{width:min(480px,95vw);border-radius:12px;padding:0;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.14)}
.pres-modal-hdr{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 16px;background:var(--surf);border-bottom:1px solid var(--bd);flex-shrink:0}
.pres-modal-body{padding:12px;overflow-y:auto;flex:1}
.pres-modal-agent{font-size:13px;font-weight:700;color:var(--tx);letter-spacing:-.1px}
.pres-modal-date{font-size:10.5px;color:var(--tx3);margin-top:2px}
.pres-modal-section+.pres-modal-section{margin-top:8px;padding-top:8px;border-top:1px solid var(--bd)}
.pres-pick-row{display:flex;align-items:baseline;justify-content:flex-start;gap:16px;min-width:0;overflow:hidden}
.pres-pick-sub{font-size:9px;font-weight:400;font-style:italic;color:var(--tx3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;text-align:left}
.pres-modal-btns--list .pres-pick-btn kbd{flex-shrink:0}
.pres-modal-btns{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:6px}
/* Sobre : fond neutre uniforme, seul un petit point de couleur distingue le
   type ; la sélection se voit par la bordure accent (pas par un aplat coloré). */
.pres-pick-btn{font-family:inherit;font-size:11px;font-weight:600;padding:6px 11px;
  border-radius:8px;cursor:pointer;outline:none;display:inline-flex;align-items:center;
  gap:6px;background:var(--surf);border:1.5px solid var(--bd);color:var(--tx2);
  transition:background .1s,border-color .1s,transform .08s}
.pres-pick-btn:hover{background:var(--surf2);border-color:var(--bd2)}
.pres-pick-btn:active{transform:scale(.96)}
.pres-pick-btn--active{background:var(--acc-lt);border-color:var(--acc);color:var(--acc)}
.pres-pick-btn kbd{font-size:9px}

/* Liste verticale (une ligne par type), raccourci aligné à droite */
.pres-modal-btns--list{flex-direction:column;align-items:stretch;gap:3px}
.pres-modal-btns--list .pres-pick-btn{width:100%;justify-content:space-between;padding:6px 11px}
.pres-pick-lbl{display:inline-flex;align-items:center;gap:8px}
/* Lieux de travail : une ligne par service */
.pres-lieu-rows{display:flex;flex-direction:column;gap:5px;margin-top:6px}
.pres-lieu-row{display:flex;align-items:center;gap:10px}
.pres-lieu-row-lbl{font-size:10px;font-weight:700;color:var(--tx3);width:58px;flex-shrink:0;text-align:right}
.pres-lieu-row .pres-modal-btns{margin-top:0;flex:1}
#presPopFoInput{height:28px;font-size:11px}
/* Groupes de rythme : colonne de lignes, chaque ligne = flex horizontal */
#presPopRythmeBtns{flex-direction:column;gap:4px;flex-wrap:nowrap;align-items:flex-start}
.pres-rythme-group{display:flex;gap:5px}
.pres-rythme-group .pres-pick-btn{font-size:9.5px;white-space:nowrap}

/* ══════════════════════════════════════════════════════════
   PLANNINGS PAR ÉQUIPE (PRÉSENCES / ABSENCES)
══════════════════════════════════════════════════════════ */

/* ── PLANNING ÉQUIPE : chips service / équipe ── */
.pres-optbar{justify-content:center}
.pres-optbar-half{flex:1;display:flex;align-items:center}
.pres-optbar-half--right{justify-content:flex-end}
.pres-optbar-half--left{justify-content:flex-start}
.pres-chip-group{display:flex;gap:4px;align-items:center;flex-shrink:0}
.pres-chip{height:26px;padding:0 11px;border-radius:13px;border:1.5px solid var(--bd2);background:var(--white);color:var(--tx2);font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .12s;line-height:23px}
.pres-chip:hover:not(.active){background:var(--surf2);border-color:var(--acc-mid)}
.pres-chip.active{background:var(--chip-active-bg)!important;border-color:color-mix(in srgb,var(--chip-active-bg) 85%,black);color:var(--chip-active-tx)}
.pres-chip-sep{width:1px;height:18px;background:var(--bd2);flex-shrink:0;align-self:center}

#view-presences{display:none}
body.view-presences #view-presences{display:flex;flex-direction:column}
body.view-presences #view-annuel{display:none}

/* ── Panneau défilant (vertical + horizontal) avec en-tête et 1res colonnes figées ──
   Dimensions des cases/caractères alignées sur le planning mensuel multi-services
   (.mtable y est affiché à 110% par défaut : on reprend ici directement les
   tailles rendues équivalentes, sans dépendre du même mécanisme de zoom JS). ── */
.pres-scroll{flex:1;overflow:auto;padding:16px 20px;display:flex;justify-content:center;align-items:flex-start;user-select:none}
.pres-table-card{display:block;flex:none;background:#fff;border:1px solid var(--rail-bg);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:16px 20px}
.pres-scroll .mh-wk{top:0}
.pres-scroll .mh-day{top:14px;border-bottom:1px solid var(--grid-bd);width:24px;min-width:24px;font-size:11px}
.pres-scroll thead .pl-mark,.pres-scroll thead .pl-name{z-index:12}
.pres-scroll .svc-row td{height:22px;font-size:11px}
.pres-scroll .mc{font-size:10.5px}
/* Séparation de semaine (dimanche→lundi) plus marquée sur cette page, y
   compris sur les cases colorées (statut/lieu/roulement) dont le border
   !important de même spécificité la masquerait sinon */
.pres-scroll .mc.wk-start,.pres-scroll .pc.wk-start{border-left:2px solid var(--rail-bg)!important}

/* Espace vide au-dessus de la colonne "agent" (lignes semaine/jour/roulement,
   colonnes figées) : pas de séparateur horizontal interne, juste le cadre
   extérieur (haut du tableau) et la ligne épaisse sous le roulement, déjà
   gérés ailleurs. */
.mh-wk.pl-mark,.mh-wk.pl-name,.mh-day.pl-mark,.mh-day.pl-name,.mh-rot.pl-mark,.mh-rot.pl-name{
  border-top:none!important;border-bottom:none!important;border-left:none!important;
}

/* Ligne "Roulement" de l'équipe sélectionnée, sous la ligne des jours —
   dernière ligne d'en-tête : porte la séparation épaisse avec le corps du
   tableau (règles .pl-mark/.pl-name/.mc dédiées : ces classes ont elles-mêmes
   un border !important de même spécificité, sinon elles la masqueraient). */
.mh-rot{position:sticky;height:21px}
.mh-rot.pl-name{font-style:italic;color:var(--tx3);font-weight:600}
/* Libellés "Service X" / "Équipe X" dans l'espace au-dessus de la colonne agent (même police) */
.pl-svc-lbl,.pl-eq-lbl{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif!important;font-size:11px!important;font-weight:800!important;color:var(--rail-bg)!important;letter-spacing:.2px!important;text-transform:none!important;font-style:normal!important}
.mh-rot.pl-mark,.mh-rot.pl-name,.mh-rot.mc{border-bottom:2px solid var(--rail-bg)!important}
/* Cases M/A/N/J/R cliquables : une note libre par jour, indépendante des agents.
   Pas de position:relative ici : .mh-rot est déjà position:sticky (qui établit
   lui-même un contexte de positionnement pour le point ::after) — surcharger en
   relative casserait le sticky (le top calculé en JS deviendrait un décalage
   relatif au lieu d'un ancrage, poussant la ligne sous le tableau). */
.mh-rot.mc{cursor:pointer}
.mh-rot.mc.has-note::after{content:'';position:absolute;top:2px;right:2px;width:3px;height:3px;
    border-radius:50%;background:var(--rail-bg)}

/* Colonnes figées : marqueur + nom de l'agent */
.pl-mark{width:14px;min-width:14px;max-width:14px;position:sticky;left:0;z-index:10;
        background:var(--white);border-right:none!important;
        border-bottom:1px solid var(--grid-bd)!important}
.pl-name{width:150px;min-width:150px;max-width:150px;position:sticky;left:14px;z-index:10;
        background:var(--white);border-right:2px solid var(--rail-bg)!important;
        border-bottom:1px solid var(--grid-bd)!important;text-align:left;padding:0 8px;
        font-size:10px;font-weight:600;color:var(--tx2);
        overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pres-vacant{font-style:italic;color:var(--tx4);font-weight:500}

/* Lignes agent */
.agent-row td{height:21px;border-bottom:1px solid var(--grid-bd);border-left:none;border-right:none;padding:0}
/* Fine grille verticale entre chaque case jour (les séparateurs épais —
   semaine, sous-groupes — gardent une spécificité/règle dédiée plus forte) */
.agent-row .pc{border-left:1px solid var(--grid-bd);border-right:1px solid var(--grid-bd)}
.agent-row--vacant .pl-name{background:#fffbeb!important}
/* Opérateurs 3×8 mis à disposition par le Service 5 (Services 1/2/3) : informatif, non comptabilisé */
.agent-row--aux .pl-name{font-style:italic;color:var(--tx3)}
.agent-row--aux .pc{cursor:default}
.agent-row--aux td{height:18px}
/* Couleurs rétablies pour les 3×8 afin de distinguer leurs horaires du 2×8 */
.agent-row--aux .pc.has-M{background:var(--M-bg);color:var(--M)}
.agent-row--aux .pc.has-A{background:var(--A-bg);color:var(--A)}
.agent-row--aux .pc.has-J{background:var(--J-bg);color:var(--J)}
/* Étiquette d'équipe entre chaque groupe du renfort 3×8 (voir _presAuxEqLabelRow) */
.agent-row--aux-eq-lbl td{height:12px;font-size:8.5px;font-weight:700;font-style:italic;
  letter-spacing:.2px;color:var(--tx3);padding:0 8px;background:var(--surf);
  border-top:1px solid var(--grid-bd)!important;border-bottom:none!important;
  border-left:none!important;border-right:none!important}

/* Cellules jour (statut présence/absence) */
.pc{text-align:center;vertical-align:middle;font-size:10.5px;font-weight:700;
    border:1px solid var(--grid-bd);font-family:inherit;padding:0;cursor:pointer;position:relative}
.pres-readonly .pc{cursor:default}
/* Note libre saisie pour ce jour : repère discret en haut à droite de la case */
.pc--has-note::after{content:'';position:absolute;top:2px;right:2px;width:3px;height:3px;
    border-radius:50%;background:var(--rail-bg)}
/* Réduction de police pour les codes longs (3 ou 4 lettres : NDP, MBR, BIOF…) */
.pc--len3{font-size:8.5px}
.pc--len4{font-size:7.5px}
.pc.na{cursor:default;background:var(--surf)}
.pc.we{background:var(--we-bg)}
.pc.fer{background:var(--fer-bg)}
.pc.today-col{background:var(--today-bg)}
.pc.st-C{background:#D1FAE5;color:#047857;border:1px solid var(--grid-bd)!important}
.pc.st-ML{background:#FEE2E2;color:#B91C1C;border:1px solid var(--grid-bd)!important}
.pc.st-F{background:#E0E7FF;color:#4338CA;border:1px solid var(--grid-bd)!important}
.pc.st-A{background:#F1F5F9;color:#475569;border:1px solid var(--grid-bd)!important}
/* Jours travaillés (présent) : fond neutre — seules absences et remplacements sont colorés. */
.pc.has-M,.pc.has-A,.pc.has-N,.pc.has-J{border:1px solid var(--grid-bd)!important}
/* Repos agent : légère teinte grise (pas sur la ligne Roulement qui utilise .mc). */
.pc.has-R{background:#EBEBEB;border:1px solid var(--grid-bd)!important}
/* Remplacement (lieu différent du défaut) : fond jaune pour visualisation immédiate. */
.pc.lieu-alt-text{background:#f7c618!important;color:#78380F!important;font-weight:800}
/* Rythme manuel (différent du roulement standard de l'équipe) : liseré pointillé */
.pc.rythme-alt{box-shadow:inset 0 0 0 1px var(--rail-bg);outline:1px dashed var(--rail-bg);outline-offset:-2px}
/* Rythmes 3×8 explicites (M3/A3/N3) : couleurs du roulement */
.pc.rythme-3x8.has-M{background:var(--M-bg);color:var(--M)}
.pc.rythme-3x8.has-A{background:var(--A-bg);color:var(--A)}
.pc.rythme-3x8.has-N{background:var(--N-bg);color:var(--N)}
.pc.wk-start{border-left:1px solid var(--rail-bg)!important}
/* Case sélectionnée (clic, ou déplacement au clavier) */
.pc--selected{outline:2px solid var(--acc);outline-offset:-2px;position:relative;z-index:6}

/* Case divisée Matin/Après-midi (Service 5, jours en rythme J) : miroir en
   lecture seule du planning Semaine J. Si le code est identique matin/soir,
   voir .pc-full-* plus bas (case entière, même échelle que les autres jours) ;
   ici uniquement le cas où les deux demi-journées diffèrent — lettre réduite
   pour tenir dans la moitié de case. Détail complet (notes incluses) en
   infobulle au survol, pas affiché directement dans la case. */
.pc--split{padding:0;cursor:pointer}
.pc-split-wrap{display:flex;flex-direction:column;height:100%}
.pc-half{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:6.5px;line-height:1}
.pc-half--len2{font-size:5.5px}
.pc-half-C{background:#D1FAE5;color:#047857}
.pc-half-F{background:#E0E7FF;color:#4338CA}
.pc-half-ML{background:#FEE2E2;color:#B91C1C}
.pc-half-absaut{background:#F1F5F9;color:#475569}
.pc-half-M3{background:var(--M-bg);color:var(--M)}
.pc-half-A3{background:var(--A-bg);color:var(--A)}
.pc-half-N3{background:var(--N-bg);color:var(--N)}
/* Repos implicite (l'autre demi-journée est en M ou A 3×8) */
.pc-half-repos{background:#EBEBEB;color:#6B7280;font-size:6.5px!important}

/* Case Semaine J avec le même code matin/après-midi -> traitée comme une
   case normale (même échelle de police que .pc/.pc--len3/.pc--len4), pas de
   split. Mêmes teintes que .pc-half-*, avec la bordure d'une case entière. */
.pc.pc-full-C{background:#D1FAE5;color:#047857;border:1px solid var(--grid-bd)!important}
.pc.pc-full-F{background:#E0E7FF;color:#4338CA;border:1px solid var(--grid-bd)!important}
.pc.pc-full-ML{background:#FEE2E2;color:#B91C1C;border:1px solid var(--grid-bd)!important}
.pc.pc-full-absaut{background:#F1F5F9;color:#475569;border:1px solid var(--grid-bd)!important}
.pc.pc-full-M3{background:var(--M-bg);color:var(--M);border:1px solid var(--grid-bd)!important}
.pc.pc-full-A3{background:var(--A-bg);color:var(--A);border:1px solid var(--grid-bd)!important}
.pc.pc-full-N3{background:var(--N-bg);color:var(--N);border:1px solid var(--grid-bd)!important}

/* Aération entre sous-groupes de postes (Service 5) : un petit espace
   vide plutôt qu'une ligne de séparation marquée. */
.agent-spacer-row td{height:7px;padding:0;border-top:none;border-bottom:none;background:var(--white)}

/* Grille de statistiques (effectifs présents/absents par jour), en pied de tableau */
.pres-stats-toggle-row td{text-align:center;padding:1px 0;background:var(--surf);border-top:1px solid var(--bd)!important}
.pres-stats-toggle-btn{font-family:inherit;font-size:8.5px;font-weight:500;color:var(--tx3);
    background:none;border:none;padding:1px 6px;cursor:pointer;letter-spacing:.2px;transition:color .15s}
.pres-stats-toggle-btn:hover{color:var(--acc)}
.pres-stats-row td{height:15px}
.pres-stats-row .pl-name{font-size:9.5px;font-weight:600;color:var(--tx2)}
.pres-stat-cell{text-align:center;font-size:9.5px;font-weight:600;color:var(--tx2);border:1px solid var(--grid-bd)}
.pres-stats-row--total td{border-top:1px solid var(--bd2)!important}
.pres-stats-row--total .pl-name,.pres-stats-row--total .pres-stat-cell{font-weight:800;color:var(--tx)}
.mtable tfoot tr:last-child td{border-bottom:2px solid var(--rail-bg)!important}

.agent-row:hover .pc:not(.na):not([class*="st-"]){filter:brightness(.97)}

/* ── RÉCAPITULATIF ANNUEL ─────────────────────────────────────────── */
.yr-table{border-collapse:collapse;font-size:10px;width:max-content;min-width:100%}
.yr-th-name{font-size:11px;font-weight:700;text-align:left;padding:5px 10px;
  background:var(--rail-bg);color:#fff;white-space:nowrap;min-width:180px;
  position:sticky;left:0;z-index:14}
.yr-sec-hdr{text-align:center;font-size:8.5px;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;padding:3px 6px;white-space:nowrap;border-left:2px solid var(--white)}
.yr-sec-planning{background:var(--surf);color:var(--tx3)}
.yr-sec-abs{background:#FEF9C3;color:#92400e}
.yr-sec-shifts{background:#EFF6FF;color:#1e40af}
.yr-sec-lieux{background:#F0FDF4;color:#166534}
.yr-col-hdr{font-size:9.5px;font-weight:700;padding:2px 5px;min-width:30px;
  text-align:center;white-space:nowrap;border-left:1px solid var(--bd)}
.yr-zone-hdr{text-align:center;font-size:8px;font-weight:700;letter-spacing:.2px;
  padding:2px 5px;white-space:nowrap;background:#E2F4E8;color:#166534;
  border-left:2.5px solid #6B9C82;border-bottom:1px solid var(--bd2)}
.yr-zone-hdr.yr-zone-end{border-right:2.5px solid #6B9C82}
.yr-agent-row td{height:20px;border-bottom:1px solid var(--grid-bd)}
.yr-agent-row:hover td{background:var(--surf)!important}
.yr-agent-row .pl-name{padding:3px 8px;position:sticky;left:0;background:var(--white);z-index:2;
  border-right:2px solid var(--rail-bg)}
.yr-agent-row:hover .pl-name{background:var(--surf)!important}
.yr-poste{font-size:8px;color:var(--tx3);font-weight:400;display:block;white-space:nowrap}
.yr-stat-cell{text-align:center;font-weight:600;border:1px solid var(--grid-bd);padding:0 4px;white-space:nowrap}
.yr-stat-cell.yr-zone-start{border-left:2.5px solid #6B9C82}
.yr-sec-hdr.yr-sec-start,.yr-col-hdr.yr-sec-start,.yr-zone-hdr.yr-sec-start,
.yr-stat-cell.yr-sec-start{border-left:3px solid var(--rail-bg)!important}
.yr-sec-hdr.yr-sec-end{border-right:3px solid var(--rail-bg)!important}
.yr-stat-cell.yr-zero{color:var(--tx4);font-weight:400}
.yr-stat-cell.yr-abs{background:#fefce8}
.yr-stat-cell.yr-abs.yr-nz{background:#fef08a;color:#854d0e}
.yr-stat-cell.yr-repl.yr-nz{background:#fef9c3;color:#78380F;font-weight:800}
.yr-group-sep td{height:4px;background:var(--surf);border-top:1px solid var(--bd);border-bottom:none;padding:0}
.yr-date-badge{font-size:8px;color:var(--tx4);font-weight:500;margin-left:4px;white-space:nowrap}
.yr-caption{font-size:10px;color:var(--tx3);padding:8px 10px 4px;font-style:italic}
.yr-cutoff-banner{font-size:10.5px;font-weight:500;color:var(--tx3);
  padding:6px 10px 4px;text-align:center}

@media(max-width:480px){
  .pres-scroll{padding:10px 8px}
}

/* ── PLANNING SEMAINE J — SERVICE 5 ────────────────────────────── */
.semj-scroll{flex:1;overflow:auto;padding:16px 20px;display:flex;justify-content:center;align-items:flex-start;user-select:none}
/* flex:none (comme .pres-table-card) : la carte se dimensionne à son
   contenu — colonnes à largeur fixe (voir semj.js colgroup) — au lieu de
   s'étirer sur toute la largeur disponible, ce qui gonflait chaque case
   bien au-delà de ce qu'il faut pour un code + une courte note. */
.semj-card{display:block;flex:none;background:var(--white);border:1px solid var(--rail-bg);
  border-radius:var(--r);box-shadow:var(--shadow-sm);padding:16px 20px;box-sizing:border-box}
/* Figer les couleurs de la grille en mode clair (identique .mtable / .sem-wrap
   sur les plannings équipe/mensuel/annuel) : sans ça, le tableau et sa
   légende restaient sombres avec un texte peu lisible en mode sombre au lieu
   de garder la carte blanche lisible des autres plannings. */
.semj-card{--bg:#eaeef4;--white:#ffffff;--surf:#f5f8fc;--surf2:#dde8ff;
  --bd:#dbe3ee;--bd2:#c2cedd;--tx:#1f2a3a;--tx2:#3d4760;--tx3:#6b7a90;
  --we-bg:#f0edfa;--we-tx:#4c3d7a;--fer-bg:#fff7ed;--fer-tx:#dc2626;--today-bg:#FEE2E2;
  background:#ffffff;color:#1f2a3a}

.semj-table{--grid-bd:var(--bd2);margin:0 auto;
  /* La légende (texte libre au-dessus) peut être plus large que le tableau à
     colonnes fixes — sans centrage explicite, le tableau restait collé à
     gauche dans une carte élargie par la légende plutôt que de suivre le
     centrage du cadre. */
  --semj-tint-1:color-mix(in srgb,var(--acc) 8%,var(--white));
  --semj-tint-2:color-mix(in srgb,var(--acc) 18%,var(--white));
  --semj-tint-3:color-mix(in srgb,var(--acc) 30%,var(--white));
  border-collapse:collapse;font-size:9.5px;font-family:inherit;table-layout:fixed}
.semj-table th,.semj-table td{border:1px solid var(--grid-bd);padding:0 4px;vertical-align:middle;overflow:hidden}
/* Cadre extérieur 2px, comme .mtable (plannings équipe/mensuel) — le
   tableau se lit comme une grille encadrée plutôt qu'un simple quadrillage. */
/* Pas de !important ici : la spécificité (pseudo-classe en plus) suffit à
   l'écran, et laisse l'impression (body.view-semj .semj-table th, plus bas)
   garder ses propres bordures noires 1pt sans conflit. */
.semj-table tr:first-child th{border-top:2px solid var(--rail-bg)}
.semj-table tr:last-child td{border-bottom:2px solid var(--rail-bg)}
.semj-table th:first-child,.semj-table td:first-child{border-left:2px solid var(--rail-bg)}
.semj-table th:last-child,.semj-table td:last-child{border-right:2px solid var(--rail-bg)}
/* Séparateurs internes épais (colonne agent détachée de la grille, comme
   .pl-name ; ligne épaisse sous le dernier en-tête, comme .mh-day) — dans
   @media screen pour ne prendre aucun risque avec les bordures noires
   dédiées de l'impression plus bas (pas de calcul de spécificité à faire). */
@media screen {
  .semj-table th.semj-th-lbl{border-right:2px solid var(--rail-bg)}
  .semj-table th.semj-th-aire-hdr{border-right:2px solid var(--rail-bg)}
  .semj-table thead tr:last-child th{border-bottom:2px solid var(--rail-bg)}
}

/* En-têtes */
.semj-th-eq{background:var(--rail-bg);color:#fff;font-size:12px;font-weight:800;
  text-align:center;padding:2px 8px;white-space:nowrap}
.semj-th-week{font-size:10.5px;font-weight:700;text-align:center;padding:1px 8px;
  background:var(--semj-tint-1)}
.semj-th-lbl{background:var(--semj-tint-2);font-weight:700;font-size:8.5px;text-align:center;
  white-space:nowrap;padding:1px 4px}
.semj-th-aire-hdr{background:var(--semj-tint-2);font-weight:700;font-size:8.5px;text-align:center;
  padding:1px 4px}
.semj-th-day{background:var(--semj-tint-3);font-weight:700;font-size:9px;text-align:center;padding:1px 4px}
.semj-th-day.semj-ferie{background:color-mix(in srgb,#dc2626 22%,var(--white));
  color:color-mix(in srgb,#dc2626 70%,var(--tx))}
.semj-th-half{background:var(--semj-tint-2);font-size:8px;font-weight:600;text-align:center;
  padding:0 3px}

/* Lignes agents — même gabarit typographique que .pl-name (plannings équipe),
   avec le même séparateur 2px qui détache la colonne nom de la grille. */
.semj-agent-row:hover td{background:var(--surf)!important}
.semj-table td.semj-td-name{font-weight:600;font-size:10px;color:var(--tx2);padding:0 6px;white-space:nowrap;
  text-overflow:ellipsis;background:var(--white);border-right:2px solid var(--rail-bg)}
.semj-table td.semj-td-aire{text-align:center;font-size:9px;font-weight:600;background:var(--semj-tint-1);
  vertical-align:middle;white-space:nowrap;text-overflow:ellipsis}
@media screen {
  .semj-table td.semj-td-aire{border-left:2px solid var(--rail-bg);border-right:2px solid var(--rail-bg)}
  /* Dernier groupe : cette cellule (rowSpan) appartient à la ligne du premier
     agent du groupe, jamais à tr:last-child — voir semj.js. */
  .semj-table td.semj-td-aire--last{border-bottom:2px solid var(--rail-bg)}
}
.semj-td-cell{text-align:center;padding:0 2px;background:var(--white)}

/* Case de saisie (code + note) — resserrée au gabarit des autres plannings
   (.agent-row td: 21px) tout en gardant la place pour la note en 2e ligne. */
.semj-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:100%;min-height:23px;padding:1px 0;cursor:pointer;outline-offset:-1px}
.semj-cell:not([class*="pc-half-"]):hover{background:var(--surf)}
.semj-cell:focus{outline:1px solid var(--acc)}
.semj-cell:not([class*="pc-half-"]):focus{background:color-mix(in srgb,var(--acc) 8%,var(--white))}
.semj-cell[class*="pc-half-"]:hover{filter:brightness(.94)}
.semj-cell--readonly{cursor:default}
.semj-cell--readonly:not([class*="pc-half-"]):hover{background:none}
/* Repos implicite (l'autre demi-journée est en M ou A 3×8, qui couvre déjà
   toute la journée de travail) : point neutre, non modifiable. */
.semj-cell.semj-half-repos{background:#EBEBEB;cursor:default}
.semj-cell.semj-half-repos .semj-code{color:#6B7280;font-size:9px}
.semj-code{font-size:10.5px;font-weight:700;color:var(--tx);line-height:1.2;font-family:inherit}
.semj-note{max-width:100%;font-size:7px;font-weight:500;color:var(--tx3);line-height:1.2;
  margin-top:1px;text-align:center;white-space:normal;word-break:break-word;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Séparateur de groupe */
.semj-sep td{height:2px;background:var(--semj-tint-1);border-color:var(--grid-bd);padding:0}

/* Légende raccourcis clavier (au-dessus du tableau) */
.semj-legend-block{background:var(--surf);border:1px solid var(--grid-bd);border-radius:6px;
  padding:4px 10px;margin-bottom:8px}
.semj-legend{font-size:10.5px;color:var(--tx2);line-height:1.8}
.semj-legend b{color:var(--tx)}
.semj-kbdbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:3px 10px;
  padding-bottom:4px;margin-bottom:4px;border-bottom:1px solid var(--grid-bd);
  color:var(--tx2);font-size:9.5px}
.semj-kbditem{display:inline-flex;align-items:center;gap:3px;white-space:nowrap;
  cursor:pointer;user-select:none;border-radius:4px;padding:1px 3px;transition:background .12s}
.semj-kbditem:hover{background:var(--surf2)}
.semj-kbditem:hover .semj-kbd{background:var(--acc);color:#fff;border-color:var(--acc)}
.semj-kbditem:active .semj-kbd{transform:translateY(1px);box-shadow:none}
.semj-kbd{display:inline-block;font-family:inherit;font-size:9px;font-weight:700;
  background:var(--surf2);border:1px solid var(--bd2);border-radius:3px;color:var(--tx);
  padding:1px 4px;line-height:15px;box-shadow:0 1px 0 var(--bd2);letter-spacing:0}
.semj-hint{text-align:center;font-size:8.5px;font-style:italic;color:var(--tx3);margin-bottom:4px}
/* Pas de taille propre auparavant : héritait des 12px de .semj-legend-block,
   nettement plus gros que le reste de la légende (raccourcis 10.5px,
   indice 9px) — ramené au même ordre de grandeur. */
.semj-desc{color:var(--tx3);font-size:9.5px}
.semj-desc-row{text-align:left}
.semj-desc-row + .semj-desc-row{margin-top:2px}

/* chip marquée "équipe en J cette semaine" */
.pres-chip.semj-chip-j{border:1.5px solid #d97706;color:color-mix(in srgb,#d97706 75%,var(--tx))}
.pres-chip.semj-chip-j.active{border-color:transparent;color:var(--chip-active-tx)}
.semj-j-badge{display:inline-block;background:#d97706;color:#fff;
  font-size:8px;font-weight:700;padding:0 4px;border-radius:3px;
  margin-left:4px;vertical-align:middle;line-height:14px}
.pres-chip.active .semj-j-badge{background:color-mix(in srgb,var(--chip-active-tx) 35%,transparent);color:var(--chip-active-tx)}

/* puces équipe de Semaine J : purement informatives (pas de sélection ici) */
.pres-chip.semj-chip-static{cursor:default;pointer-events:none;opacity:1}

/* ── IMPRESSION (Semaine J) ──────────────────────────────────────
   Tout ici est scopé à body.view-semj : @media print s'applique à
   n'importe quel window.print(), quelle que soit la page active — sans
   ce garde-fou, imprimer depuis une autre page (calendrier annuel,
   mensuel...) affichait par erreur le contenu de Semaine J à la place. */
@media print {
  body.view-semj .rail,body.view-semj .phone-topbar,body.view-semj .topbar,body.view-semj .optionsbar,
  body.view-semj .ctrl-btn,body.view-semj .pres-scroll{display:none!important}

  body.view-semj{background:#fff!important;margin:0;padding:0}
  body.view-semj .content-col{padding:0!important;margin:0!important}
  /* #view-semj devient la colonne pleine page : le bandeau logo/titre reste
     fixé en haut (flex:none) et .semj-scroll se centre dans l'espace restant
     (flex:1), plutôt que sur les 100vh entiers qui ignoreraient la hauteur
     du bandeau. */
  body.view-semj #view-semj{display:flex!important;flex-direction:column;min-height:100vh;padding:0}
  body.view-semj #print-header-semj{display:flex!important}
  /* Centrage vertical du contenu dans l'espace sous le bandeau */
  body.view-semj .semj-scroll{display:flex!important;flex-direction:column;justify-content:center;
    flex:1;overflow:visible;padding:4mm;box-sizing:border-box}
  /* Légende sous le planning à l'impression (elle reste au-dessus à l'écran) :
     card.appendChild(legend) puis card.appendChild(tbl) dans semj.js, donc
     column-reverse inverse l'ordre visuel sans toucher au DOM/à l'écran. */
  body.view-semj .semj-card{border:none!important;box-shadow:none!important;padding:0!important;overflow:visible!important;
    display:flex!important;flex-direction:column-reverse!important;gap:4pt}

  /* Cases : pas de curseur/contour à l'impression, mais on garde le fond
     coloré des statuts (M/A/N/C/F/ML/AA/repos) — mêmes teintes qu'à l'écran,
     pour repérer les codes en un coup d'œil sur le PDF imprimé. */
  body.view-semj .semj-cell{cursor:default;outline:none!important}
  body.view-semj .semj-cell:not([class*="pc-half-"]):not(.semj-half-repos){background:none!important}
  body.view-semj .semj-code{font-size:9pt}
  body.view-semj .semj-note{font-size:6pt}
  body.view-semj .semj-cell[class*="pc-half-"],body.view-semj .semj-cell.semj-half-repos{
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  body.view-semj .pc-half-C{background:#D1FAE5!important;color:#047857!important}
  body.view-semj .pc-half-F{background:#E0E7FF!important;color:#4338CA!important}
  body.view-semj .pc-half-ML{background:#FEE2E2!important;color:#B91C1C!important}
  body.view-semj .pc-half-absaut{background:#F1F5F9!important;color:#475569!important}
  body.view-semj .pc-half-M3{background:#D6E4FF!important;color:#1D4ED8!important}
  body.view-semj .pc-half-A3{background:#FCEFC0!important;color:#946109!important}
  body.view-semj .pc-half-N3{background:#FFD6AD!important;color:#B4480F!important}
  body.view-semj .semj-half-repos{background:#EBEBEB!important}
  body.view-semj .semj-half-repos .semj-code{color:#6B7280!important}

  /* Polices et bordures pour impression */
  body.view-semj .semj-table{font-size:8pt;border-collapse:collapse;width:100%}
  body.view-semj .semj-table th,body.view-semj .semj-table td{border:1px solid #000;padding:1.5pt 3pt}
  body.view-semj .semj-th-eq{font-size:13pt;background:#143A63!important;color:#fff!important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  body.view-semj .semj-th-week{font-size:11pt;background:#EFF4FB!important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  body.view-semj .semj-th-day{background:#C4D3EB!important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  body.view-semj .semj-th-day.semj-ferie{background:color-mix(in srgb,#dc2626 25%,#C4D3EB)!important;
    color:color-mix(in srgb,#dc2626 70%,#000)!important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  body.view-semj .semj-th-lbl,body.view-semj .semj-th-aire-hdr,body.view-semj .semj-th-half{background:#D6E0F0!important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  body.view-semj .semj-td-aire{background:#EBF0FA!important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  body.view-semj .semj-sep td{background:#E8EDF8!important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  /* Raccourcis clavier et rappel du double-clic : utiles à l'écran, sans
     objet sur une page imprimée. Seule la légende des codes (C/F/M/A...)
     reste, redimensionnée pour la place disponible. */
  body.view-semj .semj-kbdbar,body.view-semj .semj-hint{display:none!important}
  body.view-semj .semj-legend-block{padding:2pt 4pt;margin-bottom:4pt}
  body.view-semj .semj-desc{font-size:7pt}
}