/*
 * GMI Mecalp : feuille de style commune (maquette validée le 2026-10-07).
 * Un seul fichier pour toutes les pages, téléphone et ordinateur.
 * En dessous de 900 px : barre compacte + bouton menu + panneau par le bas.
 */

/* ---------- Jetons ---------- */
:root {
  --bg: #f3f4f7;
  --surface: #ffffff;
  --sunken: #f6f7f9;
  --fg: #071437;
  --fg-2: #4b5675;
  --muted: #78829d;
  --faint: #a1a5b7;
  --line: #eceef2;
  --line-2: #e2e5eb;
  --track: #eceef2;

  --brand: #ed1c24;        /* carré du logo uniquement */
  --red: #d0161e;          /* boutons, onglet actif : texte blanc lisible */
  --red-text: #c8141b;
  --red-soft: #fdeced;
  --navy: #071437;
  --ok: #1f9d55;

  /* états d'intervention (table states) : fond / texte / point */
  --st1-bg: #eef5ff; --st1-fg: #1b5fb5; --st1-dot: #3e97ff;   /* Programmé */
  --st2-bg: #fff7dc; --st2-fg: #7a5b00; --st2-dot: #e5b200;   /* En cours */
  --st3-bg: #f3eefe; --st3-fg: #5a2bc4; --st3-dot: #7239ea;   /* Validations */
  --st6-bg: #eaf8f0; --st6-fg: #1c7a49; --st6-dot: #50cd89;   /* Terminé */
  --st7-bg: #fdeef1; --st7-fg: #b3173c; --st7-dot: #f1416c;   /* Reporté */

  /* rubriques GED : noir / rouge / gris en badge doux */
  --doc-bg: #eef0f4; --doc-fg: #071437;
  --pack-bg: #fdeced; --pack-fg: #c8141b;
  --param-bg: #f1f2f5; --param-fg: #5e6680;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-sm: 9px; --r: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 24px;
  --shadow-1: 0 1px 2px rgba(7, 20, 55, .04);
  --shadow-2: 0 1px 2px rgba(7, 20, 55, .04), 0 10px 30px rgba(7, 20, 55, .05);
  --shadow-pop: 0 20px 50px rgba(7, 20, 55, .16);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --appbar-h: 72px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 15px/1.5 var(--font); -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; line-height: 1.15; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- Barre du haut ---------- */
.appbar {
  position: sticky; top: 0; z-index: 48;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(7, 20, 55, .07);
  padding-top: env(safe-area-inset-top, 0px);
}
.appbar__in {
  max-width: 1360px; margin: 0 auto; padding: 0 40px; min-height: var(--appbar-h);
  display: flex; align-items: center; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand__mark {
  background: var(--brand); color: #fff; border-radius: 10px; height: 36px; padding: 0 10px;
  display: grid; place-items: center; font-weight: 800; font-size: 13px; letter-spacing: .07em;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name { font-weight: 700; font-size: 15px; letter-spacing: .01em; }
.brand__sub { font-size: 12px; color: var(--muted); }
.appbar__nav { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
.appbar__tools { display: flex; align-items: center; gap: 12px; flex: none; position: relative; }

/* ---------- Commutateur (menu principal, vues, filtres) ---------- */
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: var(--track); }
.seg > a, .seg > button {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px;
  border: 0; border-radius: 10px; background: transparent; color: #5e6680;
  font-weight: 600; font-size: 14px; white-space: nowrap;
  transition: background .2s, color .2s, box-shadow .2s;
}
.seg > a:hover, .seg > button:hover { color: var(--fg); }
.seg > [aria-current="page"], .seg > [aria-pressed="true"] {
  background: var(--surface); color: var(--fg); box-shadow: 0 1px 3px rgba(7, 20, 55, .12);
}
.seg--sm { border-radius: 12px; background: #e6e8ee; }
.seg--sm > a, .seg--sm > button { height: 34px; padding: 0 14px; border-radius: 9px; }
.seg--fill { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.seg--fill > a, .seg--fill > button { justify-content: center; padding: 0 8px; }

.count {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  background: var(--red); color: #fff; font-size: 12px; font-weight: 700;
  display: inline-grid; place-items: center; font-variant-numeric: tabular-nums;
}

/* ---------- Recherche, avatar ---------- */
.searchbox {
  display: flex; align-items: center; gap: 8px; height: 40px; width: 240px; padding: 0 12px;
  border-radius: var(--r); background: var(--track); color: var(--muted);
}
.searchbox input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 14px; color: var(--fg); }
.searchbox kbd { font: 600 11.5px var(--font); color: var(--muted); background: #fff; border-radius: 6px; padding: 2px 6px; }
.avatar {
  width: 40px; height: 40px; border-radius: var(--r); border: 0; flex: none;
  background: #e9f3ff; color: #1b5fb5; font-weight: 700; font-size: 14px;
  display: grid; place-items: center;
}
.avatar--lg { width: 46px; height: 46px; border-radius: 14px; font-size: 15px; }
.avatar--xl { width: 64px; height: 64px; border-radius: 20px; font-size: 22px; font-weight: 800; }
.avatar--q { background: #f1ebfd; color: #5a2bc4; }
.avatar--admin { background: var(--navy); color: #fff; }

/* ---------- Panneau flottant (avatar) ---------- */
.popover {
  position: absolute; top: calc(100% + 12px); right: 0; width: 300px; z-index: 50;
  background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1px solid rgba(7, 20, 55, .08); border-radius: 18px; box-shadow: var(--shadow-pop);
  padding: 8px; display: flex; flex-direction: column; gap: 2px;
  opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none; transform-origin: top right;
  transition: opacity .18s ease, transform .18s var(--ease);
}
.popover.is-open { opacity: 1; transform: none; pointer-events: auto; }
.popover__who { display: flex; align-items: center; gap: 12px; padding: 12px; }
.popover__sep { height: 1px; background: var(--line); margin: 4px 8px; }
.popover a {
  display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px;
  border-radius: 11px; font-weight: 600; font-size: 14.5px;
}
.popover a:hover { background: var(--bg); }
.popover a.danger { color: var(--red-text); }
.popover__logout {
  display: flex; align-items: center; gap: 12px; width: 100%; height: 44px; padding: 0 12px;
  border: 0; border-radius: 11px; background: none; font-weight: 600; font-size: 14.5px; color: var(--red-text); text-align: left;
}
.popover__logout:hover { background: var(--red-soft); }
.who { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.who--grow { flex: 1; line-height: 1.25; }
.who__name { font-size: 16px; }
.who__sub { font-size: 13px; color: var(--muted); }
.is-soon { opacity: .45; cursor: default; pointer-events: none; }
.soon { font-size: 13px; }
.count--lg { min-width: 24px; height: 24px; border-radius: 12px; font-size: 13px; }
.brand__mark--lg { height: 44px; font-size: 15px; }
.erreur { max-width: 520px; margin: 10vh auto 0; text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.erreur__titre { font-size: 24px; font-weight: 800; }

/* ---------- Bouton menu (2 traits -> X) ---------- */
.menu-btn {
  display: none; position: relative; width: 44px; height: 44px; padding: 0; flex: none;
  border-radius: 14px; border: 1px solid var(--line-2); background: #fff; color: var(--fg);
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .12s ease;
  z-index: 60;
}
.menu-btn:active { transform: scale(.97); }
.menu-btn__bars { position: absolute; left: 11px; top: 15px; width: 22px; height: 14px; }
.menu-btn__bars::before, .menu-btn__bars::after {
  content: ""; position: absolute; left: 0; height: 2.25px; border-radius: 2px; background: currentColor;
  transition: top .3s var(--ease), width .3s var(--ease), transform .3s var(--ease);
}
.menu-btn__bars::before { top: 2px; width: 22px; }
.menu-btn__bars::after { top: 10px; width: 14px; }
.menu-btn[aria-expanded="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.menu-btn[aria-expanded="true"] .menu-btn__bars::before { top: 6px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bars::after { top: 6px; width: 22px; transform: rotate(-45deg); }
.menu-btn__badge {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; border: 2px solid #fff; background: var(--red); color: #fff;
  font-size: 11px; font-weight: 700; display: grid; place-items: center;
}

/* ---------- Panneau par le bas (téléphone) ---------- */
.backdrop {
  position: fixed; inset: 0; z-index: 45; background: rgba(7, 20, 55, .38);
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.backdrop.is-open { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 50;
  max-height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border-radius: 30px; box-shadow: 0 -8px 40px rgba(7, 20, 55, .18);
  padding: 10px 14px calc(22px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 14px;
  transform: translateY(calc(100% + 16px)); transition: transform .38s var(--ease);
  visibility: hidden;
}
.sheet.is-open { transform: none; visibility: visible; }
.sheet > * { flex-shrink: 0; }
.sheet { scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sheet::-webkit-scrollbar { display: none; }
.sheet__grab { width: 38px; height: 5px; border-radius: 3px; background: #d7dae2; margin: 0 auto; flex: none; }
.sheet__who { display: flex; align-items: center; gap: 12px; padding: 2px 6px; }
.sheet__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sheet__close {
  width: 36px; height: 36px; border: 0; border-radius: 18px; background: #f1f2f5; color: var(--fg-2);
  display: grid; place-items: center; flex: none;
}
.group-title { padding: 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }

/* liste groupée façon iOS */
.ios-list { background: var(--sunken); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.ios-list--white { background: #fff; border-radius: var(--r-md); }
.ios-row {
  display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 14px;
  border: 0; border-top: 1px solid #eaecf0; background: transparent; width: 100%;
  text-align: left; font-size: 16px; color: var(--fg);
}
.ios-row:first-child { border-top: 0; }
.ios-row:active { background: #eceef2; }
.ios-row__icon {
  width: 36px; height: 36px; border-radius: 11px; flex: none; background: #fff; color: var(--fg);
  display: grid; place-items: center;
}
.ios-list--white .ios-row__icon { background: var(--sunken); }
.ios-row__label { flex: 1; font-weight: 600; min-width: 0; }
.ios-row__value { color: var(--muted); }
.ios-row__chev { color: var(--faint); flex: none; }
.ios-row[aria-current="page"] .ios-row__label { color: var(--red-text); }
.ios-row[aria-current="page"] .ios-row__icon { background: var(--red-soft); color: var(--red-text); }
.ios-row input, .ios-row select { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; text-align: right; font-size: 16px; }

.logout {
  display: flex; align-items: center; justify-content: center; gap: 10px; height: 54px; flex: none; width: 100%; border: 0;
  border-radius: 18px; background: var(--red-soft); color: var(--red-text); font-weight: 700; font-size: 16px;
}

/* ---------- Page ---------- */
.page { max-width: 1360px; margin: 0 auto; padding: 40px 40px 64px; display: flex; flex-direction: column; gap: 28px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.page-head__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.eyebrow { font-size: 15px; color: var(--muted); font-weight: 500; }
.title { font-size: 40px; font-weight: 800; letter-spacing: -.025em; }
.lead { color: var(--fg-2); line-height: 1.5; max-width: 62ch; }
.back { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 600; color: var(--red); }
.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px; border: 0; border-radius: var(--r);
  font-weight: 700; font-size: 15px; white-space: nowrap;
  transition: background .15s, box-shadow .15s, transform .12s;
}
.btn:active { transform: scale(.98); }
.btn--primary { background: var(--red); color: #fff; box-shadow: 0 6px 16px rgba(208, 22, 30, .22); }
.btn--primary:hover { background: #bb1219; }
.btn--soft { background: var(--track); color: var(--fg); }
.btn--soft:hover { background: #e2e5eb; }
.btn--white { background: #fff; color: var(--fg); box-shadow: 0 1px 2px rgba(7, 20, 55, .06); }
.btn--white:hover { background: #f7f8fa; }
.btn--lg { height: 52px; border-radius: 14px; font-size: 16px; }
.btn--block { width: 100%; }
.icon-btn {
  width: 42px; height: 42px; border: 0; border-radius: var(--r); background: #fff; color: var(--fg);
  display: inline-grid; place-items: center; box-shadow: 0 1px 2px rgba(7, 20, 55, .06); flex: none;
}
.icon-btn:hover { background: #f7f8fa; }
.icon-btn--soft { background: #f1f2f5; box-shadow: none; }
.icon-btn--soft:hover { background: #e6e8ee; }
.icon-btn--red { background: var(--red-soft); color: var(--red-text); box-shadow: none; }
.fab {
  position: fixed; right: 20px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 30;
  width: 58px; height: 58px; border-radius: 20px; background: var(--red); color: #fff;
  display: none; place-items: center; box-shadow: 0 8px 20px rgba(208, 22, 30, .35);
}

/* ---------- Cartes, tuiles ---------- */
.card { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-2); }
.card--pad { padding: 24px 28px; }
.card__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.card__title { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tile { background: #fff; border-radius: var(--r-lg); padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow-1); }
.tile__label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--fg-2); font-weight: 500; }
.tile__value { font-size: 34px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }

/* ---------- Pastilles ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 600; white-space: nowrap; background: #f1f2f5; color: var(--fg-2);
}
.pill .dot { width: 7px; height: 7px; }
.pill--type { font-size: 12px; font-weight: 700; letter-spacing: .04em; padding: 3px 9px; }
.pill--red { background: var(--red-soft); color: var(--red-text); font-weight: 700; }
.pill--sm { font-size: 12px; padding: 3px 9px; flex: none; }
.st-1 { background: var(--st1-bg); color: var(--st1-fg); } .st-1 .dot { background: var(--st1-dot); }
.st-2 { background: var(--st2-bg); color: var(--st2-fg); } .st-2 .dot { background: var(--st2-dot); }
.st-3, .st-4, .st-5 { background: var(--st3-bg); color: var(--st3-fg); }
.st-3 .dot, .st-4 .dot, .st-5 .dot { background: var(--st3-dot); }
.st-6 { background: var(--st6-bg); color: var(--st6-fg); } .st-6 .dot { background: var(--st6-dot); }
.st-7 { background: var(--st7-bg); color: var(--st7-fg); } .st-7 .dot { background: var(--st7-dot); }

/* ---------- Formulaires ---------- */
.field { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--fg-2); }
.input {
  width: 100%; height: 46px; border: 1px solid transparent; border-radius: var(--r);
  background: var(--bg); padding: 0 14px; font-size: 15px; color: var(--fg); outline: none;
  transition: border-color .15s, background .15s;
}
.input:focus { background: #fff; border-color: var(--navy); }
textarea.input { height: auto; padding: 12px 14px; resize: vertical; }
select.input {
  appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2378829d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.input-unit { position: relative; display: block; }
.input-unit .input { padding-right: 60px; }
.input-unit span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 500; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }

/* interrupteur iOS */
.switch {
  position: relative; flex: none; width: 52px; height: 32px; padding: 0; border: 0; border-radius: 16px;
  background: #d5d8e0; transition: background .2s ease;
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 28px; height: 28px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); transition: left .2s var(--ease);
}
.switch[aria-checked="true"] { background: var(--ok); }
.switch[aria-checked="true"]::after { left: 22px; }
.setting { display: flex; gap: 16px; align-items: flex-start; padding: 18px 24px; }
.setting + .setting { border-top: 1px solid #f0f1f4; }
.setting__text { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.setting__label { font-size: 16px; font-weight: 700; }
.setting__help { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.notice { font-size: 13px; font-weight: 600; color: #a2600b; background: #fdf2e1; border-radius: 10px; padding: 8px 10px; line-height: 1.4; }

/* case à cocher carrée */
.check {
  width: 26px; height: 26px; padding: 0; border-radius: 8px; border: 2px solid #c9cdd6; background: #fff;
  color: #fff; display: inline-grid; place-items: center; transition: background .15s, border-color .15s;
}
.check[aria-checked="true"], .check[aria-checked="mixed"] { background: var(--red); border-color: var(--red); }
.check svg { display: none; }
.check[aria-checked="true"] .i-tick { display: block; }
.check[aria-checked="mixed"] .i-dash { display: block; }

/* choix unique (radio) en carte */
.choice {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; width: 100%;
  border-radius: var(--r-md); border: 1.5px solid #e6e8ee; background: #fff; text-align: left; color: var(--fg);
}
.choice__ring { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #c4c8d2; display: grid; place-items: center; flex: none; }
.choice__ring::after { content: ""; width: 10px; height: 10px; border-radius: 50%; }
.choice[aria-checked="true"] { border-color: var(--red); background: #fff7f7; }
.choice[aria-checked="true"] .choice__ring { border-color: var(--red); }
.choice[aria-checked="true"] .choice__ring::after { background: var(--red); }

/* ---------- Machines, GED ---------- */
.plate {
  min-width: 96px; height: 72px; padding: 0 14px; border-radius: 18px; border: 2.5px solid var(--fg);
  display: inline-grid; place-items: center; font-weight: 800; font-size: 30px; letter-spacing: -.01em; background: #fff;
}
.plate--crit { border-color: var(--red); color: var(--red-text); }
.plate--sm { min-width: 72px; height: 64px; font-size: 26px; }
.folder-badge {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-size: 14px; font-weight: 800; padding: 5px 12px; border-radius: 10px;
}
.r-doc { background: var(--doc-bg); color: var(--doc-fg); }
.r-pack { background: var(--pack-bg); color: var(--pack-fg); }
.r-param { background: var(--param-bg); color: var(--param-fg); }
.ext {
  width: 40px; height: 40px; border-radius: 11px; flex: none; display: grid; place-items: center;
  font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  background: var(--sunken); color: var(--muted);
}
.ext--pdf { background: #fdecea; color: #b42318; }
.ext--zip, .ext--7z, .ext--rar { background: #fdf2e1; color: #a2600b; }
.ext--dat, .ext--txt, .ext--ini, .ext--cfg, .ext--xml, .ext--csv, .ext--nc { background: #e8f0fb; color: #1d5fae; }
.ext--jpg, .ext--png, .ext--xlsx { background: #eaf8f0; color: #1c7a49; }
.vbadge { font-size: 12.5px; font-weight: 700; padding: 3px 9px; border-radius: 8px; background: var(--navy); color: #fff; }
.vbadge--old { background: #eef0f4; color: var(--fg-2); }
.dropzone {
  border: 1.5px dashed #d5d8e0; border-radius: 18px; padding: 18px; background: #fafbfc; color: var(--muted);
  font-size: 14px; text-align: center; transition: border-color .15s, background .15s;
}
.dropzone.is-over { border-color: var(--red); background: var(--red-soft); color: var(--red-text); }
.locked { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-md); background: #fff; color: var(--fg-2); font-size: 14px; line-height: 1.4; }

/* ---------- Tableaux ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; padding: 8px 12px; font-size: 12.5px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.table td { padding: 12px; border-top: 1px solid #f0f1f4; vertical-align: middle; }
.table tbody tr:hover td { background: #fafbfc; }
.table tr.is-selected td { background: #f7f8fa; }

/* ---------- Fenêtre (ordinateur) ---------- */
.modal {
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 24px;
  background: rgba(7, 20, 55, .32); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.modal.is-open { opacity: 1; pointer-events: auto; }
.modal__box {
  width: 100%; max-width: 520px; max-height: calc(100dvh - 48px); overflow-y: auto;
  background: #fff; border-radius: 26px; padding: 28px; box-shadow: 0 30px 80px rgba(7, 20, 55, .25);
  display: flex; flex-direction: column; gap: 20px;
  transform: translateY(8px) scale(.98); transition: transform .25s var(--ease);
}
.modal.is-open .modal__box { transform: none; }

/* ---------- Pages : cartes d'intervention, agenda, états vides ---------- */
.dot--navy { background: var(--navy); }
.dot--st2 { background: var(--st2-dot); }
.dot--st3 { background: var(--st3-dot); }
.dot--st7 { background: var(--st7-dot); }
.is-crit { color: var(--red-text); }

.deux-col { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.deux-col > :first-child { flex: 999 1 560px; min-width: 0; }
.deux-col > :last-child { flex: 1 1 340px; min-width: 0; }
.pile { display: flex; flex-direction: column; gap: 18px; }

.agenda { display: flex; flex-direction: column; }
.agenda__ligne { display: flex; gap: 16px; padding: 14px 0; border-top: 1px solid #f0f1f4; }
.agenda__ligne:first-child { border-top: 0; padding-top: 0; }
.agenda__heure { width: 52px; flex: none; display: flex; flex-direction: column; font-weight: 700; }
.agenda__heure small { font-size: 12px; font-weight: 600; color: var(--muted); }
.agenda__corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.agenda__titre { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 17px; }

.vide {
  background: #fff; border-radius: var(--r-xl); padding: 48px 24px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px; box-shadow: var(--shadow-1);
}
.vide--plat { box-shadow: none; padding: 28px 12px; background: var(--sunken); border-radius: 18px; }
.vide__icone { width: 56px; height: 56px; border-radius: 18px; background: var(--sunken); color: var(--muted); display: grid; place-items: center; margin-bottom: 6px; }
.vide--plat .vide__icone { background: #fff; }
.vide strong { font-size: 17px; }

.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; }
.carte {
  background: #fff; border-radius: var(--r-xl); padding: 22px; display: flex; flex-direction: column; gap: 16px;
  box-shadow: var(--shadow-2); transition: box-shadow .2s ease, transform .2s ease;
}
@media (hover: hover) { .carte:hover { box-shadow: 0 2px 4px rgba(7, 20, 55, .04), 0 16px 36px rgba(7, 20, 55, .08); transform: translateY(-2px); } }
.carte__haut { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.carte__corps { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.carte__machine { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.carte__meta { font-size: 13.5px; color: var(--muted); font-weight: 500; }
.carte__code { font-size: 32px; line-height: 1; font-weight: 800; letter-spacing: -.02em; }
.carte__lieu { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; font-size: 14px; color: var(--fg-2); }
.carte__lieu span { display: inline-flex; align-items: center; gap: 6px; }
.carte__lieu svg { color: var(--muted); }
.carte__infos { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; font-size: 14.5px; }
.carte__infos div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.carte__infos dt { font-size: 12.5px; color: var(--muted); }
.carte__infos dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.carte__large { grid-column: 1 / -1; }
.carte__actions { display: flex; gap: 10px; margin-top: auto; }
.carte__actions > form, .carte__actions > .btn { flex: 1; }
.carte__actions--tel .btn { flex: 1; }
.icon-btn--lg { width: 52px; height: 52px; border-radius: 14px; }


@media (max-width: 899px) {
  .cartes { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .carte { padding: 16px; border-radius: 18px; gap: 14px; box-shadow: 0 1px 2px rgba(7, 20, 55, .05), 0 6px 18px rgba(7, 20, 55, .05); }
  .carte__code { font-size: 30px; }
  .seg--tel-plein { width: 100%; }
  .seg--tel-plein > a { height: 38px; font-size: 14px; }
  .agenda__titre { font-size: 16px; }
}

/* ---------- Machines : liste, filtres, fiche ---------- */
.dot--red { background: var(--red); }
.filtres { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; background: #fff; border-radius: 18px; padding: 8px; box-shadow: var(--shadow-1); }
.filtres__recherche { flex: 1 1 280px; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-radius: var(--r); background: var(--bg); color: var(--muted); }
.filtres__recherche input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 15px; color: var(--fg); }
.filtres__select { width: auto; flex: 0 1 220px; height: 44px; font-weight: 600; }
.filtres__case { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: var(--r); background: var(--bg); font-weight: 600; font-size: 14px; cursor: pointer; }
.filtres__case input { width: 18px; height: 18px; accent-color: var(--red); margin: 0; }
.resultats { font-size: 14px; color: var(--muted); font-weight: 500; margin: -8px 4px 0; }

.table--liens td { padding: 10px 12px; }
.table--liens td:first-child { padding-left: 24px; }
.table--liens th:first-child { padding-left: 24px; }
.table--liens thead th { padding-top: 16px; padding-bottom: 10px; }
.table__lien { display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
.table__lien .muted { font-size: 13px; }
.table__chev { width: 48px; color: var(--faint); text-align: right; padding-right: 20px !important; }
.table--liens td .pill + .pill { margin-left: 4px; }
.plate--xs { min-width: 56px; height: 34px; padding: 0 9px; border-radius: 10px; border-width: 2px; font-size: 15px; }
.ios-row--machine { gap: 12px; min-height: 64px; }
.ios-row--machine strong { font-size: 15.5px; font-weight: 600; }

.titre-ligne { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fiche { display: flex; flex-direction: column; gap: 24px; }
.input--fort { font-weight: 700; text-transform: uppercase; }
.field--err .input { border-color: var(--red); background: #fff; }
.field__err { color: var(--red-text); font-size: 13px; font-weight: 600; }
.card__title--sm { font-size: 18px; }
.seg--etat { align-self: flex-start; }
.seg__radio { position: relative; display: inline-flex; }
.seg__radio input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg__radio span { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 9px; color: #5e6680; font-weight: 600; font-size: 14px; transition: background .2s, color .2s; }
.seg__radio input:checked + span { background: #fff; color: var(--fg); box-shadow: 0 1px 3px rgba(7, 20, 55, .12); }
.seg__radio input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.ged-apercu { display: flex; flex-direction: column; gap: 6px; }
.ged-apercu ul { list-style: none; margin: 0; padding: 0 0 0 14px; }
.ged-apercu li { font-size: 14px; color: var(--fg-2); padding: 7px 0; border-bottom: 1px solid #f0f1f4; }
.switch:disabled { opacity: .5; cursor: default; }
.barre-action {
  position: sticky; bottom: 0; margin: 0 -16px -48px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(243, 244, 247, .92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid var(--line);
}
@media (max-width: 899px) {
  .filtres { padding: 6px; border-radius: 16px; }
  .filtres__recherche { flex-basis: 100%; }
  .filtres__select { flex: 1 1 140px; }
  .filtres__case { flex: 1 1 100%; justify-content: center; }
  .seg--etat { align-self: stretch; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .seg--etat span { justify-content: center; padding: 0 6px; font-size: 13px; text-align: center; line-height: 1.15; height: 40px; }
  .seg__radio { display: flex; }
  .seg__radio span { width: 100%; }
}

/* ---------- Paramétrage ---------- */
.reglages { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; }
.reglage {
  display: flex; align-items: center; gap: 16px; padding: 22px; background: #fff; border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); transition: box-shadow .2s ease, transform .2s ease;
}
a.reglage:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.reglage__icone { width: 48px; height: 48px; border-radius: 14px; background: var(--red-soft); color: var(--red-text); display: grid; place-items: center; flex: none; }
.reglage__texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; line-height: 1.4; }
.reglage__texte strong { font-size: 16.5px; }
.reglage__texte .muted { font-size: 14px; }
.is-soon-carte { opacity: .6; }
.is-soon-carte .reglage__icone { background: var(--sunken); color: var(--muted); }
.filtres__effacer { height: 44px; }
@media (max-width: 899px) {
  .reglages { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .reglage { padding: 16px; border-radius: 18px; }
}

/* ---------- Documents officiels ---------- */
.faint { color: var(--faint); font-size: 14px; }
.plate--doc { min-width: 78px; font-size: 13.5px; letter-spacing: .02em; border-color: var(--navy); }
.version { display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border-radius: 8px; background: var(--track); font-size: 13px; font-weight: 700; color: var(--fg-2); white-space: nowrap; }
.version--grand { height: 32px; padding: 0 12px; font-size: 14px; }
.pile--serree { gap: 6px; }
.grid-3 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 20px; }
.field--large { grid-column: span 2; }
.field--pleine { grid-column: 1 / -1; }
.types-doc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.type-doc { position: relative; display: flex; cursor: pointer; }
.type-doc input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.type-doc__carte {
  flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: var(--r-md);
  border: 1.5px solid var(--line-2); background: #fff; transition: border-color .15s, background .15s, box-shadow .15s;
}
.type-doc__carte .muted { font-size: 13.5px; line-height: 1.4; }
.type-doc__code { align-self: flex-start; font-size: 12px; font-weight: 800; letter-spacing: .05em; padding: 2px 8px; border-radius: 7px; background: var(--track); color: var(--fg-2); }
.type-doc input:checked + .type-doc__carte { border-color: var(--red); background: #fff7f7; box-shadow: 0 0 0 3px rgba(208, 22, 30, .08); }
.type-doc input:checked + .type-doc__carte .type-doc__code { background: var(--red); color: #fff; }
.type-doc input:focus-visible + .type-doc__carte { outline: 2px solid var(--red); outline-offset: 2px; }
.type-doc input:disabled + .type-doc__carte { cursor: default; }
.grille__aide { font-size: 14px; line-height: 1.5; max-width: 90ch; }
.facultatif { font-size: 13px; font-weight: 600; color: var(--muted); background: var(--track); border-radius: 8px; padding: 3px 9px; vertical-align: middle; margin-left: 6px; }
.actions-doc { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.actions-doc__info { font-size: 14px; }
.btn--danger { color: var(--red-text); }
.btn--danger:hover { background: var(--red-soft); }

/* grille de la check-list */
.grille { display: flex; flex-direction: column; gap: 16px; }
.g-outils { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.g-ajout { display: flex; gap: 8px; }
.g-ajout__champ { flex: 1; min-width: 0; }
.g-ajout .btn { height: 46px; flex: none; }
.g-table-wrap { overflow: auto; max-height: 70vh; border: 1px solid var(--line); border-radius: var(--r-md); }
.g-table { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; }
.g-table th, .g-table td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 0; background: #fff; }
.g-table thead th { position: sticky; top: 0; z-index: 2; background: var(--sunken); vertical-align: top; }
.g-table tbody th { position: sticky; left: 0; z-index: 1; background: #fff; text-align: left; font-weight: 400; }
.g-table thead th.g-coin { left: 0; z-index: 3; text-align: left; padding: 12px 14px; font-size: 12.5px; color: var(--muted); font-weight: 600; min-width: 280px; }
.g-col { display: flex; flex-direction: column; gap: 6px; padding: 8px; width: 150px; }
.g-col__actions { display: flex; justify-content: space-between; align-items: center; }
.g-nom { width: 100%; border: 0; background: transparent; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--fg); padding: 6px 8px; border-radius: 8px; outline: none; }
.g-nom:not([readonly]):hover { background: #fff; }
.g-nom:focus { background: #fff; box-shadow: 0 0 0 2px var(--navy); }
.g-op { display: flex; align-items: center; gap: 6px; padding: 6px 8px; min-width: 280px; }
.g-num { width: 24px; height: 24px; border-radius: 7px; background: var(--track); color: var(--fg-2); font-size: 12px; font-weight: 700; display: grid; place-items: center; flex: none; }
.g-nom--op { flex: 1; min-width: 0; font-weight: 600; }
.g-op__actions { display: flex; gap: 2px; flex: none; opacity: .35; transition: opacity .15s; }
.g-table tr:hover .g-op__actions, .g-op__actions:focus-within { opacity: 1; }
.g-btn { width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--fg-2); display: grid; place-items: center; padding: 0; }
.g-btn:hover { background: var(--track); color: var(--fg); }
.g-btn--danger:hover { background: var(--red-soft); color: var(--red-text); }
.g-mini { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border: 0; border-radius: 7px; background: #fff; color: var(--st6-fg); font-size: 12px; font-weight: 700; }
.g-mini:hover { background: var(--st6-bg); }
.g-val { width: 150px; height: 44px; border: 0; background: transparent; text-align: center; font: inherit; font-size: 14px; font-weight: 600; color: var(--st6-fg); outline: none; }
.g-val.is-vide { color: var(--faint); font-weight: 400; }
.g-val:focus { background: #fff7f7; box-shadow: inset 0 0 0 2px var(--red); }
.g-val[readonly]:focus { box-shadow: none; background: transparent; }
.g-pied { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; }
@media (max-width: 1100px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .grid-3, .types-doc, .g-outils { grid-template-columns: minmax(0, 1fr); }
  .field--large { grid-column: auto; }
  .seg--fill-tel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; }
  .seg--fill-tel > a { justify-content: center; padding: 0 6px; }
  .g-table thead th.g-coin, .g-op { min-width: 200px; }
  .g-op__actions { opacity: 1; }
}

/* ---------- Intervention du mécanicien ---------- */
.page--intervention { padding-bottom: 32px; }
.infos-interv .carte__infos { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* glisser pour confirmer */
.swipe {
  --avance: 0;
  position: relative; height: 68px; border-radius: 34px; background: var(--track); overflow: hidden;
  display: flex; align-items: center; justify-content: center; user-select: none; -webkit-user-select: none; touch-action: none;
}
.swipe::before {
  content: ""; position: absolute; inset: 0; background: var(--red); opacity: calc(var(--avance) * .9);
  transform-origin: left; transform: scaleX(var(--avance)); border-radius: inherit;
}
.swipe__texte { position: relative; font-weight: 700; font-size: 16px; color: var(--fg-2); letter-spacing: .01em; padding-left: 56px; }
.swipe__bouton {
  position: absolute; left: 4px; top: 4px; width: 60px; height: 60px; border-radius: 30px; border: 0; padding: 0;
  background: var(--red); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(208, 22, 30, .3);
  cursor: grab; touch-action: none; z-index: 1;
}
.swipe.is-glisse .swipe__bouton { cursor: grabbing; }
.swipe.is-valide { background: var(--red); }
.swipe.is-valide .swipe__texte { color: #fff; }
.swipe.is-valide .swipe__bouton { background: #fff; color: var(--red); }
.swipe.is-rappel .swipe__bouton { animation: rappel .5s ease; }
@keyframes rappel { 30% { transform: translateX(26px); } 60% { transform: translateX(8px); } }

/* check-list à remplir */
.checklist { display: flex; flex-direction: column; gap: 14px; }
.op-carte { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-1); overflow: hidden; }
.op-carte__tete { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 18px; cursor: pointer; list-style: none; }
.op-carte__titre { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.op-carte__tete::-webkit-details-marker { display: none; }
.op-carte__nom { font-weight: 700; font-size: 16.5px; line-height: 1.3; }
.op-carte__etat { font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--st6-bg); color: var(--st6-fg); white-space: nowrap; }
.op-carte__etat.is-anomalie { background: var(--red-soft); color: var(--red-text); }
.op-carte__etat.is-a-voir { background: var(--track); color: var(--muted); }
.op-carte__chev { color: var(--muted); transition: transform .2s ease; display: grid; }
.op-carte[open] .op-carte__chev { transform: rotate(180deg); }
.op-carte__corps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 4px 18px 18px; }
.ctl-commentaire { grid-column: 1 / -1; }

.ctl-ok { position: relative; display: flex; cursor: pointer; }
.ctl-ok input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ctl-ok__bouton {
  flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 84px; padding: 12px 14px;
  border-radius: var(--r-md); border: 2px solid var(--st6-dot); background: var(--st6-bg); transition: background .15s, border-color .15s;
}
.ctl-ok__nom { font-weight: 700; font-size: 15px; line-height: 1.25; color: var(--fg); }
.ctl-ok__oui, .ctl-ok__non { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; }
.ctl-ok__oui { color: var(--st6-fg); }
.ctl-ok__non { display: none; color: var(--red-text); }
.ctl-ok input:not(:checked) + .ctl-ok__bouton { border-color: var(--red); background: var(--red-soft); }
.ctl-ok input:not(:checked) + .ctl-ok__bouton .ctl-ok__oui { display: none; }
.ctl-ok input:not(:checked) + .ctl-ok__bouton .ctl-ok__non { display: inline-flex; }
.ctl-ok input:focus-visible + .ctl-ok__bouton { outline: 2px solid var(--navy); outline-offset: 2px; }

.ctl-val { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: var(--r-md); border: 2px solid var(--line-2); background: #fff; transition: border-color .15s, background .15s; }
.ctl-val__nom { font-weight: 700; font-size: 15px; }
.ctl-val .input { text-align: center; font-weight: 800; font-size: 20px; }
.ctl-val__attendu { font-size: 12.5px; color: var(--muted); text-align: center; }
.ctl-val.is-anomalie { border-color: var(--red); background: var(--red-soft); }
.ctl-val.is-anomalie .input { color: var(--red-text); background: #fff; }
.ctl-val.is-anomalie .ctl-val__attendu { color: var(--red-text); font-weight: 600; }

.barre-terminer {
  position: sticky; bottom: 0; z-index: 20; margin: 6px -4px 0; padding: 14px 4px calc(14px + env(safe-area-inset-bottom, 0px));
  background: rgba(243, 244, 247, .94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; align-items: center;
}
.barre-terminer__resume { grid-column: 1 / -1; text-align: center; font-weight: 700; color: var(--st6-fg); }
.barre-terminer__resume.is-anomalie { color: var(--red-text); }
.barre-terminer__annuler { height: 68px; border-radius: 34px; padding: 0 22px; }

/* navigation dans une longue check-list */
.op-nav {
  position: sticky; top: calc(var(--appbar-h) + env(safe-area-inset-top, 0px)); z-index: 30;
  margin: 0 -4px; padding: 10px 4px; display: flex; flex-direction: column; gap: 8px;
  background: rgba(243, 244, 247, .94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.op-nav__haut { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.op-nav__progres { font-weight: 700; font-size: 14px; color: var(--fg-2); }
.op-nav__suivante {
  display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 12px; border: 0; border-radius: 18px;
  background: var(--navy); color: #fff; font-weight: 700; font-size: 13.5px;
}
.op-nav__pastilles { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; scroll-snap-type: x proximity; }
.op-nav__pastilles::-webkit-scrollbar { display: none; }
.op-pastille {
  flex: none; min-width: 44px; height: 44px; padding: 0 10px; border-radius: 14px; border: 2px solid var(--line-2);
  background: #fff; color: var(--fg-2); font-weight: 800; font-size: 15px; scroll-snap-align: center;
  transition: background .15s, border-color .15s, color .15s;
}
.op-pastille.is-vue { background: var(--st6-bg); border-color: var(--st6-dot); color: var(--st6-fg); }
.op-pastille.is-anomalie { background: var(--red-soft); border-color: var(--red); color: var(--red-text); }
.op-pastille.is-courante { background: var(--navy); border-color: var(--navy); color: #fff; }
.op-carte { scroll-margin-top: calc(var(--appbar-h) + 128px); }
.op-suivant { grid-column: 1 / -1; justify-content: space-between; }
.fab-haut {
  position: fixed; right: 16px; bottom: calc(190px + env(safe-area-inset-bottom, 0px)); z-index: 25;
  width: 52px; height: 52px; border-radius: 18px; border: 0; background: var(--navy); color: #fff;
  display: grid; place-items: center; box-shadow: 0 8px 20px rgba(7, 20, 55, .25);
}
@media (min-width: 900px) { .fab-haut { right: max(16px, calc(50% - 470px)); } }

/* tâches du bon de travail */
.taches { display: flex; flex-direction: column; gap: 12px; }
.tache { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; padding: 12px; border-radius: var(--r-md); background: var(--sunken); }
.tache .ctl-ok { grid-column: 1 / -1; }
.tache--ajoutee { grid-template-columns: minmax(0, 1fr); }
.ctl-ok--tache .ctl-ok__bouton { min-height: 64px; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.tache--ajoutee .ctl-ok--tache .ctl-ok__bouton { justify-content: center; }
.tache .input { background: #fff; }
.tache:not(.tache--ajoutee) > .input { grid-column: 1 / -1; }
.tache__origine { display: inline-block; margin-left: 6px; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--red-soft); color: var(--red-text); vertical-align: middle; }

/* récapitulatif */
.recap-op { display: flex; flex-direction: column; gap: 10px; }
.recap-op__titre { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 800; }
.recap-op__liste { list-style: none; margin: 0; padding: 0; }
.recap-op__liste li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid #f0f1f4; font-size: 15px; }
.recap-op__valeur { font-weight: 700; color: var(--st6-fg); text-align: right; }
.recap-op__liste li.is-anomalie .recap-op__valeur { color: var(--red-text); }
.recap-op__liste small { font-weight: 500; color: var(--muted); }
.recap-op__comm { font-size: 14px; color: var(--fg-2); background: var(--sunken); border-radius: 12px; padding: 10px 12px; }

@media (max-width: 899px) {
  .op-carte__corps { padding: 2px 12px 14px; gap: 10px; }
  .op-carte__tete { padding: 0 14px; }
  .barre-terminer { margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 360px) {
  .op-carte__corps { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Utilisateurs ---------- */
.st-0 { background: #f1f2f5; color: var(--muted); }
.filtres__recherche--seule { background: #fff; box-shadow: var(--shadow-1); flex: none; max-width: 520px; }
.ios-row--compte { gap: 12px; min-height: 64px; }
.ios-row--compte strong { font-size: 15.5px; font-weight: 600; }
.toolbar--fin { justify-content: flex-end; }
.setting--plat { padding: 4px 0 0; }
.mdp-temp { border: 2px solid var(--navy); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.mdp-temp__titre { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; }
.mdp-temp__valeur { font: 800 28px/1.2 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .06em; background: var(--sunken); padding: 10px 16px; border-radius: 12px; cursor: copy; user-select: all; }

/* ---------- GED ---------- */
.ged-choix { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; background: #fff; border-radius: 18px; padding: 8px; box-shadow: var(--shadow-1); }
.ged-choix__champ { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; font-weight: 700; color: var(--muted); padding-left: 4px; }
.ged-choix__champ .input { width: 200px; height: 44px; font-weight: 600; }
.ged-choix__crit { height: 44px; }
.ged-machine { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.ged-machine__texte { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 8px; }
.ged-machine__texte strong { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.ged-machine__pills { display: flex; gap: 6px; flex-wrap: wrap; }
.ged-rubriques { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ged-rubrique { background: #fff; border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-1); }
.ged-rubrique__tete { display: flex; align-items: center; gap: 10px; padding: 14px 18px; }
.ged-rubrique__tete strong { flex: 1; font-size: 16px; }
.ged-rubrique__nb { font-size: 13px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, .7); }
.ged-rubrique__liste { display: flex; flex-direction: column; padding: 6px; }
.ged-sous { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 46px; padding: 0 14px; border-radius: 12px; font-size: 15px; font-weight: 500; }
.ged-sous:hover { background: var(--sunken); color: var(--fg); }
.ged-sous.is-actif { font-weight: 700; }
.ged-sous__nb { font-size: 13px; color: var(--muted); }
.ged-ajout .input { height: 40px; background: transparent; border: 1px dashed var(--line-2); font-size: 14px; margin-top: 4px; }
.ged-ajout .input:focus { background: #fff; border-style: solid; }
.ged-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ged-fichier { border-top: 1px solid #f0f1f4; padding: 12px 0; }
.ged-fichier:first-child { border-top: 0; }
.ged-fichier__ligne { display: flex; align-items: center; gap: 14px; }
.ged-fichier__texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ged-fichier__texte strong { overflow-wrap: anywhere; }
.ged-fichier__texte .muted { font-size: 13.5px; }
.ged-versions { margin: 8px 0 0 54px; }
.ged-versions summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--fg-2); padding: 4px 0; }
.ged-versions ul { list-style: none; margin: 6px 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ged-versions li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; background: var(--sunken); }
.ged-versions__texte { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; }
.ged-versions__texte .muted { font-size: 12.5px; }
.ged-note { font-size: 13px; }
.setting + .notice, .card > .notice { margin: 0 24px 18px; }
.ged-machine-rappel { font-weight: 600; font-size: 16px; }
.depot-choix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.depot-bouton {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 84px;
  border-radius: 18px; background: var(--sunken); font-weight: 700; font-size: 14px; cursor: pointer; text-align: center;
}
.depot-bouton--fort { border: 2px solid var(--red); background: #fff7f7; color: var(--red-text); }
.depot-bouton input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.depot-liste { font-size: 13.5px; overflow-wrap: anywhere; }
.choice--radio { position: relative; cursor: pointer; }
.choice--radio input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice--radio:has(input:checked) { border-color: var(--red); background: #fff7f7; }
.choice--radio input:checked + .choice__ring { border-color: var(--red); }
.choice--radio input:checked + .choice__ring::after { background: var(--red); }
.ios-row--corbeille { gap: 10px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
.ios-row--corbeille .btn { height: 38px; font-size: 14px; }
@media (min-width: 900px) {
  .sheet--depot { left: 50%; right: auto; bottom: auto; top: 50%; width: 560px; max-height: calc(100dvh - 80px); border-radius: 26px;
    padding: 20px 24px 24px; transform: translate(-50%, -46%) scale(.98); opacity: 0; transition: transform .25s var(--ease), opacity .2s ease; }
  .sheet--depot.is-open { transform: translate(-50%, -50%); opacity: 1; }
  .sheet--depot .sheet__grab { display: none; }
}
@media (max-width: 899px) {
  .ged-choix { width: 100%; }
  .ged-choix__champ { flex: 1 1 140px; }
  .ged-choix__champ .input { width: 100%; }
  .ged-choix__crit { flex: 1 1 100%; justify-content: center; }
  .ged-rubriques { grid-template-columns: minmax(0, 1fr); }
  .ged-machine { gap: 14px; }
  .ged-machine .plate { min-width: 72px; height: 60px; font-size: 24px; }
  .ged-versions { margin-left: 0; }
}

/* ---------- Droits de dépôt ---------- */
.droits { overflow: hidden; }
.droits__tete { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 24px 28px; border-bottom: 1px solid #f0f1f4; }
.droits__table th, .droits__table td { text-align: center; }
.droits__table th:first-child, .droits__table td:first-child { text-align: left; padding-left: 28px; }
.droits__table thead th { padding: 14px 12px; }
.droits__zone > * { background: #fbfbfc; }
.droits__ouvrir { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 6px 0; color: var(--fg); text-align: left; font-size: 15.5px; }
.droits__ouvrir svg { color: var(--muted); transition: transform .2s; }
.droits__ouvrir[aria-expanded="true"] svg { transform: rotate(90deg); }
.droits__ouvrir .muted { font-size: 13.5px; font-weight: 500; }
.droits__machine th { font-weight: 400; padding-left: 54px !important; }
.check-natif { width: 24px; height: 24px; accent-color: var(--red); cursor: pointer; margin: 0; }
.droits__pied { padding: 18px 28px; border-top: 1px solid #f0f1f4; }

/* ---------- Mon compte ---------- */
.page--etroite { max-width: 980px; }
.compte { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 24px; align-items: start; }
.compte__carte { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 36px 24px; }
.compte__carte .avatar--xl { width: 88px; height: 88px; border-radius: 28px; font-size: 30px; }
.compte__nom { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.compte__droite { display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 899px) {
  .compte { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .compte__carte { flex-direction: row; text-align: left; padding: 18px; gap: 16px; }
  .compte__carte .avatar--xl { width: 64px; height: 64px; border-radius: 20px; font-size: 22px; }
}

/* ---------- Connexion, mot de passe ---------- */
.auth {
  min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: calc(24px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px));
}
.auth__card {
  width: 100%; max-width: 420px; background: #fff; border-radius: 28px; padding: 32px;
  box-shadow: var(--shadow-2); display: flex; flex-direction: column; gap: 18px;
}
.auth__brand { display: flex; align-items: center; gap: 14px; }
.auth__societe { font-size: 17px; }
.auth__titre { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.auth__msg { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--sunken); color: var(--fg-2); font-size: 14px; font-weight: 500; line-height: 1.4; }
.auth__msg svg { flex: none; margin-top: 1px; }
.auth__msg--err { background: var(--red-soft); color: var(--red-text); font-weight: 600; }
.auth__aide { font-size: 13px; color: var(--muted); text-align: center; line-height: 1.45; }
.auth__sortie { display: flex; justify-content: center; }
.input--lg { height: 52px; font-size: 16px; border-radius: 14px; }
.field__aide { font-weight: 500; font-size: 13px; color: var(--muted); }
.mdp { position: relative; display: block; }
.mdp .input { padding-right: 54px; }
.mdp__voir {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px;
  border: 0; border-radius: 12px; background: transparent; color: var(--muted); display: grid; place-items: center;
}
.mdp__voir:hover { color: var(--fg); }
@media (max-width: 899px) {
  .auth { justify-content: flex-start; padding-top: calc(48px + env(safe-area-inset-top, 0px)); }
  .auth__card { padding: 24px 20px; border-radius: 24px; }
}

/* ---------- Message éphémère ---------- */
.toasts { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { background: var(--navy); color: #fff; padding: 12px 18px; border-radius: 14px; font-weight: 600; font-size: 14px; box-shadow: var(--shadow-pop); animation: toast-in .25s var(--ease); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Téléphone et petite tablette ---------- */
@media (min-width: 900px) { .only-phone { display: none !important; } }

@media (max-width: 1100px) {
  .appbar__in { padding: 0 24px; gap: 16px; }
  .searchbox { width: 44px; padding: 0; justify-content: center; }
  .searchbox input, .searchbox kbd { display: none; }
  .page { padding: 32px 24px 56px; }
}

@media (max-width: 899px) {
  :root { --appbar-h: 56px; }
  body { font-size: 16px; }
  .only-desk { display: none !important; }
  .appbar { background: rgba(255, 255, 255, .94); border-bottom-color: #e7e9ee; }
  .appbar__in { padding: 0 16px 0 20px; gap: 12px; }
  .appbar__nav, .appbar .avatar, .appbar .popover { display: none; }
  .brand__mark { height: 34px; padding: 0 9px; border-radius: 9px; font-size: 12.5px; }
  .brand__name { font-size: 14px; letter-spacing: .02em; text-transform: uppercase; }
  .brand__sub { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
  .brand { flex: 1; min-width: 0; }
  .searchbox { width: 44px; height: 44px; border-radius: 14px; background: #fff; border: 1px solid var(--line-2); }
  .menu-btn { display: block; }
  .page { padding: 20px 16px 48px; gap: 18px; }
  .page-head { align-items: flex-start; gap: 14px; }
  .eyebrow { font-size: 14px; }
  .title { font-size: 26px; letter-spacing: -.02em; }
  .page-head .toolbar .btn--primary { display: none; }
  .fab { display: grid; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile { padding: 14px 16px; border-radius: var(--r-md); }
  .tile__value { font-size: 26px; }
  .card { border-radius: 18px; }
  .card--pad { padding: 18px; }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .setting { padding: 16px; }
  .modal { place-items: end center; padding: 8px; }
  .modal__box { border-radius: 30px; padding: 20px 18px calc(24px + env(safe-area-inset-bottom, 0px)); max-width: none; }
}

/* Bons de travail (adm) */
.grid-3--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.duo { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px; }
.carte--lien { color: inherit; text-decoration: none; }
.bt-taches { margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 4px; font-size: 14.5px; color: var(--fg-2); }
.bt-taches li { overflow-wrap: anywhere; }
[data-ajout-bt] { align-self: flex-start; }
@media (max-width: 760px) { .grid-3--trois { grid-template-columns: minmax(0, 1fr); } }
.input--fige { display: flex; align-items: center; background: var(--track); color: var(--fg); font-weight: 700; }
.input--anomalie { border-left: 4px solid var(--red); }
.bt-taches--anomalies li strong { color: var(--fg); }
@media (max-width: 760px) {
  .seg--defile { display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .seg--defile::-webkit-scrollbar { display: none; }
}
.auth__msg a { color: var(--red-text); font-weight: 700; margin-left: 4px; white-space: nowrap; }
.depot-bouton.is-joint { border-color: var(--ok); background: var(--st6-bg); color: var(--st6-fg); }
.rapport-presta .depot-bouton { overflow-wrap: anywhere; padding: 12px; }

/* Journal d'activité */
.journal-ligne { gap: 14px; }
.journal-ligne__heure { flex: none; width: 46px; font-weight: 700; color: var(--fg-2); }
.journal-ligne__ip { flex: none; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.journal-ligne--alerte { color: var(--red-text); }
@media (max-width: 760px) { .journal-ligne__ip { display: none; } }

/* Dossiers GED par défaut */
.modele > summary { list-style: none; cursor: pointer; }
.modele > summary::-webkit-details-marker { display: none; }
.modele[open] .ios-row__chev svg { transform: rotate(90deg); }
.modele__ligne > svg { flex: none; color: var(--muted); }
.modele__corps { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; padding: 4px 18px 18px; background: var(--surface); }
.modele__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; flex: 1 1 420px; }
.modele__form .field { flex: 1 1 240px; }
.modele__ajout { gap: 12px; flex-wrap: wrap; }
.modele__ajout .input { flex: 1 1 220px; }
.check-ligne { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--fg-2); min-height: 44px; cursor: pointer; }
.modele__ajout .input { background: var(--sunken); text-align: left; }
.modele__petit { flex: 0 0 150px; }

/* Tâches numérotées, note du mécanicien, saisie enregistrée */
.tache__num { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; margin-right: 8px; border-radius: 8px; background: var(--track); color: var(--fg); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; vertical-align: 1px; }
.tache__note { display: block; margin-top: 4px; font-size: 13px; font-weight: 500; color: var(--muted); font-style: italic; }
.liste-num { list-style: none; padding-left: 0; }
.liste-num li { justify-content: flex-start; }
.barre-terminer__sauve { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); text-align: center; margin-top: -4px; }
.barre-terminer__sauve.is-erreur { color: var(--red-text); }
.bt-taches--num { list-style: decimal; padding-left: 22px; }
.bt-taches--num li::marker { font-weight: 800; color: var(--fg); }
.bt-ligne { display: flex; align-items: flex-start; gap: 4px; }
.bt-ligne > .tache__num { margin-top: 14px; }
.bt-ligne__champ { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.modele__moyen { flex: 0 0 220px; }

/* Temps : intervention (sans les pauses) et global, côte à côte même sur téléphone */
.chrono { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.chrono__bloc { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: var(--r-md); background: var(--sunken); min-width: 0; }
.chrono__val { font-size: 20px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.chrono__lib { font-size: 12.5px; font-weight: 500; color: var(--muted); overflow-wrap: anywhere; }
.chrono__bloc--fort { background: var(--st6-bg); }
.chrono__bloc--fort .chrono__val { color: var(--st6-fg); }
.chrono__detail { grid-column: 1 / -1; margin: -2px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; }
.chrono__detail:empty { display: none; }
.auth__msg--alerte { background: var(--st2-bg); color: var(--st2-fg); }

/* GED : toutes les machines en tuiles */
.ged-tete-liste { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ged-reprendre { gap: 6px; text-decoration: none; color: var(--fg); background: #fff; box-shadow: var(--shadow-1); }
.ged-tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ged-tuile { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--r-md); background: #fff; box-shadow: var(--shadow-1); color: inherit; text-decoration: none; min-width: 0; transition: box-shadow .2s, transform .2s; }
@media (hover: hover) { .ged-tuile:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); } }
.ged-tuile[hidden] { display: none; }
.ged-tuile__num { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.ged-tuile__num.is-crit { color: var(--red-text); }
.ged-tuile__num.is-crit::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--red); vertical-align: 4px; }
.ged-tuile__nom { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ged-tuile__nb { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--fg-2); }
.ged-choix__reinit { height: 44px; gap: 6px; }
.ged-choix__reinit[hidden] { display: none; }
@media (max-width: 760px) {
  .ged-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ged-choix__reinit { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 760px) {
  .ged-tuile { padding: 10px 12px; gap: 2px; }
  .ged-tuile__num { font-size: 18px; }
}

/* ---------- Planning (lot 6) ---------- */
.page--large { max-width: 1600px; }
.pl-tete { align-items: flex-end; }
.pl-titre { font-size: 30px; }
.pl-outils { gap: 10px; flex-wrap: wrap; }
.pl-nav { display: inline-flex; align-items: center; gap: 6px; }
.pl-nav__suiv svg { transform: rotate(180deg); }
.pl-filtres { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; background: #fff; border-radius: 18px; padding: 8px; box-shadow: var(--shadow-1); }
.pl-filtre { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; font-weight: 700; color: var(--muted); padding-left: 4px; }
.pl-filtre .input { width: 190px; height: 42px; font-weight: 600; }
.pl-filtre__case { height: 42px; }
.pl-filtre__reinit { height: 42px; gap: 6px; }
.pl-filtre__reinit[hidden] { display: none; }
.pl-filtres__liens { margin-left: auto; display: flex; gap: 8px; align-self: center; padding-right: 6px; }
.pl-filtres__liens .pill { text-decoration: none; }
/* couleur d'état réutilisée par cartes, puces et légende */
.pl-carte, .pl-puce { --pl-bg: #f1f2f5; --pl-fg: var(--muted); --pl-pt: #a6a7a8; }
.pl-carte.st-1, .pl-puce.st-1 { --pl-bg: var(--st1-bg); --pl-fg: var(--st1-fg); --pl-pt: var(--st1-dot); }
.pl-carte.st-2, .pl-puce.st-2 { --pl-bg: var(--st2-bg); --pl-fg: var(--st2-fg); --pl-pt: var(--st2-dot); }
.pl-carte.st-3, .pl-carte.st-4, .pl-carte.st-5, .pl-puce.st-3, .pl-puce.st-4, .pl-puce.st-5 { --pl-bg: var(--st3-bg); --pl-fg: var(--st3-fg); --pl-pt: var(--st3-dot); }
.pl-carte.st-6, .pl-puce.st-6 { --pl-bg: var(--st6-bg); --pl-fg: var(--st6-fg); --pl-pt: var(--st6-dot); }
.pl-carte.st-7, .pl-puce.st-7 { --pl-bg: var(--st7-bg); --pl-fg: var(--st7-fg); --pl-pt: var(--st7-dot); }
.pl-dot-0 { background: #a6a7a8; } .pl-dot-1 { background: var(--st1-dot); } .pl-dot-2 { background: var(--st2-dot); }
.pl-dot-3 { background: var(--st3-dot); } .pl-dot-6 { background: var(--st6-dot); } .pl-dot-7 { background: var(--st7-dot); }

/* Semaine : 7 colonnes de cartes */
.pl-semaine { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; align-items: start; }
.pl-jour { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 260px; outline: 2px dashed transparent; outline-offset: -2px; transition: outline-color .15s; }
.pl-jour.is-we { background: #fafbfc; }
.pl-jour.is-cible { outline-color: var(--red); }
.pl-jour__tete { display: flex; align-items: center; gap: 8px; padding: 2px 4px 6px; border-bottom: 1px solid var(--line); }
.pl-jour__tete > a:first-child { display: flex; align-items: baseline; gap: 6px; color: inherit; text-decoration: none; }
.pl-jour__nom { font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pl-jour__num { font-size: 22px; font-weight: 800; min-width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 50%; }
.pl-jour.is-auj .pl-jour__num { background: var(--red); color: #fff; }
.pl-jour.is-auj .pl-jour__nom { color: var(--red-text); }
.pl-jour__nb { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.pl-jour__plus { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; color: var(--muted); background: var(--sunken); opacity: 0; transition: opacity .15s; }
.pl-jour:hover .pl-jour__plus, .pl-jour__plus:focus-visible { opacity: 1; }
.pl-jour__liste { display: flex; flex-direction: column; gap: 6px; min-height: 40px; }
.pl-carte { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 6px; padding: 7px 9px 8px 11px; border-radius: 11px; background: var(--pl-bg); color: var(--pl-fg); text-decoration: none; border-left: 4px solid var(--pl-pt); }
.pl-carte[hidden] { display: none; }
.pl-carte[draggable="true"] { cursor: grab; }
.pl-carte.is-tenu { opacity: .45; }
.pl-carte__haut { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 6px; font-size: 11.5px; font-weight: 700; }
.pl-carte__type { opacity: .8; }
.pl-carte__m { font-size: 18px; font-weight: 800; color: var(--fg); letter-spacing: -.01em; }
.pl-carte__m.is-crit { color: var(--red-text); }
.pl-carte__ano { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--red); color: #fff; font-size: 12px; vertical-align: 3px; }
.pl-carte__qui { grid-column: 1 / -1; font-size: 12.5px; font-weight: 600; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-carte__etat { grid-column: 1 / -1; font-size: 11.5px; font-weight: 600; opacity: .85; }

/* Mois : grille de cases, une puce par intervention */
.pl-mois { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.pl-mois__nom { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 0 6px; }
.pl-case { background: #fff; border-radius: 14px; box-shadow: var(--shadow-1); padding: 6px; min-height: 118px; display: flex; flex-direction: column; gap: 4px; outline: 2px dashed transparent; outline-offset: -2px; }
.pl-case.is-hors { opacity: .45; }
.pl-case.is-cible { outline-color: var(--red); }
.pl-case__num { align-self: flex-start; font-size: 14px; font-weight: 800; color: inherit; text-decoration: none; min-width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; }
.pl-case.is-auj .pl-case__num { background: var(--red); color: #fff; }
.pl-case__liste { display: flex; flex-direction: column; gap: 3px; }
.pl-case__nb { display: none; }
.pl-puce { display: flex; align-items: center; gap: 5px; padding: 2px 6px; border-radius: 7px; background: var(--pl-bg); color: var(--pl-fg); font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap; overflow: hidden; }
.pl-puce[hidden] { display: none; }
.pl-puce::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pl-pt); flex: none; }
.pl-puce__h { font-weight: 600; opacity: .8; font-variant-numeric: tabular-nums; }
.pl-puce__m.is-crit { color: var(--red-text); }

/* Jour : une colonne par zone */
.pl-zones { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; align-items: start; }
.pl-zone { min-height: 0; }
.pl-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; }
.pl-legende > span { display: inline-flex; align-items: center; gap: 6px; }
.pl-supprimer { display: flex; justify-content: center; }

@media (max-width: 1100px) {
  .pl-semaine { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .pl-titre { font-size: 24px; }
  .pl-outils { width: 100%; justify-content: space-between; }
  .pl-filtre { flex: 1 1 140px; }
  .pl-filtre .input { width: 100%; }
  .pl-filtres__liens { margin-left: 0; width: 100%; justify-content: center; }
  /* Semaine sur téléphone : agenda vertical, les jours vides tiennent sur une ligne */
  .pl-semaine { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pl-jour { min-height: 0; }
  .pl-jour.is-vide:not(.is-auj) { padding: 6px 10px; }
  .pl-jour.is-vide:not(.is-auj) .pl-jour__tete { border-bottom: 0; padding-bottom: 2px; }
  .pl-jour.is-vide:not(.is-auj) .pl-jour__liste { display: none; }
  .pl-jour.is-vide:not(.is-auj) .pl-jour__num { font-size: 17px; height: 28px; min-width: 28px; }
  .pl-jour__plus { opacity: 1; }
  .pl-jour__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Mois sur téléphone : le nombre d'interventions par jour, toucher le jour pour le détail */
  .pl-mois { gap: 4px; }
  .pl-case { min-height: 52px; padding: 4px; border-radius: 10px; align-items: center; }
  .pl-case__liste { display: none; }
  .pl-case__nb { display: block; font-size: 11px; font-weight: 800; color: #fff; background: var(--st1-dot); border-radius: 9px; padding: 0 6px; }
  .pl-case__nb:empty { display: none; }
  .pl-mois__nom { font-size: 10.5px; padding: 0; text-align: center; }
}
.seg--fill > .seg__radio span { width: 100%; justify-content: center; }
.pl-filtres__bouton { align-self: flex-start; gap: 8px; }
@media (max-width: 899px) {
  .pl-filtres:not(.is-ouvert) { display: none; }
}
/* Week-end vide : colonne étroite (date et « + » seulement) ; normale dès qu'une intervention y est programmée */
.pl-case.is-we:not(.is-hors) { background: #fafbfc; }
@media (min-width: 1101px) {
  .pl-semaine--we-vide { grid-template-columns: repeat(5, minmax(0, 1fr)) 64px 64px; }
  .pl-semaine--sam-vide { grid-template-columns: repeat(5, minmax(0, 1fr)) 64px minmax(0, 1fr); }
  .pl-semaine--dim-vide { grid-template-columns: repeat(6, minmax(0, 1fr)) 64px; }
  .pl-jour.is-etroit { padding: 10px 4px; align-items: center; }
  .pl-jour.is-etroit .pl-jour__tete { flex-direction: column; gap: 6px; border-bottom: 0; padding: 0; }
  .pl-jour.is-etroit .pl-jour__tete > a:first-child { flex-direction: column; align-items: center; gap: 2px; }
  .pl-jour.is-etroit .pl-jour__nom { font-size: 11px; }
  .pl-jour.is-etroit .pl-jour__nb { display: none; }
  .pl-jour.is-etroit .pl-jour__plus { opacity: 1; }
  .pl-jour.is-etroit .pl-jour__liste { width: 100%; flex: 1; }
}

/* Planning : préventives et bons de travail ensemble */
.pl-barre { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: -16px; }
.pl-familles { align-self: flex-start; }
.pl-bande { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 12px; display: flex; flex-direction: column; gap: 10px; border-left: 4px solid var(--red); }
.pl-bande[hidden] { display: none; }
.pl-bande__tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.pl-bande__tout { margin-left: auto; font-weight: 700; color: var(--red-text); text-decoration: none; font-size: 13.5px; }
.pl-bande__liste { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.pl-bande__liste .pl-carte { flex: 0 0 210px; }
.pl-liste { display: flex; flex-direction: column; gap: 10px; }
.pl-ligne { min-height: 0; }
.pl-ligne__date { font-size: 15px; }
.pl-ligne .pl-jour__tete { gap: 10px; }
.pl-ligne__cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.pl-onglet__nb { font-size: 12px; font-weight: 700; color: var(--muted); }
.pl-nav--mois { gap: 12px; }
.fab-menu { position: fixed; right: 20px; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); z-index: 31; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.fab-menu[hidden] { display: none; }
.fab-menu__lien { background: #fff; color: var(--fg); font-weight: 700; font-size: 15px; padding: 12px 18px; border-radius: 16px; box-shadow: var(--shadow-2); text-decoration: none; }
.fab svg { transition: transform .2s; }
.fab.is-ouvert svg { transform: rotate(45deg); }
@media (max-width: 760px) {
  .pl-barre { margin-bottom: -8px; }
  .pl-familles { width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .pl-familles .seg__radio span { width: 100%; justify-content: center; padding: 0 6px; }
  .pl-ligne__cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) { .page-head .toolbar a[data-creer] { display: none; } }
@media (min-width: 900px) {
  .pl-ligne { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 12px; align-items: start; }
  .pl-ligne .pl-jour__tete { flex-direction: column; align-items: flex-start; border-bottom: 0; gap: 6px; padding: 6px 4px; }
  .pl-ligne .pl-jour__nb { margin-left: 0; }
}

/* GED : zones en accordéon */
.ged-zones { display: flex; flex-direction: column; gap: 10px; }
.ged-zone { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-1); scroll-margin-top: 90px; }
.ged-zone[hidden] { display: none; }
.ged-zone__tete { display: flex; align-items: center; gap: 14px; padding: 14px 18px; cursor: pointer; list-style: none; min-height: 64px; }
.ged-zone__tete::-webkit-details-marker { display: none; }
.ged-zone__icone { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--sunken); color: var(--fg-2); flex: none; }
.ged-zone__texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ged-zone__texte strong { font-size: 17px; }
.ged-zone__texte .muted { font-size: 13.5px; }
.ged-zone__crit { display: inline-flex; align-items: center; gap: 4px; color: var(--red-text); font-weight: 600; }
.ged-zone__chev { color: var(--muted); transition: transform .2s; flex: none; }
.ged-zone[open] .ged-zone__chev { transform: rotate(180deg); }
.ged-zone[open] .ged-zone__tete { border-bottom: 1px solid var(--line); }
.ged-zone[open] .ged-zone__icone { background: var(--red-soft); color: var(--red-text); }
.ged-zone .ged-tuiles { padding: 14px; }
.ged-zone .ged-tuile { box-shadow: none; background: var(--sunken); }
@media (hover: hover) { .ged-zone .ged-tuile:hover { background: #fff; box-shadow: var(--shadow-2); } }
.seg--double .seg__radio span { height: auto; min-height: 50px; padding: 6px 10px; flex-direction: column; gap: 1px; line-height: 1.2; }
.seg--double .seg__radio strong { font-size: 15px; }
.seg--double .seg__radio small { font-size: 12px; font-weight: 500; color: var(--muted); }
@media (max-width: 760px) {
  .ged-zone .ged-tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px; }
  .ged-zone .ged-tuile { padding: 9px 10px; }
  .ged-zone .ged-tuile__num { font-size: 17px; }
  .ged-zone .ged-tuile__nom { font-size: 11.5px; }
  .ged-zone__tete { padding: 12px 14px; gap: 12px; }
}
.seg--double .seg__radio span { text-align: center; align-items: center; justify-content: center; }
/* « + Programmer » : menu Préventive / Bon de travail */
.pl-creer { position: relative; }
.popover--creer { width: 300px; }
.popover--creer a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.popover--creer a strong { display: block; font-size: 15px; color: var(--fg); }
.popover--creer a small { display: block; font-size: 12.5px; color: var(--muted); font-weight: 500; }
.popover--creer__ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--red-soft); color: var(--red-text); flex: none; }
/* Bouton flottant : pas de bordure du navigateur (version bouton), ombre douce et nette */
.fab { border: 0; padding: 0; -webkit-appearance: none; appearance: none; cursor: pointer;
  box-shadow: 0 2px 6px rgba(208, 22, 30, .25), 0 10px 24px rgba(208, 22, 30, .28); -webkit-tap-highlight-color: transparent; }
.fab:active { transform: scale(.96); }
.fab:focus-visible { outline: 3px solid rgba(208, 22, 30, .35); outline-offset: 3px; }
.fab-menu__lien { display: flex; align-items: center; gap: 12px; min-width: 250px; padding: 10px 14px; border-radius: 18px;
  box-shadow: 0 1px 2px rgba(7, 20, 55, .06), 0 10px 28px rgba(7, 20, 55, .14); }
.fab-menu__lien strong { display: block; font-size: 15px; color: var(--fg); }
.fab-menu__lien small { display: block; font-size: 12.5px; color: var(--muted); font-weight: 500; }
.fab-menu__lien { width: min(300px, calc(100vw - 40px)); min-width: 0; }
/* Zones : jours préférés en pastilles */
.zone-jours { flex: 1 1 100%; }
.zone-jours__puces { display: flex; flex-wrap: wrap; gap: 6px; }
.puce-jour { position: relative; }
.puce-jour input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.puce-jour span { display: inline-grid; place-items: center; min-width: 52px; height: 40px; padding: 0 10px; border-radius: 12px; background: var(--sunken); color: var(--fg-2); font-weight: 700; font-size: 14px; transition: background .15s, color .15s; }
.puce-jour input:checked + span { background: var(--navy); color: #fff; }
.puce-jour input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
[data-zone-resume].is-erreur { color: var(--red-text); font-weight: 600; }
.zone-semaine { color: var(--fg); font-weight: 700; }
@media (max-width: 760px) { .zone-jours__puces { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; } .puce-jour span { min-width: 0; width: 100%; padding: 0; font-size: 12.5px; } }
.modele__form .zone-jours { flex: 1 1 100%; order: 3; }
.modele__form > .btn { order: 4; }
.zone-manuelle { color: var(--muted); font-weight: 700; }
/* Légende des règles de la grille */
.regles-aide { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--fg-2); }
.regles-aide li { display: inline-flex; align-items: center; gap: 6px; }
.regles-aide code { font-family: inherit; font-weight: 800; background: var(--sunken); color: var(--fg); padding: 2px 8px; border-radius: 7px; }
.ctl-val__nom, .ctl-ok__nom { overflow-wrap: anywhere; }
/* Tournée */
.op-pastille--machine { width: auto; min-width: 52px; padding: 0 10px; font-size: 14px; }
.op-pastille--machine.is-crit:not(.is-anomalie):not(.is-vue) { color: var(--red-text); }
.tournee-op { font-size: 14px; font-weight: 800; color: var(--fg-2); margin: 6px 0 -2px; grid-column: 1 / -1; }
.titre-compte { font-size: .5em; font-weight: 700; letter-spacing: 0; }
.recap-op--anomalie { border-left: 4px solid var(--red); }
.recap-op__titre .plate--xs { margin-right: 8px; }
/* Groupes de machines (tournées) */
.zone-groupes { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 6px; border-top: 1px solid var(--line); }
.zone-groupes__titre { font-size: 13px; font-weight: 700; color: var(--fg-2); margin-right: 4px; }
.zone-groupes .pill { text-decoration: none; }
.zone-groupes .pill.is-inactif { opacity: .55; }
.pill--ajout { background: var(--red-soft); color: var(--red-text); font-weight: 700; }
.groupe-machines { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.puce-machine { position: relative; }
.puce-machine[hidden] { display: none; }
.puce-machine input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.puce-machine span { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 12px; background: var(--sunken); border: 2px solid transparent; transition: background .15s, border-color .15s; }
.puce-machine strong { font-size: 16px; }
.puce-machine strong.is-crit { color: var(--red-text); }
.puce-machine small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.puce-machine input:checked + span { background: #fff; border-color: var(--navy); box-shadow: var(--shadow-1); }
.puce-machine input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
@media (max-width: 760px) { .groupe-machines { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pl-carte__sous { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.pl-carte__ref { grid-column: 1 / -1; justify-self: start; margin-top: 3px; padding: 1px 7px; border-radius: 6px; background: rgba(255, 255, 255, .7); color: var(--fg); font-size: 11.5px; font-weight: 800; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.ref-piece { display: inline-block; padding: 2px 9px; border-radius: 7px; background: var(--sunken); font-weight: 800; letter-spacing: .03em; font-variant-numeric: tabular-nums; }
/* Bon de travail FOR206 */
.bt-consignes { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--st2-bg); color: var(--st2-fg); font-size: 14px; }
.bt-consignes > svg { flex: none; margin-top: 1px; }
.bt-consignes > span { display: flex; flex-direction: column; gap: 4px; }
.texte-long { white-space: pre-line; overflow-wrap: anywhere; }
.bt-intervenants { display: flex; flex-wrap: wrap; gap: 6px; }
.puce-personne { position: relative; }
.puce-personne input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.puce-personne span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 20px; background: var(--sunken); font-size: 14px; font-weight: 600; color: var(--fg-2); }
.puce-personne input:checked + span { background: var(--navy); color: #fff; }
.puce-personne input:disabled + span { opacity: .9; }
.puce-personne input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.bt-pdr { display: grid; grid-template-columns: minmax(0, 1fr) 90px; gap: 8px; }
.bt-ajout-intervenant > summary { list-style: none; align-self: flex-start; display: inline-flex; gap: 6px; cursor: pointer; }
.bt-ajout-intervenant > summary::-webkit-details-marker { display: none; }
.bt-ajout-intervenant[open] > summary { margin-bottom: 8px; }
.bt-ajout-intervenant .puce-personne span { min-height: 36px; font-size: 13.5px; }
/* Cycles de préventive */
.btn--sm { height: 34px; padding: 0 12px; border-radius: 10px; font-size: 13.5px; }
.lien-doux { color: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(7, 20, 55, .25); text-underline-offset: 3px; }
.lien-doux:hover { text-decoration-color: currentColor; }
.cycle-periode { max-width: 220px; }
.cycle-periode[hidden] { display: none; }
.cycle-outils { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.puce-machine.is-prise span { opacity: .5; }
.puce-machine.is-prise input { cursor: not-allowed; }
.cycle-generer { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.apercu { display: flex; flex-direction: column; gap: 12px; }
.apercu__total { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 15px; }
.apercu__jours { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-height: 420px; overflow-y: auto; border-radius: 14px; background: var(--sunken); }
.apercu__jour { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; padding: 9px 14px; border-bottom: 1px solid rgba(7, 20, 55, .06); }
.apercu__jour:last-child { border-bottom: 0; }
.apercu__date { font-size: 13.5px; font-weight: 700; color: var(--fg-2); padding-top: 3px; }
.apercu__machines { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.apercu__zone { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-right: 2px; }
.apercu__zone:not(:first-child) { margin-left: 8px; }
.apercu__machine { display: inline-block; padding: 3px 9px; border-radius: 8px; background: #fff; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: 0 1px 2px rgba(7, 20, 55, .06); }
.cycle-zone .card__head { align-items: baseline; }
.cycle-doc { display: flex; flex-direction: column; gap: 8px; }
.cycle-doc + .cycle-doc { margin-top: 6px; }
.cycle-doc__tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 15px; }
.ios-row.is-inactif .who { opacity: .5; }
.cycle-ajout strong { color: var(--red-text); }
.cycle-ajout .ios-row__icon { color: var(--red-text); }
.cycle-sans { border-radius: 14px; background: var(--st2-bg); color: var(--st2-fg); }
.cycle-sans > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; font-size: 14px; font-weight: 700; cursor: pointer; list-style: none; }
.cycle-sans > summary::-webkit-details-marker { display: none; }
.cycle-sans__liste { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0 14px 14px; }
.ferie-ajout { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; }
@media (max-width: 760px) {
  .ferie-ajout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ferie-ajout input[name="libelle"] { grid-column: 1 / -1; grid-row: 1; }
  .apercu__jour { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
[data-groupe-jours][hidden] { display: none; }
.apercu__machine--tournee { background: var(--navy); color: #fff; }
.arret-ajout { grid-template-columns: 170px 170px minmax(0, 1fr) auto; align-items: end; }
@media (max-width: 760px) {
  .arret-ajout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .arret-ajout .field:nth-of-type(3) { grid-column: 1 / -1; grid-row: auto; }
  .arret-ajout button { grid-column: 1 / -1; }
}
/* ---------- Programmation préventive : une zone, trois onglets ---------- */
.prog-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.prog { display: flex; gap: 22px; align-items: flex-start; }
.prog-zones { flex: 0 0 280px; background: var(--surface); border-radius: var(--r-lg); padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.prog-zones__titre { padding: 10px 12px 6px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.prog-zones__aide { padding: 10px 12px 4px; font-size: 12px; color: var(--muted); line-height: 1.45; }
.prog-zone-btn { display: flex; flex-direction: column; gap: 7px; width: 100%; text-align: left; padding: 12px 14px; border: 0; border-radius: 14px; background: transparent; color: inherit; font: inherit; cursor: pointer; transition: background .15s; }
.prog-zone-btn:hover { background: var(--sunken); }
.prog-zone-btn[aria-pressed="true"] { background: var(--sunken); box-shadow: inset 3px 0 0 var(--red); }
.prog-zone-btn__haut { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.prog-zone-btn__haut strong { font-size: 15px; }
.prog-zone-btn__n { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.prog-zone-btn__sous { font-size: 12.5px; color: var(--muted); }
.prog-barre { display: block; height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.prog-barre > span { display: block; width: 0; height: 100%; border-radius: 3px; background: var(--ok); }
.prog-detail { flex: 1; min-width: 0; }
.prog-zone { display: flex; flex-direction: column; gap: 16px; }
.prog-zone[hidden], .prog-panneau[hidden], .prog-doc[hidden], .prog-ligne[hidden], .prog-vide[hidden], .prog-niveaux[hidden], .prog-tiroir[hidden] { display: none; }
.prog-entete { padding: 22px 24px; display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: center; }
.prog-entete__nom { display: flex; flex-direction: column; gap: 4px; }
.prog-entete__nom h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
.prog-entete__nom .muted { font-size: 14px; }
.prog-entete__nom a { font-weight: 600; }
.prog-chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; flex: 1 1 440px; max-width: 540px; }
.prog-chiffre { display: flex; flex-direction: column; padding: 10px 14px; border-radius: 14px; background: var(--sunken); font-size: 12.5px; font-weight: 600; color: var(--fg-2); }
.prog-chiffre strong { font-size: 22px; color: var(--fg); font-variant-numeric: tabular-nums; }
.prog-chiffre--ok { background: var(--st6-bg); color: var(--st6-fg); }
.prog-chiffre--ok strong { color: var(--st6-fg); }
.prog-chiffre--sans { background: var(--st2-bg); color: var(--st2-fg); }
.prog-chiffre--sans strong { color: var(--st2-fg); }
.prog-barre-outils { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; }
.seg > [aria-selected="true"] { background: var(--surface); color: var(--fg); box-shadow: 0 1px 3px rgba(7, 20, 55, .12); }
.prog-onglets > button { font-weight: 700; }
.prog-compte { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #d9dce4; color: var(--fg-2); font-size: 12px; font-weight: 700; }
[aria-selected="true"] > .prog-compte, [aria-pressed="true"] > .prog-compte { background: var(--navy); color: #fff; }
.prog-panneau { display: flex; flex-direction: column; gap: 12px; }
.niv { display: inline-flex; align-items: center; align-self: center; padding: 2px 8px; border-radius: 7px; font-size: 12px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.niv--1 { background: var(--st1-bg); color: var(--st1-fg); }
.niv--2 { background: var(--st3-bg); color: var(--st3-fg); }
.niv--3 { background: var(--red-soft); color: var(--red-text); }
.niv--ext { background: var(--param-bg); color: var(--param-fg); }
.prog-doc { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.prog-doc__tete { display: flex; justify-content: space-between; gap: 6px 12px; align-items: baseline; flex-wrap: wrap; }
.prog-doc__nom { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.prog-doc__nom a { font-size: 17px; font-weight: 800; color: var(--fg); text-decoration: none; }
.prog-doc__nom a:hover { text-decoration: underline; }
.prog-doc__nom .muted, .prog-doc__note { font-size: 13px; }
.prog-cycles { display: flex; flex-wrap: wrap; gap: 8px; }
.prog-cycle { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 3px; min-height: 58px; padding: 8px 16px; border-radius: 14px; background: var(--sunken); border: 2px solid transparent; color: var(--fg); text-decoration: none; box-sizing: border-box; transition: border-color .15s, box-shadow .15s; }
.prog-cycle:hover { border-color: var(--line-2); }
.prog-cycle.is-ouvert { background: #fff; border-color: var(--navy); box-shadow: 0 6px 18px rgba(7, 20, 55, .10); }
.prog-cycle.is-inactif { opacity: .6; }
.prog-cycle__haut { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.prog-point { width: 8px; height: 8px; border-radius: 4px; background: var(--ok); flex: none; }
.prog-cycle.is-inactif .prog-point { background: var(--faint); }
.prog-cycle__sous { font-size: 12.5px; color: var(--fg-2); }
.prog-cycle--ajout { flex-direction: row; align-items: center; gap: 6px; background: transparent; border: 2px dashed var(--line-2); color: var(--red-text); font-weight: 700; font-size: 14px; }
.prog-vide { padding: 32px 24px; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.prog-tournees { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.prog-tournee { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; color: inherit; text-decoration: none; transition: box-shadow .15s; }
.prog-tournee:hover { box-shadow: var(--shadow-1); }
.prog-tournee.is-inactif { opacity: .6; }
.prog-tournee__tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.prog-tournee__tete > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.prog-tournee__tete strong { font-size: 17px; }
.prog-tournee__tete .muted, .prog-tournee__doc { font-size: 13px; }
.prog-etat--ok { background: var(--st6-bg); color: var(--st6-fg); }
.prog-jours { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.prog-jours > span { display: grid; place-items: center; height: 30px; border-radius: 9px; background: var(--sunken); color: var(--faint); font-size: 12px; font-weight: 700; }
.prog-jours > span.is-on { background: var(--navy); color: #fff; }
.prog-tournee__machines { display: flex; flex-wrap: wrap; gap: 6px; }
.prog-tournee__machines > span { padding: 5px 10px; border-radius: 9px; background: #eef0f4; font-weight: 700; font-size: 13px; }
.prog-tournee__machines > span.is-susp { background: #f1f2f5; color: var(--faint); text-decoration: line-through; }
.prog-tournee--ajout { min-height: 180px; border: 2px dashed var(--line-2); border-radius: var(--r-lg); align-items: center; justify-content: center; text-align: center; gap: 6px; color: var(--red-text); }
.prog-tournee--ajout strong { font-size: 15px; }
.prog-machines { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.prog-etats { align-self: flex-start; }
.prog-table { border: 1px solid var(--line); border-radius: 14px; max-height: 520px; overflow-y: auto; }
.prog-ligne { display: grid; grid-template-columns: 88px minmax(0, 1.1fr) minmax(0, 2fr) minmax(0, .9fr) 140px; gap: 12px; align-items: center; padding: 9px 16px; border-top: 1px solid var(--line); font-size: 14px; color: inherit; text-decoration: none; }
a.prog-ligne:hover { background: var(--sunken); }
.prog-ligne--tete { position: sticky; top: 0; z-index: 1; background: var(--sunken); border-top: 0; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.prog-ligne__nom { font-size: 15px; font-variant-numeric: tabular-nums; }
.prog-ligne__nom.is-crit { color: var(--red-text); }
.prog-ligne__des, .prog-ligne__tr { color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prog-ligne__prev { display: flex; flex-wrap: wrap; gap: 5px; }
.prog-puce { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 3px; border-radius: 8px; background: #eef0f4; font-size: 12.5px; font-weight: 700; }
.prog-puce .niv { padding: 1px 6px; font-size: 11px; border-radius: 6px; }
.prog-etat { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.prog-etat--couv { background: var(--st6-bg); color: var(--st6-fg); }
.prog-etat--sans { background: var(--st2-bg); color: var(--st2-fg); }
.prog-etat--tournee { background: var(--st1-bg); color: var(--st1-fg); }
.prog-etat--susp { background: var(--param-bg); color: var(--param-fg); }
.prog-table__vide { padding: 16px; margin: 0; }
/* Tiroir d'un cycle (ordinateur) */
.prog-tiroir { position: fixed; inset: 0; z-index: 80; display: flex; justify-content: flex-end; }
.prog-tiroir__fond { position: absolute; inset: 0; border: 0; background: rgba(7, 20, 55, .28); cursor: default; }
.prog-tiroir__panneau { position: relative; width: min(540px, 100%); height: 100%; background: var(--bg); box-shadow: -12px 0 40px rgba(7, 20, 55, .16); display: flex; flex-direction: column; animation: prog-tiroir .22s ease-out; }
@keyframes prog-tiroir { from { transform: translateX(28px); opacity: .5; } }
.prog-tiroir__tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 20px 22px 14px; background: var(--surface); border-bottom: 1px solid var(--line); }
.prog-tiroir__tete > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.prog-tiroir__tete .muted { font-size: 13px; }
.prog-tiroir__tete strong { font-size: 21px; font-weight: 800; }
.prog-tiroir__x { width: 40px; height: 40px; padding: 0; justify-content: center; flex: none; }
.prog-tiroir__corps { flex: 1; overflow-y: auto; padding: 16px 18px 24px; display: flex; flex-direction: column; gap: 14px; }
.prog-tiroir__corps .fiche { gap: 14px; }
.prog-tiroir__corps .groupe-machines { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
body.tiroir-ouvert { overflow: hidden; }
@media (max-width: 1100px) { .prog-tournees { grid-template-columns: minmax(0, 1fr); } }
/* Téléphone : zones en pastilles qui glissent, chiffres sur une ligne, machines en tuiles de couleur */
@media (max-width: 899px) {
  .prog-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
  .prog-actions .btn { height: 44px; padding: 0 10px; font-size: 13.5px; justify-content: center; }
  .prog { flex-direction: column; align-items: stretch; gap: 12px; }
  .prog-zones { flex: none; flex-direction: row; overflow-x: auto; background: transparent; padding: 0 16px 2px; margin: 0 -16px; gap: 6px; scrollbar-width: none; }
  .prog-zones::-webkit-scrollbar { display: none; }
  .prog-zones__titre, .prog-zones__aide, .prog-zone-btn .prog-barre, .prog-zone-btn__sous { display: none; }
  .prog-zone-btn { flex: none; width: auto; flex-direction: row; align-items: center; height: 40px; padding: 0 12px 0 14px; border-radius: 12px; background: var(--surface); }
  .prog-zone-btn[aria-pressed="true"] { background: var(--navy); color: #fff; box-shadow: none; }
  .prog-zone-btn[aria-pressed="true"] .prog-zone-btn__n { color: rgba(255, 255, 255, .72); }
  .prog-zone-btn__haut strong { font-size: 14px; }
  .prog-zone { gap: 12px; }
  .prog-entete { padding: 14px 16px; gap: 12px; }
  .prog-entete__nom h2 { font-size: 20px; }
  .prog-entete__nom .muted { font-size: 12.5px; }
  .prog-chiffres { flex: 1 1 100%; gap: 6px; }
  .prog-chiffre { padding: 8px 9px; border-radius: 12px; font-size: 11px; }
  .prog-chiffre strong { font-size: 18px; }
  .prog-barre-outils { flex-direction: column; align-items: stretch; gap: 8px; }
  .prog-onglets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .prog-onglets > button { justify-content: center; padding: 0 6px; gap: 6px; height: 38px; }
  .prog-niveaux, .prog-etats { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; align-self: stretch; }
  .prog-niveaux > button, .prog-etats > button { flex: 1 0 auto; justify-content: center; }
  .prog-doc { padding: 14px 16px; gap: 10px; }
  .prog-doc__nom a { font-size: 16px; }
  .prog-cycles { flex-direction: column; gap: 6px; }
  .prog-cycle { width: 100%; min-height: 52px; }
  .prog-tournee { padding: 14px 16px; gap: 10px; }
  .prog-tournee--ajout { min-height: 60px; flex-direction: row; }
  .prog-tournee--ajout .muted { display: none; }
  .prog-machines { padding: 12px; gap: 10px; }
  .prog-legende { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; font-weight: 600; color: var(--fg-2); }
  .prog-legende > span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 3px; vertical-align: -1px; }
  .prog-legende .is-couv::before { background: var(--ok); }
  .prog-legende .is-sans::before { background: var(--st2-dot); }
  .prog-legende .is-tournee::before { background: var(--st1-dot); }
  .prog-legende .is-susp::before { background: #c9ccd6; }
  .prog-table { border: 0; border-radius: 0; max-height: none; overflow: visible; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .prog-ligne { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; min-height: 50px; padding: 6px 9px; border: 0; border-radius: 11px; box-sizing: border-box; }
  .prog-ligne.is-couv { background: var(--st6-bg); color: var(--st6-fg); }
  .prog-ligne.is-sans { background: var(--st2-bg); color: var(--st2-fg); }
  .prog-ligne.is-tournee { background: var(--st1-bg); color: var(--st1-fg); }
  .prog-ligne.is-susp { background: #f1f2f5; color: #8a90a6; }
  .prog-ligne__nom { font-size: 14px; }
  .prog-ligne__nom.is-crit { color: inherit; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
  .prog-ligne__court { font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .prog-table__vide { grid-column: 1 / -1; }
}
.prog-tiroir__corps .cycle-rythme { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.prog-tiroir__corps .cycle-rythme span { justify-content: center; width: 100%; }
@media (max-width: 899px) {
  .prog-etats > button { padding: 0 9px; font-size: 13px; }
  .prog-etats .prog-compte { display: none; }
}
.prog-tiroir__corps .cycle-rythme { width: 100%; box-sizing: border-box; }
/* Sans préventive : rouge clair (fond rouge clair, texte rouge foncé lisible) */
:root { --sans-bg: #fee2e2; --sans-fg: #b91c1c; --sans-dot: #ef4444; }
.prog-chiffre--sans, .prog-etat--sans { background: var(--sans-bg); color: var(--sans-fg); }
.prog-chiffre--sans strong { color: var(--sans-fg); }
@media (max-width: 899px) {
  .prog-ligne.is-sans { background: var(--sans-bg); color: var(--sans-fg); }
  .prog-legende .is-sans::before { background: var(--sans-dot); }
}
/* Couverte : vert frais, assorti au rouge clair de « sans préventive » */
:root { --couv-bg: #dcfce7; --couv-fg: #15803d; --couv-dot: #22c55e; }
.prog-chiffre--ok, .prog-etat--couv, .prog-etat--ok { background: var(--couv-bg); color: var(--couv-fg); }
.prog-chiffre--ok strong { color: var(--couv-fg); }
.prog-barre > span, .prog-point { background: var(--couv-dot); }
@media (max-width: 899px) {
  .prog-ligne.is-couv { background: var(--couv-bg); color: var(--couv-fg); }
  .prog-legende .is-couv::before { background: var(--couv-dot); }
}
/* ---------- Planning : double intervention (pictogramme jaune ambre) ---------- */
.pl-carte { position: relative; }
.pl-carte__droite { display: inline-flex; align-items: center; gap: 5px; }
.pl-double { display: inline-flex; align-items: center; gap: 2px; height: 18px; padding: 0 5px 0 4px; border-radius: 6px; background: #facc15; color: #422006; font-size: 11px; font-weight: 800; line-height: 1; cursor: pointer; }
.pl-double--seul { padding: 0 4px; cursor: inherit; }
.pl-puce__double { flex: none; margin-left: auto; display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 5px; background: #facc15; color: #422006; font-size: 10.5px; font-weight: 800; }
.pl-double-compte { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #facc15; color: #422006; font-size: 11.5px; font-weight: 800; }
.pl-double-compte[hidden] { display: none; }
.pl-filtre__double { gap: 7px; }
[data-ev].is-terne { opacity: .28; transition: opacity .2s; }
.pl-bulle { position: absolute; top: 28px; right: 6px; z-index: 20; width: 240px; padding: 12px 14px; border-radius: 14px; background: var(--navy); color: #fff; box-shadow: 0 12px 30px rgba(7, 20, 55, .28); display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 500; line-height: 1.4; text-align: left; white-space: normal; cursor: default; }
.pl-bulle strong { font-size: 13.5px; }
.pl-feuille { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; justify-content: flex-end; }
.pl-feuille__fond { position: absolute; inset: 0; border: 0; background: rgba(7, 20, 55, .32); }
.pl-feuille__panneau { position: relative; background: var(--surface); border-radius: 24px 24px 0 0; padding: 10px 18px calc(22px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 12px; box-shadow: 0 -10px 30px rgba(7, 20, 55, .16); animation: pl-feuille .22s ease-out; }
@keyframes pl-feuille { from { transform: translateY(30px); opacity: .6; } }
.pl-feuille__poignee { align-self: center; width: 40px; height: 5px; border-radius: 3px; background: #d9dce4; }
.pl-feuille__titre { font-size: 21px; font-weight: 800; }
.pl-feuille__sous { margin-top: -6px; font-size: 13.5px; color: var(--fg-2); line-height: 1.45; }
.pl-feuille__ligne { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--sunken); }
.pl-feuille__texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pl-feuille__texte strong { font-size: 14.5px; }
.pl-feuille__texte span { font-size: 12.5px; color: var(--fg-2); }
.pl-feuille__lien { flex: none; height: 38px; padding: 0 14px; font-size: 13.5px; }
body.feuille-ouverte { overflow: hidden; }
@media (max-width: 899px) {
  .pl-double { height: 24px; padding: 0 7px 0 6px; border-radius: 7px; font-size: 12px; }
  .pl-double--seul { height: 20px; padding: 0 4px; }
}
.pl-double-raccourci { gap: 6px; height: 44px; padding: 0 14px; background: #facc15; color: #422006; font-weight: 800; border: 2px solid transparent; }
.pl-double-raccourci[aria-pressed="true"] { border-color: var(--navy); }
.pl-double-raccourci[hidden] { display: none; }
/* Planning : affichage Calendrier / Liste (la période reste la même) */
.pl-modes > a { gap: 6px; }
@media (max-width: 899px) { .pl-modes__lib { display: none; } .pl-modes > a { padding: 0 11px; } }
/* Planning : en-tête compact — « Tout / Préventives / BT » dans les filtres ; sur téléphone,
   ‹ Aujourd'hui › et Calendrier | Liste sur une ligne, Jour / Semaine / Mois en dessous sur toute la largeur */
@media (min-width: 900px) { .pl-barre { display: none; } }
.pl-filtres .pl-familles { align-self: flex-end; }
@media (max-width: 899px) {
  .pl-tete { gap: 12px; }
  .pl-outils { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; width: 100%; align-items: center; }
  .pl-outils > .pl-nav { grid-column: 1; grid-row: 1; }
  .pl-outils > .pl-modes { grid-column: 2; grid-row: 1; }
  .pl-outils > .pl-periodes { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pl-outils > .pl-periodes > a { justify-content: center; }
  .pl-outils > .pl-creer { display: none; }
  .pl-filtres .pl-familles { width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); order: -1; }
  .pl-filtres .pl-familles .seg__radio span { width: 100%; justify-content: center; padding: 0 6px; }
}
.pl-familles > button { justify-content: center; }
/* « + Programmer / Préventive / Bon de travail » : même largeur quel que soit le texte (celle du plus long) */
.pl-creer__libelles { display: inline-grid; }
.pl-creer__libelles > span { grid-area: 1 / 1; text-align: center; }
.pl-creer__fantome { visibility: hidden; }
/* ---------- Recherche du haut : machines au fil de la frappe ---------- */
.recherche-panneau { position: absolute; top: calc(100% + 8px); right: 48px; width: 380px; max-height: 420px; overflow-y: auto; z-index: 60; background: #fff; border-radius: 16px; box-shadow: var(--shadow-2); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.recherche-panneau[hidden], .recherche-fond[hidden] { display: none; }
.recherche-ligne { display: flex; align-items: center; gap: 6px; border-radius: 12px; }
.recherche-ligne.is-actif { background: var(--sunken); }
.recherche-ligne__lien { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 9px 12px; color: var(--fg); text-decoration: none; }
.recherche-ligne__lien strong { font-size: 15px; }
.recherche-ligne__lien strong.is-crit { color: var(--red-text); }
.recherche-ligne__lien span { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recherche-ligne__ged { flex: none; display: inline-grid; place-items: center; height: 32px; margin-right: 8px; padding: 0 10px; border-radius: 9px; background: #fff; border: 1px solid var(--line-2); color: var(--fg-2); font-size: 12.5px; font-weight: 700; text-decoration: none; }
.recherche-ligne__ged:hover { border-color: var(--fg-2); color: var(--fg); }
.recherche-vide { margin: 0; padding: 14px; color: var(--muted); font-size: 14px; }
.recherche-fond { position: fixed; inset: 0; z-index: 94; border: 0; background: rgba(7, 20, 55, .32); }
@media (max-width: 1100px) {
  .searchbox { cursor: pointer; }
  .searchbox.is-ouverte { position: fixed; top: 10px; left: 12px; right: 12px; width: auto; height: 52px; z-index: 96; padding: 0 14px; justify-content: flex-start; gap: 10px; background: #fff; border-radius: 16px; box-shadow: var(--shadow-2); cursor: auto; }
  .searchbox.is-ouverte input { display: block; font-size: 16px; }
  .searchbox.is-ouverte ~ .recherche-panneau { position: fixed; top: 70px; left: 12px; right: 12px; width: auto; z-index: 96; max-height: calc(100vh - 90px); }
}
/* Recherche ouverte en grand : la barre du haut passe au-dessus du fond sombre, sans flou (sinon elle enferme la recherche) */
body.recherche-ouverte .appbar { z-index: 97; -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; }
/* Planning : recherche par référence pièce */
.pl-ref { position: relative; display: block; }
.pl-ref svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.pl-ref .input { padding-left: 36px; width: 170px; text-transform: uppercase; }
.pl-ref .input::placeholder { text-transform: none; }
@media (max-width: 899px) { .pl-filtre__ref { flex: 1 1 100%; } .pl-ref .input { width: 100%; } }
/* Filtres du planning sur une ligne (écran large) : listes un peu plus étroites pour laisser la place à « Réf. pièce » */
@media (min-width: 900px) {
  .pl-filtre .input { width: 160px; }
  .pl-ref .input { width: 150px; }
}