/* ==========================================================================
   MC Pilot — V2 : feuille de styles applicative.

   Les primitives de marque et les deux thèmes (data-theme="ink" | "paper")
   sont définis dans /assets/theme.css, chargé avant ce fichier. Les
   composants ci-dessous ne doivent consommer que les variables sémantiques
   --ui-* (structure : fonds, surfaces, textes, menu, bordures, voiles) ou,
   pour les couleurs réellement fonctionnelles (erreur, succès, avertissement/
   accent et leurs variantes douces), les tokens --brand-* correspondants.
   Aucune dépendance CSS vers l'arborescence V1 (/assets/css/app/*) ne doit
   être réintroduite ici.
   ========================================================================== */

:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--ui-page-background); }
body { min-height: 100vh; margin: 0; color: var(--ui-text-primary); background: var(--ui-page-background); }
button, input, select { font: inherit; }
button, select, a { -webkit-tap-highlight-color: transparent; }

:focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 3px; }
.skip-link {
  position: fixed;
  z-index: 100;
  top: .75rem;
  left: .75rem;
  padding: .7rem 1rem;
  color: var(--ui-on-strong);
  background: var(--brand-ink);
  border-radius: .5rem;
  transform: translateY(-180%);
}
.skip-link:focus { transform: translateY(0); }

.boot-state {
  width: min(34rem, calc(100% - 2rem));
  margin: 12vh auto;
  padding: 2rem;
  text-align: center;
  background: var(--ui-surface-background);
  border: 1px solid var(--ui-border);
  border-radius: 1rem;
  box-shadow: var(--shadow);
}
.state-card {
  width: min(34rem, calc(100% - 2rem));
  margin: 12vh auto;
  padding: 2rem;
  text-align: center;
  background: var(--ui-surface-background);
  border: 1px solid var(--ui-border);
  border-radius: 0 1rem 1rem 0;
  box-shadow: var(--shadow);
}
.state-card h1 { margin: 1.25rem 0 .6rem; font-size: clamp(1.6rem, 5vw, 2.25rem); }
.state-card p { color: var(--ui-text-secondary); line-height: 1.55; }
.state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 1.25rem; }
.login-form { display: grid; gap: .8rem; margin-top: 1.5rem; text-align: left; }
.login-form label { font-weight: 650; }

/* ---- Écran de connexion : la carte en deux parties ----------------------
   Reprise VISUELLE de l'esprit de l'écran V1 : une seule carte, un panneau
   éditorial vert encre à gauche (wordmark clair + signature), le formulaire
   inchangé à droite. Le fond de page est la crème de marque, la seule valeur
   que la charte nomme pour cette page ; tout le reste transite par les tokens
   déjà définis dans theme.css. Aucune primitive nouvelle n'est introduite.
   ------------------------------------------------------------------------ */
.login-screen {
  display: grid;
  align-items: center;
  justify-items: center;
  min-height: 100vh;
  padding: 1.5rem 1rem;
  background: var(--brand-paper);
}
.state-card.login-card {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  width: min(54rem, 100%);
  margin: 0;
  padding: 0;
  overflow: hidden;
  text-align: left;
}
.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  padding: 2.75rem 1.9rem;
  text-align: center;
  background: var(--brand-ink);
  background-image: linear-gradient(158deg, color-mix(in srgb, var(--brand-ink-soft) 45%, transparent), transparent 66%);
}
.login-brand .login-logo { width: min(15rem, 80%); }
.login-tagline { line-height: 1.5; font-size: 1.05rem; }
.login-tagline p { margin: 0; color: var(--brand-cream); }
.login-tagline p + p { margin-top: .35rem; color: var(--brand-accent); font-style: italic; }
.login-panel { padding: 2rem 1.9rem; }
.login-panel h1 { margin: 0 0 .6rem; font-size: clamp(1.5rem, 4vw, 1.9rem); }

/* Sur écran étroit, le panneau de marque devient un bandeau compact AU-DESSUS
   du formulaire : il annonce la marque sans jamais consommer la hauteur utile
   d'un téléphone. Le formulaire, lui, retrouve exactement la largeur et les
   marges qu'il avait avant ce lot (celles de .state-card). Le point de rupture
   est celui que la feuille utilise déjà partout ailleurs. */
@media (max-width: 900px) {
  .login-screen { align-items: start; padding: 1rem; }
  .state-card.login-card { grid-template-columns: minmax(0, 1fr); width: min(34rem, 100%); border-radius: 0 0 1rem 1rem;}
  .login-brand { gap: .8rem; padding: 1.5rem 1.25rem; }
  .login-brand .login-logo { width: min(11rem, 62%); }
  .login-tagline { font-size: .95rem; }
  .login-panel { padding: 1.75rem 1.25rem; }
}

.field {
  width: 100%;
  min-height: 2.75rem;
  padding: .65rem .75rem;
  color: var(--ui-text-primary);
  background: var(--ui-surface-background);
  border: 1px solid var(--ui-border);
  border-radius: .55rem;
}
.button {
  min-height: 2.7rem;
  padding: .65rem 1rem;
  border: 1px solid var(--brand-ink);
  border-radius: .6rem;
  cursor: pointer;
  font-weight: 700;
}
.button-primary { color: var(--ui-on-strong); background: var(--brand-ink); }
.button-quiet { color: var(--ui-text-primary); background: var(--ui-surface-background); }
.button:disabled { cursor: wait; opacity: .65; }

.app-shell {
  --shell-header-height: 5rem;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
}
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 1.25rem 1rem;
  color: var(--ui-sidebar-text);
  background: var(--ui-sidebar-background);
  border-right: 1px solid var(--ui-border);
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow-y: auto;
}
.sidebar::after {
  content: "";
  position: absolute;
  top: calc(var(--shell-header-height) - 1px);
  left: 1rem;
  right: 1rem;
  height: 1px;
  background: var(--ui-border);
  pointer-events: none;
}
.brand {
  display: flex;
  align-items: center;
  min-height: 3.2rem;
  padding: .25rem .5rem 1rem;
}
.brand img { width: 10.5rem; }
.primary-navigation {
  display: grid;
  flex: 0 0 auto;
  align-content: start;
  gap: .35rem;
  margin-top: 1rem;
}
.sidebar-footer {
  flex: 0 0 auto;
  witdh: 100%;
  min-width: 0;
  margin-top: auto;
  padding: 1rem 0 0;
  border-top: 1px solid var(--ui-border);
}
.sidebar-identity {
  display: grid;
  justify-items: start;
  gap: .55rem;
  min-width: 0;
}
.sidebar-identity-name {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  font-size: .9rem;
  font-weight: 750;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-identity .button {
  width: 100%;
  min-height: 2.25rem;
  padding: .4rem .65rem;
  border-color: var(--ui-border);
  color: var(--ui-text-secondary);
  background: var(--ui-sidebar-background);
}
.sidebar-metadata {
  margin-top: .9rem;
  padding-top: .8rem;
  border-top: 1px solid var(--ui-border);
}
.sidebar-meta-line {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  color: var(--ui-sidebar-text);
  font-size: .76rem;
  line-height: 1.5;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: .78;
}
.sidebar-version-link {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: .16em;
}.nav-link {
  display: flex;
  font-size: 1.05rem;
  align-items: center;
  width: 100%;
  min-height: 2.8rem;
  padding: .65rem .8rem;
  color: var(--ui-sidebar-text);
  text-decoration: none;
  border-radius: 0;
  gap: .75rem;
}
.nav-link-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Lot 10 — the global "nettoyages en retard" counter. It is compact, it never
   changes the entry's height, and the label yields before it does, so a mobile
   drawer can never be pushed out of the screen by a three-character value. */
.nav-link-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  margin-left: auto;
  padding: .1rem .4rem;
  border-radius: 999px;
  color: var(--ui-on-strong);
  background: var(--brand-alert);
  font-size: .75rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
.nav-link-icon {
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  flex: 0 0 1.2rem;
  background-color: currentColor;

  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;

  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
}
.nav-link-icon-layout-dashboard {
  -webkit-mask-image: url("/assets/icons/layout-dashboard.svg");
  mask-image: url("/assets/icons/layout-dashboard.svg");
}
.nav-link-icon-settings {
  -webkit-mask-image: url("/assets/icons/settings.svg");
  mask-image: url("/assets/icons/settings.svg");
}
.nav-link-icon-calendar-days {
  -webkit-mask-image: url("/assets/icons/calendar-days.svg");
  mask-image: url("/assets/icons/calendar-days.svg");
}
.nav-link-icon-broom {
  -webkit-mask-image: url("/assets/icons/broom.svg");
  mask-image: url("/assets/icons/broom.svg");
}
.nav-link-icon-inspection-panel {
  -webkit-mask-image: url("/assets/icons/clipboard-check.svg");
  mask-image: url("/assets/icons/clipboard-check.svg");
}
.nav-link-icon-list-todo {
  -webkit-mask-image: url("/assets/icons/list-todo.svg");
  mask-image: url("/assets/icons/list-todo.svg");
}
/* Hover Paper */
:root[data-theme="paper"] .nav-link:not([aria-current="page"]):hover {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, .75) 0%,
    rgba(255, 255, 255, 0) 90%
  );
}
/* Actif Paper */
:root[data-theme="paper"] .nav-link[aria-current="page"] {
  color: var(--brand-ink);
    background: linear-gradient(
    90deg,
    rgba(255, 255, 255, .75) 0%,
    rgba(255, 255, 255, 0) 90%
  );
  font-weight: 750;
  box-shadow: inset 4px 0 0 var(--brand-ink);
}
/* Hover Ink */
:root[data-theme="ink"] .nav-link:not([aria-current="page"]):hover {
  background: var(--ui-sidebar-hover-background);
}
/* Actif Ink */
:root[data-theme="ink"] .nav-link[aria-current="page"] {
  color: var(--ui-sidebar-active-text);
  background: var(--ui-sidebar-active-background);
  font-weight: 750;
}
.workspace { min-width: 0; }
.topbar {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--shell-header-height);
  padding: .8rem clamp(1rem, 3vw, 2.25rem);
  background: var(--ui-topbar-background);
  border-bottom: 1px solid var(--ui-border);
  backdrop-filter: blur(10px);
}
.mobile-menu-button { display: none; }
.context-controls { display: flex; flex: 1; align-items: center; gap: 1rem; }
.context-control { display: grid; gap: .2rem; min-width: min(15rem, 34vw); }
.context-control label, .context-label { color: var(--ui-text-secondary); font-size: .78rem; font-weight: 700; }
.context-value { display: block; font-weight: 700; }
.content { padding: clamp(1.25rem, 4vw, 3rem); }
.notice {
  margin: 0 0 1.25rem;
  padding: .85rem 1rem;
  border: 1px solid var(--ui-border);
  border-left: 4px solid var(--brand-accent);
  border-radius: .6rem;
  background: var(--ui-surface-background);
}
.notice-error { color: var(--brand-alert); border-color: var(--brand-alert); border-left-color: var(--brand-alert); background: var(--brand-accent-light); }
/* Lot 0.4 : le pendant positif du bandeau, pour qu'un parcours Auth terminé
   n'annonce pas son succes en rouge sur l'ecran de connexion. */
