@font-face { font-family: "Libre Franklin"; src: url("fonts/libre-franklin-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Libre Franklin"; src: url("fonts/libre-franklin-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Libre Franklin"; src: url("fonts/libre-franklin-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --pl-tech: 184px;
  --fond: oklch(97.4% .005 90);
  --nav: oklch(95.2% .007 90);
  --surface: oklch(99.3% .003 90);
  --surface-2: oklch(96.6% .006 90);
  --survol: oklch(95.6% .008 90);
  --filet: oklch(90.6% .008 90);
  --filet-fort: oklch(84.5% .01 90);
  --encre: oklch(25% .015 245);
  --encre-2: oklch(42% .015 245);
  --encre-3: oklch(52% .013 245);
  --encre-4: oklch(64% .01 245);
  --accent: oklch(45% .085 228);
  --accent-fort: oklch(39% .085 228);
  --accent-doux: oklch(94.6% .022 228);
  --accent-filet: oklch(82% .05 228);
  --sur-accent: oklch(98.5% .006 90);

  --s-aplacer: oklch(48% .11 62);   --s-aplacer-fond: oklch(95.2% .045 80);  --s-aplacer-filet: oklch(83% .08 75);
  --s-planifiee: oklch(42% .02 245); --s-planifiee-fond: oklch(95.4% .007 245); --s-planifiee-filet: oklch(84% .015 245);
  --s-encours: oklch(43% .09 228);  --s-encours-fond: oklch(94.4% .028 228); --s-encours-filet: oklch(80% .06 228);
  --s-terminee: oklch(43% .09 152); --s-terminee-fond: oklch(95% .035 152); --s-terminee-filet: oklch(82% .07 152);
  --s-cloturee: oklch(47% .012 245); --s-cloturee-fond: oklch(96.4% .004 90); --s-cloturee-filet: oklch(88% .008 90);
  --s-annulee: oklch(55% .01 245);
  --urgent: oklch(50% .17 27);
  --urgent-fond: oklch(95.6% .03 27);

  --r: 6px;
  --r-grand: 9px;
  --sortie: cubic-bezier(.16, 1, .3, 1);
  --t: 160ms;
  --nav-l: 236px;
  --police: "Libre Franklin", ui-sans-serif, system-ui, sans-serif;
  
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--encre);
  font: 400 14px/1.45 var(--police); font-feature-settings: "kern";
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
svg { display: block; }
.num, td.num, .tab { font-variant-numeric: tabular-nums; }
.mono { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--encre-2); letter-spacing: .005em; }
kbd {
  font: 500 11px/1 var(--police); color: var(--encre-3);
  border: 1px solid var(--filet-fort); border-bottom-width: 2px; border-radius: 4px;
  padding: 2px 5px; background: var(--surface); min-width: 18px; text-align: center; display: inline-block;
}
.evitement { position: absolute; left: -999px; top: 8px; background: var(--encre); color: var(--sur-accent); padding: 8px 12px; border-radius: var(--r); z-index: 50; }
.evitement:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.cache-visuel { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Charpente ---------- */
.app { display: grid; grid-template-columns: var(--nav-l) minmax(0, 1fr); min-height: 100vh; background: linear-gradient(to right, var(--nav) calc(var(--nav-l) - 1px), var(--filet) calc(var(--nav-l) - 1px) var(--nav-l), transparent var(--nav-l)); }
.nav {
  position: sticky; top: 0; height: 100vh; background: var(--nav); border-right: 1px solid var(--filet);
  display: flex; flex-direction: column; padding: 16px 12px; gap: 16px;
}
.marque { display: flex; align-items: center; gap: 10px; padding: 4px 6px 0; }
.marque-logo { width: 28px; height: 28px; flex: none; }
.marque-logo rect { fill: var(--accent); }
.marque-logo path { fill: none; stroke: var(--sur-accent); stroke-width: 3; stroke-linecap: round; }
.marque-nom { font-weight: 600; font-size: 14.5px; letter-spacing: -.01em; }
.marque-agence { font-size: 12px; color: var(--encre-3); }
.recherche-ouvrir {
  display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px 0 10px;
  background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r); color: var(--encre-3);
  text-align: left; transition: border-color var(--t) var(--sortie);
}
.recherche-ouvrir:hover { border-color: var(--filet-fort); }
.recherche-ouvrir svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.recherche-ouvrir span { flex: 1; }
.nav-liens { display: flex; flex-direction: column; gap: 2px; }
.nav-liens a {
  display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: var(--r);
  text-decoration: none; color: var(--encre-2); font-weight: 500;
  transition: background var(--t) var(--sortie), color var(--t) var(--sortie);
}
.nav-liens a svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; flex: none; }
.nav-liens a:hover { background: var(--survol); color: var(--encre); }
.nav-liens a[aria-current="page"] { background: var(--surface); color: var(--encre); box-shadow: 0 0 0 1px var(--filet); }
.nav-liens a[aria-current="page"] svg { color: var(--accent); }
.nav-liens span:nth-child(2) { flex: 1; }
.compte:empty { display: none; }
.compte { font-size: 11.5px; font-weight: 600; color: var(--s-aplacer); background: var(--s-aplacer-fond); border-radius: 10px; padding: 1px 7px; font-variant-numeric: tabular-nums; }
.nav-bas { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.lien-discret { background: none; border: 0; padding: 4px 10px; color: var(--encre-3); font-size: 12.5px; display: flex; justify-content: space-between; align-items: center; border-radius: var(--r); }
.lien-discret:hover { color: var(--encre); }
.utilisatrice { display: flex; align-items: center; gap: 10px; padding: 10px 8px 2px; border-top: 1px solid var(--filet); }
.avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--surface); border: 1px solid var(--filet-fort);
  display: inline-grid; place-items: center; font-size: 11px; font-weight: 600; color: var(--encre-2); flex: none; letter-spacing: .01em;
}
.avatar.petit { width: 22px; height: 22px; font-size: 9.5px; }
.u-nom { font-weight: 500; font-size: 13px; }
.u-role { font-size: 12px; color: var(--encre-3); }
.onglets-bas { display: none; }

