/* 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); }
.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); }
  .dashboard-widget { grid-column: span 4 !important; }
}
.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;
}
@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; }
.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; }

/* --- 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: 1rem; overflow-x: auto; padding-bottom: 1rem;
  scroll-snap-type: x proximity; -webkit-user-select: none; user-select: none;
}
.kanban__colonne {
  flex: 0 0 290px; display: flex; flex-direction: column; max-height: calc(100vh - 230px);
  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; }
.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; }

@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; }
.aff-item__etape.is-validee { color: #1b7a43; font-weight: 600; }
.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 carte par chantier -- */
.vue-cartes .aff-groupe__items {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .6rem;
}
.vue-cartes .aff-entete { display: none; }
.vue-cartes .aff-item {
  display: grid; grid-template-columns: 1fr 1fr; gap: .45rem .7rem;
  padding: .7rem .85rem; background: var(--surface); border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(3, 27, 78, .06); border-left: 4px solid var(--marche);
}
.vue-cartes .aff-item:hover { box-shadow: var(--shadow-card-hover); }
.vue-cartes .aff-item__coul { display: none; }
.vue-cartes .aff-item > span[data-label] { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vue-cartes .aff-item > span[data-label]:not(.aff-item__num)::before {
  content: attr(data-label); display: block; font-size: 10.5px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .03em; margin-bottom: 1px;
}
.vue-cartes .aff-item__num { grid-column: 1 / -1; font-weight: 700; font-size: 15px; }
.vue-cartes .aff-item__adresse { grid-column: 1 / -1; white-space: normal; }
.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 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;
}
.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; }
.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); }
/* 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; }
.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; } }
.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; } }
.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); }