.notice-success { color: var(--ui-info-text); border-left-color: var(--brand-ink); background: var(--ui-info-background); }
.state-card .notice { text-align: left; }
.field-hint { margin: -.4rem 0 0; color: var(--ui-text-secondary); font-size: .8rem; }
.page-header {
  max-width: 54rem;
  min-height: 180px;
}
.eyebrow { margin: 0 0 .5rem; color: var(--brand-accent); font-size: .78rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.page-header h1 { margin: 0; font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.1; }
.page-description { margin: .8rem 0 0; color: var(--ui-text-secondary); font-size: 1.05rem; line-height: 1.55; }
.empty-module {
  max-width: 54rem;
  margin-top: 2rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px dashed var(--ui-border);
  border-radius: 1rem;
  background: var(--ui-surface-translucent);
}
.empty-module h2 { margin: 0 0 .5rem; font-size: 1.15rem; }
.empty-module p { margin: 0; color: var(--ui-text-secondary); }
.site-required { margin-top: 1rem !important; color: var(--brand-alert) !important; font-weight: 650; }
.mobile-backdrop { display: none; }

.release-dialog { width: min(48rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: clamp(1rem, 3vw, 1.5rem); color: var(--ui-text-primary); background: var(--ui-surface-background); border: 1px solid var(--ui-border); border-radius: .9rem; box-shadow: var(--shadow); }
.release-dialog::backdrop { background: var(--ui-dialog-overlay); }
.release-dialog .dialog-title-row { position: sticky; top: 0; padding-bottom: .75rem; background: var(--ui-page-background); }
.release-dialog h2 { margin: 0; }
/* Les notes de version s'adressent aux utilisateurs : ce n'est plus un fichier
   technique recopié tel quel, mais du texte structuré. */
.release-notes { max-height: calc(100dvh - 8rem); padding: 1rem; overflow: auto; color: var(--ui-text-primary); background: var(--ui-surface-muted); border-radius: .55rem; line-height: 1.55; overflow-wrap: anywhere; }
.release-note-title { margin: 0 0 .35rem; font-size: 1.05rem; }
.release-note-summary { margin: 0 0 1.25rem; color: var(--ui-text-secondary); }
.release-note-section + .release-note-section { margin-top: 1.25rem; }
.release-note-section h4 { margin: 0 0 .5rem; font-size: .95rem; }
.release-note-items { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.release-note-items li { display: grid; gap: .15rem; padding-left: .85rem; border-left: 3px solid var(--ui-border); }
.release-note-items span { color: var(--ui-text-secondary); }

@media (max-width: 820px) {
  .app-shell { display: block; }
  .sidebar {
    position: fixed;
    z-index: 50;
    inset: 0 auto 0 0;
    width: min(19rem, 86vw);
    transform: translateX(-105%);
    transition: transform 180ms ease;
    box-shadow: var(--shadow);
  }
  .app-shell[data-mobile-menu-open="true"] .sidebar { transform: translateX(0); }
  .mobile-backdrop {
    position: fixed;
    z-index: 40;
    inset: 0;
    display: block;
    visibility: hidden;
    opacity: 0;
    border: 0;
    background: var(--ui-nav-overlay);
    transition: opacity 180ms ease, visibility 180ms ease;
  }
  .app-shell[data-mobile-menu-open="true"] .mobile-backdrop { visibility: visible; opacity: 1; }
  .mobile-menu-button { display: inline-grid; flex: 0 0 auto; place-items: center; width: 2.8rem; padding: 0; }
  .topbar { align-items: flex-start; flex-wrap: wrap; }
  .context-controls { order: 3; flex-basis: 100%; }
  .context-control { min-width: 0; flex: 1; }
}

@media (max-width: 520px) {
  .context-controls { display: grid; grid-template-columns: 1fr; }
  .content { padding-top: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.page-title-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 1.5rem; }
.page-title-row > div { display: contents; }
.page-title-row .eyebrow { grid-column: 1; grid-row: 1; }
.page-title-row h1 { grid-column: 1; grid-row: 2; }

/* Tableau de bord Lot 9 : cinq KPI Nettoyage annuels, strictement en lecture seule. */
.dashboard-header { max-width: none; }
.dashboard-site { margin: .6rem 0 0; color: var(--ui-text-secondary); font-weight: 700; }
.dashboard-content { display: grid; gap: 1.5rem; max-width: 76rem; }
.dashboard-tabs {
  display: flex;
  gap: .35rem;
  margin: 0 0 1.25rem;
  border-bottom: 1px solid var(--ui-border);
}
.dashboard-tab {
  margin: 0 0 -1px;
  padding: .75rem 1rem;
  border: 0;
  border-bottom: 3px solid var(--brand-primary);
  background: transparent;
  color: var(--ui-text-primary);
  font: inherit;
  font-weight: 800;
}
.dashboard-tab:focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 2px; }
.dashboard-module-panel { min-width: 0; }
.dashboard-year-field {
  display: grid;
  grid-template-columns: max-content minmax(8rem, 12rem);
  gap: .5rem .75rem;
  align-items: center;
  margin: 0 0 1.25rem;
}
.dashboard-year-field label { font-weight: 750; }
.dashboard-year-field select { min-width: 0; }
.dashboard-summary > h2 { margin: 0 0 .8rem; }
.dashboard-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.dashboard-kpi {
  min-width: 0;
  padding: 1.1rem;
  border: 1px solid var(--ui-border);
  border-top-width: 6px;
  border-top-color: var(--brand-ink);
  border-radius: 0 0 .85rem .85rem;
  background: linear-gradient(
  180deg,
  color-mix(in srgb, var(--ui-surface-muted) 75%, transparent) 0%,
  transparent 90%
);
  /*background: var(--ui-surface-background);*/
  /*box-shadow: var(--shadow);*/
}
.dashboard-kpi-label { color: var(--ui-text-secondary); font-size: .85rem; font-weight: 750; }
.dashboard-kpi-value {
  margin: .45rem 0 0;
  font-size: clamp(1.45rem, 3vw, 2rem);
  font-weight: 800;
  text-align: center;
  overflow-wrap: anywhere;
}
.dashboard-kpi-help {
  margin: .65rem 0 0;
  color: var(--ui-text-secondary);
  font-size: .82rem;
  line-height: 1.35;
  text-align: center;
}
.dashboard-empty { margin: 1rem 0 0; color: var(--ui-text-secondary); }
.dashboard-state { padding: 1.5rem; border: 1px dashed var(--ui-border); border-radius: .85rem; background: var(--ui-surface-translucent); }
.dashboard-state h2 { margin: 0 0 .5rem; font-size: 1.15rem; }
.dashboard-state p { margin: 0; }
.dashboard-state .button { margin-top: 1rem; }
.dashboard-state-error { color: var(--brand-alert); border-style: solid; border-color: var(--brand-alert); background: var(--brand-accent-light); }

@media (max-width: 1100px) {
  .dashboard-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .dashboard-kpis { grid-template-columns: minmax(0, 1fr); }
  .dashboard-year-field { grid-template-columns: minmax(0, 1fr); }
}
.page-title-row > .button { grid-column: 2; grid-row: 2; margin-top: 0; }
.page-header-actions { display: flex; grid-column: 2; grid-row: 2; flex-wrap: wrap; justify-content: flex-end; gap: .65rem; }
.page-title-row .page-description { grid-column: 1 / -1; grid-row: 3; }
.settings-header { max-width: none; }
.settings-layout { display: grid; grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); margin-top: 0; }
.settings-navigation ul { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.settings-nav-link {
  display: flex;
  min-height: 2.8rem;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .65rem .8rem;
  color: var(--ui-text-primary);
  text-decoration: none;
  border: 1px solid var(--ui-border);
  border-radius: 0 .65rem .65rem 0;
  background: var(--ui-surface-background);
}
.settings-nav-link:hover:not([aria-current="page"]) {
  background: linear-gradient(
  90deg,
  color-mix(in srgb, var(--ui-surface-muted) 75%, transparent) 0%,
  transparent 90%
);
}

.settings-nav-link[aria-current="page"] {
  color: var(--brand-ink);
  background: linear-gradient(
  90deg,
  color-mix(in srgb, var(--ui-surface-muted) 75%, transparent) 0%,
  transparent 90%
);
  font-weight: 750;
  box-shadow: inset 4px 0 0 var(--brand-ink);
}
/*.settings-nav-link[aria-current="page"] { color: var(--ui-on-strong); border-color: var(--brand-ink); background: var(--brand-ink); font-weight: 750; }*/
.settings-nav-unavailable { color: var(--ui-text-secondary); background: transparent; }
.settings-nav-unavailable small { font-size: .68rem; white-space: nowrap; }
.settings-section-content { min-width: 0; }
.references-content { display: grid; gap: 1.25rem; }
.reference-card { max-width: 54rem; padding: clamp(1rem, 3vw, 1.5rem); border: 1px solid var(--ui-border); border-radius: .85rem; background: var(--ui-surface-background); box-shadow: var(--shadow); }
.reference-card h2 { margin: 0; font-size: 1.2rem; }
.site-workbook-content { display: grid; gap: 1.25rem; }
.site-workbook-card { display: grid; width: 100%; justify-items: start; gap: 1rem; }
.site-workbook-card > * { margin: 0; }
.site-workbook-feedback, .site-workbook-notice { width: 100%; padding: .8rem 1rem; border: 1px solid var(--ui-border); border-left: 4px solid var(--brand-ink); border-radius: .65rem; background: var(--ui-info-background); }
.site-workbook-feedback-error { color: var(--brand-alert); border-color: var(--brand-alert); background: var(--brand-accent-light); }
.site-workbook-file-field { width: min(100%, 36rem); }
.site-workbook-file-field input[type="file"] { width: 100%; padding: .65rem; border: 1px solid var(--ui-border); border-radius: .55rem; background: var(--ui-surface-background); }
.site-workbook-write-modes { display: grid; width: 100%; gap: .65rem; padding: 1rem; border: 1px solid var(--ui-border); border-radius: .65rem; }
.site-workbook-write-modes legend { padding: 0 .35rem; font-weight: 750; }
.site-workbook-mode-choice { display: grid; grid-template-columns: auto 1fr; column-gap: .55rem; align-items: start; }
.site-workbook-mode-choice input { margin-top: .2rem; }
.site-workbook-mode-choice label { font-weight: 700; }
.site-workbook-mode-choice .form-help { grid-column: 2; margin: .15rem 0 0; }
.site-workbook-errors { width: 100%; padding: 1rem; color: var(--brand-alert); border: 1px solid var(--brand-alert); border-radius: .65rem; background: var(--brand-accent-light); }
.site-workbook-errors h3, .site-workbook-errors h4 { margin: 0; }
.site-workbook-errors ul { margin: .65rem 0 0; padding-left: 1.35rem; }
.site-workbook-errors li + li { margin-top: .4rem; }
.site-workbook-preview { display: grid; width: 100%; gap: 1rem; padding-top: .25rem; }
.site-workbook-preview h3, .site-workbook-preview h4, .site-workbook-preview p { margin: 0; }
.site-workbook-preview-mode { font-weight: 750; }
.site-workbook-preview-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--ui-border); border-radius: .65rem; }
.site-workbook-preview-table { width: 100%; border-collapse: collapse; }
.site-workbook-preview-table th, .site-workbook-preview-table td { padding: .7rem .8rem; text-align: left; border-bottom: 1px solid var(--ui-border); }
.site-workbook-preview-table thead th { color: var(--ui-text-secondary); font-size: .76rem; background: var(--ui-surface-muted); }
.site-workbook-preview-table tbody tr:last-child > * { border-bottom: 0; }
.site-workbook-impact { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem 1rem; padding: 1rem; border: 1px solid var(--ui-border); border-radius: .65rem; background: var(--ui-surface-muted); }
.site-workbook-impact h4 { grid-column: 1 / -1; }
.site-workbook-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.site-workbook-apply-report { padding: 1rem; border: 1px solid var(--brand-ink); border-radius: .65rem; background: var(--ui-info-background); }
.site-workbook-apply-report .button { justify-self: start; }
.site-workbook-uncertain { display: grid; gap: .65rem; justify-items: start; }
.site-workbook-uncertain p { margin: 0; }
.site-workbook-regeneration { display: grid; gap: .65rem; justify-items: start; }
.site-workbook-regeneration p { margin: 0; }
.site-workbook-confirm-summary { display: grid; grid-template-columns: 1fr auto; gap: .35rem 1rem; margin: 0 0 1rem; padding: .9rem 1rem; border: 1px solid var(--ui-border); border-radius: .65rem; background: var(--ui-surface-muted); }
.site-workbook-confirm-summary dt { color: var(--ui-text-secondary); }
.site-workbook-confirm-summary dd { margin: 0; font-weight: 750; text-align: right; }
.site-workbook-confirm-warning { color: var(--brand-alert); font-weight: 700; }
@media (max-width: 44rem) {
  .site-workbook-impact { grid-template-columns: 1fr; }
}
.reference-site-name, .reference-product-name { font-weight: 750; }
.reference-field-label { display: block; color: var(--ui-text-secondary); font-size: .8rem; font-weight: 700; }
.reference-read-value { margin: .35rem 0 1rem; overflow-wrap: anywhere; }
.reference-form { display: grid; gap: .55rem; max-width: 36rem; }
.reference-form .button { justify-self: start; margin-top: .35rem; }
.release-version-link { padding: 0; color: var(--ui-text-primary); background: transparent; border: 0; cursor: pointer; font-weight: 750; text-decoration: underline; text-underline-offset: .18em; }
.references-empty-state { padding: 1rem; border: 1px dashed var(--ui-border); border-radius: .65rem; color: var(--ui-text-secondary); background: var(--ui-surface-muted); }
.references-feedback { padding: .85rem 1rem; border: 1px solid var(--ui-border); border-left: 4px solid var(--brand-ink); border-radius: .65rem; background: var(--ui-info-background); }
.references-feedback-error { color: var(--brand-alert); border-color: var(--brand-alert); background: var(--brand-accent-light); }
.read-only-notice, .sites-feedback, .services-feedback { color: var(--ui-text-secondary) ;margin-bottom: 1rem; padding: .85rem 1rem; border: 1px solid var(--ui-border); border-left: 4px solid var(--brand-paper); border-radius: 0 .65rem .65rem 0; background: none; }
.sites-feedback-error, .sites-state-error, .services-feedback-error, .services-state-error { color: var(--brand-alert); border-color: var(--brand-alert); border-left-color: var(--brand-alert); background: var(--brand-accent-light); }
.sites-state h3 { margin: 0; }
.form-help { margin: .4rem 0 1.1rem; color: var(--ui-text-secondary); }

/* Lot 12 — le Site s'édite dans une modale, jamais plus dans un formulaire
   inséré au fil de la page : la liste reste lisible et l'édition est un acte
   délibéré, avec son propre piège de focus. */
.site-form-dialog { width: min(52rem, 100%); max-height: calc(100vh - 2rem); overflow: auto; padding: clamp(1rem, 3vw, 1.5rem); border-radius: .9rem; background: var(--ui-surface-background); box-shadow: var(--shadow); }
.site-form { display: grid; gap: 1rem; }
.site-form fieldset { min-width: 0; margin: 0; padding: 1rem; border: 1px solid var(--ui-border); border-radius: .7rem; }
.site-form legend { padding: 0 .35rem; font-weight: 750; }
.site-identity-grid { display: grid; grid-template-columns: minmax(7rem, .8fr) minmax(11rem, 1.7fr) minmax(8rem, .8fr); gap: 1rem; align-items: start; }
.site-day-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; }
.site-day-option { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; align-items: center; padding: .6rem .65rem; border: 1px solid var(--ui-border); border-radius: .6rem; background: var(--ui-surface-muted); }
.site-day-option span { overflow-wrap: anywhere; }
.site-exceptions-table-wrap { overflow-x: auto; margin-bottom: .8rem; border: 1px solid var(--ui-border); border-radius: .65rem; }
.site-exceptions-table { width: 100%; border-collapse: collapse; }
.site-exceptions-table th, .site-exceptions-table td { padding: .55rem .7rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--ui-border); }
.site-exceptions-table th { color: var(--ui-text-secondary); font-size: .74rem; letter-spacing: .03em; text-transform: uppercase; background: var(--ui-surface-muted); }
.site-exceptions-table tbody tr:last-child td { border-bottom: 0; }
.site-exception-row-actions { white-space: nowrap; }
.site-exception-row-actions .button + .button { margin-left: .4rem; }
.site-exception-draft { display: grid; gap: .8rem; margin-top: .5rem; padding: .85rem; border: 1px solid var(--brand-ink); border-radius: .65rem; background: var(--ui-info-background); }
.site-exception-draft h4 { margin: 0; }
.site-exception-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.site-exception-grid .form-field:last-child { grid-column: 1 / -1; }
.site-exception-control { position: relative; display: flex; align-items: center; gap: .4rem; }
.site-exception-control .field { min-width: 0; flex: 1 1 auto; }
.site-exception-calendar { flex: 0 0 auto; min-width: 2.75rem; min-height: 2.75rem; padding: .35rem .5rem; }
.site-exception-calendar img { width: 1.15rem; height: 1.15rem; }
.site-exception-picker { position: absolute; right: 0; bottom: 0; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.site-exception-picker-visible { opacity: 1; pointer-events: auto; }
.site-opening-summary { color: var(--ui-text-secondary); }
.form-field { display: grid; gap: .35rem; }
.form-field label { font-weight: 700; }
.required-mark, .field-error { color: var(--brand-alert); }
.field-error { margin: 0; font-size: .8rem; }
.form-actions { display: flex; flex-wrap: wrap; gap: .65rem; grid-column: 1 / -1; }
.button-danger { color: var(--ui-on-strong); border-color: var(--brand-accent-deep); background: var(--brand-accent-deep); }
.sites-state { padding: 1.5rem; border: 1px dashed var(--ui-border); border-radius: .85rem; background: var(--ui-surface-translucent); }
.sites-state p { margin: .5rem 0 1rem; }
.sites-table-wrap { overflow-x: auto; border: 1px solid var(--ui-border); border-radius: 0 .85rem .85rem .85rem; background: var(--ui-surface-background); }
.sites-table { width: 100%; border-collapse: collapse; }
.sites-table th, .sites-table td { padding: .85rem 1rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--ui-border); }
.sites-table th { color: var(--ui-text-secondary); font-size: .78rem; letter-spacing: .03em; text-transform: uppercase; background: var(--ui-surface-muted); }
.sites-table tbody tr:last-child td { border-bottom: 0; }
.selected-site-badge, .status-badge { display: inline-flex; width: fit-content; margin-left: .55rem; padding: .22rem .48rem; border-radius: 999px; font-size: .72rem; font-weight: 750; white-space: nowrap; }
.selected-site-badge { color: var(--ui-info-text); background: var(--ui-info-background); }
.status-active { color: var(--brand-valid); background: var(--brand-valid-soft); }
.status-inactive { color: var(--ui-text-secondary); background: var(--ui-surface-muted); }
.site-row-actions { white-space: nowrap; }
.site-row-actions .button + .button {
  margin-left: .45rem;
}
.dialog-backdrop { position: fixed; z-index: 90; inset: 0; display: grid; place-items: center; padding: 1rem; background: var(--ui-dialog-overlay); }
.confirmation-dialog { width: min(31rem, 100%); padding: 1.5rem; border-radius: .9rem; background: var(--ui-surface-background); box-shadow: var(--shadow); }
.confirmation-dialog h3 { margin: 0; }
.confirmation-dialog p { color: var(--ui-text-secondary); line-height: 1.5; }
.services-state { padding: 1.5rem; border: 1px dashed var(--ui-border); border-radius: .85rem; background: var(--ui-surface-translucent); }
.services-state h3 { margin: 0; }
.services-state p { margin: .5rem 0 1rem; }
.services-table-wrap { overflow-x: auto; border: 1px solid var(--ui-border); border-radius: 0 .85rem .85rem .85rem; background: var(--ui-surface-background); }
.services-table { width: 100%; border-collapse: collapse; }
.services-table th, .services-table td { padding: .85rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ui-border); }
.services-table th { color: var(--ui-text-secondary); font-size: .78rem; letter-spacing: .03em; text-transform: uppercase; background: var(--ui-surface-muted); }
.services-table tbody tr:last-child td { border-bottom: 0; }
.service-row-actions { white-space: nowrap; }
.service-row-actions .button + .button {
  margin-left: .45rem;
}
.muted-copy { color: var(--ui-text-secondary); }
.service-sites-summary { display: grid; gap: .35rem; min-width: min(18rem, 40vw); }
.service-sites-details summary { width: fit-content; color: var(--ui-text-primary); cursor: pointer; font-weight: 700; }
.service-sites-details ul { margin: .5rem 0 0; padding-left: 1.25rem; color: var(--ui-text-secondary); }
.service-form-dialog { width: min(46rem, 100%); max-height: calc(100vh - 2rem); overflow: auto; padding: clamp(1rem, 3vw, 1.5rem); border-radius: .9rem; background: var(--ui-surface-background); box-shadow: var(--shadow); }
.dialog-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.dialog-title-row h3 { margin: 0; }
.dialog-close { min-height: 2.25rem; padding: .35rem .6rem; }
.service-form { display: grid; grid-template-columns: minmax(12rem, 1.6fr) minmax(9rem, .7fr); gap: 1rem; }
.service-sites-fieldset { grid-column: 1 / -1; min-width: 0; margin: 0; padding: 1rem; border: 1px solid var(--ui-border); border-radius: .7rem; }
.service-sites-fieldset legend { padding: 0 .35rem; font-weight: 750; }
.service-site-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; max-height: 17rem; overflow: auto; padding: .15rem; }
.service-site-option { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .65rem; align-items: start; padding: .65rem; border: 1px solid var(--ui-border); border-radius: .6rem; background: var(--ui-surface-muted); }
.service-site-option input { margin-top: .25rem; }
.service-site-option span { display: grid; min-width: 0; }
.service-site-option strong, .service-site-option small { overflow-wrap: anywhere; }
.service-site-option small { margin-top: .18rem; color: var(--ui-text-secondary); }
.service-site-option:has(input:disabled) { opacity: .68; }
.inline-warning { margin: 0 0 .8rem; padding: .7rem .8rem; border-left: 4px solid var(--brand-accent); background: var(--brand-accent-light); }
.empty-sites-confirmation { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .55rem; align-items: start; margin-top: .8rem; padding: .7rem; color: var(--brand-alert); border: 1px solid var(--brand-alert); border-radius: .55rem; background: var(--brand-accent-light); }
.empty-sites-confirmation[hidden] { display: none; }
.empty-sites-confirmation .field-error { grid-column: 2; }

@media (max-width: 900px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-navigation ul { display: flex; overflow-x: auto; padding-bottom: .35rem; }
  .settings-navigation li { flex: 0 0 auto; }
  .settings-nav-link { min-width: 9rem; }
  .site-identity-grid { grid-template-columns: 1fr 1fr; }
  .site-day-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .page-title-row { grid-template-columns: 1fr; }
  .page-title-row .eyebrow { grid-column: 1; grid-row: 1; }
  .page-title-row h1 { grid-column: 1; grid-row: 2; }
  .page-title-row .page-description { grid-column: 1; grid-row: 3; }
  .page-title-row > .button { grid-column: 1; grid-row: 4; width: 100%; margin-top: 0; }
  .page-header-actions { display: grid; grid-column: 1; grid-row: 4; width: 100%; }
  .page-header-actions .button { width: 100%; }
  .site-identity-grid { grid-template-columns: 1fr; }
  .site-day-options { grid-template-columns: 1fr; }
  .site-exception-grid { grid-template-columns: 1fr; }
  /* 390 x 844 : le tableau des exceptions passe en cartes, comme la liste des
     sites, plutôt que de forcer un défilement horizontal dans une modale déjà
     contrainte. Chaque cellule porte son intitulé. */
  .site-exceptions-table-wrap { overflow: visible; border: 0; }
  .site-exceptions-table, .site-exceptions-table tbody { display: grid; gap: .6rem; }
  .site-exceptions-table thead { display: none; }
  .site-exceptions-table tr { display: grid; padding: .75rem; border: 1px solid var(--ui-border); border-radius: .6rem; background: var(--ui-surface-background); }
  .site-exceptions-table td { display: grid; grid-template-columns: minmax(4rem, .6fr) minmax(0, 1.4fr); gap: .6rem; padding: .3rem 0; border: 0; }
  .site-exceptions-table td::before { content: attr(data-label); color: var(--ui-text-secondary); font-size: .72rem; font-weight: 750; text-transform: uppercase; }
  .site-exception-row-actions { display: flex !important; flex-wrap: wrap; }
  .site-exception-row-actions::before { width: 100%; }
  .sites-table-wrap { overflow: visible; border: 0; background: transparent; }
  .sites-table, .sites-table tbody { display: grid; gap: .8rem; }
  .sites-table thead { display: none; }
  .sites-table tr { display: grid; padding: 1rem; border: 1px solid var(--ui-border); border-radius: .8rem; background: var(--ui-surface-background); }
  .sites-table td { display: grid; grid-template-columns: minmax(5rem, .7fr) minmax(0, 1.3fr); gap: .75rem; padding: .45rem 0; border: 0; }
  .sites-table td::before { content: attr(data-label); color: var(--ui-text-secondary); font-size: .75rem; font-weight: 750; text-transform: uppercase; }
  .site-row-actions { display: flex !important; }
  .site-row-actions::before { width: 100%; }
  .selected-site-badge { margin: .35rem 0 0; }
  .services-table-wrap { overflow: visible; border: 0; background: transparent; }
  .services-table, .services-table tbody { display: grid; gap: .8rem; }
  .services-table thead { display: none; }
  .services-table tr { display: grid; padding: 1rem; border: 1px solid var(--ui-border); border-radius: .8rem; background: var(--ui-surface-background); }
  .services-table td { display: grid; grid-template-columns: minmax(6rem, .75fr) minmax(0, 1.25fr); gap: .75rem; padding: .45rem 0; border: 0; }
  .services-table td::before { content: attr(data-label); color: var(--ui-text-secondary); font-size: .75rem; font-weight: 750; text-transform: uppercase; }
  .service-row-actions { display: flex !important; }
  .service-row-actions::before { width: 100%; }
  .service-sites-summary { min-width: 0; }
  .service-form { grid-template-columns: 1fr; }
  .service-site-options { grid-template-columns: 1fr; max-height: 14rem; }
}

@media (max-width: 900px) {
  .settings-layout, .settings-navigation, .settings-navigation ul { min-width: 0; max-width: 100%; }
}