main { min-width: 0; outline: none; }
.page { max-width: 1320px; padding: 28px 40px 64px; }
.page.entree { animation: entree 220ms var(--sortie); }
@keyframes entree { from { opacity: .001; transform: translateY(4px); } }

/* ---------- En-têtes ---------- */
.entete { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.entete h1 { margin: 0; font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -.015em; }
.entete .sous { margin: 3px 0 0; color: var(--encre-3); font-size: 13.5px; }
.entete-actions { display: flex; gap: 8px; align-items: center; flex: none; }
.fil { display: flex; gap: 6px; align-items: center; color: var(--encre-3); font-size: 13px; margin-bottom: 10px; }
.fil a { text-decoration: none; }
.fil a:hover { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }
.resume { color: var(--encre-2); margin: -8px 0 24px; font-size: 14px; }
.resume strong { color: var(--encre); font-weight: 600; }

h2.titre { font-size: 14.5px; line-height: 20px; font-weight: 600; margin: 0; letter-spacing: -.005em; display: flex; gap: 8px; align-items: baseline; }
h2.titre .n { color: var(--encre-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.bloc-entete { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; min-height: 30px; }
.bloc-entete .aide { color: var(--encre-3); font-size: 12.5px; }

/* ---------- Boutons et champs ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 32px; padding: 0 12px;
  border-radius: var(--r); border: 1px solid var(--filet-fort); background: var(--surface); color: var(--encre);
  font-weight: 500; font-size: 13.5px; white-space: nowrap; text-decoration: none;
  transition: background var(--t) var(--sortie), border-color var(--t) var(--sortie), color var(--t) var(--sortie);
}
.btn:hover { background: var(--survol); border-color: var(--encre-4); }
.btn:active { transform: translateY(.5px); }
.btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.btn.principal { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }
.btn.principal:hover { background: var(--accent-fort); border-color: var(--accent-fort); }
.btn.fantome { border-color: transparent; background: transparent; color: var(--encre-2); }
.btn.fantome:hover { background: var(--survol); color: var(--encre); }
.btn.danger { color: var(--urgent); }
.btn.danger:hover { background: var(--urgent-fond); border-color: oklch(80% .08 27); }
.btn.petit { height: 28px; padding: 0 10px; font-size: 13px; }
.btn[disabled] { opacity: .55; cursor: default; pointer-events: none; }
.btn kbd { margin-left: 2px; border-color: color-mix(in oklch, currentColor 30%, transparent); background: transparent; color: inherit; opacity: .8; }

.champ { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.champ > span { font-size: 12px; font-weight: 500; color: var(--encre-2); }
input[type="text"], input[type="search"], input[type="date"], select, textarea {
  height: 32px; border: 1px solid var(--filet-fort); border-radius: var(--r); background: var(--surface);
  padding: 0 10px; min-width: 0; transition: border-color var(--t) var(--sortie), box-shadow var(--t) var(--sortie);
}
select { padding-right: 28px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%236b7280' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 12px; }
textarea { height: auto; padding: 8px 10px; resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-doux); }
input::placeholder, textarea::placeholder { color: var(--encre-4); }

/* ---------- Pastilles ---------- */
.statut {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px 0 7px; border-radius: 11px;
  font-size: 12px; font-weight: 500; white-space: nowrap; border: 1px solid transparent;
  transition: background 240ms var(--sortie), color 240ms var(--sortie), border-color 240ms var(--sortie);
}
.statut::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; box-sizing: border-box; }
.statut.a_planifier { background: var(--s-aplacer-fond); color: var(--s-aplacer); }
.statut.a_planifier::before { border: 1.5px dashed currentColor; }
.statut.planifiee { background: var(--s-planifiee-fond); color: var(--s-planifiee); border-color: var(--s-planifiee-filet); }
.statut.planifiee::before { border: 1.5px solid currentColor; }
.statut.en_cours { background: var(--s-encours-fond); color: var(--s-encours); }
.statut.en_cours::before { background: conic-gradient(currentColor 0 50%, transparent 0); border: 1.5px solid currentColor; }
.statut.terminee { background: var(--s-terminee-fond); color: var(--s-terminee); }
.statut.terminee::before { background: currentColor; }
.statut.cloturee { background: transparent; color: var(--s-cloturee); border-color: var(--s-cloturee-filet); }
.statut.cloturee::before { background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 4.2 3.3 6 6.6 2' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/8px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 4.2 3.3 6 6.6 2' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/8px no-repeat; border-radius: 0; }
.statut.annulee { background: transparent; color: var(--s-annulee); border-color: var(--filet); text-decoration: line-through; text-decoration-color: color-mix(in oklch, currentColor 50%, transparent); }
.statut.annulee::before { border: 1.5px solid currentColor; background: linear-gradient(135deg, transparent 42%, currentColor 42% 58%, transparent 58%); }
.statut.change { animation: pulse 700ms var(--sortie); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklch, currentColor 35%, transparent); } 100% { box-shadow: 0 0 0 7px transparent; } }

