:root {
  /* Palette Mondial Relay, couleur officielle extraite du logo */
  --mr-primary: #96154A;
  --mr-primary-dark: #740F39;
  --mr-dark: #2b2b2b;
  --mr-grey: #6b6f76;
  --mr-bg: #f6f3f4;
  --mr-card: #ffffff;
  --mr-border: #e6dfe2;
  --mr-danger: #d64545;
  --mr-soft-bg: #fbf8f9;
  --mr-hover-bg: #f3ecef;
  --mr-warn-bg: #fff8ec;
  --radius: 10px;
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --mr-primary: #c2447a;
  --mr-primary-dark: #e28ab0;
  --mr-dark: #ece9ea;
  --mr-grey: #a49da3;
  --mr-bg: #18161a;
  --mr-card: #242127;
  --mr-border: #3a353c;
  --mr-danger: #ff7a7a;
  --mr-soft-bg: #2a262c;
  --mr-hover-bg: #322d35;
  --mr-warn-bg: #362a1c;
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

* {
  box-sizing: border-box;
  /* Fondu doux par defaut sur les couleurs pour tout le monde (bascule de
     theme, survol, focus...) ; les elements qui ont deja leur propre liste
     de transitions plus bas (ex: .tool-card, .mr-toast) gardent la leur. */
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

body {
  margin: 0;
  font-family: 'Segoe UI', Arial, sans-serif;
  background: var(--mr-bg);
  color: var(--mr-dark);
}

main {
  animation: page-fade-in .35s ease both;
}

@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, main { animation: none !important; transition: none !important; }
}

header.site-header {
  background: var(--mr-card);
  border-bottom: 3px solid var(--mr-primary);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 10;
}

header.site-header .brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

header.site-header .brand img { height: 44px; width: auto; display: block; }

header.site-header .brand .subtitle {
  font-size: 13px;
  color: var(--mr-grey);
  border-left: 1px solid var(--mr-border);
  padding-left: 12px;
  margin-left: 2px;
}

.mr-idle-timer {
  font-size: 12px;
  color: var(--mr-grey);
  border-left: 1px solid var(--mr-border);
  padding-left: 12px;
  white-space: nowrap;
}

/* Filet de securite si jamais .brand est introuvable sur une page. */
.mr-idle-timer-fixed {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1000;
  background: var(--mr-card);
  border: 1px solid var(--mr-border);
  border-radius: 999px;
  padding: 4px 10px;
  box-shadow: var(--shadow);
}

header.site-header nav a {
  position: relative;
  display: inline-block;
  color: var(--mr-dark);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  margin-left: 18px;
  padding-bottom: 2px;
}

header.site-header nav a:hover { color: var(--mr-primary-dark); }

header.site-header nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -3px;
  height: 2px;
  border-radius: 2px;
  background: var(--mr-primary);
  transition: right .2s ease;
}

header.site-header nav a:hover::after { right: 0; }

header.site-header nav a.active {
  color: var(--mr-primary);
}

header.site-header nav a.active::after { right: 0; }

.nav-badge {
  display: inline-block;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: 5px;
  border-radius: 999px;
  background: var(--mr-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  vertical-align: 2px;
}

.header-actions {
  display: flex;
  align-items: center;
}

.menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--mr-border);
  border-radius: 8px;
  width: 40px;
  height: 40px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: var(--mr-dark);
}

.menu-toggle:hover { background: var(--mr-hover-bg); }

.nav-panel {
  display: flex;
  align-items: center;
}

.user-info {
  font-size: 13px;
  font-weight: 600;
  color: var(--mr-grey);
  margin-left: 18px;
}

.header-actions .btn-ghost {
  margin-left: 18px;
  padding: 7px 14px;
  font-size: 13px;
}

.theme-toggle {
  background: transparent;
  border: 1px solid var(--mr-border);
  border-radius: 100px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  margin-left: 18px;
  flex-shrink: 0;
}

.theme-toggle:hover { background: var(--mr-hover-bg); transform: scale(1.08); }
.theme-toggle:active { transform: scale(.92); }

.theme-toggle.spin { animation: theme-toggle-spin .4s ease; }

@keyframes theme-toggle-spin {
  from { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(150deg) scale(1.15); }
  to { transform: rotate(180deg) scale(1); }
}

@media (max-width: 900px) {
  .menu-toggle { display: inline-flex; }

  .nav-panel {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--mr-card);
    border-bottom: 3px solid var(--mr-primary);
    box-shadow: var(--shadow);
    flex-direction: column;
    align-items: stretch;
    padding: 0 24px;
    gap: 14px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: max-height .25s ease, opacity .2s ease, transform .2s ease, padding .25s ease;
  }

  .nav-panel.open {
    max-height: 480px;
    opacity: 1;
    transform: translateY(0);
    padding: 16px 24px;
    pointer-events: auto;
  }

  header.site-header nav {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  header.site-header nav a { margin-left: 0; }

  .user-info { margin-left: 0; }

  .header-actions .btn-ghost { margin-left: 0; width: 100%; }

  .theme-toggle { margin-left: 0; }
}

.theme-icon-dark { display: none; }

:root[data-theme="dark"] .theme-icon-light { display: none; }
:root[data-theme="dark"] .theme-icon-dark { display: inline; }

main.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 20px 60px;
}

h1 {
  font-size: 24px;
  margin: 0 0 4px;
}

h1 .accent { color: var(--mr-primary); }

p.lead {
  color: var(--mr-grey);
  margin-top: 0;
  margin-bottom: 24px;
}

.card {
  background: var(--mr-card);
  border: 1px solid var(--mr-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 20px;
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}

.tool-card {
  background: var(--mr-card);
  border: 1px solid var(--mr-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  text-decoration: none;
  color: var(--mr-dark);
  display: block;
  transition: transform .15s ease, box-shadow .15s ease;
}

.tool-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
}

.tool-card .icon {
  font-size: 26px;
  margin-bottom: 8px;
  display: block;
}

.tool-card h3 { margin: 0 0 6px; font-size: 16px; }
.tool-card p { margin: 0; font-size: 13px; color: var(--mr-grey); }

.tool-card.disabled {
  opacity: .55;
  pointer-events: none;
}

.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 100px;
  background: var(--mr-primary);
  color: #fff;
  margin-left: 6px;
  vertical-align: middle;
}
.badge.soon { background: #ddd4d8; color: #5c545a; }

table { width: 100%; border-collapse: collapse; }

th, td {
  padding: 10px 8px;
  text-align: left;
  border-bottom: 1px solid var(--mr-border);
  font-size: 14px;
}

th { color: var(--mr-grey); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }

input[type="text"], input[type="time"], input[type="number"], input[type="password"], select, textarea {
  border: 1px solid var(--mr-border);
  border-radius: 6px;
  padding: 7px 8px;
  font-size: 14px;
  width: 100%;
  font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--mr-primary);
  box-shadow: 0 0 0 3px rgba(150, 21, 74, .15);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mr-primary) 20%, transparent);
}

.btn {
  border: none;
  border-radius: 6px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease, box-shadow .15s ease;
}

.btn:active:not(:disabled) { transform: scale(.96); }

.btn-primary { background: var(--mr-primary); color: #fff; }
.btn-primary:hover { background: var(--mr-primary-dark); box-shadow: 0 3px 10px rgba(150, 21, 74, .25); }

.btn-ghost { background: transparent; color: var(--mr-grey); border: 1px solid var(--mr-border); }
.btn-ghost:hover { background: var(--mr-hover-bg); }

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-danger-icon {
  background: transparent;
  border: none;
  color: var(--mr-danger);
  cursor: pointer;
  font-size: 16px;
  padding: 4px 8px;
  transition: transform .12s ease;
}

.btn-danger-icon:hover { transform: scale(1.15); }

.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-top: 4px;
}

.stat {
  background: var(--mr-soft-bg);
  border: 1px solid var(--mr-border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
}

.stat .value {
  font-size: 28px;
  font-weight: 800;
  color: var(--mr-primary-dark);
}

.stat .label {
  font-size: 12px;
  color: var(--mr-grey);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.prod-history-bar-wrap {
  position: relative;
  display: flex;
  align-items: center;
  height: 22px;
  min-width: 140px;
}

.prod-history-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--mr-primary);
  opacity: .25;
  border-radius: 4px;
}

.prod-history-bar-wrap span {
  position: relative;
  font-size: 13px;
  padding-left: 6px;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 10px;
}

.field-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.field-inline label {
  font-size: 13px;
  font-weight: 600;
  color: var(--mr-grey);
  white-space: nowrap;
}

.field-inline input { width: 140px; }

.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

footer.site-footer {
  text-align: center;
  font-size: 12px;
  color: var(--mr-grey);
  padding: 24px;
}

.note {
  font-size: 12px;
  color: var(--mr-grey);
  margin-top: 8px;
}

.note code {
  background: var(--mr-hover-bg);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 11px;
}

.quick-panel {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--mr-soft-bg);
  border: 1px dashed var(--mr-border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 16px;
}

.quick-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--mr-grey);
  margin-right: 4px;
}

.quick-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

/* Un bouton ou un texte d'aide ne se retrouve jamais coupe mot par mot :
   soit il tient sur sa ligne, soit il passe entier a la ligne suivante
   (le conteneur .quick-item wrap deja au-dessus). */
.quick-item .btn,
.quick-item .field-hint,
.quick-item select,
.quick-item input {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Un select garde sa largeur naturelle (celle de son contenu) au lieu de
   la regle generale select{width:100%} : sans ca, dans un conteneur dont
   la largeur se calcule elle-meme d'apres son contenu (comme .quick-item),
   le select "gonfle" a une largeur arbitraire au lieu de tenir sur sa
   ligne avec ses voisins. */
.quick-item select {
  width: auto;
}

/* Regroupe un titre et ses propres controles pour qu'ils ne se separent
   jamais l'un de l'autre au retour a la ligne (voir planning.html : sans
   ca, un titre pouvait se retrouver colle a la ligne du dessus pendant que
   ses propres champs passaient tout seuls a la ligne suivante). */
.quick-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1 1 100%;
}

.quick-panel .quick-group + .quick-group {
  padding-top: 12px;
  border-top: 1px dashed var(--mr-border);
}

.quick-item input {
  width: 90px;
}

.row-excluded {
  opacity: .5;
}

.row-excluded .out-worked {
  text-decoration: line-through;
}

.check-include {
  display: flex;
  align-items: center;
  justify-content: center;
}