@media (max-width: 900px) {
  .settings-layout { width: 100%; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
  .settings-navigation { width: 100%; overflow-x: auto; }
  .settings-navigation ul { width: max-content; max-width: none; }
}

.zone-site-selector { display: grid; gap: .35rem; max-width: 22rem; margin-bottom: 1.25rem; }
.zone-site-selector label { font-weight: 700; }
.zones-feedback { margin-bottom: 1rem; padding: .85rem 1rem; border: 1px solid var(--ui-border); border-left: 4px solid var(--brand-ink); border-radius: .65rem; background: var(--ui-info-background); }
.zones-feedback-error, .zones-state-error { color: var(--brand-alert); border-color: var(--brand-alert); border-left-color: var(--brand-alert); background: var(--brand-accent-light); }
.zones-state { padding: 1.5rem; border: 1px dashed var(--ui-border); border-radius: .85rem; background: var(--ui-surface-translucent); }
.zones-state h3 { margin: 0; }
.zones-state p { margin: .5rem 0 1rem; }
.zones-table-wrap { overflow-x: auto; border: 1px solid var(--ui-border); border-radius: 0 .85rem .85rem .85rem; background: var(--ui-surface-background); }
.zones-table { width: 100%; border-collapse: collapse; }
.zones-table th, .zones-table td { padding: .85rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ui-border); }
.zones-table th { color: var(--ui-text-secondary); font-size: .78rem; letter-spacing: .03em; text-transform: uppercase; background: var(--ui-surface-muted); }
.zones-table tbody tr:last-child td { border-bottom: 0; }
.zone-row-actions { white-space: nowrap; }
.zone-row-actions .button + .button {
  margin-left: .45rem;
}
.inline-warning-inline { color: var(--ui-text-secondary); font-style: italic; }
.zone-form-dialog { width: min(40rem, 100%); max-height: calc(100vh - 2rem); overflow: auto; padding: clamp(1rem, 3vw, 1.5rem); border-radius: .9rem; background: var(--ui-surface-background); box-shadow: var(--shadow); }
.zone-form { display: grid; grid-template-columns: minmax(8rem, .8fr) minmax(12rem, 1.5fr) minmax(9rem, .8fr); gap: 1rem; align-items: start; }
.zone-form .form-field:nth-child(4) { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .zone-form { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .zone-form { grid-template-columns: 1fr; }
  .zones-table-wrap { overflow: visible; border: 0; background: transparent; }
  .zones-table, .zones-table tbody { display: grid; gap: .8rem; }
  .zones-table thead { display: none; }
  .zones-table tr { display: grid; padding: 1rem; border: 1px solid var(--ui-border); border-radius: .8rem; background: var(--ui-surface-background); }
  .zones-table td { display: grid; grid-template-columns: minmax(6rem, .75fr) minmax(0, 1.25fr); gap: .75rem; padding: .45rem 0; border: 0; }
  .zones-table td::before { content: attr(data-label); color: var(--ui-text-secondary); font-size: .75rem; font-weight: 750; text-transform: uppercase; }
  .zone-row-actions { display: flex !important; }
  .zone-row-actions::before { width: 100%; }
}

.quota-banner { margin: .6rem 0 0; color: var(--ui-text-secondary); }
.quota-banner-reached { color: var(--brand-alert); font-weight: 700; }
.status-pending { color: var(--brand-accent-deep); background: var(--brand-cream); }
.members-feedback { margin-bottom: 1rem; padding: .85rem 1rem; border: 1px solid var(--ui-border); border-left: 4px solid var(--brand-ink); border-radius: .65rem; background: var(--ui-info-background); }
.members-feedback-error, .members-state-error { color: var(--brand-alert); border-color: var(--brand-alert); border-left-color: var(--brand-alert); background: var(--brand-accent-light); }
.members-state { padding: 1.5rem; border: 1px dashed var(--ui-border); border-radius: .85rem; background: var(--ui-surface-translucent); }
.members-state h3 { margin: 0; }
.members-state p { margin: .5rem 0 1rem; }
.members-table-wrap { overflow-x: auto; border: 1px solid var(--ui-border); border-radius: 0 .85rem .85rem .85rem; background: var(--ui-surface-background); }
.members-table { width: 100%; border-collapse: collapse; }
.members-table th, .members-table td { padding: .85rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ui-border); }
.members-table th { color: var(--ui-text-secondary); font-size: .78rem; letter-spacing: .03em; text-transform: uppercase; background: var(--ui-surface-muted); }
.members-table tbody tr:last-child td { border-bottom: 0; }
.member-row-actions { white-space: nowrap; }
.member-row-actions .button + .button {
  margin-left: .45rem;
}
.member-roles-summary { display: grid; gap: .35rem; min-width: min(16rem, 38vw); }
.member-role-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.role-chip { display: inline-flex; padding: .2rem .55rem; border-radius: 999px; color: var(--ui-info-text); font-size: .74rem; font-weight: 700; background: var(--ui-info-background); }
.member-historical-roles-details summary { width: fit-content; color: var(--ui-text-primary); cursor: pointer; font-weight: 700; }
.member-historical-roles-details ul, .member-historical-roles ul { margin: .5rem 0 0; padding-left: 1.25rem; color: var(--ui-text-secondary); }
.member-historical-roles { margin: 1rem 0; padding: .8rem 1rem; border: 1px dashed var(--ui-border); border-radius: .6rem; background: var(--ui-surface-muted); }
.member-form-dialog { width: min(42rem, 100%); max-height: calc(100vh - 2rem); overflow: auto; padding: clamp(1rem, 3vw, 1.5rem); border-radius: .9rem; background: var(--ui-surface-background); box-shadow: var(--shadow); }
.member-form { display: grid; gap: 1rem; }
.member-roles-fieldset, .member-scope-fieldset, .member-sites-fieldset { min-width: 0; margin: 0; padding: 1rem; border: 1px solid var(--ui-border); border-radius: .7rem; }
.member-roles-fieldset legend, .member-scope-fieldset legend, .member-sites-fieldset legend { padding: 0 .35rem; font-weight: 750; }
.member-sites-fieldset[hidden] { display: none; }
.member-role-options, .member-site-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; max-height: 15rem; overflow: auto; padding: .15rem; }
.member-scope-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.member-role-option, .member-scope-option, .member-site-option { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .65rem; align-items: start; padding: .65rem; border: 1px solid var(--ui-border); border-radius: .6rem; background: var(--ui-surface-muted); }
.member-role-option input, .member-scope-option input, .member-site-option input { margin-top: .25rem; }
.member-site-option span { display: grid; min-width: 0; }
.member-site-option strong, .member-site-option small { overflow-wrap: anywhere; }
.member-site-option small { margin-top: .18rem; color: var(--ui-text-secondary); }
.member-site-option:has(input:disabled), .member-role-option:has(input:disabled) { opacity: .68; }

@media (max-width: 900px) {
  .member-role-options, .member-site-options, .member-scope-options { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .members-table-wrap { overflow: visible; border: 0; background: transparent; }
  .members-table, .members-table tbody { display: grid; gap: .8rem; }
  .members-table thead { display: none; }
  .members-table tr { display: grid; padding: 1rem; border: 1px solid var(--ui-border); border-radius: .8rem; background: var(--ui-surface-background); }
  .members-table td { display: grid; grid-template-columns: minmax(6rem, .75fr) minmax(0, 1.25fr); gap: .75rem; padding: .45rem 0; border: 0; }
  .members-table td::before { content: attr(data-label); color: var(--ui-text-secondary); font-size: .75rem; font-weight: 750; text-transform: uppercase; }
  .member-row-actions { display: flex !important; }
  .member-row-actions::before { width: 100%; }
  .member-roles-summary { min-width: 0; }
}

.cleaning-plans-site { margin: .6rem 0 0; color: var(--ui-text-secondary); font-weight: 700; }
.cleaning-plans-feedback { margin-bottom: 1rem; padding: .85rem 1rem; border: 1px solid var(--ui-border); border-left: 4px solid var(--brand-ink); border-radius: .65rem; background: var(--ui-info-background); }
.cleaning-plans-feedback-error, .cleaning-plans-state-error { color: var(--brand-alert); border-color: var(--brand-alert); border-left-color: var(--brand-alert); background: var(--brand-accent-light); }
.cleaning-plans-state { padding: 1.5rem; border: 1px dashed var(--ui-border); border-radius: .85rem; background: var(--ui-surface-translucent); }
.cleaning-plans-state h3 { margin: 0; }
.cleaning-plans-state p { margin: .5rem 0 1rem; }
.cleaning-plans-table-wrap { overflow-x: auto; border: 1px solid var(--ui-border); border-radius: 0 .85rem .85rem .85rem; background: var(--ui-surface-background); }
.cleaning-plans-table { width: 100%; border-collapse: collapse; }
.cleaning-plans-table th, .cleaning-plans-table td { padding: .85rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ui-border); }
.cleaning-plans-table th { color: var(--ui-text-secondary); font-size: .78rem; letter-spacing: .03em; text-transform: uppercase; background: var(--ui-surface-muted); }
.cleaning-plans-table tbody tr:last-child td { border-bottom: 0; }
.cleaning-plan-row-actions { width: 1%; white-space: nowrap; }
.cleaning-plan-row-actions .button {
  display: block;
  width: 7rem;
  margin-left: auto;
  margin-right: auto;
}
.cleaning-plan-row-actions .button + .button {
  margin-top: .618rem;
}
.cleaning-plan-form-dialog { width: min(52rem, 100%); max-height: calc(100vh - 2rem); overflow: auto; padding: clamp(1rem, 3vw, 1.5rem); border-radius: .9rem; background: var(--ui-surface-background); box-shadow: var(--shadow); }
.cleaning-methods-dialog { width: min(48rem, 100%); max-height: calc(100vh - 2rem); overflow: auto; padding: clamp(1rem, 3vw, 1.5rem); border-radius: .9rem; background: var(--ui-surface-background); box-shadow: var(--shadow); }
.cleaning-method-add-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .75rem; margin-bottom: 1.25rem; }
.cleaning-methods-state { padding: 1.25rem; border: 1px dashed var(--ui-border); border-radius: .75rem; background: var(--ui-surface-translucent); }
.cleaning-methods-state h4 { margin: 0; }
.cleaning-methods-state p { margin: .5rem 0 1rem; }
.cleaning-methods-state-error { color: var(--brand-alert); border-style: solid; border-color: var(--brand-alert); background: var(--brand-accent-light); }
.cleaning-methods-table-wrap { overflow-x: auto; border: 1px solid var(--ui-border); border-radius: .75rem; background: var(--ui-surface-background); }
.cleaning-methods-table { width: 100%; border-collapse: collapse; }
.cleaning-methods-table th, .cleaning-methods-table td { padding: .8rem .9rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ui-border); }
.cleaning-methods-table th { color: var(--ui-text-secondary); font-size: .78rem; letter-spacing: .03em; text-transform: uppercase; background: var(--ui-surface-muted); }
.cleaning-methods-table tbody tr:last-child td { border-bottom: 0; }
.cleaning-methods-table tr[data-active="false"] { color: var(--ui-text-secondary); }
.cleaning-method-row-actions { white-space: nowrap; }
.cleaning-method-row-actions .button + .button { margin-left: .45rem; }
.cleaning-plan-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.cleaning-plan-form .form-field-wide { grid-column: 1 / -1; }
.cleaning-plan-tools-fieldset { grid-column: 1 / -1; min-width: 0; margin: 0; padding: 1rem; border: 1px solid var(--ui-border); border-radius: .7rem; }
.cleaning-plan-tools-fieldset legend { padding: 0 .35rem; font-weight: 750; }
.cleaning-plan-tool-options { display: grid; gap: .55rem; }
.cleaning-plan-tool-option { display: flex; gap: .55rem; align-items: flex-start; font-weight: 600; }
.cleaning-plan-tool-option input { margin-top: .2rem; }
.cleaning-plan-form textarea.field { min-height: 3.5rem; resize: vertical; }
.cleaning-plan-form .form-help { margin: .15rem 0 0; font-size: .8rem; }

@media (max-width: 900px) {
  .cleaning-plan-form { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .cleaning-method-add-form { grid-template-columns: 1fr; }
  .cleaning-method-add-form .button { width: 100%; }
  .cleaning-methods-table-wrap { overflow: visible; border: 0; background: transparent; }
  .cleaning-methods-table, .cleaning-methods-table tbody { display: grid; gap: .8rem; }
  .cleaning-methods-table thead { display: none; }
  .cleaning-methods-table tr { display: grid; padding: 1rem; border: 1px solid var(--ui-border); border-radius: .8rem; background: var(--ui-surface-background); }
  .cleaning-methods-table td { display: grid; grid-template-columns: minmax(5.5rem, .7fr) minmax(0, 1.3fr); gap: .75rem; padding: .45rem 0; border: 0; }
  .cleaning-methods-table td::before { content: attr(data-label); color: var(--ui-text-secondary); font-size: .75rem; font-weight: 750; text-transform: uppercase; }
  .cleaning-method-row-actions { display: flex !important; flex-wrap: wrap; }
  .cleaning-method-row-actions::before { width: 100%; }
  .cleaning-plans-table-wrap { overflow: visible; border: 0; background: transparent; }
  .cleaning-plans-table, .cleaning-plans-table tbody { display: grid; gap: .8rem; }
  .cleaning-plans-table thead { display: none; }
  .cleaning-plans-table tr { display: grid; padding: 1rem; border: 1px solid var(--ui-border); border-radius: .8rem; background: var(--ui-surface-background); }
  .cleaning-plans-table td { display: grid; grid-template-columns: minmax(6rem, .75fr) minmax(0, 1.25fr); gap: .75rem; padding: .45rem 0; border: 0; }
  .cleaning-plans-table td::before { content: attr(data-label); color: var(--ui-text-secondary); font-size: .75rem; font-weight: 750; text-transform: uppercase; }
  .cleaning-plan-row-actions { display: flex !important; }
  .cleaning-plan-row-actions::before { width: 100%; }
}

/* Rétablie avec la feuille de style : `.form-field { display: grid }` (ci-dessus)
   l'emporte sur la règle `[hidden] { display: none }` du user-agent, donc la case
   de confirmation de retrait du service ne se masquerait pas réellement sans
   cette règle explicite (voir 0059 §7.1.1, même piège que
   `.member-sites-fieldset[hidden]` en 0058). */
.cleaning-plan-form .form-field-wide[hidden] { display: none; }

.checklist-site { margin: .6rem 0 0; color: var(--ui-text-secondary); font-weight: 700; }
.checklist-feedback { margin-bottom: 1rem; padding: .85rem 1rem; border: 1px solid var(--ui-border); border-left: 4px solid var(--brand-ink); border-radius: .65rem; background: var(--ui-info-background); }
.checklist-feedback-error, .checklist-state-error { color: var(--brand-alert); border-color: var(--brand-alert); border-left-color: var(--brand-alert); background: var(--brand-accent-light); }
.checklist-state { padding: 1.5rem; border: 1px dashed var(--ui-border); border-radius: .85rem; background: var(--ui-surface-translucent); }
.checklist-state h3 { margin: 0; }
.checklist-state p { margin: .5rem 0 1rem; }
.checklist-table-wrap { overflow-x: auto; border: 1px solid var(--ui-border); border-radius: 0 .85rem .85rem .85rem; background: var(--ui-surface-background); }
.checklist-table { width: 100%; border-collapse: collapse; }
.checklist-table th, .checklist-table td { padding: .85rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ui-border); }
.checklist-table th { color: var(--ui-text-secondary); font-size: .78rem; letter-spacing: .03em; text-transform: uppercase; background: var(--ui-surface-muted); }
.checklist-table tbody tr:last-child td { border-bottom: 0; }
.status-standard { color: var(--brand-ink-soft); background: var(--brand-ink-light); }
.status-critical { color: var(--brand-alert); background: var(--brand-accent-light); }
.checklist-row-actions { white-space: nowrap; }
.checklist-row-actions .button + .button {
  margin-left: .45rem;
}
.checklist-form-dialog { width: min(46rem, 100%); max-height: calc(100vh - 2rem); overflow: auto; padding: clamp(1rem, 3vw, 1.5rem); border-radius: .9rem; background: var(--ui-surface-background); box-shadow: var(--shadow); }
.checklist-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.checklist-form .form-field-wide { grid-column: 1 / -1; }
.checklist-form .form-help { margin: .15rem 0 0; font-size: .8rem; }
.checklist-critical-field { grid-template-columns: auto 1fr; align-items: center; }
.checklist-critical-field .form-help { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .checklist-form { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .checklist-table-wrap { overflow: visible; border: 0; background: transparent; }
  .checklist-table, .checklist-table tbody { display: grid; gap: .8rem; }
  .checklist-table thead { display: none; }
  .checklist-table tr { display: grid; padding: 1rem; border: 1px solid var(--ui-border); border-radius: .8rem; background: var(--ui-surface-background); }
  .checklist-table td { display: grid; grid-template-columns: minmax(6rem, .75fr) minmax(0, 1.25fr); gap: .75rem; padding: .45rem 0; border: 0; }
  .checklist-table td::before { content: attr(data-label); color: var(--ui-text-secondary); font-size: .75rem; font-weight: 750; text-transform: uppercase; }
  .checklist-row-actions { display: flex !important; }
  .checklist-row-actions::before { width: 100%; }
}

/* Nettoyage opérationnel (V2-03b) — lecture seule des occurrences.
   Volontairement en cartes et non en tableau : chaque occurrence porte une
   dizaine de champs métier, dont des consignes multilignes, qu'aucune grille
   large ne peut présenter honnêtement sur un écran de 390 px. */
.cleaning-workflow-header { max-width: none; }
.cleaning-workflow-site { margin: .6rem 0 0; color: var(--ui-text-secondary); font-weight: 700; }
.cleaning-workflow-content { max-width: 76rem; margin-top: 0; }
.cleaning-window-form { margin: 0 0 1.5rem; padding: clamp(1rem, 3vw, 1.35rem); border: 1px solid var(--ui-border); border-radius: .85rem; background: var(--ui-surface-background); box-shadow: var(--shadow); }
.cleaning-window-title { margin: 0; font-size: 1.05rem; }
.cleaning-window-form .form-help { margin: .4rem 0 1rem; font-size: .85rem; }
.cleaning-window-fields { display: flex; flex-wrap: wrap; align-items: start; gap: 1rem; }
.cleaning-window-fields .form-field { min-width: min(11rem, 100%); }
.cleaning-window-submit { margin-top: 1.55rem; }
/* Le champ texte reste la seule valeur visible ; le sélecteur natif auxiliaire
   n'est qu'un rail pour showPicker() et se superpose au bouton calendrier sans
   jamais l'intercepter (voir cleaning-workflow-view.js). */
.cleaning-window-control { position: relative; display: flex; align-items: center; gap: .4rem; }
.cleaning-window-control .field { min-width: 0; flex: 1 1 auto; }
.cleaning-window-calendar {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: .35rem .5rem;
}
.cleaning-window-calendar img {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
}
/*.cleaning-window-calendar { flex: 0 0 auto; min-width: 2.75rem; min-height: 2.75rem; padding: .35rem .5rem; font-size: 1.05rem; line-height: 1; }*/
.cleaning-window-picker { position: absolute; right: 0; bottom: 0; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.cleaning-window-picker-visible { opacity: 1; pointer-events: auto; }
.cleaning-workflow-state { padding: 1.5rem; border: 1px dashed var(--ui-border); border-radius: .85rem; background: var(--ui-surface-translucent); }
.cleaning-workflow-state h3 { margin: 0 0 .5rem; }
.cleaning-workflow-state p { margin: 0 0 .25rem; }
.cleaning-workflow-state .button { margin-top: 1rem; }
.cleaning-workflow-state-error { color: var(--brand-alert); border-style: solid; border-color: var(--brand-alert); background: var(--brand-accent-light); }
.cleaning-occurrences-count { margin: 0 0 1rem; color: var(--ui-text-secondary); font-weight: 700; }
.cleaning-occurrence-groups { display: grid; gap: 1.5rem; }
.cleaning-occurrence-group { display: grid; gap: .75rem; }
.cleaning-occurrence-group-title { margin: 0; font-size: 1.2rem; }
.cleaning-occurrence-group-overdue { padding: clamp(.85rem, 2vw, 1.15rem); border: 1px solid var(--brand-alert); border-radius: .85rem; background: var(--brand-accent-light); }
.cleaning-occurrence-group-overdue .cleaning-occurrence-group-title { color: var(--brand-alert); }
/* V2-04b — Inspection module (read states only; the detailed list arrives
   with V2-04c). Deliberately mirrors .cleaning-workflow-state rather than
   reusing it: the two modules stay free to diverge independently. */
.inspection-workflow-header { max-width: none; }
.inspection-workflow-content { max-width: 76rem; margin-top: 0; }
.inspection-workflow-site { margin: .35rem 0 0; color: var(--ui-text-secondary); font-size: .95rem; }
.inspection-workflow-state { padding: 1.5rem; border: 1px dashed var(--ui-border); border-radius: .85rem; background: var(--ui-surface-translucent); }
.inspection-workflow-state h2 { margin: 0 0 .5rem; font-size: 1.15rem; }
.inspection-workflow-state p { margin: 0 0 .25rem; }
.inspection-workflow-state .button { margin-top: 1rem; }
.inspection-workflow-state-error { color: var(--brand-alert); border-style: solid; border-color: var(--brand-alert); background: var(--brand-accent-light); }
.inspection-count { margin: 0 0 1.25rem; color: var(--ui-text-secondary); font-weight: 700; }

/* Registre et mutations Écarts & Actions V2-05h. */
.issues-workflow-header { max-width: none; display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 1rem; }
.issues-workflow-site, .issues-workflow-period { margin: .35rem 0 0; color: var(--ui-text-secondary); font-size: .95rem; }
.issues-workflow-content { display: grid; gap: 1.5rem; max-width: 76rem; margin-top: 0; }
.issues-workflow-state { padding: 1.25rem; border: 1px dashed var(--ui-border); border-radius: .85rem; background: var(--ui-surface-translucent); }
.issues-workflow-state h2 { margin: 0 0 .5rem; font-size: 1.1rem; }
.issues-workflow-state p { margin: 0; }
.issues-workflow-state .button { margin-top: 1rem; }
.issues-workflow-state-error { color: var(--brand-alert); border-style: solid; border-color: var(--brand-alert); background: var(--brand-accent-light); }
.issues-window-notice { margin: 0; padding: .85rem 1rem; border-left: 4px solid var(--brand-ink); border-radius: .55rem; color: var(--ui-info-text); background: var(--ui-info-background); }
.issues-register { display: grid; gap: 1rem; }
.issues-register > h2 { margin: 0; }
.issues-filters { display: flex; flex-wrap: wrap; align-items: end; gap: .8rem; padding: 1rem; border: 1px solid var(--ui-border); border-radius: .85rem; background: var(--ui-surface-background); box-shadow: var(--shadow); }
.issues-filter-field { display: grid; gap: .3rem; min-width: min(12rem, 100%); }
.issues-filter-label { color: var(--ui-text-secondary); font-size: .78rem; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; }
.issues-filters-reset { margin-left: auto; }
.issues-count { margin: 0; color: var(--ui-text-secondary); font-weight: 700; }
.issues-card-list { display: grid; gap: 1rem; }
.issues-card {
  padding: clamp(1rem, 3vw, 1.35rem);
  border: 1px solid var(--ui-border);
  border-left: 4px solid var(--brand-ink);
  border-radius: 0 .85rem .85rem 0;
  background: var(--ui-surface-background);
}
.issues-action-card { border-left-color: var(--brand-accent-deep); }
.issues-card-head { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: .75rem; }
.issues-card-head h3 { margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.issues-badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.issues-badges .status-badge, .issues-assignee .status-badge { margin-left: 0; }
.issues-severity-minor { color: var(--ui-text-secondary); background: var(--ui-surface-muted); }
.issues-severity-major, .issues-status-completed, .issues-source { color: var(--brand-accent-deep); background: var(--brand-cream); }
.issues-severity-critical, .issues-overdue, .issues-stale-summary { color: var(--brand-alert); background: var(--brand-accent-light); }
.issues-status-open { color: var(--ui-info-text); background: var(--ui-info-background); }
.issues-status-closed, .issues-status-verified { color: var(--brand-valid); background: var(--brand-valid-soft); }
.issues-parent-hidden { color: var(--ui-text-secondary); background: var(--ui-surface-muted); }
.issues-description { margin: .9rem 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.issues-card-details { display: grid; grid-template-columns: minmax(9rem, .55fr) minmax(0, 1.45fr); gap: .35rem .9rem; margin: 1rem 0; }
.issues-card-details dt { color: var(--ui-text-secondary); font-size: .76rem; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; }
.issues-card-details dd { margin: 0; overflow-wrap: anywhere; }
.issues-assignees-title { margin: 0 0 .5rem; font-size: .95rem; }
.issues-service-owner { margin: 0; color: var(--ui-text-secondary); }
.issues-assignee-list, .issues-stale-causes { margin: 0; padding-left: 1.25rem; }
.issues-assignee { margin: .4rem 0; }
.issues-assignee-name { margin-right: .5rem; font-weight: 700; }
.issues-stale-causes { margin-top: .35rem; color: var(--brand-alert); font-size: .85rem; }
.issues-load-older { justify-self: start; }
.issues-header-actions, .issues-card-actions, .issues-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; }
.issues-card-actions { margin-top: 1rem; }
.issues-feedback { margin: 0; padding: .85rem 1rem; border: 1px solid var(--ui-border); border-radius: .65rem; background: var(--ui-surface-muted); }
.issues-feedback-success { color: var(--brand-valid); background: var(--brand-valid-soft); }
.issues-feedback-warning { color: var(--brand-alert); background: var(--brand-accent-light); }
.issues-mutation-panel { display: grid; gap: 1rem; max-width: 46rem; padding: clamp(1rem, 3vw, 1.5rem); border: 1px solid var(--ui-border); border-radius: .85rem; background: var(--ui-surface-background); box-shadow: var(--shadow); }
.issues-mutation-panel > h2, .issues-conflict h3, .issues-uncertain h3, .issues-exit-confirmation h3, .issues-cancel-confirmation h3 { margin: 0; }
.issues-form { display: grid; gap: 1rem; }
.issues-form-field { display: grid; gap: .35rem; }
.issues-assignments { display: grid; gap: .65rem; margin: 0; padding: .85rem; border: 1px solid var(--ui-border); border-radius: .45rem; }
.issues-assignments legend { padding: 0 .25rem; font-weight: 700; }
.issues-assignment-option, .issues-assignment-candidate { display: flex; align-items: flex-start; gap: .55rem; }
.issues-assignment-candidates { display: grid; gap: .5rem; padding-left: 1.5rem; }
.issues-assignment-guidance, .issues-assignment-status, .issues-assignment-empty, .issues-assignment-error p { margin: 0; }
.issues-assignment-candidate-unavailable { color: var(--ui-text-secondary); }
.issues-field-error, .issues-form-error, .issues-close-guidance { margin: 0; }
.issues-conflict, .issues-uncertain, .issues-exit-confirmation, .issues-cancel-confirmation { display: grid; gap: .75rem; padding: 1rem; border-radius: .65rem; }
.issues-server-payload { max-height: 18rem; margin: .65rem 0 0; padding: .75rem; overflow: auto; border-radius: .4rem; background: var(--ui-surface-muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.issues-assignee-service-warning { margin: -.35rem 0 0; }

@media (max-width: 640px) {
  .issues-workflow-header { display: grid; }
  .issues-filters, .issues-filter-field { display: grid; width: 100%; }
  .issues-filters-reset { margin-left: 0; }
  .issues-card-details { grid-template-columns: 1fr; }
  .issues-card-details dd { margin-bottom: .5rem; }
  .issues-header-actions, .issues-card-actions, .issues-form-actions { display: grid; width: 100%; }
}

/* V2-04c — Inspection list (cards, filters) and read-only detail. Cards
   rather than a table, exactly like Nettoyage: each inspection carries
   several optional business fields that no wide grid can present honestly on
   a 390 px screen. */
.inspection-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem; margin: 0 0 1.25rem; padding: clamp(.9rem, 3vw, 1.25rem); border: 1px solid var(--ui-border); border-radius: .85rem; background: var(--ui-surface-background); box-shadow: var(--shadow); }
.inspection-filter-field { min-width: min(16rem, 100%); }
.inspection-filters-reset { flex: 0 0 auto; }
.inspection-filtered-count { margin: 0 0 1rem; color: var(--ui-text-secondary); font-weight: 700; }
.inspection-filtered-empty { padding: 1.5rem; border: 1px dashed var(--ui-border); border-radius: .85rem; background: var(--ui-surface-translucent); }
.inspection-filtered-empty p { margin: 0 0 1rem; }
.inspection-card-list { display: grid; gap: 1rem; }
.inspection-card { padding: clamp(1rem, 3vw, 1.35rem); border: 1px solid var(--ui-border); border-left: 4px solid var(--brand-ink); border-radius: 0 .85rem .85rem 0; background: var(--ui-surface-background); }
.inspection-card-head { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: .75rem; }
.inspection-card-heading h3 { margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.inspection-card-details { display: grid; grid-template-columns: minmax(7rem, .5fr) minmax(0, 1.5fr); gap: .35rem .9rem; margin: 1rem 0; }
.inspection-card-details dt { color: var(--ui-text-secondary); font-size: .78rem; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; }
.inspection-card-details dd { margin: 0; overflow-wrap: anywhere; }
.inspection-card-consult { min-height: 2.7rem; }
.inspection-status-draft { color: var(--brand-ink-soft); background: var(--brand-ink-light); }
.inspection-status-completed { color: var(--brand-accent-deep); background: var(--brand-cream); }
.inspection-status-validated { color: var(--brand-valid); background: var(--brand-valid-soft); }
.inspection-status-closed { color: var(--ui-on-strong); background: var(--brand-ink); }
.inspection-status-archived { color: var(--ui-text-secondary); background: var(--ui-surface-muted); }

/* Detail consultation — replaces the list in place, exactly as a single
   integrated panel rather than a modal (section 7 of the mission). */
.inspection-detail { display: grid; gap: 1.25rem; }
.inspection-detail-back { justify-self: start; }
.inspection-detail-heading { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.inspection-detail-heading h2 { margin: 0; font-size: 1.35rem; }
.inspection-detail-summary { display: grid; grid-template-columns: minmax(8rem, .5fr) minmax(0, 1.5fr); gap: .4rem 1rem; margin: 0; padding: clamp(1rem, 3vw, 1.35rem); border: 1px solid var(--ui-border); border-radius: .85rem; background: var(--ui-surface-background); }
.inspection-detail-summary dt { color: var(--ui-text-secondary); font-size: .78rem; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; }
.inspection-detail-summary dd { margin: 0; overflow-wrap: anywhere; }
.inspection-detail-section h3 { margin: 0 0 .6rem; font-size: 1.05rem; }
.inspection-detail-observations-text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.inspection-detail-item-list { display: grid; gap: .85rem; margin: 0; padding: 0; list-style: none; }
.inspection-detail-item { padding: clamp(.85rem, 3vw, 1.1rem); border: 1px solid var(--ui-border); border-radius: .7rem; background: var(--ui-surface-muted); }
.inspection-detail-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.inspection-detail-item-title { font-weight: 750; }
.inspection-answer-response { color: var(--ui-info-text); background: var(--ui-info-background); }
.inspection-answer-critical { color: var(--brand-alert); background: var(--brand-accent-light); }
.inspection-detail-item-fields { display: grid; grid-template-columns: minmax(7rem, .5fr) minmax(0, 1.5fr); gap: .3rem .9rem; margin: 0; }
.inspection-detail-item-fields dt { color: var(--ui-text-secondary); font-size: .76rem; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; }
.inspection-detail-item-fields dd { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }

/* V2-04d — Draft creation: confirmation/coherence banner, and the create
   form panel, which replaces the list in place exactly like the detail
   consultation above (an integrated panel, never a modal). */
.inspection-feedback { margin: 0 0 1.25rem; padding: .85rem 1rem; border: 1px solid var(--ui-border); border-left: 4px solid var(--brand-ink); border-radius: .65rem; background: var(--ui-info-background); overflow-wrap: anywhere; }
.inspection-feedback-error { color: var(--brand-alert); border-color: var(--brand-alert); border-left-color: var(--brand-alert); background: var(--brand-accent-light); }
.inspection-create-panel { display: grid; gap: 1.25rem; }
.inspection-create-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; padding: clamp(1rem, 3vw, 1.35rem); border: 1px solid var(--ui-border); border-radius: .85rem; background: var(--ui-surface-background); }
.form-field-static-label { display: block; color: var(--ui-text-secondary); font-size: .78rem; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; }
.form-field-static-value { margin: .25rem 0 0; overflow-wrap: anywhere; }
.inspection-create-form { display: grid; grid-template-columns: minmax(10rem, .6fr) minmax(12rem, 1fr); gap: 1rem; align-items: start; }
.inspection-create-form textarea.field { min-height: 5rem; resize: vertical; }
.inspection-create-form .form-actions { grid-column: 1 / -1; }

/* V2-04e — Answer entry for a draft. Same integrated-panel convention as the
   detail and the create form (never a modal), and the same shared design
   tokens: no local colour is declared anywhere below, every value comes from
   the --ui--brand-- variables the V2 themes own. */
.inspection-edit-panel { display: grid; gap: 1.25rem; }
.inspection-edit-form { display: grid; gap: 1rem; }
.inspection-edit-summary { margin: 0; font-weight: 750; }
.inspection-edit-confirm { padding: .85rem 1rem; border: 1px solid var(--brand-alert); border-left: 4px solid var(--brand-alert); border-radius: .65rem; background: var(--brand-accent-light); color: var(--brand-alert); }
.inspection-edit-confirm p { margin: 0 0 .75rem; overflow-wrap: anywhere; }
.inspection-answer-list { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.inspection-answer-fieldset { display: grid; gap: .75rem; margin: 0; padding: clamp(.85rem, 3vw, 1.15rem); border: 1px solid var(--ui-border); border-left: 4px solid var(--ui-border); border-radius: .85rem; background: var(--ui-surface-background); min-width: 0; }
.inspection-answer-is-critical .inspection-answer-fieldset { border-left-color: var(--brand-alert); }
.inspection-answer-legend { display: grid; gap: .2rem; padding: 0; max-width: 100%; }
.inspection-answer-code { display: block; color: var(--ui-text-secondary); font-size: .78rem; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; overflow-wrap: anywhere; }
.inspection-answer-point { display: block; font-weight: 750; overflow-wrap: anywhere; }
.inspection-answer-badges { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
.inspection-answer-weight { color: var(--ui-text-secondary); background: var(--ui-surface-muted); }
.inspection-answer-new { color: var(--ui-info-text); background: var(--ui-info-background); }
.inspection-answer-context { margin: 0; color: var(--ui-text-secondary); font-size: .85rem; overflow-wrap: anywhere; }
.inspection-answer-response-label { display: block; color: var(--ui-text-secondary); font-size: .78rem; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; margin-bottom: .35rem; }
.inspection-answer-responses { display: flex; flex-wrap: wrap; gap: .5rem; }
.inspection-answer-choice { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.5rem; padding: .35rem .7rem; border: 1px solid var(--ui-border); border-radius: .65rem; background: var(--ui-surface-muted); cursor: pointer; }
.inspection-answer-choice:focus-within { outline: 2px solid var(--brand-ink); outline-offset: 2px; }
.inspection-answer-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; }
.inspection-answer-fieldset textarea.field { min-height: 3.5rem; resize: vertical; }
.inspection-answer-notice { margin: 0; color: var(--ui-text-secondary); font-size: .85rem; overflow-wrap: anywhere; }
.inspection-edit-historical h3 { margin: 0 0 .6rem; font-size: 1.05rem; }
/* V2-04e-r1 — a recorded answer preserved read-only on an active point. The
   dashed edge and the muted surface distinguish it from an editable point
   WITHOUT being the only signal: the sentence above it says so in words. */
.inspection-answer-preserved { border-style: dashed; background: var(--ui-surface-muted); }
.inspection-answer-preserved-notice { margin: 0; color: var(--ui-text-secondary); font-size: .85rem; overflow-wrap: anywhere; }

/* V2-04f-b — the update conflict panel. Same integrated-panel convention as
   everything else in this module (never a modal), same shared tokens, and the
   same rule as the critical-point badge: the alert edge is never the only
   signal - the title, the message and the two invariant sentences say it in
   words. */
.inspection-edit-conflict { display: grid; gap: .85rem; padding: clamp(1rem, 3vw, 1.35rem); border: 1px solid var(--brand-alert); border-left: 4px solid var(--brand-alert); border-radius: .85rem; background: var(--ui-surface-background); min-width: 0; }
.inspection-edit-conflict h3 { margin: 0; font-size: 1.1rem; color: var(--brand-alert); }
.inspection-conflict-message { margin: 0; font-weight: 750; overflow-wrap: anywhere; }
.inspection-conflict-facts { display: grid; gap: .35rem; margin: 0; padding-left: 1.15rem; }
.inspection-conflict-facts li { overflow-wrap: anywhere; }
.inspection-conflict-actions { flex-wrap: wrap; }
.inspection-conflict-busy { margin: 0; color: var(--ui-text-secondary); font-size: .9rem; overflow-wrap: anywhere; }
/* V2-04h-c — the shared "a mutation is in flight" region. It genuinely receives
   focus (restoreFocus falls back to it when the control that was pressed can no
   longer take it), so it must show a focus ring like any other target: the
   outline is left to the sheet's own :focus-visible rules rather than removed. */
.inspection-mutation-status { margin: 0; color: var(--ui-text-secondary); font-size: .95rem; overflow-wrap: anywhere; }
.inspection-conflict-server-state { display: grid; gap: .75rem; padding: clamp(.85rem, 3vw, 1.15rem); border: 1px solid var(--ui-border); border-radius: .7rem; background: var(--ui-surface-muted); min-width: 0; }
.inspection-conflict-server-state h4 { margin: 0; font-size: 1rem; }
/* A readonly answer stays readable and selectable - the muted surface says it
   is not editable without removing the contrast its text needs. */
.inspection-edit-form .field[readonly] { background: var(--ui-surface-muted); color: var(--ui-text-primary); }

/* V2-04g-b — the two finalization panels. Same integrated-panel convention as
   the conflict panel above (never a modal), same shared tokens, and the same
   rule: the coloured edge is never the only signal - the heading and every
   listed line say in words what is wrong and what it blocks.
   The blockers panel borrows the alert edge (it refuses an action); the
   recurrence confirmation borrows the accent one (it asks a question whose
   answers are both legitimate). */
.inspection-finalization-blockers { display: grid; gap: .85rem; padding: clamp(1rem, 3vw, 1.35rem); border: 1px solid var(--brand-alert); border-left: 4px solid var(--brand-alert); border-radius: .85rem; background: var(--ui-surface-background); min-width: 0; }
.inspection-finalization-blockers h3 { margin: 0; font-size: 1.1rem; color: var(--brand-alert); }
.inspection-finalization-blockers p { margin: 0; overflow-wrap: anywhere; }
.inspection-finalization-blocker-list, .inspection-finalization-warning-list { display: grid; gap: .35rem; margin: 0; padding-left: 1.15rem; }
.inspection-finalization-blocker-list li, .inspection-finalization-warning-list li { overflow-wrap: anywhere; }
/* A blocker that names a point is a real button (it moves focus onto that
   point), but it reads as the sentence it is: left-aligned, wrapping, and
   never padded like a call to action sitting in a row of them. */
.inspection-finalization-blocker-link { width: 100%; padding: .25rem 0; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.inspection-finalization-confirm { border-color: var(--brand-accent); border-left-color: var(--brand-accent); color: var(--ui-text-primary); }
.inspection-finalization-confirm h3 { margin: 0 0 .5rem; font-size: 1.1rem; }
.inspection-finalization-confirm .inspection-finalization-warning-list { margin-bottom: .75rem; }

@media (max-width: 640px) {
  .inspection-filters { flex-direction: column; align-items: stretch; }
  .inspection-filter-field { min-width: 0; }
  .inspection-filters-reset { width: 100%; }
  .inspection-create-form { grid-template-columns: 1fr; }
  .inspection-card-details, .inspection-detail-summary, .inspection-detail-item-fields { grid-template-columns: 1fr; gap: .15rem; }
  .inspection-card-details dd, .inspection-detail-summary dd, .inspection-detail-item-fields dd { margin-bottom: .55rem; }
  .inspection-answer-responses { flex-direction: column; align-items: stretch; }
  .inspection-answer-actions { grid-template-columns: 1fr; }
}
.cleaning-occurrence-list { display: grid; gap: 1rem; }
.cleaning-occurrence {
  padding: clamp(1rem, 3vw, 1.35rem);
  border: 1px solid var(--ui-border);
  border-left: 6px solid var(--ui-border);
  border-radius: 0 .85rem .85rem 0;
  background: var(--ui-surface-background);
}.cleaning-occurrence-planned { border-left-color: var(--brand-ink); }
.cleaning-occurrence-in_progress { border-left-color: var(--brand-accent); }
.cleaning-occurrence-done { border-left-color: var(--brand-valid); }
.cleaning-occurrence-cancelled { border-left-color: var(--brand-alert); }
.cleaning-occurrence-overdue { border-color: var(--brand-alert); border-left-color: var(--brand-alert); box-shadow: var(--shadow); }
.cleaning-occurrence-head { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: .75rem; }
.cleaning-occurrence-heading { min-width: 0; }
.cleaning-occurrence-heading h3 { margin: 0; font-size: 1.08rem; overflow-wrap: anywhere; }
.cleaning-occurrence-heading p { margin: .2rem 0 0; font-size: .85rem; }
.cleaning-occurrence-badges { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.cleaning-occurrence-date { color: var(--ui-text-secondary); font-size: .85rem; font-weight: 700; }
.cleaning-occurrence-badges .status-badge { margin-left: 0; }
.cleaning-status-planned { color: var(--brand-ink-soft); background: var(--brand-ink-light); }
.cleaning-status-in_progress { color: var(--brand-accent-deep); background: var(--brand-cream); }
.cleaning-status-done { color: var(--brand-valid); background: var(--brand-valid-soft); }
.cleaning-status-cancelled { color: var(--brand-alert); background: var(--brand-accent-light); }
.cleaning-status-overdue { color: var(--brand-alert); background: var(--ui-surface-background); outline: 1px solid var(--brand-alert); }
.cleaning-occurrence-cancellation { margin: .9rem 0 0; border-left-color: var(--brand-alert); background: var(--brand-accent-light); }
.cleaning-occurrence-details { display: grid; grid-template-columns: minmax(7rem, .5fr) minmax(0, 1.5fr); gap: .35rem .9rem; margin: 1rem 0 0; }
.cleaning-occurrence-details dt { color: var(--ui-text-secondary); font-size: .78rem; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; }
.cleaning-occurrence-details dd { margin: 0; overflow-wrap: anywhere; }
.cleaning-instructions-detail { margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--ui-border); }
.cleaning-instructions-summary { color: var(--brand-ink); font-weight: 750; cursor: pointer; }
.cleaning-instructions-summary:hover { color: var(--brand-accent-deep); }
.cleaning-instructions-list { display: grid; grid-template-columns: minmax(8rem, .5fr) minmax(0, 1.5fr); gap: .55rem .9rem; margin: .85rem 0 0; }
.cleaning-instructions-list dt { color: var(--ui-text-secondary); font-size: .78rem; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; }
.cleaning-instructions-list dd { margin: 0; overflow-wrap: anywhere; }
.cleaning-instructions-text { white-space: pre-line; }
.cleaning-instructions-tools { margin: 0; padding-left: 1.2rem; }
.cleaning-instructions-tools li + li { margin-top: .2rem; }
.cleaning-instructions-caution, .cleaning-instructions-precaution { padding: .45rem .6rem; border-left: 3px solid var(--brand-accent); background: var(--brand-cream); }
.cleaning-instructions-precaution { border-left-color: var(--brand-ink); background: var(--brand-ink-light); }
.cleaning-origin-rework { color: var(--brand-accent-deep); background: var(--brand-cream); }

/* Lot 8 — projection locale, en lecture seule, des réalisations canoniques. */
.cleaning-history-section { margin-top: 2rem; padding-top: 1.5rem; border-top: 2px solid var(--ui-border); }
.cleaning-history-section h2 { margin: 0; }
.cleaning-history-section > .form-help { margin: .4rem 0 1rem; color: var(--ui-text-secondary); }
/* Lot 13 — le Journal n'a plus qu'UN bloc de contrôle : la période et les six
   filtres partagent la même grille, dans le même cadre. Cinq colonnes fixes
   plutôt qu'un flux : c'est ce qui garantit que Ponctualité et les deux dates
   se retrouvent ensemble sur la deuxième ligne, au lieu de se réarranger au
   gré des largeurs de libellés. */
.cleaning-journal-controls-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; gap: .85rem; }
/* Trois colonnes avant que cinq ne deviennent illisibles : les dates restent
   alors ensemble sur leur propre ligne, avec Réinitialiser. */
@media (max-width: 1080px) { .cleaning-journal-controls-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cleaning-history-filter-field { min-width: 0; }
.cleaning-history-reset { min-height: 2.75rem; }
.cleaning-history-count { margin: 0 0 .75rem; color: var(--ui-text-secondary); font-weight: 700; }
.cleaning-data-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--ui-border);
  border-radius: .85rem;
  background: var(--ui-surface-muted);
}
.cleaning-data-table { width: 100%; min-width: 72rem; border-collapse: collapse; }
.cleaning-data-table th, .cleaning-data-table td { padding: .8rem .85rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ui-border); }
.cleaning-data-table th { color: var(--ui-text-secondary); font-size: .75rem; letter-spacing: .03em; text-transform: uppercase; background: var(--ui-surface-muted); }
.cleaning-data-table tbody tr:last-child td { border-bottom: 0; }
.cleaning-data-table td { overflow-wrap: anywhere; }
.cleaning-history-plan-name, .cleaning-history-plan-reference { display: block; }
.cleaning-history-plan-name { font-weight: 700; }
.cleaning-history-plan-reference { margin-top: .2rem; color: var(--ui-text-secondary); font-size: .78rem; }
.cleaning-history-result-conforme { color: var(--brand-valid); background: var(--brand-valid-soft); text-align: center; justify-content: center; }
.cleaning-history-result-non_conforme { color: var(--brand-alert); background: var(--brand-accent-light); text-align: center; justify-content: center; }
/* 0079 — « Non réalisé » est un manquement à signaler : il prend l'orange
   existant de la charte MC Pilot, celui déjà porté par .cleaning-badge-warning,
   et aucune couleur nouvelle n'est introduite. « Non applicable » reste
   volontairement neutre : ce n'est pas un manquement, et les teinter pareil
   referait la confusion entre « pas fait » et « ne s'applique pas ». */
.cleaning-history-result-non_realise { color: var(--brand-accent-deep); background: var(--brand-cream); }
.cleaning-history-result-non_applicable { color: var(--ui-text-secondary); background: var(--ui-surface-muted); }
.cleaning-history-punctuality-on_time { color: var(--brand-valid); background: var(--brand-valid-soft); }
.cleaning-history-punctuality-late { color: var(--brand-alert); background: var(--brand-accent-light); }

@media (max-width: 640px) {
  .cleaning-window-fields { display: grid; grid-template-columns: 1fr; }
  .cleaning-window-fields .form-field { min-width: 0; }
  .cleaning-window-submit { width: 100%; margin-top: .25rem; }
  .cleaning-occurrence-details { grid-template-columns: 1fr; gap: .1rem; }
  .cleaning-occurrence-details dd { margin-bottom: .55rem; }
  .cleaning-instructions-list { grid-template-columns: 1fr; gap: .15rem; }
  .cleaning-instructions-list dd { margin-bottom: .55rem; }
  .cleaning-journal-controls-grid { grid-template-columns: 1fr; }
  .cleaning-history-reset { width: 100%; }
  .cleaning-data-table-wrap { overflow: visible; border: 0; background: transparent; }
  .cleaning-data-table { min-width: 0; }
  .cleaning-data-table, .cleaning-data-table tbody { display: grid; gap: .8rem; }
  .cleaning-data-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .cleaning-data-table tr { display: grid; padding: 1rem; border: 1px solid var(--ui-border); border-radius: .8rem; background: var(--ui-surface-background); }
  .cleaning-data-table td { display: grid; grid-template-columns: minmax(7rem, .8fr) minmax(0, 1.2fr); gap: .75rem; padding: .45rem 0; border: 0; }
  .cleaning-data-table td::before { content: attr(data-label); color: var(--ui-text-secondary); font-size: .75rem; font-weight: 750; text-transform: uppercase; }
}

/* Nettoyage opérationnel — génération explicite des occurrences (V2-03c).
   Volontairement distincte du formulaire de période : lire et écrire ne
   doivent jamais être le même geste. */
.cleaning-generation {
  margin: 0 0 1.5rem;
  padding: clamp(1rem, 3vw, 1.35rem);
  border: 1px solid var(--ui-border);
  border-left: 4px solid var(--brand-accent);
  border-radius: 0 .85rem .85rem 0;
  background: var(--ui-surface-background);
  box-shadow: var(--shadow);
}.cleaning-generation-title { margin: 0; font-size: 1.05rem; }
.cleaning-generation .form-help { margin: .4rem 0 1rem; font-size: .85rem; }
.cleaning-generation-feedback { margin: 0 0 1rem; padding: .85rem 1rem; border: 1px solid var(--ui-border); border-left: 4px solid var(--brand-ink); border-radius: .65rem; background: var(--ui-info-background); }
.cleaning-generation-feedback-error { color: var(--brand-alert); border-color: var(--brand-alert); border-left-color: var(--brand-alert); background: var(--brand-accent-light); }
.cleaning-generation-submit { min-height: 2.75rem; }

@media (max-width: 640px) {
  .cleaning-generation-submit { width: 100%; }
}

/* Nettoyage opérationnel — réalisation d'une occurrence (V2-03d).
   Les actions vivent dans la carte de l'occurrence qu'elles concernent : la
   tâche démarrée ou terminée est toujours celle que l'acteur a sous les yeux. */
.cleaning-occurrence-actions { display: flex; flex-direction: column; gap: .75rem; margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--ui-border); }
.cleaning-occurrence-action { align-self: flex-start; min-height: 2.75rem; }
.cleaning-occurrence-actions .inline-warning-inline { margin: 0; }
.cleaning-execution-feedback { margin: 0 0 1rem; padding: .85rem 1rem; border: 1px solid var(--ui-border); border-left: 4px solid var(--brand-ink); border-radius: .65rem; background: var(--ui-info-background); }
.cleaning-execution-feedback-error { color: var(--brand-alert); border-color: var(--brand-alert); border-left-color: var(--brand-alert); background: var(--brand-accent-light); }
.cleaning-execution-form { display: grid; gap: .85rem; padding: clamp(.85rem, 3vw, 1.1rem); border: 1px solid var(--ui-border); border-left: 4px solid var(--brand-accent); border-radius: .75rem; background: var(--ui-surface-muted); }
.cleaning-execution-title { margin: 0; font-size: .98rem; }
.cleaning-execution-form .form-help { margin: 0; font-size: .82rem; }
.cleaning-execution-form textarea { min-height: 4.5rem; resize: vertical; }
.cleaning-execution-form [hidden] { display: none; }
.cleaning-execution-choice-group { margin: 0; padding: 0; border: 0; }
.cleaning-execution-choice-group legend { margin-bottom: .45rem; font-weight: 700; }
.cleaning-execution-choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.cleaning-execution-choice { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: .55rem .75rem; border: 1px solid var(--ui-border); border-radius: .6rem; background: var(--ui-surface-background); cursor: pointer; }
.cleaning-execution-choice:has(input:checked) { border-color: var(--brand-ink); box-shadow: 0 0 0 1px var(--brand-ink); }
.cleaning-execution-choice:has(input:disabled) { cursor: default; opacity: .72; }
.cleaning-execution-anomaly-fields { display: grid; gap: .85rem; padding: .85rem; border-radius: .65rem; background: var(--ui-surface-background); }
.cleaning-execution-service-label { margin: 0 0 .25rem; font-weight: 700; }
.cleaning-execution-service-value { margin: 0; }
.cleaning-execution-form-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.cleaning-execution-form-actions .button { min-height: 2.75rem; }

@media (max-width: 640px) {
  .cleaning-occurrence-action { align-self: stretch; width: 100%; }
  .cleaning-execution-form-actions { flex-direction: column; }
  .cleaning-execution-form-actions .button { width: 100%; }
}

/* ==========================================================================
   Lot 11 — tableaux opérationnels Nettoyage / Journal, signalement warning de
   la charte, et fiche détaillée partagée par les deux destinations.

   La signature graphique MC Pilot est reprise telle quelle : une bordure
   significative de 4 px dans la couleur du contexte, deux angles à
   border-radius 0 du côté de cette bordure, les deux autres conservant le
   rayon MC Pilot. Aucune couleur nouvelle n'est introduite : le warning est
   l'orange existant de la charte (--brand-accent / --brand-accent-deep sur
   --brand-cream), déjà utilisé par .status-pending et
   .cleaning-status-in_progress.
   ========================================================================== */

/* Le nom du nettoyage est le SEUL élément cliquable d'une ligne : jamais la
   ligne entière, qui transformerait chaque cellule en bouton non annoncé et
   rendrait la sélection de texte impossible. */
.cleaning-name-button {
  display: block;
  padding: 0;
  color: var(--brand-ink);
  font: inherit;
  font-weight: 750;
  text-align: left;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  background: none;
  border: 0;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.cleaning-name-button:hover { color: var(--brand-accent-deep); }
.cleaning-name-button:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }

/* Retard, non-conformité : un seul état warning, jamais deux couleurs pour
   l'intersection des deux. La bordure de 4 px porte le signal ; les cellules
   ne sont pas repeintes en orange, seulement teintées. */
.cleaning-row-normal > td { background: var(--ui-surface-background); }
.cleaning-row-normal > td:first-child { border-left: 4px solid var(--brand-ink);  }
.cleaning-row-warning > td { background: var(--ui-surface-background); }
.cleaning-row-warning > td:first-child { border-left: 4px solid var(--brand-accent); }
.cleaning-row-warning .cleaning-name-button { /*color: var(--brand-accent-deep);*/ }
.cleaning-badge-warning { color: var(--brand-accent-deep); background: var(--brand-cream); }

.cleaning-planning-table { min-width: 60rem; }
.cleaning-journal-table { min-width: 62rem; }
.cleaning-journal-table th { text-align: center;}
.cleaning-table-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
/* `.cleaning-data-table td { overflow-wrap: anywhere }` existe pour le texte
   libre des colonnes de données — un nom de Plan ou une zone sans espace ne
   doit pas élargir le tableau. Il est hérité, et il coupait donc aussi les
   libellés des COMMANDES : « Démarrer » se scindait en plein milieu du mot dès
   que la colonne Actions se resserrait. Un bouton n'est pas de la donnée, et
   son libellé n'a aucune coupure acceptable à l'intérieur d'un mot : la
   propriété reprend sa valeur normale ici, ce qui rend la largeur du mot
   incompressible et laisse la colonne la réclamer. Les libellés en plusieurs
   mots (« Réalisé non conforme ») conservent, eux, leur retour à la ligne
   naturel entre les mots : rien n'est figé qui n'ait besoin de l'être. */
.cleaning-table-actions .button { min-height: 2.4rem; padding: .4rem .7rem; font-size: .84rem; overflow-wrap: normal; }
.cleaning-row-date { white-space: nowrap; }
.cleaning-planning-table td[data-label="Priorité"] { white-space: nowrap; }
.cleaning-data-table td[data-label="Priorité"] { white-space: nowrap; }

/* Arrivée depuis le Tableau de bord : la ligne visée est mise en évidence le
   temps d'une animation, puis redevient une ligne ordinaire. Aucun minuteur
   arbitraire ne pilote ce retour : c'est la fin de l'animation elle-même. */
@keyframes cleaning-row-reveal {
  from { background: var(--brand-cream); }
  to { background: transparent; }
}
.cleaning-row-revealed > td { animation: cleaning-row-reveal 2.4s ease-out 1; }
.cleaning-row-revealed > td:first-child { box-shadow: inset 4px 0 0 var(--brand-ink); }
@media (prefers-reduced-motion: reduce) {
  .cleaning-row-revealed > td { animation-duration: .01s; }
}

/* Fiche détaillée — même composant pour /v2/nettoyage et /v2/journal. */
.cleaning-detail-dialog {
  width: min(52rem, 100%);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid var(--ui-border);
  border-left: 4px solid var(--brand-ink);
  border-radius: 0 .9rem .9rem 0;
  background: var(--ui-surface-background);
  box-shadow: var(--shadow);
}
.cleaning-detail-dialog-warning { border-left-color: var(--brand-accent); }
.cleaning-detail-dialog .dialog-title-row h2 { margin: 0; font-size: 1.2rem; overflow-wrap: anywhere; }
.cleaning-detail-heading p { margin: .2rem 0 0; font-size: .85rem; }
.cleaning-detail-section { margin-top: 1.25rem; padding-top: .9rem; border-top: 1px solid var(--ui-border); }
.cleaning-detail-section h3 { margin: 0 0 .6rem; font-size: 1rem; }
.cleaning-detail-list { display: grid; grid-template-columns: minmax(8rem, .5fr) minmax(0, 1.5fr); gap: .45rem .9rem; margin: 0; }
.cleaning-detail-list dt { color: var(--ui-text-secondary); font-size: .78rem; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; }
.cleaning-detail-list dd { margin: 0; overflow-wrap: anywhere; }
.cleaning-detail-text { white-space: pre-line; }

/* Confirmations de réalisation — conforme (rappel seul) et non conforme
   (commentaire obligatoire, gravité, service responsable si nécessaire). */
.cleaning-outcome-dialog {
  width: min(38rem, 100%);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid var(--ui-border);
  border-left: 4px solid var(--brand-ink);
  border-radius: 0 .9rem .9rem 0;
  background: var(--ui-surface-background);
  box-shadow: var(--shadow);
}
.cleaning-outcome-dialog-warning { border-left-color: var(--brand-accent); }
.cleaning-outcome-dialog h2 { margin: 0 0 .5rem; font-size: 1.15rem; }
.cleaning-outcome-summary { display: grid; grid-template-columns: minmax(7rem, auto) minmax(0, 1fr); gap: .3rem .9rem; margin: 0 0 1rem; padding: .85rem 1rem; border: 1px solid var(--ui-border); border-radius: .65rem; background: var(--ui-surface-muted); }
.cleaning-outcome-summary dt { color: var(--ui-text-secondary); font-size: .78rem; font-weight: 750; text-transform: uppercase; }
.cleaning-outcome-summary dd { margin: 0; overflow-wrap: anywhere; }
.cleaning-outcome-form { display: grid; gap: .85rem; }
.cleaning-outcome-form textarea { min-height: 5rem; resize: vertical; }
.cleaning-outcome-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .4rem; }
.cleaning-outcome-actions .button { min-height: 2.75rem; }

/* Lot 13 — le nettoyage NON PRÉVU.
   La modale réutilise entièrement le gabarit .cleaning-outcome-dialog ; seule
   la sélection du Plan a besoin d'un style propre, parce qu'elle n'existe
   nulle part ailleurs. Chaque ligne est un vrai <button> : elle doit donc se
   lire comme une carte cliquable, et non comme un bouton de formulaire. */
.cleaning-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 1.25rem 0; }
.cleaning-page-actions .button { min-height: 2.75rem; }
.cleaning-origin-ad-hoc { color: var(--brand-ink); background: var(--brand-ink-light); }
.cleaning-ad-hoc-dialog { width: min(44rem, 100%); }
.cleaning-ad-hoc-search { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; margin-bottom: 1rem; padding: .85rem 1rem; border: 1px solid var(--ui-border); border-radius: .65rem; background: var(--ui-surface-muted); }
.cleaning-ad-hoc-plans { display: grid; gap: .5rem; max-height: 22rem; overflow-y: auto; margin-bottom: .75rem; }
.cleaning-ad-hoc-plan {
  display: grid;
  gap: .15rem;
  width: 100%;
  padding: .7rem .85rem;
  border: 1px solid var(--ui-border);
  border-left: 3px solid transparent;
  border-radius: .65rem;
  background: var(--ui-surface-background);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cleaning-ad-hoc-plan:hover:not([disabled]) { border-left-color: var(--brand-ink); background: var(--ui-surface-muted); }
.cleaning-ad-hoc-plan[aria-pressed="true"] { border-left-color: var(--brand-ink); background: var(--brand-ink-light); }
.cleaning-ad-hoc-plan-name { font-weight: 750; }
.cleaning-ad-hoc-plan-context { color: var(--ui-text-secondary); font-size: .85rem; overflow-wrap: anywhere; }

/* Tableau de bord — deux panneaux opérationnels alignés sur la rangée de KPI. */
.dashboard-operations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 1.5rem; }
.dashboard-panel {
  min-width: 0;
  padding: 1.1rem;
  border: 1px solid var(--ui-border);
  border-top-width: 6px;
  border-top-color: var(--brand-ink);
  border-radius: 0 0 .85rem .85rem;
  background: var(--ui-surface-background);
}
.dashboard-panel-alert { border-top-color: var(--brand-accent); }
.dashboard-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .6rem; }
.dashboard-panel-head h3 { margin: 0; font-size: 1.02rem; }
.dashboard-panel-count { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.dashboard-panel-count-warning { color: var(--brand-accent-deep); }
.dashboard-panel-help { margin: .35rem 0 .85rem; color: var(--ui-text-secondary); font-size: .82rem; line-height: 1.35; }
.dashboard-panel-empty { margin: 0; color: var(--ui-text-secondary); }
.dashboard-panel-table-wrap { width: 100%; overflow-x: auto; }
.dashboard-panel-table { width: 100%; border-collapse: collapse; }
.dashboard-panel-table th, .dashboard-panel-table td { padding: .5rem .55rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ui-border); font-size: .86rem; }
.dashboard-panel-table th { color: var(--ui-text-secondary); font-size: .72rem; letter-spacing: .03em; text-transform: uppercase; }
.dashboard-panel-table tbody tr:last-child td { border-bottom: 0; }
.dashboard-panel-table td { overflow-wrap: anywhere; }
.dashboard-panel-truncated { margin: .7rem 0 0; color: var(--ui-text-secondary); font-size: .78rem; }
.dashboard-panel-overdue .cleaning-name-button { color: var(--brand-accent-deep); }

