/* ============================================================
   Gestion heures LDT — feuille de décompte
   Couleurs héritées de la légende du classeur :
   jaune = saisie · gris = calcul automatique · vert = paramètre de référence · rouge = journée dérogatoire
   ============================================================ */
:root {
  /* Charte Gander Autocar (gander-autocar.ch) : bleu nuit #112B43, bleu #3F5C85, texte #323335, rouge du logo #A00830 ;
     Poppins pour les titres, Roboto pour le texte. */
  --navy: #112b43; --navy-2: #0b1d2e; --brand-red: #a00830;
  --ink: #323335; --ink-2: #5a5d62; --ink-3: #8b8f95;
  --paper: #f4f6f9; --card: #ffffff; --line: #dcdcdc; --line-2: #eceef1;
  --rail: #3f5c85; --rail-2: #112b43; --rail-tint: #e8edf4;
  --input: #fff4cc; --input-2: #f6c744; --calc: #f0f2f5; --ref: #e3f2e7; --ref-2: #2e7d4f;
  --alert: #b42318; --alert-tint: #fdecea; --night: #4b3fa0; --night-tint: #ecebf7;
  --ok: #2e7d4f; --warn: #b7791f; --warn-tint: #fff7e0;
  --display: "Poppins", "Segoe UI", Arial, sans-serif;
  --ui: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --body: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;   /* chiffres : Roboto à chasse tabulaire (alignés), pas de police « machine à écrire » */
  /* Échelle typographique unique de l'outil (3.1.18) — base 15 px : 11 · 12 · 13 · 14 · 15 · 17 px */
  --fs-xs: .7333rem; --fs-sm: .8rem; --fs-md: .8667rem; --fs-base: .9333rem; --fs-lg: 1rem; --fs-xl: 1.1333rem;
  --r: 6px; --pill: 25px; --shadow: 0 1px 2px rgba(17,43,67,.06), 0 6px 20px -10px rgba(17,43,67,.18);
}
* { box-sizing: border-box; }
html { font-size: 15px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); line-height: 1.45; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; letter-spacing: .01em; margin: 0; }
h1 { font-size: 1.9rem; } h2 { font-size: 1.45rem; } h3 { font-size: var(--fs-xl); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
p { margin: .4em 0; } .muted { color: var(--ink-3); } .small { font-size: var(--fs-md); }
a { color: var(--rail); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--rail); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---- Boutons */
.btn { display: inline-flex; align-items: center; gap: .4em; padding: .45em .9em; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); cursor: pointer; font-family: var(--ui); font-size: var(--fs-lg); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-2); transition: background .15s, border-color .15s; }
.btn:hover { border-color: var(--rail); color: var(--rail); }
.btn.primary { background: var(--rail); border-color: var(--rail); color: #fff; } .btn.primary:hover { background: var(--rail-2); }
.btn.danger { color: var(--alert); border-color: #f0c2bd; } .btn.danger:hover { background: var(--alert-tint); }
.btn.ghost { border-color: transparent; background: transparent; } .btn.ghost:hover { background: var(--rail-tint); }
.btn.sm { padding: .25em .6em; font-size: var(--fs-base); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* ---- Formulaires */
label { display: block; font-family: var(--ui); font-size: var(--fs-base); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); margin: .5rem 0 .25rem; }
label > input, label > select, label > textarea { display: block; width: 100%; margin-top: .25rem; }
input, select, textarea { padding: .45em .6em; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
input:focus, select:focus, textarea:focus { border-color: var(--rail); outline: none; box-shadow: 0 0 0 3px rgba(63,92,133,.2); }
input.time { font-family: var(--mono); width: 5.2em; text-align: center; padding: .3em .2em; }
input.num { font-family: var(--mono); text-align: right; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .25rem 1.25rem; }
.error { color: var(--alert); background: var(--alert-tint); padding: .5em .8em; border-radius: var(--r); }
.hint { font-size: var(--fs-md); color: var(--ink-3); margin-top: .2rem; }
.check { display: inline-flex; align-items: center; gap: .5em; text-transform: none; letter-spacing: 0; font-family: var(--body); font-size: var(--fs-base); margin: .35rem 0; }
.check input { width: 1.1em; height: 1.1em; }

/* ---- Connexion */
.login-body { display: grid; place-items: center; min-height: 100vh; margin: 0; }
.login-card { background: var(--card); padding: 2rem 2.2rem; border-radius: 10px; box-shadow: var(--shadow); width: min(420px, 92vw); }
.login-card h2 { margin: 1rem 0 .3rem; }
.login-card form { margin-top: .8rem; } .login-card .btn { margin-top: 1rem; width: 100%; justify-content: center; }
.brand { display: flex; align-items: center; gap: .7rem; }
.brand-logo { display: block; height: 46px; width: auto; }
.login-card .brand { justify-content: center; margin-bottom: .4rem; }
.login-card .brand-logo { height: 62px; }
.brand-mark { font-family: var(--display); font-weight: 700; font-size: var(--fs-xl); letter-spacing: .12em; background: var(--rail); color: #fff; padding: .25em .5em; border-radius: 4px; }
.brand h1 { font-size: 1.35rem; white-space: nowrap; }

/* ---- Structure */
.topbar { background: var(--rail); color: #fff; display: flex; align-items: center; gap: 1.2rem; padding: 0 1.2rem; height: 62px; position: sticky; top: 0; z-index: 30; }
/* Le logo est en noir et rouge : on le pose sur une plaque blanche pour rester lisible sur le bandeau. */
.topbar .brand { background: #fff; border-radius: 5px; padding: .3rem .6rem; line-height: 0; }
.topbar .brand-logo { height: 34px; }
.topbar .brand-mark { background: #fff; color: var(--rail); }
.topbar .brand h1 { color: #fff; font-size: var(--fs-xl); }
.nav { display: flex; gap: .1rem; margin-left: auto; overflow-x: auto; flex: 1 1 auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { color: rgba(255,255,255,.8); text-decoration: none; font-family: var(--ui); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: var(--fs-md); padding: .45em .5em; border-radius: 4px; white-space: nowrap; }
.nav a:hover { background: rgba(255,255,255,.1); color: #fff; } .nav a.active { background: #fff; color: var(--rail); }
.userbox { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-md); color: rgba(255,255,255,.85); flex: 0 0 auto; }
.userbox > span { white-space: nowrap; }
/* La barre passe sur deux lignes plutôt que de tronquer la navigation. */
@media (max-width: 1400px) {
  .topbar { height: auto; flex-wrap: wrap; padding: .45rem .9rem; gap: .7rem; }
  .nav { order: 3; width: 100%; margin-left: 0; }
  .userbox { margin-left: auto; }
}
.userbox .btn { color: #fff; border-color: rgba(255,255,255,.35); background: transparent; font-size: var(--fs-md); }
.main { padding: 1.2rem; max-width: 1600px; margin: 0 auto; }
.card { background: var(--card); border-radius: 8px; box-shadow: var(--shadow); padding: 1rem 1.2rem; margin-bottom: 1rem; }
.card-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.card-head h2 { margin-right: auto; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }
.toolbar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.toolbar select { min-width: 12em; }
.monthnav { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; }
.monthnav button { border: 0; background: transparent; padding: .4em .7em; cursor: pointer; font-size: var(--fs-xl); } .monthnav button:hover { background: var(--rail-tint); }
.monthnav .label { font-family: var(--display); font-weight: 600; font-size: var(--fs-xl); min-width: 10em; text-align: center; text-transform: uppercase; letter-spacing: .05em; }
.badge { display: inline-block; padding: .15em .55em; border-radius: 99px; font-family: var(--ui); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-md); background: var(--calc); color: var(--ink-2); }
.badge.open { background: var(--input); color: #7a5a00; } .badge.submitted { background: var(--rail-tint); color: var(--rail); } .badge.validated { background: var(--ref); color: var(--ref-2); }
.badge.warn { background: var(--warn-tint); color: var(--warn); }
.legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--ink-2); margin: .5rem 0; }
.legend span::before { content: ""; display: inline-block; width: 1em; height: 1em; border-radius: 3px; vertical-align: -.15em; margin-right: .35em; border: 1px solid var(--line); }
.legend .l-in::before { background: var(--input); } .legend .l-calc::before { background: var(--calc); } .legend .l-ref::before { background: var(--ref); } .legend .l-alert::before { background: var(--alert-tint); border-color: var(--alert); } .legend .l-sun::before { background: var(--rail-tint); }

/* ---- Bandeau des soldes (signature) */
.balances { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; margin: .6rem 0 1rem; }
.bal { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: .55rem .8rem; position: relative; overflow: hidden; }
.bal::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--rail); }
.bal.night::before { background: var(--night); } .bal.chf::before { background: var(--ref-2); }
.bal .k { font-family: var(--ui); text-transform: uppercase; letter-spacing: .08em; font-size: var(--fs-md); color: var(--ink-3); }
.bal .v { font-family: var(--mono); font-size: 1.35rem; font-weight: 500; line-height: 1.2; }
.bal .v.neg { color: var(--alert); } .bal .v.pos { color: var(--ref-2); }
.bal .from { font-family: var(--mono); font-size: var(--fs-sm); color: var(--ink-3); }
.bal .from b { color: var(--ink-2); font-weight: 500; }

/* ---- Tableaux */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--fs-md); }
#sheetTbl { font-size: var(--fs-md); } #sheetTbl td.num, #sheetTbl td.calc { padding: .25em .4em; }
th, td { padding: .3em .5em; border-bottom: 1px solid var(--line-2); border-right: 1px solid var(--line-2); white-space: nowrap; vertical-align: middle; }
th:last-child, td:last-child { border-right: 0; }
thead th { position: sticky; top: 0; z-index: 3; background: var(--card); font-family: var(--ui); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: var(--fs-sm); color: var(--ink-2); text-align: center; border-bottom: 2px solid var(--line); line-height: 1.15; }
thead tr.group th { font-size: var(--fs-sm); color: var(--ink-3); border-bottom: 1px solid var(--line-2); background: var(--paper); }
td.num, th.num { font-family: var(--mono); text-align: right; }
td.calc { background: var(--calc); } td.in { background: var(--input); } td.ref { background: var(--ref); }
td.night { color: var(--night); } td.chf { color: var(--ref-2); }
td.zero { color: var(--ink-3); }
tbody tr:hover td { filter: brightness(.985); }
tr.total td { font-weight: 600; background: var(--paper); border-top: 2px solid var(--line); }
tr.carry td { background: var(--rail-tint); font-weight: 600; }
tr.report td { background: var(--ref); color: var(--ref-2); font-weight: 500; }
td.day { font-family: var(--mono); text-align: center; width: 4.2em; }
td.day b { display: inline-block; width: 1.6em; } td.day small { color: var(--ink-3); }
tr.sun td.day, tr.hol td.day { background: var(--rail-tint); color: var(--rail); font-weight: 600; }
tr.hol td.day small { color: var(--rail); }
tr.nonconf td { background: var(--alert-tint); } tr.nonconf td.day { box-shadow: inset 4px 0 var(--alert); }
tr.warn td.code { box-shadow: inset 0 0 0 2px var(--warn); }
td.code input { width: 6.8em; font-family: var(--mono); font-weight: 500; background: transparent; border: 1px solid transparent; padding: .2em .4em; }
td.code input:hover, td.code input:focus { border-color: var(--input-2); background: #fff; }
td.just input { width: 9em; background: transparent; border: 1px solid transparent; padding: .2em .4em; } td.just input:hover, td.just input:focus { border-color: var(--input-2); background: #fff; }
td.conf { text-align: center; }
td.conf .sw { display: inline-flex; border: 1px solid var(--line); border-radius: 99px; overflow: hidden; font-family: var(--ui); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .05em; }
td.conf .sw button { border: 0; background: #fff; padding: .15em .55em; cursor: pointer; color: var(--ink-3); }
td.conf .sw button.on { background: var(--ref); color: var(--ref-2); } td.conf .sw button.on.non { background: var(--alert); color: #fff; }
td.conf .sw button:disabled { cursor: default; }
.tbl-compact td, .tbl-compact th { padding: .25em .45em; }
tr.clickable { cursor: pointer; } tr.clickable:hover td { background: var(--rail-tint); }
.status-cell { text-align: center; }

/* ---- Tiroir latéral (exception / éditeur) */
.drawer-bg { position: fixed; inset: 0; background: rgba(20,30,50,.35); z-index: 40; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(640px, 100vw); background: var(--card); z-index: 41; box-shadow: -8px 0 30px rgba(0,0,0,.2); display: flex; flex-direction: column; animation: slidein .18s ease-out; }
@keyframes slidein { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer-head { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.2rem; border-bottom: 1px solid var(--line); }
.drawer-head h2 { margin-right: auto; }
.drawer-body { padding: 1rem 1.2rem; overflow: auto; flex: 1; }
.drawer-foot { padding: .8rem 1.2rem; border-top: 1px solid var(--line); display: flex; gap: .5rem; justify-content: flex-end; background: var(--paper); }
.slots { display: grid; gap: .3rem; }
.slot { display: grid; grid-template-columns: 2.2em 1fr auto 1fr auto; align-items: center; gap: .4rem; font-family: var(--mono); font-size: var(--fs-base); }
.slot .idx { color: var(--ink-3); text-align: right; }
.slot .arrow { color: var(--ink-3); }
.slot .ext { font-family: var(--ui); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .05em; display: inline-flex; align-items: center; gap: .3em; white-space: nowrap; }
.preview { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .5rem; margin-top: 1rem; }
.preview div { background: var(--calc); border-radius: var(--r); padding: .45rem .6rem; }
.preview .k { font-family: var(--ui); text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-sm); color: var(--ink-3); }
.preview .v { font-family: var(--mono); font-size: var(--fs-xl); }
.preview .night .v { color: var(--night); } .preview .chf .v { color: var(--ref-2); }

/* ---- Récap / contrôle */
.control { display: grid; grid-template-columns: 1fr auto auto; gap: .2rem 1.5rem; align-items: baseline; font-size: var(--fs-base); }
.control .v { font-family: var(--mono); text-align: right; } .control .u { color: var(--ink-3); }
.control .over { color: var(--alert); font-weight: 600; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .2rem 1rem; font-size: var(--fs-base); }
.kv dt { color: var(--ink-3); } .kv dd { margin: 0; font-family: var(--mono); }

/* ---- Aide */
.help h3 { margin-top: 1.2rem; } .help ul { padding-left: 1.2rem; } .help li { margin: .25rem 0; }
.help code { font-family: var(--mono); background: var(--calc); padding: .05em .35em; border-radius: 3px; }

/* ---- Toast */
.toast { position: fixed; bottom: 1.2rem; left: 50%; transform: translate(-50%, 20px); background: var(--ink); color: #fff; padding: .6em 1.1em; border-radius: 99px; font-size: var(--fs-base); opacity: 0; pointer-events: none; transition: .2s; z-index: 60; }
.toast.show { opacity: 1; transform: translate(-50%, 0); } .toast.err { background: var(--alert); }

/* ---- Impression : feuille de décompte signable */
@media print {
  .topbar, .toolbar, .legend, .noprint, .drawer, .drawer-bg, .toast { display: none !important; }
  body { background: #fff; } .main { padding: 0; max-width: none; } .card { box-shadow: none; padding: 0; }
  .tbl-wrap { border: 0; overflow: visible; } table { font-size: 8.5pt; } th, td { padding: .15em .3em; }
  thead th { position: static; }
  .balances { grid-template-columns: repeat(5, 1fr); } .bal { border-radius: 0; }
  .signatures { display: grid !important; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; margin-top: 2rem; }
  .signatures div { border-top: 1px solid #000; padding-top: .3rem; font-size: var(--fs-md); }
  @page { size: A4 landscape; margin: 10mm; }
}
.signatures { display: none; }

/* ---- Pied de page (toutes les vues) */
.appfoot { margin: 1.4rem auto 1rem; max-width: 1600px; padding: .9rem 1.2rem 0; border-top: 1px solid var(--line); color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.6; text-align: center; }
.appfoot a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line); }
.appfoot a:hover { color: var(--rail); border-color: var(--rail); }
.appfoot .sep { margin: 0 .5em; color: var(--line); }
.appfoot .appver { white-space: nowrap; font-variant-numeric: tabular-nums; }
.login-card .appfoot { margin-top: 1.6rem; text-align: left; }

/* ---- Interruptions de travail (OLDT) */
.slot.interrupt .idx { color: var(--night); }
.slot .dur { font-size: var(--fs-sm); color: var(--ink-3); white-space: nowrap; }
.slot .dur.bad { color: var(--alert); font-weight: 600; }
.continuity { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-top: .7rem; padding: .5rem .7rem; border-radius: var(--r); background: var(--calc); font-size: var(--fs-md); }
.continuity .v { font-family: var(--mono); font-size: var(--fs-lg); }
.continuity.over { background: var(--alert-tint); color: var(--alert); }
.continuity.ok { background: var(--ref); color: var(--ref-2); }
.warn-list { margin: .6rem 0 0; padding: .5rem .8rem .5rem 1.8rem; background: var(--warn-tint); border-radius: var(--r); color: #7a5410; font-size: var(--fs-md); }
.warn-list li { margin: .15rem 0; }
.preview .interrupt .v { color: var(--night); }
td.warncell { color: var(--warn); }

/* ---- Double authentification */
.twofa { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: start; }
@media (max-width: 620px) { .twofa { grid-template-columns: 1fr; } }
.qr-box { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: .5rem; line-height: 0; }
.qr-box svg { display: block; width: 190px; height: 190px; }
.secret { font-family: var(--mono); font-size: var(--fs-lg); letter-spacing: .06em; background: var(--calc); padding: .5em .7em; border-radius: var(--r); word-break: break-all; user-select: all; }
.codes { display: grid; grid-template-columns: repeat(auto-fit, minmax(9em, 1fr)); gap: .35rem; margin: .6rem 0; }
.codes code { font-family: var(--mono); background: var(--calc); border-radius: 4px; padding: .35em .5em; text-align: center; letter-spacing: .05em; }
.code-input { font-family: var(--mono); font-size: 1.5rem; letter-spacing: .3em; text-align: center; width: 7em; }
.badge.danger { background: var(--alert-tint); color: var(--alert); }
.badge.ok { background: var(--ref); color: var(--ref-2); }
.gate { max-width: 760px; margin: 2rem auto; }

/* ---- Impression : le pied de page reste visible */
@media print {
  .appfoot { display: block !important; border-top: 1px solid #000; margin-top: 1rem; font-size: 7.5pt; text-align: left; padding: .3rem 0 0; }
  .appfoot a { border: 0; }
}

/* ============================================================ v3 — contrats, réductions, planning, vue graphique */
.monthnav button.on { background: var(--rail-tint); font-weight: 600; }
.notes-list { margin: .6rem 0 0; padding: .45rem .8rem .45rem 1.6rem; background: var(--rail-tint); border-radius: var(--r); font-size: var(--fs-md); color: var(--rail-2); }
.notes-list li { margin: .15rem 0; }
.notes-list li.reduc { color: #6b3d00; }
tr.reduc td { background: var(--warn-tint); color: #6b3d00; font-weight: 600; }

/* Vue graphique des tours */
.tourgraph { border: 1px solid var(--line); border-radius: var(--r); background: var(--card); font-size: var(--fs-sm); overflow-x: auto; }
.tg-row { display: grid; grid-template-columns: 4.2rem 5.2rem minmax(420px, 1fr) 4.2rem 4.4rem; align-items: center; min-height: 1.55rem; border-bottom: 1px solid var(--line-2); }
.tg-row:not(.tg-head):hover { background: #f8fafc; }
.tg-row.sun, .tg-row.hol { background: #fbf3f2; }
.tg-row.nonconf { cursor: pointer; }
.tg-row.warn .tg-day { color: var(--warn); }
.tg-head { position: sticky; top: 0; background: var(--calc); font-family: var(--ui); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); min-height: 1.8rem; z-index: 1; }
.tg-day { padding: 0 .4rem; white-space: nowrap; }
.tg-code { padding: 0 .3rem; font-family: var(--mono); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-tt, .tg-rest { text-align: right; padding: 0 .45rem; font-family: var(--mono); font-size: var(--fs-sm); }
.tg-rest.low { color: var(--warn); font-weight: 600; }
.tg-rest.bad { color: var(--alert); font-weight: 700; }
.tg-track { position: relative; height: 1.1rem; margin: 0 .3rem; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / 15 - 1px), var(--line-2) calc(100% / 15 - 1px), var(--line-2) calc(100% / 15)); }
.tg-axis { background: none; height: 1.2rem; }
.tg-axis span { position: absolute; transform: translateX(-50%); font-size: var(--fs-xs); color: var(--ink-3); top: .1rem; }
.tg-track i, .tg-legend i { position: absolute; top: 15%; height: 70%; border-radius: 2px; }
.tg-night { top: 0 !important; height: 100% !important; background: var(--night-tint); border-radius: 0 !important; }
.tg-mid { top: 0 !important; height: 100% !important; width: 1px; background: var(--ink-3); opacity: .5; }
.tg-work { background: var(--rail); }
.tg-work.exc { background: var(--alert); }
.tg-pause { background: repeating-linear-gradient(45deg, #c9d3e3 0 3px, #eef2f8 3px 6px); top: 30% !important; height: 40% !important; }
.tg-pause.ext { background: repeating-linear-gradient(45deg, #9fb8d9 0 3px, #e3ecf8 3px 6px); }
.tg-int { background: var(--warn); top: 35% !important; height: 30% !important; }
.tg-abs { position: absolute; left: 0; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 .5rem; font-family: var(--ui); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); background: var(--calc); border-radius: 2px; }
.tg-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; padding: .5rem .7rem; font-size: var(--fs-sm); color: var(--ink-2); align-items: center; }
.tg-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.tg-legend i { position: static !important; display: inline-block; width: 1.4rem; height: .7rem !important; top: auto !important; }
.tg-legend .muted { flex-basis: 100%; }

/* Planning annuel */
table.planning { font-size: var(--fs-xs); border-collapse: collapse; }
table.planning th, table.planning td { padding: .2rem .15rem; text-align: center; border: 1px solid var(--line-2); min-width: 2.1rem; }
table.planning th.pl-month { text-align: left; padding: .2rem .5rem; white-space: nowrap; cursor: pointer; min-width: 6.5rem; }
table.planning td.num { font-family: var(--mono); min-width: 3.6rem; text-align: right; padding: .2rem .4rem; }
table.planning td.pl { cursor: pointer; font-family: var(--mono); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; max-width: 3.2rem; }
table.planning td.pl-none { background: repeating-linear-gradient(45deg, #f4f6f9 0 4px, #fff 4px 8px); }
.pl-note { color: var(--warn); }
.pl.sat { background: #f7f8fa; } .pl.sun, .pl.hol { background: #e9ecf3; font-weight: 700; } .pl.hol { box-shadow: inset 0 3px 0 var(--rail); }
.pl.k-shift { background: #dfe8f6; color: var(--rail-2); }
.pl.k-r { background: #e3f2e7; color: var(--ref-2); }
.pl.k-v { background: #fff1c2; color: #7a5a00; }
.pl.k-cc, .pl.k-hs { background: #ece7f7; color: var(--night); }
.pl.k-mal, .pl.k-acc { background: #fde2dd; color: var(--alert); }
.pl.k-other { background: #eef1f4; color: var(--ink-2); }
.pl.nonconf { box-shadow: inset 0 -3px 0 var(--alert); }
.pl.warn { outline: 1px dashed var(--warn); outline-offset: -2px; }
.pl-legend { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; font-size: var(--fs-sm); }
.pl-legend .pl { padding: .15rem .5rem; border-radius: 3px; border: 1px solid var(--line-2); }

@media print {
  .tourgraph { border: 0; font-size: 7pt; } .tg-row { min-height: 1.1rem; } .tg-head { position: static; }
  table.planning { font-size: 6.5pt; } table.planning th, table.planning td { min-width: 0; padding: .05rem; }
  .notes-list { background: none; padding-left: 1rem; }
}

/* ---- Éditeur d'horaire : sélection, lignes modifiées, frise graphique */
.slot { grid-template-columns: 1.6em 1.6em 1fr auto 1fr auto; }
.slot .selbox { margin: 0; display: flex; align-items: center; justify-content: center; }
.slot .selbox input { width: 1rem; height: 1rem; }
.slot.changed input.time { border-color: var(--alert); color: var(--alert); background: var(--alert-tint); font-weight: 600; }
.slot .chg { font-family: var(--ui); font-size: var(--fs-xs); text-transform: uppercase; color: var(--alert); letter-spacing: .05em; min-width: 4.5em; }
.chg-sample { color: var(--alert); font-weight: 600; }
.slot-tools { margin: .3rem 0 0 1.8em; }
.slot-tools .btn { font-size: var(--fs-sm); }
label.check.planned { background: var(--warn-tint); border-radius: var(--r); padding: .5rem .7rem; text-transform: none; letter-spacing: 0; font-family: var(--body); font-size: var(--fs-base); color: var(--ink); }
tr.nonconf.planned td { box-shadow: inset 3px 0 0 var(--warn); }
.sched-graph { border: 1px solid var(--line); border-radius: var(--r); padding: .4rem .6rem .5rem; background: #fbfcfe; user-select: none; }
.sg-axis { position: relative; height: 1.1rem; }
.sg-tick { position: absolute; transform: translateX(-50%); font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-3); }
.sg-track { position: relative; height: 3.4rem; background: repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), var(--line-2) calc(12.5% - 1px) 12.5%); border-radius: 4px; cursor: copy; touch-action: none; }
.sg-night { position: absolute; top: 0; bottom: 0; background: var(--night-tint); }
.sg-bar { position: absolute; border-radius: 3px; cursor: grab; }
.sg-bar.dragging { cursor: grabbing; outline: 2px solid var(--ink); z-index: 3; }
.sg-bar.dragging::after { content: attr(data-live); position: absolute; top: -1.35rem; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; font-family: var(--mono); font-size: var(--fs-xs); padding: .05rem .35rem; border-radius: 3px; white-space: nowrap; }
.sg-t { top: .45rem; height: 1.3rem; background: var(--rail); }
.sg-t.changed { background: var(--alert); }
.sg-p { top: 2.05rem; height: .8rem; background: repeating-linear-gradient(45deg, #b9c6db 0 3px, #e6ecf5 3px 6px); }
.sg-p.ext { background: repeating-linear-gradient(45deg, #7f9cc6 0 3px, #dbe5f3 3px 6px); }
.sg-i { top: .85rem; height: .5rem; background: var(--warn); z-index: 2; }
.sg-bar .h { position: absolute; top: 0; bottom: 0; width: 7px; cursor: ew-resize; }
.sg-bar .h.l { left: -3px; } .sg-bar .h.r { right: -3px; }
.sg-bar:hover .h { background: rgba(255,255,255,.55); }
.sg-help, .sg-empty { font-size: var(--fs-sm); color: var(--ink-3); margin-top: .3rem; }
.modal-bg { position: fixed; inset: 0; background: rgba(20,30,50,.35); display: flex; align-items: center; justify-content: center; z-index: 60; padding: 1rem; }
.modal { background: var(--card); border-radius: 8px; box-shadow: var(--shadow); max-width: 34rem; width: 100%; padding: 1.1rem 1.3rem; }
.modal h3 { margin-bottom: .5rem; }
kbd { font-family: var(--mono); font-size: var(--fs-sm); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 3px; padding: 0 .3em; background: #fff; }

/* ---- Grilles de saisie (répartition mensuelle, planning annuel) */
table.grid { border-collapse: collapse; font-size: var(--fs-sm); }
table.grid th, table.grid td { border: 1px solid var(--line-2); padding: 0; text-align: center; }
table.grid thead th { background: var(--calc); font-family: var(--ui); font-weight: 600; padding: .15rem .1rem; position: sticky; top: 0; z-index: 2; }
table.grid thead th span { display: block; font-size: var(--fs-base); } table.grid thead th small { display: block; font-size: var(--fs-xs); color: var(--ink-3); text-transform: uppercase; }
table.grid thead th.we, table.grid thead th.we small { color: var(--alert); }
table.grid thead th.hol { background: repeating-linear-gradient(45deg, #e4e8ef 0 3px, #f3f5f8 3px 6px); color: var(--alert); }
table.grid th.emp { text-align: left; padding: .2rem .5rem; white-space: nowrap; min-width: 11rem; font-family: var(--body); font-weight: 500; background: #fff; position: sticky; left: 0; z-index: 1; }
table.grid th.emp a { color: var(--ink); text-decoration: none; } table.grid th.emp a:hover { color: var(--rail); text-decoration: underline; }
table.grid tr.loc th { text-align: left; padding: .35rem .5rem .2rem; background: var(--rail-tint); color: var(--rail-2); font-family: var(--ui); font-size: var(--fs-base); letter-spacing: .03em; }
table.grid td.we { background: #fbf3f2; } table.grid td.hol { background: repeating-linear-gradient(45deg, #eef0f4 0 3px, #fff 3px 6px); }
table.grid td.out { background: repeating-linear-gradient(135deg, #f1f3f6 0 4px, #fafbfc 4px 8px); }
table.grid td.nonconf { box-shadow: inset 0 -3px 0 var(--alert); }
table.grid td.fill { padding: 0 .3rem; border: 0; background: transparent; }
input.cell { width: 100%; min-width: 2.7rem; border: 0; background: transparent; text-align: center; font-family: var(--mono); font-size: var(--fs-xs); padding: .3rem .05rem; border-radius: 0; }
input.cell:focus { outline: 2px solid var(--rail); outline-offset: -2px; background: #fff; }
input.cell:disabled { color: var(--ink-2); cursor: default; }
input.cell.saving { opacity: .5; }
input.cell.k-shift { background: #dfe8f6; color: var(--rail-2); } input.cell.k-r { background: #e3f2e7; color: var(--ref-2); }
input.cell.k-v { background: #fff1c2; color: #7a5a00; } input.cell.k-cc, input.cell.k-hs { background: #ece7f7; color: var(--night); }
input.cell.k-mal, input.cell.k-acc { background: #fde2dd; color: var(--alert); } input.cell.k-other { background: #eef1f4; color: var(--ink-2); }
input.cell.k-bad { background: var(--alert); color: #fff; }
table.planning.grid td.pl { max-width: none; overflow: visible; }
table.planning.grid th.pl-month a { color: var(--ink); text-decoration: none; }
.pl.we { background: #fbf3f2; }
.print-head { display: none; }
@media print {
  table.grid { font-size: 6.5pt; } input.cell { font-size: 6.5pt; min-width: 0; padding: .1rem 0; }
  table.grid th.emp { min-width: 0; position: static; } table.grid thead th { position: static; }
  .print-head { display: block; text-align: right; font-size: 7pt; margin-top: .3rem; }
}

/* ---- Réédition, guide, badges */
.reissue { margin: .6rem 0 0; padding: .5rem .8rem; background: var(--alert-tint); color: var(--alert); border-radius: var(--r); font-size: var(--fs-md); }
ol.guide { padding-left: 1.2rem; font-size: var(--fs-base); } ol.guide li { margin: .35rem 0; } ol.guide li.bad { color: var(--alert); }
.badge.night-b { background: var(--night-tint); color: var(--night); font-size: var(--fs-xs); }

/* ---- Décompte imprimable (modèle Infosoft), une page A4 paysage */
.print-sheet { display: none; }
@media print {
  body.print-is .main > .card { display: none !important; }
  body.print-is .print-sheet { display: block !important; }
  body.print-is #app > .appfoot, body.print-is > .appfoot { display: none !important; }
  body.print-is .print-sheet .appfoot { display: block !important; }
  .print-sheet { font-family: Arial, Helvetica, sans-serif; color: #000; font-size: 6.6pt; }
  .is-head { display: grid; grid-template-columns: 1fr 1.4fr 1fr; align-items: start; gap: 4mm; margin-bottom: 2mm; }
  .is-title { text-align: center; font-size: 11pt; font-weight: 700; } .is-title span { font-size: 9pt; font-weight: 600; }
  .is-meta { text-align: right; font-size: 6.8pt; }
  table.is-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
  table.is-grid th, table.is-grid td { border: .2pt solid #999; padding: .25mm .3mm; text-align: center; font-size: 6.2pt; white-space: nowrap; overflow: hidden; font-family: Arial, Helvetica, sans-serif; position: static; }
  table.is-grid thead th { background: #e6e6e6; font-weight: 700; line-height: 1.05; }
  table.is-grid th.lbl { width: 28mm; text-align: left; font-weight: 600; background: #f2f2f2; }
  table.is-grid .rep { width: 10mm; background: #f6f6f6; } table.is-grid .tot { width: 11mm; font-weight: 700; background: #f2f2f2; } table.is-grid .sol { width: 11mm; font-weight: 700; background: #e6e6e6; }
  table.is-grid .we { background: #f3f3f3; } table.is-grid thead th.we { color: #c00; } table.is-grid thead th.hol { color: #c00; background: repeating-linear-gradient(45deg, #ddd 0 1.5px, #f3f3f3 1.5px 3px); }
  table.is-grid tr.is-codes td { font-weight: 700; } table.is-grid tr.is-codes td.c5 { font-size: 5.3pt; letter-spacing: -.02em; } table.is-grid tr.is-codes td.c6 { font-size: 4.6pt; letter-spacing: -.03em; } table.is-grid tr.is-codes td.c7 { font-size: 4pt; letter-spacing: -.04em; white-space: normal; word-break: break-all; line-height: 1; } table.is-grid td.exc { color: #c00; text-decoration: underline; }
  table.is-grid tr.is-times td { color: #333; }
  table.is-grid tr.sep th, table.is-grid tr.sep td { border-top: .8pt solid #000; }
  table.is-grid tr.grp th { background: #d9d9d9; text-transform: uppercase; letter-spacing: .03em; } table.is-grid tr.grp td { background: #d9d9d9; border-left: 0; border-right: 0; }
  .is-foot { display: grid; grid-template-columns: 2fr 1fr; gap: 6mm; margin-top: 2mm; font-size: 6.6pt; }
  .is-notes ul { margin: .5mm 0 1mm 4mm; padding: 0; }
  .is-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 5mm; align-items: end; } .is-sign div { border-top: .4pt solid #000; padding-top: 1mm; min-height: 12mm; display: flex; flex-direction: column; justify-content: flex-end; }
  .print-sheet .appfoot { display: block !important; font-size: 6pt; margin-top: 2mm; border-top: .4pt solid #000; padding-top: 1mm; }
}
label.check.planned { display: block; }
label.check.planned input { vertical-align: middle; margin-right: .4rem; }
.slot { grid-template-columns: 1.6em 1.6em 6.5em auto 6.5em 1fr; justify-items: start; }
.slot input.time { width: 100%; }
table.repart input.cell { min-width: 2.25rem; font-size: var(--fs-xs); letter-spacing: -.02em; }
table.repart th.emp { min-width: 9rem; }
.pl-legend .pl.sun { font-weight: 400; }
table.planning.grid input.cell { min-width: 2.2rem; font-size: var(--fs-xs); letter-spacing: -.03em; }
table.planning.grid th.pl-month { min-width: 5.8rem; }
table.planning.grid td.num { min-width: 3.2rem; font-size: var(--fs-xs); }
/* Tranches qui se chevauchent : message bloquant et lignes / blocs signalés */
.overlap-error { margin: .6rem 0 0; padding: .55rem .8rem; background: var(--alert-tint); color: var(--alert); border: 1px solid #f0c2bd; border-left: 4px solid var(--alert); border-radius: var(--r); font-size: var(--fs-md); }
.overlap-error ul { margin: .25rem 0 0; padding-left: 1.2rem; } .overlap-error li { margin: .1rem 0; }
.slot.overlap input.time { border-color: var(--alert); box-shadow: 0 0 0 2px var(--alert-tint); background: #fff; color: var(--alert); font-weight: 600; }
.sg-bar.sg-t.overlap { outline: 2px solid var(--alert); outline-offset: 1px; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.45) 0 4px, transparent 4px 8px); }
@media print { .overlap-error { display: none; } }
/* Impression du planning annuel et de la répartition : pleine largeur, codes lisibles en entier */
@media print {
  table.planning.grid, table.repart { width: 100%; table-layout: fixed; }
  table.planning.grid th.pl-month, table.planning.grid thead th:first-child { width: 17mm; min-width: 0; }
  table.planning.grid thead th:nth-last-child(-n+6) { width: 10.5mm; font-size: 5.4pt; white-space: normal; line-height: 1.05; }
  table.planning.grid input.cell { padding: .45rem 0; } table.planning.grid td.num { width: 10.5mm; min-width: 0; font-size: 5.6pt; padding: .05rem .1rem; }
  table.repart th.emp { width: 34mm; white-space: normal; line-height: 1.1; font-size: 6.2pt; }
  table.planning.grid input.cell, table.repart input.cell { min-width: 0; width: 100%; font-size: 6pt; letter-spacing: -.03em; padding: .28rem 0; }
  table.planning.grid input.cell.c5, table.repart input.cell.c5 { font-size: 5.3pt; }
  table.planning.grid input.cell.c6, table.repart input.cell.c6 { font-size: 4.6pt; letter-spacing: -.05em; }
  table.planning.grid input.cell.c7, table.repart input.cell.c7 { font-size: 4pt; letter-spacing: -.06em; }
  input.cell::-webkit-calendar-picker-indicator { display: none !important; }
}
/* Récapitulation annuelle : tableau, contrôle et signatures sur une seule page */
@media print {
  .recap-card .card-head { margin-bottom: .3rem; }
  .recap-card table { font-size: 7.6pt; } .recap-card table th, .recap-card table td { padding: .1rem .3rem; line-height: 1.15; }
  .recap-card .badge { font-size: 5.6pt; padding: 0 .3em; line-height: 1.3; }
  .recap-card .grid-2 { margin-top: .5rem !important; display: block; }
  .recap-card .grid-2 h3 { margin: .2rem 0 .3rem; font-size: 9pt; }
  .recap-card .control { font-size: 8pt; gap: 0 1.2rem; line-height: 1.25; }
  .recap-card .hint { font-size: 7pt; margin: .2rem 0 0; }
  .recap-card .signatures { margin-top: 1.2rem; }
}

/* ============================================================ Charte Gander Autocar
   Repris de gander-autocar.ch : en-tête blanc, navigation Roboto avec soulignement de l'onglet actif,
   boutons « pilule » bleus, titres Poppins en bleu, bandeau bleu nuit pour la connexion. */
body { font-variant-numeric: tabular-nums; }
h1, h2 { color: var(--rail); font-weight: 600; letter-spacing: 0; }
h3 { font-family: var(--display); font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--navy); font-size: var(--fs-lg); }
a { color: var(--rail); }

/* Boutons */
.btn { font-family: var(--ui); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: var(--fs-base); border-radius: var(--pill); padding: .5em 1.15em; color: var(--ink); border-color: var(--line); }
.btn:hover { border-color: var(--rail); color: var(--rail); background: #fff; }
.btn.primary { background: var(--rail); border-color: var(--rail); color: #fff; } .btn.primary:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn.ghost:hover { background: var(--rail-tint); }
.btn.sm { padding: .3em .8em; font-size: var(--fs-md); }

/* Formulaires */
label { font-family: var(--ui); font-weight: 500; font-size: var(--fs-sm); letter-spacing: .04em; color: var(--ink-2); }
input, select, textarea { border-radius: 8px; }

/* En-tête : blanc, comme le site */
.topbar { background: #fff; color: var(--ink); border-bottom: 1px solid var(--line-2); box-shadow: 0 2px 10px -6px rgba(17,43,67,.25); height: 72px; gap: 1.6rem; }
.topbar .brand { background: transparent; padding: 0; border-radius: 0; }
.topbar .brand-logo { height: 44px; }
.topbar .brand h1 { color: var(--ink); }
.nav { gap: .2rem; }
.nav a { color: var(--ink); font-family: var(--ui); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: var(--fs-base); padding: .55em .6em; border-radius: 0; position: relative; }
.nav a:hover { background: transparent; color: var(--rail); }
.nav a.active { background: transparent; color: var(--ink); }
.nav a.active::after { content: ""; position: absolute; left: .6em; right: .6em; bottom: .2em; height: 2px; background: var(--ink); }
.userbox { color: var(--ink-2); }
.userbox .btn { color: var(--ink); border-color: var(--line); background: #fff; }
.userbox .btn:hover { color: var(--rail); border-color: var(--rail); }
@media (max-width: 1400px) { .topbar { height: auto; padding: .55rem 1rem .2rem; } }

/* Cartes, barre d'outils, badges, tableaux */
.card { border-radius: 10px; }
.monthnav { border-radius: var(--pill); }
.monthnav .label { font-weight: 600; font-size: var(--fs-lg); letter-spacing: .04em; color: var(--navy); }
.badge { font-family: var(--ui); font-weight: 500; letter-spacing: .04em; font-size: var(--fs-xs); }
thead th { font-family: var(--ui); font-weight: 500; font-size: var(--fs-xs); letter-spacing: .04em; color: var(--ink-2); }
.bal .k { font-family: var(--ui); font-weight: 500; font-size: var(--fs-xs); letter-spacing: .06em; }
.preview .k { font-size: var(--fs-xs); }
table.grid tr.loc th { font-family: var(--display); font-weight: 600; font-size: var(--fs-base); letter-spacing: 0; color: var(--navy); }
.drawer-head h2 { color: var(--navy); }

/* Connexion : fond bleu nuit du site, carte blanche */
.login-body { background: var(--navy); }
.login-card { border-radius: 14px; box-shadow: 0 20px 50px -20px rgba(0,0,0,.45); }
.login-card h2 { color: var(--rail); }
.login-card .appfoot { color: var(--ink-3); }

/* Liens du pied de page */
.appfoot a:hover { color: var(--rail); border-color: var(--rail); }

@media print {
  .topbar { display: none !important; }
  h1, h2 { color: #000; } h3 { color: #000; }
}
/* Grilles (répartition, planning) : codes en Roboto, plus étroite que la police à chasse fixe, pour qu'ils restent lisibles en entier */
input.cell { font-family: var(--ui); font-weight: 500; letter-spacing: -.01em; }
@media screen {
  table.repart input.cell.c5, table.planning.grid input.cell.c5 { font-size: .62rem; }
  table.repart input.cell.c6, table.planning.grid input.cell.c6 { font-size: .56rem; letter-spacing: -.03em; }
  table.repart input.cell.c7, table.planning.grid input.cell.c7 { font-size: .5rem; letter-spacing: -.04em; }
}
/* La flèche de liste réservait la moitié de la cellule et tronquait les codes : masquée (les propositions s'affichent à la frappe) */
input.cell::-webkit-calendar-picker-indicator { display: none !important; }
@media screen { input.cell { padding-left: 0; padding-right: 0; } }
@media screen {
  table.planning.grid input.cell { min-width: 2rem; }
  table.planning.grid td.num { min-width: 2.9rem; padding: .2rem .3rem; }
}
/* Navigation : trois groupes (planifier · décompter · gérer) */
.nav-sep { flex: 0 0 1px; align-self: center; height: 1.1rem; margin: 0 .45rem; background: var(--line); }

/* ---- Pauses : sur place (gris) et extérieures (vert), bien distinctes — éditeur, vue graphique du décompte, tableau de service */
.sg-p { background: repeating-linear-gradient(45deg, #9aa3ad 0 3px, #eceef1 3px 6px); }
.sg-p.ext { background: repeating-linear-gradient(45deg, #2e8b57 0 3px, #d7efe0 3px 6px); }
.tg-pause { background: repeating-linear-gradient(45deg, #9aa3ad 0 3px, #eceef1 3px 6px); }
.tg-pause.ext { background: repeating-linear-gradient(45deg, #2e8b57 0 3px, #d7efe0 3px 6px); }
.sg-legend { display: inline-flex; flex-wrap: wrap; gap: .2rem .4rem; align-items: center; margin-left: .3rem; }
.sg-legend i { display: inline-block; width: 1.3rem; height: .6rem; border-radius: 2px; vertical-align: middle; margin-left: .35rem; }
.sg-k-t { background: var(--rail); } .sg-k-p { background: repeating-linear-gradient(45deg, #9aa3ad 0 3px, #eceef1 3px 6px); }
.sg-k-pe { background: repeating-linear-gradient(45deg, #2e8b57 0 3px, #d7efe0 3px 6px); } .sg-k-i { background: var(--warn); }

/* ---- Tableau de service graphique (OLDT art. 25) */
.ts-meta { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--fs-sm); color: var(--ink-2); margin: -.2rem 0 .5rem; }
.tsgraph { border: 1px solid var(--line); border-radius: var(--r); overflow-x: auto; background: #fff; }
.ts-row { display: grid; grid-template-columns: 5.6rem 3.3rem 3.3rem 3.4rem minmax(460px, 1fr) 3.4rem 3.4rem 3.8rem minmax(11rem, 15rem); align-items: center; min-height: 2.3rem; border-bottom: 1px solid var(--line-2); font-size: var(--fs-md); }
.ts-row:last-child { border-bottom: 0; }
.ts-row[data-id] { cursor: pointer; } .ts-row[data-id]:hover { background: #f7f9fc; }
.ts-head { background: var(--calc); font-weight: 500; font-size: var(--fs-xs); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); min-height: 2rem; position: sticky; top: 0; z-index: 2; }
.ts-code { padding: 0 .55rem; line-height: 1.15; } .ts-code small { display: block; color: var(--ink-3); font-size: var(--fs-xs); }
.ts-num { text-align: right; padding: 0 .45rem; font-family: var(--mono); font-size: var(--fs-sm); white-space: nowrap; }
.ts-head .ts-num { font-family: var(--ui); font-size: var(--fs-xs); }
.ts-pz { padding: .25rem .55rem; font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.25; }
.ts-it { color: #8a5a00; }
.ts-track { position: relative; height: 1.5rem; margin: 0 .4rem; }
.ts-track i { position: absolute; top: 18%; height: 64%; border-radius: 2px; }
.ts-grid { top: 0 !important; height: 100% !important; width: 1px; background: var(--line-2); border-radius: 0 !important; }
.ts-night { top: 0 !important; height: 100% !important; background: var(--night-tint); border-radius: 0 !important; }
.ts-mid { top: 0 !important; height: 100% !important; width: 1px; background: var(--ink-3); opacity: .6; border-radius: 0 !important; }
.ts-work { background: var(--rail); z-index: 1; }
.ts-pause { background: repeating-linear-gradient(45deg, #9aa3ad 0 3px, #eceef1 3px 6px); top: 32% !important; height: 36% !important; z-index: 1; }
.ts-pause.ext { background: repeating-linear-gradient(45deg, #2e8b57 0 3px, #d7efe0 3px 6px); }
.ts-int { background: var(--warn); top: 36% !important; height: 28% !important; z-index: 2; }
.ts-lbl { position: absolute; top: -.05rem; transform: translateX(-100%); padding-right: .2rem; font-family: var(--mono); font-size: .62rem; color: var(--ink-3); line-height: 1; }
.ts-lbl.end { transform: none; padding-left: .2rem; padding-right: 0; }
.ts-axis span { position: absolute; top: .35rem; transform: translateX(-50%); font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-2); text-transform: none; letter-spacing: 0; }
.ts-axis span.odd { color: var(--ink-3); font-size: .6rem; }
.ts-legend i { position: static !important; display: inline-block; width: 1.4rem; height: .7rem; border-radius: 2px; }
.ts-k-work { background: var(--rail); } .ts-k-pause { background: repeating-linear-gradient(45deg, #9aa3ad 0 3px, #eceef1 3px 6px); }
.ts-k-pause.ext { background: repeating-linear-gradient(45deg, #2e8b57 0 3px, #d7efe0 3px 6px); } .ts-k-int { background: var(--warn); } .ts-k-night { background: var(--night-tint); border: 1px solid #d5d2ee; }
.ts-sign { display: none; }
@media print {
  .ts-card .card-head { margin-bottom: .2rem; }
  .tsgraph { overflow: visible; border-color: #999; }
  .ts-row { grid-template-columns: 15mm 10mm 10mm 10mm 1fr 10mm 10mm 11mm 50mm; min-height: 6.4mm; font-size: 7pt; break-inside: avoid; }
  .ts-head { position: static; font-size: 5.8pt; min-height: 5mm; }
  .ts-num { font-size: 6.6pt; padding: 0 1mm; } .ts-head .ts-num { font-size: 5.8pt; }
  .ts-pz { font-size: 5.8pt; padding: .4mm 1.2mm; }
  .ts-code small { font-size: 5.5pt; }
  .ts-track { height: 4.6mm; margin: 0 1mm; }
  .ts-lbl { font-size: 4.8pt; } .ts-axis span { font-size: 5.6pt; top: 1.2mm; } .ts-axis span.odd { font-size: 4.6pt; }
  .ts-legend { font-size: 6.5pt; padding: 1.5mm 0; } .ts-meta { font-size: 7pt; margin: 0 0 1.5mm; }
  .ts-sign { display: grid !important; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; margin-top: 6mm; }
  .ts-sign div { border-top: 1px solid #000; padding-top: .3rem; font-size: 7pt; }
  .ts-row[data-id]:hover { background: none; }
}
label .hint { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: var(--fs-sm); }
@media print { .ts-row { min-height: 8mm; } .ts-track { height: 5.6mm; } }

/* ============================================================ v3.1.4 */
/* Chiffres : Roboto, chiffres de même largeur pour que les colonnes restent alignées */
body, input, select, textarea, button { font-variant-numeric: tabular-nums; }
td.num, .num, .bal .v, .bal .from, .tg-tt, .tg-rest, .ts-num, input.time, input.num, .calc { font-feature-settings: "tnum" 1; }
.bal .v { font-weight: 500; letter-spacing: -.01em; }

/* Impression : les couleurs et les fonds (barres des graphiques, codes colorés) sont imprimés même si « Graphiques d'arrière-plan » est décoché */
@media print { *, *::before, *::after { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } }

/* Indemnité diverse (colonne « Divers » du décompte) */
td.extra { text-align: center; padding: 0 .2rem; }
.xbtn { border: 1px dashed var(--line); background: transparent; border-radius: 99px; min-width: 2.2rem; padding: .1rem .45rem; color: var(--ink-3); cursor: pointer; font-size: var(--fs-sm); }
.xbtn:hover:not(:disabled) { border-color: var(--rail); color: var(--rail); }
.xbtn.has { border-style: solid; border-color: #b9d5c3; background: #e9f5ee; color: var(--ref-2); font-weight: 600; }
.xbtn:disabled { opacity: .5; cursor: default; }
@media print { td.extra .xbtn { border: 0; background: none; padding: 0; } td.extra .xbtn:not(.has) { visibility: hidden; } }

/* Notes de bas de page du décompte imprimé */
.is-foot-notes { margin: .2rem 0 .3rem 1rem; padding: 0; } .is-foot-notes li { list-style: none; margin: .05rem 0; }
table.is-grid sup { font-size: 70%; color: #c00; margin-left: 1px; }

/* Tableau de service : heures des pauses et interruptions sous les barres */
.ts-row { min-height: 2.75rem; }
.ts-track { height: 2.35rem; }
.ts-track i.ts-work { top: 6%; height: 46%; }
.ts-track i.ts-pause { top: 17% !important; height: 24% !important; }
.ts-track i.ts-int { top: 19% !important; height: 20% !important; }
.ts-plbl { position: absolute; top: 58%; transform: translateX(-50%); font-size: .6rem; line-height: 1; white-space: nowrap; color: #5c636c; background: rgba(255,255,255,.85); padding: 0 .1rem; border-radius: 2px; z-index: 3; }
.ts-plbl.ext { color: #1f6b41; } .ts-plbl.int { color: #8a5a00; }
.ts-lbl { top: .05rem; }
.ts-notes { margin-top: .6rem; font-size: var(--fs-sm); } .ts-notes ul { margin: .3rem 0 0; padding-left: 1.1rem; } .ts-notes li { margin: .15rem 0; }
@media print {
  .ts-row { min-height: 9.5mm; } .ts-track { height: 8mm; }
  .ts-plbl { font-size: 4.8pt; } .ts-notes { font-size: 6.5pt; margin-top: 2mm; }
}

/* Pastille de conformité des tours et liste de contrôle */
.cbadge { display: inline-block; margin-top: .15rem; padding: 0 .4em; border-radius: 99px; font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; line-height: 1.45; }
.ts-code .cbadge { display: table; }
.c-ok.cbadge { background: var(--ref); color: var(--ref-2); } .c-need.cbadge { background: #e8edf4; color: var(--rail); }
.c-warn.cbadge { background: var(--warn-tint); color: #8a5a00; } .c-err.cbadge { background: var(--alert-tint); color: var(--alert); }
.comp-list ul { list-style: none; margin: .3rem 0; padding: 0; } .comp-list li { display: flex; gap: .5rem; padding: .25rem .4rem; border-radius: 6px; font-size: var(--fs-md); margin: .15rem 0; }
.comp-list li span { flex: 0 0 1.1rem; font-weight: 700; text-align: center; }
.comp-list li.c-ok { color: var(--ref-2); } .comp-list li.c-need { background: #e8edf4; color: var(--rail-2); }
.comp-list li.c-warn { background: var(--warn-tint); color: #7a5410; } .comp-list li.c-err { background: var(--alert-tint); color: var(--alert); }
.comp-confirm { margin-top: .4rem; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: #fafbfc; }
.comp-confirm label.check { display: none; } .comp-confirm label.check.needed { display: flex; }
.comp-confirm .form-grid { margin-top: .3rem; }
/* Registre des consultations et conventions */
table.reg td { white-space: normal; vertical-align: top; } table.reg td:first-child { white-space: nowrap; }
@media print { table.reg { font-size: 8pt; } table.reg tr.clickable:hover { background: none; } }
table.reg tr.regrow { cursor: pointer; } table.reg tr.regrow:hover td { background: #f7f9fc; }

/* v3.1.5 — validité de l'horaire, jours fériés, pauses de nuit */
.ts-validity { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center; margin: .2rem 0 .6rem; font-size: var(--fs-sm); }
.ts-validity .btn { margin-left: auto; }
.warntxt { color: var(--err, #b42318); }
.hol-oblig { background: var(--ref); border-radius: 6px; padding: .5rem .7rem; margin: .3rem 0 .6rem; font-size: var(--fs-sm); line-height: 1.45; }
.hol-count { margin: .3rem 0 .2rem; font-weight: 500; }
.hol-count.c-warn { color: #9a5b00; } .hol-count.c-ok { color: var(--ref-2); }
.hol-tbl td.ctr, .hol-tbl th { text-align: center; }
.hol-tbl td:nth-child(2) { text-align: left; }

/* Repos de la répartition annuelle */
.planning td.rbad { box-shadow: inset 0 -3px 0 #c0392b; }
.planning td.rwarn { box-shadow: inset 0 -3px 0 #e0a100; }
.rest-tbl td.r-err, .rest-iss tr.r-err td { color: #b42318; font-weight: 500; }
.rest-tbl td.r-warn, .rest-iss tr.r-warn td { color: #9a5b00; }
.rest-tbl th, .rest-tbl td { text-align: center; }
.rest-iss td:nth-child(2) { width: 1.5em; text-align: center; }
@media print { .rest-sec { break-before: auto; margin-top: 4mm; } }

/* Rotation hebdomadaire */
.fill-tabs { margin-bottom: .6rem; }
.rot-grid th, .rot-grid td { text-align: center; }
.rot-grid td.pl input.cell { width: 100%; min-width: 3.6em; }
.rot-grid td.rsum { font-size: var(--fs-xs); color: var(--muted, #667); white-space: nowrap; }
.rot-emps { margin: .6rem 0; border: 1px solid var(--line, #dde3ea); border-radius: 6px; padding: .4rem .6rem; max-height: 16rem; overflow: auto; }
.rot-emps-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; flex-wrap: wrap; }
.rot-emps-head .btn { margin-left: auto; }
.rot-emp { display: grid; grid-template-columns: auto 1fr auto; gap: .5rem; align-items: center; padding: .15rem 0; font-size: var(--fs-md); }
.rot-emp select { width: auto; padding: .1rem .3rem; }
.rot-emp { text-transform: none; letter-spacing: normal; font-weight: 400; color: inherit; }

/* Contrôle glissant des moyennes */
.rc-card { margin-top: 1rem; }
.rc-form { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: end; margin: .4rem 0 .8rem; }
.rc-form label { display: flex; flex-direction: column; font-size: var(--fs-xs); }
.rc-form .rc-quick { display: flex; gap: .3rem; }
.rc-sum { padding: .5rem .7rem; border-radius: 6px; font-size: var(--fs-md); line-height: 1.5; margin-bottom: .6rem; background: var(--ref); }
.rc-sum.c-err { background: #fdecea; }
.rc-chart { position: relative; margin: .2rem 0 .6rem; }
.rc-chart svg { display: block; overflow: visible; }
.rc-grid { stroke: var(--line, #e3e8ee); stroke-width: 1; }
.rc-ax { font-size: 10px; fill: var(--muted, #6b7785); font-family: var(--ui); }
.rc-lim { stroke: #b42318; stroke-width: 1.5; stroke-dasharray: 5 4; }
.rc-limtxt { fill: #b42318; }
.rc-line { fill: none; stroke: var(--rail, #3f5c85); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rc-day { fill: #9aa7b6; } .rc-day.bad { fill: #b42318; }
.rc-bad { fill: #b42318; stroke: #fff; stroke-width: 2; }
.rc-x { stroke: var(--muted, #6b7785); stroke-width: 1; }
.rc-tip { position: absolute; top: 4px; background: #fff; border: 1px solid var(--line, #dde3ea); border-radius: 6px; padding: .3rem .5rem; font-size: var(--fs-xs); box-shadow: 0 2px 8px rgba(0,0,0,.08); pointer-events: none; min-width: 150px; }
.rc-legend { display: flex; gap: 1rem; font-size: var(--fs-xs); color: var(--muted, #6b7785); }
.rc-legend i { display: inline-block; vertical-align: middle; margin-right: .3rem; }
.rc-k-line { width: 16px; height: 2px; background: var(--rail, #3f5c85); }
.rc-k-day { width: 6px; height: 6px; border-radius: 50%; background: #9aa7b6; }
.rc-k-bad { width: 8px; height: 8px; border-radius: 50%; background: #b42318; }
.rc-tbl tr.r-err td { color: #b42318; } .rc-tbl td.r-err { color: #b42318; font-weight: 600; }
.rc-tbl th, .rc-tbl td { text-align: center; }
@media print {
  body.print-rc main > :not(.rc-card) { display: none !important; }
  body.print-rc .rc-card { margin: 0; box-shadow: none; }
  .rc-tip { display: none; }
}

/* Aller au jour depuis un constat */
tr.goday { cursor: pointer; }
tr.goday:hover td { background: #eef3f9; }
.planning td.flash { outline: 3px solid #b42318; outline-offset: -2px; animation: flashday 1s ease-in-out 3; }
.planning td.flash-prev { outline: 2px dashed #e0a100; outline-offset: -2px; }
@keyframes flashday { 50% { background: #fde2df; } }

/* Impression de la répartition annuelle : seule, ou avec le contrôle LDT */
@media print {
  body.print-grid main .rest-sec, body.print-grid main .rc-card, body.print-ldt main .rc-card { display: none !important; }
  body.print-grid main > .card, body.print-ldt main > .card { box-shadow: none; }
  .rest-iss tr.goday td { background: none !important; }
}

/* Recalcul automatique de la répartition annuelle */
table.planning.recalc td.num { opacity: .45; transition: opacity .2s; }
table.planning td.num.upd { background: #fff4c2; transition: background 1s; }

.rot-new { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }

/* Contrôle LDT / OLDT par catégories */
.ldt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(520px, 1fr)); gap: .8rem; margin: .6rem 0; }
.ldt-cat { border: 1px solid var(--line, #dde3ea); border-radius: 8px; overflow: hidden; background: #fff; }
.ldt-cat-h { background: var(--navy, #112b43); color: #fff; font-family: var(--display); font-weight: 600; font-size: var(--fs-md); padding: .4rem .7rem; display: flex; align-items: center; gap: .5rem; }
.ldt-num { display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #e9e1cf; color: var(--navy, #112b43); font-size: var(--fs-xs); font-weight: 700; margin-right: .4rem; }
.ldt-cat-h .ldt-num { margin-right: 0; }
.ldt-rules { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.ldt-rules td { padding: .3rem .5rem; border-top: 1px solid var(--line, #eef1f4); vertical-align: top; }
.ldt-rules td.ldt-v { width: 6.5rem; white-space: nowrap; }
.ldt-rules td.ldt-v { font-weight: 700; color: var(--navy, #112b43); background: #f3eee2; text-align: center; }
.ldt-rules td.ldt-b { width: 6.5rem; color: var(--muted, #6b7785); font-size: var(--fs-xs); white-space: nowrap; }
.ldt-rules td.ldt-res { width: 7rem; text-align: right; white-space: nowrap; }
.ldt-rules tr.ldt-pick { cursor: pointer; } .ldt-rules tr.ldt-pick:hover td { background: #eef3f9; } .ldt-rules tr.on td { background: #e3ecf7; }
.c-err.cbadge { background: #fde2df; color: #b42318; } .c-warn.cbadge { background: #fff1cc; color: #8a5300; }
a.cbadge { text-decoration: none; }
.iss-filter { display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; margin: .3rem 0 .4rem; }
.iss-filter .btn.on { background: var(--navy, #112b43); color: #fff; }
.rest-iss tr.iss-h th { text-align: left; background: #f3f5f8; font-size: var(--fs-sm); padding: .35rem .5rem; }
.rest-iss tr.r-info td { color: var(--rail, #3f5c85); }
@media print { .ldt-grid { display: block; columns: 2; column-gap: 4mm; } .ldt-grid > .ldt-cat { display: inline-block; width: 100%; margin-bottom: 3mm; } .ldt-rules { font-size: 6.5pt; } .ldt-cat { break-inside: avoid; } .rest-iss tbody.iss-grp[hidden], .rest-iss tr[hidden] { display: none; } }
.ldt-rules { table-layout: fixed; }
.ldt-rules td { white-space: normal !important; }
.ldt-rules td.ldt-v { width: 5.6rem; white-space: nowrap !important; font-size: var(--fs-xs); }
.ldt-rules td.ldt-b { width: 6rem; white-space: normal !important; }
.ldt-rules td.ldt-res { width: 6.8rem; white-space: nowrap !important; }
.ldt-grid { grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); }

/* ===== v3.1.9 — module Contrôle LDT : mise en page compacte, justifications */
.ldt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: .6rem; margin: .5rem 0 .8rem; }
.ldt-cat { border: 1px solid var(--line, #dde3ea); border-radius: 8px; overflow: hidden; background: #fff; }
.ldt-cat-h { padding: .3rem .6rem; font-size: var(--fs-sm); }
.ldt-row { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) auto auto; gap: .45rem; align-items: center; padding: .18rem .5rem .18rem 0; border-top: 1px solid #eef1f4; font-size: var(--fs-xs); line-height: 1.25; }
.ldt-row .ldt-v { background: #f3eee2; color: var(--navy, #112b43); font-weight: 700; text-align: center; align-self: stretch; display: grid; place-items: center; font-size: var(--fs-xs); padding: .1rem .2rem; white-space: nowrap; }
.ldt-row .ldt-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ldt-row .ldt-b { color: var(--muted, #6b7785); font-size: var(--fs-xs); white-space: nowrap; }
.ldt-row .ldt-res { white-space: nowrap; text-align: right; }
.ldt-row.ldt-pick { cursor: pointer; } .ldt-row.ldt-pick:hover { background: #eef3f9; } .ldt-row.on { background: #e3ecf7; }
.c-just.cbadge { background: #e2f1e6; color: #1d6b3a; }
.iss-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; margin-top: .4rem; }
.iss-head h3 { margin: 0; }
.iss-filter { margin: 0; }
.rest-iss td.ico { width: 1.4rem; text-align: center; font-weight: 700; }
.rest-iss tr.justified td { color: #4b5b6b !important; font-weight: 400 !important; }
.rest-iss tr.justified td.ico { color: #1d6b3a; }
.just-line { margin-top: .15rem; color: #1d6b3a; font-size: var(--fs-xs); }
.btn.primary-soft { background: #e8eef7; border-color: #c9d6e8; color: var(--navy, #112b43); }
.just-issue { padding: .5rem .6rem; border-radius: 6px; background: #f6f7f9; margin-bottom: .6rem; font-size: var(--fs-md); }
details.rest-month { margin-top: .6rem; } details.rest-month summary { cursor: pointer; list-style: revert; } details.rest-month summary h3 { display: inline; }
.ldt-strip { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin: .8rem 0 .2rem; padding: .45rem .6rem; border: 1px solid var(--line, #dde3ea); border-radius: 8px; background: #fafbfc; font-size: var(--fs-sm); }
.ldt-chip { display: inline-flex; align-items: center; gap: .3rem; color: inherit; text-decoration: none; padding: .1rem .4rem; border-radius: 6px; }
.ldt-chip:hover { background: #eef3f9; }
.ldt-chip .ldt-num { margin-right: 0; }
.ldt-team td, .ldt-team th { text-align: left; } .ldt-team tr.ldt-emp { cursor: pointer; } .ldt-team tr.ldt-emp:hover td { background: #eef3f9; }
.print-only, .print-only-ldt { display: none; }
@media print {
  body.print-ldt .print-only-ldt { display: block; }
  body.print-ldt .ldt-strip, body.print-grid .ldt-strip { display: none; }
  body.print-ldtrep .rc-card, body.print-ldtrep .iss-filter, body.print-ldtrep main .toolbar { display: none !important; }
  body.print-ldtrep .print-only { display: grid; }
  .rest-sec .ldt-grid { grid-template-columns: 1fr 1fr; gap: 3mm; }
  .ldt-row { font-size: 6.5pt; padding: .05rem .3rem .05rem 0; } .ldt-row .ldt-t { white-space: normal; }
  .rest-iss { font-size: 7pt; }
  .rest-iss tr[hidden], .rest-iss tbody[hidden] { display: none; }
}

/* v3.1.10 — calendrier de rotation, auxiliaires */
.rot-iso { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: var(--fs-sm); margin: .3rem 0; }
.rot-cal-box { margin-top: .6rem; } .rot-cal-box summary { cursor: pointer; font-size: var(--fs-md); }
.rot-cal { max-height: 260px; overflow: auto; margin-top: .3rem; }
.rot-cal td, .rot-cal th { font-size: var(--fs-xs); padding: .15rem .4rem; }
.rot-wk { display: inline-block; min-width: 2.2em; text-align: center; font-weight: 700; background: #e8eef7; color: var(--navy, #112b43); border-radius: 4px; }
.aux-banner { background: #fff4d6; border: 1px solid #f0d58c; border-radius: 6px; padding: .45rem .7rem; font-size: var(--fs-sm); margin: .3rem 0 .5rem; }
details.ext-sec { margin-top: .8rem; } details.ext-sec summary { cursor: pointer; } details.ext-sec summary h3 { display: inline; }
.ext-tbl input { width: 100%; }

/* Notes du décompte */
.sheet-notes { margin-top: 1rem; padding: .6rem .8rem; border: 1px solid var(--line, #dde3ea); border-radius: 8px; background: #fafbfc; font-size: var(--fs-md); }
.sheet-notes h3 { margin: 0 0 .4rem; } .sheet-notes ul { margin: .2rem 0 .6rem 1.1rem; padding: 0; } .sheet-notes textarea { width: 100%; margin: .3rem 0; }
.is-note { font-size: 7pt; margin: .1rem 0 .3rem; white-space: normal; }

td.hsp:not(:empty) { background: #fdecea; color: #b42318; font-weight: 600; }

/* Justificatif sous les tranches modifiées */
.why-box { margin: .5rem 0 .3rem; padding: .5rem .7rem; border: 1px solid var(--line, #dde3ea); border-radius: 8px; background: #fafbfc; }
.why-box .why-h { font-family: var(--display); font-weight: 600; font-size: var(--fs-base); margin-bottom: .2rem; }
.why-box.needed { border-color: #e7a19a; background: #fdf1ef; } .why-box.needed .why-flag { color: #b42318; }
.why-box.done { border-color: #a9d3b5; background: #f0f8f2; } .why-box.done .why-flag { color: #1d6b3a; }
.why-flag { font-size: var(--fs-sm); font-weight: 500; }

/* Colonne « Justificatif » réglable */
#sheetTbl th.th-just { position: sticky; width: var(--just-w, 11em); min-width: var(--just-w, 11em); }
#sheetTbl td.just { width: var(--just-w, 11em); min-width: var(--just-w, 11em); max-width: var(--just-w, 11em); }
#sheetTbl td.just input { width: 100%; box-sizing: border-box; text-overflow: ellipsis; }
.col-resize { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; z-index: 2; }
.col-resize::after { content: ''; position: absolute; top: 20%; bottom: 20%; left: 3px; width: 2px; border-radius: 1px; background: var(--rail, #3f5c85); opacity: .35; }
.col-resize:hover::after, body.col-resizing .col-resize::after { opacity: 1; }
body.col-resizing, body.col-resizing * { cursor: col-resize !important; user-select: none; }

/* Info-bulles du décompte (v3.1.11) : détail du calcul et base légale */
.rtip { position: fixed; z-index: 9999; left: 0; top: 0; max-width: 420px; min-width: 240px; background: #fff; color: var(--ink);
  border: 1px solid #c8d1de; border-left: 4px solid var(--rail); border-radius: 8px; box-shadow: 0 8px 28px rgba(17, 43, 67, .22);
  padding: .55rem .75rem .6rem; font: 13px/1.45 var(--body); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .12s; }
.rtip.show { opacity: 1; visibility: visible; }
.rtip .rt-h { font: 600 13.5px/1.3 var(--display); color: var(--navy); margin-bottom: .35rem; }
.rtip table { border-collapse: collapse; width: 100%; }
.rtip td { padding: .12rem .4rem .12rem 0; vertical-align: top; border: 0; text-align: left; white-space: normal; background: none; font-size: 13px; }
.rtip td:first-child { color: var(--ink-2); white-space: nowrap; padding-right: .7rem; }
.rtip tr.rt-tot td { border-top: 1px solid var(--line); padding-top: .25rem; color: var(--ink); }
.rtip tr.rt-sep td { border-top: 1px dashed var(--line); padding-top: .3rem; }
.rtip tr.rt-warn td { color: var(--alert); }
.rtip .rt-w { color: var(--alert); font-weight: 700; }
.rtip .rt-n { margin-top: .35rem; color: var(--ink-2); font-size: 12.5px; }
.rtip .rt-law { margin-top: .45rem; padding: .3rem .45rem; background: var(--rail-tint); color: var(--rail-2); border-radius: 5px; font-size: 12px; }
#sheetTbl td[data-tip] { cursor: help; }
#sheetTbl td.in[data-tip] { cursor: auto; }
@media print { .rtip { display: none !important; } }

/* Décompte : défilement des jours sous des en-têtes figés (v3.1.11) */
.sheet-scroll { overflow: auto; overscroll-behavior: contain; }
#sheetTbl thead tr.group th { top: 0; z-index: 4; }
#sheetTbl thead tr:nth-child(2) th { top: var(--h1, 1.6rem); z-index: 4; box-shadow: 0 2px 0 var(--line); }
#sheetTbl tr.total td { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -2px 0 var(--line); }
@media print { .sheet-scroll { max-height: none !important; overflow: visible !important; } #sheetTbl tr.total td, #sheetTbl thead th { position: static; box-shadow: none; } }
.drawer label.room-day { display: block; margin-top: .6rem; padding: .4rem .6rem; border-radius: 6px; background: var(--night-tint); }
.drawer label.room-day select { width: 100%; margin-top: .2rem; }
.drawer label.room-day:not(.needed) { opacity: .75; }

/* Contrôle glissant — vue graphique du calcul (v3.1.11) */
.rc-view { display: flex; align-items: center; gap: .8rem; margin: .6rem 0; flex-wrap: wrap; }
.rcgraph .tg-row { grid-template-columns: 4.6rem 5rem minmax(480px, 1fr) 4.2rem 4.2rem; }
.rcgraph .tg-row > .num { text-align: right; padding-right: .5rem; }
.rcgraph .tg-row.tg-head > span:nth-child(n+4) { text-align: right; padding-right: .5rem; }
.rcgraph .rg-row { cursor: pointer; }
.rcgraph .rg-row.rg-bad { box-shadow: inset 3px 0 0 var(--alert); }
.rcgraph .tg-track { height: 1.25rem; overflow: hidden; }
.rcgraph .tg-track i { overflow: hidden; }
.rcgraph .tg-track i em { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); font: 600 .68rem/1 var(--ui); font-style: normal; color: #fff; white-space: nowrap; }
i.rg-cnt { top: 52% !important; height: 42% !important; border-radius: 3px; z-index: 1; }
i.rg-cnt.ok { background: #2e7d4f; } i.rg-cnt.low { background: #d08a1c; } i.rg-cnt.bad { background: var(--alert); }
i.rg-amp { top: 4% !important; height: 92% !important; border: 2px solid #2e7d4f; background: transparent; z-index: 2; border-radius: 3px; box-sizing: border-box; }
i.rg-amp.low { border-color: #d08a1c; } i.rg-amp.bad { border-color: var(--alert); }
i.rg-amp em { color: var(--ink) !important; top: -2px !important; transform: none !important; background: rgba(255,255,255,.85); padding: 0 2px; }
i.rg-rday { top: 52% !important; height: 42% !important; background: repeating-linear-gradient(45deg, #b8bfc8 0 4px, #e7eaee 4px 8px); }
i.rg-rday em { color: var(--ink) !important; }
i.rg-ext { background: #5b4a8a; top: 10% !important; height: 80% !important; }
i.cut-l { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
i.cut-r { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.rcgraph .tg-track > i.tg-work, .rcgraph .tg-track > i.tg-pause { top: 6% !important; height: 42% !important; }
.tg-legend i.rg-cnt, .tg-legend i.rg-rday, .tg-legend i.rg-ext { position: relative; display: inline-block; width: 1.4em; height: .7em !important; top: 0 !important; vertical-align: middle; margin-right: .3em; }

/* Couleurs des tours et codes d'absence (v3.1.11) */
.chip { display: inline-block; padding: .05rem .4rem; border-radius: 4px; font-family: var(--mono); font-size: var(--fs-sm); line-height: 1.35; font-weight: 600; }
.chip.pl:not([class*="k-"]) { background: #eef1f5; color: var(--ink); }
.color-pick { display: inline-flex; align-items: center; gap: .45rem; }
.color-pick input[type=color] { width: 2.2rem; height: 1.7rem; padding: 0; border: 1px solid var(--line); border-radius: 5px; background: #fff; cursor: pointer; }
.color-pick input[type=color].is-none { opacity: .45; }
.color-pick .check { margin: 0; font-size: var(--fs-sm); text-transform: none; letter-spacing: 0; }
#sheetTbl td.code[style*="--cc:#"] { box-shadow: inset 5px 0 0 var(--cc); }
/* Tiroir du tour : points à compléter (v3.1.11) */
.sh-todo { margin: 0 0 .8rem; padding: .5rem .75rem; border-radius: 7px; font-size: var(--fs-md); }
.sh-todo:empty { display: none; }
.sh-todo.todo { background: var(--warn-tint); border: 1px solid #f0d58a; color: #6b4c00; }
.sh-todo.done { background: #e9f5ee; border: 1px solid #bfe0cc; color: var(--ok); }
.sh-todo ul { margin: .3rem 0 .3rem 1.1rem; padding: 0; } .sh-todo li { margin: .1rem 0; }
.sh-todo a { font-weight: 600; color: inherit; }
h3.flag-h[data-flag="!"]::after { content: "!"; display: inline-grid; place-items: center; width: 1.3em; height: 1.3em; margin-left: .45em; border-radius: 50%; background: var(--warn); color: #fff; font-size: .8em; vertical-align: middle; }
.sh-todo.info { background: #eef3fa; border: 1px solid #c9d7ea; color: var(--rail-2); }
h3.flag-h[data-flag="i"]::after { content: "i"; display: inline-grid; place-items: center; width: 1.3em; height: 1.3em; margin-left: .45em; border-radius: 50%; background: var(--rail); color: #fff; font-size: .8em; font-style: italic; vertical-align: middle; }
/* Récap annuel — contrôle réel / légal (v3.1.11) */
.ac-tbl { width: 100%; margin-top: .5rem; font-size: var(--fs-md); }
.ac-tbl td { vertical-align: top; white-space: normal; }
.ac-tbl td small { display: block; color: var(--ink-3); font-size: var(--fs-xs); font-weight: 400; }
.ac-tbl td.num small { display: inline; }
.ac-ok { color: var(--ok); font-weight: 600; white-space: nowrap; } .ac-bad { color: var(--alert); font-weight: 600; white-space: nowrap; }
@media print { .ac-tbl { font-size: 7.5pt; } }
/* Récap : contrôle annuel compact ; avertissements justifiés (v3.1.11) */
.ac-box { margin-top: .8rem; border: 1px solid var(--line); border-radius: 8px; padding: .5rem .8rem .3rem; background: var(--card); }
.ac-head { display: flex; align-items: center; gap: .8rem; } .ac-head h3 { margin: 0; flex: 1; font-size: var(--fs-lg); }
.ac-tbl { width: 100%; margin-top: .35rem; font-size: var(--fs-md); }
.ac-tbl td, .ac-tbl th { padding: .2rem .5rem; white-space: nowrap; vertical-align: middle; }
.ac-tbl td.muted { font-size: var(--fs-sm); }
.ac-note { margin: .3rem 0 .1rem; font-size: var(--fs-xs); }
.warn-list li.w-just { color: var(--ink-2); }
.warn-list li.w-just::marker { content: "✓ "; color: var(--ok); }
/* Contrat à l'heure : ligne de paiement (v3.1.11) */
tr.pay th, tr.pay td { background: #fff4cc; font-weight: 500; text-align: left !important; }
.bal.pay { border-left-color: var(--input-2); }
tr.pay th, tr.pay td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
/* Annexe LDT des tours (v3.1.12) */
table.anx { width: 100%; font-size: var(--fs-md); }
table.anx td { vertical-align: top; } table.anx .nw { white-space: nowrap; } table.anx .mono { font-family: var(--mono); font-size: var(--fs-sm); white-space: normal; }
table.anx small { color: var(--ink-3); }
.anx-t { display: inline-block; margin: 0 .25rem .2rem 0; padding: .05rem .4rem; border-radius: 4px; background: #e9f5ee; color: var(--ok); font-weight: 600; cursor: pointer; white-space: nowrap; }
.anx-t.todo { background: var(--warn-tint); color: #7a5a00; }
.anx-t small { font-weight: 400; }
ul.anx-pts { margin: 0; padding-left: 0; list-style: none; } ul.anx-pts li { margin: .05rem 0; }
ul.anx-pts li.c-err { color: var(--alert); } ul.anx-pts li.c-need { color: #7a5a00; } ul.anx-pts li.c-warn { color: var(--ink-2); }
.cn { color: #7a5a00; font-weight: 600; } .cw { color: var(--ink-2); font-weight: 600; }
.anx-gen { margin: .5rem 0 .2rem; padding: .45rem .7rem; background: var(--paper); border-radius: 7px; font-size: var(--fs-md); display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.anx-gen label { display: inline-flex; gap: .35rem; align-items: center; text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); margin: 0; }
@media print { table.anx { font-size: 7.5pt; } table.anx .mono { font-size: 7pt; } .anx-t { padding: 0 .2rem; } }
.gc-form { display: inline-flex; gap: .3rem; align-items: center; } .gc-form input { font-size: var(--fs-sm); padding: .2rem .35rem; } .gc-form input[data-gc-ref] { width: 13rem; }
.gc-print { display: none; } @media print { .gc-print { display: inline; } }

/* Tours : colonnes étroites, une tranche par ligne, en-têtes sur plusieurs lignes (v3.1.15) */
table.sh-tbl th { white-space: normal; max-width: 6.5rem; line-height: 1.15; vertical-align: bottom; }
table.sh-tbl td.sh-times { font-family: var(--mono); font-size: var(--fs-sm); white-space: nowrap; line-height: 1.35; }
table.sh-tbl td.sh-times small { color: var(--ink-3); }

/* Référentiel : sections numérotées, compactes (v3.1.15) */
.rf-toc { display: flex; flex-wrap: wrap; gap: .3rem .4rem; margin: .4rem 0 .8rem; }
.rf-toc-i { font-size: var(--fs-sm); padding: .18rem .55rem; border-radius: 999px; background: var(--paper); color: var(--ink-2); text-decoration: none; border: 1px solid var(--line-2); }
.rf-toc-i b { color: var(--ref-2); margin-right: .15rem; } .rf-toc-i:hover { background: var(--ref); color: var(--ink); }
.rf-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 1100px) { .rf-layout { grid-template-columns: 1fr; } }
.rf-sec { border: 1px solid var(--line-2); border-left: 3px solid var(--ref-2); border-radius: 8px; background: var(--card); padding: .45rem .7rem .55rem; margin-bottom: .55rem; scroll-margin-top: 80px; }
.rf-sec > header { display: flex; align-items: center; gap: .5rem; }
.rf-sec > header h3 { margin: 0; font-size: var(--fs-base); flex: 1; }
.rf-n, .card-head h2 .rf-n { display: inline-grid; place-items: center; min-width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--ref-2); color: #fff; font: 600 .78rem/1 var(--ui); }
.rf-base { font-size: var(--fs-xs); color: var(--ref-2); background: var(--ref); padding: .1rem .45rem; border-radius: 999px; white-space: nowrap; }
.rf-hint { margin: .25rem 0 .35rem; font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.35; }
.rf-hint.warn { color: #7a5a00; background: var(--warn-tint); padding: .3rem .5rem; border-radius: 5px; }
.rf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .35rem .6rem; }
label.rf { display: flex; flex-direction: column; gap: .15rem; margin: 0; text-transform: none; letter-spacing: 0; font-size: var(--fs-xs); color: var(--ink-2); }
label.rf.rf-wide { grid-column: span 2; }
label.rf .rf-l small { color: var(--ink-3); }
label.rf input, label.rf select { width: 100%; padding: .28rem .45rem; font-size: var(--fs-md); height: 2rem; box-sizing: border-box; }
.rf-save { position: sticky; bottom: 0; display: flex; gap: .8rem; align-items: center; padding: .55rem .7rem; background: rgba(255,255,255,.95); border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; z-index: 5; }
.rf-side .rf-sec { border-left-color: var(--rail); } .rf-side .rf-n { background: var(--rail); }
table.hol-tbl th { white-space: normal; line-height: 1.15; }

/* ============================================================ 3.1.17 — masque des tours de service */
.drawer.drawer-wide { width: min(900px, 100vw); }
.sh-id { display: grid; grid-template-columns: 1.3fr 1fr .7fr .7fr; gap: .15rem .9rem; align-items: end; }
.sh-id label { margin: 0; }
.sh-id .sh-note { grid-column: span 2; }
.sh-id .sh-active { align-self: center; margin-top: 1.1rem; }
.sh-id .color-pick { flex-wrap: nowrap; }
@media (max-width: 620px) { .sh-id { grid-template-columns: 1fr 1fr; } .sh-id .sh-note { grid-column: span 2; } }
.sh-sum { position: sticky; top: -1rem; z-index: 5; margin: .8rem -1.2rem .6rem; padding: .45rem 1.2rem .5rem; background: var(--card);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: 0 4px 10px -8px rgba(0,0,0,.35); font-size: var(--fs-md); }
.sh-sum .ss-row { display: flex; flex-wrap: wrap; gap: .25rem 1.3rem; align-items: baseline; }
.sh-sum .ss-it { display: inline-flex; align-items: baseline; gap: .4em; }
.sh-sum .k { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.sh-sum b { font-family: var(--mono); font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.sh-sum small { font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-3); font-weight: 400; }
.sh-sum .ss-it.over b { color: var(--alert); }
.sh-sum .ss-bonif { display: flex; flex-wrap: wrap; gap: .1rem 1rem; align-items: baseline; margin-top: .2rem; font-size: var(--fs-sm); color: var(--ink-2); }
.sh-sum .ss-bonif b { font-size: var(--fs-sm); color: var(--night); }
.sh-sum .ss-bonif > span[title] { cursor: help; }
.sh-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(390px, 1fr)); gap: 0 1.4rem; }
.slot-h { display: flex; align-items: center; gap: .4rem; margin: 1rem 0 .4rem; }
.slot-h .muted { font-weight: 400; font-size: .8em; }
.slot .slot-tail { display: inline-flex; align-items: center; gap: .6rem; min-width: 0; }
.slot .sdur { min-width: 3.4em; font-size: var(--fs-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; cursor: help; }
.slot-tools { display: flex; align-items: center; gap: .8rem; }
.slot-tools .slot-total { margin-left: auto; font-size: var(--fs-sm); color: var(--ink-3); font-family: var(--mono); }
.slot-tools .slot-total b { color: var(--ink); }

/* ============================================================ 3.1.18 — aide, frise, masque */
/* Icône d'aide : cercle « i » dessiné en SVG, même rendu partout ; bulle unique .tip-pop */
.info-tip { display: inline-flex; align-items: center; gap: .3em; color: var(--ink-3); cursor: help; vertical-align: -.15em;
  border-radius: 999px; line-height: 1; font-family: var(--ui); font-size: var(--fs-xs); font-weight: 500; text-transform: none; letter-spacing: 0; }
.info-tip svg { display: block; flex: none; }
.info-tip:hover, .info-tip:focus-visible { color: var(--rail); outline: none; }
.info-tip:focus-visible svg { border-radius: 50%; box-shadow: 0 0 0 3px var(--rail-tint); }
.info-tip.with-label { padding: .15em .55em .15em .35em; background: var(--card); border: 1px solid var(--line); }
.info-tip.with-label:hover, .info-tip.with-label:focus-visible { border-color: var(--rail); }
.tip-pop { position: fixed; z-index: 100; max-width: min(420px, calc(100vw - 16px)); padding: .55rem .75rem; border-radius: 8px;
  background: var(--navy); color: #fff; font-family: var(--ui); font-size: var(--fs-sm); font-weight: 400; line-height: 1.45;
  white-space: pre-line; box-shadow: 0 8px 24px -8px rgba(17,43,67,.45); pointer-events: none; }
.tip-pop[hidden] { display: none; }
[data-tip]:not(.info-tip) { cursor: help; }

/* Titres de section du masque : même style partout (tranches, pauses, interruptions) */
.slot-h { display: flex; align-items: center; gap: .45rem; margin: 1rem 0 .45rem; font-family: var(--display); font-size: var(--fs-lg);
  font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--navy); }
.sh-tr .slot-h { margin-top: .9rem; }
.sh-cols { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
.slot { font-family: var(--ui); font-size: var(--fs-base); font-variant-numeric: tabular-nums; }
.slot .ext { font-family: var(--ui); font-size: var(--fs-sm); text-transform: none; letter-spacing: 0; color: var(--ink-2); }
.slot .sdur, .slot .dur { font-size: var(--fs-sm); color: var(--ink-3); }
.slot-tools .slot-total { font-family: var(--ui); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.sh-sum { font-size: var(--fs-md); }
.sh-sum .k { font-size: var(--fs-xs); }
.sh-sum b { font-family: var(--ui); font-size: var(--fs-lg); font-weight: 600; }
.sh-sum small { font-family: var(--ui); font-size: var(--fs-xs); }
.sh-sum .ss-bonif { font-size: var(--fs-sm); }
.sh-sum .ss-bonif b { font-size: var(--fs-sm); }
.sh-id label { font-size: var(--fs-xs); }

/* Frise : heures hh:mm au-dessus (tranches) et au-dessous (pauses, interruptions) */
.sg-lane { position: relative; height: 1.05rem; }
.sg-lane.two { height: 2rem; }
.sg-lane-top { margin-top: .1rem; }
.sg-lane-bot { margin-top: .15rem; }
.sg-lbl { position: absolute; transform: translateX(-50%); font-family: var(--ui); font-size: var(--fs-xs); font-variant-numeric: tabular-nums;
  color: var(--navy); white-space: nowrap; line-height: 1; padding: .12rem .2rem; background: rgba(251,252,254,.92); border-radius: 3px; }
.sg-lane-top .sg-lbl { bottom: 0; } .sg-lane-top .sg-lbl.lv1 { bottom: 1rem; }
.sg-lane-bot .sg-lbl { top: 0; color: var(--ink-2); } .sg-lane-bot .sg-lbl.lv1 { top: 1rem; }
.sg-lbl-i { color: #8a5a00 !important; } .sg-lbl-p { color: var(--ink-2); }
.sg-lbl.gone { display: none; }
.sched-graph { position: relative; }
.sg-help { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .8rem; font-size: var(--fs-xs); }
.sg-legend { margin-left: 0; }

/* Menu du double-clic : choisir ce que l'on ajoute */
.sg-menu { position: absolute; z-index: 20; min-width: 15rem; padding: .3rem; background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 10px 28px -10px rgba(17,43,67,.45); font-size: var(--fs-md); }
.sg-menu-h { padding: .25rem .5rem .35rem; font-size: var(--fs-xs); color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.sg-menu button { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .4rem .5rem; border: 0; border-radius: 5px; background: none;
  text-align: left; cursor: pointer; font-size: var(--fs-md); color: var(--ink); }
.sg-menu button:hover:not([disabled]), .sg-menu button:focus-visible { background: var(--rail-tint); outline: none; }
.sg-menu button[disabled] { cursor: not-allowed; color: var(--ink-3); }
.sg-menu button span { display: flex; flex-direction: column; }
.sg-menu button small { font-size: var(--fs-xs); color: var(--ink-3); }
.sg-menu i { flex: none; width: 1.3rem; height: .65rem; border-radius: 2px; }
.sg-menu button[disabled] i { opacity: .4; }
.sh-todo b svg { display: inline-block; vertical-align: -.2em; margin-right: .2em; }

/* ============================================================ 3.1.19 — aide OTR (indicative) */
.slot .otr-chk { display: inline-flex; align-items: center; gap: .25em; font-size: var(--fs-sm); color: var(--ink-2); cursor: pointer; }
.sg-t.otr { background: #0e7490; }
.sg-k-otr { background: #0e7490; }
.badge.otr, .otr-tag { background: #e0f2f4; color: #0e7490; font-weight: 600; }
.otr-tag { display: inline-block; padding: .05rem .4rem; border-radius: 4px; font-size: var(--fs-xs); letter-spacing: .04em; }
.otr-box { margin-top: 1rem; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfe; }
.otr-box.has-otr { border-color: #9fd3dc; background: #f4fafb; }
.otr-box > summary { display: flex; align-items: center; gap: .55rem; padding: .55rem .8rem; cursor: pointer; list-style: none; font-size: var(--fs-md); }
.otr-box > summary::-webkit-details-marker { display: none; }
.otr-pm { flex: none; display: inline-grid; place-items: center; width: 1rem; height: 1rem; color: var(--ink-2); }
.otr-pm::before { content: ""; width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform .15s; }
.otr-box[open] .otr-pm::before { transform: rotate(90deg); }
.otr-title { flex: 1; color: var(--navy); font-weight: 500; }
.otr-count { font-size: var(--fs-xs); padding: .1rem .5rem; border-radius: 999px; }
.otr-count.warn { background: var(--warn-tint); color: #8a5a00; } .otr-count.ok { background: var(--ref); color: var(--ref-2); }
.otr-body { padding: 0 .9rem .7rem 2.6rem; }
.otr-list { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .3rem; font-size: var(--fs-md); }
.otr-list li { display: flex; gap: .5rem; align-items: baseline; }
.otr-list small { color: var(--ink-3); font-size: var(--fs-xs); white-space: nowrap; }
.otr-list .o-ico { flex: none; width: 1.1rem; text-align: center; font-weight: 700; }
.otr-list .o-ok .o-ico { color: var(--ok); } .otr-list .o-warn .o-ico { color: var(--warn); } .otr-list .o-info { color: var(--ink-2); }
.otr-list .o-info .o-ico { color: var(--ink-3); } .otr-list .o-info .o-ico svg { vertical-align: -.2em; }

/* 3.1.20 — tranche « sans conduite » (visible seulement si le tour comprend de l'OTR) */
.slot .nodrive-chk { display: none; align-items: center; gap: .25em; font-size: var(--fs-sm); color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.otr-on .slot .nodrive-chk { display: inline-flex; }
.sg-t.nodrive { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.55) 0 4px, transparent 4px 8px); }
.sg-k-nodrive { background: var(--rail) repeating-linear-gradient(135deg, rgba(255,255,255,.55) 0 3px, transparent 3px 6px); }
.help-tbl td, .help-tbl th { white-space: normal; text-align: left; vertical-align: top; font-size: var(--fs-md); }

/* ============================================================ 3.1.21 — frise sur une ligne, masques larges et compacts */
.drawer.drawer-wide { width: min(1280px, 97vw); }
.sh-cols3 { display: grid; grid-template-columns: minmax(400px, 1.3fr) minmax(330px, 1fr) minmax(300px, .95fr); gap: 0 1.6rem; align-items: start; }
@media (max-width: 1200px) { .sh-cols3 { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); } }
.drawer-wide .slot { grid-template-columns: 1.4em 1.4em 5.4em auto 5.4em 1fr; gap: .35rem; }
.drawer-wide .slots { gap: .25rem; }
.slot.spare { display: none; }
.slot .slot-tail { flex-wrap: wrap; row-gap: .1rem; }
.drawer-wide .slot-h { margin: .7rem 0 .35rem; }
.exc-lead { margin: 0 0 .4rem; color: var(--ink-2); }
.exc-meals { display: flex; align-items: center; gap: .6rem; margin-top: .8rem; } .exc-meals input { width: 5em; }
.room-day { margin-top: .6rem; }
.why-box .why-h { display: flex; align-items: center; gap: .4rem; }
.comp-box { margin-top: .6rem; } .comp-box .comp-confirm { margin: 0 .8rem .7rem; }
.comp-box[open] > summary { border-bottom: 1px solid var(--line-2); margin-bottom: .5rem; }

/* frise : une seule ligne ; heures écrites sur les blocs */
.sg-tools { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .5rem; margin-bottom: .35rem; }
.sg-tools-l { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin-right: .1rem; }
.sg-tools .btn { display: inline-flex; align-items: center; gap: .4rem; }
.sg-tools .btn i { display: inline-block; width: 1rem; height: .55rem; border-radius: 2px; }
.sg-tools .btn::before { content: "+"; font-weight: 700; margin-right: -.1rem; }
.sg-tools .btn[disabled] { opacity: .45; cursor: not-allowed; }
.sg-tools-r { margin-left: auto; }
.sched-graph .sg-track { height: 2.5rem; cursor: copy; }
.sched-graph .sg-night { top: 0; bottom: 0; }
.sched-graph .sg-bar { top: .25rem; height: 2rem; border-radius: 4px; }
.sched-graph .sg-p { z-index: 1; }
.sched-graph .sg-t { z-index: 1; }
.sched-graph .sg-i { top: .6rem; height: 1.3rem; z-index: 3; box-shadow: 0 0 0 1.5px #fff; }
.sg-in { position: absolute; top: 50%; transform: translateY(-50%); font-family: var(--ui); font-size: var(--fs-sm); font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.sg-in.l { left: 6px; } .sg-in.r { right: 6px; } .sg-in.c { left: 50%; transform: translate(-50%, -50%); }
.sg-t .sg-in { color: #fff; }
.sg-p .sg-in { color: var(--ink); background: rgba(255,255,255,.9); padding: .12rem .3rem; border-radius: 3px; }
.sg-bar.tight .sg-in { display: none; }
.sched-graph .sg-lane { height: 0; }
.sched-graph .sg-lane.one { height: 1.15rem; } .sched-graph .sg-lane.two { height: 2.2rem; }
.sched-graph .sg-lbl { font-size: var(--fs-sm); font-weight: 600; color: var(--navy); }
.sched-graph .sg-lbl-i { color: #8a5a00 !important; } .sched-graph .sg-lbl-p { color: var(--ink-2); }
.sched-graph .sg-lane-top .sg-lbl { bottom: .1rem; } .sched-graph .sg-lane-top .sg-lbl.lv1 { bottom: 1.15rem; }
.sched-graph .sg-lane-bot .sg-lbl { top: .1rem; } .sched-graph .sg-lane-bot .sg-lbl.lv1 { top: 1.15rem; }
.sg-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); color: var(--ink-3); pointer-events: none; }
.sched-graph .sg-legend { display: flex; flex-wrap: wrap; gap: .2rem 1rem; margin-top: .4rem; font-size: var(--fs-xs); color: var(--ink-2); }
.sched-graph .sg-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.sched-graph .sg-legend i { display: inline-block; width: 1.2rem; height: .6rem; border-radius: 2px; margin: 0; }
.sg-k-chg { background: var(--alert); } .sg-k-night { background: var(--night-tint); border: 1px solid #d5d2ee; }
.sg-k-otr { background: #0e7490; } .sg-k-x { background: none; } .sg-k-x::before { content: "×"; color: var(--alert); font-weight: 700; font-style: normal; }
.sg-menu i.sg-k-x { display: inline-grid; place-items: center; height: 1rem; }
.sg-menu i.sg-k-nodrive { background: var(--rail) repeating-linear-gradient(135deg, rgba(255,255,255,.55) 0 3px, transparent 3px 6px); }

/* heures dans les blocs des vues graphiques (décompte, tours de service) */
.tg-work, .ts-work { overflow: hidden; }
.bl { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--ui); font-size: var(--fs-xs);
  font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.bl.gone { display: none; }
.tg-track { height: 1.35rem; }
@media print { .bl { font-size: 6.5pt; } }
.ts-plbl, .ts-lbl { font-size: var(--fs-xs); font-family: var(--ui); font-variant-numeric: tabular-nums; }
.ts-track i.ts-work { top: 4%; height: 52%; }
@media print { .ts-plbl, .ts-lbl { font-size: 5.4pt; } }
.sg-in, .bl, .sg-lbl { font-style: normal; }
.drawer-wide label.check.planned { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .45rem .7rem; }

/* 3.1.22 — quittance sur la ligne de conformité */
.comp-list li .c-txt { display: block; flex: 1 1 auto; font-weight: 400; text-align: left; }
.comp-list .ack { display: inline-flex; align-items: center; gap: .3rem; margin-left: .6rem; padding: .05rem .5rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink-2); font-size: var(--fs-sm); white-space: nowrap; cursor: pointer; vertical-align: 1px; }
.comp-list .ack:hover { border-color: var(--rail); color: var(--rail); }
.comp-list li.c-ok .ack { border-color: #b7dfc5; color: var(--ok); }
.comp-list .ack { text-transform: none; letter-spacing: 0; font-weight: 400; }

/* ============================================================ 3.1.23 — couleur, ordre des tours */
.sh-id { grid-template-columns: 1.2fr 1fr .6fr 2.2fr; }
.sh-id .sh-note { grid-column: auto; }
.sh-color { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; margin-top: .35rem; }
.sh-color-k { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.sh-color .check { margin: 0; text-transform: none; letter-spacing: 0; font-size: var(--fs-md); }
@media (max-width: 620px) { .sh-id { grid-template-columns: 1fr 1fr; } .sh-id .sh-note { grid-column: 1 / -1; } }
.cp { position: relative; display: inline-flex; }
.cp-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.cp-btn { display: inline-flex; align-items: center; gap: .3rem; height: 1.9rem; padding: 0 .35rem 0 .3rem; border: 1px solid var(--line); border-radius: 6px; background: var(--card); cursor: pointer; }
.cp-btn:hover:not([disabled]) { border-color: var(--rail); } .cp-btn[disabled] { cursor: default; opacity: .7; }
.cp-btn i { width: 1.5rem; height: 1.15rem; border-radius: 3px; border: 1px solid rgba(0,0,0,.15); }
.cp-caret { font-size: .7rem; color: var(--ink-3); }
.cp-pop { position: fixed; z-index: 90; width: 15.4rem; padding: .5rem .6rem .45rem; background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 12px 30px -10px rgba(17,43,67,.45); font-family: var(--ui); font-size: var(--fs-sm); }
.cp-h { margin: .35rem 0 .25rem; font-size: var(--fs-xs); color: var(--ink-2); }
.cp-grid { display: grid; grid-template-columns: repeat(10, 1.25rem); gap: .2rem; }
.cp-theme { row-gap: 0; } .cp-theme .cp-sw:nth-child(-n+10) { margin-bottom: .25rem; }
.cp-sw { width: 1.25rem; height: 1.25rem; padding: 0; border: 1px solid rgba(0,0,0,.14); border-radius: 2px; cursor: pointer; }
.cp-sw:hover, .cp-sw:focus-visible { outline: 2px solid #f0a500; outline-offset: 1px; z-index: 1; }
.cp-sw.on { outline: 2px solid var(--navy); outline-offset: 1px; }
.cp-more, .cp-auto { display: flex; align-items: center; gap: .45rem; width: 100%; margin-top: .45rem; padding: .35rem .4rem; border: 0; border-top: 1px solid var(--line-2); background: none; text-align: left; cursor: pointer; font-size: var(--fs-sm); color: var(--ink); }
.cp-auto { margin: 0 0 .1rem; border-top: 0; border-bottom: 1px solid var(--line-2); }
.cp-auto i { width: 1.25rem; height: 1.25rem; border: 1px solid var(--line); background: linear-gradient(135deg, #fff 45%, var(--alert) 47%, var(--alert) 53%, #fff 55%); }
.cp-more:hover, .cp-auto:hover { background: var(--rail-tint); }
.cp-more small { color: var(--ink-3); }
.ord { display: inline-flex; flex-direction: column; margin-right: .35rem; vertical-align: middle; }
.ord button { border: 0; background: none; padding: 0 .15rem; font-size: .6rem; line-height: 1; color: var(--ink-3); cursor: pointer; }
.ord button:hover { color: var(--rail); }
tr:first-child .ord button[data-mv="-1"], tr:last-child .ord button[data-mv="1"] { visibility: hidden; }

/* Contrôle LDT : choix de la période */
.ldt-per { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); margin-left: auto; }
.ldt-per select { text-transform: none; letter-spacing: 0; font-size: var(--fs-md); min-width: 11rem; }
.ldt-per-note { margin: .4rem 0 .6rem; padding: .45rem .7rem; border-radius: 6px; background: var(--rail-tint); font-size: var(--fs-md); color: var(--rail-2); }
@media print { .ldt-per-note { background: none; padding: 0; } }
.cbadge.c-info { background: var(--rail-tint); color: var(--rail); }
.cp-pop { width: max-content; }

/* 3.1.24 — consultations et conventions générales par période horaire (Référentiel) */
.conv-per { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem 1rem; margin: .4rem 0 .6rem; }
.conv-per label { display: flex; flex-direction: column; gap: .15rem; font-size: var(--fs-sm); }
.conv-per select { min-width: 22rem; }
.conv-tbl td { vertical-align: middle; }
.conv-tbl tr.on td { background: #f1f8f3; }
.conv-tbl input[data-c="ref"] { width: 100%; min-width: 10rem; }
.conv-tbl td:nth-child(3) { white-space: normal; min-width: 16rem; }
.conv-tbl td:nth-child(4) { white-space: normal; min-width: 7rem; }
.conv-tbl input[type="date"] { width: 9.5rem; }
[id^="rf-"] { scroll-margin-top: 90px; }
.conv-tbl input[type="checkbox"] { width: 1.05rem; height: 1.05rem; }
.conv-hist { margin-top: .8rem; }
.conv-hist summary { cursor: pointer; font-weight: 600; font-size: var(--fs-sm); }
.comp-list a.ack-ref { text-decoration: none; color: var(--rail); border-color: var(--rail); white-space: nowrap; }
.cp-gen { display: flex; gap: .4rem; align-items: flex-start; margin: .5rem 0 .2rem; color: var(--muted, #555); }
.cp-gen svg { flex: none; margin-top: .1rem; }
.cp-legacy { margin-top: .5rem; padding: .5rem .7rem; border: 1px dashed var(--line); border-radius: 6px; background: #fffaf0; }
.comp-list .ack { margin: 0 0 0 .6rem; }
.comp-list .ack > input { display: inline-block; width: auto; margin: 0; }

/* 3.1.24 — répartition annuelle : solde à nouveau (SAN) au début de chaque mois */
table.planning.grid .san { background: #eef3f8; color: var(--ink-2); font-size: var(--fs-xs); white-space: nowrap; padding-left: .3rem; padding-right: .3rem; }
table.planning.grid th.san { font-size: var(--fs-xs); }
table.planning.grid .san1 { border-left: 2px solid var(--line); }
table.planning.grid td.san + td:not(.san), table.planning.grid th.san + th:not(.san) { border-left: 2px solid var(--line); }
table.planning.grid .san.neg { color: var(--alert); }
table.planning.grid td.cc-gain { font-weight: 600; }
table.planning.grid td.cc-gain.pos { color: var(--ok); }
table.planning.grid td.cc-gain.neg { color: var(--alert); }
/* 3.1.24 — mois en liste déroulante entre les flèches ‹ › */
.monthnav select.label { border: 0; background: transparent; box-shadow: none; width: auto; min-width: 9.5em; padding: .3em 1.6em .3em .6em; margin: 0; text-align: center; text-align-last: center; cursor: pointer; font-family: var(--display); }
.monthnav select.label:hover, .monthnav select.label:focus { background-color: var(--rail-tint); outline: none; }
.monthnav select.label option { text-transform: none; font-weight: 400; color: var(--ink); }

/* 3.1.25 — repli/dépli : la petite flèche partout (au lieu de + / −) */
details.arrow-box > summary, details.rest-month > summary, details.ext-sec > summary, details.conv-hist > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .45rem; }
details.arrow-box > summary::-webkit-details-marker, details.rest-month > summary::-webkit-details-marker, details.ext-sec > summary::-webkit-details-marker, details.conv-hist > summary::-webkit-details-marker { display: none; }
details.arrow-box > summary::before, details.rest-month > summary::before, details.ext-sec > summary::before, details.conv-hist > summary::before {
  content: ""; flex: none; width: 0; height: 0; border-left: 6px solid var(--ink-2); border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; transition: transform .15s; }
details.arrow-box[open] > summary::before, details.rest-month[open] > summary::before, details.ext-sec[open] > summary::before, details.conv-hist[open] > summary::before { transform: rotate(90deg); }
details.arrow-box > summary { flex-wrap: wrap; }

/* 3.1.25 — rotation : masque élargi, collaborateur à gauche de la semaine, contrôle LDT dépliable */
.drawer-rot .rot-top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .4rem 1rem; }
.drawer-rot .rot-top label { margin: .2rem 0; } .drawer-rot .rot-top select { min-width: 18rem; } .drawer-rot .rot-name { flex: 1 1 16rem; } .drawer-rot .rot-nw input { width: 5.5rem; }
.drawer-rot .rot-mbtns { display: flex; gap: .4rem; padding-bottom: .3rem; }
.drawer-rot .rot-wrap { max-height: 52vh; overflow: auto; margin-top: .5rem; }
.drawer-rot .rot-grid thead th { position: sticky; top: 0; z-index: 2; }
.drawer-rot .rot-grid td.rot-who, .drawer-rot .rot-grid th.rot-who { min-width: 12rem; text-align: left; background: var(--input, #f4f7fa); }
.drawer-rot .rot-grid td.rot-who select { width: 100%; font-size: var(--fs-sm); padding: .15rem .3rem; margin: 0; border-color: transparent; background-color: transparent; }
.drawer-rot .rot-grid td.rot-who select:hover, .drawer-rot .rot-grid td.rot-who select:focus { border-color: var(--line); background-color: #fff; }
.drawer-rot .rot-grid th.rot-who .btn { margin-left: .4rem; font-size: var(--fs-xs); padding: .05rem .45rem; text-transform: none; letter-spacing: 0; }
.drawer-rot .rot-grid td.pl input.cell { min-width: 4.2rem; }
.rot-ldt { margin-top: .8rem; border: 1px solid var(--line); border-radius: 8px; padding: .5rem .8rem; background: var(--card); }
.rot-ldt[open] { padding-bottom: .8rem; }
.rot-ldt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .6rem 0; }
.rot-ldt-bar .monthnav button { font-size: var(--fs-sm); padding: .3rem .8rem; }
#rLdtOut.loading { opacity: .5; }
.rr h4 { margin: .9rem 0 .35rem; font-size: var(--fs-md); } .rr h5 { margin: .7rem 0 .3rem; font-size: var(--fs-base); }
.rr-note { color: var(--ink-2); font-size: var(--fs-sm); margin: .3rem 0; }
.rr-chips { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin: .4rem 0; } .rr-chip { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-sm); }
.rr-cat { margin: .35rem 0 .6rem; } .rr-cat-h { font-weight: 600; font-size: var(--fs-sm); margin-bottom: .2rem; display: flex; align-items: center; gap: .35rem; }
.rr-iss tr.r-err { background: var(--alert-tint); } .rr-iss tr.r-warn { background: var(--warn-tint); } .rr-iss td.ico { width: 1.4rem; text-align: center; font-weight: 700; }
.rr-ind { width: auto; } .rr-ind th { font-weight: 500; text-align: left; } .rr-ind tr.r-err td, .rr-ind tr.r-err th { color: var(--alert); }
.rr td.r-err { color: var(--alert); font-weight: 600; } .rr td.r-warn { color: #8a5a0b; } .rr td.neg { color: var(--alert); }
.rr-day tr.rr-r td { background: #f1f8f3; }
.rr-person { border-top: 2px solid var(--line); margin-top: .8rem; padding-top: .3rem; }
.rr-days { margin-top: .6rem; }

/* 3.1.25 — répartition annuelle : tours et temps de repos entre les jours (bouton) */
table.planning.grid.show-rest td.pl { position: relative; }
table.planning.grid .rtag { display: none; }
table.planning.grid.show-rest .rtag { display: block; font-size: 9px; line-height: 1; text-align: center; color: var(--ink-2); padding: 0 0 2px; white-space: nowrap; letter-spacing: -.02em; }
table.planning.grid.show-rest .rtag.tpr { color: #1d6b3a; font-weight: 600; }
table.planning.grid.show-rest .rtag.bad { color: var(--alert); font-weight: 700; } table.planning.grid.show-rest .rtag.low { color: #8a5a0b; font-weight: 600; }
.rest-legend { font-size: var(--fs-xs); color: var(--ink-2); margin: .3rem 0; }

/* 3.1.25 — justification d'un constat : journal de traçabilité */
.drawer.drawer-just { width: min(860px, 97vw); }
.just-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .1rem .9rem; }
.just-grid .jg-wide { grid-column: 1 / -1; }
.just-grid label { margin: .35rem 0 .1rem; }
.just-grid .jg-checks { border: 1px solid var(--line); border-radius: 6px; padding: .3rem .7rem .4rem; margin: .4rem 0; display: flex; flex-wrap: wrap; gap: .1rem 1.2rem; }
.just-grid .jg-checks legend { font-size: var(--fs-sm); color: var(--ink-2); padding: 0 .3rem; text-transform: uppercase; letter-spacing: .05em; }
.just-grid .jg-checks label.check, .just-grid .jg-planned { text-transform: none; letter-spacing: 0; margin: .15rem 0; align-self: end; }
.just-trace { font-size: var(--fs-sm); color: var(--ink-2); margin-top: .1rem; }
@media (max-width: 700px) { .just-grid { grid-template-columns: 1fr; } }

/* 3.1.26 — impressions et exports toujours au même endroit : en haut à droite de l'en-tête de la page */
.card-head .page-actions { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; align-items: center; }
.card-head .page-actions + * { margin-left: 0; }
.btn-print .ico-print { vertical-align: -2px; margin-right: .3rem; }
.page-actions .btn-export { background: var(--card); }
.months-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .2rem 1rem; margin: .5rem 0 .8rem; }
.months-pick label.check { text-transform: none; letter-spacing: 0; }
.rc-dec { white-space: nowrap; } .rc-dec label.check { margin: 0; text-transform: inherit; letter-spacing: inherit; font: inherit; color: inherit; }
.rc-dec .btn.xs, .btn.xs { padding: .05rem .45rem; font-size: var(--fs-xs); }
@media print {
  body.print-multi .print-sheet:not(.print-multi) { display: none !important; }
  .print-multi .ps-page { break-after: page; } .print-multi .ps-page:last-child { break-after: auto; }
  .card-head .page-actions { display: none !important; }
}
/* 3.1.26 — décompte en pleine page, en-têtes figés sous la barre du haut, totaux figés en bas */
.sheet-scroll.sheet-full { overflow: visible; max-height: none; }
.sheet-full #sheetTbl thead tr.group th { top: var(--stick, 0px); }
.sheet-full #sheetTbl thead tr:nth-child(2) th { top: calc(var(--stick, 0px) + var(--h1, 1.6rem)); }
.card-head > h2 { flex: 1 1 auto; }   /* le titre prend la place : actions et impressions alignées à droite */
.rf-req { margin-top: .5rem; display: flex; justify-content: flex-end; } .rf-req .btn { text-decoration: none; }
/* 3.1.26 — tableau de service : heures dans les barres (police réduite si besoin), contrôle LDT en tableau */
.bl.sm { font-size: 10px; letter-spacing: -.01em; } .bl.xs { font-size: 9px; letter-spacing: -.02em; }
@media print { .bl.sm { font-size: 5.6pt; } .bl.xs { font-size: 5pt; } }
.ts-notes { margin-top: .8rem; }
.ts-notes > summary { gap: .5rem; }
table.ts-iss { width: 100%; margin-top: .4rem; } table.ts-iss th { width: 6rem; text-align: left; vertical-align: top; } table.ts-iss td { vertical-align: top; }
table.ts-iss ul { list-style: none; margin: 0; padding: 0; }
table.ts-iss li { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr) auto; gap: .5rem; align-items: baseline; padding: .08rem 0; font-size: var(--fs-sm); }
table.ts-iss li .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } table.ts-iss li .b { color: var(--ink-3); font-size: var(--fs-xs); white-space: nowrap; }
table.ts-iss li .ic { font-weight: 700; text-align: center; }
table.ts-iss li.c-ok { color: var(--ref-2); } table.ts-iss li.c-need { color: var(--rail-2); } table.ts-iss li.c-warn { color: #7a5410; } table.ts-iss li.c-err { color: var(--alert); }
table.ts-iss tr[data-id] { cursor: default; }
@media print { table.ts-iss li { font-size: 6.5pt; } table.ts-iss li .t { white-space: normal; } }
.ts-validity { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .ts-validity .btn { margin-left: auto; }
/* 3.1.26 — précisions du tour : trois points distincts */
.cp-secs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin: .3rem 0 .6rem; }
.cp-sec { border: 1px solid var(--line); border-radius: 8px; padding: .4rem .7rem .6rem; margin: 0; min-width: 0; background: var(--card); }
.cp-sec legend { font-weight: 600; font-size: var(--fs-sm); padding: 0 .3rem; color: var(--navy); }
.cp-sec legend .muted { font-weight: 400; }
.cp-sec label { margin: .3rem 0 0; text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); }
.cp-sec .cp-h { display: block; color: var(--ink-2); margin-bottom: .2rem; }
.cp-sec select { width: 100%; }
.cp-sec:has(.needed:not(.always)) { border-color: var(--warn, #d9a43b); background: var(--warn-tint); }
@media (max-width: 1000px) { .cp-secs { grid-template-columns: 1fr; } }
.slot .sdur.over { color: var(--alert); font-weight: 700; } .slot .sdur.tol { color: #a8690a; font-weight: 600; }

/* 3.1.26 — aide : processus cliquable, tuiles des repères, réponses courtes */
.help26 h3 { margin: 1.2rem 0 .5rem; }
.hp-q { flex: 0 1 26rem; margin: 0; }
.hp-flow { display: flex; align-items: stretch; gap: .3rem; flex-wrap: wrap; }
.hp-step { flex: 1 1 9rem; display: grid; justify-items: center; gap: .15rem; padding: .7rem .5rem; border: 1px solid var(--line); border-radius: 10px; background: var(--card); cursor: pointer; font: inherit; color: var(--ink); text-align: center; }
.hp-step:hover { border-color: var(--rail); } .hp-step.on { border-color: var(--rail); background: var(--rail-tint); box-shadow: 0 0 0 2px var(--rail-tint); }
.hp-step small { color: var(--ink-3); font-size: var(--fs-xs); } .hp-ico { font-size: 1.3rem; line-height: 1; color: var(--rail); }
.hp-n { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--navy, #1f3a5c); color: #fff; font-size: var(--fs-xs); font-weight: 700; }
.hp-arrow { align-self: center; color: var(--ink-3); font-size: 1.4rem; }
.hp-card { margin-top: .6rem; border: 1px solid var(--line); border-left: 4px solid var(--rail); border-radius: 8px; padding: .6rem .9rem; background: var(--card); }
.hp-card-h { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; } .hp-card ul { margin: .2rem 0 .5rem 1.1rem; padding: 0; } .hp-card li { margin: .15rem 0; }
.hp-howto { display: grid; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); gap: .3rem .9rem; }
.hp-howto details { border-bottom: 1px solid var(--line); padding: .25rem 0; } .hp-howto summary { font-weight: 500; } .hp-howto p { margin: .3rem 0 .2rem 1rem; font-size: var(--fs-sm); }
.hp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: .8rem; }
.hp-cat-h { display: flex; align-items: center; gap: .4rem; font-weight: 600; margin-bottom: .35rem; }
.hp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .35rem; }
.hp-tile { border: 1px solid var(--line); border-radius: 8px; padding: .35rem .45rem; display: grid; gap: .05rem; background: var(--card); cursor: help; }
.hp-tile b { font-size: var(--fs-lg); color: var(--navy, #1f3a5c); } .hp-tile span { font-size: var(--fs-xs); line-height: 1.2; } .hp-tile small { color: var(--ink-3); font-size: 10px; }
.hp-tile.dim { opacity: .25; }
.hp-more { margin: .4rem 0; border-top: 1px solid var(--line); padding-top: .4rem; }
.hp-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .2rem 1rem; margin: .4rem 0; font-size: var(--fs-sm); }
.hp-calc th, .hp-roles th { text-align: left; white-space: nowrap; } .hp-sym .cbadge { margin-right: .2rem; }
@media print { .hp-flow, #hpPanel { display: none; } .help26 details { break-inside: avoid; } }
/* 3.1.26 — mise en page d'impression : pas de titres orphelins, pas de boutons, tableaux compacts */
@media print {
  h1, h2, h3, h4, h5, .iss-h, summary { break-after: avoid; page-break-after: avoid; }
  tr { break-inside: avoid; }
  .card-head .btn, table .btn, .btn-row .btn, .ord { display: none !important; }
  #sheetTbl { font-size: 7pt; } #sheetTbl th, #sheetTbl td { padding: .05em .25em !important; line-height: 1.15; height: auto !important; }
  #sheetTbl input, #sheetTbl select, #sheetTbl .cell { height: auto !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; font-size: 7pt !important; background: transparent !important; }
  #sheetTbl .conf-sw, #sheetTbl .yn { transform: scale(.85); transform-origin: left center; }
  .balances .bal { padding: 1.5mm 2mm !important; } .balances .bal .v { font-size: 11pt !important; }
}
@media print {
  #sheetTbl .sw button:not(.on) { display: none !important; } #sheetTbl .sw button.on { border: 0 !important; background: none !important; padding: 0 !important; font-size: 7pt; box-shadow: none !important; }
  #sheetTbl .xbtn:not(.has) { visibility: hidden; } #sheetTbl .xbtn.has { border: 0; background: none; padding: 0; }
}
/* 3.1.26 — synthèse du tour sur fond gris, bien visible ; interruption donnée à bien plaire */
.sh-sum { background: #eef1f4 !important; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cp-intx { margin: .2rem 0 .4rem; padding: .4rem .7rem; border: 1px solid var(--line); border-radius: 8px; text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); background: var(--warn-tint); }
/* 3.1.27 — tours de service : période de validité de l'horaire bien visible, filtre des tours */
.sh-filter-row { display: flex; align-items: stretch; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin: .2rem 0 .7rem; }
.ts-validity { display: flex; align-items: center; gap: .7rem; padding: .45rem .8rem; border: 1px solid var(--line); border-left: 4px solid var(--rail); border-radius: 8px; background: var(--card); flex: 1 1 32rem; }
.ts-validity.missing { border-left-color: var(--warn, #d9a43b); background: var(--warn-tint); }
.ts-validity .tv-ico { font-size: 1.2rem; } .ts-validity .tv-txt { display: grid; gap: .1rem; flex: 1; } .ts-validity .btn { margin-left: auto; white-space: nowrap; }
.sh-filter { align-self: center; } .sh-filter button { font-size: var(--fs-sm); padding: .35rem .8rem; }
.sh-val { color: var(--ink-2); background: var(--calc); border-radius: 4px; padding: 0 .3rem; margin-left: .3rem; font-size: var(--fs-xs); white-space: nowrap; }
.sh-instr { margin-top: .8rem; border: 1px solid var(--line); border-radius: 8px; padding: .45rem .8rem; } .sh-instr textarea { width: 100%; margin-top: .4rem; font: inherit; }
.card-head > h2 { flex: 1 1 18rem; min-width: 0; }
/* 3.1.27 — impression choisie du tableau de service, fiches de tour avec instructions */
#printTs { display: none; }
.tsp-opts { display: grid; gap: .2rem; margin: .4rem 0 .6rem; } .tsp-opts label, .tsp-list label { text-transform: none; letter-spacing: 0; }
.tsp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: .15rem 1rem; max-height: 50vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: .4rem .7rem; }
@media print {
  body.print-tssel .main > .card { display: none !important; }
  body.print-tssel #printTs { display: block !important; }
  .tsp-graph h2 { font-size: 12pt; margin: 0 0 2mm; }
  .tf { break-inside: avoid; border: .4pt solid #999; border-radius: 2mm; padding: 2.5mm 3mm; margin: 0 0 4mm; font-size: 8pt; }
  .tsp-graph + .tf { break-before: page; }
  .tf-h { display: flex; gap: 4mm; align-items: baseline; border-bottom: .4pt solid #999; padding-bottom: 1mm; margin-bottom: 1.5mm; } .tf-h .muted { margin-left: auto; }
  .tf-code { font-size: 13pt; font-weight: 700; }
  .tf-t { width: 100%; border-collapse: collapse; margin: 1.5mm 0; } .tf-t th, .tf-t td { border: .3pt solid #bbb; padding: .5mm 1.5mm; text-align: left; font-size: 7.5pt; } .tf-t th { width: 22mm; background: #f2f2f2; }
  .tf-instr h4 { margin: 1.5mm 0 .8mm; font-size: 9pt; } .tf-pre { white-space: pre-wrap; font-size: 8.5pt; line-height: 1.35; border-left: 1mm solid #1f3a5c; padding-left: 2mm; }
  .tf-ldt { font-size: 7pt; color: #7a5410; margin: 1mm 0 0; }
}
/* 3.1.27 — tours de repos / temps de repos activables séparément */
table.planning.grid.show-rest:not(.show-tr) .rtag.tr, table.planning.grid.show-rest:not(.show-tpr) .rtag.tpr { visibility: hidden; }
.rest-sw button { font-size: var(--fs-sm); padding: .35rem .75rem; } .rest-sw button.on { background: var(--rail-tint); font-weight: 600; }
/* 3.1.27 — choix du mois : grille alignée sous le bouton */
.monthnav .mnav-pick { min-width: 9.5em; border: 0; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.monthnav .mnav-pick:hover { background: var(--rail-tint); } .mnav-caret { font-size: .7em; color: var(--ink-3); }
.mpop { position: fixed; z-index: 60; display: grid; grid-template-columns: repeat(3, 7.2rem); gap: .25rem; padding: .45rem; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 28px -10px rgba(17,43,67,.35); }
.mpop button { border: 1px solid transparent; background: none; border-radius: 6px; padding: .4rem .3rem; font: inherit; font-size: var(--fs-sm); cursor: pointer; color: var(--ink); text-align: center; }
.mpop button:hover { background: var(--rail-tint); } .mpop button.on { background: var(--navy, #1f3a5c); color: #fff; font-weight: 600; }
/* 3.1.27 — contrôle LDT de l'équipe : collaborateurs choisis, détail par collaborateur puis par catégorie */
.ldt-team tr.unsel td { opacity: .45; } .ldt-tdet.unsel { display: none; }
.ldt-tdet { border: 1px solid var(--line); border-radius: 8px; padding: .45rem .8rem; margin: .4rem 0; background: var(--card); }
.ldt-tdet > summary { gap: .5rem; } .ldt-tdet .rr-iss tr.r-ok td { color: var(--ref-2); }
@media print { .ldt-team tr.unsel { display: none; } .ldt-tdet { break-inside: auto; border: 0; padding: 0; margin: 3mm 0 0; } .ldt-tdet > summary { font-size: 10pt; border-bottom: .5pt solid #999; } .ldt-tdet + .ldt-tdet { break-before: page; } }

/* ---------- 3.1.28 : pièces jointes (PV, conventions, justificatifs) ---------- */
.att-box { border: 1px dashed var(--line, #c9ced6); border-radius: 8px; padding: .5rem .7rem; background: #fafbfc; margin-top: .5rem; }
.drop > .att-box, .att-box.drop { border-color: #2a6fdb; background: #eef4ff; }
.busy > .att-box { opacity: .6; pointer-events: none; }
.att-h { display: flex; flex-wrap: wrap; gap: .3rem .7rem; align-items: baseline; margin-bottom: .3rem; }
.att-list { list-style: none; margin: 0 0 .3rem; padding: 0; }
.att-list li { display: flex; align-items: center; gap: .5rem; padding: .22rem 0; border-bottom: 1px solid #eef0f3; flex-wrap: wrap; }
.att-list li:last-child { border-bottom: 0; }
.att-list li.att-q { opacity: .75; font-style: italic; }
.att-name { font-weight: 600; word-break: break-all; }
.att-act { margin-left: auto; display: inline-flex; gap: .5rem; align-items: center; }
.att-act a { text-decoration: none; }
.att-act button { background: none; border: 0; cursor: pointer; color: #b42318; font-size: .85rem; padding: 0 .2rem; }
.att-ico { display: inline-block; font: 700 .6rem/1 Arial, sans-serif; padding: .2rem .3rem; border-radius: 3px; color: #fff; letter-spacing: .02em; }
.att-ico.pdf { background: #c0392b; }
.att-ico.img { background: #2a6fdb; }
.att-add { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.att-add .att-note { flex: 1 1 14rem; min-width: 10rem; }
.att-empty { margin: .1rem 0 .3rem; }
.att-links { display: inline-block; margin-left: .3rem; font-size: var(--fs-xs, .78rem); }
.att-links a { color: inherit; }
.conv-att { margin-top: .8rem; }
.sh-att { margin-top: .5rem; }
.anx-files { margin: .4rem 0 0; }
@media print { .att-add, .att-act { display: none !important; } .att-box { border-style: solid; background: none; } }

/* ---------- 3.1.28 : Finances ---------- */
.fin-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .7rem; margin: .6rem 0 1rem; }
.fin-step { border: 1px solid var(--line); border-radius: 10px; background: #fbfcfd; padding: .6rem .75rem .7rem; display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.fin-step h3 { font-size: var(--fs-md); display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.fin-n { display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--navy); color: #fff; font-size: var(--fs-sm); letter-spacing: 0; }
.fin-row { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: flex-end; }
.fin-row label { display: flex; flex-direction: column; font-size: var(--fs-sm); color: var(--ink-2); gap: .1rem; }
.fin-row select, .fin-row input[type=search] { min-width: 0; }
.fin-row input[type=search] { flex: 1 1 8rem; }
.fin-lbl { font-size: var(--fs-sm); color: var(--ink-2); margin-top: .1rem; }
.fin-seg { flex-wrap: wrap; align-self: flex-start; }
.fin-seg button { font-size: var(--fs-md); padding: .32em .7em; }
.fin-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.chipbtn { border: 1px solid var(--line); background: #fff; border-radius: var(--pill); padding: .18rem .65rem; font-size: var(--fs-sm); cursor: pointer; color: var(--ink-2); }
.chipbtn:hover { background: var(--rail-tint); border-color: var(--rail); color: var(--navy); }
.fin-emps { max-height: 11.5rem; overflow: auto; border: 1px solid var(--line-2); border-radius: 6px; background: #fff; padding: .25rem .45rem; }
.fin-emp-c { display: flex; align-items: center; gap: .35rem; padding: .12rem 0; font-size: var(--fs-md); }
.fin-kind { display: inline-block; font-size: var(--fs-xs); border-radius: 4px; padding: .02rem .35rem; background: #eef1f5; color: var(--ink-2); white-space: nowrap; }
.fin-kind.k-h { background: #e8f3ec; color: #1d6b3a; } .fin-kind.k-x { background: var(--warn-tint); color: var(--warn); }
.fin-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: .55rem; margin: .4rem 0 .9rem; }
.fin-kpi { border: 1px solid var(--line); border-radius: 10px; padding: .5rem .7rem; background: #fff; display: flex; flex-direction: column; }
.fin-kpi span { font-size: var(--fs-sm); color: var(--ink-2); } .fin-kpi b { font-family: var(--display); font-size: 1.35rem; color: var(--navy); font-variant-numeric: tabular-nums; } .fin-kpi small { color: var(--ink-3); font-size: var(--fs-xs); }
.fin-kpi.warn { border-color: #f0c36d; background: var(--warn-tint); } .fin-kpi.warn b { color: var(--warn); } .fin-kpi.ok b { color: var(--ok); }
.fin-sec { margin: 1rem 0 .4rem; }
.fin-tbl th, .fin-tbl td { white-space: nowrap; }
.fin-tbl thead th { position: sticky; top: 0; z-index: 1; }
.fin-tbl thead tr:nth-child(2) th { top: 1.9em; }
.fin-tbl th.fin-g { text-align: center; }
.fin-tbl th.fin-g-h, .fin-g.fin-g-h { background: #eef3fa; } .fin-tbl th.fin-g-c { background: #f5f0fa; } .fin-tbl th.fin-g-f { background: #eef7f0; } .fin-tbl th.fin-g-p { background: #fff3df; }
.fin-tbl tr.fin-emp td { border-top: 1px solid var(--line); }
.fin-tbl tr.fin-mo td { color: var(--ink-2); background: #fafbfc; font-size: var(--fs-sm); }
.fin-tbl tr.fin-mo td:nth-child(2) { padding-left: 1.2rem; }
.fin-tbl tr.fin-mhead td { background: var(--rail-tint); font-weight: 700; color: var(--navy); }
.fin-tbl tr.fin-sub td { background: #f4f6f9; font-weight: 600; }
.fin-tot td, tr.fin-tot td { background: #e9edf3 !important; font-weight: 700; border-top: 2px solid var(--navy); }
.fin-strong { font-weight: 700; }
.fin-det { margin: .4rem 0; } .fin-days td, .fin-days th { white-space: nowrap; } .fin-days tr.we td { background: #f7f4fb; }
.fin-wait { margin: 0 0 .4rem; }
@media print {
  .fin-steps, .fin-wait { display: none !important; }
  .fin-kpis { grid-template-columns: repeat(5, 1fr); gap: 2mm; margin: 0 0 3mm; } .fin-kpi { padding: 1.5mm 2mm; } .fin-kpi b { font-size: 11pt; }
  .fin-tbl, .fin-days { font-size: 7pt; } .fin-tbl thead th { position: static; }
  .fin-det { break-inside: auto; } .fin-det > summary { break-after: avoid; }
  body.print-fin .print-only { display: grid; }
}
.fin-step .check { align-items: flex-start; margin: .15rem 0; font-size: var(--fs-md); }
.fin-step .check input { margin-top: .15em; flex: none; }
@media print { .tip-pop { display: none !important; } }

/* ---------- 3.1.28 : écrans de toutes tailles (PC, portable, tablette, téléphone) ---------- */
.nav-toggle { display: none; }
.ub-name { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; }
img, svg, canvas { max-width: 100%; }
.tbl-wrap { -webkit-overflow-scrolling: touch; max-width: 100%; }
.card { min-width: 0; }
.page-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
/* Portable et grand écran : le menu passe sur une 2e ligne et s'enroule au lieu d'être coupé */
@media (max-width: 1799px) {
  .topbar { height: auto; flex-wrap: wrap; padding: .45rem 1rem .25rem; row-gap: .15rem; }
  .nav { order: 3; flex: 1 1 100%; margin-left: 0; flex-wrap: wrap; overflow: visible; row-gap: 0; }
  .userbox { margin-left: auto; }
  .topbar .brand-logo { height: 38px; }
}
@media (max-width: 1280px) {
  .main { padding: .9rem; }
  .card { padding: .85rem .95rem; }
  .nav a { font-size: var(--fs-md); padding: .45em .5em; }
  .ub-role { display: none; }
}
/* Tablette (portrait) et téléphone : menu repliable */
@media (max-width: 900px) {
  html { font-size: 14.5px; }
  .topbar { position: sticky; gap: .6rem; padding: .4rem .7rem; }
  .topbar .brand-logo { height: 32px; }
  .nav-toggle { display: inline-flex; align-items: center; gap: .5rem; order: 2; border: 1px solid var(--line); background: #fff; border-radius: var(--pill); padding: .35rem .8rem; font: 600 var(--fs-md) var(--ui); color: var(--navy); cursor: pointer; max-width: 46vw; }
  .nt-cur { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nt-bars, .nt-bars::before, .nt-bars::after { display: block; width: 16px; height: 2px; background: currentColor; border-radius: 2px; position: relative; content: ""; flex: none; }
  .nt-bars::before { position: absolute; top: -5px; } .nt-bars::after { position: absolute; top: 5px; }
  .userbox { order: 3; margin-left: auto; gap: .3rem; }
  .userbox .ub-name { display: none; }
  .userbox .btn { padding: .3em .55em; font-size: var(--fs-sm); }
  .nav { display: none; order: 4; flex-direction: column; flex-wrap: nowrap; padding: .3rem 0 .5rem; border-top: 1px solid var(--line-2); max-height: calc(100vh - 60px); overflow-y: auto; }
  .topbar.nav-open .nav { display: flex; }
  .nav a { font-size: var(--fs-lg); padding: .6em .4em; border-bottom: 1px solid var(--line-2); }
  .nav a.active { color: var(--rail); font-weight: 600; } .nav a.active::after { display: none; }
  .nav .nav-sep { display: block; height: .4rem; width: auto; border: 0; background: transparent; margin: 0; }
  .main { padding: .6rem; }
  .card { padding: .75rem .7rem; border-radius: 8px; }
  .card-head { gap: .5rem; }
  .card-head h2 { font-size: 1.2rem; flex-basis: 100%; }
  .page-actions { width: 100%; }
  .toolbar { gap: .4rem; } .toolbar select { min-width: 0; flex: 1 1 9rem; }
  .monthnav .label, .monthnav .mnav-pick { min-width: 7em; }
  .form-grid { grid-template-columns: 1fr 1fr; gap: .2rem .8rem; }
  .drawer, .drawer.drawer-wide { width: 100vw; }
  .drawer-head { padding: .7rem .8rem; } .drawer-body { padding: .8rem; } .drawer-foot { padding: .6rem .8rem; flex-wrap: wrap; }
  .ts-meta { flex-direction: column; gap: .1rem; }
  .appfoot { padding-left: .8rem; padding-right: .8rem; }
}
/* Téléphone */
@media (max-width: 560px) {
  html { font-size: 14px; }
  h2 { font-size: 1.15rem; }
  .form-grid { grid-template-columns: 1fr; }
  .btn { padding: .4em .7em; font-size: var(--fs-md); }
  .card-head > .btn, .page-actions .btn { flex: 1 1 auto; justify-content: center; }
  .userbox .btn { padding: .3em .45em; }
  .drawer-foot .btn { flex: 1 1 auto; justify-content: center; }
  .fin-steps { grid-template-columns: 1fr; }
  .fin-kpis { grid-template-columns: 1fr 1fr; }
  .att-add .att-note { flex-basis: 100%; }
}
/* Écran tactile : cibles plus grandes */
@media (pointer: coarse) {
  .chipbtn { padding: .35rem .8rem; }
  .monthnav button { min-height: 2.2rem; }
}
@media print { .nav-toggle { display: none !important; } }
/* 3.1.28 : corrections petits écrans */
.tbl-wrap td:has(> .btn), .tbl-wrap td:has(> button) { white-space: nowrap; }
@media (max-width: 1100px) { .rf-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .card :not(.tbl-wrap) > table.tbl-compact { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
  .nav-toggle { max-width: calc(100vw - 15.5rem); min-width: 0; }
  .userbox { flex-wrap: nowrap; }
  .topbar { flex-wrap: wrap; }
  label.rf.rf-wide { grid-column: 1 / -1; }
  .rf-sec > header { flex-wrap: wrap; }
}
td.btn-row { display: table-cell; white-space: nowrap; } td.btn-row > .btn { margin: .1rem .25rem .1rem 0; }
@media (max-width: 560px) {
  .topbar .brand-logo { height: 28px; }
  .topbar { gap: .4rem; padding: .35rem .5rem; }
  .nav-toggle { max-width: calc(100vw - 15rem); padding: .3rem .6rem; }
  .userbox .btn { font-size: var(--fs-xs); padding: .3em .45em; }
}
.fin-steps { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.fin-tbl tbody td:first-child, .fin-tbl thead tr:first-child th:first-child { position: sticky; left: 0; z-index: 2; background: #fff; box-shadow: 1px 0 0 var(--line-2); }
.fin-tbl tr.fin-mo td:first-child { background: #fafbfc; } .fin-tbl tr.fin-tot td:first-child { background: #e9edf3; } .fin-tbl tr.fin-sub td:first-child { background: #f4f6f9; }
.fin-tbl tr.fin-mhead td:first-child { background: var(--rail-tint); }
.fin-tbl thead tr:first-child th:first-child { z-index: 3; background: #f3f5f8; }
@media print { .fin-tbl tbody td:first-child, .fin-tbl thead th:first-child { position: static; box-shadow: none; } }
.sh-valcol .sh-val { margin-left: 0; font-size: var(--fs-sm); }
.sh-val.now { background: #e3f2e7; color: #1d6b3a; font-weight: 600; } .sh-val.next { background: #eef3fa; color: var(--rail); } .sh-val.past { background: #f1f1f1; color: var(--ink-3); text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }
.badge.sh-vn { background: #eef3fa; color: var(--rail); font-size: var(--fs-xs); }
.ver-prev { display: grid; grid-template-columns: auto 1fr; gap: .25rem .7rem; padding: .5rem .7rem; background: var(--paper); border-radius: 8px; margin-top: .6rem; font-size: var(--fs-md); }
.sh-verbox { align-items: flex-start; gap: .8rem; padding: .7rem .9rem; border: 1px solid var(--rail); background: #f4f8fd; border-radius: 10px; margin: 0 0 .8rem; font-size: var(--fs-md); }
.sh-verbox .btn { margin-left: 0; }
.fin-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1500px) { .fin-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nav a { padding: .5em .45em; } }
@media (max-width: 560px) { .fin-steps { grid-template-columns: 1fr; } }
.fin-seg button { white-space: nowrap; }

/* ---------- 3.1.30 : référentiel lisible, champs alignés ---------- */
.rf-scope { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .5rem; margin: .2rem 0 .6rem; }
.rf-scope-i { border: 1px solid var(--line); border-radius: 8px; padding: .5rem .7rem; background: #fbfcfd; font-size: var(--fs-md); display: flex; flex-direction: column; gap: .2rem; }
.rf-scope-i:first-child { border-color: #b9dcc5; background: #f2faf5; }
.rf-scope-i span { color: var(--ink-2); }
.rf-grid { align-items: end; }
label.rf { justify-content: flex-end; }
label.rf .rf-l { line-height: 1.2; }
.ct-how { margin: .3rem 0 .7rem; padding: .5rem .7rem; border-radius: 8px; background: var(--rail-tint); font-size: var(--fs-md); color: var(--rail-2); }
.rf-sub { grid-column: 1 / -1; font: 600 var(--fs-sm) var(--ui); color: var(--navy); border-bottom: 1px solid var(--line-2); padding: .35rem 0 .15rem; margin-top: .2rem; }
.rf-sub:first-child { margin-top: 0; }
p.hp-clamp:not(.open) { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0; }
.hp-more { border: 0; background: none; color: var(--rail); font-size: var(--fs-sm); padding: 0 0 .4rem; cursor: pointer; display: block; }
.hp-more:hover { text-decoration: underline; }
@media print { p.hp-clamp { display: block !important; -webkit-line-clamp: unset !important; } }

/* ---------- 3.1.31 : référentiels LDT / LTr ---------- */
.rg-badge { display: inline-block; font: 700 var(--fs-xs) var(--ui); border-radius: 4px; padding: .05rem .4rem; letter-spacing: .03em; }
.rg-badge.rg-ldt { background: #e3ecf7; color: #23415f; } .rg-badge.rg-ltr { background: #fff1d6; color: #7a5600; }
.rf-setbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; padding: .6rem .8rem; border: 2px solid var(--navy); border-radius: 10px; background: #f7f9fc; margin: .2rem 0 .7rem; }
.rf-setbar label { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--navy); }
.rf-setbar select { min-width: 20rem; font-weight: 600; }
.rf-ltr-note { padding: .55rem .8rem; border-radius: 8px; background: var(--warn-tint); color: #6b4e00; font-size: var(--fs-md); margin: 0 0 .6rem; }
.ldt-na { padding: 1rem 1.1rem; border-radius: 10px; background: #fff7e6; border: 1px solid #f0d18a; color: #5b4300; }

/* 3.1.32 — modèle du règlement (référentiel LTr) */
.rf-preset { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin-top: .5rem; }
.rf-preset .muted { flex: 1 1 22rem; }
.rf .rf-changed, input.rf-changed, select.rf-changed { outline: 2px solid #e0a43a; background: #fff8e8; }

/* 3.1.32 — module en option « Vue collaborateur » (maquette) */
.vc-tag { font-size: var(--fs-sm, .8rem); font-weight: 600; color: #7a5600; background: #fff3cf; border-radius: 999px; padding: .1rem .6rem; vertical-align: middle; margin-left: .4rem; }
.vc-note { background: #eef3fa; border-radius: 8px; padding: .6rem .8rem; color: #23415f; margin: .2rem 0 1rem; line-height: 1.45; }
.vc-grid { display: grid; grid-template-columns: 410px minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.vc-phone { width: 410px; height: 864px; border-radius: 46px; background: #1b2633; padding: 10px; box-shadow: 0 10px 30px rgba(17, 43, 67, .25); }
.vc-phone iframe { width: 390px; height: 844px; border: 0; border-radius: 36px; display: block; background: #f4f6f9; }
.vc-qr { display: flex; gap: .8rem; align-items: center; margin-top: .9rem; max-width: 410px; }
.vc-qr-img svg { width: 110px; height: 110px; display: block; }
.vc-mgr h3 { margin: 0 0 .5rem; }
.vc-mgr iframe { width: 100%; height: 900px; border: 1px solid #e1e6ed; border-radius: 12px; background: #f4f6f9; }
.vc-next { margin-top: 1rem; }
.vc-next summary h3 { display: inline; }
@media (max-width: 1100px) { .vc-grid { grid-template-columns: 1fr; } .vc-phone-col { display: flex; flex-direction: column; align-items: center; } }
@media (max-width: 460px) { .vc-phone { width: 100%; height: auto; padding: 0; background: none; box-shadow: none; } .vc-phone iframe { width: 100%; height: 760px; } }
/* « Vue collaborateur » : bouton dans la ligne du haut sur grand écran (le menu garde sa place), entrée du menu sur tablette / téléphone */
.nav a.nav-collab { display: none; }
.userbox .vc-top { display: inline-flex; align-items: center; gap: .35rem; }
.userbox .vc-top.on { border-color: var(--rail); color: var(--rail); }
@media (max-width: 900px) { .nav a.nav-collab { display: block; } .userbox .vc-top { display: none; } }