/* Styles propres à l'application, par-dessus theme.css (charte « esprit Vuexy »).
   Aucune couleur en dur : tout passe par les variables de theme.css, pour que
   le thème sombre s'applique partout. */

* { box-sizing: border-box; }

/* La page de connexion a sa propre feuille : public/assets/css/auth.css */

/* Bouton-lien (déconnexion, désactivation) */
.link-button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--primary);
}
.link-button:hover { text-decoration: underline; }
.link-button.text-danger { color: rgb(var(--danger-rgb)); }

/* Actions de ligne de tableau : groupe de boutons "segmenté" (icônes seules,
   soudées, séparées par un simple trait) plutôt que des icônes éparses. */
.actions-segmented {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.actions-segmented form { display: contents; }
/* Descendant (pas enfant direct) : un bouton "Supprimer" est dans son propre
   <form> (jeton CSRF), donc petit-fils de .actions-segmented, pas fils. */
/* Icône d'action posée seule (hors groupe segmenté) : petit bouton carré bordé, plutôt
   que le bouton brut du navigateur. Le groupe segmenté ci-dessous reprend la main. */
.action-icon {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  width: 32px; height: 30px; padding: 0; margin: 0 1px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text-muted);
  font-size: 15px; line-height: 1; cursor: pointer; text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.action-icon:hover { background: var(--primary-01); border-color: rgba(var(--primary-rgb), .4); color: var(--primary); }
.action-icon--danger:hover { background: rgba(var(--danger-rgb), .1); border-color: rgba(var(--danger-rgb), .4); color: rgb(var(--danger-rgb)); }
.action-icon:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--primary-02); }
.actions-segmented .action-icon {
  margin: 0; border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  min-width: 34px;
  height: 32px;
  border: 0;
  border-left: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.actions-segmented > .action-icon:first-child,
.actions-segmented > form:first-child > .action-icon {
  border-left: 0;
}
/* Action volontairement indisponible (ex. désactiver le compte développeur) */
.actions-segmented .action-icon.is-disabled {
  color: var(--gray-4); cursor: not-allowed;
}
.actions-segmented .action-icon.is-disabled:hover { background: transparent; color: var(--gray-4); }

.actions-segmented .action-icon:hover {
  background: var(--primary-01);
  color: var(--primary);
}
.actions-segmented .action-icon--danger:hover {
  background: rgb(var(--danger-rgb));
  color: #fff;
}
.actions-segmented .action-icon--success:hover {
  background: rgb(var(--success-rgb));
  color: #fff;
}

/* Champ de saisie à icône intégrée — partagé par la page de connexion et
   l'écran « Mon compte ». Bordure unique : l'icône est superposée dans le
   champ plutôt que placée dans un .input-group. */
.auth-champ { position: relative; display: block; }
.auth-champ__icone {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 17px; line-height: 1; color: var(--text-muted);
  pointer-events: none;
  transition: color .15s;
}
.auth-champ .form-control {
  height: 46px;
  padding: 0 14px 0 42px;
  border-radius: var(--radius);
}
.auth-champ--action .form-control { padding-right: 50px; }

/* Au doigt, la cible du bouton « œil » passe à 48px. */
@media (max-width: 575.98px) {
  .auth-champ .form-control { height: 48px; font-size: 16px; }
  .auth-champ__oeil { width: 44px; height: 44px; }
}
.auth-champ__oeil {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--text-muted); font-size: 17px;
  cursor: pointer; transition: background .15s, color .15s;
}
.auth-champ__oeil:hover { background: var(--hover-bg); color: var(--text); }
.auth-champ__oeil:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--primary-02); }
.auth-champ:focus-within .auth-champ__icone { color: var(--primary); }

/* Écran « Mon compte » */
.mon-compte-identite { display: flex; align-items: center; gap: .85rem; }
.mon-compte-identite__avatar {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gradient-brand); color: #fff;
  font-size: 18px; font-weight: 600; letter-spacing: .5px;
  box-shadow: var(--shadow-primary);
}
.mon-compte-identite__nom { font-size: 16px; font-weight: 600; color: var(--text); }

/* Écran technique « Version & mises à jour » (compte développeur) */
.version-actuelle { display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem; }
.version-actuelle__numero {
  font-size: 32px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
  background: var(--gradient-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.version-migrations { margin: 0; padding-left: 1.1rem; font-size: 12.5px; }
.version-migrations li { margin-bottom: .2rem; }

.version-note { padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--border); }
.version-note:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.version-note__titre {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem;
  font-size: 17px; font-weight: 600; margin: 0 0 .75rem;
}
.version-note__date { font-size: 12.5px; font-weight: 400; color: var(--text-muted); }
.version-note__rubrique {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); margin: .9rem 0 .35rem;
}
.version-note__lignes { margin: 0; padding-left: 1.1rem; font-size: 13.5px; line-height: 1.65; }

/* Onglet Équipe d'un chantier (à venir) */
.equipe-ajout { max-width: 460px; }
.equipe-initiales {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-right: .6rem;
  border-radius: 50%;
  background: var(--primary-01); color: var(--primary);
  font-size: 11.5px; font-weight: 700; letter-spacing: .3px;
  vertical-align: middle;
}

/* En-tête de page (titre + fil d'Ariane) : dans le flux, sans bandeau coloré,
   sous l'en-tête flottant. */
.page-banner { padding: 1.5rem 1.5rem 0; }
.page-body { padding: 1.25rem 1.5rem 2rem; }
@media (max-width: 991.98px) {
  .page-banner { padding: 1.25rem 1rem 0; }
  .page-body { padding: 1rem 1rem 1.5rem; }
}

/* Sidebar mobile : voile derrière le menu */
.sidebar-backdrop {
  display: none; position: fixed; inset: 0; z-index: 105; background: var(--backdrop);
}
.sidebar-backdrop.show { display: block; }

/* Actions dans les tables */
.table-actions { white-space: nowrap; text-align: right; }
.table-actions > * + * { margin-left: .75rem; }
.table .empty { color: var(--text-muted); text-align: center; padding: 2rem; }
.table td:has(> .etat-vide) { padding: 0; }

/* Zone de glissé-déposé (upload de documents, photos...) */
.dropzone {
  position: relative;
  border: 2px dashed var(--input-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1rem;
  text-align: center;
  background: var(--surface-alt);
  transition: border-color .15s, background .15s;
}
.dropzone:hover { border-color: var(--primary); }
.dropzone.is-dragover { border-color: var(--primary); background: var(--primary-01); }
/* Envoi immédiat (data-envoi-auto) : pendant l'envoi, la zone le dit et ne reçoit plus rien. */
.dropzone__envoi { display: none; margin-top: .5rem; font-weight: 600; font-size: 13px; color: var(--primary); }
.dropzone.is-envoi { pointer-events: none; border-style: solid; border-color: var(--primary); background: var(--primary-01); }
.dropzone.is-envoi .dropzone__envoi { display: block; }
.dropzone.is-envoi .dropzone__text, .dropzone.is-envoi .dropzone__filename-remove { display: none; }
.dropzone.is-envoi .dropzone__icon { animation: dropzone-envoi 1s ease-in-out infinite alternate; }
@keyframes dropzone-envoi { from { transform: translateY(2px); opacity: .6; } to { transform: translateY(-3px); opacity: 1; } }
/* Documents d'un bon de commande : zone avec bouton, liste lisible. */
.bc-docs__zone { padding: 1.1rem 1rem; }
.bc-docs__zone .dropzone__icon { font-size: 26px; margin-bottom: .3rem; }
.bc-docs__zone small { display: block; margin-top: .2rem; font-size: 11.5px; }
.bc-docs__liste li { display: flex; align-items: center; gap: .5rem; padding: .4rem 0; border-bottom: 1px solid var(--border); }
.bc-docs__liste li:last-child { border-bottom: 0; }
.bc-docs__lien { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .6rem; color: var(--text); text-decoration: none; }
.bc-docs__lien:hover .bc-docs__nom { color: var(--primary); }
.bc-docs__lien > i { flex: none; font-size: 1.5rem; }
.bc-docs__pdf { color: rgb(var(--danger-rgb)); }
.bc-docs__image { color: var(--primary); }
.bc-docs__nom { min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
.bc-docs__nom small { display: block; font-weight: 400; font-size: 11.5px; color: var(--text-muted); }
.dropzone__input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.dropzone__icon { font-size: 32px; color: var(--primary); display: block; margin-bottom: .4rem; }
.dropzone__text { color: var(--text-muted); font-size: 13px; }
.dropzone__filename { margin-top: .5rem; font-weight: 500; font-size: 13px; }

.dropzone.has-file {
  border-style: solid;
  border-color: rgb(var(--success-rgb));
  background: rgba(var(--success-rgb), .08);
}
.dropzone.has-file .dropzone__icon { color: rgb(var(--success-rgb)); }
.dropzone__filename {
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: .3rem;
  color: rgb(var(--success-rgb));
  font-size: 14px;
  text-align: left;
}
.dropzone.has-file .dropzone__filename { display: flex; }
.dropzone.has-file .dropzone__text { display: none; }
.dropzone__filename-item { display: flex; align-items: center; justify-content: center; gap: .4rem; }
.dropzone__filename-size { color: var(--text-muted); font-weight: 400; }
.dropzone__filename-remove {
  position: relative;
  z-index: 1;
  background: none;
  border: 0;
  padding: 0 .25rem;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1;
}
.dropzone__filename-remove:hover { color: rgb(var(--danger-rgb)); }

/* Réordonnancement par glissé-déposé (reorder-list.js).
   La ligne saisie reste pleinement visible et se soulève. */
.reorder-handle {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; min-height: 28px;
  cursor: grab;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  border-radius: var(--radius-sm);
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  transition: background .15s, color .15s;
}
.reorder-handle:hover { background: var(--hover-bg); color: var(--text); }
.reorder-handle:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--primary-02); color: var(--primary); }
.reorder-handle:active { cursor: grabbing; }

.reorder-item.is-dragging {
  position: relative;
  z-index: 5;
  cursor: grabbing;
  background: var(--surface);
  box-shadow: var(--shadow-card-hover);
  border-radius: var(--radius);
  outline: 1px solid var(--primary-02);
}
table:has(> tbody.reorder-list) { border-collapse: separate; border-spacing: 0; }
.reorder-cellule { white-space: nowrap; }
.reorder-cellule .reorder-index {
  display: inline-block; min-width: 18px;
  font-size: 12px; color: var(--text-muted); text-align: right;
}
.reorder-list.is-reordering .reorder-item:not(.is-dragging) { opacity: .72; }
body.reorder-en-cours { -webkit-user-select: none; user-select: none; cursor: grabbing; }

/* Tableau de bord : grille de widgets déplaçables et redimensionnables */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 116px;
  gap: 1rem;
}
@media (max-width: 767.98px) {
  .dashboard-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: auto; }
  .dashboard-widget { grid-column: span 4 !important; grid-row: auto !important; }
  /* Téléphone : la carte prend la hauteur de son contenu, sans dépasser celle choisie au bureau
     (--rows rangées de 116 px) ; une longue liste continue de défiler dans la carte. */
  .dashboard-widget > .card, .dashboard-widget > .card.h-100 { height: auto !important; max-height: calc(var(--rows, 2) * 116px + (var(--rows, 2) - 1) * 1rem); }
  .dashboard-widget > .card > .card-body { min-height: 0; }
}
.dashboard-widget { position: relative; min-width: 0; container-type: inline-size; }
.dashboard-widget > .card { height: 100%; overflow: hidden; }
.dashboard-widget > .card > .card-body { overflow: hidden auto; scrollbar-width: thin; scrollbar-color: var(--gray-4) transparent; }
.dashboard-widget__handle,
.dashboard-widget__resize {
  display: none;
  position: absolute;
  z-index: 2;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  line-height: 1;
  box-shadow: var(--shadow-sm);
}
.dashboard-widget__handle {
  top: .5rem;
  right: .5rem;
  padding: .25rem .4rem;
  cursor: grab;
  font-size: 15px;
}
.dashboard-widget__handle:active { cursor: grabbing; }
.dashboard-widget__resize {
  bottom: .35rem;
  right: .35rem;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  cursor: nwse-resize;
  font-size: 14px;
  touch-action: none;
}
.dashboard-grid--edit-mode .dashboard-widget__handle,
.dashboard-grid--edit-mode .dashboard-widget__resize {
  display: inline-flex;
}
.dashboard-grid--edit-mode .dashboard-widget > .card {
  outline: 1px dashed var(--gray-4);
  outline-offset: 2px;
}
/* Carte en cours de glissé : elle reste visible, légèrement inclinée et
   soulevée — on suit ce qu'on déplace. */
.dashboard-widget.is-dragging { z-index: 4; }
.dashboard-widget.is-dragging > .card {
  transform: rotate(1.5deg) scale(1.02);
  box-shadow: 0 22px 48px -12px rgba(47, 51, 73, .35);
  opacity: .92;
}
[data-theme="dark"] .dashboard-widget.is-dragging > .card { box-shadow: 0 22px 48px -12px rgba(0, 0, 0, .7); }
.dashboard-widget.is-resizing { z-index: 3; }
.dashboard-widget.drop-target > .card { outline: 2px solid var(--primary); outline-offset: 2px; }

@container (max-width: 250px) {
  .card-body.stat-card { padding: 1rem; }
  .stat-card { gap: .6rem; }
  .stat-card__icon { flex-basis: 38px; width: 38px; height: 38px; font-size: 18px; }
  .stat-card__title { font-size: 13.5px; }
  .stat-card__row { font-size: 12px; }
}

/* Minuteur de session (en-tête) : déconnexion automatique par inactivité. */
.session-timer {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .65rem;
  border-radius: 999px;
  background: var(--surface-alt);
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: background-color .3s ease, color .3s ease;
}
.session-timer.is-warning {
  background: rgb(var(--warning-rgb));
  border-color: rgb(var(--warning-rgb));
  color: #fff;
  animation: session-timer-pulse 1.4s ease-in-out infinite;
}
.session-timer.is-critical {
  background: rgb(var(--danger-rgb));
  border-color: rgb(var(--danger-rgb));
  color: #fff;
  animation: session-timer-pulse .7s ease-in-out infinite;
}
/* Session expirée pendant une saisie (envoi-sur.js) : lien de reconnexion dans un autre
   onglet, la page en cours garde sa saisie. */