@media (max-width: 900px) {
  .dashboard-operations { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  /* Les modificateurs de largeur minimale sont déclarés APRÈS le bloc mobile
     partagé : ils doivent donc être annulés ici, sans quoi le tableau
     imposerait sa grille large sur un téléphone. */
  .cleaning-planning-table, .cleaning-journal-table { min-width: 0; }
  .cleaning-detail-list { grid-template-columns: 1fr; gap: .15rem; }
  .cleaning-detail-list dd { margin-bottom: .55rem; }
  .cleaning-outcome-summary { grid-template-columns: 1fr; gap: .1rem; }
  .cleaning-outcome-summary dd { margin-bottom: .5rem; }
  .cleaning-outcome-actions { flex-direction: column; }
  .cleaning-outcome-actions .button { width: 100%; }
  /* Lot 13 — trois colonnes de filtres ne tiennent pas sur un téléphone, et la
     liste de Plans doit garder assez de hauteur pour rester parcourable. */
  .cleaning-ad-hoc-search { grid-template-columns: 1fr; }
  .cleaning-ad-hoc-plans { max-height: 16rem; }
  .cleaning-page-actions .button { width: 100%; }
  .cleaning-table-actions { flex-direction: column; }
  .cleaning-table-actions .button { width: 100%; }
  .cleaning-row-warning > td { background: transparent; }
  .cleaning-row-warning > td:first-child { border-left: 0; }
  .cleaning-data-table tr.cleaning-row-warning { border-left: 4px solid var(--brand-accent); border-radius: 0 .8rem .8rem 0; background: color-mix(in srgb, var(--brand-cream) 40%, transparent); }
  .cleaning-row-revealed > td:first-child { box-shadow: none; }
  .cleaning-data-table tr.cleaning-row-revealed { border-left: 4px solid var(--brand-ink); border-radius: 0 .8rem .8rem 0; }
}