.prio { font-size: 12.5px; color: var(--encre-3); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.prio.urgente { color: var(--urgent); font-weight: 600; }
.prio.urgente::before { content: "!"; display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 3px; background: var(--urgent); color: var(--sur-accent); font-size: 10.5px; font-weight: 600; }
.prio.contrat::before { content: ""; width: 10px; height: 10px; border: 1.5px solid currentColor; border-radius: 2px; box-sizing: border-box; }

/* ---------- Aujourd'hui ---------- */
.jour-grille { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px 32px; align-items: start; }
.panneau { background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-grand); }
.liste-travail { list-style: none; margin: 0; padding: 0; }
.liste-travail > li { border-top: 1px solid var(--filet); }
.liste-travail > li:first-child { border-top: 0; }
.ligne-travail { display: grid; grid-template-columns: 18px 92px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 12px 10px 8px; min-height: 52px; }
.poignee { width: 18px; height: 28px; display: grid; place-items: center; color: var(--encre-4); cursor: grab; border-radius: 4px; touch-action: none; }
.poignee:hover { background: var(--survol); color: var(--encre-2); }
.poignee svg { width: 10px; height: 16px; fill: currentColor; }
.lt-texte { min-width: 0; }
.lt-titre { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-titre a { text-decoration: none; }
.lt-titre a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--filet-fort); }
.lt-meta { color: var(--encre-3); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-quand { color: var(--encre-3); font-size: 12.5px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ligne-travail.place { opacity: .45; }

.proposition { margin: 0 12px 12px 38px; padding: 12px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--filet); display: grid; gap: 12px; }
.proposition p { margin: 0; color: var(--encre-2); }
.proposition p strong { color: var(--encre); font-weight: 600; }
.proposition-champs { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 110px auto; gap: 12px; align-items: end; }
.proposition .conflit { color: var(--urgent); font-size: 12.5px; }

.vide { padding: 28px 20px; text-align: center; color: var(--encre-3); }
.vide strong { display: block; color: var(--encre); font-weight: 600; margin-bottom: 4px; }
.vide .btn { margin-top: 12px; }

.court-liste { list-style: none; margin: 0; padding: 0; }
.court-liste li { border-top: 1px solid var(--filet); }
.court-liste li:first-child { border-top: 0; }
.court-liste a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 14px; text-decoration: none; transition: background var(--t) var(--sortie); }
.court-liste a:hover { background: var(--survol); }
.court-liste .cl-titre { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.court-liste .cl-meta { grid-column: 1 / -1; color: var(--encre-3); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.court-liste .cl-heure { color: var(--encre-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.col-droite { display: flex; flex-direction: column; gap: 28px; }
.jours { display: inline-flex; background: var(--surface-2); border: 1px solid var(--filet); border-radius: var(--r); padding: 2px; gap: 2px; }
.jours button { border: 0; background: none; height: 26px; padding: 0 10px; border-radius: 4px; color: var(--encre-2); font-weight: 500; font-size: 13px; display: inline-flex; gap: 6px; align-items: baseline; white-space: nowrap; }
.jours button:hover:not([disabled]) { color: var(--encre); }
.jours button .n { font-size: 12px; color: var(--encre-3); font-variant-numeric: tabular-nums; }
.jours button[aria-selected="true"] { background: var(--surface); color: var(--encre); box-shadow: 0 0 0 1px var(--filet-fort); }
.jours button[aria-selected="true"] .n { color: var(--encre-3); }
.jours button[disabled] { color: var(--encre-4); cursor: default; }

/* Planning */
.planning-section { grid-column: 1 / -1; }
.planning { position: relative; overflow: hidden; }
.pl-heures, .pl-ligne { display: grid; grid-template-columns: var(--pl-tech) minmax(0, 1fr); }
.pl-heures { border-bottom: 1px solid var(--filet); height: 30px; }
.pl-heures .graduations { position: relative; }
.pl-heures .graduations span { position: absolute; top: 8px; transform: translateX(-50%); font-size: 11.5px; color: var(--encre-3); font-variant-numeric: tabular-nums; }
.pl-ligne { border-top: 1px solid var(--filet); min-height: 62px; }
.pl-ligne:nth-child(2) { border-top: 0; }
.pl-tech { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-right: 1px solid var(--filet); min-width: 0; }
.pl-tech .n { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-tech .m { font-size: 12px; color: var(--encre-3); font-variant-numeric: tabular-nums; }
.pl-piste { position: relative; background-image: linear-gradient(to right, var(--filet) 1px, transparent 1px); background-size: calc(100% / 11) 100%; background-position: -1px 0; }
.pl-piste.survol-depot { background-color: var(--accent-doux); }
.creneau {
  position: absolute; top: 7px; bottom: 7px; border-radius: 6px; padding: 5px 8px; overflow: hidden;
  text-decoration: none; border: 1px solid; display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0;
  transition: box-shadow var(--t) var(--sortie), background 240ms var(--sortie), border-color 240ms var(--sortie), opacity var(--t);
}
.creneau:hover { box-shadow: 0 1px 0 var(--filet-fort), 0 2px 8px -2px oklch(30% .02 245 / .18); z-index: 2; }
.creneau .c-h { font-size: 11.5px; font-variant-numeric: tabular-nums; opacity: .85; white-space: nowrap; }
.creneau .c-t { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.creneau .c-o { display: none; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .9; }
.creneau.planifiee { background: var(--surface); border-color: var(--s-planifiee-filet); color: var(--encre); cursor: grab; }
.creneau.planifiee .c-h, .creneau.planifiee .c-o { color: var(--encre-2); }
.creneau.en_cours { background: var(--s-encours-fond); border-color: var(--s-encours-filet); color: var(--s-encours); }
.creneau.terminee { background: var(--s-terminee-fond); border-color: var(--s-terminee-filet); color: var(--s-terminee); }
.creneau.cloturee { background: var(--s-cloturee-fond); border-color: var(--s-cloturee-filet); color: var(--s-cloturee); }
.creneau.urgente .c-t::before { content: "!"; display: inline-grid; place-items: center; width: 13px; height: 13px; border-radius: 3px; background: var(--urgent); color: var(--sur-accent); font-size: 10px; font-weight: 600; margin-right: 5px; vertical-align: 1px; }
.creneau.fantome-depot { background: var(--surface); border: 1.5px dashed var(--accent); color: var(--accent); pointer-events: none; z-index: 3; }
.creneau.fantome-depot.conflit { border-color: var(--urgent); color: var(--urgent); background: var(--urgent-fond); }
.creneau.en-glisse { opacity: .35; }
.creneau.arrive { animation: arrive 520ms var(--sortie); }
@keyframes arrive { 0% { box-shadow: 0 0 0 3px var(--accent-filet); } 100% { box-shadow: 0 0 0 0 transparent; } }
.maintenant { position: absolute; top: 30px; bottom: 0; width: 0; border-left: 1.5px solid var(--urgent); z-index: 1; pointer-events: none; }
.creneau { z-index: 2; }
.maintenant-h { position: absolute; top: 5px; transform: translateX(-50%); z-index: 5; pointer-events: none; background: var(--urgent); color: var(--sur-accent); font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.planning-legende { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; color: var(--encre-3); font-size: 12.5px; margin-top: 10px; }
.planning-legende span:last-child { margin-left: auto; }
.planning-legende .statut { height: 20px; }
.porte-glisse {
  position: fixed; z-index: 60; pointer-events: none; background: var(--surface); border: 1px solid var(--accent-filet); border-radius: 6px;
  padding: 6px 10px; font-size: 12.5px; font-weight: 500; box-shadow: 0 8px 24px -8px oklch(30% .03 245 / .35); max-width: 280px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.porte-glisse small { display: block; font-weight: 400; color: var(--encre-3); font-variant-numeric: tabular-nums; }
.pl-mobile { display: none; }

/* ---------- Liste des interventions ---------- */
.onglets-statut { display: flex; gap: 2px; border-bottom: 1px solid var(--filet); margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; }
.onglets-statut button {
  border: 0; background: none; padding: 8px 10px 10px; color: var(--encre-3); font-weight: 500; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px; display: flex; gap: 6px; align-items: baseline;
  transition: color var(--t) var(--sortie), border-color var(--t) var(--sortie);
}
.onglets-statut button:hover { color: var(--encre); }
.onglets-statut button[aria-selected="true"] { color: var(--encre); border-bottom-color: var(--encre); }
.onglets-statut .n { font-size: 12px; color: var(--encre-3); font-variant-numeric: tabular-nums; font-weight: 500; }
.barre-filtres { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.recherche-liste { position: relative; flex: 0 1 320px; }
.recherche-liste svg { position: absolute; left: 10px; top: 9px; width: 14px; height: 14px; fill: none; stroke: var(--encre-3); stroke-width: 1.6; pointer-events: none; }
.recherche-liste input { width: 100%; padding-left: 30px; padding-right: 32px; }
.recherche-liste kbd { position: absolute; right: 7px; top: 7px; }
.barre-filtres select { flex: 0 0 auto; }
.barre-filtres .compteur { margin-left: auto; color: var(--encre-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.tableau-cadre { background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-grand); overflow: hidden; }
table.tableau { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tableau th {
  text-align: left; font-size: 12px; font-weight: 500; color: var(--encre-3); background: var(--surface-2); height: 34px; padding: 0 12px;
  border-bottom: 1px solid var(--filet); white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
.tableau th button { background: none; border: 0; padding: 0; color: inherit; font-weight: inherit; display: inline-flex; align-items: center; gap: 4px; height: 100%; }
.tableau th button:hover { color: var(--encre); }
.tableau th .fleche { width: 10px; height: 10px; opacity: 0; transition: opacity var(--t), transform var(--t) var(--sortie); fill: none; stroke: currentColor; stroke-width: 1.6; }
.tableau th button:hover .fleche { opacity: .5; }
.tableau th[aria-sort] { color: var(--encre); }
.tableau th[aria-sort] .fleche { opacity: 1; }
.tableau th[aria-sort="descending"] .fleche { transform: rotate(180deg); }
.tableau td { padding: 0 12px; height: 46px; border-top: 1px solid var(--filet); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tableau tbody tr:first-child td { border-top: 0; }
.tableau tbody tr { cursor: pointer; transition: background 100ms; }
.tableau tbody tr:hover, .tableau tbody tr.actif { background: var(--survol); }
.tableau tbody tr.actif { background: var(--accent-doux); }
.tableau .t-client { font-weight: 500; }
.tableau .t-ville { color: var(--encre-3); font-size: 12.5px; }
.tableau td.deux { line-height: 1.25; }
.tableau .t-date { font-variant-numeric: tabular-nums; }
.tableau .t-date small { color: var(--encre-3); font-size: 12.5px; }
.tableau .t-tech { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tableau .t-tech span:last-child { overflow: hidden; text-overflow: ellipsis; }
.tableau .t-sans { color: var(--encre-3); }
.tableau .r { text-align: right; }
.pied-liste { display: flex; justify-content: center; padding: 12px; border-top: 1px solid var(--filet); }
.liste-mobile { display: none; }

.nouvelle { margin-bottom: 16px; padding: 16px; display: grid; gap: 14px; }
.nouvelle-grille { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) minmax(0, .8fr) minmax(0, .8fr); gap: 12px; }
.nouvelle-actions { display: flex; justify-content: flex-end; gap: 8px; }
.nouvelle .erreur { color: var(--urgent); font-size: 12.5px; }
.nouvelle .champ.invalide input, .nouvelle .champ.invalide select { border-color: var(--urgent); }

/* ---------- Fiche ---------- */
.fiche-entete { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; margin-bottom: 18px; }
.fiche-entete h1 { margin: 0 0 6px; font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -.015em; }
.fiche-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; color: var(--encre-3); font-size: 13px; }
.fiche-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--encre-4); }
.etapes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 24px; border: 1px solid var(--filet); border-radius: var(--r-grand); background: var(--surface); overflow: hidden; }
.etape { padding: 10px 14px; border-left: 1px solid var(--filet); position: relative; min-width: 0; }
.etape:first-child { border-left: 0; }
.etape .e-n { font-size: 12.5px; font-weight: 500; color: var(--encre-3); display: flex; align-items: center; gap: 7px; }
.etape .e-n::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--filet-fort); box-sizing: border-box; flex: none; }
.etape .e-d { font-size: 12px; color: var(--encre-3); margin-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 17px; }
.etape.faite .e-n { color: var(--encre-2); }
.etape.faite .e-n::before { background: var(--encre-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2 6 9.2 10 5' fill='none' stroke='%23fbfaf6' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px; border-color: var(--encre-2); }
.etape.faite .e-d { color: var(--encre-3); }
.etape.courante { background: var(--accent-doux); }
.etape.courante .e-n { color: var(--accent-fort); font-weight: 600; }
.etape.courante .e-n::before { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 3px, transparent 3.5px); }
.etape.courante .e-d { color: var(--accent-fort); }
.etapes.annulee .etape { opacity: .5; }

.fiche-grille { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
.section { margin-bottom: 28px; }
.section > h2 { font-size: 14px; font-weight: 600; margin: 0 0 10px; }
.texte-demande { margin: 0; font-size: 14.5px; line-height: 1.6; max-width: 68ch; }
.attributs { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 0; margin: 0; border-top: 1px solid var(--filet); }
.attributs dt, .attributs dd { padding: 9px 0; border-bottom: 1px solid var(--filet); margin: 0; }
.attributs dt { color: var(--encre-3); font-size: 13px; }
.attributs dd { min-width: 0; }
.rapport { background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-grand); }
.rapport-texte { padding: 14px 16px 6px; margin: 0; line-height: 1.6; max-width: 70ch; }
.rapport-signe { padding: 0 16px 14px; color: var(--encre-3); font-size: 12.5px; }
table.lignes { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.lignes th { text-align: left; font-weight: 500; font-size: 12px; color: var(--encre-3); padding: 8px 16px; border-top: 1px solid var(--filet); background: var(--surface-2); }
.lignes td { padding: 9px 16px; border-top: 1px solid var(--filet); font-variant-numeric: tabular-nums; }
.lignes .r { text-align: right; }
.lignes tfoot td { font-weight: 600; }
.attente-rapport { padding: 16px; color: var(--encre-3); border: 1px dashed var(--filet-fort); border-radius: var(--r-grand); }

.carte-laterale { background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-grand); margin-bottom: 16px; }
.carte-laterale > h2 { font-size: 13px; font-weight: 600; margin: 0; padding: 12px 14px 0; display: flex; justify-content: space-between; align-items: center; }
.carte-laterale .contenu { padding: 10px 14px 14px; }
.affect { display: flex; align-items: center; gap: 10px; }
.affect .n { font-weight: 500; }
.affect .q { color: var(--encre-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ligne-info { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 13px; }
.ligne-info span:first-child { color: var(--encre-3); }
.ligne-info span:last-child { text-align: right; }
.tel { font-variant-numeric: tabular-nums; text-decoration: none; }
.tel:hover { text-decoration: underline; text-underline-offset: 3px; }

.historique { list-style: none; margin: 0; padding: 0 14px 6px; }
.historique li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; position: relative; padding-bottom: 14px; }
.historique li::before { content: ""; position: absolute; left: 6px; top: 16px; bottom: 0; width: 1px; background: var(--filet); }
.historique li:last-child::before { display: none; }
.historique .pt { width: 13px; height: 13px; margin-top: 3px; border-radius: 50%; border: 1.5px solid var(--filet-fort); background: var(--surface); box-sizing: border-box; }
.historique li.note .pt { width: 9px; height: 9px; margin: 5px 2px 0; border: 0; background: var(--encre-4); }
.historique li.recent .pt { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 3px var(--accent-doux); }
.historique li.recent { animation: entree 300ms var(--sortie); }
.h-quoi { font-size: 13px; font-weight: 500; }
.h-detail { font-size: 13px; color: var(--encre-2); margin-top: 1px; }
.historique li.note .h-detail { background: var(--surface-2); border: 1px solid var(--filet); padding: 7px 9px; border-radius: 6px; margin-top: 4px; line-height: 1.5; }
.h-qui { font-size: 12px; color: var(--encre-3); margin-top: 2px; font-variant-numeric: tabular-nums; }
.note-saisie { padding: 0 14px 14px; display: grid; gap: 8px; }
.note-saisie textarea { min-height: 64px; }
.note-saisie .actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.note-saisie .actions span { color: var(--encre-3); font-size: 12px; }

.menu-statut { position: relative; }
.menu {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 230px; z-index: 20; background: var(--surface); border: 1px solid var(--filet-fort);
  border-radius: var(--r-grand); padding: 4px; box-shadow: 0 12px 32px -12px oklch(30% .03 245 / .3); animation: menu 140ms var(--sortie); transform-origin: top right;
}
@keyframes menu { from { opacity: 0; transform: scale(.97) translateY(-2px); } }
.menu button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; border: 0; background: none; padding: 7px 8px; border-radius: 5px; text-align: left; }
.menu button:hover, .menu button:focus-visible { background: var(--survol); outline: none; }
.menu button[aria-checked="true"] { color: var(--encre-3); }
.menu hr { border: 0; border-top: 1px solid var(--filet); margin: 4px; }
.menu .danger { color: var(--urgent); }
.confirmation { margin-bottom: 20px; padding: 14px 16px; border: 1px solid oklch(84% .06 27); background: var(--urgent-fond); border-radius: var(--r-grand); display: grid; gap: 10px; }
.confirmation p { margin: 0; }
.confirmation .ligne { display: flex; gap: 12px; align-items: center; }
.confirmation select { flex: 1; max-width: 420px; background-color: var(--surface); }

.barre-action-mobile { display: none; }

/* ---------- Statistiques ---------- */
.segment { display: inline-flex; background: var(--surface-2); border: 1px solid var(--filet); border-radius: var(--r); padding: 2px; }
.segment button { border: 0; background: none; height: 26px; padding: 0 10px; border-radius: 4px; color: var(--encre-2); font-weight: 500; font-size: 13px; }
.segment button[aria-pressed="true"] { background: var(--surface); color: var(--encre); box-shadow: 0 0 0 1px var(--filet-fort); }
.bande-chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-grand); margin-bottom: 28px; }
.bande-chiffres > div { padding: 14px 18px 15px; border-left: 1px solid var(--filet); min-width: 0; }
.bande-chiffres > div:first-child { border-left: 0; }
.bande-chiffres .l { font-size: 12.5px; color: var(--encre-3); }
.bande-chiffres .v { font-size: 22px; font-weight: 600; letter-spacing: -.01em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.bande-chiffres .d { font-size: 12.5px; color: var(--encre-3); margin-top: 2px; font-variant-numeric: tabular-nums; }
.bande-chiffres .d b { font-weight: 500; color: var(--encre-2); }
.graphes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.graphe { background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r-grand); padding: 16px 18px 12px; min-width: 0; }
.graphe h2 { font-size: 14px; font-weight: 600; margin: 0; }
.graphe .g-sous { font-size: 12.5px; color: var(--encre-3); margin: 2px 0 12px; }
.graphe svg.trace { width: 100%; height: auto; overflow: visible; }
.graphe .axe { font-size: 11px; fill: var(--encre-3); font-variant-numeric: tabular-nums; }
.graphe .grille { stroke: var(--filet); stroke-width: 1; }
.graphe .base { stroke: var(--filet-fort); stroke-width: 1; }
.graphe .barre { fill: var(--accent); transition: opacity var(--t); }
.graphe .barre.secondaire { fill: oklch(80% .05 228); }
.graphe .cible-survol { fill: transparent; cursor: default; }
.graphe svg:has(.cible-survol:hover) .barre:not(.focus) { opacity: .55; }
.graphe .courbe { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.graphe .point { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.graphe .repere { stroke: var(--encre-3); stroke-dasharray: 3 3; stroke-width: 1; }
.graphe .valeur { font-size: 11.5px; fill: var(--encre-2); font-variant-numeric: tabular-nums; }
.graphe details { margin-top: 8px; border-top: 1px solid var(--filet); padding-top: 8px; }
.graphe summary { font-size: 12.5px; color: var(--encre-3); cursor: pointer; width: max-content; }
.graphe summary:hover { color: var(--encre); }
.graphe details table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12.5px; }
.graphe details td, .graphe details th { padding: 5px 0; border-top: 1px solid var(--filet); text-align: left; font-weight: 400; font-variant-numeric: tabular-nums; }
.graphe details th { color: var(--encre-3); }
.graphe details .r { text-align: right; }
.barres-h { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 12px; }
.barres-h li { display: grid; grid-template-columns: 150px minmax(0, 1fr) 92px; gap: 12px; align-items: center; }
.barres-h .bh-l { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barres-h .bh-piste { height: 10px; background: var(--surface-2); border-radius: 0 4px 4px 0; position: relative; }
.barres-h .bh-val { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); border-radius: 0 4px 4px 0; transform-origin: left; animation: pousse 600ms var(--sortie) both; }
.barres-h .bh-val.plein { background: var(--s-aplacer); }
.barres-h .bh-cap { position: absolute; top: -3px; bottom: -3px; width: 0; border-left: 1.5px solid var(--encre-2); }
.barres-h .bh-n { font-size: 12.5px; color: var(--encre-2); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@keyframes pousse { from { transform: scaleX(0); } }

.infobulle { position: fixed; z-index: 70; pointer-events: none; background: var(--encre); color: var(--sur-accent); font-size: 12.5px; padding: 7px 10px; border-radius: 6px; max-width: 240px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.infobulle b { font-weight: 600; }

/* ---------- Palette de commandes ---------- */
.palette { position: fixed; inset: 0; z-index: 80; display: grid; justify-items: center; align-items: start; padding-top: 14vh; background: oklch(25% .02 245 / .22); animation: voile 140ms var(--sortie); }
@keyframes voile { from { opacity: 0; } }
.palette[hidden] { display: none; }
.palette-boite { width: min(620px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--filet-fort); border-radius: 12px; box-shadow: 0 24px 64px -16px oklch(25% .03 245 / .4); overflow: hidden; animation: boite 160ms var(--sortie); }
@keyframes boite { from { opacity: 0; transform: scale(.98) translateY(-6px); } }
.palette-saisie { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--filet); }
.palette-saisie svg { width: 16px; height: 16px; fill: none; stroke: var(--encre-3); stroke-width: 1.6; flex: none; }
.palette-saisie input { flex: 1; height: 52px; border: 0; background: none; font-size: 15.5px; padding: 0; box-shadow: none !important; }
.palette-resultats { max-height: min(420px, 56vh); overflow-y: auto; padding: 6px; }
.palette-groupe { font-size: 11.5px; font-weight: 500; color: var(--encre-3); padding: 10px 10px 4px; }
.palette-option { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 7px; cursor: pointer; min-height: 40px; }
.palette-option[aria-selected="true"] { background: var(--survol); }
.palette-option .po-ic { width: 16px; height: 16px; color: var(--encre-3); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.palette-option .po-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette-option .po-t small { color: var(--encre-3); margin-left: 6px; font-size: 12.5px; }
.palette-option mark { background: none; color: var(--accent-fort); font-weight: 600; }
.palette-option .statut { height: 20px; }
.palette-pied { display: flex; gap: 16px; padding: 9px 14px; border-top: 1px solid var(--filet); background: var(--surface-2); color: var(--encre-3); font-size: 12px; }
.palette-pied span { display: inline-flex; gap: 5px; align-items: center; }
.palette-vide { padding: 28px 16px; text-align: center; color: var(--encre-3); }
.raccourcis { padding: 8px 16px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.raccourcis h3 { grid-column: 1 / -1; font-size: 12px; font-weight: 500; color: var(--encre-3); margin: 12px 0 4px; }
.raccourcis div { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--filet); font-size: 13px; gap: 12px; }
.raccourcis kbd + kbd { margin-left: 3px; }

/* ---------- Messages ---------- */
.messages { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90; display: grid; gap: 8px; justify-items: center; pointer-events: none; }
.message {
  pointer-events: auto; display: flex; align-items: center; gap: 14px; background: var(--encre); color: var(--sur-accent);
  padding: 9px 9px 9px 14px; border-radius: 9px; box-shadow: 0 12px 32px -10px oklch(20% .03 245 / .45); font-size: 13.5px;
  animation: message-in 240ms var(--sortie);
}
.message.sortie { animation: message-out 180ms ease-in forwards; }
@keyframes message-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes message-out { to { opacity: 0; transform: translateY(6px); } }
.message .ic { width: 16px; height: 16px; border-radius: 50%; background: oklch(70% .12 152); display: grid; place-items: center; flex: none; }
.message .ic svg { width: 10px; height: 10px; fill: none; stroke: var(--encre); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.message button { border: 0; background: oklch(36% .02 245); color: var(--sur-accent); height: 26px; padding: 0 10px; border-radius: 5px; font-weight: 500; font-size: 13px; }
.message button:hover { background: oklch(42% .02 245); }
.message .ms-fermer { background: none; width: 26px; padding: 0; color: oklch(75% .01 245); }

/* ---------- Téléphone ---------- */
@media (max-width: 1180px) {
  .jour-grille { grid-template-columns: minmax(0, 1fr) 300px; }
  .fiche-grille { grid-template-columns: minmax(0, 1fr) 300px; }
  .page { padding: 24px 28px 56px; }
  .nouvelle-grille { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); background: none; }
  .bloc-entete .aide { display: none; }
  .jours button .n { display: none; }
  .nav { position: sticky; top: 0; height: auto; flex-direction: row; align-items: center; padding: 10px 16px; z-index: 30; border-right: 0; border-bottom: 1px solid var(--filet); }
  .nav .nav-liens, .nav .nav-bas, .nav .recherche-ouvrir { display: none; }
  .onglets-bas {
    display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--nav); border-top: 1px solid var(--filet); padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
  }
  .onglets-bas a, .onglets-bas button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 52px; font-size: 11.5px; font-weight: 500; color: var(--encre-3); text-decoration: none; border: 0; background: none; border-radius: 8px; }
  .onglets-bas svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
  .onglets-bas [aria-current="page"] { color: var(--accent-fort); }
  .page { padding: 18px 16px 104px; }
  .entete { flex-wrap: wrap; align-items: flex-start; }
  .jour-grille, .fiche-grille { grid-template-columns: minmax(0, 1fr); }
  .graphes { grid-template-columns: minmax(0, 1fr); }
  .bande-chiffres { grid-template-columns: 1fr 1fr; }
  .bande-chiffres > div:nth-child(3) { border-left: 0; }
  .bande-chiffres > div:nth-child(n+3) { border-top: 1px solid var(--filet); }
  .planning { display: none; }
  .pl-mobile { display: block; }
  .planning-legende { display: none; }
  .planning-section .bloc-entete { flex-direction: column; align-items: flex-start; }
  .jours { width: 100%; overflow-x: auto; }
  .jours button { flex: 1; padding: 0 6px; height: 36px; }
  .etapes { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .etape { padding: 8px 6px; }
  .etape .e-n { font-size: 11.5px; flex-direction: column; align-items: flex-start; gap: 4px; }
  .etape .e-d { display: none; }
}
@media (max-width: 640px) {
  body { font-size: 15px; }
  .entete h1, .fiche-entete h1 { font-size: 21px; }
  .btn { height: 40px; }
  .btn.petit { height: 36px; }
  input[type="text"], input[type="search"], input[type="date"], select { height: 44px; font-size: 16px; }
  textarea { font-size: 16px; }
  .ligne-travail { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "texte action" "ref quand"; gap: 6px 12px; padding: 12px 14px; }
  .ligne-travail .poignee { display: none; }
  .ligne-travail .lt-texte { grid-area: texte; }
  .ligne-travail .lt-ref { grid-area: ref; }
  .ligne-travail .lt-quand { grid-area: quand; }
  .ligne-travail .lt-action { grid-area: action; justify-self: end; align-self: start; }
  .lt-titre, .lt-meta { white-space: normal; }
  .proposition { margin: 0 14px 14px; }
  .proposition-champs { grid-template-columns: 1fr 1fr; }
  .proposition-champs .champ:first-child { grid-column: 1 / -1; }
  .proposition-champs .btn { grid-column: 1 / -1; }
  .onglets-statut { margin-left: -16px; margin-right: -16px; padding: 0 16px; }
  .barre-filtres { display: grid; grid-template-columns: 1fr 1fr; }
  .recherche-liste { grid-column: 1 / -1; }
  .barre-filtres label, .barre-filtres select { width: 100%; display: block; }
  .barre-filtres label:has(#f-periode) { grid-column: 1 / -1; }
  .recherche-liste kbd { display: none; }
  .recherche-liste svg { top: 15px; }
  .barre-filtres .compteur { grid-column: 1 / -1; margin: 0; }
  .barre-filtres .btn { grid-column: 1 / -1; }
  .tableau-cadre table { display: none; }
  .liste-mobile { display: block; list-style: none; margin: 0; padding: 0; }
  .liste-mobile li { border-top: 1px solid var(--filet); }
  .liste-mobile li:first-child { border-top: 0; }
  .liste-mobile a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 14px; text-decoration: none; }
  .liste-mobile .lm-t { font-weight: 600; }
  .liste-mobile .lm-o { grid-column: 1 / -1; color: var(--encre-2); }
  .liste-mobile .lm-m { grid-column: 1 / -1; color: var(--encre-3); font-size: 13px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  .entete-actions { width: 100%; }
  .entete-actions .btn { flex: 1; }
  .entete-actions .kbd-cache { display: none; }
  .nouvelle-grille { grid-template-columns: 1fr; }
  .fiche-entete { flex-direction: column; gap: 12px; }
  .fiche-entete .entete-actions { display: none; }
  .barre-action-mobile { display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: calc(60px + env(safe-area-inset-bottom)); padding: 10px 16px; background: var(--surface); border-top: 1px solid var(--filet); z-index: 35; }
  .barre-action-mobile .btn { flex: 1; height: 44px; }
  .page.fiche { padding-bottom: 170px; }
  .note-saisie .actions span { visibility: hidden; }
  .attributs { grid-template-columns: 112px minmax(0, 1fr); }
  .barres-h li { grid-template-columns: 96px minmax(0, 1fr) 78px; gap: 8px; }
  .raccourcis { grid-template-columns: 1fr; }
  .messages { bottom: 128px; width: calc(100% - 32px); }
  .message { width: 100%; }
  .message span.t { flex: 1; }
  .palette { padding-top: 12px; }
  .graphe { padding: 14px 14px 10px; }
  .court-liste a { padding: 12px 14px; }
}
.pl-mobile-tech { padding: 10px 14px 4px; display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--filet); }
.pl-mobile-tech:first-child { border-top: 0; }
.pl-mobile-tech .n { font-weight: 600; }
.pl-mobile-tech .m { color: var(--encre-3); font-size: 13px; margin-left: auto; font-variant-numeric: tabular-nums; }
.pl-mobile ul { list-style: none; margin: 0; padding: 0 14px 10px 46px; }
.pl-mobile li a { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 0; text-decoration: none; border-top: 1px solid var(--filet); }
.pl-mobile li:first-child a { border-top: 0; }
.pl-mobile .h { font-variant-numeric: tabular-nums; color: var(--encre-3); font-size: 13px; }
.pl-mobile .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}
.proposition[data-ou="fiche"] { margin: 0 14px 14px; }
.proposition[data-ou="fiche"] .proposition-champs { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.proposition[data-ou="fiche"] .proposition-champs .champ:first-child, .proposition[data-ou="fiche"] .proposition-champs .btn { grid-column: 1 / -1; }
.palette-boite:focus { outline: none; }
.tableau .t-client, .tableau .t-ville { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }