/* GCAO — bureau, même patte que l'appli téléphone (maquettes B1 à B4 validées
   par Thibault le 2026-10-01) : crème, encre, vert, lilas, cartes arrondies,
   boutons pilule, Bricolage Grotesque + Figtree. Clair par défaut, sombre au choix. */

:root {
  --radius: 14px;
  --radius-carte: 22px;
  --font-titre: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: var(--font-body);
  --menu-largeur: 248px;
}

:root,
:root[data-theme="light"] {
  --bg: #fbf7f0;
  --surface: #ffffff;
  --menu: #f3ece1;
  --border: #eae3d6;
  --fg: #1d1a16;
  --muted: #6b645a;
  --accent: #1f6f5c;
  --primaire: #1d1a16;
  --primaire-texte: #ffffff;
  --success-bg: #d5ecdf;
  --success-fg: #12583f;
  --danger-bg: #fde2dc;
  --danger-fg: #a3301a;
  --warning-fg: #8a4b00;
  --warning-bg: #fff1dc;
  --neutral-bg: #eee8de;
  --neutral-fg: var(--muted);
  --prep-bg: #e3d0f5;
  --prep-fg: #3b1f5e;
  --terrain-bg: #dcefe7;
  --terrain-fg: #1f6f5c;
  --doe-bg: #dce8f7;
  --doe-fg: #1e4d86;
  --barre: #efe8dc;
}

:root[data-theme="dark"] {
  --bg: #1a1714;
  --surface: #24201b;
  --menu: #211d19;
  --border: #3a342d;
  --fg: #f3eee6;
  --muted: #a89f92;
  --accent: #5fb89c;
  --primaire: #f3eee6;
  --primaire-texte: #1a1714;
  --success-bg: #1f3a2f;
  --success-fg: #8fd3bb;
  --danger-bg: #4a2219;
  --danger-fg: #f4a493;
  --warning-fg: #f1b86a;
  --warning-bg: #46341c;
  --neutral-bg: #2e2924;
  --neutral-fg: var(--muted);
  --prep-bg: #4a3a5e;
  --prep-fg: #e8daf7;
  --terrain-bg: #20372f;
  --terrain-fg: #8fd3bb;
  --doe-bg: #22344a;
  --doe-fg: #a9c8ee;
  --barre: #332e28;
}

* {
  box-sizing: border-box;
}

/* sinon un display: grid/flex posé par une classe l'emporte sur l'attribut hidden */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 15px;
}

h1, h2, h3, p {
  margin: 0;
}

h1, h2 {
  font-family: var(--font-titre);
  letter-spacing: -0.015em;
}

a {
  color: var(--accent);
}

/* --- Mise en page : menu latéral + contenu --- */

.appli {
  display: flex;
  min-height: 100vh;
}

.menu {
  width: var(--menu-largeur);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 24px 16px;
  background: var(--menu);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.menu-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 0 4px 18px 8px;
}

.menu-tete .marque {
  padding: 0;
}

/* petite flèche discrète : replie le menu sur ses pictogrammes (grand écran seulement) */
.menu-repli {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.menu-repli:hover {
  background: var(--neutral-bg);
  color: var(--fg);
}

.menu-repli svg {
  transition: transform 0.15s;
}

.marque {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px 18px;
  color: var(--fg);
  text-decoration: none;
}

.marque img {
  width: 36px;
  height: 36px;
}

.marque span {
  font-family: var(--font-titre);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.menu-groupe {
  margin: 14px 0 4px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.menu-lien {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--fg);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.menu-lien:hover {
  background: var(--neutral-bg);
}

.menu-lien.actif {
  background: var(--primaire);
  color: var(--primaire-texte);
}

.menu-lien svg {
  flex-shrink: 0;
}

/* menu qui se déroule : le titre ouvre et ferme ses sous-menus */
.menu-deroulant > summary {
  cursor: pointer;
  list-style: none;
}

.menu-deroulant > summary::-webkit-details-marker {
  display: none;
}

.menu-titre span {
  flex: 1;
}

.menu-chevron {
  transition: transform 0.15s;
}

.menu-deroulant[open] > summary .menu-chevron {
  transform: rotate(180deg);
}

.menu-sous-liens {
  display: flex;
  flex-direction: column;
  margin: 2px 0 6px 18px;
  padding-left: 10px;
  border-left: 2px solid var(--border);
}

.menu-sous-liens .menu-lien {
  min-height: 36px;
  font-size: 14px;
  font-weight: 500;
}

.menu-compte {
  margin: auto 0 0;
  padding: 14px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.menu-compte strong {
  font-size: 15px;
}

.menu-compte .hint {
  font-size: 13px;
}

.menu-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.menu-actions form {
  flex: 1;
  margin: 0;
}

.menu-actions button {
  width: 100%;
  min-height: 34px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.menu-actions button:hover {
  border-color: var(--fg);
}

.contenu {
  flex: 1;
  min-width: 0;
}

/* Plafond de largeur : un formulaire étiré sur tout un grand écran se lit mal, mais 1120 px laissait un grand
   vide à droite des tableaux et du planning (retour du 2026-10-12). Le tableau de bord, fait de cartes qui
   s'ajustent seules, prend toute la largeur. */
.container {
  max-width: 1600px;
  padding: 32px 40px 80px;
}

.container:has(> .tdb) {
  max-width: none;
}

/* Menu replié : il ne reste que le logo, la flèche et les pictogrammes
   (le nom de la page s'affiche au survol). Choix gardé par navigateur. */
@media (min-width: 901px) {
  [data-menu="replie"] .menu {
    width: 72px;
    padding: 24px 12px;
  }

  [data-menu="replie"] .menu-tete {
    flex-direction: column;
    padding: 0 0 10px;
  }

  [data-menu="replie"] .menu-repli svg {
    transform: rotate(180deg);
  }

  [data-menu="replie"] .menu .marque span,
  [data-menu="replie"] .menu-lien span,
  [data-menu="replie"] .menu-organisation,
  [data-menu="replie"] .menu-compte {
    display: none;
  }

  /* le titre du groupe devient un simple trait */
  [data-menu="replie"] .menu-groupe {
    height: 1px;
    margin: 8px 10px;
    overflow: hidden;
    font-size: 0;
    background: var(--border);
  }

  [data-menu="replie"] .menu-lien {
    justify-content: center;
    padding: 0;
  }

  /* replié : seuls les pictogrammes des pages restent, rangés sous un trait par menu */
  [data-menu="replie"] .menu-deroulant > summary {
    display: none;
  }


  [data-menu="replie"] .menu-sous-liens {
    margin: 0;
    padding: 0;
    border: 0;
  }

  [data-menu="replie"] .menu-sous-liens .menu-lien {
    min-height: 42px;
  }

  [data-menu="replie"] .menu-deroulant {
    padding-top: 8px;
    margin-top: 8px;
    border-top: 1px solid var(--border);
  }
}

/* téléphone ou petite fenêtre : le menu se replie derrière un bouton */
.barre-haut {
  display: none;
}

@media (max-width: 900px) {
  .appli {
    display: block;
  }

  .barre-haut {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--menu);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 20;
  }

  .barre-haut .marque {
    padding: 0;
  }

  .barre-haut button {
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--fg);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
  }

  .menu {
    display: none;
    position: fixed;
    inset: 65px 0 0 0;
    width: auto;
    height: auto;
    z-index: 30;
  }

  .menu .menu-tete {
    display: none;
  }

  body.menu-ouvert .menu {
    display: flex;
  }

  .container {
    padding: 20px 16px 60px;
  }
}

/* --- Sections / titres --- */

.section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 14px;
}

fieldset {
  border: none;
  padding: 0;
  margin: 0 0 32px;
}

/* --- Formulaires --- */

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 32px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field.span-2 {
  grid-column: span 2;
}

.field label {
  font-size: 13px;
  color: var(--muted);
}

.field .hint,
.hint {
  font-size: 11px;
  color: var(--muted);
}

input[type="text"],
input[type="email"],
input[type="date"],
input[type="password"],
input[type="number"],
select,
textarea {
  font-family: var(--font-body);
  font-size: 15px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg);
}

textarea {
  min-height: 96px;
  padding: 12px 14px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.field-errors {
  font-size: 12px;
  color: var(--danger-fg);
}

.flash {
  font-size: 14px;
  font-weight: 600;
  padding: 12px 18px;
  border-radius: 16px;
  margin-bottom: 20px;
}

.flash-success {
  background: var(--success-bg);
  color: var(--success-fg);
}

.flash-error {
  background: var(--danger-bg);
  color: var(--danger-fg);
}

/* --- Cases à cocher : systèmes installés --- */

.checkbox-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
}

.checkbox-item input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.checkbox-item label {
  font-size: 14px;
}

/* --- Boutons --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

.btn:hover {
  border-color: var(--fg);
}

.btn-primary {
  background: var(--primaire);
  border-color: var(--primaire);
  color: var(--primaire-texte);
}

.btn-disabled,
.btn:disabled {
  background: var(--neutral-bg);
  color: var(--muted);
  cursor: not-allowed;
}

.btn-row {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* --- Liste des chantiers --- */

table.chantiers {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-carte);
  overflow: hidden;
}

table.chantiers th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 600;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