.session-expiree-lien {
  position: fixed; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  z-index: 2000; padding: .6rem 1.1rem; border-radius: 999px;
  background: rgb(var(--danger-rgb)); color: #fff; font-weight: 600; text-decoration: none;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
}
.session-expiree-lien:hover, .session-expiree-lien:focus { color: #fff; text-decoration: underline; }
@keyframes session-timer-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: .82; }
}

/* --- Import HFSQL --------------------------------------------------------- */
.import-totaux { display: flex; flex-wrap: wrap; gap: 12px; }
.import-totaux > div {
    flex: 1 1 110px; padding: 10px 14px; border-radius: var(--radius); background: var(--surface-alt);
    display: flex; flex-direction: column; gap: 2px;
}
.import-totaux span { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.import-totaux strong { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.import-exemple {
    font-size: 11.5px; line-height: 1.45; background: var(--surface-alt); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 8px 10px; white-space: pre; overflow-x: auto; color: var(--text);
}

/* --- Chantiers : badges d'étape, pastilles, liste ------------------------- */
/* --etape-couleur est posée en style="" par la vue (couleur de la table
   chantier_etapes ou du marché) : pastel + texte de la couleur, jamais d'aplat. */
.badge-etape {
  background: color-mix(in srgb, var(--etape-couleur, #A8AAAE) 16%, transparent);
  color: color-mix(in srgb, var(--etape-couleur, #A8AAAE) 80%, var(--text));
  border: 1px solid color-mix(in srgb, var(--etape-couleur, #A8AAAE) 35%, transparent);
  white-space: nowrap;
}
[data-theme="dark"] .badge-etape { color: color-mix(in srgb, var(--etape-couleur, #A8AAAE) 75%, #fff); }
.badge-etape--grand { font-size: 13px; padding: .45em .8em; }
.etape-pastille {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--etape-couleur, #A8AAAE); vertical-align: middle; margin-right: 2px;
}
.couleur-echantillon {
  display: inline-block; width: 22px; height: 14px; border-radius: 4px; vertical-align: middle;
  border: 1px solid var(--border);
}
.lien-discret { color: var(--text); text-decoration: none; }
.lien-discret:hover { color: var(--primary); }
.tabular-nums { font-variant-numeric: tabular-nums; }

/* Liseré de couleur du marché en tête de ligne / de carte */
/* Liseré de la couleur du marché sur la première cellule. Bootstrap pose déjà un
   box-shadow sur chaque cellule de .table (fond de survol / rayures) : il faut une règle
   au moins aussi précise, qui garde ce fond en seconde couche. */
.table > tbody > tr > td.ligne-marche,
.table > tbody > tr.rang-marche > td:first-child {
  box-shadow: inset 5px 0 0 var(--marche-couleur, transparent),
              inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
}

/* Tri par en-tête de colonne */
.tri-colonne {
  background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: .25rem;
}
.tri-colonne::after { content: "\2195"; opacity: .35; font-size: 11px; }
.tri-colonne.is-active { color: var(--primary); }
.tri-colonne.is-active::after { content: "\2191"; opacity: 1; }
.tri-colonne.is-active.is-desc::after { content: "\2193"; }

.liste-pagination { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.liste-pagination-ligne td { background: var(--surface-alt); }
.liste-par-page { display: flex; align-items: center; gap: .4rem; margin: 0 auto 0 0; }
.liste-par-page .form-select { min-width: 5rem; }
.liste-filtres .form-select-sm { min-width: 150px; }

/* Filtres à choix multiples (liste des chantiers) */
.filtre-multi .dropdown-toggle.is-actif { background: var(--primary-02); color: var(--primary); border-color: transparent; }
.filtre-multi__compte {
  display: inline-block; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px;
  border-radius: 9px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center;
}
.filtre-multi__menu { min-width: 240px; max-width: calc(100vw - 32px); }
.filtre-multi__liste { max-height: 300px; overflow-y: auto; padding-right: 4px; }
.filtre-multi__liste .form-check { padding: 3px 0 3px 1.6em; margin: 0; white-space: nowrap; }
.filtre-multi__liste .form-check-label { cursor: pointer; }
/* Téléphone : un libellé long passe à la ligne au lieu de sortir de l'écran. */
@media (max-width: 575.98px) { .filtre-multi__liste .form-check { white-space: normal; } }

/* --- Fiche chantier -------------------------------------------------------- */
.fiche-entete { position: relative; overflow: hidden; box-shadow: var(--shadow-card), inset 5px 0 0 var(--marche-couleur, transparent); }
.fiche-entete__titre { font-size: 22px; font-weight: 700; line-height: 1.1; }
.fiche-entete__numero { min-width: 150px; }
.fiche-entete__avancement { height: 4px; background: var(--gray-2); }
.fiche-entete__avancement > span { display: block; height: 100%; transition: width .6s ease; }
.fiche-onglets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.fiche-onglets .nav-link { white-space: nowrap; }
#onglet-contenu.is-chargement { opacity: .55; pointer-events: none; transition: opacity .15s; }

.etape-actuelle { display: flex; align-items: center; gap: .85rem; }
.etape-actuelle__pastille {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  background: var(--etape-couleur, #A8AAAE); box-shadow: 0 0 0 6px color-mix(in srgb, var(--etape-couleur, #A8AAAE) 18%, transparent);
}
.etape-actuelle__libelle { font-size: 17px; font-weight: 600; }

/* Timeline (historique des étapes, événements) */
.timeline { list-style: none; margin: 0; padding: 0 0 0 1.4rem; position: relative; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.timeline__item { position: relative; padding: 0 0 1.1rem .5rem; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__point {
  position: absolute; left: -1.4rem; top: 4px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--etape-couleur, #A8AAAE); border: 3px solid var(--surface); box-shadow: 0 0 0 2px var(--etape-couleur, #A8AAAE);
}
.timeline__item--validee .timeline__point { background: rgb(var(--success-rgb)); box-shadow: 0 0 0 2px rgb(var(--success-rgb)); }
.timeline__date { font-size: 12.5px; color: var(--text-muted); }
.timeline__validation {
  margin-top: .35rem; padding: .35rem .6rem; border-radius: var(--radius-sm);
  background: rgba(var(--success-rgb), .12); color: #1FA35A; font-weight: 500; font-size: 13px;
  display: inline-flex; align-items: center; gap: .35rem;
}
[data-theme="dark"] .timeline__validation { color: rgb(var(--success-rgb)); }

/* Cases de préparation */
.preparation-case {
  display: flex; align-items: center; gap: .65rem; padding: .7rem .9rem;
  border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.preparation-case i { font-size: 18px; color: var(--text-muted); }
.preparation-case:hover { border-color: var(--primary); }
.preparation-case.is-fait, .preparation-case:has(input:checked) { border-color: rgb(var(--success-rgb)); background: rgba(var(--success-rgb), .08); }
.preparation-case:has(input:checked) i { color: rgb(var(--success-rgb)); }
.preparation-case .form-check-input { margin: 0; }

/* Équipe */
.liste-equipe { list-style: none; margin: 0; padding: 0; }
.liste-equipe li { display: flex; align-items: center; gap: .5rem; padding: .45rem 0; border-bottom: 1px solid var(--border); }
.liste-equipe li:last-child { border-bottom: 0; }
.liste-equipe form { margin: 0; }

/* Journées & pointage */
.journee { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: .75rem 1rem; margin-bottom: .85rem; }
.journee__entete { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.journee__entete form { margin: 0; }
.journee__ajout summary { cursor: pointer; color: var(--primary); font-size: 13px; font-weight: 500; list-style: none; }
.journee__ajout summary::-webkit-details-marker { display: none; }

/* Carte Leaflet */
.carte-chantier { height: 340px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); background: var(--surface-alt); z-index: 0; }
[data-theme="dark"] .carte-chantier .leaflet-tile { filter: brightness(.8) contrast(1.05); }

/* Galerie de photos / dessins */
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .85rem; }
.galerie--petite { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.galerie__item { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-alt); border: 1px solid var(--border); }
.galerie__lien { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--gray-2); }
.galerie__lien img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.galerie__item:hover .galerie__lien img { transform: scale(1.04); }
.galerie__lien--absent { display: flex; align-items: center; justify-content: center; font-size: 34px; color: var(--gray-5); }
.galerie__item figcaption { display: flex; flex-direction: column; padding: .4rem .6rem; font-size: 12px; line-height: 1.35; }
.galerie__supprimer { position: absolute; top: 6px; right: 6px; margin: 0; opacity: 0; transition: opacity .15s; }
.galerie__item:hover .galerie__supprimer, .galerie__supprimer:focus-within { opacity: 1; }
.galerie__supprimer button {
  width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(47, 51, 73, .75); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
}
.galerie__supprimer button:hover { background: rgb(var(--danger-rgb)); }

/* Progression d'envoi */
.upload-progression { margin-top: .6rem; display: flex; align-items: center; gap: .6rem; }
.upload-progression__barre { flex: 1; height: 8px; border-radius: 4px; background: var(--gray-2); overflow: hidden; }
.upload-progression__barre > span { display: block; height: 100%; width: 0; background: var(--gradient-brand); transition: width .15s linear; }

.compta-synthese dt { font-weight: 500; color: var(--text-muted); }

/* --- Tableau de bord : widgets chantiers ------------------------------------ */
.etapes-barres { display: flex; flex-direction: column; gap: .3rem; }
.etapes-barres__ligne { display: grid; grid-template-columns: 170px 1fr 40px; align-items: center; gap: .6rem; color: var(--text); text-decoration: none; font-size: 12.5px; }
.etapes-barres__ligne:hover { color: var(--primary); }
.etapes-barres__libelle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etapes-barres__barre { height: 8px; border-radius: 4px; background: var(--gray-2); overflow: hidden; }
.etapes-barres__barre > span { display: block; height: 100%; border-radius: 4px; transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.etapes-barres__nb { text-align: right; font-variant-numeric: tabular-nums; }
.liste-compacte { list-style: none; margin: 0; padding: 0; }
.liste-compacte li { padding: .4rem 0; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: .15rem; }
.liste-compacte li:last-child { border-bottom: 0; }
.liste-compacte__titre { font-weight: 500; color: var(--text); text-decoration: none; }
.liste-compacte__titre:hover { color: var(--primary); }
.liste-compacte__meta { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }

/* --- Kanban ---------------------------------------------------------------------- */
.kanban {
  display: flex; gap: .6rem; overflow-x: auto; padding-bottom: 1rem;
  scroll-snap-type: x proximity; -webkit-user-select: none; user-select: none;
  /* Pas d'ascenseur horizontal : on se déplace par les étapes, la mini-carte, la
     molette (kanban.js) ou le pavé tactile. */
  scrollbar-width: none;
}
.kanban::-webkit-scrollbar { display: none; }
.kanban__colonne {
  flex: 1 0 215px; max-width: 300px; display: flex; flex-direction: column; max-height: var(--kanban-hauteur, calc(100vh - 270px));
  background: var(--surface-alt); border-radius: var(--radius-card); border: 2px solid transparent;
  scroll-snap-align: start; transition: border-color .15s, background .15s;
}
.kanban__colonne.is-cible { border-color: var(--etape-couleur, var(--primary)); background: color-mix(in srgb, var(--etape-couleur, #0EA5A4) 8%, var(--surface-alt)); }
.kanban__entete {
  display: flex; align-items: center; gap: .5rem; padding: .8rem 1rem .6rem;
  border-top: 4px solid var(--etape-couleur, #A8AAAE); border-radius: var(--radius-card) var(--radius-card) 0 0;
  font-weight: 600; font-size: 13.5px; position: sticky; top: 0; background: inherit;
}
.kanban__titre { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kanban__compteur {
  min-width: 26px; padding: .1rem .5rem; border-radius: 999px; text-align: center; font-size: 12px;
  background: color-mix(in srgb, var(--etape-couleur, #A8AAAE) 18%, transparent);
  color: color-mix(in srgb, var(--etape-couleur, #A8AAAE) 80%, var(--text)); font-variant-numeric: tabular-nums;
}
.kanban__compteur.is-pulse { animation: kanban-pulse .4s ease; }
@keyframes kanban-pulse { 50% { transform: scale(1.25); } }
.kanban__cartes { flex: 1; overflow-y: auto; padding: .35rem .65rem .65rem; display: flex; flex-direction: column; gap: .6rem; min-height: 80px; scrollbar-width: thin; }
.kanban__reste { text-align: center; padding: .4rem; }

.kanban-carte {
  position: relative; background: var(--surface); border-radius: var(--radius-lg); padding: .65rem .8rem .65rem .95rem;
  box-shadow: var(--shadow-sm); cursor: grab; touch-action: none;
  box-shadow: var(--shadow-sm), inset 4px 0 0 var(--marche-couleur, transparent);
  transition: box-shadow .15s, transform .15s;
}
.kanban-carte:hover { box-shadow: var(--shadow-card-hover), inset 4px 0 0 var(--marche-couleur, transparent); }
.kanban-carte:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--primary-02), inset 4px 0 0 var(--marche-couleur, transparent); }
.kanban-carte__entete { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
/* Depuis combien de jours la carte est dans l'étape (ordre de la colonne) ; un mois et plus : ambre. */
.kanban-carte__depuis { margin-left: auto; font-size: .72rem; color: var(--text-muted); white-space: nowrap; }
.kanban-carte__depuis.is-longue { color: rgb(var(--warning-rgb)); font-weight: 600; }
.kanban-carte__num { font-weight: 700; color: var(--text); text-decoration: none; }
.kanban-carte__num:hover { color: var(--primary); }
.kanban-carte__ligne { color: var(--text-muted); }
.kanban-carte__adresse { font-size: 12.5px; margin: .2rem 0 .4rem; line-height: 1.35; }
.kanban-carte__pied { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.kanban-carte__marche { margin-top: .35rem; font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Emplacement d'origine pendant le glissé : la carte se « creuse ». */
.kanban-carte.is-source { opacity: .35; box-shadow: none; outline: 2px dashed var(--gray-4); }
.kanban-carte.is-enregistrement { opacity: .7; }
/* La carte qui suit le pointeur : soulevée, inclinée (transform posé par le script). */
.kanban-carte--fantome {
  position: fixed; left: 0; top: 0; z-index: 1000; margin: 0; pointer-events: none;
  box-shadow: 0 22px 48px -12px rgba(47, 51, 73, .4), inset 4px 0 0 var(--marche-couleur, transparent);
  cursor: grabbing; transform-origin: 50% 50%;
}
[data-theme="dark"] .kanban-carte--fantome { box-shadow: 0 22px 48px -12px rgba(0, 0, 0, .75), inset 4px 0 0 var(--marche-couleur, transparent); }
body.kanban-glisse { cursor: grabbing; -webkit-user-select: none; user-select: none; }
.kanban-colonnes-menu { min-width: 260px; max-height: 60vh; overflow-y: auto; }

/* Étape vide : bande fine, nom à la verticale. Elle reste une cible de dépôt et
   s'ouvre pendant un glisser (et en grand sous la carte qu'on y amène). */
.kanban__colonne { transition: border-color .15s, background .15s, flex-basis .18s ease, max-width .18s ease; }
.kanban__colonne.is-vide { flex: 0 0 42px; max-width: 42px; scroll-snap-align: none; }
.kanban__colonne.is-vide .kanban__entete { flex-direction: column; align-items: center; justify-content: flex-start; gap: .5rem; padding: .7rem 0; height: 100%; }
.kanban__colonne.is-vide .kanban__titre { flex: 0 0 auto; writing-mode: vertical-rl; transform: rotate(180deg); overflow: visible; font-size: 12.5px; color: var(--text-muted); }
.kanban__colonne.is-vide .kanban__compteur { order: -1; min-width: 0; padding: .05rem .4rem; }
.kanban__colonne.is-vide .kanban__cartes { display: none; }
body.kanban-glisse .kanban__colonne.is-vide { flex-basis: 120px; max-width: 120px; }
body.kanban-glisse .kanban__colonne.is-vide.is-cible { flex-basis: 230px; max-width: 230px; }
.kanban__colonne.is-repere { animation: kanban-repere 1s ease; }
@keyframes kanban-repere { 0%, 60% { box-shadow: 0 0 0 3px var(--etape-couleur, var(--primary)); } 100% { box-shadow: none; } }

/* Cartes compactes : numéro, adresse sur une ligne et date. */
.kanban--compact .kanban-carte { padding-top: .45rem; padding-bottom: .45rem; }
.kanban--compact .kanban-carte__ligne, .kanban--compact .kanban-carte__marche, .kanban--compact .kanban-carte__pied .badge { display: none; }
.kanban--compact .kanban-carte__adresse { margin: .1rem 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kanban--compact .kanban__cartes { gap: .4rem; }

/* Barre des étapes et mini-carte, au-dessus du tableau. */
.kanban-nav { display: grid; gap: .5rem; margin-bottom: .75rem; }
.kanban-nav__etapes { display: flex; flex-wrap: wrap; gap: .35rem; }
.kanban-nav__etape {
  display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .65rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 12.5px; cursor: pointer;
}
.kanban-nav__etape:hover { border-color: var(--etape-couleur, var(--primary)); }
.kanban-nav__etape.is-en-vue { border-color: var(--etape-couleur, var(--primary)); background: color-mix(in srgb, var(--etape-couleur, #0EA5A4) 10%, var(--surface)); }
.kanban-nav__etape.is-vide { color: var(--text-muted); }
.kanban-nav__pastille { width: 8px; height: 8px; border-radius: 50%; background: var(--etape-couleur, #A8AAAE); flex: 0 0 auto; }
.kanban-nav__nb { font-weight: 700; font-variant-numeric: tabular-nums; }
.kanban-nav__etape.is-vide .kanban-nav__nb { font-weight: 400; }
.kanban-nav__carte { position: relative; height: 12px; border-radius: 999px; background: var(--surface-alt); border: 1px solid var(--border); cursor: pointer; touch-action: none; }
.kanban-nav__vue { position: absolute; top: -2px; bottom: -2px; border-radius: 999px; border: 2px solid var(--primary); background: var(--primary-01); cursor: grab; }
.kanban-nav__carte:active .kanban-nav__vue { cursor: grabbing; }
@media (prefers-reduced-motion: reduce) { .kanban__colonne { transition: none; } .kanban__colonne.is-repere { animation: none; } }

@media (prefers-reduced-motion: reduce) {
  .session-timer.is-warning, .session-timer.is-critical { animation: none; }
  .dashboard-widget.is-dragging > .card { transform: none; }
  .kanban__compteur.is-pulse { animation: none; }
  .galerie__item:hover .galerie__lien img { transform: none; }
}

/* === Affectations chantiers (regroupé par chargé de travaux) ==============
   Une seule structure, trois présentations : .vue-tableau / .vue-cartes /
   .vue-compact posées sur #affectations. */

/* -- En-tête de groupe (commun aux trois vues) -- */
.aff-groupe { margin-bottom: 1.4rem; }
.aff-groupe:last-child { margin-bottom: 0; }
.aff-groupe__tete {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .8rem; margin-bottom: .4rem;
  background: var(--primary-02); border-radius: var(--radius);
  border-left: 4px solid var(--primary);
}
.aff-groupe__initiales {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary); color: #fff; font-size: 12px; font-weight: 700;
}
.aff-groupe__nom { font-weight: 700; color: var(--text); }
.aff-groupe__profil { font-size: 13px; color: var(--text-muted); }
.aff-groupe__compte { margin-left: auto; font-size: 13px; color: var(--text-muted); white-space: nowrap; }

/* Réglages communs aux items */
.aff-item { color: var(--text); text-decoration: none; }
.aff-item__coul { background: var(--marche); flex: 0 0 auto; }
.aff-item__etape { display: inline-flex; align-items: center; gap: .25rem; }
/* Étape validée par le terrain : pastille verte pleine, qui et quand dessous ; badge
   « N étapes validées » en tête du chargé de travaux. */
.aff-item__etape.is-validee { flex-direction: column; align-items: flex-start; gap: .15rem; }
.aff-pastille-validee {
  display: inline-flex; align-items: center; gap: .25rem; max-width: 100%; padding: .12rem .6rem; border-radius: 999px;
  background: #1b7a43; color: #fff; font-weight: 600; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aff-item__qui { font-size: 11.5px; line-height: 1.2; color: #1b7a43; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
[data-theme="dark"] .aff-item__qui { color: #6fd39a; }
.vue-tableau .aff-item > .aff-item__etape.is-validee { white-space: normal; }
.aff-groupe__validees {
  display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .6rem; border-radius: 999px;
  background: #1b7a43; color: #fff; font-size: 12px; font-weight: 600;
}
.aff-groupe__validees[hidden] { display: none; }
.aff-groupe__validees:not([hidden]) { margin-left: auto; }
.aff-groupe__validees:not([hidden]) + .aff-groupe__compte { margin-left: .5rem; }
.aff-item [data-label]::before { display: none; }

/* -- Vue TABLEAU : colonnes alignées -- */
.vue-tableau .aff-groupe__items { overflow-x: auto; }
.vue-tableau .aff-entete,
.vue-tableau .aff-item {
  display: grid;
  grid-template-columns: 8px 128px 108px 168px 128px minmax(180px, 1fr) 96px 108px 128px;
  align-items: center; gap: .5rem; min-width: 940px;
}
.vue-tableau .aff-entete {
  padding: .3rem .5rem; font-size: 11.5px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--border);
}
.vue-tableau .aff-item { padding: .45rem .5rem; font-size: 14px; border-bottom: 1px solid var(--border); }
.vue-tableau .aff-item:hover { background: var(--hover-bg); }
.vue-tableau .aff-item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vue-tableau .aff-item__coul { width: 6px; height: 26px; border-radius: 3px; }
.vue-tableau .aff-item__num { font-weight: 600; font-variant-numeric: tabular-nums; }

/* -- Vue CARTES : une fiche par chargé de travaux --
   Trois chiffres (chantiers, validées, prochaine préparation) puis ses chantiers en
   liste courte : point de l'étape, n° interne, ville, étape (ou pastille validée). */
.aff-groupe__chiffres, .aff-item__ville { display: none; }
.vue-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: .9rem; align-items: start; }
.vue-cartes .aff-groupe {
  margin: 0; padding: .3rem .3rem .5rem; background: var(--surface); border-radius: var(--radius-card);
  box-shadow: 0 2px 10px rgba(3, 27, 78, .07); min-width: 0;
}
.vue-cartes .aff-groupe__tete { margin: 0 0 .5rem; flex-wrap: wrap; row-gap: .3rem; }
.vue-cartes .aff-groupe__validees, .vue-cartes .aff-groupe__compte { display: none; }
.vue-cartes .aff-groupe__chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; padding: 0 .5rem .5rem; }
.vue-cartes .aff-groupe__chiffres > span {
  display: flex; flex-direction: column; align-items: center; padding: .4rem .3rem; border-radius: var(--radius);
  background: var(--surface-alt); font-size: 11.5px; color: var(--text-muted); text-align: center; line-height: 1.2;
}
.vue-cartes .aff-groupe__chiffres strong { font-size: 18px; color: var(--text); font-variant-numeric: tabular-nums; }
.vue-cartes .aff-groupe__chiffres > span.is-validees { background: #1b7a43; color: rgba(255, 255, 255, .85); }
.vue-cartes .aff-groupe__chiffres > span.is-validees strong { color: #fff; }
.vue-cartes .aff-groupe__items { display: flex; flex-direction: column; padding: 0 .5rem; }
.vue-cartes .aff-entete,
.vue-cartes .aff-item__coul, .vue-cartes .aff-item__num, .vue-cartes .aff-item__typo, .vue-cartes .aff-item__adresse,
.vue-cartes .aff-item__prevu, .vue-cartes .aff-item__prep, .vue-cartes .aff-item__presta { display: none; }
.vue-cartes .aff-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: .55rem;
  padding: .45rem .3rem; border-top: 1px solid var(--border); font-size: 13px;
}
.vue-cartes .aff-item:hover { background: var(--hover-bg); }
.vue-cartes .aff-item::before { content: ''; grid-row: 1 / span 2; width: 9px; height: 9px; border-radius: 50%; background: var(--marche); box-shadow: 0 0 0 1px var(--border); }
.vue-cartes .aff-item__interne { grid-column: 2; grid-row: 1; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vue-cartes .aff-item__ville { display: block; grid-column: 2; grid-row: 2; font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vue-cartes .aff-item__etape { grid-column: 3; grid-row: 1 / span 2; justify-self: end; font-size: 12px; white-space: nowrap; color: var(--text-muted); }
.vue-cartes .aff-item__etape::after {
  content: ''; order: -1; width: 8px; height: 8px; border-radius: 50%; background: var(--etape);
  display: inline-block; margin-right: .3rem; flex: 0 0 auto;
}
.vue-cartes .aff-item__etape.is-validee { align-items: flex-end; }
/* -- Vue COMPACT : une ligne dense, l'essentiel -- */
.vue-compact .aff-groupe__items { display: flex; flex-direction: column; }
.vue-compact .aff-entete { display: none; }
.vue-compact .aff-item {
  display: flex; align-items: center; gap: .5rem;
  padding: .22rem .4rem; font-size: 12.5px; border-bottom: 1px solid var(--border);
}
.vue-compact .aff-item:hover { background: var(--hover-bg); }
.vue-compact .aff-item__coul { width: 4px; height: 15px; border-radius: 2px; }
.vue-compact .aff-item__num { font-weight: 600; white-space: nowrap; }
.vue-compact .aff-item__interne { color: var(--text-muted); white-space: nowrap; }
.vue-compact .aff-item__etape { font-size: 11.5px; white-space: nowrap; }
.vue-compact .aff-item__etape::after {
  content: ''; order: -1; width: 7px; height: 7px; border-radius: 50%; background: var(--etape);
  display: inline-block; margin-right: .25rem;
}
/* Étape validée : la pastille verte remplace le point de couleur ; en compact, tout
   sur une ligne (pastille puis « qui · quand »), à la hauteur des autres lignes. */
.vue-compact .aff-item__etape.is-validee, .vue-cartes .aff-item__etape.is-validee { gap: .35rem; }
.vue-compact .aff-item__etape.is-validee { flex-direction: row; align-items: center; }
.vue-compact .aff-item__etape.is-validee::after, .vue-cartes .aff-item__etape.is-validee::after { display: none; }
.vue-compact .aff-pastille-validee { padding: .02rem .45rem; font-size: 11px; }
.vue-compact .aff-item__qui { font-size: 11px; }
.vue-compact .aff-item__adresse { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); }
.vue-compact .aff-item__prevu { white-space: nowrap; color: var(--text-muted); }
.vue-compact .aff-item__typo,
.vue-compact .aff-item__prep,
.vue-compact .aff-item__presta { display: none; }

/* --- Fiche chantier : rail de navigation vertical (deux familles) --------- */
.fiche-corps { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.fiche-corps__contenu { min-width: 0; }

.fiche-nav { position: sticky; top: 1rem; }
.fiche-nav__bascule { display: none; }
.fiche-nav__panneau {
  display: flex; flex-direction: column; gap: .5rem;
  background: var(--surface-alt); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: .55rem;
}

.fiche-nav__section { padding: .1rem; }
.fiche-nav__section--suivi { border-top: 1px solid var(--border); padding-top: .55rem; margin-top: .1rem; }
.fiche-nav__titre {
  display: flex; align-items: center; gap: .4rem; padding: .4rem .55rem .55rem;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted);
}
.fiche-nav__titre i { font-size: 15px; color: var(--primary); }

.fiche-nav__item {
  display: flex; align-items: center; gap: .55rem; padding: .45rem .5rem;
  border-radius: var(--radius); color: var(--text); text-decoration: none; font-size: 14px; line-height: 1.2;
}
.fiche-nav__item + .fiche-nav__item { margin-top: 2px; }
.fiche-nav__icone {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--text-muted); font-size: 17px;
}
.fiche-nav__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fiche-nav__item:hover { background: var(--hover-bg); }
.fiche-nav__item:hover .fiche-nav__icone { color: var(--primary); }
.fiche-nav__item.active { background: var(--primary-02); font-weight: 600; box-shadow: inset 3px 0 0 var(--primary); }
.fiche-nav__item.active .fiche-nav__icone { background: var(--primary); color: #fff; }
.fiche-nav__item.active .fiche-nav__label { color: var(--primary); }

.fiche-nav__compte {
  flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--surface); color: var(--text-muted); font-size: 11px; font-weight: 600; text-align: center; line-height: 20px;
}
.fiche-nav__tag {
  flex: 0 0 auto; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--text-muted); background: var(--surface); padding: 1px 7px; border-radius: 999px;
}
.fiche-nav__item.is-a-venir { color: var(--text-muted); }
.fiche-nav__item.is-a-venir .fiche-nav__icone { opacity: .55; }
.fiche-nav__item.is-a-venir .fiche-nav__label { font-style: italic; }

/* Sous 992px : le rail devient un bouton déroulant compact au-dessus du contenu. */
@media (max-width: 991.98px) {
  .fiche-corps { grid-template-columns: 1fr; gap: .75rem; }
  .fiche-nav { position: static; }
  .fiche-nav__bascule {
    display: flex; align-items: center; gap: .55rem; width: 100%;
    padding: .6rem .75rem; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); color: var(--text); font: inherit; font-weight: 600; cursor: pointer;
  }
  .fiche-nav__bascule > i:first-child { color: var(--primary); font-size: 18px; }
  .fiche-nav.is-ouvert .fiche-nav__bascule .ri-arrow-down-s-line { transform: rotate(180deg); }
  .fiche-nav__panneau { display: none; margin-top: .6rem; }
  .fiche-nav.is-ouvert .fiche-nav__panneau { display: flex; }
}

/* Sélecteur « Étape chantier » dans l'en-tête (combo de la fenêtre de suivi). */
.fiche-etape {
  display: flex; flex-direction: column; gap: 1px; min-width: 190px;
  padding: .28rem .55rem .3rem .7rem; background: var(--surface);
  border: 1px solid var(--border); border-left: 4px solid var(--etape-couleur, var(--primary));
  border-radius: var(--radius);
}
.fiche-etape__label { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); }
.fiche-etape select.form-select { border: 0; padding: 0 1.2rem 0 0; height: auto; min-height: 0; font-weight: 600; background-color: transparent; }
.fiche-etape select.form-select:focus { box-shadow: none; }
.fiche-etape select:disabled { opacity: .6; }

/* Barre d'actions du bas (reprise de la fenêtre de suivi). */
.fiche-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); }

/* Onglet « à venir ». */
.a-venir-icone {
  width: 64px; height: 64px; margin: 0 auto; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-02); color: var(--primary); font-size: 30px;
}

/* --- Schéma directeur : surface de dessin ---------------------------------- */
/* Aperçu du schéma : image aux proportions gardées, adaptée à l'écran. */
.dessin__apercu {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 120px; max-height: 65vh; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius);
  background:
    linear-gradient(90deg, rgba(3,27,78,.04) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(rgba(3,27,78,.04) 1px, transparent 1px) 0 0 / 24px 24px,
    #ffffff;
}
.dessin__apercu img { display: block; max-width: 100%; max-height: 65vh; height: auto; }
.dessin__vide { padding: 2.2rem 1rem; text-align: center; color: var(--text-muted); }
.dessin__vide i { font-size: 26px; display: block; margin-bottom: .4rem; }
.dessin__barre { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; }

/* --- Schéma directeur : éditeur plein écran (tablette) --------------------- */
body.dessin-plein-ouvert { overflow: hidden; }
.dessin-plein { position: fixed; inset: 0; z-index: 1200; display: flex; flex-direction: column; background: #eef0f4; }
.dessin-plein__barre {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .7rem; padding-top: calc(.5rem + env(safe-area-inset-top));
  background: var(--primary); color: #fff;
}
.dessin-plein__titre { flex: 1 1 auto; font-weight: 600; font-size: 15px; }
.dessin-plein__btn {
  display: inline-flex; align-items: center; gap: .3rem;
  min-height: 44px; padding: 0 .9rem; border: 0; border-radius: 10px;
  background: rgba(255, 255, 255, .18); color: #fff; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer;
}
.dessin-plein__btn--valider { background: #fff; color: var(--primary); }
.dessin-plein__btn:active { transform: scale(.98); }
.dessin-plein__surface {
  flex: 1 1 auto; min-height: 0; overflow: hidden; position: relative;
  background:
    linear-gradient(90deg, rgba(3, 27, 78, .05) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(rgba(3, 27, 78, .05) 1px, transparent 1px) 0 0 / 28px 28px, #fff;
}
.dessin-plein__surface canvas { display: block; position: absolute; left: 50%; top: 50%; touch-action: none; cursor: crosshair; }
@media (max-width: 575px) { .dessin-plein__btn span { display: none; } }

/* --- Big bags (onglet chantier) -------------------------------------------- */
.bigbag { padding: .7rem .9rem; border-radius: var(--radius); border-left: 4px solid transparent; margin-bottom: .6rem; background: var(--surface-alt); }
.bigbag:last-child { margin-bottom: 0; }
.bigbag.is-ouvert { border-left-color: #dc3545; }
.bigbag.is-ferme { border-left-color: rgb(var(--success-rgb)); }
.bigbag__tete { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.bigbag__statut { font-weight: 600; }
.bigbag.is-ouvert .bigbag__statut { color: #dc3545; }
.bigbag.is-ferme .bigbag__statut { color: #1b7a43; }
.bigbag__meta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .2rem; }
.bigbag__actions { display: flex; gap: .5rem; align-items: flex-start; margin-top: .5rem; }
.bigbag__edition { flex: 1 1 auto; }
.bigbag__edition > summary { list-style: none; cursor: pointer; display: inline-flex; }
.bigbag__edition > summary::-webkit-details-marker { display: none; }

/* ------------------------------------------------------------------
   Plans de prévention (FEN_plans_de_preventions) :
   catégories | plans | aperçu du PDF. Sur écran moyen l'aperçu passe
   sous la liste ; sur téléphone tout s'empile.
   ------------------------------------------------------------------ */
.pdp { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 992px) { .pdp { grid-template-columns: minmax(240px, 280px) 1fr; } .pdp__apercu { grid-column: 1 / -1; } }
@media (min-width: 1400px) { .pdp { grid-template-columns: minmax(240px, 280px) minmax(340px, 1fr) minmax(420px, 1.3fr); } .pdp__apercu { grid-column: auto; } }
.pdp { align-items: start; }
.pdp > .card { min-width: 0; }
.pdp .card-body { flex: none; }

.pdp__cats { padding: .35rem 0; max-height: 70vh; overflow-y: auto; }
.pdp__cat {
  display: flex; align-items: center; gap: .55rem;
  min-height: 40px; padding: .3rem 1rem .3rem calc(1rem + var(--niveau, 0) * 1.25rem);
  color: var(--text); text-decoration: none; border-left: 3px solid transparent;
}
.pdp__cat i { font-size: 18px; color: rgb(var(--warning-rgb)); }
.pdp__cat:hover { background: var(--hover-bg); color: var(--text); }
.pdp__cat.is-actif { background: rgba(var(--primary-rgb), .1); border-left-color: var(--primary); font-weight: 600; }
.pdp__cat-titre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdp__nb { min-width: 24px; padding: 0 .4rem; border-radius: 12px; font-size: 12px; font-weight: 600; line-height: 22px; text-align: center; background: var(--surface-alt); color: var(--text-muted); }
.pdp__nb.is-vide { opacity: .55; }
.pdp__cat.is-actif .pdp__nb { background: var(--primary); color: #fff; opacity: 1; }
.pdp__cat-actions { display: flex; flex-wrap: wrap; gap: .4rem; padding: .75rem 1rem; border-top: 1px solid var(--border); }

.pdp__plans { max-height: 70vh; overflow-y: auto; padding-bottom: .5rem; }
.pdp__plan {
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem 1rem; border-top: 1px solid var(--border); cursor: pointer;
  border-left: 3px solid transparent; user-select: none;
}
.pdp__plan:hover { background: var(--hover-bg); }
.pdp__plan:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.pdp__plan.is-actif { background: rgba(var(--primary-rgb), .08); border-left-color: var(--primary); }
.pdp__pdf { font-size: 22px; color: rgb(var(--danger-rgb)); flex: none; }
.pdp__plan-texte { flex: 1; min-width: 0; display: grid; }
.pdp__plan-texte strong { font-weight: 600; overflow-wrap: anywhere; }
.pdp__plan .actions-segmented { flex: none; }

.pdp__cadre { position: relative; height: 72vh; min-height: 420px; background: var(--surface-alt); border-radius: 0 0 16px 16px; overflow: hidden; }
.pdp__cadre iframe { width: 100%; height: 100%; border: 0; display: block; }
.pdp__cadre-vide { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; color: var(--text-muted); }
.pdp__cadre-vide i { font-size: 44px; opacity: .5; }
.pdp__cadre-vide[hidden] { display: none; }
@media (max-width: 575.98px) { .pdp__cadre { height: 60vh; min-height: 320px; } }

/* Variante deux colonnes (FDS : liste | aperçu, sans arbre). */
@media (min-width: 992px) { .pdp--deux { grid-template-columns: minmax(340px, 1fr) minmax(420px, 1.5fr); } .pdp--deux .pdp__apercu { grid-column: auto; } }
@media (min-width: 1400px) { .pdp--deux { grid-template-columns: minmax(380px, 1fr) minmax(520px, 1.7fr); } }
.pdp__plan[hidden] { display: none; }

/* Parc (véhicules, matériel) */
.veh-table tbody tr { cursor: pointer; }
.veh-table tbody tr[hidden] { display: none; }
.veh-immat {
  display: inline-block; padding: .1rem .45rem; border-radius: 4px;
  border: 1px solid var(--border); border-left: 6px solid #1d4ed8; border-right: 6px solid #1d4ed8;
  background: var(--surface); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700;
  font-size: 13px; letter-spacing: .04em; white-space: nowrap;
}
.veh-immat-saisie { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; letter-spacing: .04em; }
.fiche-pdf-cadre { width: 100%; height: 78vh; border: 0; display: block; border-radius: 0 0 16px 16px; }
.card.is-cible { box-shadow: 0 0 0 2px rgba(var(--primary-rgb), .45), var(--bs-box-shadow-sm, 0 2px 8px rgba(3, 27, 78, .06)); transition: box-shadow .6s; }

/* Messagerie (FEN_messagerie_lst) */
.msg-ligne__icone { font-size: 20px; color: var(--primary); flex: none; }
.msg-ligne.is-termine .msg-ligne__titre { text-decoration: line-through; color: var(--text-muted); }
.msg-ligne .flex-none { flex: none; }
.msg-texte { white-space: pre-line; padding: 1rem 1.1rem; border-radius: 12px; background: var(--surface-alt); line-height: 1.6; }
.msg-sous-titre { font-size: 14px; font-weight: 700; margin: .5rem 0 .6rem; }
.msg-lecteurs { list-style: none; padding: 0; margin: 0; max-height: 40vh; overflow-y: auto; }
.msg-lecteurs li { display: flex; justify-content: space-between; gap: .75rem; padding: .4rem 0; border-bottom: 1px solid var(--border); }
.msg-pas-lu { line-height: 1.7; }

/* Causeries (FEN_Causeries_lst) */
.causerie .pdp__plan { text-decoration: none; color: inherit; }
.cau-seance { border: 1px solid var(--border); border-radius: 12px; padding: .6rem .9rem; margin-bottom: .6rem; }
.cau-seance > summary { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; cursor: pointer; list-style: none; }
.cau-seance > summary::-webkit-details-marker { display: none; }
.cau-seance > summary::before { content: "\25B8"; color: var(--text-muted); transition: transform .15s; }
.cau-seance[open] > summary::before { transform: rotate(90deg); }
.cau-presents { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; margin-top: .7rem; }
.cau-present { border: 1px solid var(--border); border-radius: 10px; padding: .5rem; text-align: center; background: var(--surface); }
.cau-present__nom { font-weight: 600; font-size: 13px; }
.cau-present__signature { display: block; width: 100%; height: 64px; object-fit: contain; margin: .25rem 0; background: #fff; border-radius: 6px; }
.cau-present__signature.is-vide { display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 12px; background: var(--surface-alt); }
.cau-resp { border: 1px solid var(--border); border-radius: 12px; padding: .6rem .8rem; }
.cau-resp__tete { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; }
.cau-resp__ligne { display: flex; justify-content: space-between; padding: .25rem 0; border-top: 1px solid var(--border); font-size: 13px; }

/* Tourets (FEN_TOURETS_LST) */
.touret .pdp__plan { text-decoration: none; color: inherit; }
.touret .pdp__plan[hidden] { display: none; }
.tou-passage { border: 1px solid var(--border); border-radius: 14px; padding: .9rem 1rem; margin-bottom: 1rem; }
.tou-passage.is-stock { border-color: rgba(var(--success-rgb), .45); }
.tou-passage.is-cible { box-shadow: 0 0 0 2px rgba(var(--primary-rgb), .45); }
.tou-passage__tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; }
.tou-metres { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .5rem; margin: .8rem 0; }
.tou-metres > div { padding: .5rem .7rem; border-radius: 10px; background: var(--surface-alt); display: grid; }
.tou-metres span { font-size: 12px; color: var(--text-muted); }
.tou-metres strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.tou-metres .is-negatif strong { color: rgb(var(--danger-rgb)); }
.tou-liste { list-style: none; padding: 0; margin: 0 0 .6rem; }
.tou-liste li { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .35rem 0; border-bottom: 1px solid var(--border); }
.tou-photos { display: flex; flex-wrap: wrap; gap: .25rem; }
.tou-photos img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; }

/* Tournées TAR */
.tar-carte { height: 460px; border-radius: 0 0 16px 16px; }
#depot-carte.tar-carte { height: 380px; border-radius: 12px; }
.tar-chantiers { max-height: 70vh; overflow-y: auto; }
.tar-chantier { border: 1px solid var(--border); border-radius: 12px; padding: .7rem .8rem; margin-bottom: .7rem; transition: box-shadow .3s; }
.tar-chantier.is-cible { box-shadow: 0 0 0 2px var(--primary); }
.tar-chantier__tete { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; margin-bottom: .5rem; }
.tar-fouilles input { max-width: 90px; }
.tar-membres { max-height: 50vh; overflow-y: auto; }
.tar-photo { display: grid; gap: .2rem; text-decoration: none; color: var(--text-muted); font-size: 12px; }
.tar-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }

/* Bons de commande */
.bc-montant-fort { color: #9b1c1c; font-weight: 700; }
.bc-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .6rem; }
.bc-type input { position: absolute; opacity: 0; pointer-events: none; }
.bc-type span { display: grid; gap: .2rem; height: 100%; padding: .9rem; border: 2px solid var(--border); border-radius: 14px; cursor: pointer; }
.bc-type span i { font-size: 24px; color: var(--primary); }
.bc-type small { color: var(--text-muted); }
.bc-type input:checked + span { border-color: var(--primary); background: rgba(var(--primary-rgb), .07); }
.bc-type.is-bientot span { opacity: .5; cursor: not-allowed; }
.bc-fournisseur { padding: .6rem .8rem; border-radius: 10px; background: var(--surface-alt); }
.bc-lignes .bc-total td { font-weight: 700; border-top: 2px solid var(--border); }
.bc-repart > td { background: var(--surface-alt); }
.bc-repart__ligne { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .3rem 0; }
.bc-repart__ligne label { display: flex; align-items: center; gap: .3rem; }
.bc-repart__ligne label input { width: 90px; }
.bc-etat--ok { color: #1b7a43; }
.bc-etat--manquant { color: #b8470a; }
.bc-etat--trop { color: #c0265e; }
.bc-repartition-barre { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--surface-alt); margin-bottom: .5rem; }
.bc-repartition-barre .c0 { background: #0EA5A4; } .bc-repartition-barre .c1 { background: #7367F0; } .bc-repartition-barre .c2 { background: #FF9F43; } .bc-repartition-barre .c3 { background: #28C76F; } .bc-repartition-barre .c4 { background: #EA5455; }
.bc-photos { gap: .4rem; }
.bc-photo { position: relative; }
.bc-photo img { width: 72px; height: 72px; }
.bc-photo form { position: absolute; top: 2px; right: 2px; margin: 0; }
.bc-photo button { width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 13px; line-height: 1; }

/* Marquage / piquetage : pastille de couleur du réseau, photos, référentiel. */
.mp-pastille { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--mp-couleur, #fff); border: 1px solid var(--bs-border-color); vertical-align: -2px; margin-right: .35rem; }
.mp-releves td:first-child { white-space: nowrap; }
.mp-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .5rem; }
.mp-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.mp-ref__ordre { width: 72px; margin-left: auto; }
.mp-ref td[data-c="reseau"] input { min-width: 220px; }
.mp-ref .form-control-color { width: 44px; height: 32px; padding: 2px; }
.mp-appareil { padding: .75rem; border: 1px solid var(--bs-border-color); border-radius: 12px; }
.mp-appareil--nouveau { border-style: dashed; }

/* Visionneuse de photo (partials/apercu_photo.php) : Imprimer / Fermer. */
body.apercu-photo-ouvert { overflow: hidden; }
.apercu-photo { position: fixed; inset: 0; z-index: 1090; display: flex; flex-direction: column; background: rgba(15, 20, 30, .92); }
.apercu-photo[hidden] { display: none; }
.apercu-photo__barre { display: flex; align-items: center; gap: .5rem; padding: .6rem 1rem; background: var(--surface); box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.apercu-photo__titre { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apercu-photo__cadre { flex: 1; min-height: 0; margin: 0; padding: 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; pointer-events: none; }
.apercu-photo__cadre img { max-width: 100%; min-height: 0; flex: 0 1 auto; object-fit: contain; border-radius: 8px; pointer-events: auto; }
.apercu-photo__cadre figcaption { display: grid; text-align: center; color: #fff; }
.apercu-photo__cadre figcaption span { opacity: .8; font-variant-numeric: tabular-nums; }
@media print {
  body.apercu-photo-ouvert * { visibility: hidden; }
  body.apercu-photo-ouvert .apercu-photo__cadre, body.apercu-photo-ouvert .apercu-photo__cadre * { visibility: visible; }
  .apercu-photo { position: absolute; inset: 0; background: #fff; }
  .apercu-photo__cadre img { max-height: 24cm; }
  .apercu-photo__cadre figcaption, .apercu-photo__cadre figcaption span { color: #000; opacity: 1; }
}
/* Légende sous les vignettes : date-heure puis titre, centrés (comme la tablette). */
.galerie__item figcaption.galerie__legende { align-items: center; text-align: center; }
.galerie__legende span { font-variant-numeric: tabular-nums; }
.mp-photos figure { margin: 0; }
.mp-photos figcaption { display: grid; text-align: center; font-size: 12px; line-height: 1.35; padding-top: .25rem; }
.tar-photo { text-align: center; }
.tar-photo__titre { font-weight: 500; color: var(--text); }
.bc-photo { display: grid; justify-items: center; }
.bc-photo__date { font-size: 10.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Bons d'intervention (bureau) : jetons d'équipe, chiffrage, signatures. */
.jetons { display: grid; gap: .4rem; }
.jetons__label { font-weight: 500; font-size: .875rem; }
.jetons__liste { display: flex; flex-wrap: wrap; gap: .35rem; min-height: 32px; }
.jeton { display: inline-flex; align-items: center; gap: .2rem; padding: .15rem .25rem .15rem .65rem; border-radius: 16px; background: var(--primary-01); color: var(--primary); font-weight: 600; font-size: 13px; }
.jeton button { width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: inherit; }
.jeton button:hover { background: rgba(var(--danger-rgb), .12); color: rgb(var(--danger-rgb)); }
.jetons__vide { color: var(--text-muted); font-size: 13px; align-self: center; }
.jetons__vide[hidden] { display: none; }
.jetons__ajout { max-width: 320px; }
.bi-prix { width: 90px; }
.bi-qte { width: 70px; text-align: right; }
.bi-num { width: 90px; }
.bi-client { white-space: normal; }
.bi-signature { display: block; width: 100%; max-height: 140px; object-fit: contain; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.bi-signature--vide { display: flex; align-items: center; justify-content: center; height: 100px; border-style: dashed; color: var(--text-muted); font-size: 13px; background: transparent; }
.ligne-cliquable { cursor: pointer; }
.bi-ajout { display: grid; grid-template-columns: 1fr auto; gap: .4rem; }
.bi-ajout .bi-qte { width: 100%; }
.bi-ajout select { min-width: 0; grid-column: 1 / -1; }
.bi-famille .bi-prix { flex: none; }
/* Fiche bon d'intervention : synthèse en tête, puis onglets (Bon et relevé, Auto-contrôle,
   Chiffrage, Photos, Signatures). */
.bi-synthese { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; padding: .75rem 1rem; background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.bi-synthese__num { font-size: 18px; font-weight: 700; color: var(--text); }
.bi-synthese__item { display: inline-flex; align-items: center; gap: .3rem; font-size: 13.5px; color: var(--text-muted); }
.bi-synthese__item.is-ok { color: rgb(var(--success-rgb)); font-weight: 600; }
.bi-synthese__total { margin-left: auto; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.bi-onglets { display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; border-bottom: 1px solid var(--border); }
.bi-onglets [data-onglet] {
  display: inline-flex; align-items: center; gap: .4rem; flex: 0 0 auto; padding: .55rem .9rem; border: 0; border-bottom: 3px solid transparent;
  background: transparent; color: var(--text-muted); font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.bi-onglets [data-onglet]:hover { color: var(--text); }
.bi-onglets [data-onglet].is-actif { color: var(--primary); border-bottom-color: var(--primary); }
.bi-onglets__nb { padding: .05rem .5rem; border-radius: 999px; background: var(--surface-alt); color: var(--text-muted); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bi-onglets [data-onglet].is-actif .bi-onglets__nb { background: var(--primary-01); color: var(--primary); }
.bi-volets > [hidden], .bi-volets form > [hidden] { display: none !important; }
/* Chiffrage regroupé par chapitre (1200, 8000) : titre du chapitre et sous-total de points. */
.bi-chapitre > th { padding-top: .55rem; background: var(--surface-alt); font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted); }
.bi-chapitre > th.text-end { color: var(--text); font-variant-numeric: tabular-nums; text-transform: none; }
.bi-num { width: 80px; }

/* Complément terrassement : la quantité / les dates n'apparaissent que si l'élément est coché. */
.ct-element { padding: .55rem .75rem; border: 1px solid var(--border); border-radius: 12px; }
.ct-dep { display: none; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin-top: .45rem; padding-left: 2.5rem; }
.ct-element:has(> .form-check .form-check-input:checked) { border-color: rgba(var(--primary-rgb), .45); background: var(--primary-01); }
.ct-element:has(> .form-check .form-check-input:checked) .ct-dep { display: flex; }
.ct-qte { width: 80px; }
.ct-bordures select { min-width: 90px; }

/* Fouilles (bureau) : options en interrupteurs, actions fait / non fait. */
.fo-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .35rem .9rem; }
.fo-options[hidden], .fo-opt[hidden] { display: none !important; }
.fo-opt { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .35rem .6rem; border: 1px solid var(--border); border-radius: 10px; margin: 0; cursor: pointer; font-size: .875rem; }
.fo-opt--enfant { border-style: dashed; }
.fo-opt--enfant span::before { content: "↳ "; color: var(--text-muted); }
.fo-opt input[type=checkbox] { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 38px; height: 22px; border-radius: 11px; background: var(--gray-3, #cfd6e0); cursor: pointer; }
.fo-opt input[type=checkbox]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.fo-opt input[type=checkbox]:checked { background: rgb(var(--success-rgb)); }
.fo-opt input[type=checkbox]:checked::after { transform: translateX(16px); }
.fo-opt input[type=number] { width: 80px; border: 1px solid var(--border); border-radius: 8px; padding: .15rem .4rem; background: var(--surface); color: inherit; text-align: right; }
.fo-options__vide { grid-column: 1 / -1; margin: 0; color: var(--text-muted); font-size: .875rem; }
.fo-action { padding: .6rem .75rem; margin-bottom: .6rem; border-radius: 10px; border-left: 4px solid; }
.fo-action.is-fait { border-color: rgb(var(--success-rgb)); background: rgba(var(--success-rgb), .06); }
.fo-action.is-non-fait { border-color: rgb(var(--danger-rgb)); background: rgba(var(--danger-rgb), .05); }
.fo-action--nouvelle { border: 1px dashed var(--border); }
.fo-reel { width: 120px; }

/* Catalogues (débours, RCT) : champs de ligne compacts. */
.dd-tarif { width: 130px; }
.rct-num { width: 110px; }
.rct-pts { width: 80px; }
.rct-clients input { min-width: 120px; }
.dd-table td[data-c="titre"] input { min-width: 220px; }
/* Listes Unité / Type de chantier : assez larges pour lire la valeur choisie. */
.dd-table td[data-c="unite"] .form-select { min-width: 120px; }
.dd-table td[data-c="type_chantier"] .form-select { min-width: 170px; }
.dd-table td[data-c="utilise"] { white-space: nowrap; }
.rct-des { min-width: 300px; }
.rct-chap { max-width: 220px; }

/* Débours du chantier : tableau croisé (première colonne figée) et bilan. */
.deb-tcd-cadre { max-height: 70vh; }
.deb-tcd { font-size: .8125rem; }
.deb-tcd thead th { position: sticky; top: 0; background: var(--surface-alt); z-index: 2; font-weight: 600; }
.deb-tcd thead tr:nth-child(2) th { top: 2rem; }
.deb-tcd thead tr:nth-child(3) th { top: 4rem; }
.deb-tcd__coin { left: 0; z-index: 3 !important; min-width: 360px; }
.deb-tcd__cat { position: sticky; left: 0; background: var(--surface); z-index: 1; min-width: 130px; max-width: 170px; font-weight: 700; vertical-align: top; }
.deb-tcd__lib { min-width: 220px; }
.deb-tcd__sous-total td { background: var(--primary-01); font-weight: 600; }
.deb-tcd__total th { background: var(--surface-alt); }
.deb-bilan { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: flex-end; }
.deb-bilan__bloc { display: grid; gap: .25rem; min-width: 150px; }
.deb-bilan__bloc .input-group { width: 120px; }
.deb-bilan__lib { font-size: .8125rem; color: var(--text-muted); }
.deb-bilan__total strong { font-size: 1.25rem; color: var(--primary); }
.deb-cumuls { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .8125rem; color: var(--text-muted); }
/* Onglet Soudure gaz de la fiche chantier : liste de contrôle d'un type de travaux. */
.soudure-entete dt { font-weight: 500; color: var(--text-muted); }
.soudure-controles td:first-child { min-width: 220px; }
.soudure-controles__reponse { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-width: 200px; }
.soudure-controles__reponse .form-select { width: auto; min-width: 140px; }
.soudure-controles__valeur { width: 150px; }

/* Chantiers en alerte : les lignes urgentes en rouge et en gras, comme sous WinDev. */
.table-alertes tr.is-urgent > td { color: rgb(var(--danger-rgb)); font-weight: 700; }
.table-alertes tr.is-urgent .text-muted { color: rgba(var(--danger-rgb), .75) !important; font-weight: 500; }
.table-alertes tr[hidden] { display: none; }

/* BigBag restants (FEN_BIGBAG_restant_carte) : la liste à gauche, la carte à droite ;
   l'une sous l'autre sur petit écran. */
.bb-titre-image { height: 26px; width: auto; margin-right: .35rem; vertical-align: -6px; }
.bb { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 1rem; align-items: start; }
/* --bb-hauteur : place réellement libre sous l'en-tête, mesurée par la page (sinon la
   page dépasse de quelques pixels et l'ascenseur de fenêtre apparaît). */
.bb__liste { display: grid; gap: .6rem; max-height: var(--bb-hauteur, calc(100dvh - 250px)); min-height: 320px; overflow-y: auto; padding: 2px .35rem 2px 2px; align-content: start; }
.bb__carte { position: sticky; top: 90px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-alt); }
.bb__carte-map { height: var(--bb-hauteur, calc(100dvh - 250px)); min-height: 320px; }
.bb__ligne { padding: .7rem .8rem; border: 1px solid var(--border); border-left: 4px solid rgb(var(--warning-rgb)); border-radius: 12px; background: var(--surface); }
.bb__ligne--depart { border-left-color: var(--primary); background: var(--primary-01); }
.bb__ligne.is-actif { box-shadow: 0 0 0 2px var(--primary); }
.bb__info { display: grid; gap: .1rem; margin-bottom: .55rem; font-size: .875rem; }
.bb__adresse { color: var(--text); }
.bb__depuis, .bb__commentaire { font-size: .78rem; color: var(--text-muted); }
.bb__btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
.bb__btns--depart { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bb__btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .05rem; min-height: 46px; padding: .3rem .4rem;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface-alt); color: var(--text);
  font-size: .8125rem; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer;
}
.bb__btns--depart .bb__btn { flex-direction: row; gap: .35rem; }
.bb__btn:hover { border-color: rgba(var(--primary-rgb), .5); color: var(--primary); }
.bb__btn.is-actif { background: var(--primary); border-color: var(--primary); color: #fff; }
.bb__btn i { font-size: 1rem; }
.bb__btn small { font-size: .68rem; font-weight: 500; color: var(--text-muted); }
.bb__btn--restant { background: rgba(var(--warning-rgb), .16); border-color: rgba(var(--warning-rgb), .45); }
.bb__btn--restant strong { font-size: 1.05rem; }
.bb__btn.is-inactif { opacity: .45; cursor: default; pointer-events: none; }
.bb__photos { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.bb__photos[hidden] { display: none; }
.bb__photos img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
@media (max-width: 991.98px) {
  .bb { grid-template-columns: minmax(0, 1fr); }
  .bb__carte { position: static; order: -1; }
  .bb__carte-map { height: 45vh; min-height: 260px; }
  .bb__liste { max-height: none; overflow: visible; }
}

/* Installation de l'application (pwa-install.js) : blocs montrés seulement quand elle est
   possible, bouton de la page de connexion, et fenêtre d'aide pas à pas (en bas sur
   téléphone, centrée sur grand écran). */
html:not([data-pwa-platform]) .pwa-si-installable { display: none; }
.auth-installer { width: 100%; max-width: 440px; margin: 1.25rem auto 0; }
.terrain-installer { margin-bottom: 1rem; }
.auth-installer:not(:has(.pwa-bandeau:not([hidden]))), .terrain-installer:not(:has(.pwa-bandeau:not([hidden]))) { display: none; }
/* Le bandeau : un grand bouton plein, aux couleurs de la charte, qu'on ne peut pas manquer. */
.pwa-bandeau {
  display: flex; align-items: center; gap: .9rem; width: 100%; min-height: 72px;
  padding: .8rem 1rem; border: 0; border-radius: 16px; text-align: left; cursor: pointer;
  background: var(--gradient-brand, linear-gradient(72deg, #0EA5A4, #2DD4BF)); color: #fff;
  box-shadow: 0 8px 22px rgba(var(--primary-rgb, 14, 165, 164), .38);
  font: inherit;
}
.pwa-bandeau[hidden] { display: none; }
.pwa-bandeau:hover { filter: brightness(1.06); }
.pwa-bandeau:active { transform: scale(.99); }
.pwa-bandeau:focus-visible { outline: 3px solid rgba(var(--primary-rgb, 14, 165, 164), .45); outline-offset: 3px; }
.pwa-bandeau__logo { flex: none; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.pwa-bandeau__logo img { width: 40px; height: 40px; object-fit: contain; }
.pwa-bandeau__texte { flex: 1 1 auto; min-width: 0; display: grid; gap: .1rem; }
.pwa-bandeau__texte strong { font-size: 1.05rem; font-weight: 700; line-height: 1.2; }
.pwa-bandeau__texte small { font-size: .82rem; line-height: 1.3; opacity: .92; }
.pwa-bandeau__action {
  flex: none; display: inline-flex; align-items: center; gap: .35rem; padding: .55rem 1rem; border-radius: 999px;
  background: #fff; color: var(--primary, #0EA5A4); font-weight: 700; font-size: .95rem; white-space: nowrap;
}
@media (max-width: 420px) { .pwa-bandeau { flex-wrap: wrap; } .pwa-bandeau__texte { flex-basis: calc(100% - 52px - .9rem); } .pwa-bandeau__action { width: 100%; justify-content: center; } }
/* Rappel dans le bandeau du haut du bureau, sur toutes les pages. */
.pwa-pilule {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 36px; padding: 0 .85rem; margin-right: .35rem;
  border: 0; border-radius: 999px; background: var(--gradient-brand, linear-gradient(72deg, #0EA5A4, #2DD4BF)); color: #fff;
  font-weight: 600; font-size: .85rem; white-space: nowrap; cursor: pointer;
  box-shadow: 0 4px 12px rgba(var(--primary-rgb, 14, 165, 164), .35);
}
.pwa-pilule[hidden], html[data-pwa-platform="desktop-other"] .pwa-pilule { display: none; }
.pwa-pilule:hover { filter: brightness(1.06); }
@media (max-width: 1199.98px) { .pwa-pilule { padding: 0 .6rem; } .pwa-pilule__texte { display: none; } }
.pwa-install-overlay { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, .5); padding: 16px; }
.pwa-install-box { width: 100%; max-width: 440px; background: var(--surface, #fff); color: var(--text, #222); border-radius: 16px; padding: 20px; font-size: 16px; line-height: 1.45; box-shadow: 0 10px 40px rgba(0, 0, 0, .3); }
.pwa-install-box h2 { margin: 0 0 12px; font-size: 18px; font-weight: 700; }
.pwa-install-box ol { margin: 0 0 16px; padding-left: 22px; }
.pwa-install-box li { margin-bottom: 8px; }
.pwa-install-close { display: block; width: 100%; min-height: 48px; padding: 12px; border: 0; border-radius: 10px; background: var(--primary, #0EA5A4); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; }
@media (min-width: 600px) { .pwa-install-overlay { align-items: center; } }

/* Développeur → Outils, vérification de l'installation : listes de fichiers qui peuvent être longues. */
.inst-liste { max-height: 16rem; overflow: auto; }
.inst-liste li { padding: .1rem 0; }
.deb-impression__titre { display: none; }
/* Impression des débours : la feuille ne porte que le tableau et le bilan (bloc
   .deb-impression). Menu, bandeau, titre de page, boutons, notes et fonds animés
   sont écartés ; A4 paysage, le tableau étant large. */
@page debours { size: A4 landscape; margin: 10mm; }
@media print {
  .deb-tcd-cadre { max-height: none; overflow: visible; }
  .deb-tcd thead th, .deb-tcd__cat { position: static; }
  html:has(.deb-impression), body:has(.deb-impression) { background: #fff !important; }
  body:has(.deb-impression)::before, body:has(.deb-impression)::after { display: none !important; }
  body:has(.deb-impression) > *:not(.app-content),
  body:has(.deb-impression) .app-content > *:not(.page-body),
  body:has(.deb-impression) .page-body > *:not(.deb-impression) { display: none !important; }
  body:has(.deb-impression) .app-content,
  body:has(.deb-impression) .page-body { margin: 0 !important; padding: 0 !important; background: none !important; transition: none !important; }
  .deb-impression { page: debours; color: #000; }
  .deb-impression__titre { display: block; margin: 0 0 3mm; font-size: 11pt; }
  .deb-impression .card { margin-bottom: 4mm !important; border: 0; border-radius: 0; box-shadow: none; background: #fff; backdrop-filter: none; }
  .deb-impression .card-body { padding: 0; }
  .deb-impression .deb-tcd { min-width: 0; }
  .deb-impression .deb-tcd tr, .deb-impression .deb-bilan, .deb-impression .deb-cumuls { break-inside: avoid; }
  /* Encre noire sur papier blanc, même si l'écran est en thème sombre ; seuls les totaux gardent un léger gris. */
  .deb-impression, .deb-impression * { color: #000 !important; }
  .deb-impression .deb-tcd > * > tr > * { background: #fff !important; box-shadow: none !important; border-color: #9aa1ab !important; }
  .deb-impression .deb-tcd thead th, .deb-impression .deb-tcd .deb-tcd__sous-total td, .deb-impression .deb-tcd .deb-tcd__total th {
    background: #e9ecf0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .deb-impression [data-deb-enregistrer] { display: none !important; }
  /* Les pourcentages se lisent comme du texte, pas comme des champs de saisie. */
  .deb-impression .deb-bilan .form-control, .deb-impression .deb-bilan .input-group-text { border: 0; background: none; padding: 0; color: #000; box-shadow: none; }
  .deb-impression .deb-bilan .form-control { width: 3.2em; flex: 0 0 auto; text-align: right; }
  .deb-impression .deb-bilan .input-group { width: auto; }
}

/* État financier : lignes d'attachement / facture modifiables sur place. */
.compta-lignes .cp-type { min-width: 95px; }
.compta-lignes .cp-montant { width: 105px; }
.compta-lignes .cp-num { width: 110px; }
.compta-lignes input[type=date] { width: 135px; }

/* Chantiers vérifications (Ludo) : filtres, ruptures repliables, montants. */
.verif-filtres { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
.verif-filtres__dates { display: grid; gap: .4rem; }
.verif-filtres__liste { min-width: 200px; flex: 1 1 200px; }
.verif-filtres__actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.verif-cadre { max-height: 75vh; }
.verif-table { font-size: .78rem; }
.verif-table thead th { position: sticky; top: 0; background: var(--surface-alt); z-index: 1; white-space: nowrap; }
.verif-adresse { min-width: 220px; }
.verif-repli { color: var(--text-muted); font-style: italic; }
.verif-rupture { cursor: pointer; font-weight: 700; }
.verif-rupture td { background: var(--surface-alt); }
.verif-rupture--2 td:not([data-c]) { padding-left: 1.2rem; }
.verif-rupture--3 td:not([data-c]) { padding-left: 2.2rem; font-weight: 600; }
.verif-rupture--1 td { background: var(--primary-01); }
.verif-rupture.is-ferme i { transform: rotate(-90deg); display: inline-block; }
.verif-total td { font-weight: 700; background: var(--surface-alt); position: sticky; bottom: 0; }
.verif-filtres__liste { border: 0; margin: 0; padding: 0; }
.verif-filtres__liste legend { float: none; width: 100%; }
.verif-cases { max-height: 150px; overflow-y: auto; padding: .35rem .6rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: .8125rem; }
.verif-cases .form-check { margin-bottom: .1rem; }
.verif-progression { display: flex; align-items: center; gap: .6rem; padding: .5rem 1rem; border-bottom: 1px solid var(--border); font-size: .8125rem; }
.verif-progression .progress { height: 8px; max-width: 360px; }
.verif-attente::after { content: ""; display: inline-block; width: 28px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--border) 25%, var(--surface-alt) 50%, var(--border) 75%); background-size: 200% 100%; animation: verif-shimmer 1.2s infinite; }
@keyframes verif-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Droits d'accès : applications, groupes du menu à cocher. */
.droits-profils .list-group-item.active .badge { background: rgba(255, 255, 255, .2) !important; color: #fff !important; }
.droits-apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.droits-app { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem 1rem; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; margin: 0; }
.droits-app .form-check-input { width: 2.4em; height: 1.3em; margin: .15rem 0 0; flex: none; }
.droits-app span { display: grid; }
.droits-app small { color: var(--text-muted); }
.droits-app:has(input:checked) { border-color: rgba(var(--primary-rgb), .5); background: var(--primary-01); }
.droits-groupes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .75rem; }
.droits-groupes > p { grid-column: 1 / -1; }
.droits-groupes.is-sans-bureau .droits-groupe { opacity: .55; }
.droits-groupe { margin: 0; padding: .6rem .8rem; border: 1px solid var(--border); border-radius: 12px; }
.droits-groupe.is-vide { background: rgba(var(--danger-rgb), .03); }
.droits-groupe__titre { float: none; width: 100%; display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; font-size: .95rem; font-weight: 700; }
.droits-groupe__entrees { display: grid; gap: .3rem; padding-left: .3rem; }
.droits-entree { margin: 0; font-size: .875rem; }
.droits-entree small { font-size: .72rem; }
.droits-utilisateur__groupe th { background: var(--surface-alt); }
/* Troisième niveau du menu : sous-menus d'un groupe (Structure, Utilisateurs & sécurité, Référentiels chantier). */
.droits-groupe--large { grid-column: 1 / -1; }
.droits-sousmenus { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .6rem; margin-top: .6rem; }
.droits-sousmenu { padding: .5rem .65rem; border-radius: 10px; background: var(--surface-alt); border: 1px dashed var(--border); }
.droits-sousmenu.is-vide { background: rgba(var(--danger-rgb), .04); }
.droits-sousmenu__titre { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; font-size: .875rem; font-weight: 600; }
.droits-utilisateur__sousmenu th { background: transparent; font-weight: 600; font-size: .85rem; color: var(--text-muted); padding-left: 1.5rem !important; border-bottom: 1px dashed var(--border); }
.droits-utilisateur__sousmenu ~ tr[data-ligne-utilisateur] td:first-child { padding-left: 1.5rem; }
.droits-utilisateur__groupe ~ tr[data-ligne-utilisateur] td:first-child { padding-left: 1.5rem; }

/* Colonnes déplaçables et masquables (colonnes-deplacables.js).
   La colonne saisie suit le pointeur, soulevée ; la cible porte un liseré primaire. */
table[data-colonnes] thead th[data-c] { cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
table[data-colonnes] .colonne-saisie {
  position: relative;
  z-index: 4;
  background: var(--surface) !important;
  box-shadow: -6px 0 14px -8px rgba(0, 0, 0, .35), 6px 0 14px -8px rgba(0, 0, 0, .35);
  opacity: .95;
  pointer-events: none;
}
table[data-colonnes] thead th.colonne-saisie--tete { z-index: 5; color: var(--primary); cursor: grabbing; box-shadow: inset 0 -2px 0 var(--primary), 0 8px 18px -8px rgba(0, 0, 0, .4); }
table[data-colonnes] .colonne-cible-avant { box-shadow: inset 3px 0 0 var(--primary); }
table[data-colonnes] .colonne-cible-apres { box-shadow: inset -3px 0 0 var(--primary); }
table[data-colonnes] .colonne-posee { animation: colonne-posee .9s ease-out; }
@keyframes colonne-posee { from { background-color: var(--primary-02); } to { background-color: transparent; } }
body.colonnes-glisse, body.colonnes-glisse * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }
.colonnes-barre { display: flex; justify-content: flex-end; padding: .5rem 1rem; }
.colonnes-menu__panneau { min-width: 260px; padding: .5rem 0; }
.colonnes-menu__aide { margin: 0 .9rem .4rem; font-size: .75rem; color: var(--text-muted); }
.colonnes-menu__liste { list-style: none; margin: 0; padding: 0 .4rem; max-height: 55vh; overflow-y: auto; }
.colonnes-menu__item { display: flex; align-items: center; gap: .5rem; padding: .1rem .5rem; border-radius: var(--radius-sm); font-size: .8125rem; }
.colonnes-menu__item:hover { background: var(--hover-bg); }
.colonnes-menu__item .form-check { flex: 1; min-height: 32px; display: flex; align-items: center; gap: .4rem; padding-left: 0; }
.colonnes-menu__item .form-check-input { margin: 0; float: none; }
.colonnes-menu__fleches { display: inline-flex; }
.colonnes-menu__fleches .btn { width: 32px; height: 32px; padding: 0; border: 0; color: var(--text-muted); }
.colonnes-menu__fleches .btn:disabled { opacity: .25; }
.colonnes-menu__fleches .btn:focus-visible { box-shadow: 0 0 0 3px var(--primary-02); color: var(--primary); }
.colonnes-menu__fleches .btn:hover:not(:disabled) { color: var(--primary); background: var(--primary-01); }
.colonnes-menu__pied { border-top: 1px solid var(--border); margin-top: .4rem; padding: .5rem .9rem 0; }
@media (prefers-reduced-motion: reduce) { table[data-colonnes] .colonne-posee { animation: none; } }

/* Tableau de bord : activité terrain d'une journée. */
.activite-jour { display: flex; align-items: center; gap: .35rem; }
.activite-jour__date { font-size: .8125rem; font-weight: 600; min-width: 7.5rem; text-align: center; }
.activite-jour .btn-icon { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.activite-compteurs { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .5rem; }
.activite-compteur { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .5rem; align-items: center; padding: .5rem .65rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.activite-compteur i { grid-row: span 2; font-size: 1.25rem; color: var(--primary); }
.activite-compteur strong { font-size: 1.15rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.activite-compteur span { font-size: .72rem; color: var(--text-muted); line-height: 1.2; }
.activite-compteur.is-vide i, .activite-compteur.is-vide strong { color: var(--text-muted); opacity: .6; }
.activite-chantiers { display: flex; flex-wrap: wrap; gap: .35rem; }
.activite-chantiers .badge { text-decoration: none; }

/* Développeur → phpinfo : sortie de phpinfo() dans un cadre. */
.phpinfo-cadre { display: block; width: 100%; height: 75vh; border: 0; border-radius: 0 0 var(--radius) var(--radius); }

/* Retour d'une fiche (retour-fiche.js) : l'élément d'origine s'allume puis reste
   marqué « dernière fiche ouverte » par un liseré. */
.retour-dernier:is(tr) > :is(td, th):first-child { box-shadow: inset 4px 0 0 var(--primary); }
.retour-dernier:not(tr) { box-shadow: inset 4px 0 0 var(--primary); }
.kanban-carte.retour-dernier { outline: 2px solid var(--primary); outline-offset: 1px; }
/* Carte dont la fiche a été modifiée par quelqu'un d'autre : à recharger. */
/* Affectations : étape que le terrain vient de valider, page ouverte. */
.aff-item.is-validation-recente { background: rgba(var(--success-rgb), .12); box-shadow: inset 4px 0 0 rgb(var(--success-rgb)); animation: aff-validation 1.4s ease 2; }
@keyframes aff-validation { 50% { background: rgba(var(--success-rgb), .28); } }
@media (prefers-reduced-motion: reduce) { .aff-item.is-validation-recente { animation: none; } }
.kanban-carte.is-perimee { outline: 2px dashed rgba(var(--warning-rgb), .9); outline-offset: 1px; }
/* Liste des chantiers en direct : ligne validée par le terrain, ligne à recharger. */
tr.is-validation-recente > td { background: rgba(var(--success-rgb), .10); }
tr.is-validation-recente > td:first-child { box-shadow: inset 4px 0 0 rgb(var(--success-rgb)); }
tr.is-perimee > td:first-child { box-shadow: inset 4px 0 0 rgba(var(--warning-rgb), .9); }
tr.is-perimee > td { background: rgba(var(--warning-rgb), .06); }
.retour-flash:is(tr) > :is(td, th), .retour-flash:not(tr) { animation: retour-flash 2.2s ease-out; }
@keyframes retour-flash { 0%, 35% { background-color: var(--primary-02); } 100% { background-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .retour-flash:is(tr) > :is(td, th), .retour-flash:not(tr) { animation: none; } }

/* État financier : relances client sous chaque ligne d'attachement. */
.compta-relances > td { padding-top: 0; border-top: 0; }
.compta-relances summary { font-size: .8rem; color: var(--text-muted); cursor: pointer; padding: .15rem 0 .35rem; }
.compta-relances summary:hover { color: var(--primary); }
.compta-relances details[open] summary { color: var(--text); }
.compta-relances__liste { list-style: none; margin: 0 0 .5rem; padding: 0 0 0 1.25rem; display: grid; gap: .35rem; }
.compta-relances__liste li { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.compta-relances__form { display: flex; align-items: center; gap: .35rem; flex: 1 1 320px; max-width: 640px; }

/* Compta → Pilotage Exploitation (pilotage.js). */
.pilotage-etat { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.pilotage-filtres, .pilotage-outils { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }
.pilotage-outils { margin-bottom: .75rem; }
.pilotage-champ { min-width: 150px; flex: 0 1 180px; }
.pilotage-champ--court { flex-basis: 120px; min-width: 110px; }
.pilotage-champ .form-select[data-bs-toggle] { min-height: 31px; }
.pilotage-multi { width: 320px; max-width: 90vw; padding: .5rem; }
.pilotage-multi__tete { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.pilotage-multi__liste { max-height: 280px; overflow-y: auto; font-size: .8125rem; }
.pilotage-aide { color: var(--text-muted); cursor: help; font-size: .85em; }
.pilotage-onglets .nav-link { font-weight: 500; }
.pilotage-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .75rem; margin-bottom: .75rem; }
.pilotage-kpis--grandes { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pilotage-kpi { --kpi-rgb: var(--primary-rgb); position: relative; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-card, 0 2px 8px rgba(0,0,0,.06)); padding: .85rem 1rem .85rem 1.15rem; overflow: hidden; }
.pilotage-kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: rgb(var(--kpi-rgb)); }
.pilotage-kpi--success { --kpi-rgb: var(--success-rgb); }
.pilotage-kpi--warning { --kpi-rgb: var(--warning-rgb); }
.pilotage-kpi--danger { --kpi-rgb: var(--danger-rgb); }
.pilotage-kpi--info { --kpi-rgb: var(--info-rgb); }
.pilotage-kpi--secondary { --kpi-rgb: var(--secondary-rgb); }
.pilotage-kpi__lib { font-size: .78rem; color: var(--text-muted); font-weight: 600; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.pilotage-kpi__val { font-size: 1.35rem; font-weight: 700; color: var(--text); margin-top: .2rem; }
.pilotage-kpi--grande .pilotage-kpi__val { font-size: 1.75rem; }
.pilotage-kpi--grande { background: linear-gradient(135deg, rgba(var(--kpi-rgb), .10), var(--surface) 60%); }
.pilotage-kpi__sous { font-size: .75rem; color: var(--text-muted); }
.pilotage-graphe { height: 320px; width: 100%; }
.pilotage-graphe--haut { height: 420px; }
.pilotage-graphe--anneau { height: 230px; }
.pilotage-legende { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .3rem; font-size: .8rem; }
.pilotage-legende li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 3.5rem; align-items: center; gap: .5rem; }
.pilotage-legende i { width: 10px; height: 10px; border-radius: 50%; }
.pilotage-legende__nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.pilotage-legende li > span:last-child { text-align: right; }
.pilotage-table { max-height: 70vh; }
.pilotage-table table { font-size: .8rem; }
.pilotage-table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-alt); white-space: nowrap; }
.pilotage-table tfoot td { position: sticky; bottom: 0; background: var(--surface-alt); font-weight: 700; white-space: nowrap; }
.pilotage-table .tri-colonne { white-space: nowrap; }
.pilotage-chaleur { display: block; margin: -.25rem -.5rem; padding: .25rem .5rem; border-radius: 4px; font-weight: 600; background: color-mix(in srgb, var(--primary) var(--intensite), transparent); color: var(--text); }
.pilotage-qualite { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.pilotage-qualite__score { font-size: 2.75rem; font-weight: 700; line-height: 1; }
.pilotage-qualite__score small { font-size: 1rem; color: var(--text-muted); font-weight: 500; }
.pilotage-qualite .progress { height: 10px; }

/* Édition à plusieurs : qui consulte aussi la fiche (presence.js), bandeau de modification. */
.presence { display: inline-flex; align-items: center; gap: .4rem; font-size: .75rem; color: var(--text-muted); }
.presence[hidden] { display: none; }
.presence__avatars { display: inline-flex; }
.presence__avatar { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .65rem; font-weight: 700; color: #fff; background: rgb(var(--info-rgb)); border: 2px solid var(--surface); margin-left: -6px; }
.presence__avatar:first-child { margin-left: 0; }
.presence__texte { white-space: nowrap; }
@media (max-width: 575.98px) { .presence__texte { display: none; } }
/* Présence dans l'en-tête de page (kanban) : grandes pastilles à droite du titre. */
.presence--titre { margin-left: auto; gap: .6rem; padding: .3rem .8rem .3rem .4rem; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-card); font-size: .85rem; color: var(--text); }
.presence--titre .presence__avatar { width: 36px; height: 36px; font-size: .8rem; margin-left: -10px; border-width: 3px; }
.presence--titre .presence__avatar:first-child { margin-left: 0; }
.presence__avatar--plus { background: var(--gray-4, #A8AAAE); }
.presence__point { display: inline-block; width: 8px; height: 8px; margin-right: .4rem; border-radius: 50%; background: rgb(var(--success-rgb)); vertical-align: 1px; animation: presence-point 2s ease-in-out infinite; }
@keyframes presence-point { 50% { box-shadow: 0 0 0 4px rgba(var(--success-rgb), .25); } }
@media (prefers-reduced-motion: reduce) { .presence__point { animation: none; } }
.presence-bandeau { position: sticky; top: .5rem; z-index: 1020; box-shadow: var(--shadow-card); }

/* Développeur → Erreurs PHP : messages longs (chemins) coupés, pile d'appels repliée. */
.erreurs-php__message { min-width: 20rem; }
.erreurs-php__message code { white-space: pre-wrap; word-break: break-word; color: var(--bs-body-color); }
.erreurs-php__message summary { cursor: pointer; }
.erreurs-php__pile { max-height: 20rem; overflow: auto; font-size: .75rem; white-space: pre; padding: .5rem; margin-top: .25rem; border-radius: 8px; background: var(--bs-tertiary-bg); }

/* « Se connecter en tant que » : bandeau permanent tant qu'on agit sous un autre compte. */
.incarnation-bandeau { position: sticky; top: 0; z-index: 1030; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .5rem 1rem; margin-bottom: 1rem; border-radius: var(--radius, 16px); background: rgba(var(--bs-warning-rgb), .15); border: 1px solid rgba(var(--bs-warning-rgb), .5); color: var(--bs-body-color); }
.incarnation-bandeau .ri-user-shared-line { font-size: 1.25rem; color: rgb(var(--bs-warning-rgb)); }

/* Création rapide de chantier : taille (petit / gros) et ville cherchée dans la base des communes. */
.nc-taille .btn { flex: 1 1 0; }
.commune-champ { position: relative; }
.commune-liste {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 1060;
  max-height: 264px; overflow-y: auto; margin: 0; padding: 4px; list-style: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-card-hover);
}
.commune-liste__choix {
  display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 10px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
}
.commune-liste__choix.is-actif, .commune-liste__choix:hover { background: var(--hover-bg); }
.commune-liste__choix.is-actif { box-shadow: inset 2px 0 0 var(--primary); }
.commune-liste__nom { font-weight: 500; color: var(--text); }
.commune-liste__cp { font-variant-numeric: tabular-nums; color: var(--text); }
.commune-liste__dep { font-size: var(--font-size-sm); color: var(--text-muted); min-width: 2.2em; text-align: right; }
.commune-liste__vide { padding: 8px 10px; color: var(--text-muted); }
/* Code postal rempli par la recherche : lecture seule, visiblement non saisissable. */
#nc-cp[readonly] { background-color: var(--surface-alt); color: var(--text); cursor: default; }
#nc-client:disabled, #nc-profil:disabled { color: var(--text); opacity: 1; background-image: none; padding-right: .8rem; cursor: default; }
/* Fiche chantier : client et profil fixés à la création (modifiables par le développeur seul). */
#client_id:disabled, #profil_id:disabled { color: var(--text); background-image: none; padding-right: .8rem; cursor: not-allowed; }

/* =========================================================
   Mon compte → Apparence : choix du style avec un aperçu miniature
   (menu + deux cartes) dessiné dans les couleurs de chaque style.
   ========================================================= */
.apparence-styles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; }
.apparence-style {
  display: flex; gap: .75rem; align-items: center; cursor: pointer;
  padding: .7rem .8rem; border-radius: var(--radius-lg);
  border: 1px solid var(--border); background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}
.apparence-style:hover { border-color: var(--primary); }
.apparence-style:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-02); }
.apparence-style input { flex: 0 0 auto; margin: 0; }
.apparence-style__texte { display: flex; flex-direction: column; min-width: 0; }
.apparence-style__texte strong { font-size: 13.5px; }
.apparence-style__texte small { font-size: 12px; color: var(--text-muted); }
.apparence-style__apercu {
  --ap-fond: #F4F6FA; --ap-menu: #FFFFFF; --ap-carte: #FFFFFF; --ap-accent: #0EA5A4; --ap-bord: #E6E8F0;
  flex: 0 0 auto; position: relative; width: 76px; height: 52px; border-radius: 8px; overflow: hidden;
  background: var(--ap-fond); border: 1px solid var(--ap-bord);
}
.apparence-style--obsidienne .apparence-style__apercu {
  --ap-fond: #0B0D13; --ap-menu: #0F1219; --ap-carte: #161B27; --ap-accent: #7C8CFF; --ap-bord: #2A3040;
  background: radial-gradient(40px 30px at 20% 0%, rgba(124, 140, 255, .35), transparent 70%), var(--ap-fond);
}
.apparence-style__menu { position: absolute; left: 0; top: 0; bottom: 0; width: 18px; background: var(--ap-menu); border-right: 1px solid var(--ap-bord); }
.apparence-style__menu::after { content: ""; position: absolute; left: 4px; top: 8px; width: 10px; height: 3px; border-radius: 2px; background: var(--ap-accent); box-shadow: 0 0 6px var(--ap-accent); }
.apparence-style__carte { position: absolute; left: 24px; top: 8px; width: 46px; height: 16px; border-radius: 4px; background: var(--ap-carte); box-shadow: 0 0 0 1px var(--ap-bord), 0 1px 0 rgba(255,255,255,.12) inset; }
.apparence-style__carte--2 { top: 29px; height: 16px; }
.apparence-style__carte::after { content: ""; position: absolute; left: 4px; top: 5px; width: 18px; height: 3px; border-radius: 2px; background: var(--ap-accent); opacity: .8; }
.apparence-style__carte--2::after { width: 30px; opacity: .35; }

/* =========================================================
   Pastille de couleur du marché / agence (helper marche_pastille) :
   posée devant le numéro d'un chantier partout où il s'affiche.
   ========================================================= */
.marche-pastille {
  display: inline-block; flex: 0 0 auto;
  width: 10px; height: 10px; margin-right: .4em;
  border-radius: 3px; vertical-align: baseline;
  background: var(--marche-couleur, transparent);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12) inset;
}
/* Marché sans couleur : gris plein (un carré vide se lirait comme une case à cocher). */
.marche-pastille--neutre { background: var(--gray-4); }
[data-theme="dark"] .marche-pastille { box-shadow: 0 0 0 1px rgba(255, 255, 255, .2) inset; }
/* Tablette : un peu plus grande, lisible à bout de bras. */
.terrain-odt__num .marche-pastille, .terrain-fiche__numero .marche-pastille, .terrain-bloc__titre .marche-pastille { width: 12px; height: 12px; }

/* =========================================================
   Repère « Préproduction » (App\Core\Preproduction, interrupteur de
   Développeur → Outils) : pastille à hachures de chantier dans la barre du
   haut, et liseré hachuré sous cette barre. Couleurs fixes, volontairement
   hors thème : le repère doit sauter aux yeux, en clair comme en sombre.
   ========================================================= */
.preprod-badge {
  --preprod: #F59E0B; --preprod-fonce: #1F1A0E;
  display: inline-flex; align-items: center; gap: .35rem; flex: 0 0 auto;
  padding: 5px 12px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1;
  color: var(--preprod-fonce);
  background: repeating-linear-gradient(135deg, var(--preprod) 0 10px, #FCD34D 10px 20px);
  box-shadow: 0 0 0 2px var(--preprod-fonce), 0 4px 14px -4px rgba(245, 158, 11, .7);
  white-space: nowrap;
}
.preprod-badge i { font-size: 14px; }
.preprod-badge__court { display: none; }
@media (max-width: 575.98px) {
  .preprod-badge { padding: 4px 8px; font-size: 10.5px; }
  .preprod-badge__long { display: none; }
  .preprod-badge__court { display: inline; }
}
.preprod-badge--terrain { margin-left: .5rem; }
/* Tablette étroite : la pastille se réduit à son pictogramme pour laisser la place au titre (le liseré hachuré reste). */
@media (max-width: 419.98px) { .preprod-badge--terrain .preprod-badge__court { display: none; } .preprod-badge--terrain { padding: 4px 7px; } }
/* Barre du haut du bureau sur téléphone : le repère se réduit à son icône et le rappel
   « Installer » s'efface (le bandeau de Mon compte reste), sinon la barre déborde de l'écran. */
@media (max-width: 479.98px) {
  .app-header .preprod-badge .preprod-badge__court { display: none; }
  .app-header .preprod-badge { padding: 4px 7px; }
  .app-header .pwa-pilule { display: none; }
  .app-header .session-timer { padding-left: .45rem; padding-right: .45rem; }
}
/* Téléphones de 360 px (Android courant) : icônes et espacements resserrés, sinon l'avatar
   sortait de 9 px à droite. */
@media (max-width: 389.98px) {
  .app-header { gap: .5rem; padding: 0 .6rem 0 .5rem; }
  .app-header .header-icon { width: 34px; height: 34px; font-size: 18px; }
  .app-header > .d-flex { gap: .25rem !important; }
  .app-header .header-user { margin-left: 0 !important; }
}
.preprod-badge--flottant { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 1100; }
/* Liseré hachuré sous la barre du haut (bureau et tablette). */
body.is-preprod .app-header, body.is-preprod .terrain-entete { position: sticky; }
body.is-preprod .app-header::after, body.is-preprod .terrain-entete::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 4px; border-radius: 4px 4px 0 0;
  background: repeating-linear-gradient(135deg, #F59E0B 0 10px, #1F1A0E 10px 20px);
  pointer-events: none;
}
body.is-preprod .terrain-entete::after { left: 0; right: 0; border-radius: 0; }

/* =========================================================
   Logo DSG (assets/img/logo-dsg.png) à la place des pictogrammes de marque :
   menu du bureau (sur fond transparent), page de connexion et en-tête de la
   tablette (sur une tuile blanche, leurs fonds étant colorés).
   ========================================================= */
html .sidebar-brand__logo.sidebar-brand__logo--image { background: transparent; box-shadow: none; border-radius: 0; }
html .auth-aside__logo.auth-aside__logo--image,
html .terrain-entete__logo.terrain-entete__logo--image { background: #fff; padding: 4px; box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .35); }
.sidebar-brand__logo--image img, .auth-aside__logo--image img, .terrain-entete__logo--image img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* =========================================================
   Sous-traitants (FEN_SOUS_TRAITANT_LST) : grille de fiches.
   ========================================================= */
.st-recherche { position: relative; }
.st-recherche i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.st-recherche .form-control { padding-left: 32px; min-width: 260px; }
.st-ajout {
  display: flex; align-items: center; gap: .6rem; margin-bottom: 1.25rem;
  padding: .5rem .5rem .5rem .75rem; border-radius: var(--radius-lg);
  border: 1.5px dashed var(--border); background: var(--surface-alt);
}
.st-ajout:focus-within { border-color: var(--primary); border-style: solid; }
.st-ajout__icone { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--primary-01); color: var(--primary); font-size: 18px; }
.st-ajout .form-control { border: 0; background: transparent; box-shadow: none; padding-left: 0; }
.st-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: .75rem; }
.st-fiche {
  display: flex; align-items: center; gap: .8rem; min-width: 0;
  padding: .8rem .9rem; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--border);
  transition: border-color .15s, box-shadow .15s;
}
.st-fiche:hover, .st-fiche.is-edition { border-color: rgba(var(--primary-rgb), .45); box-shadow: 0 6px 18px -12px rgba(var(--primary-rgb), .6); }
.st-fiche:target { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-02); }
.st-fiche__avatar {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; font-weight: 700; font-size: 14px; letter-spacing: .02em;
  color: hsl(var(--st-teinte) 55% 38%); background: hsl(var(--st-teinte) 70% 93%);
}
[data-theme="dark"] .st-fiche__avatar { color: hsl(var(--st-teinte) 75% 78%); background: hsl(var(--st-teinte) 35% 22%); }
.st-fiche__corps { flex: 1 1 auto; min-width: 0; }
.st-fiche__nom { font-weight: 600; font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-fiche__usage { display: flex; flex-wrap: wrap; gap: .15rem .7rem; margin-top: .15rem; font-size: 12px; color: var(--text-muted); }
.st-fiche__usage i { opacity: .75; }
.st-fiche.is-utilise .st-fiche__usage { color: var(--text-muted); }
.st-fiche__actions { flex: 0 0 auto; }
.st-fiche__edition { flex: 1 1 auto; min-width: 0; display: grid; gap: .4rem; }
@media (max-width: 575.98px) {
  .st-recherche .form-control { min-width: 0; width: 100%; }
  .st-recherche { flex: 1 1 100%; }
  .st-ajout { flex-wrap: wrap; }
  .st-ajout .form-control { flex: 1 1 60%; }
}

/* Débours données : types de débours en onglets pastille au-dessus du tableau. */
.dd-types { display: flex; flex-wrap: wrap; gap: .4rem; padding: 4px; border-radius: 12px; background: var(--surface-alt); width: fit-content; max-width: 100%; }
.dd-types__item { display: inline-flex; align-items: center; gap: .5rem; padding: 7px 14px; border-radius: 9px; font-weight: 600; font-size: 13px; color: var(--text-muted); text-decoration: none; transition: background .15s, color .15s; }
.dd-types__item:hover { color: var(--text); background: var(--hover-bg); }
.dd-types__item.is-actif { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm), 0 0 0 1px var(--border); }
.dd-types__nb { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--gray-2); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.dd-types__item.is-actif .dd-types__nb { background: var(--primary-01); color: var(--primary); }

/* Choix du fond animé (Mon compte → Apparence, Développeur → Outils). */
.apparence-fonds { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .5rem; margin-bottom: .5rem; }
.apparence-fond { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; padding: .55rem .7rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.apparence-fond:hover { border-color: var(--primary); }
.apparence-fond:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-02); }
.apparence-fond input { flex: 0 0 auto; margin-top: .2rem; }
.apparence-fond span { display: flex; flex-direction: column; min-width: 0; }
.apparence-fond strong { font-size: 13.5px; }
.apparence-fond small { font-size: 12px; color: var(--text-muted); }
/* Couleur dominante d’Obsidienne (Développeur → Outils) : pastille mi-clair, mi-sombre. */
.apparence-fond .teinte-pastille { display: block; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--t-clair) 50%, var(--t-sombre) 50%); box-shadow: 0 0 0 1px var(--border); }

/* Raccourcis sous les champs date / heure du bureau (saisie-date-heure.js). */
.saisie-raccourcis { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.saisie-raccourcis button {
  padding: .1rem .6rem; border: 1px solid var(--border); border-radius: 999px;
  background: transparent; color: var(--primary); font-size: 12px; font-weight: 500; line-height: 1.6; cursor: pointer;
}
.saisie-raccourcis button:hover { background: var(--primary-01); border-color: var(--primary); }

/* Journal d'activité : détail de l'appareil (partials/appareil_cellule.php) */
.journal-appareil details summary { cursor: pointer; width: max-content; }
.journal-appareil__details { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 10px; }
.journal-appareil__details dt { font-weight: 500; color: var(--bs-secondary-color); }
.journal-appareil__details dd { margin: 0; overflow-wrap: anywhere; }

/* Liste de choix en largeur automatique : elle prend la largeur de sa plus longue option ;
   jamais plus large que son conteneur. */
.form-select.w-auto { max-width: 100%; text-overflow: ellipsis; }

/* === Téléphone (bureau) : saisie et cibles tactiles ======================================
   Une application terrain qui aurait ses propres tailles porte body.terrain. */
@media (max-width: 575.98px) {
  /* Safari iPhone zoome la page au toucher d'un champ écrit en moins de 16 px. */
  body:not(.terrain) input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
  body:not(.terrain) select,
  body:not(.terrain) textarea { font-size: 16px; }
  /* Cibles tactiles (charte : 40 px) : cases, interrupteurs, petits boutons, icônes de ligne. */
  body:not(.terrain) .form-check-input[type=checkbox]:not([role=switch]),
  body:not(.terrain) .form-check-input[type=radio] { width: 1.25rem; height: 1.25rem; }
  body:not(.terrain) .form-switch .form-check-input { width: 2.75rem; height: 1.5rem; }
  body:not(.terrain) .btn-sm { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: .25rem; }
  body:not(.terrain) .btn-link.btn-sm { min-height: 36px; }
  body:not(.terrain) .action-icon,
  body:not(.terrain) .actions-segmented .action-icon { width: 40px; min-width: 40px; height: 40px; }
  body:not(.terrain) .saisie-raccourcis button { min-height: 36px; padding: .35rem .85rem; font-size: 13px; }
}
/* Règles du mot de passe sous le champ (partials/regles_mot_de_passe.php) : grisées tant que
   rien n'est saisi, puis vertes (respectées) ou rouges (manquantes) au fil de la frappe. */
.regles-mdp { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .15rem; font-size: 12.5px; color: var(--text-muted); }
.regles-mdp li { display: flex; align-items: baseline; gap: .35rem; }
.regles-mdp li i { flex: none; font-size: 14px; position: relative; top: 1px; }
.regles-mdp.is-saisi li { color: rgb(var(--danger-rgb)); }
.regles-mdp.is-saisi li.is-ok { color: rgb(var(--success-rgb)); }
.regles-mdp__detail { color: inherit; opacity: .8; }

/* Colonne réservée au téléphone (ex. montant signé du journal bancaire, à la place de Débit / Crédit). */
@media (min-width: 576px) { .col-tel { display: none !important; } }