/* 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. */
.actions-segmented .action-icon {
  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; }
}

/* --- Tableau de bord : accès rapide ------------------------------------- */
.acces-rapide { display: flex; flex-wrap: wrap; gap: 10px; }
.acces-rapide__item {
    display: flex; align-items: center; gap: 8px; padding: 10px 14px;
    border: 1px solid var(--border); border-radius: var(--radius);
    color: var(--text); text-decoration: none; background: var(--surface);
    font-size: 13px; font-weight: 500;
    transition: border-color .15s, box-shadow .15s, transform .15s, color .15s;
}
.acces-rapide__item i { font-size: 18px; color: var(--primary); }
.acces-rapide__item:hover {
    border-color: var(--primary); color: var(--primary);
    box-shadow: 0 6px 16px -6px rgba(var(--primary-rgb), .5);
    transform: translateY(-1px);
}
.acces-rapide__item--dev i { color: var(--accent); }

/* --- 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 */
.ligne-marche { box-shadow: inset 3px 0 0 var(--marche-couleur, transparent); }

/* 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-filtres .form-select-sm { min-width: 150px; }

/* --- 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; }
  .acces-rapide__item:hover { transform: none; }
  .dashboard-widget.is-dragging > .card { transform: none; }
  .kanban__compteur.is-pulse { animation: none; }
  .galerie__item:hover .galerie__lien img { transform: none; }
}