table.chantiers td {
  padding: 12px 16px;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

table.chantiers tr:last-child td {
  border-bottom: none;
}

table.chantiers tr:hover td {
  background: var(--neutral-bg);
}

.scroll-table {
  max-height: min(70vh, 640px); /* assez haut pour travailler dans un long tableau */
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-carte);
  margin-bottom: 16px;
}

.scroll-table table.chantiers {
  border: none;
  border-radius: 0;
  margin-bottom: 0;
}

.scroll-table table.chantiers th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.row-actions {
  white-space: nowrap;
}

/* une cellule qui se modifie d'un clic (static/js/item_table.js) */
td[data-champ] {
  cursor: text;
}

td[data-champ]:hover {
  box-shadow: inset 0 0 0 1px var(--border);
}

td[data-champ] > input,
td[data-champ] > select,
td[data-champ] .liste-recherche {
  width: 100%;
  min-width: 140px;
}

.edit-dialog {
  background: var(--surface);
  color: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius-carte);
  padding: 24px;
  min-width: 320px;
  max-width: 90vw;
}

.edit-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.badge {
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 8px;
  border-radius: var(--radius);
  background: var(--neutral-bg);
  color: var(--muted);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.pill-success {
  background: var(--success-bg);
  color: var(--success-fg);
}

.pill-danger {
  background: var(--danger-bg);
  color: var(--danger-fg);
}

.pill-neutral {
  background: var(--neutral-bg);
  color: var(--neutral-fg);
}

/* --- Texte d'avancement (accueil) --- */

.av-danger {
  color: var(--danger-fg);
}

.av-warning {
  color: var(--warning-fg);
}

.av-info {
  color: var(--accent);
}

.av-success {
  color: var(--success-fg);
  font-weight: 700;
}

.annexe-category {
  margin-bottom: 40px;
}

.annexe-row {
  border: 1px solid var(--border);
  border-radius: var(--radius-carte);
  background: var(--surface);
  padding: 16px 20px;
  margin-bottom: 12px;
}

.annexe-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.annexe-row-title {
  font-size: 14px;
}

.annexe-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

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

input[type="file"] {
  font-size: 13px;
  color: var(--fg);
}

.empty-state {
  padding: 48px;
  text-align: center;
  color: var(--muted);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-carte);
}

/* --- Statut de cycle de vie (voir app/cycle_vie.py) --- */

.statut-preparation {
  background: var(--prep-bg);
  color: var(--prep-fg);
}

.statut-production {
  background: var(--terrain-bg);
  color: var(--terrain-fg);
}

.statut-receptionne {
  background: var(--success-bg);
  color: var(--success-fg);
}

.statut-doe_en_cours {
  background: var(--doe-bg);
  color: var(--doe-fg);
}

.statut-doe_livre {
  background: var(--neutral-bg);
  color: var(--neutral-fg);
}

.btn-succes {
  background: var(--primaire);
  border-color: var(--primaire);
  color: var(--primaire-texte);
}

.btn-petit {
  min-height: 34px;
  padding: 0 14px;
  font-size: 13px;
}

.barre-statut {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-carte);
  background: var(--surface);
}

.barre-statut form {
  margin: 0;
}

/* --- Accueil : vue d'ensemble --- */

.compteurs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.compteur {
  text-align: left;
  padding: 16px 18px;
  border-radius: var(--radius-carte);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
  font: inherit;
}

.compteur:hover {
  border-color: var(--fg);
}

.compteur.actif {
  border-color: var(--primaire);
  box-shadow: inset 0 0 0 1.5px var(--primaire);
}

.compteur-label {
  display: block;
  font-size: 13px;
  color: var(--muted);
}

.compteur-valeur {
  display: block;
  font-family: var(--font-titre);
  font-size: 34px;
  font-weight: 800;
  margin-top: 2px;
}

.bloc-entreprise {
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  padding: 16px 20px 6px;
  margin-bottom: 16px;
}

.bloc-entreprise-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.bloc-entreprise-tete .logo-entreprise {
  width: 54px;
  height: 54px;
  font-size: 18px;
}

.nom-entreprise-titre {
  font-family: var(--font-titre);
  font-size: 25px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--fg);
  text-decoration: none;
}

.nom-chantier {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
  text-decoration: none;
}

.raccourcis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
  align-items: start;
}

.raccourcis[hidden] {
  display: none;
}

.raccourcis-carte {
  margin: 0;
}

.raccourci-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}

.raccourci-nom {
  min-width: 0;
  color: var(--fg);
  text-decoration: none;
  font-weight: 400;
}

.raccourci-nom strong {
  font-size: 16px;
  font-weight: 700;
}

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

.etoile-favori {
  display: inline-flex;
  vertical-align: -2px;
  margin-right: 6px;
  color: var(--warning-fg);
}

.menu-contextuel {
  position: absolute;
  z-index: 50;
  min-width: 190px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.menu-contextuel[hidden] {
  display: none;
}

.menu-contextuel button {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.menu-contextuel button:hover {
  background: var(--menu);
}

.logo-entreprise {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--terrain-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: var(--terrain-fg);
  overflow: hidden;
}

.logo-entreprise img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #ffffff;
}

.ligne-chantier {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) 140px minmax(0, 1.3fr) 160px;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  font-size: 14px;
}

.ligne-chantier form {
  margin: 0;
}

.ligne-chantier .btn {
  width: 100%;
}

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

  .ligne-chantier {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* --- Pages d'un chantier : onglets Fiche / Préparation / DOE --- */

.onglets-chantier {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--neutral-bg);
  margin-bottom: 24px;
}

.onglet {
  padding: 10px 24px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  color: var(--fg);
  text-decoration: none;
}

.onglet:hover {
  background: var(--surface);
}

.onglet.actif {
  background: var(--primaire);
  color: var(--primaire-texte);
}

/* --- Fiche chantier --- */

.frise {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 20px;
}

.frise-etape {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 6px;
  border-radius: 999px;
}

.frise-faite {
  background: var(--terrain-bg);
  color: var(--terrain-fg);
}

.frise-a-venir {
  border: 1.5px solid var(--border);
  color: var(--muted);
}

.frise-en-cours {
  background: var(--primaire);
  color: var(--primaire-texte);
}

.cartes-fiche {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.carte {
  border: 1px solid var(--border);
  border-radius: var(--radius-carte);
  background: var(--surface);
  padding: 18px 20px;
  font-size: 15px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.carte-titre {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 4px;
}

.carte form {
  margin: 0;
}

.carte .btn {
  margin-top: auto;
  align-self: flex-start;
}

@media (max-width: 720px) {
  .frise,
  .cartes-fiche {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Aperçu d'un PV avant envoi au client */
.pv-apercu iframe {
  width: 100%;
  height: 75vh;
  border: 1px solid var(--border);
  border-radius: var(--radius-carte);
  background: #ffffff;
}

/* Page des étiquettes : une ligne modifiable par étiquette */
.table-etiquettes .centre {
  text-align: center;
}

.table-etiquettes input[type="text"] {
  min-width: 200px;
}

.table-etiquettes input[type="checkbox"] {
  width: 20px;
  height: 20px;
}

/* --- Carte des chantiers (app/carte.py, js/carte.js) --- */

.barre-recherche {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
}

.barre-recherche input {
  flex: 1;
  min-width: 0;
  border-radius: 999px;
  padding: 0 20px;
}

.bascule-vue {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--neutral-bg);
  flex-shrink: 0;
}

.bascule-vue button {
  padding: 8px 20px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.bascule-vue button.actif {
  background: var(--primaire);
  color: var(--primaire-texte);
}

.carte-chantiers {
  height: 560px;
  border-radius: var(--radius-carte);
  border: 1px solid var(--border);
  z-index: 0; /* sous le menu et les fenêtres de l'appli */
}

.carte-fiche {
  height: 240px;
  margin-top: 16px;
}

.epingle-chantier {
  background: var(--accent);
  border: 3px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Interventions (carré orange, rouge si urgente) et relevés (losange
   framboise) sur la carte de l'accueil ; couleurs fixes : le fond de carte
   reste clair, même en thème sombre. */
.repere-lieu span {
  display: block;
  width: 100%;
  height: 100%;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  box-sizing: border-box;
}

.repere-intervention span {
  background: #e8892b;
  border-radius: 3px;
}

.repere-urgent span {
  background: #d33a1f;
}

.repere-releve span {
  background: #b83c8c;
  border-radius: 2px;
  transform: rotate(45deg) scale(0.9);
}

.legende-carte {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  color: #1d1a16;
  font-size: 13px;
  line-height: 1.3;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.legende-carte label,
.legende-carte .legende-urgent {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.legende-carte .legende-urgent {
  padding-left: 24px;
  cursor: default;
  color: #6b645a;
}

.legende-carte .symbole {
  width: 12px;
  height: 12px;
  border: 1.5px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.symbole-rond {
  border-radius: 50%;
  background: conic-gradient(#3b1f5e 0 25%, #1f6f5c 0 50%, #1e4d86 0 75%, #8a8278 0);
}

.symbole-carre {
  border-radius: 2px;
  background: #e8892b;
}

.symbole-urgent {
  background: #d33a1f;
}

.symbole-losange {
  border-radius: 2px;
  background: #b83c8c;
  transform: rotate(45deg) scale(0.85);
}

@media (max-width: 600px) {
  .carte-chantiers {
    height: 420px;
  }
}

/* --- Interventions (app/routes/interventions.py) --- */

.mise-en-page-interventions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 24px;
  align-items: start;
}

@media (max-width: 1000px) {
  .mise-en-page-interventions {
    grid-template-columns: 1fr;
  }
}

/* --- Replis de la page « Plans » : Entreprise › Chantier › Plans, fermés au départ --- */

.repli {
  border: 1px solid var(--border);
  border-radius: var(--radius-carte);
  background: var(--surface);
  margin-bottom: 10px;
}

.repli > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.repli > summary::-webkit-details-marker {
  display: none;
}

.repli > summary::before {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform 0.15s;
}

.repli[open] > summary::before {
  transform: rotate(45deg);
}

.repli > table {
  margin: 0 18px 14px;
  width: calc(100% - 36px);
}

/* le chantier, dans son entreprise */
.repli .repli {
  margin: 0 14px 10px;
  border-radius: var(--radius);
  background: var(--bg);
}

.repli .repli > summary {
  padding: 10px 14px;
  font-size: 14px;
}

/* --- Volet flottant : un formulaire de création déroulé en haut à droite, par-dessus la page ---
   Enroulé, il laisse toute la largeur au tableau (retour du bureau du 2026-10-08 :
   le formulaire en colonne cachait les lignes des interventions). */

.entete-volet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.volet-flottant {
  position: relative;
}

.volet-flottant > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  gap: 8px;
}

.volet-flottant > summary::-webkit-details-marker {
  display: none;
}

.volet-flottant > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s;
}

.volet-flottant[open] > summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.volet-flottant > .carte {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  width: min(400px, calc(100vw - 32px));
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.16);
}

/* --- Titre de page et éclair des tâches prioritaires --- */

.titre-page {
  font-family: var(--font-titre);
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.eclair {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 6px;
  border-radius: 50%;
  background: #f08a24;
  color: #ffffff;
  vertical-align: middle;
}

/* le logo (fond noir) reste détaché du menu en mode sombre */
:root[data-theme="dark"] .marque img {
  border-radius: 10px;
  box-shadow: 0 0 0 1px var(--border);
}

/* l'organisation cliente, sous GCAO dans le menu (une fois connecté) */
.menu-organisation {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 8px 6px;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
}

.menu-organisation img {
  max-width: 44px;
  max-height: 32px;
  border-radius: 6px;
  background: #ffffff;
}

.menu-organisation span {
  display: flex;
  flex-direction: column;
  font-weight: 700;
  line-height: 1.2;
}

.menu-organisation small {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

/* --- Accueil : le logo de l'organisation, discret, sur la ligne de la date --- */

.accueil-date {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.accueil-logo {
  max-height: 26px;
  max-width: 96px;
  padding: 2px 4px;
  border-radius: 6px;
  background: #ffffff; /* logos souvent faits pour un fond blanc, même en thème sombre */
}

/* --- Liste avec recherche (static/js/liste_recherche.js) --- */

.liste-recherche {
  position: relative;
}

.liste-recherche input {
  width: 100%;
}

.liste-recherche ul {
  position: absolute;
  z-index: 30;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: auto;
  margin: 4px 0 0;
  padding: 4px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

.liste-recherche li[role="option"] {
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.liste-recherche li[role="option"]:hover,
.liste-recherche li.actif {
  background: var(--neutral-bg);
}

.liste-recherche-groupe {
  padding: 8px 10px 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

/* --- Fenêtre « Ajouter une porte » (préparation du matériel) --- */

.fenetre-porte {
  width: min(760px, calc(100vw - 32px));
}

.table-porte td {
  vertical-align: middle;
}

.table-porte input[type="text"] {
  width: 100%;
  min-width: 160px;
}

/* --- Tableaux : en-têtes qui restent visibles, filtres par colonne --- */

.scroll-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
}

.scroll-table .ligne-filtres th {
  top: 38px;
  padding-top: 4px;
  padding-bottom: 8px;
}

.ligne-filtres input[type="search"] {
  width: 100%;
  min-width: 70px;
  min-height: 32px;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 400;
}

/* --- Nom du chantier modifiable sur place --- */

.titre-modifiable {
  cursor: text;
  border-radius: 8px;
}

.titre-modifiable:hover,
.titre-modifiable:focus-visible {
  background: var(--neutral-bg);
  outline: none;
}

input.champ-titre {
  width: 100%;
  font-size: 32px;
  margin-bottom: 4px;
  padding: 0 6px;
  border-radius: 8px;
}

/* --- Activité d'un technicien : une barre par jour (app/activite.py) --- */

.activite-barres {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 170px;
}

.activite-jour {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  gap: 4px;
  padding: 0;
  border: none;
  background: none;
  color: var(--fg);
  font-family: inherit;
  cursor: pointer;
}

.activite-jour.vide {
  cursor: default;
}

.activite-nombre {
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.activite-barre {
  display: block;
  min-height: 3px;
  border-radius: 6px 6px 2px 2px;
  background: var(--accent);
}

.activite-jour.vide .activite-barre {
  background: var(--neutral-bg);
}

.activite-jour:not(.vide):hover .activite-barre,
.activite-jour.choisi .activite-barre {
  background: var(--fg);
}

.activite-date {
  height: 26px;
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
  color: var(--muted);
}

.activite-detail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.activite-detail[hidden] {
  display: none;
}

/* --- Volet « Dossier du terrain » des pages du DOE (static/js/dossier_terrain.js) --- */

.bouton-dossier-terrain {
  margin-left: auto;
  align-self: center;
}

.dossier-terrain {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  width: min(440px, 94vw);
  overflow-y: auto;
  padding: 0 18px 32px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -14px 0 34px rgba(0, 0, 0, 0.08);
}

body.dossier-ouvert .dossier-terrain {
  display: block;
}

/* assez de place : la page se pousse, le volet ne cache rien de ce qu'on remplit */
@media (min-width: 1200px) {
  body.dossier-ouvert {
    padding-right: 440px;
  }
}

.dossier-tete {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 -18px 8px;
  padding: 16px 18px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-titre);
  font-size: 18px;
}

.dossier-attente {
  padding: 24px 0;
}

.dossier-section {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.dossier-section > summary {
  padding: 6px 0;
  font-weight: 700;
  cursor: pointer;
}

.dossier-secteur {
  margin: 12px 0 2px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.dossier-ligne {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  font-size: 14px;
}

.dossier-ligne-titre,
.dossier-fichier {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.dossier-fichier {
  padding: 8px 0;
  font-size: 14px;
}

.dossier-fichier a {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--fg);
}

.dossier-vignettes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  gap: 10px;
}

.dossier-vignette {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.dossier-vignette img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  background: var(--neutral-bg);
}

.dossier-vignette .btn {
  font-size: 11px;
  padding: 4px 6px;
}

.dossier-texte {
  margin: 6px 0 0;
  padding: 10px;
  border-radius: 10px;
  background: var(--bg);
  font-family: var(--font-body);
  font-size: 13px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.dossier-tableau {
  margin-top: 6px;
  font-size: 13px;
}

.dossier-remontee {
  white-space: pre-line;
}

.dossier-visionneuse {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.82);
  cursor: zoom-out;
}

.dossier-visionneuse img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
}

/* --- Le numéro de version, en bas du menu : il mène aux nouveautés (app/version.py) --- */

.menu-version {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
}

.menu-version:hover {
  text-decoration: underline;
}

/* « Voir les tâches » d'un chantier : le terrain comme sur le téléphone, en lecture seule */
.secteur-suivi {
  margin-top: 24px;
}

.secteur-suivi-titre {
  margin: 0 0 10px;
  font-size: 16px;
}

.cartes-suivi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  align-items: start;
}

.etape-suivie {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.etape-suivie-tete {
  display: flex;
  align-items: center;
  gap: 8px;
}

.etape-suivie-tete .pill {
  margin-left: auto;
}

.etape-suivie-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.etape-suivie-photos img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.pill-en-cours {
  background: var(--prep-bg);
  color: var(--prep-fg);
}

.barre-lot {
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  overflow: hidden;
}

.barre-lot > div {
  height: 100%;
  background: var(--success-fg);
}

/* Chargement long : le bouton devient la barre (static/js/chargement.js) */
.btn-charge {
  pointer-events: none;
  color: var(--fg);
  border-color: var(--accent);
  background: linear-gradient(to right, var(--success-bg) var(--progression, 0%), var(--surface) var(--progression, 0%));
}

.btn-charge-animee {
  background: repeating-linear-gradient(-45deg, var(--success-bg) 0 14px, var(--surface) 14px 28px);
  background-size: 200% 100%;
  animation: btn-charge-defile 1.2s linear infinite;
}

@keyframes btn-charge-defile {
  to {
    background-position: -79px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-charge-animee {
    animation: none;
  }
}

/* --- Page « Privilèges » : une ligne par privilège, une colonne par personne --- */
.privileges-familles {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.privileges-cadre {
  overflow: auto;
  max-height: calc(100vh - 170px);
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}
table.privileges {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13.5px;
}
table.privileges th,
table.privileges td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  text-align: center;
  white-space: nowrap;
}
table.privileges thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface);
  vertical-align: bottom;
}
table.privileges .privileges-libelle {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
  text-align: left;
  font-weight: 500;
  min-width: 320px;
  white-space: normal;
}
table.privileges thead .privileges-libelle {
  z-index: 3;
}
table.privileges .privileges-libelle.enfant {
  padding-left: 26px;
}
.privileges-code {
  display: inline-block;
  min-width: 44px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.privileges-personne .privileges-nom,
.privileges-personne .privileges-poste {
  display: block;
}
.privileges-personne .privileges-poste {
  font-weight: 400;
  color: var(--muted);
  font-size: 12px;
}
.privileges-personne.coupe .privileges-nom {
  text-decoration: line-through;
}
.privileges-personne form {
  margin: 6px 0 0;
}
table.privileges tr.privileges-groupe th {
  position: sticky;
  left: 0;
  text-align: left;
  font-family: var(--font-titre);
  font-size: 15px;
  padding-top: 16px;
  background: var(--surface);
}
table.privileges tr.privileges-partie th {
  text-align: left;
  color: var(--muted);
  font-weight: 600;
  background: var(--surface);
}
table.privileges td input[type="checkbox"] {
  width: 18px;
  height: 18px;
}
table.privileges td.inerte input {
  opacity: 0.35;
}

/* --- Page « Privilèges » en arborescence : les groupes et les gens à gauche, leurs privilèges à droite --- */
.priv { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: start; }
.priv-arbre { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-carte); padding: 10px; position: sticky; top: 16px; max-height: calc(100vh - 40px); overflow: auto; }
.priv-arbre summary { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 4px 6px; border-radius: 10px; }
.priv-arbre summary a { flex: 1; font-family: var(--font-titre); font-weight: 500; color: inherit; text-decoration: none; padding: 4px 8px; border-radius: 999px; }
.priv-arbre summary em { font-style: normal; font-size: 12px; color: var(--muted); }
.priv-arbre .actif { background: var(--primaire); color: var(--primaire-texte); }
.priv-personne { display: flex; align-items: center; gap: 6px; justify-content: space-between; margin: 2px 0 2px 22px; padding: 5px 10px; border-radius: 999px; color: inherit; text-decoration: none; font-size: 14px; }
.priv-personne:hover, .priv-arbre summary a:hover { background: var(--neutral-bg); }
.priv-personne.actif:hover, .priv-arbre summary a.actif:hover { background: var(--primaire); }
.priv-personne.coupe span:first-child { text-decoration: line-through; }
.priv-propre { color: var(--accent); font-size: 10px; }
.priv-volet { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-carte); padding: 18px 20px; min-width: 0; }
.priv-tete { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
.priv-tete h3 { font-family: var(--font-titre); font-size: 20px; margin: 0; }
.priv-discret { color: var(--muted); margin: 2px 0 0; font-size: 13.5px; }
.priv-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.priv-actions form { margin: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13px; font-weight: 600; }
.priv-famille { font-family: var(--font-titre); font-size: 17px; margin: 18px 0 6px; padding-top: 12px; border-top: 1px solid var(--border); }
.priv-bloc { margin-bottom: 10px; }
.priv-bloc h5 { font-size: 14px; margin: 10px 0 4px; }
.priv-partie { color: var(--muted); font-weight: 600; font-size: 13px; margin: 6px 0 2px; }
.priv-ligne { display: flex; align-items: center; gap: 8px; padding: 3px 6px; border-radius: 8px; font-size: 14px; cursor: pointer; }
.priv-ligne:hover { background: var(--bg); }
.priv-ligne.enfant { margin-left: 22px; }
.priv-ligne input { width: 17px; height: 17px; flex: none; }
.priv-ligne.inerte .priv-libelle, .priv-ligne.inerte input { opacity: .4; }
.priv-menu { position: fixed; z-index: 50; background: var(--surface); border: 1px solid var(--fg); border-radius: var(--radius); padding: 6px; box-shadow: 0 12px 30px rgba(0, 0, 0, .25); }
.priv-menu[hidden] { display: none; }
.priv-menu a { display: block; padding: 6px 12px; border-radius: 8px; color: inherit; text-decoration: none; font-size: 14px; }
.priv-menu a:hover { background: var(--neutral-bg); }
@media (max-width: 900px) { .priv { grid-template-columns: minmax(0, 1fr); } .priv-arbre { position: static; max-height: none; } }

/* --- Le « i » à côté d'un titre : l'explication de la rubrique, rangée (static/js/info_titre.js) --- */

.info-titre {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: 8px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  font: italic 700 12px/1 Georgia, serif;
  vertical-align: middle;
  cursor: pointer;
}

.info-titre:hover,
.info-titre[aria-expanded="true"] {
  background: var(--primaire);
  border-color: var(--primaire);
  color: var(--primaire-texte);
}

.info-texte {
  font-size: 13px;
  max-width: 900px;
}

.onglets-etiquettes {
  flex-wrap: wrap;
  border-radius: 22px;
}

/* Onglet « Plan » d'un chantier sorti de la préparation : où en est le secteur de chaque plan */
.plan-avancement { min-width: 220px; }
.plan-avancement > span { display: block; white-space: nowrap; }
.barre-avancement { height: 7px; border-radius: 999px; background: var(--border); overflow: hidden; margin-top: 5px; max-width: 260px; }
.barre-avancement i { display: block; height: 100%; border-radius: 999px; background: var(--success-fg); }

/* DOE : valeur reprise de la préparation (n° 223), proposée tant qu'on n'a pas enregistré */
.repris-preparation {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--prep-bg);
  color: var(--prep-fg);
  font-size: 11px;
  font-weight: 600;
}

/* Panneau large à droite (import de la liste de matériel, enregistrement de compte, heures vendues) : comme une
   nouvelle intervention, il glisse par-dessus la page et défile seul */
dialog.panneau-large { position: fixed; inset: 0 0 0 auto; margin: 0; height: 100%; max-height: none; width: min(1040px, 100vw); max-width: 100vw;
  border: 0; border-left: 1px solid var(--border); border-radius: 0; padding: 0; background: var(--surface); color: var(--fg);
  box-shadow: -14px 0 36px rgba(0, 0, 0, .18); }
dialog.panneau-large.etroit { width: min(700px, 100vw); }
dialog.panneau-large[open] { display: flex; flex-direction: column; }
dialog.panneau-large::backdrop { background: rgba(0, 0, 0, .35); }
.panneau-tete { display: flex; justify-content: space-between; align-items: start; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.panneau-tete h2 { font-family: var(--font-titre); font-size: 20px; margin: 0; }
.panneau-corps { overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.panneau-corps section { display: flex; flex-direction: column; gap: 12px; }
.panneau-corps section h3 { font-family: var(--font-titre); font-size: 16px; margin: 0; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.panneau-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 20px 16px; border-top: 1px solid var(--border); }
.panneau-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.panneau-chiffres div { border-radius: var(--radius); padding: 8px 12px; background: var(--menu); }
.panneau-chiffres div.attention { background: var(--warning-bg); color: var(--warning-fg); }
.panneau-chiffres b { display: block; font-family: var(--font-titre); font-size: 22px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.panneau-chiffres span { font-size: 13px; }
.panneau-alerte { background: var(--warning-bg); color: var(--warning-fg); border-radius: var(--radius); padding: 10px 14px; }
.panneau-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.panneau-colonnes label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--muted); }
.panneau-table { overflow-x: auto; }
.panneau-table table { width: 100%; border-collapse: collapse; }
.panneau-table th { text-align: left; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding: 6px 8px; white-space: nowrap; }
.panneau-table td { padding: 5px 8px; border-top: 1px solid var(--border); vertical-align: middle; }
.panneau-table td.num, .panneau-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.panneau-table tr.ignoree td { opacity: .45; }
.panneau-table input[type=text], .panneau-table select { padding: 4px 8px; min-width: 0; }
.segments { display: flex; flex-wrap: wrap; gap: 6px; }
.segments label { cursor: pointer; }
.segments input { position: absolute; opacity: 0; pointer-events: none; }
.segments span { display: inline-block; border: 1px solid var(--border); background: var(--bg); border-radius: 999px; padding: 6px 14px; }
.segments input:checked + span { background: var(--primaire); color: var(--primaire-texte); border-color: var(--primaire); }
.segments input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.repris { background: var(--success-bg); color: var(--success-fg); border-radius: var(--radius); padding: 8px 12px; font-size: 13.5px; }

/* --- Consignes du bureau, sur la fiche du chantier --- */

.consignes-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 12px 0;
}

.consigne-photo {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.consigne-photo img {
  width: 120px;
  height: 90px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.consignes-lecteurs {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 14px;
}

.champ-avec-unite { display: flex; align-items: center; gap: 8px; }
.champ-avec-unite input { flex: 1; min-width: 0; }
.unite-champ { font-weight: 600; }

/* --- Régularisation d'une intervention clôturée (0.65.0) --- */
.regul-a_regulariser {
  background: var(--warning-bg);
  color: var(--warning-fg);
}

.regul-regularisee {
  background: var(--success-bg);
  color: var(--success-fg);
}

.regul-devis {
  background: var(--prep-bg);
  color: var(--prep-fg);
}

.regul-non_regularisee {
  background: var(--neutral-bg);
  color: var(--neutral-fg);
}

tr.ligne-a-regulariser td:first-child {
  box-shadow: inset 5px 0 0 var(--warning-fg);
}

.compteur-regulariser .compteur-valeur {
  color: var(--warning-fg);
}

.regul-motif {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--neutral-bg);
}

.regul-choix {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.regul-historique {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}