.check-include input {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.print-only { display: none; }

/*
 * Styles des feuilles imprimables (#printReport).
 * Volontairement hors de @media print : ces regles s'appliquent aussi quand
 * #printReport est affiche temporairement (position hors-ecran) pour generer
 * un PDF (capture par html2canvas, qui ne simule pas le media print).
 * #printReport reste invisible en usage normal grace a .print-only.
 */

@media print {
  /* L'impression reste toujours claire, meme si le site est en theme sombre. */
  :root, :root[data-theme="dark"] {
    --mr-primary: #96154A;
    --mr-primary-dark: #740F39;
    --mr-dark: #2b2b2b;
    --mr-grey: #6b6f76;
    --mr-bg: #f6f3f4;
    --mr-card: #ffffff;
    --mr-border: #e6dfe2;
    --mr-danger: #d64545;
    --mr-soft-bg: #fbf8f9;
    --mr-hover-bg: #f3ecef;
    --mr-warn-bg: #fff8ec;
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  }

  body > *:not(#printReport) { display: none !important; }
  #printReport { display: block !important; }

  @page {
    margin: 1.5cm;
  }

  /* Impression du rapport equipe du matin : format portrait, marges un
     peu plus etroites pour laisser plus de place au contenu. La mise a
     l'echelle qui fait tenir le rapport sur une seule page est calculee
     en JS (voir rapports.js) en fonction de la quantite de contenu. */
  @page rp-report-page {
    size: A4 portrait;
    margin: 1.2cm;
  }
}

#printReport {
    width: 100%;
    padding: 0;
    font-family: 'Segoe UI', Arial, sans-serif;
    color: var(--mr-dark);
  }

  .pr-header {
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 3px solid var(--mr-primary);
    padding-bottom: 12px;
    margin-bottom: 20px;
  }

  .pr-logo { height: 40px; }

  .pr-title h1 {
    margin: 0;
    font-size: 20px;
  }

  .pr-title p {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--mr-grey);
  }

  /* Rapport equipe du matin : reste en une seule colonne, verticale
     (format portrait). C'est le JS (rapports.js) qui calcule une echelle
     de reduction en fonction de la quantite de contenu, pour que le
     rapport tienne sur une seule page quelle que soit sa longueur. */
  .pr-fit {
    page: rp-report-page;
  }

  .pr-fit .pr-header {
    margin-bottom: 10px;
    padding-bottom: 8px;
  }

  .pr-section-block {
    break-inside: avoid;
    margin-bottom: 10px;
  }

  .pr-fit h3 {
    margin: 0 0 4px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #555;
  }

  .pr-fit ul {
    margin: 0;
    padding-left: 16px;
    font-size: 11px;
    line-height: 1.5;
  }

  .pr-fit p { margin: 0; font-size: 11px; }

  .pr-empty {
    margin: 0;
    font-size: 10px;
    font-style: italic;
    color: #999;
  }

  .pr-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
  }

  .pr-table th, .pr-table td {
    border: 1px solid #ccc;
    padding: 8px 10px;
    text-align: left;
    font-size: 13px;
  }

  .pr-table th {
    background: #f3ecef !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .03em;
    color: #444;
  }

  .pr-table td.pr-excluded {
    color: #999;
    font-style: italic;
  }

  .pl-print-table {
    height: 1px; /* force les tr en % de hauteur a se repartir sur toute la table */
  }

  .pl-print-table th, .pl-print-table td {
    padding: 22px 16px;
    font-size: 17px;
    text-align: center;
  }

  .pl-print-table td:first-child, .pl-print-table td:nth-child(2) {
    text-align: left;
  }

  .pl-print-table th {
    font-size: 14px;
  }

  .pl-print-count {
    display: inline-block;
    margin-top: 4px;
    font-weight: 700;
    color: var(--mr-primary);
    white-space: nowrap;
  }

  .pr-summary {
    display: flex;
    gap: 16px;
  }

  .pr-summary > div {
    flex: 1;
    border: 1px solid var(--mr-primary);
    border-radius: 6px;
    padding: 12px;
    text-align: center;
  }

  .pr-summary span {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--mr-grey);
    margin-bottom: 4px;
  }

  .pr-summary strong {
    font-size: 20px;
    color: var(--mr-primary);
  }

  .pr-footer {
    margin-top: 24px;
    font-size: 11px;
    color: var(--mr-grey);
  }

  .pr-barcode-wrap {
    text-align: center;
    margin: 40px 0;
  }

  .pr-barcode-wrap svg,
  .pr-barcode-wrap img,
  .pr-barcode-wrap canvas {
    max-width: 100%;
  }

  .sheet-page {
    display: flex;
    flex-direction: column;
    height: 245mm;
    max-height: 245mm;
    overflow: hidden;
  }

  .sheet-statement {
    font-size: 12px;
    line-height: 1.5;
    margin: 10px 0;
  }

  .sheet-legend {
    font-size: 11px;
    margin-bottom: 10px;
  }

  .sheet-legend .legend-label {
    color: #666;
    margin-right: 6px;
  }

  .legend-tag {
    display: inline-block;
    border: 1px solid #999;
    border-radius: 100px;
    padding: 2px 9px;
    margin: 2px 3px 2px 0;
    font-size: 11px;
  }

  .sheet-table {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid #333;
    margin-top: 4px;
    overflow: hidden;
  }

  .sheet-row {
    display: flex;
    flex: 1;
    min-height: 0;
    border-bottom: 1px solid #999;
  }

  .sheet-row:last-child { border-bottom: none; }

  .sheet-row-head {
    flex: 0 0 9mm;
    background: #f3ecef !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .02em;
    border-bottom: 2px solid #333;
  }

  .sheet-cell {
    padding: 3px 8px;
    font-size: 12px;
    border-right: 1px solid #999;
    display: flex;
    align-items: center;
  }

  .sheet-cell:last-child { border-right: none; }

  .sheet-cell-num { width: 7%; justify-content: center; color: #666; }
  .sheet-cell-name { width: 33%; }
  .sheet-cell-poste { width: 33%; }
  .sheet-cell-sign { width: 27%; }

  .av-cell-num { width: 7%; justify-content: center; color: #666; }
  .av-cell-name { width: 22%; }
  .av-cell-obs { width: 46%; }
  .av-cell-sign { width: 25%; }

  .av2-cell-num { width: 7%; justify-content: center; color: #666; }
  .av2-cell-name { width: 22%; }
  .av2-cell-desc { width: 51%; }
  .av2-cell-fixed { width: 20%; }

  .cb-cell-num { width: 5%; justify-content: center; color: #666; }
  .cb-cell-name { width: 15%; }
  .cb-cell-bras { width: 10%; justify-content: center; }
  .cb-cell-check { width: 12%; justify-content: center; }
  .cb-cell-err { width: 22%; }

  .cb-row-head .sheet-cell {
    font-size: 10px;
    text-align: center;
    justify-content: center;
  }

  .cb-row-head .cb-cell-name { justify-content: center; }
  .cb-row-head .cb-cell-err { justify-content: center; }

  .sheet-controleur-line {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 12px;
    margin: 8px 0 12px;
  }

  .sheet-controleur-line span:first-child {
    color: #666;
    white-space: nowrap;
  }

  .sheet-controleur-line .blank-line {
    flex: 1;
    border-bottom: 1px solid #999;
    height: 14px;
  }

  .sheet-double-sign {
    flex: 0 0 auto;
    display: flex;
    gap: 24px;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid #999;
  }

  .sheet-double-sign .sign-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .sheet-double-sign .sign-name {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
  }

  .sheet-double-sign .sign-name span {
    color: #666;
    white-space: nowrap;
  }

  .sheet-double-sign .sign-box {
    height: 14mm;
    border: 1px solid #999;
    border-radius: 4px;
  }

  .sheet-responsible {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid #999;
  }

  .sheet-responsible-name {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
  }

  .sheet-responsible-name span {
    color: #666;
    white-space: nowrap;
  }

  .sheet-responsible-sign {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    max-width: 60%;
  }

  .sheet-responsible-sign span {
    font-size: 11px;
    color: #666;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .sheet-responsible-sign-box {
    flex: 1;
    height: 14mm;
    border: 1px solid #999;
    border-radius: 4px;
  }

  .process-print {
    font-family: 'Segoe UI', Arial, sans-serif;
    color: var(--mr-dark);
  }

  .process-print-objectif {
    font-size: 13px;
    color: #444;
    margin: 6px 0 18px;
    font-style: italic;
  }

  .process-print-h2 {
    font-size: 14px;
    margin: 18px 0 8px;
    color: var(--mr-primary);
    border-bottom: 1px solid #ccc;
    padding-bottom: 4px;
  }

  .process-print-steps {
    margin: 0;
    padding-left: 0;
    list-style: none;
    counter-reset: step;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .process-print-steps li {
    counter-increment: step;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 13px;
    line-height: 1.5;
  }

  .process-print-steps li::before {
    content: counter(step);
    flex: 0 0 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--mr-primary) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .process-print-attention {
    margin-top: 18px;
    background: #fff8ec !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    border: 1px solid #f0d9a8;
    border-radius: 8px;
    padding: 12px 16px;
  }

  .process-print-attention h2 {
    margin-top: 0;
    border: none;
    padding: 0;
    color: #92620a;
  }

  .process-print-attention ul {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
  }

  .process-print-attention li { margin-bottom: 4px; }

.mr-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--mr-dark);
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 1000;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.mr-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Générateur de codes-barres */

.bc-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 28px;
}

@media (max-width: 720px) {
  .bc-layout { grid-template-columns: 1fr; }
}

.field-block { margin-bottom: 18px; }

.field-block label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--mr-grey);
  margin-bottom: 6px;
}

.field-block select {
  width: 100%;
  border: 1px solid var(--mr-border);
  border-radius: 6px;
  padding: 8px;
  font-size: 14px;
  font-family: inherit;
  background: var(--mr-card);
}

/* Champ mot de passe avec bouton oeil pour afficher/masquer la saisie.
   Delegation d'evenement en JS (common.js) donc ca marche aussi pour les
   champs ajoutes dynamiquement (ex: reinitialisation de mot de passe). */
.password-field {
  position: relative;
}

.password-field input {
  padding-right: 38px;
  width: 100%;
  box-sizing: border-box;
}

.password-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 6px;
  border-radius: 6px;
  color: var(--mr-grey);
  transition: background-color .15s ease;
}

.password-toggle:hover { background: var(--mr-hover-bg); }

.field-hint {
  font-size: 12px;
  color: var(--mr-grey);
  margin: 6px 0 0;
}

.error-text {
  color: var(--mr-danger);
  font-size: 12px;
  margin: 6px 0 0;
  min-height: 16px;
}

.opts-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.opt-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.opt-item span {
  font-size: 13px;
  color: var(--mr-grey);
}

.opt-item input[type="number"] { width: 90px; }

.opt-checkbox { justify-content: flex-start; }

.opt-checkbox label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--mr-dark);
  cursor: pointer;
}

.bc-preview {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bc-preview-box {
  border: 1px dashed var(--mr-border);
  border-radius: var(--radius);
  background: var(--mr-card);
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
}

.bc-preview-box svg { max-width: 100%; height: auto; }

.bc-empty {
  color: var(--mr-grey);
  font-size: 13px;
  text-align: center;
}

.bc-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 16, 18, 0.65);
  align-items: center;
  justify-content: center;
  z-index: 900;
  padding: 20px;
}

.modal-overlay.open { display: flex; }

.modal-box {
  background: var(--mr-card);
  border-radius: var(--radius);
  padding: 36px;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  position: relative;
  overflow: auto;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  background: var(--mr-hover-bg);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  color: var(--mr-dark);
}

.modal-content svg,
.modal-content img,
.modal-content canvas {
  max-width: 80vw;
  max-height: 65vh;
  height: auto;
}

.modal-caption {
  font-size: 13px;
  color: var(--mr-grey);
  word-break: break-all;
  text-align: center;
  max-width: 60vw;
}

/* Fiche de responsabilisation */

.mode-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

.mode-tab {
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid var(--mr-border);
  background: var(--mr-card);
  font-size: 13px;
  font-weight: 600;
  color: var(--mr-grey);
  cursor: pointer;
  font-family: inherit;
}

.mode-tab.active {
  background: var(--mr-primary);
  color: #fff;
  border-color: var(--mr-primary);
}

td select {
  width: 100%;
  border: 1px solid var(--mr-border);
  border-radius: 6px;
  padding: 6px;
  font-family: inherit;
  font-size: 14px;
  background: var(--mr-card);
}

.postes-manager {
  margin: -6px 0 18px;
}

.postes-manager summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--mr-primary);
  outline: none;
}

.postes-manager-body {
  margin-top: 12px;
  padding: 12px;
  background: var(--mr-soft-bg);
  border: 1px solid var(--mr-border);
  border-radius: var(--radius);
}

.postes-add {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.postes-add input { flex: 1; }

.postes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.postes-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  background: var(--mr-card);
  border: 1px solid var(--mr-border);
  border-radius: 6px;
  transition: background-color .15s ease, border-color .15s ease;
  padding: 6px 10px;
}

.postes-list li:not(.postes-empty):hover { background: var(--mr-hover-bg); border-color: var(--mr-primary); }

.postes-list .postes-empty {
  font-size: 12px;
  color: var(--mr-grey);
  background: transparent;
  border: none;
  padding: 2px 0;
}

.postes-remove {
  background: none;
  border: none;
  color: var(--mr-danger);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  transition: transform .12s ease;
}

.postes-remove:hover { transform: scale(1.2); }

.pl-emp-name {
  cursor: pointer;
  border-radius: 4px;
  padding: 2px 4px;
  margin: -2px -4px;
}

.pl-emp-name:hover {
  background: var(--mr-hover-bg);
}

.pl-emp-edit-input {
  flex: 1;
  margin-right: 8px;
}

.statement-edit {
  width: 100%;
  border: 1px solid var(--mr-border);
  border-radius: 6px;
  padding: 10px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
}

.sheet-legend-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 18px;
}

.legend-tag-preview {
  display: inline-block;
  background: var(--mr-soft-bg);
  border: 1px solid var(--mr-border);
  border-radius: 100px;
  padding: 4px 12px;
  font-size: 12px;
  color: var(--mr-dark);
}

.sheet-preview-table {
  border: 1px solid var(--mr-border);
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 640px;
}

.sheet-preview-row {
  display: flex;
  border-bottom: 1px solid var(--mr-border);
}

.sheet-preview-row:last-child { border-bottom: none; }

.sheet-preview-row.head {
  background: var(--mr-soft-bg);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--mr-grey);
  letter-spacing: .03em;
}

.sheet-preview-cell {
  padding: 8px 10px;
  font-size: 13px;
  border-right: 1px solid var(--mr-border);
  min-height: 34px;
  display: flex;
  align-items: center;
}

.sheet-preview-cell:last-child { border-right: none; }

.sheet-preview-cell.num { width: 7%; justify-content: center; color: var(--mr-grey); }
.sheet-preview-cell.name { width: 33%; }
.sheet-preview-cell.poste { width: 33%; }

.archives-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.archive-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--mr-soft-bg);
  border: 1px solid var(--mr-border);
  border-radius: var(--radius);
  padding: 10px 14px;
}

.archive-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.archive-info strong {
  font-size: 14px;
  color: var(--mr-dark);
}

.archive-info span {
  font-size: 12px;
  color: var(--mr-grey);
}

.archive-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.sheet-preview-cell.sign { width: 27%; }

/* Fiches de process */

.steps-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.step-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--mr-card);
  border: 1px solid var(--mr-border);
  border-radius: 6px;
  padding: 6px 10px;
}

.step-num {
  flex: 0 0 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--mr-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-text-input {
  flex: 1;
  border: none;
  font-size: 14px;
  font-family: inherit;
  padding: 4px 0;
}

.step-text-input:focus { outline: none; box-shadow: none; }

.step-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.step-actions .step-move {
  background: transparent;
  border: 1px solid var(--mr-border);
  border-radius: 4px;
  width: 26px;
  height: 26px;
  cursor: pointer;
  color: var(--mr-grey);
  font-size: 13px;
}

.step-actions .step-move:hover { background: var(--mr-hover-bg); }

.attention-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.warning-banner {
  background: var(--mr-warn-bg);
  border: 1px solid #f0d9a8;
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 18px;
  font-size: 14px;
  color: #92620a;
}

.attention-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--mr-warn-bg);
  border: 1px solid #f0d9a8;
  border-radius: 6px;
  padding: 6px 10px;
}

.attention-text-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 14px;
  font-family: inherit;
  padding: 4px 0;
}

.attention-text-input:focus { outline: none; box-shadow: none; }

.process-preview {
  max-width: 640px;
}

.process-preview-title {
  margin: 0 0 6px;
  font-size: 18px;
  color: var(--mr-primary);
}

.process-preview-objectif {
  font-size: 14px;
  color: var(--mr-grey);
  margin: 0 0 14px;
}

.process-preview-steps {
  margin: 0 0 14px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
}

.process-preview-attention {
  background: var(--mr-warn-bg);
  border: 1px solid #f0d9a8;
  border-radius: var(--radius);
  padding: 12px 16px;
}

.process-preview-attention strong {
  display: block;
  margin-bottom: 6px;
  color: #92620a;
  font-size: 13px;
}

.process-preview-attention ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--mr-dark);
}

/* Contrôle de bras */

.cb-preview-table .cb-pv-num { width: 5%; justify-content: center; }
.cb-preview-table .cb-pv-name { width: 15%; }
.cb-preview-table .cb-pv-bras { width: 10%; justify-content: center; }
.cb-preview-table .cb-pv-check { width: 12%; justify-content: center; }
.cb-preview-table .cb-pv-err { width: 22%; }

.cb-preview-table .sheet-preview-row.head .sheet-preview-cell {
  font-size: 11px;
  text-align: center;
  justify-content: center;
}

/* Journal des mises a jour */

.changelog-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.changelog-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.changelog-date {
  flex-shrink: 0;
  width: 88px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--mr-primary);
  border-radius: 100px;
  padding: 3px 10px;
  text-align: center;
}

.changelog-text {
  font-size: 14px;
  color: var(--mr-dark);
  padding-top: 2px;
}

/* Planning */

.contract-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 100px;
  margin-left: 4px;
  vertical-align: middle;
  text-transform: uppercase;
}

.contract-badge.contract-cdi { background: #dcecdf; color: #2a6b3c; }
.contract-badge.contract-rejected { background: #f7dcdc; color: #a13a3a; }
.contract-badge.contract-interim { background: #f0e2c8; color: #92620a; }

/* Bascule equipe du matin / equipe du soir (Planning, Pointage, Calcul de
   production) : deux equipes fixes, personnel et planning entierement
   separes, ce bouton choisit laquelle est affichee/geree. */
.pl-team-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--mr-soft-bg);
  border: 1px solid var(--mr-border);
  border-radius: var(--radius);
  margin-bottom: 18px;
}

.pl-team-btn {
  border: none;
  background: transparent;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: var(--mr-grey);
  transition: background-color .15s ease, color .15s ease;
}

.pl-team-btn:hover { background: var(--mr-hover-bg); }

.pl-team-btn.active {
  background: var(--mr-primary);
  color: #fff;
}

.status-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--mr-soft-bg);
  border: 1px solid var(--mr-border);
  border-radius: 100px;
  padding: 5px 8px 5px 6px;
  font-size: 13px;
  color: var(--mr-dark);
}

.status-chip-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--chip-color, var(--mr-primary));
  flex-shrink: 0;
}

.status-chip-remove {
  background: none;
  border: none;
  color: var(--mr-danger);
  cursor: pointer;
  font-size: 12px;
  padding: 0 2px;
  line-height: 1;
}

.pl-week-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pl-table-wrap {
  overflow-x: auto;
  margin-top: 10px;
}

.pl-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.pl-table th, .pl-table td {
  border: 1px solid var(--mr-border);
  padding: 6px;
  font-size: 12px;
  text-align: center;
}

.pl-table thead th {
  background: var(--mr-soft-bg);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--mr-grey);
  padding: 8px 6px;
}

.pl-th-date {
  font-weight: 400;
  text-transform: none;
  color: var(--mr-grey);
  white-space: nowrap;
}

.pl-row-archived { opacity: .55; }

.pl-th-count {
  display: inline-block;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: var(--mr-primary-dark);
  white-space: nowrap;
}

.pl-emp-archived { opacity: .6; }

.contract-badge.contract-archived {
  background: var(--mr-border);
  color: var(--mr-grey);
}

.pl-table td.pl-th-name {
  text-align: left;
  white-space: nowrap;
  font-size: 13px;
}

.pl-table td.pl-th-contract, .pl-table th.pl-th-contract {
  white-space: nowrap;
}

.pl-cell { min-width: 74px; }

.pl-cell-start {
  width: 100%;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 3px;
  text-align: center;
}

.pl-cell-start:disabled {
  background: transparent;
  border-color: transparent;
}

.pl-cell-select {
  width: 100%;
  font-size: 10px;
  color: var(--mr-grey);
  padding: 1px 2px;
  margin-top: 3px;
}

.pl-row-apply { width: 34px; }

.pl-row-apply-btn {
  background: transparent;
  border: 1px solid var(--mr-border);
  border-radius: 6px;
  color: var(--mr-primary-dark);
  cursor: pointer;
  font-size: 14px;
  padding: 3px 7px;
}

.pl-row-apply-btn:hover { background: var(--mr-hover-bg); }

/* Feuille de pointage */

.pt-print-table th, .pt-print-table td { text-align: center; }
.pt-print-table td:nth-child(1), .pt-print-table td:nth-child(2) { text-align: left; }

.pt-print-table th:nth-child(1), .pt-print-table td:nth-child(1) { width: 14%; }
.pt-print-table th:nth-child(2), .pt-print-table td:nth-child(2) { width: 14%; }
.pt-print-table th:nth-child(3), .pt-print-table td:nth-child(3) { width: 10%; }
.pt-print-table th:nth-child(4), .pt-print-table td:nth-child(4) { width: 12%; }
.pt-print-table th:nth-child(5), .pt-print-table td:nth-child(5) { width: 10%; }
.pt-print-table th:nth-child(6), .pt-print-table td:nth-child(6) { width: 12%; }
.pt-print-table th:nth-child(7), .pt-print-table td:nth-child(7) { width: 28%; }

.pt-absence {
  text-align: center;
  font-weight: 600;
  color: var(--mr-dark);
}

/* Colis manquants */

.cm-pr-block {
  background: var(--mr-soft-bg);
  border: 1px solid var(--mr-border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 14px;
}

.cm-pr-block .toolbar { margin-bottom: 10px; }

.cm-report-item {
  background: var(--mr-soft-bg);
  border: 1px solid var(--mr-border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 10px;
}

.cm-report-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.cm-report-title { font-size: 14px; color: var(--mr-dark); }

.cm-report-meta { font-size: 12px; color: var(--mr-grey); margin-top: 2px; }

.cm-report-points {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--mr-border);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Plan du depot (accueil) */

main.container.container-wide { max-width: 1320px; }

.depot-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.depot-legend {
  display: flex;
  gap: 20px;
  margin: 4px 0 20px;
  flex-wrap: wrap;
}

.depot-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--mr-grey);
}

.depot-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.depot-legend-dot-active { background: #4caf7d; }
.depot-legend-dot-special { background: #e0972e; }
.depot-legend-dot-inactive { background: var(--mr-border); }

.machine-diagram-card {
  background: var(--mr-card);
  border: 1px solid var(--mr-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 20px;
}

.machine-diagram-wrap { overflow-x: auto; }

.machine-diagram {
  position: relative;
  min-width: 560px;
  max-width: 760px;
  margin: 0 auto;
}

.machine-spine {
  position: absolute;
  top: 0;
  bottom: 62px;
  left: 50%;
  width: 6px;
  margin-left: -3px;
  background: var(--mr-border);
  border-radius: 3px;
}

.arm-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  padding: 10px 0;
}

/* Le bras 13 est au bout du tapis (la ligne centrale), pas sur un cote :
   la pastille reste exactement centree sur la ligne (grace aux deux
   colonnes egales autour d'elle), et ses quais partent vers la droite.
   En grille (et non plus en position absolue) pour que la rangee grandisse
   toute seule quand le bras 13 a plusieurs quais empiles, au lieu de
   deborder sur la rangee 12/11 en dessous. */
.arm-row.arm-row-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  padding: 10px 0 16px;
}

.arm-row-top .arm-unit {
  grid-column: 2;
}

.arm-row-top .dock-branch {
  grid-column: 3;
  display: flex;
  align-items: flex-start;
}

.arm-row-top .dock-branch .connector-line {
  margin-top: 16px;
}

.arm-branch {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1;
}

.arm-branch-left { justify-content: flex-end; }
.arm-branch-right { justify-content: flex-start; }

.spine-tick {
  width: 20px;
  flex-shrink: 0;
}

.connector-line {
  flex: 1;
  min-width: 14px;
  max-width: 46px;
  height: 2px;
  background: var(--mr-border);
}

.arm-bar {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  font-family: inherit;
  border: 2px solid var(--mr-border);
  background: var(--mr-soft-bg);
  color: var(--mr-grey);
  cursor: default;
  padding: 0;
}

.arm-bar.editable { cursor: pointer; }
.arm-bar.editable:hover { border-color: var(--mr-primary); }

.arm-bar.active {
  background: #dcecdf;
  color: #2a6b3c;
  border-color: #4caf7d;
}

:root[data-theme="dark"] .arm-bar.active {
  background: #234030;
  color: #8fd6ac;
  border-color: #3f8f63;
}

.arm-bar.special {
  background: #f7e3c0;
  color: #92620a;
  border-color: #e0972e;
}

:root[data-theme="dark"] .arm-bar.special {
  background: #4a3a1c;
  color: #f0c374;
  border-color: #b3821f;
}

.arm-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.dock-stack {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 150px;
  max-width: 220px;
}

.dock-stack-empty {
  font-size: 12px;
  color: var(--mr-grey);
  padding: 4px 0;
}

.dock-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--mr-soft-bg);
  border: 1px solid var(--mr-border);
  border-radius: 6px;
  padding: 4px 6px;
}

input.dock-chip-quai {
  width: 34px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-weight: 700;
  font-size: 11px;
  color: var(--mr-primary-dark);
  text-align: center;
  padding: 2px 0;
}

input.dock-chip-tournee {
  width: auto;
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 11px;
  color: var(--mr-dark);
  padding: 2px 0;
}

.dock-chip-quai:focus, .dock-chip-tournee:focus { outline: none; box-shadow: none; }
.dock-chip-quai:disabled, .dock-chip-tournee:disabled { cursor: default; }

.dock-chip-remove {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--mr-danger);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 2px;
  transition: transform .12s ease;
}

.dock-chip-remove:hover { transform: scale(1.2); }

.dock-chip-add {
  border: 1px dashed var(--mr-border);
  background: transparent;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  color: var(--mr-grey);
  cursor: pointer;
  align-self: flex-start;
}

.dock-chip-add:hover { border-color: var(--mr-primary); color: var(--mr-primary-dark); }

/* Un bras "cas particulier" ecrit sa note directement a la place des
   quais/tournee (pas dans un champ separe en dessous) : meme systeme de
   puce, juste avec un seul champ texte libre. */
.dock-chip-note {
  background: #fbf2e0;
  border-style: dashed;
  border-color: #e0972e;
}

:root[data-theme="dark"] .dock-chip-note {
  background: #3a3220;
  border-color: #b3821f;
}

input.dock-note-input {
  width: 100%;
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 11px;
  font-style: italic;
  color: var(--mr-grey);
  padding: 2px 0;
}

.dock-note-input::placeholder { color: var(--mr-grey); opacity: .6; }
.dock-note-input:focus { outline: none; box-shadow: none; font-style: normal; }

.dock-stack-note {
  display: inline-block;
  font-size: 12px;
  font-style: italic;
  color: #92620a;
  background: #fbf2e0;
  border: 1px dashed #e0972e;
  border-radius: 6px;
  padding: 4px 8px;
}

:root[data-theme="dark"] .dock-stack-note {
  color: #f0c374;
  background: #3a3220;
  border-color: #b3821f;
}

.injection-block {
  position: relative;
  z-index: 1;
  margin-top: 8px;
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--mr-grey);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.injection-arrow { font-size: 18px; color: var(--mr-primary); line-height: 1; }

@media (max-width: 700px) {
  .machine-diagram { min-width: 480px; }
  .dock-stack { min-width: 120px; max-width: 160px; }
}

.cm-report-points .cm-pr-line strong { color: var(--mr-primary-dark); }

/* Polyvalence : tableau croise personnes x postes. Premiere colonne et
   premiere ligne collantes (sticky) pour rester lisible avec beaucoup de
   monde/postes, tableau qui defile horizontalement plutot que de deborder. */
.poly-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.poly-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--mr-grey);
}

.poly-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.poly-dot-forme { background: #4caf7d; }
.poly-dot-en_formation { background: #e0972e; }
.poly-dot-non_forme { background: #d64545; }

.poly-table-wrap {
  overflow: auto;
  max-height: 70vh;
  margin-top: 16px;
  border: 1px solid var(--mr-border);
  border-radius: 10px;
}

.poly-table {
  border-collapse: separate;
  border-spacing: 0;
  width: auto;
}

.poly-table th, .poly-table td {
  border-bottom: 1px solid var(--mr-border);
  border-right: 1px solid var(--mr-border);
}

.poly-corner {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 3;
  background: var(--mr-card);
  min-width: 160px;
}

.poly-person-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--mr-card);
  padding: 8px 10px;
  min-width: 92px;
  max-width: 92px;
  font-size: 12px;
  font-weight: 700;
  color: var(--mr-dark);
}

.poly-person-name {
  display: block;
  width: 100%;
  word-break: break-word;
  border: none;
  background: transparent;
  font: inherit;
  font-weight: inherit;
  color: inherit;
  cursor: pointer;
  padding: 2px 0;
  border-radius: 4px;
}

.poly-person-name:hover { background: var(--mr-soft-bg); }

.poly-person-head.is-selected { background: #fbe9ef; }
:root[data-theme="dark"] .poly-person-head.is-selected { background: #3a2430; }
.poly-person-head.is-selected .poly-person-name { color: var(--mr-primary-dark); }

.poly-person-head.is-dimmed { opacity: .4; }

.poly-cell.is-selected { outline: 2px solid var(--mr-primary); outline-offset: -2px; }
.poly-cell.is-dimmed { opacity: .3; filter: grayscale(40%); }

.poly-poste-head {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--mr-card);
  padding: 8px 12px;
  min-width: 160px;
  max-width: 220px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: var(--mr-dark);
  white-space: normal;
}

.poly-poste-name { margin-right: 4px; }

.poly-count-badge {
  display: inline-block;
  min-width: 16px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--mr-soft-bg);
  border: 1px solid var(--mr-border);
  color: var(--mr-grey);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  margin-right: 4px;
}

.poly-remove {
  border: none;
  background: transparent;
  color: var(--mr-grey);
  opacity: .5;
  cursor: pointer;
  font-size: 11px;
  padding: 2px;
  line-height: 1;
}

.poly-remove:hover { opacity: 1; color: var(--mr-danger); }

.poly-cell {
  min-width: 44px;
  height: 40px;
  cursor: pointer;
  text-align: center;
  transition: background-color .12s ease;
}

.poly-cell-icon {
  display: inline-block;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,.15);
}

.poly-cell-non_forme { background: #d64545; }
.poly-cell-en_formation { background: #e0972e; }
.poly-cell-forme { background: #4caf7d; }

.poly-cell:hover { filter: brightness(1.08); }

:root[data-theme="dark"] .poly-cell-non_forme { background: #a83a3a; }
:root[data-theme="dark"] .poly-cell-en_formation { background: #b3821f; }
:root[data-theme="dark"] .poly-cell-forme { background: #3f8f63; }

.poly-error { caption-side: top; color: var(--mr-grey); padding: 12px; text-align: left; }

@media (max-width: 700px) {
  .poly-poste-head { min-width: 120px; max-width: 140px; font-size: 12px; }
  .poly-person-head { min-width: 70px; max-width: 70px; }
}

/* Rapports (rapport equipe du matin) */

.rp-status-banner {
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--mr-soft-bg);
  border: 1px solid var(--mr-border);
  font-size: 14px;
}

.rp-status-banner.rp-owned { border-color: #4caf7d; }

.rp-section {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px dashed var(--mr-border);
}

.rp-table-wrap {
  overflow-x: auto;
  margin-top: 10px;
}

.rp-table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}

.rp-table th, .rp-table td {
  border: 1px solid var(--mr-border);
  padding: 2px 4px;
}

.rp-table th {
  background: var(--mr-soft-bg);
  font-size: 11px;
  color: var(--mr-grey);
  padding: 6px 6px;
}

/* Derniere colonne = bouton de suppression de ligne, pas une vraie
   donnee : largeur fixe et etroite, les vraies colonnes se partagent le
   reste de la largeur du tableau (qui prend maintenant toute la place
   disponible au lieu de se limiter au minimum). */
.rp-table th:last-child, .rp-table td:last-child {
  width: 34px;
}

.rp-table input {
  border: none;
  background: transparent;
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
  padding: 6px 4px;
  border-radius: 0;
}

.rp-table input:focus { background: var(--mr-hover-bg); box-shadow: none; outline: none; }
.rp-table input:disabled { color: var(--mr-dark); }

/* Checklist (Verification, Informations supplementaires...) : une ligne
   par item, empilees les unes sous les autres - meme disposition que la
   fenetre de consultation en lecture seule, que ce soit pour remplir un
   rapport ou pour modifier le modele. */
.rp-checklist {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.rp-checklist li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--mr-border);
}

.rp-checklist li:last-child { border-bottom: none; }

/* Selecteur "contextuel" (.rp-checklist input) pour l'emporter sur la
   regle generale input[type=text]{width:100%} : une classe seule perd
   sur la specificite face a un selecteur d'attribut, ce qui laissait
   l'ancien champ s'etirer sur toute la largeur disponible (bug visible
   quand un champ se retrouvait seul sur sa ligne). */
.rp-checklist input {
  width: 120px;
  max-width: 100%;
  flex-shrink: 0;
  border: 1px solid var(--mr-border);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
}

/* Champ de details qui apparait a cote d'une ligne de checklist quand sa
   valeur est un nombre superieur a 0 (ex : nombre d'avaries -> numeros
   d'expedition concernes). */
.rp-checklist-detail {
  flex: 1 1 220px;
  min-width: 160px;
  max-width: 100%;
  resize: vertical;
  border: 1px solid var(--mr-border);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
  font-family: inherit;
}

/* Sections texte libre : compact par defaut, s'agrandit seulement si on a
   vraiment besoin de place (redimensionnable a la main). */
.rp-text-input {
  max-width: 480px;
  resize: vertical;
}

.rp-add-checklist-item {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.rp-add-checklist-item input { flex: 1; max-width: 220px; }
.rp-add-checklist-item select { flex-shrink: 0; }

/* Type de champ (heure/pourcentage) : evite d'avoir a taper le symbole
   soi-meme. Le pourcentage garde un champ etroit avec le signe affiche a
   cote au lieu d'etre tape a la main. */
.rp-percent-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.rp-percent-wrap input { width: 80px; }
.rp-percent-suffix { color: var(--mr-grey); font-size: 13px; }

.rp-required-mark {
  color: var(--mr-danger);
  font-weight: 700;
  margin-left: 1px;
}

/* Reglages d'un champ (type, valeur par defaut, obligatoire), visibles
   uniquement en mode modification du modele - toujours sur leur propre
   ligne, jamais a cote de la valeur elle-meme. */
.rp-item-settings {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  flex-basis: 100%;
  font-size: 12px;
  color: var(--mr-grey);
}

.rp-inline-label {
  display: flex;
  align-items: center;
  gap: 4px;
}

.rp-inline-label input[type="text"] {
  font-size: 12px;
  padding: 4px 6px;
  width: 160px;
}

.rp-inline-checkbox { gap: 6px; }

.rp-col-edit {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rp-col-label-input {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  width: 100%;
  padding: 4px 6px;
}

.rp-col-edit-settings {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.rp-col-default-input {
  font-size: 11px;
  padding: 4px 6px;
  width: 100%;
}

/* Champ obligatoire pas rempli : mis en evidence seulement apres une
   tentative d'enregistrement (pas avant, pour ne pas alarmer inutilement
   pendant la saisie), avec un message clair a cote du bouton Enregistrer -
   pas la bulle de validation native du navigateur. */
.rp-checklist input.rp-field-missing,
.rp-text-input.rp-field-missing {
  border-color: var(--mr-danger);
}

.rp-validation-message {
  background: rgba(214, 69, 69, .1);
  background: color-mix(in srgb, var(--mr-danger) 10%, transparent);
  color: var(--mr-danger);
  border: 1px solid var(--mr-danger);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-top: 10px;
  font-size: 13px;
}

/* Pieces jointes en haut du rapport : petites vignettes cliquables (photo
   ou icone de fichier) qui ouvrent le fichier en pleine taille dans un
   nouvel onglet. */
.rp-attachments-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.rp-attachment-item {
  position: relative;
  width: 92px;
}

.rp-attachment-item a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  border: 1px solid var(--mr-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--mr-soft-bg);
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.rp-attachment-item a:hover {
  border-color: var(--mr-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}

.rp-attachment-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rp-attachment-file {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 20px;
  text-align: center;
  padding: 4px;
  color: var(--mr-grey);
}

.rp-attachment-file span {
  font-size: 10px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
}

.rp-attachment-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--mr-border);
  background: var(--mr-card);
  color: var(--mr-danger);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .1s ease;
}

.rp-attachment-remove:hover { transform: scale(1.1); }

.rp-attachments-upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.rp-history-link {
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  color: var(--mr-primary-dark);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color .15s ease;
}

.rp-history-link:hover { text-decoration-color: var(--mr-primary-dark); }

/* Mode "modifier le modele" : entete de section editable (titre + deplacer
   + supprimer) au lieu du simple titre affiche en lecture. */
.rp-section-edit-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.rp-section-title-input {
  flex: 1;
  min-width: 180px;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.rp-section-edit-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.rp-section-edit-actions .btn { padding: 4px 8px; font-size: 12px; }

/* Fenetre de consultation d'un rapport de l'historique : petite fenetre
   stylee par-dessus la page, en lecture seule, plutot qu'une navigation
   qui remplace le rapport du jour en cours d'edition. */
.rp-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: rp-modal-fade-in .15s ease both;
}

@keyframes rp-modal-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.rp-modal {
  background: var(--mr-card);
  border-radius: var(--radius);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .28);
  width: min(720px, 100%);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.rp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--mr-border);
}

.rp-modal-header h2 {
  margin: 0;
  font-size: 16px;
}

.rp-modal-close {
  border: none;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--mr-grey);
  padding: 4px 8px;
  border-radius: 6px;
  transition: background-color .15s ease, color .15s ease;
}

.rp-modal-close:hover { background: var(--mr-hover-bg); color: var(--mr-dark); }

.rp-modal-body {
  padding: 16px 20px 20px;
  overflow-y: auto;
}

.rp-modal-section { margin-bottom: 18px; }
.rp-modal-section:last-child { margin-bottom: 0; }
.rp-modal-section h3 {
  margin: 0 0 8px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--mr-grey);
}
.rp-modal-section p { margin: 0; }

/* Consultation en lecture seule : une information par ligne (comme un
   vrai rapport imprime), pas des cases cote a cote - plus lisible qu'une
   grille quand un libelle est long et passe sur deux lignes. */
.rp-modal-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rp-modal-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--mr-border);
}

.rp-modal-list li:last-child { border-bottom: none; }
.rp-modal-list li strong { flex-shrink: 0; }
.rp-modal-list li.postes-empty { justify-content: flex-start; }