/* TRACE — composants.css : navigation, tableaux, pastilles, formulaires, fil de messages, carte.
   Aucune couleur en dur : tout vient de jetons.css. */

/* ---------- Marque ---------- */
.marque {
  display: inline-flex;
  align-items: baseline;
  gap: var(--pas-2);
  color: var(--texte);
  text-decoration: none;
}
.marque:hover { text-decoration: none; }
.marque-nom { font-size: var(--taille-marque); font-weight: var(--graisse-grasse); letter-spacing: .08em; }
.marque-sous-titre { font-size: var(--taille-secondaire); color: var(--texte-doux); }
.barre .marque { color: var(--nav-texte); flex-direction: column; align-items: flex-start; gap: 0; padding-left: calc(var(--pas-6) + var(--pas-3)); position: relative; }
.barre .marque::before { content: ""; position: absolute; left: 0; top: 50%; width: var(--pas-6); height: var(--pas-6); margin-top: calc(var(--pas-6) / -2); border-radius: var(--rayon-petit); background: var(--marque-soleil); }
.barre .marque-sous-titre { color: var(--nav-texte-doux); font-size: var(--taille-petite); }
.marque-grande .marque-nom { font-size: var(--taille-chiffre-tuile); }

/* ---------- Barre latérale et navigation ---------- */
.barre-marque {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--hauteur-entete);
  padding: 0 var(--pas-4);
  border-bottom: 1px solid var(--nav-filet);
  flex: none;
}
.barre-replier { color: var(--nav-texte-doux); display: inline-flex; padding: var(--pas); border-radius: var(--rayon-petit); }
.barre-replier:hover { background: var(--nav-actif); }
.barre-corps { flex: 1 1 auto; padding: var(--pas-2) 0; }
.barre-pied { flex: none; border-top: 1px solid var(--nav-filet); padding: var(--pas-3) var(--pas-4); display: flex; flex-direction: column; gap: var(--pas-2); }

.nav-groupe { padding: var(--pas-2) 0; }
.nav-groupe-titre {
  padding: var(--pas) var(--pas-4);
  font-size: var(--taille-petite);
  font-weight: var(--graisse-grasse);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--nav-texte-doux);
}
.nav-lien {
  display: flex;
  align-items: center;
  gap: var(--pas-3);
  height: calc(var(--hauteur-ligne) - var(--pas-2));
  padding: 0 var(--pas-4);
  color: var(--nav-texte);
  white-space: nowrap;
  border-left: 3px solid var(--nav-fond);
}
.nav-lien:hover { background: var(--nav-actif); text-decoration: none; }
.nav-lien.est-actif { background: var(--nav-actif); color: var(--nav-texte); border-left-color: var(--marque-soleil); font-weight: var(--graisse-grasse); }
.nav-lien .icone { color: var(--nav-texte-doux); }
.nav-lien.est-actif .icone { color: var(--nav-texte); }
.nav-libelle { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav-compteur {
  font-size: var(--taille-petite);
  font-weight: var(--graisse-grasse);
  font-variant-numeric: tabular-nums;
  padding: 0 var(--pas-2);
  border-radius: var(--rayon-pastille);
  background: var(--nav-compteur);
  color: var(--nav-texte);
  min-width: 22px;
  text-align: center;
  line-height: 18px;
}
.nav-compteur.est-alerte { background: var(--alerte); color: var(--surface); }
.barre-pied .personne { color: var(--nav-texte); }
.barre-deconnexion.secondaire { color: var(--nav-texte-doux); }

/* Barre repliée : icônes seules */
.app.est-repliee .marque-nom, .app.est-repliee .marque-sous-titre,
.app.est-repliee .nav-groupe-titre, .app.est-repliee .nav-libelle,
.app.est-repliee .nav-compteur, .app.est-repliee .barre-pied .personne-nom,
.app.est-repliee .barre-deconnexion { display: none; }
.app.est-repliee .barre-marque { justify-content: center; padding: 0; }
.app.est-repliee .nav-lien { justify-content: center; padding: 0; }
.app.est-repliee .barre-pied { align-items: center; }

/* ---------- Fil d'Ariane ---------- */
.fil-ariane-liste { display: flex; align-items: center; gap: var(--pas-2); overflow: hidden; white-space: nowrap; color: var(--texte-doux); font-size: var(--taille-secondaire); }
.fil-ariane-liste li { display: flex; align-items: center; gap: var(--pas-2); min-width: 0; }
.fil-ariane-liste li + li::before { content: "›"; color: var(--texte-faible); }
.fil-ariane-liste li:last-child { color: var(--texte); font-weight: var(--graisse-moyenne); overflow: hidden; text-overflow: ellipsis; }

/* ---------- Recherche unique ---------- */
.recherche { position: relative; display: flex; align-items: center; min-width: 0; }
.recherche .icone { position: absolute; left: var(--pas-2); color: var(--texte-faible); pointer-events: none; }
.recherche-champ { padding-left: calc(var(--taille-icone) + var(--pas-3)); padding-right: 104px; }
.recherche-bouton { position: absolute; right: 0; height: 100%; padding: 0 var(--pas-3); color: var(--accent); font-size: var(--taille-secondaire); font-weight: var(--graisse-moyenne); }

/* ---------- Personne ---------- */
.personne { display: inline-flex; align-items: center; gap: var(--pas-2); min-width: 0; }
.personne-initiales {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: none;
  border-radius: var(--rayon-pastille);
  background: var(--accent-clair);
  color: var(--accent-fonce);
  font-size: var(--taille-petite);
  font-weight: var(--graisse-grasse);
}
.personne-nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Pastilles ---------- */
.pastille {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 var(--pas-2);
  border-radius: var(--rayon-pastille);
  font-size: var(--taille-petite);
  font-weight: var(--graisse-moyenne);
  white-space: nowrap;
  line-height: 1;
  background: var(--neutre-fond); color: var(--neutre);
}
/* La couleur suit la famille de l'état, donnée de la configuration (etats_modele.py, D-TRACE-A9-HUIT-ETATS) : un état
   renommé ou ajouté dans l'outil prend la couleur de sa famille, sans toucher à cette feuille. */
.pastille-etat[data-famille="prendre"] { background: var(--info-fond); color: var(--info); }
.pastille-etat[data-famille="mouvement"] { background: var(--accent-clair); color: var(--accent-fonce); }
.pastille-etat[data-famille="bloque"] { background: var(--neutre-fond); color: var(--neutre); box-shadow: inset 0 0 0 1px var(--bordure-forte); }
.pastille-etat[data-famille="surveiller"] { background: var(--surveiller-fond); color: var(--surveiller); border-left: 3px solid var(--alerte); border-radius: var(--rayon-petit) var(--rayon-pastille) var(--rayon-pastille) var(--rayon-petit); }
.pastille-etat[data-famille="fini"] { background: var(--ok-fond); color: var(--ok); }
.pastille-etat[data-famille="ferme"] { background: var(--neutre-fond); color: var(--neutre); }
.pastille-retard { background: var(--alerte-fond); color: var(--alerte); }

.pastille-priorite { font-family: var(--police-chiffres); font-weight: var(--graisse-grasse); min-width: 30px; justify-content: center; }
.pastille-priorite[data-priorite="p1"] { background: var(--alerte-fond); color: var(--alerte); }
.pastille-priorite[data-priorite="p2"] { background: var(--attention-fond); color: var(--attention); }
.pastille-priorite[data-priorite="p3"] { background: var(--neutre-fond); color: var(--neutre); }
.pastille-priorite[data-priorite="p4"] { background: var(--info-fond); color: var(--info); }

.pastille-vip { background: var(--attention-fond); color: var(--attention); letter-spacing: .04em; }
.pastille-nombre { font-variant-numeric: tabular-nums; }

/* ---------- Valeurs absentes, horodatage ---------- */
.absent { color: var(--texte-faible); }
.horodatage { white-space: nowrap; }
.mot-alerte { color: var(--alerte); font-weight: var(--graisse-moyenne); }

/* ---------- Tableaux denses ---------- */
/* Disposition fixe : les largeurs viennent des en-têtes (classes c-…), le contenu se tronque ou se replie
   dans sa colonne, et le tableau ne déborde jamais de son cadre — aucun défilement horizontal. */
.tableau-cadre { width: 100%; min-width: 0; }
.tableau { width: 100%; table-layout: fixed; font-size: var(--taille-texte); }
.tableau th {
  position: sticky; top: var(--hauteur-entete);
  height: var(--pas-8);
  padding: 0 var(--pas-2);
  background: var(--surface-2);
  color: var(--texte-doux);
  font-size: var(--taille-secondaire);
  border-bottom: 1px solid var(--bordure);
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  z-index: 1;
}
.tableau td {
  height: var(--hauteur-ligne);
  padding: 0 var(--pas-2);
  border-bottom: 1px solid var(--bordure);
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tableau td.texte-long, .tableau td.cellule-secondaire, .tableau td.replie { white-space: normal; overflow-wrap: break-word; line-height: var(--interligne-serre); }
.tableau td.replie .pastille { margin: 1px 0; height: 18px; }
.deux-lignes { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tableau tr:hover td { background: var(--surface-2); }
.tableau .chiffre, .tableau .a-droite { text-align: right; }
.tableau .ref { font-family: var(--police-chiffres); font-variant-numeric: tabular-nums; font-weight: var(--graisse-moyenne); }
.tableau .cellule-secondaire { color: var(--texte-doux); font-size: var(--taille-secondaire); }
.tableau th[data-tri] { cursor: pointer; }
.tableau th[data-tri]:hover { color: var(--texte); }
.tableau .actions { display: inline-flex; gap: var(--pas-3); }
.tableau .personne { max-width: 100%; }

/* Colonnes : une largeur par nature de contenu */
.c-ref { width: 92px; }
.c-site, .c-client { width: 17%; }
.c-site-client { width: 21%; }
.c-etat { width: 168px; }
.c-prio { width: 64px; }
.c-personne { width: 168px; }
.c-detail { width: 22%; }
.tableau td.empile a, .tableau td.empile .empile-second { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tableau td.empile .empile-second { font-size: var(--taille-secondaire); color: var(--texte-doux); line-height: var(--interligne-serre); }
.tableau td.empile .empile-second a { display: inline; }
/* souple : la première ligne peut prendre deux lignes avant les points de suspension — les noms longs de clients,
   de types de projet et de plateformes ne se coupent pas à la moitié d'un mot */
.tableau td.souple { white-space: normal; overflow-wrap: anywhere; line-height: var(--interligne-serre); }
.tableau td.empile-souple .empile-premier, .tableau td.empile-souple > a { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: var(--interligne-serre); }
.tableau td.empile .pastille-vip { height: 16px; font-size: 10px; vertical-align: middle; }
.c-date { width: 104px; }
.c-nombre { width: 104px; }
.c-court { width: 12%; }
.c-retard { width: 150px; }
.c-actions { width: 224px; }

/* ---------- Blocs de page ---------- */
.page-entete { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--pas-4); margin-bottom: var(--pas-4); flex-wrap: wrap; }
.page-titre { display: flex; align-items: baseline; gap: var(--pas-3); flex-wrap: wrap; }
.page-sous-titre { color: var(--texte-doux); font-size: var(--taille-secondaire); }

.bloc { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon-carte); margin-bottom: var(--pas-4); box-shadow: var(--ombre-carte); }
.bloc-entete { display: flex; align-items: baseline; gap: var(--pas-3); padding: var(--pas-3) var(--pas-4); border-bottom: 1px solid var(--bordure); flex-wrap: wrap; }
.bloc-entete h2 { display: flex; align-items: baseline; gap: var(--pas-2); }
.bloc-total { font-family: var(--police-chiffres); font-variant-numeric: tabular-nums; font-size: var(--taille-titre-section); color: var(--texte-doux); font-weight: var(--graisse-grasse); }
.bloc-population { flex: 1 1 auto; color: var(--texte-doux); font-size: var(--taille-secondaire); min-width: 200px; }
.bloc-lien { font-size: var(--taille-secondaire); white-space: nowrap; }
.bloc.est-grave .bloc-entete h2 { color: var(--alerte); }
.bloc.est-vide .bloc-entete { border-bottom: 0; }
.bloc.est-vide .bloc-total { color: var(--texte-faible); }
.bloc-sous-entete { display: flex; align-items: baseline; gap: var(--pas-2); padding: var(--pas-2) var(--pas-4); background: var(--surface-2); border-bottom: 1px solid var(--bordure); font-size: var(--taille-secondaire); color: var(--texte-doux); }
.bloc-sous-entete strong { color: var(--texte); }
.bloc-reste { display: flex; justify-content: flex-end; padding: var(--pas-2) var(--pas-4); font-size: var(--taille-secondaire); }

/* ---------- Tuiles de synthèse ---------- */
.tuiles { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: var(--pas-2); margin-bottom: var(--pas-4); }
.tuile {
  display: flex; flex-direction: column; gap: var(--pas);
  padding: var(--pas-2) var(--pas-3);
  background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon);
  color: var(--texte); min-width: 0;
}
a.tuile:hover { text-decoration: none; border-color: var(--bordure-forte); }
.tuile-n { font-family: var(--police-chiffres); font-variant-numeric: tabular-nums; font-size: var(--taille-chiffre-tuile); font-weight: var(--graisse-grasse); line-height: 1; }
.tuile-libelle { font-size: var(--taille-petite); color: var(--texte-doux); line-height: var(--interligne-serre); }
.tuile.est-vide .tuile-n { color: var(--texte-faible); }
.tuile.est-grave .tuile-n { color: var(--alerte); }

/* ---------- Bandeaux ---------- */
.bandeau { display: flex; gap: var(--pas-3); align-items: flex-start; padding: var(--pas-3) var(--pas-4); border-radius: var(--rayon); margin-bottom: var(--pas-4); border: 1px solid var(--bordure); }
.bandeau-ok { background: var(--ok-fond); border-color: var(--ok-fond); color: var(--ok); }
.bandeau-alerte { background: var(--alerte-fond); border-color: var(--alerte-fond); color: var(--alerte); }
.bandeau-attention { background: var(--attention-fond); border-color: var(--attention-fond); color: var(--attention); }
.bandeau p { color: var(--texte); }
.bandeau strong { display: block; }

/* ---------- Sélecteur segmenté ---------- */
.segments { display: inline-flex; border: 1px solid var(--bordure-forte); border-radius: var(--rayon-petit); overflow: hidden; }
.segments a { padding: 0 var(--pas-3); height: calc(var(--hauteur-champ) - var(--pas)); display: inline-flex; align-items: center; color: var(--texte-doux); font-size: var(--taille-secondaire); font-weight: var(--graisse-moyenne); }
.segments a + a { border-left: 1px solid var(--bordure-forte); }
.segments a:hover { text-decoration: none; background: var(--surface-2); }
.segments a.est-actif { background: var(--accent); color: var(--texte-inverse); }

/* ---------- État vide ---------- */
.vide { padding: var(--pas-4); display: flex; flex-direction: column; gap: var(--pas); }
.vide-titre { font-weight: var(--graisse-grasse); }
.vide-detail { color: var(--texte-doux); font-size: var(--taille-secondaire); }
.vide-action { font-size: var(--taille-secondaire); align-self: flex-start; }
.bloc .vide { padding: var(--pas-3) var(--pas-4); }

/* ---------- Pagination ---------- */
.pagination { display: flex; align-items: center; gap: var(--pas-3); padding: var(--pas-2) var(--pas-4); font-size: var(--taille-secondaire); color: var(--texte-doux); }
.pagination-info { flex: 1 1 auto; }

/* ---------- Connexion ---------- */
.connexion { width: 100%; display: flex; justify-content: center; padding: var(--pas-8) 0; }
.connexion-carte { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); box-shadow: var(--ombre); padding: var(--pas-8); display: flex; flex-direction: column; gap: var(--pas-4); }
.connexion-sous-titre { color: var(--texte-doux); }
.connexion-erreur { color: var(--alerte); font-size: var(--taille-secondaire); }
.connexion-note { color: var(--texte-faible); font-size: var(--taille-secondaire); }

/* ---------- Le terrain, dans WhatsApp : fil de messages et cadre de téléphone ---------- */
.telephone {
  width: var(--telephone-largeur);
  height: var(--telephone-hauteur);
  max-width: 100%;
  display: flex; flex-direction: column;
  border: 8px solid var(--texte);
  border-radius: var(--telephone-rayon);
  background: var(--bulle-fond);
  overflow: hidden;
  box-shadow: var(--ombre-panneau);
}
.telephone-encoche { flex: none; height: var(--pas-6); background: var(--surface); }
.telephone-entete { flex: none; display: flex; flex-direction: column; padding: var(--pas-2) var(--pas-4); background: var(--surface); border-bottom: 1px solid var(--bordure); }
.telephone-titre { font-weight: var(--graisse-grasse); }
.telephone-sous-titre { font-size: var(--taille-petite); color: var(--texte-doux); }
.telephone-ecran { flex: 1 1 auto; overflow-y: auto; padding: var(--pas-3); }
.telephone-saisie { flex: none; padding: var(--pas-2) var(--pas-3); background: var(--surface); border-top: 1px solid var(--bordure); }
.telephone-saisie-champ { display: block; height: var(--hauteur-champ); line-height: var(--hauteur-champ); padding: 0 var(--pas-3); border-radius: var(--rayon-pastille); background: var(--surface-2); color: var(--texte-faible); font-size: var(--taille-secondaire); }

.fil { display: flex; flex-direction: column; gap: var(--pas-2); }
.bulle { max-width: 86%; display: flex; flex-direction: column; gap: var(--pas); padding: var(--pas-2) var(--pas-3); border-radius: var(--bulle-rayon); box-shadow: var(--ombre); font-size: var(--taille-texte); }
.bulle.est-entrant { align-self: flex-start; background: var(--bulle-entrante); border-bottom-left-radius: var(--rayon-petit); }
.bulle.est-sortant { align-self: flex-end; background: var(--bulle-sortante); border-bottom-right-radius: var(--rayon-petit); }
.bulle-expediteur { font-size: var(--taille-petite); font-weight: var(--graisse-grasse); color: var(--accent-fonce); }
.bulle-texte { white-space: pre-wrap; overflow-wrap: anywhere; }
.bulle-heure { align-self: flex-end; font-size: var(--taille-petite); color: var(--texte-faible); }
.bulle-boutons { display: flex; flex-direction: column; gap: var(--pas); margin-top: var(--pas); }
.bulle-bouton { height: var(--hauteur-champ); border: 1px solid var(--accent); border-radius: var(--rayon-petit); color: var(--accent); background: var(--surface); font-weight: var(--graisse-moyenne); }
.bulle-liste { margin-top: var(--pas); border: 1px solid var(--bordure); border-radius: var(--rayon-petit); background: var(--surface); }
.bulle-liste-titre { padding: var(--pas-2) var(--pas-3); font-weight: var(--graisse-grasse); border-bottom: 1px solid var(--bordure); color: var(--accent); }
.bulle-liste-section { padding: var(--pas) var(--pas-3); font-size: var(--taille-petite); text-transform: uppercase; letter-spacing: .04em; color: var(--texte-faible); background: var(--surface-2); }
.bulle-liste-entree { display: flex; flex-direction: column; padding: var(--pas-2) var(--pas-3); border-top: 1px solid var(--bordure); }
.bulle-liste-entree-titre { font-weight: var(--graisse-moyenne); }
.bulle-liste-entree-description { font-size: var(--taille-petite); color: var(--texte-doux); }
.photo { display: flex; flex-direction: column; gap: var(--pas); }
.photo-cadre { width: 100%; aspect-ratio: 4 / 3; background: var(--photo-cadre); border-radius: var(--rayon-petit); }
.photo figcaption { font-size: var(--taille-petite); color: var(--texte-doux); }

/* ---------- Filtres d'une liste ou de la carte ---------- */
.filtres { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--pas-2) var(--pas-3); margin-bottom: var(--pas-4); padding: var(--pas-3) var(--pas-4); background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); }
.filtres .segments { align-self: flex-end; }
.filtre { display: flex; flex-direction: column; min-width: 0; }
.filtre .etiquette { margin-bottom: 2px; }
.filtre .champ { width: auto; min-width: 140px; max-width: 220px; }
.filtre-court .champ { min-width: 80px; }
.filtre-recherche .champ { min-width: 200px; }
.filtres-appliquer { align-self: flex-end; }
html.js .filtres-appliquer { display: none; }
.filtres-champs { display: contents; }
.filtres-bascule { display: none; }
.affiche-640, .tableau td.empile .empile-second.affiche-640 { display: none; }
.empile-liste { display: flex; flex-direction: column; }
.filtres-effacer { align-self: flex-end; font-size: var(--taille-secondaire); line-height: var(--hauteur-champ); }
.segments a { gap: var(--pas-2); }
.segment-n { font-family: var(--police-chiffres); font-variant-numeric: tabular-nums; font-weight: var(--graisse-grasse); }
.segments-defilants { max-width: 100%; overflow-x: auto; margin-bottom: var(--pas-4); }
.segments-defilants a { white-space: nowrap; }
.page-actions { display: flex; flex-wrap: wrap; gap: var(--pas-2); align-items: center; }
.page-note { margin: calc(var(--pas-4) * -1) 0 var(--pas-4); color: var(--texte-doux); font-size: var(--taille-secondaire); }
.carte-classe-active { margin: calc(var(--pas-2) * -1) 0 var(--pas-4); font-size: var(--taille-secondaire); color: var(--texte-doux); }

/* ---------- Fiches : listes de définitions, notes, frise, QR ---------- */
.fiche-entete .page-titre { flex-direction: column; align-items: flex-start; gap: var(--pas); }
.fiche-sous-titre { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pas); color: var(--texte-doux); font-size: var(--taille-secondaire); }
.fiche-liste { display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr); gap: var(--pas-2) var(--pas-3); padding: var(--pas-3) var(--pas-4); }
.fiche-liste dt { color: var(--texte-doux); font-size: var(--taille-secondaire); line-height: var(--interligne); }
.fiche-liste dd { min-width: 0; overflow-wrap: anywhere; }
.fiche-liste dd .pastille { vertical-align: middle; }
.fiche-liste-deux { grid-template-columns: minmax(120px, 22%) minmax(0, 1fr); }
.fiche-liste-serree { padding: var(--pas-2) 0; gap: var(--pas) var(--pas-3); }
.fiche-action { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--pas-2); align-items: center; }
.bloc-note { padding: var(--pas-2) var(--pas-4) var(--pas-3); color: var(--texte-doux); font-size: var(--taille-secondaire); }
.bloc-note-attention { color: var(--attention); }
.liste-simple { display: flex; flex-direction: column; gap: var(--pas); }
.bloc > .liste-simple { padding: var(--pas-3) var(--pas-4); }
.liste-refs { display: flex; flex-direction: column; gap: 2px; }
.icone-texte { display: inline-block; vertical-align: -5px; margin-right: var(--pas); }
.mot-attention { color: var(--attention); font-weight: var(--graisse-moyenne); }
.aide { display: inline-flex; color: var(--texte-faible); vertical-align: middle; }
.aide:hover { color: var(--accent); }
.aide-texte { margin-top: var(--pas); padding: var(--pas-2) var(--pas-3); background: var(--surface-2); border-radius: var(--rayon-petit); font-size: var(--taille-secondaire); color: var(--texte-doux); }
.tuiles-fiche { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tuiles-quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tuiles-import { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tuile-mot { font-weight: var(--graisse-grasse); font-size: var(--taille-titre-section); line-height: var(--interligne-serre); }
.tuile.est-attention .tuile-n, .tuile.est-attention .tuile-mot { color: var(--attention); }
.tuile.est-grave .tuile-mot { color: var(--alerte); }
.tuile .tuile-mot[data-preventif="a_jour"], .tuile .tuile-mot[data-couverture="en_cours"] { color: var(--ok); }
.tuile .tuile-mot[data-preventif="sous_30_j"], .tuile .tuile-mot[data-couverture="fin_sous_90_j"] { color: var(--attention); }
.tuile .tuile-mot[data-preventif="sans_plan"], .tuile .tuile-mot[data-couverture="non_renseignee"] { color: var(--texte-faible); }

.liste-controle { display: flex; flex-direction: column; padding: var(--pas-2) var(--pas-4); }
.liste-controle li { display: grid; grid-template-columns: var(--taille-icone) minmax(0, 1fr) auto; align-items: center; column-gap: var(--pas-2); min-height: var(--hauteur-ligne); padding: var(--pas) 0; border-bottom: 1px solid var(--bordure); font-size: var(--taille-secondaire); }
.liste-controle li:last-child { border-bottom: 0; }
.liste-controle-libelle { font-size: var(--taille-texte); }
.liste-controle-detail { grid-column: 2 / -1; }
.liste-controle li.est-present .icone { color: var(--ok); }
.liste-controle li.est-absent .icone { color: var(--attention); }
.liste-controle li.est-absent .liste-controle-libelle { color: var(--texte-doux); }

.frise { position: relative; padding: var(--pas-3) var(--pas-4) var(--pas-3) calc(var(--pas-4) + 108px); }
.frise::before { content: ""; position: absolute; left: calc(var(--pas-4) + 100px); top: var(--pas-3); bottom: var(--pas-3); border-left: 2px solid var(--frise-trait); }
.frise-evenement { position: relative; display: flex; flex-direction: column; padding: var(--pas) 0 var(--pas) var(--pas-4); min-height: var(--pas-8); }
.frise-evenement::before { content: ""; position: absolute; left: -13px; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--bordure-forte); }
.frise-evenement[data-type="curatif"]::before { background: var(--carte-ticket-ouvert); }
.frise-evenement[data-type="visite_preventive"]::before { background: var(--ok); }
.frise-evenement[data-type="remplacement"]::before { background: var(--info); }
.frise-evenement[data-type="mise_en_service"]::before, .frise-evenement[data-type="entree_sav"]::before { background: var(--texte); }
.frise-evenement.est-a-venir::before { background: var(--surface); border-color: var(--texte-faible); border-style: dashed; }
.frise-evenement.est-a-venir .frise-type { color: var(--texte-doux); }
.frise-date { position: absolute; right: calc(100% + var(--pas-4)); top: var(--pas); width: 100px; text-align: right; font-size: var(--taille-secondaire); color: var(--texte-doux); white-space: nowrap; }
.frise-type { line-height: var(--interligne); }

.qr { display: flex; gap: var(--pas-4); align-items: flex-start; padding: var(--pas-3) var(--pas-4); }
.qr-cadre { flex: none; width: var(--qr-taille); height: var(--qr-taille); background: var(--qr-cadre); border-radius: var(--rayon-petit); }
.qr figcaption { font-size: var(--taille-secondaire); line-height: var(--interligne); overflow-wrap: anywhere; }

/* ---------- Résultats de recherche (E36) ---------- */
.resultats { display: flex; flex-direction: column; }
.resultat { display: flex; flex-direction: column; gap: 2px; padding: var(--pas-2) var(--pas-4); border-bottom: 1px solid var(--bordure); min-height: var(--hauteur-ligne); justify-content: center; }
.resultat:last-child { border-bottom: 0; }
.resultat-titre { font-weight: var(--graisse-moyenne); }
.resultat-detail { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pas); font-size: var(--taille-secondaire); color: var(--texte-doux); }

/* ---------- Pastilles du référentiel ---------- */
.pastille-regime[data-regime="garantie_incluse"] { background: var(--ok-fond); color: var(--ok); }
.pastille-regime[data-regime="contrat_vendu"] { background: var(--accent-clair); color: var(--accent-fonce); }
.pastille-regime[data-regime="hors_contrat"] { background: var(--neutre-fond); color: var(--neutre); }
.pastille-situation[data-situation="urgence"] { background: var(--alerte-fond); color: var(--alerte); }
.pastille-situation[data-situation="monitoring_muet"] { background: var(--info-fond); color: var(--info); }
.pastille-situation[data-situation="ticket_ouvert"] { background: var(--attention-fond); color: var(--attention); }
.pastille-situation[data-situation="preventif_echu"] { background: var(--accent-clair); color: var(--accent-fonce); }
.pastille-situation[data-situation="inconnu"] { background: var(--neutre-fond); color: var(--neutre); }
.pastille-situation[data-situation="rien_a_signaler"] { background: var(--ok-fond); color: var(--ok); }
.pastille-couverture[data-couverture="en_cours"], .pastille-garantie[data-garantie="en_cours"], .pastille-visite[data-visite="faite"], .pastille-visite[data-visite="a_jour"], .pastille-actif, .pastille-habilite { background: var(--ok-fond); color: var(--ok); }
.pastille-couverture[data-couverture="fin_sous_90_j"], .pastille-visite[data-visite="sous_30_j"], .pastille-visite[data-visite="passee_sans_statut"], .pastille-vip-echu { background: var(--attention-fond); color: var(--attention); }
.pastille-couverture[data-couverture="echue"], .pastille-garantie[data-garantie="expiree"], .pastille-visite[data-visite="en_retard"] { background: var(--alerte-fond); color: var(--alerte); }
.pastille-etape[data-etape="sav"] { background: var(--ok-fond); color: var(--ok); }
.pastille-etape[data-etape="post_garantie"] { background: var(--neutre-fond); color: var(--neutre); }
.pastille-etape[data-etape="en_chantier"], .pastille-chantier { background: var(--attention-fond); color: var(--attention); }
.pastille-guidabilite[data-guidabilite="oui"] { background: var(--ok-fond); color: var(--ok); }
.pastille-guidabilite[data-guidabilite="non"] { background: var(--alerte-fond); color: var(--alerte); }
.pastille-criticite[data-criticite="critique"] { background: var(--alerte-fond); color: var(--alerte); }
.pastille-criticite[data-criticite="sensible"] { background: var(--attention-fond); color: var(--attention); }
.pastille-non-branche, .pastille-systeme[data-systeme="non_branche"] { background: var(--attention-fond); color: var(--attention); }
.pastille-systeme[data-systeme="ok"] { background: var(--ok-fond); color: var(--ok); }
.pastille-systeme[data-systeme="erreur"] { background: var(--alerte-fond); color: var(--alerte); }
.pastille-role[data-role="responsable_sav"] { background: var(--accent-clair); color: var(--accent-fonce); }
.pastille-role[data-role="direction"] { background: var(--info-fond); color: var(--info); }
.pastille-astreinte { background: var(--info-fond); color: var(--info); }
.pastille-manque { background: var(--attention-fond); color: var(--attention); }
.pastille[data-reclamation="ouverte"] { background: var(--alerte-fond); color: var(--alerte); }
.pastille[data-fusion="non_decidee"] { background: var(--attention-fond); color: var(--attention); }
.tableau tr.est-inactif td { color: var(--texte-faible); }
.tableau tr.est-inactif .personne-initiales { background: var(--neutre-fond); color: var(--texte-faible); }

/* La précision d'une position, dans la forme même du point */
.precision { display: inline-flex; vertical-align: -3px; color: var(--texte-doux); }
.precision-glyphe { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.precision-glyphe .precision-anneau { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-dasharray: 2 1.5; }
.precision-glyphe .precision-vide { fill: var(--surface); stroke: currentColor; stroke-width: 2; }
.precision-glyphe .precision-trait { fill: none; stroke: currentColor; stroke-width: 2; }
.precision[data-precision="a_verifier"] { color: var(--attention); }
.precision[data-precision="absente"] { color: var(--texte-faible); }
.c-site-liste { width: 19%; }
.c-client-liste { width: 12%; }
.c-projet { width: 11%; }
.c-installation { width: 13%; }
.c-couverture { width: 150px; }
.c-situation { width: 126px; }
.c-dernier { width: 104px; }
.c-monitoring { width: 11%; }
.c-vip { width: 150px; }
.c-contact { width: 18%; }
.c-serie { width: 150px; }
.c-garantie { width: 132px; }
.c-famille { width: 15%; }
.c-etape { width: 132px; }
.c-notion { width: 116px; }
.c-pastille { width: 112px; }
.c-personne-large { width: 30%; }
.c-rapport { width: 128px; }
.c-manque { width: 176px; }
.c-telephone { width: 150px; }
.c-astreinte { width: 150px; }
.c-habilitation { width: 176px; }
.c-etat-court { width: 120px; }
.c-resultat { width: 20%; }
.tableau .c-titre { min-width: 120px; }
.c-contenu { width: 30%; }
.c-frequence { width: 150px; }
.sans-client .c-site-liste { width: 34%; }
.sans-client .masque-fiche { display: none; }
.sans-client .c-personne { width: 156px; }
.sans-client .c-site-client { width: 20%; }
.grille-empilee .grille-principal, .grille-empilee .grille-panneau { grid-column: span 12; }

/* ---------- Carte des sites (E37) ---------- */
.carte-disposition { display: grid; grid-template-columns: minmax(0, 1fr) var(--largeur-panneau); gap: var(--gouttiere); align-items: start; }
.carte-scene { min-width: 0; }
.carte-svg { width: 100%; background: var(--carte-mer); border: 1px solid var(--bordure); border-radius: var(--rayon); display: block; }
.carte-vue-ile { height: var(--carte-hauteur-ile); }
.carte-vue-tana { height: auto; aspect-ratio: 1 / 1; max-height: var(--carte-largeur-tana); }
.carte-terre { fill: var(--carte-terre); stroke: var(--carte-cote); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.carte-repere { fill: var(--carte-repere); font-family: var(--police); pointer-events: none; paint-order: stroke; stroke: var(--carte-mer); stroke-width: 3px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.carte-echelle { stroke: var(--carte-repere); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.carte-echelle-texte { fill: var(--carte-repere); font-family: var(--police); }
.carte-hors-vue { margin-top: var(--pas-2); font-size: var(--taille-secondaire); color: var(--texte-doux); }

/* Un point : la couleur est une variable posée par data-couleur, la forme par la précision */
.carte-point, .carte-swatch { --c: var(--carte-autres); }
.carte-point[data-couleur="urgence"], .carte-swatch[data-couleur="urgence"] { --c: var(--carte-urgence); }
.carte-point[data-couleur="monitoring_muet"], .carte-swatch[data-couleur="monitoring_muet"] { --c: var(--carte-monitoring-muet); }
.carte-point[data-couleur="ticket_ouvert"], .carte-swatch[data-couleur="ticket_ouvert"] { --c: var(--carte-ticket-ouvert); }
.carte-point[data-couleur="preventif_echu"], .carte-swatch[data-couleur="preventif_echu"] { --c: var(--carte-preventif-echu); }
.carte-point[data-couleur="inconnu"], .carte-swatch[data-couleur="inconnu"] { --c: var(--carte-inconnu); }
.carte-point[data-couleur="rien_a_signaler"], .carte-swatch[data-couleur="rien_a_signaler"] { --c: var(--carte-rien-a-signaler); }
.carte-point[data-couleur="ok"], .carte-swatch[data-couleur="ok"] { --c: var(--carte-ok); }
.carte-point[data-couleur="attention"], .carte-swatch[data-couleur="attention"] { --c: var(--carte-attention); }
.carte-point[data-couleur="alerte"], .carte-swatch[data-couleur="alerte"] { --c: var(--carte-alerte); }
.carte-point[data-couleur="cat-1"], .carte-swatch[data-couleur="cat-1"] { --c: var(--carte-cat-1); }
.carte-point[data-couleur="cat-2"], .carte-swatch[data-couleur="cat-2"] { --c: var(--carte-cat-2); }
.carte-point[data-couleur="cat-3"], .carte-swatch[data-couleur="cat-3"] { --c: var(--carte-cat-3); }
.carte-point[data-couleur="cat-4"], .carte-swatch[data-couleur="cat-4"] { --c: var(--carte-cat-4); }
.carte-point[data-couleur="cat-5"], .carte-swatch[data-couleur="cat-5"] { --c: var(--carte-cat-5); }
.carte-point[data-couleur="cat-6"], .carte-swatch[data-couleur="cat-6"] { --c: var(--carte-cat-6); }
.carte-point[data-couleur="cat-7"], .carte-swatch[data-couleur="cat-7"] { --c: var(--carte-cat-7); }
.carte-point[data-couleur="cat-8"], .carte-swatch[data-couleur="cat-8"] { --c: var(--carte-cat-8); }
.carte-point[data-couleur="age-1"], .carte-swatch[data-couleur="age-1"] { --c: var(--carte-age-1); }
.carte-point[data-couleur="age-2"], .carte-swatch[data-couleur="age-2"] { --c: var(--carte-age-2); }
.carte-point[data-couleur="age-3"], .carte-swatch[data-couleur="age-3"] { --c: var(--carte-age-3); }
.carte-point[data-couleur="age-4"], .carte-swatch[data-couleur="age-4"] { --c: var(--carte-age-4); }
.carte-point[data-couleur="age-5"], .carte-swatch[data-couleur="age-5"] { --c: var(--carte-age-5); }
.carte-point[data-couleur="visite-1"], .carte-swatch[data-couleur="visite-1"] { --c: var(--carte-visite-1); }
.carte-point[data-couleur="visite-2"], .carte-swatch[data-couleur="visite-2"] { --c: var(--carte-visite-2); }
.carte-point[data-couleur="visite-3"], .carte-swatch[data-couleur="visite-3"] { --c: var(--carte-visite-3); }
.carte-point[data-couleur="visite-4"], .carte-swatch[data-couleur="visite-4"] { --c: var(--carte-visite-4); }
.carte-point a { cursor: pointer; }
.carte-disque { fill: var(--c); stroke: var(--carte-lisere); stroke-width: 1px; vector-effect: non-scaling-stroke; transition: r var(--transition); }
.carte-disque.est-commune { fill: var(--carte-lisere); stroke: var(--c); stroke-width: 2px; }
.carte-anneau { fill: none; stroke: var(--c); stroke-width: 1.5px; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; }
.carte-nombre { fill: var(--carte-nombre-sombre); stroke: var(--carte-nombre-halo-clair); stroke-width: 3px; paint-order: stroke; vector-effect: non-scaling-stroke; font-family: var(--police-chiffres); font-weight: var(--graisse-grasse); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.carte-disque.est-commune + .carte-nombre { fill: var(--texte); stroke: var(--surface); }
/* Le nombre d'un point est à l'encre, sauf sur une couleur foncée où il passe en blanc : au moins 4,5:1 dans les deux cas,
   mesuré sur les valeurs des jetons (passe 2 bis) */
.carte-point:is([data-couleur="urgence"], [data-couleur="monitoring_muet"], [data-couleur="preventif_echu"], [data-couleur="ok"], [data-couleur="attention"], [data-couleur="alerte"], [data-couleur="cat-1"], [data-couleur="cat-8"], [data-couleur="age-4"], [data-couleur="age-5"], [data-couleur="visite-1"], [data-couleur="visite-4"]) .carte-disque:not(.est-commune) + .carte-nombre { fill: var(--carte-nombre); stroke: var(--carte-nombre-halo); }
:root[data-theme="dark"] .carte-disque.est-commune { filter: brightness(1.35); }   /* un cercle de commune, plus clair sur le fond sombre */
.carte-symbole-tana .carte-disque { fill-opacity: .9; stroke-width: 2px; }
.carte-point.est-selectionne .carte-disque { stroke: var(--carte-selection); stroke-width: 3px; }
.carte-point.est-en-avant .carte-disque { stroke: var(--carte-selection); stroke-width: 2px; }
.carte-point.est-estompe { opacity: var(--carte-estompe); }
.carte-point:hover .carte-disque { stroke: var(--carte-selection); }

/* Légende, encart, panneau */
.carte-cote { display: flex; flex-direction: column; min-width: 0; }
.carte-legende { padding: var(--pas-2) var(--pas-3); display: flex; flex-direction: column; }
.carte-legende[hidden] { display: none; }
.carte-legende-entree a { display: flex; align-items: center; gap: var(--pas-2); min-height: 28px; padding: 0 var(--pas); border-radius: var(--rayon-petit); color: var(--texte); }
.carte-legende-entree a:hover { background: var(--surface-2); text-decoration: none; }
.carte-legende-entree.est-active a { background: var(--accent-clair); font-weight: var(--graisse-moyenne); }
.carte-legende-entree.est-vide a { color: var(--texte-faible); }
.carte-legende-libelle { flex: 1 1 auto; min-width: 0; font-size: var(--taille-secondaire); }
.carte-legende-n { font-family: var(--police-chiffres); font-variant-numeric: tabular-nums; font-weight: var(--graisse-grasse); color: var(--texte-doux); }
.carte-swatch { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px var(--carte-lisere); display: inline-block; vertical-align: -1px; margin-right: var(--pas); }
.carte-legende-precision { border-top: 1px solid var(--bordure); gap: var(--pas); font-size: var(--taille-secondaire); color: var(--texte-doux); }
.carte-legende-precision li { display: flex; align-items: center; gap: var(--pas-2); }
.carte-encart .liste-simple { padding: var(--pas-2) var(--pas-4) var(--pas-3); }
.carte-panneau-site { padding: var(--pas-3) var(--pas-4); border-bottom: 1px solid var(--bordure); display: flex; flex-direction: column; gap: var(--pas-2); }
.carte-panneau-site:last-child { border-bottom: 0; }
.carte-panneau-liste { list-style: none; margin: 0; padding: 0; }
.carte-panneau-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--pas-3); padding: var(--pas-2) var(--pas-4); border-bottom: 1px solid var(--bordure); align-items: center; }
.carte-panneau-ligne:last-child { border-bottom: 0; }
.carte-panneau-nom { font-weight: 600; grid-column: 1; }
.carte-panneau-ligne > .secondaire { grid-column: 1; font-size: var(--taille-secondaire); }
.carte-panneau-situation { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: var(--taille-secondaire); }
.carte-cas { display: flex; flex-direction: column; gap: 2px; }
.carte-cas li { display: flex; align-items: baseline; gap: var(--pas); flex-wrap: wrap; }
.carte-panneau-liens { display: flex; flex-wrap: wrap; gap: var(--pas-2); }

/* ---------- Points de rupture des composants ---------- */
@container app (max-width: 1280px) {
  .tuiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tuiles-fiche, .tuiles-quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tuiles-import { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tableau .personne-nom { display: none; }
  .c-personne { width: 76px; }
  .c-site, .c-client { width: 15%; }
  .c-site-client { width: 20%; }
  .masque-1280 { display: none; }
  .c-site-liste { width: 28%; }
  .c-client-liste { width: 18%; }
  .carte-disposition { grid-template-columns: minmax(0, 1fr); }
  .carte-cote { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gouttiere); align-items: start; }
  .carte-panneau { grid-column: 1 / -1; }
}
@container app (max-width: 900px) {
  .tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tuiles-fiche, .tuiles-quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tableau th { top: 0; }
  .masque-900 { display: none; }
  .c-site-liste { width: 34%; }
  .c-client-liste { width: 22%; }
  .filtre .champ { min-width: 120px; }
  .fiche-liste { grid-template-columns: minmax(100px, 30%) minmax(0, 1fr); }
  .carte-cote { grid-template-columns: minmax(0, 1fr); }
}
@container app (max-width: 640px) {
  .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tableau th, .tableau td { padding: 0 var(--pas); }
  .recherche-champ { padding-right: var(--pas-2); }
  .recherche-bouton { display: none; }
  .c-etat { width: 152px; }
  .c-ref { width: 84px; }
  .c-site { width: 26%; }
  .c-site-client { width: 28%; }
  .c-detail { width: 30%; }
  .masque-640 { display: none; }
  .bloc-entete { padding: var(--pas-2) var(--pas-3); }
  .tuiles-fiche, .tuiles-quatre, .tuiles-import { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-site-liste, .sans-client .c-site-liste { width: auto; }
  .c-couverture { width: 140px; }
  .c-etape { width: 112px; }
  .tableau td.empile .empile-second .pastille { margin-top: 2px; }
  .c-vip { width: 120px; }
  .filtres { padding: var(--pas-2) var(--pas-3); gap: var(--pas-2); }
  .filtres-bascule { display: inline-flex; }
  .filtres-champs { display: flex; flex-wrap: wrap; gap: var(--pas-2); flex: 1 1 100%; }
  .filtres-champs.est-replie { display: none; }
  .affiche-640, .tableau td.empile .empile-second.affiche-640 { display: block; }
  .filtre { flex: 1 1 45%; }
  .filtre .champ, .filtre-recherche .champ { min-width: 0; max-width: none; width: 100%; }
  .filtres .segments { flex: 1 1 100%; }
  .filtres .segments a { flex: 1 1 auto; justify-content: center; padding: 0 var(--pas-2); }
  .fiche-liste, .fiche-liste-deux { grid-template-columns: minmax(0, 1fr); gap: 2px var(--pas-3); padding: var(--pas-2) var(--pas-3); }
  .fiche-liste dt { margin-top: var(--pas-2); }
  .frise { padding-left: var(--pas-4); padding-right: var(--pas-3); }
  .frise::before { left: var(--pas-3); }
  .frise-evenement { padding-left: var(--pas-4); }
  .frise-evenement::before { left: -9px; }
  .frise-date { position: static; width: auto; text-align: left; }
  .carte-vue-ile { height: auto; aspect-ratio: 721 / 1390; max-height: 78vh; }
  .carte-panneau-site { padding: var(--pas-2) var(--pas-3); }
  .qr { flex-direction: column; }
}

/* Colonnes larges des tableaux agrégés et du préventif */
.c-client-large { width: 30%; }
.c-site-large { width: 26%; }
.c-detail-large { width: auto; }
.c-type, .c-objet, .c-titre { width: auto; }

/* =====================================================================================================
   Passe 3 — le bloc Tickets : file de travail (E08), fiche d'un ticket (E09), nouveau ticket (E10),
   planning (E11), intervenants extérieurs (E39). Aucune couleur en dur : tout vient de jetons.css.
   ===================================================================================================== */

/* ---------- Commandes et filtres de la file ---------- */
.file-commandes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pas-2) var(--pas-4); margin-bottom: var(--pas-3); }
.segments-libelle { display: inline-flex; align-items: center; gap: var(--pas-2); }
.segments-libelle .etiquette { margin: 0; }
.segments-page { margin-bottom: var(--pas-4); }
.filtre-large { flex: 1 1 220px; }
.filtre-large .champ { max-width: none; width: 100%; }
.filtre-plein { flex: 1 1 100%; }
.filtre-plein .champ { max-width: none; width: 100%; }
.champ-texte { height: auto; min-height: calc(var(--hauteur-champ) * 2); padding: var(--pas-2); resize: vertical; line-height: var(--interligne); }

/* ---------- Actions groupées ---------- */
.actions-groupees { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--pas-2) var(--pas-3); margin-bottom: var(--pas-4); padding: var(--pas-2) var(--pas-4); background: var(--accent-clair); border: 1px solid var(--bordure); border-radius: var(--rayon); }
.actions-groupees-compte { display: flex; flex-direction: column; min-width: 72px; }
.actions-groupees-compte .etiquette { margin-bottom: 2px; }
.actions-groupees-compte output { font-family: var(--police-chiffres); font-size: var(--taille-titre-section); font-weight: var(--graisse-grasse); line-height: var(--hauteur-champ); }
.actions-groupees-note { flex: 1 1 220px; align-self: center; font-size: var(--taille-secondaire); color: var(--texte-doux); }

/* ---------- Familles d'états et groupes ---------- */
.famille-titre { margin: var(--pas-6) 0 var(--pas-2); font-size: var(--taille-petite); font-weight: var(--graisse-grasse); letter-spacing: .06em; text-transform: uppercase; color: var(--texte-doux); }
.famille:first-of-type .famille-titre { margin-top: 0; }
.bloc-entete h2 .personne-initiales { width: 24px; height: 24px; }

/* ---------- Une ligne de la file ---------- */
.c-case { width: 36px; }
.tableau th.c-case, .tableau td.c-case { padding: 0; text-align: center; }
.tableau td.c-case input, .tableau th.c-case input { width: 16px; height: 16px; margin: 0; vertical-align: middle; accent-color: var(--accent); cursor: pointer; }
.c-echeance { width: 196px; }
.tableau-file .c-personne { width: 150px; }
.tableau-file .c-site-client { width: 19%; }
.tableau tr.est-en-retard td:first-child { box-shadow: inset 3px 0 0 var(--alerte); }
.echeance-absente { color: var(--texte-faible); }
.tableau td.est-depasse .echeance-date, .tableau td.est-depasse .echeance-absente { color: var(--alerte); font-weight: var(--graisse-moyenne); }
.ligne-seconde { display: block; font-size: var(--taille-secondaire); color: var(--texte-doux); line-height: var(--interligne-serre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ligne-seconde.affiche-640 { display: none; }
.tableau td.empile .empile-second.empile-pastilles { white-space: normal; overflow: visible; line-height: 1; }
.empile-pastilles .pastille { height: auto; min-height: 18px; max-width: 100%; margin-top: 2px; padding-top: 1px; padding-bottom: 1px; white-space: normal; line-height: var(--interligne-serre); }
.tableau td.empile .empile-second.ligne-client { display: flex; align-items: center; gap: var(--pas); min-width: 0; }
.tableau td.empile .ligne-client .ligne-client-nom { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne-client .pastille { flex: none; }

/* ---------- Fiche d'un ticket : en-tête, actions, calcul de la priorité ---------- */
.fiche-surtitre { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--pas); color: var(--texte-doux); font-size: var(--taille-secondaire); }
.fiche-surtitre .ref { font-family: var(--police-chiffres); font-variant-numeric: tabular-nums; font-weight: var(--graisse-grasse); color: var(--texte); }
.pastille-bouton { gap: 2px; cursor: pointer; font-family: var(--police); }
.pastille-bouton:hover { box-shadow: inset 0 0 0 1px currentColor; }
.pastille-bouton[aria-expanded="true"] .icone { transform: rotate(180deg); }
.icone-petite { width: 14px; height: 14px; }
.pastille-imputation { background: var(--neutre-fond); color: var(--neutre); }
.calcul-entrees .pastille-priorite, .impact-priorite .pastille-priorite { font-family: var(--police); }
.panneau-action { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--pas-2) var(--pas-3); margin-bottom: var(--pas-4); padding: var(--pas-3) var(--pas-4); background: var(--surface); border: 1px solid var(--bordure-forte); border-radius: var(--rayon); box-shadow: var(--ombre); }
.panneau-action p { flex: 1 1 100%; }
.panneau-note { font-size: var(--taille-secondaire); color: var(--texte-doux); }
.calcul { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.calcul-entrees { align-content: start; }
.bareme { padding: var(--pas-3) var(--pas-4); border-left: 1px solid var(--bordure); }
.bareme ol { display: flex; flex-direction: column; gap: var(--pas); margin-top: var(--pas); }
.bareme li { display: flex; align-items: center; gap: var(--pas-2); padding: 2px var(--pas-2); border-radius: var(--rayon-petit); font-size: var(--taille-secondaire); color: var(--texte-doux); }
.bareme li.est-applique { background: var(--accent-clair); color: var(--texte); font-weight: var(--graisse-moyenne); }

/* ---------- Bandeaux de la fiche ---------- */
.bandeau-corps { display: flex; flex-direction: column; gap: var(--pas); min-width: 0; flex: 1 1 auto; }
.bandeau-proximite { background: var(--info-fond); border-color: var(--info-fond); color: var(--info); }
.bandeau-origine { background: var(--surface); border-color: var(--bordure-forte); color: var(--accent); }
.bandeau-liens { font-size: var(--taille-secondaire); }
.bandeau .ref { font-family: var(--police-chiffres); font-weight: var(--graisse-moyenne); }
.lien-bouton { display: inline-flex; align-items: center; gap: var(--pas); color: var(--accent); font-size: inherit; text-align: left; }
.lien-bouton:hover { text-decoration: underline; }
.lien-bouton[aria-expanded="true"] .icone { transform: rotate(180deg); }
.proximite-liste { display: flex; flex-direction: column; gap: 2px; font-size: var(--taille-secondaire); color: var(--texte); }

/* ---------- Résolution partielle, attente, registre d'enquête ---------- */
.bloc-resolution { border-left: 3px solid var(--alerte); }
.resolution { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.resolution-case { padding: var(--pas-3) var(--pas-4); border-right: 1px solid var(--bordure); min-width: 0; }
.resolution-case:last-child { border-right: 0; }
.resolution-case dt { margin-bottom: var(--pas); font-size: var(--taille-secondaire); font-weight: var(--graisse-moyenne); color: var(--texte-doux); }
.resolution-case.est-marche dt { color: var(--ok); }
.resolution-case.est-reste dt { color: var(--attention); }
.bloc-attente { border-left: 3px solid var(--attention); }
.bloc-attente.est-grave { border-left-color: var(--alerte); }
.bloc-attente.est-grave .bloc-entete h2 { color: var(--texte); }
.registre { display: grid; grid-template-columns: minmax(140px, 26%) minmax(0, 1fr); gap: var(--pas-2) var(--pas-3); padding: var(--pas-3) var(--pas-4); }
.registre dt { font-size: var(--taille-secondaire); color: var(--texte-doux); }
.registre dd { min-width: 0; overflow-wrap: anywhere; }

/* ---------- Le constat : la même brique dans la clôture, la fiche du ticket et le rapport ---------- */
.constats { display: flex; flex-direction: column; }
.constat { padding: var(--pas-3) var(--pas-4); border-bottom: 1px solid var(--bordure); }
.constat:last-child { border-bottom: 0; }
.constat-entete { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--pas-2); margin-bottom: var(--pas-2); }
.constat-ordre { font-size: var(--taille-petite); font-weight: var(--graisse-grasse); letter-spacing: .06em; text-transform: uppercase; color: var(--texte-doux); }
.constat-cause { flex: 1 1 200px; font-size: var(--taille-texte); font-weight: var(--graisse-grasse); }
.constat-corps { display: grid; grid-template-columns: minmax(120px, 22%) minmax(0, 1fr); gap: var(--pas) var(--pas-3); }
.constat-corps dt { font-size: var(--taille-secondaire); color: var(--texte-doux); line-height: var(--interligne); }
.constat-corps dd { min-width: 0; overflow-wrap: anywhere; }
.constat-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--pas-2); margin-top: var(--pas-3); }
.constat-sans-photo { margin-top: var(--pas-2); font-size: var(--taille-secondaire); color: var(--attention); }
.pastille-lecture-seule { background: var(--neutre-fond); color: var(--neutre); }
.corrections { padding: var(--pas-3) var(--pas-4) 0; border-top: 1px solid var(--bordure); }
.corrections-titre { font-size: var(--taille-secondaire); font-weight: var(--graisse-moyenne); color: var(--texte-doux); }
.corrections .frise { padding-left: calc(var(--pas-2) + 108px); }

/* ---------- Le fil du ticket : la ligne d'événement, les messages, le déroulé de gamme ---------- */
.frise-heure { display: block; font-size: var(--taille-petite); color: var(--texte-faible); }
.frise-libelle { margin-right: var(--pas); font-size: var(--taille-petite); font-weight: var(--graisse-grasse); letter-spacing: .04em; text-transform: uppercase; color: var(--texte-doux); }
.frise-detail { color: var(--texte); }
.frise-auteur { font-size: var(--taille-secondaire); color: var(--texte-doux); white-space: nowrap; }
.frise-auteur::before { content: "— "; }
.frise-evenement[data-type="creation"]::before, .frise-evenement[data-type="cloture"]::before { background: var(--texte); }
.frise-evenement[data-type="premiere_reponse"]::before, .frise-evenement[data-type="planification"]::before,
.frise-evenement[data-type="message_client"]::before, .frise-evenement[data-type="reponse_tiers"]::before { background: var(--accent); }
.frise-evenement[data-type="visite"]::before, .frise-evenement[data-type="debut_gamme"]::before, .frise-evenement[data-type="gamme"]::before,
.frise-evenement[data-type="validation_rapport"]::before, .frise-evenement[data-type="rapport"]::before { background: var(--ok); }
.frise-evenement[data-type="hypothese"]::before { background: var(--info); }
.frise-evenement[data-type="hypothese_ecartee"]::before { background: var(--neutre); }
.frise-evenement[data-type="attente_tiers"]::before, .frise-evenement[data-type="attente_client"]::before,
.frise-evenement[data-type="changement_etat"]::before { background: var(--attention); }
.frise-evenement[data-type="correction"]::before { background: var(--alerte); }
.frise-evenement[data-type="message"]::before { background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.fil-ticket .frise-evenement, .corrections .frise-evenement { min-height: 44px; padding-bottom: var(--pas-2); }
.fil-bloc-entete { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--pas); margin-bottom: var(--pas-2); }
.fil-ticket .fil { padding: var(--pas-3); background: var(--bulle-fond); border-radius: var(--rayon); }
.fil-ticket .bulle.est-entrant, .fil-panneau .bulle.est-entrant { border: 1px solid var(--bordure); }
.fil-ticket .bulle { max-width: 80%; }
.fil-panneau { padding: var(--pas-3); background: var(--bulle-fond); }
.tableau-releves { margin-top: var(--pas); background: var(--surface); border: 1px solid var(--bordure); }
.tableau-releves th { position: static; }
.c-point { width: 56px; }
.c-releve { width: 132px; }
.tableau-releves td.releve { white-space: normal; }
.tableau-releves tr.est-non-conforme td { background: var(--alerte-fond); }
.pastille-conforme[data-conforme="oui"] { background: var(--ok-fond); color: var(--ok); }
.pastille-conforme[data-conforme="non"] { background: var(--alerte-fond); color: var(--alerte); }

/* ---------- Pièces et leur cycle ---------- */
.pieces { display: flex; flex-direction: column; }
.piece { display: flex; flex-direction: column; gap: var(--pas); padding: var(--pas-3) var(--pas-4); border-bottom: 1px solid var(--bordure); }
.piece:last-child { border-bottom: 0; }
.piece-nom { overflow-wrap: anywhere; }
.cycle { display: flex; flex-direction: column; gap: var(--pas); margin-top: var(--pas); counter-reset: etape; }
.cycle-etape { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--pas); min-height: 20px; padding-left: calc(var(--pas-6) + var(--pas)); font-size: var(--taille-secondaire); color: var(--texte-doux); }
.cycle-etape::before { counter-increment: etape; content: counter(etape); position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--neutre-fond); color: var(--texte-doux); font-size: var(--taille-petite); font-weight: var(--graisse-grasse); }
.cycle-etape.est-courante::before { background: var(--accent); color: var(--texte-inverse); }
.cycle-alternative + .cycle-alternative::before { content: "/ "; color: var(--texte-faible); }
.cycle-alternative.est-choisie { padding: 0 var(--pas); border-radius: var(--rayon-petit); background: var(--accent-clair); color: var(--texte); font-weight: var(--graisse-grasse); }
.cycle-etape.est-courante .cycle-alternative:not(.est-choisie) { color: var(--texte-faible); }

/* ---------- Nouveau ticket ---------- */
.etape-numero { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--texte-inverse); font-size: var(--taille-petite); font-weight: var(--graisse-grasse); }
.etape-recherche { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--pas-2); padding: var(--pas-3) var(--pas-4); }
.etape-resultat { padding: 0 var(--pas-4) var(--pas-2); font-size: var(--taille-secondaire); color: var(--texte-doux); }
.candidats { display: flex; flex-direction: column; padding: 0 var(--pas-4) var(--pas-3); }
.candidat { display: flex; align-items: center; justify-content: space-between; gap: var(--pas-3); padding: var(--pas-2) 0; border-top: 1px solid var(--bordure); }
.candidat-site { display: flex; flex-direction: column; min-width: 0; }
.impacts { display: flex; flex-direction: column; gap: var(--pas-2); min-width: 0; margin: 0; padding: var(--pas-3) var(--pas-4) 0; border: 0; }
.impacts legend { padding: 0; }
.impact { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--pas-3); padding: var(--pas-2) var(--pas-3); border: 1px solid var(--bordure); border-radius: var(--rayon); cursor: pointer; }
.impact:hover { border-color: var(--bordure-forte); }
.impact:has(input:checked) { border-color: var(--accent); background: var(--accent-clair); }
.impact input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.impact-libelle { display: flex; flex-direction: column; min-width: 0; }
.impact-priorite { display: inline-flex; justify-content: flex-end; text-align: right; }
.impact-danger { margin: var(--pas-2) var(--pas-4) 0; }
.impact-danger:has(input:checked) { border-color: var(--alerte); background: var(--alerte-fond); }
.champs-grille { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--pas-2) var(--pas-3); padding: var(--pas-3) var(--pas-4); }
.formulaire-note { margin-bottom: var(--pas-3); font-size: var(--taille-secondaire); color: var(--texte-doux); }
.formulaire-actions { display: flex; flex-wrap: wrap; gap: var(--pas-2); margin-bottom: var(--pas-4); }
.historique-court { display: flex; flex-direction: column; gap: var(--pas); padding: var(--pas-2) var(--pas-4) var(--pas-3); }
.historique-court li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pas); font-size: var(--taille-secondaire); }
.historique-court .ref { font-family: var(--police-chiffres); font-weight: var(--graisse-moyenne); }
.historique-titre { flex: 1 1 140px; min-width: 0; }

/* ---------- Planning ---------- */
.tuiles-cinq { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.planning-table th { position: static; }
.c-planning-personne { width: 150px; }
.tableau.planning-table td, .tableau.planning-table th[scope="row"] { height: auto; padding: var(--pas-2); vertical-align: top; white-space: normal; }
.tableau.planning-table tr:hover td { background: none; }
.planning-personne .personne { max-width: 100%; }
.planning-compte { display: block; margin-top: var(--pas); font-weight: var(--graisse-normale); }
.c-jour.est-aujourdhui, .planning-cellule.est-aujourdhui { background: var(--accent-clair); }
.tableau.planning-table tr:hover td.est-aujourdhui { background: var(--accent-clair); }
.planning-cellule.est-conflit, .tableau.planning-table tr:hover td.est-conflit { background: var(--alerte-fond); box-shadow: inset 0 0 0 2px var(--alerte); }
.planning-conflit { margin-bottom: var(--pas); font-size: var(--taille-petite); font-weight: var(--graisse-grasse); color: var(--alerte); line-height: var(--interligne-serre); }
.visite { margin-bottom: var(--pas); padding: var(--pas) var(--pas-2); background: var(--surface); border: 1px solid var(--bordure); border-left: 3px solid var(--accent); border-radius: var(--rayon-petit); font-size: var(--taille-secondaire); overflow-wrap: anywhere; }
.visite:not([data-zone="tana"]) { border-left-color: var(--attention); }
.visite.est-close { border-left-color: var(--neutre); color: var(--texte-doux); }
.visite-tete { font-weight: var(--graisse-moyenne); line-height: var(--interligne-serre); }
.visite-heure { font-weight: var(--graisse-grasse); }
.visite-zone { font-size: var(--taille-petite); color: var(--texte-doux); line-height: var(--interligne-serre); }
.visite-tickets { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.visite-tickets li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--pas); }
.visite-tickets .ref { font-family: var(--police-chiffres); font-weight: var(--graisse-moyenne); }
.visite .pastille { height: auto; min-height: 18px; padding-top: 1px; padding-bottom: 1px; max-width: 100%; white-space: normal; line-height: var(--interligne-serre); }
.planning-liste { display: none; }
.planning-jour { padding: var(--pas-3) var(--pas-4); border-bottom: 1px solid var(--bordure); }
.planning-jour:last-child { border-bottom: 0; }
.planning-jour.est-aujourdhui { background: var(--accent-clair); }
.planning-jour-titre { margin-bottom: var(--pas-2); font-size: var(--taille-texte); }
.planning-jour-personne { padding: var(--pas-2) 0; }
.planning-jour-personne.est-conflit { padding: var(--pas-2); background: var(--alerte-fond); border-radius: var(--rayon-petit); box-shadow: inset 0 0 0 2px var(--alerte); }
.planning-jour-qui { margin-bottom: var(--pas); }
.liste-lignes { display: flex; flex-direction: column; }
.liste-lignes li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--pas) var(--pas-3); padding: var(--pas-2) var(--pas-4); border-bottom: 1px solid var(--bordure); }
.liste-lignes li:last-child { border-bottom: 0; }
.liste-lignes-tete { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--pas-2); min-width: 0; }
.liste-lignes-corps { flex: 1 1 260px; min-width: 0; font-size: var(--taille-secondaire); }
.liste-lignes-lien { font-size: var(--taille-secondaire); white-space: nowrap; }
.zone-nom + .zone-nom::before { content: " · "; color: var(--texte-faible); }
.conflit-heure { display: block; }
.regroupement-ticket { display: inline-flex; flex-wrap: wrap; gap: var(--pas); margin-right: var(--pas-3); }
.deplacements { display: flex; flex-direction: column; gap: 2px; font-size: var(--taille-secondaire); }
.tableau tr.est-regroupable td:first-child { box-shadow: inset 3px 0 0 var(--attention); }
.c-zone { width: 24%; }
.a-placer { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--pas-3) var(--pas-4); padding: var(--pas-3) var(--pas-4); }
.a-placer-zone h3 { margin-bottom: var(--pas); font-size: var(--taille-secondaire); }
.a-placer-sites { display: flex; flex-direction: column; gap: 2px; font-size: var(--taille-secondaire); }

/* ---------- Intervenants extérieurs ---------- */
.c-tiers { width: 24%; }
.c-nombre-court { width: 88px; }
.c-ancien { width: 20%; }
.c-promesse { width: 20%; }
.c-relance { width: 132px; }
.c-action-tiers { width: 196px; }
.tableau-tiers td.empile .lien-bouton { font-size: var(--taille-texte); }
.empile-ligne { display: block; }
.tableau tr.ligne-detail td { height: auto; padding: var(--pas-3) var(--pas-4); white-space: normal; background: var(--surface-2); }
.dossiers { display: flex; flex-direction: column; gap: var(--pas-3); }
.dossier { display: flex; flex-direction: column; gap: 2px; font-size: var(--taille-secondaire); }
.dossier-tete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pas); font-size: var(--taille-texte); }
.dossier-tete .ref { font-family: var(--police-chiffres); font-weight: var(--graisse-moyenne); }
.dossiers-action { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pas-2); margin-top: var(--pas-3); }
.bloc-discret { background: var(--surface-2); box-shadow: none; }

/* ---------- Points de rupture de la passe 3 ---------- */
@container app (max-width: 1280px) {
  .grille-ticket .grille-principal { grid-column: span 8; }
  .grille-ticket .grille-panneau { grid-column: span 4; }
  .tuiles-cinq { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .c-echeance { width: 170px; }
  .tableau-file .c-personne { width: 76px; }
  .c-planning-personne { width: 76px; }
}
@container app (max-width: 900px) {
  .grille-ticket .grille-principal, .grille-ticket .grille-panneau { grid-column: span 12; }
  .c-echeance { width: 170px; }
  .tuiles-cinq { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .planning-grille { display: none; }
  .planning-liste { display: flex; flex-direction: column; }
  .calcul { grid-template-columns: minmax(0, 1fr); }
  .bareme { border-left: 0; border-top: 1px solid var(--bordure); }
}
@container app (max-width: 640px) {
  .tuiles-cinq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tableau-file .c-ref { width: 136px; }
  .tableau-file .c-case { width: 28px; }
  .ligne-seconde.affiche-640 { display: block; }
  .resolution { grid-template-columns: minmax(0, 1fr); }
  .resolution-case { border-right: 0; border-bottom: 1px solid var(--bordure); }
  .resolution-case:last-child { border-bottom: 0; }
  .registre, .constat-corps { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .registre dt, .constat-corps dt { margin-top: var(--pas-2); }
  .file-commandes { gap: var(--pas-2); }
  .file-commandes .segments, .segments-libelle { flex: 1 1 100%; }
  .segments-libelle { flex-wrap: wrap; }
  .file-commandes .segments a { flex: 1 1 auto; justify-content: center; padding: 0 var(--pas-2); }
  .actions-groupees { padding: var(--pas-2) var(--pas-3); }
  .impact { grid-template-columns: auto minmax(0, 1fr); }
  .impact-priorite { grid-column: 2; justify-content: flex-start; }
  .candidat { flex-wrap: wrap; }
  .corrections .frise { padding-left: var(--pas-4); }
  .fil-ticket .bulle { max-width: 92%; }
  .c-tiers, .c-zone { width: auto; }
  .c-ancien { width: 36%; }
  .c-nombre-court { width: 64px; }
}

/* ---------- Passe 3 : ce qui ne doit ni déborder ni se couper ---------- */
.tableau td.echeance { white-space: normal; }
.tableau td.echeance .echeance-absente { display: block; font-size: var(--taille-petite); line-height: var(--interligne-serre); }
.tableau td.empile.echeance .empile-second { white-space: normal; overflow: visible; }
.grille-panneau .fiche-liste dd .pastille, .site-court dd .pastille { max-width: 100%; height: auto; min-height: 22px; padding-top: 2px; padding-bottom: 2px; white-space: normal; line-height: var(--interligne-serre); }
.fiche-liste dd .personne { max-width: 100%; }
.tableau td.empile .empile-second.empile-souple { white-space: normal; overflow: visible; }

/* ---------- Relecture de la passe 3 : les noms et les échéances ne se coupent pas ---------- */
/* entier : une cellule dont le texte passe à la ligne plutôt que de se couper — site, client, personne, intervenant */
.tableau td.entier { white-space: normal; overflow-wrap: break-word; line-height: var(--interligne-serre); }
.tableau td.entier a, .tableau td.entier .empile-second, .tableau td.entier .ligne-client-nom, .tableau td.entier .personne-nom { white-space: normal; overflow: visible; text-overflow: clip; }
.tableau td.empile.entier { padding-top: var(--pas); padding-bottom: var(--pas); }
.tableau td.entier .ligne-client { flex-wrap: wrap; }
.tableau td.entier .lien-bouton { text-align: left; }
.planning-personne .personne-nom, .fiche-liste dd .personne-nom { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: var(--interligne-serre); }
.tableau-releves .ligne-seconde, .tableau-file .ligne-seconde { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
/* L'échéance : la date, puis ce qu'elle veut dire ; sous 640 px, en entier sous le titre */
.tableau td.echeance .echeance-phrase { display: block; font-size: var(--taille-secondaire); color: var(--texte-doux); line-height: var(--interligne-serre); white-space: normal; }
.ligne-echeance.affiche-640 { display: none; }
/* La demande, sous le titre de la fiche */
.fiche-description { max-width: 72ch; margin-top: var(--pas); color: var(--texte-doux); overflow-wrap: anywhere; }
/* Le cycle d'une pièce : l'étape actuelle se situe dans le cycle ; les autres ne disent rien de ce qui s'est passé */
.cycle-etape { color: var(--texte-faible); }
.cycle-etape.est-courante { color: var(--texte); }
@container app (max-width: 640px) {
  .ligne-echeance.affiche-640 { display: block; font-size: var(--taille-secondaire); color: var(--texte-doux); line-height: var(--interligne-serre); white-space: normal; overflow-wrap: anywhere; }
  .ligne-echeance .echeance-date, .ligne-echeance .echeance-absente, .ligne-echeance .echeance-phrase { display: inline; }
  .ligne-echeance .echeance-phrase:not(:empty)::before { content: " · "; }
  .ligne-echeance.est-depasse .echeance-date, .ligne-echeance.est-depasse .echeance-absente { color: var(--alerte); font-weight: var(--graisse-moyenne); }
}

/* =====================================================================================================
   Passe 2 bis — la direction retenue (D-TRACE-APPARENCE-DIRECTION-RETENUE), disposition C de l'accueil.
   ===================================================================================================== */

/* ---------- L'en-tête de l'accueil : clair et bas ---------- */
.accueil-entete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); gap: var(--pas-4) var(--pas-6); align-items: center; margin-bottom: var(--pas-4); }
.accueil-salut h1 { font-family: var(--police-titre); font-size: var(--taille-salut); line-height: 1.15; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--pas-3); }
.accueil-quand { font-family: var(--police); font-size: var(--taille-secondaire); font-weight: var(--graisse-normale); color: var(--texte-doux); }
.accueil-decision { margin-top: var(--pas-2); font-size: var(--taille-titre-section); }
.accueil-decision a { color: var(--texte); font-weight: var(--graisse-grasse); text-decoration: underline; text-decoration-color: var(--marque-soleil); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.accueil-actifs { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon-carte); box-shadow: var(--ombre-carte); padding: var(--pas-3) var(--pas-4); display: flex; flex-direction: column; gap: var(--pas-2); min-width: 0; }
.accueil-actifs-titre { display: flex; align-items: center; gap: var(--pas-3); }
.accueil-actifs-titre > span:last-child { display: flex; flex-direction: column; line-height: var(--interligne-serre); min-width: 0; }
.accueil-actifs-n { font-family: var(--police-chiffres); font-variant-numeric: tabular-nums; font-size: var(--taille-chiffre-tuile); font-weight: var(--graisse-grasse); line-height: 1; }
.accueil-actifs-base { font-size: var(--taille-petite); color: var(--texte-doux); }
.familles-barre { display: flex; gap: 3px; height: 8px; }
.familles-segment { min-width: 6px; border-radius: 2px; background: var(--texte-faible); }
[data-famille="en_mouvement"] .familles-puce, .familles-segment[data-famille="en_mouvement"] { background: var(--accent); }
[data-famille="bloque_ailleurs"] .familles-puce, .familles-segment[data-famille="bloque_ailleurs"] { background: repeating-linear-gradient(135deg, var(--neutre) 0 3px, var(--bordure-forte) 3px 6px); }
[data-famille="a_surveiller"] .familles-puce, .familles-segment[data-famille="a_surveiller"] { background: var(--surveiller); }
.familles-legende { display: flex; flex-wrap: wrap; gap: var(--pas) var(--pas-4); font-size: var(--taille-petite); color: var(--texte-doux); }
.familles-legende li { display: inline-flex; align-items: center; gap: var(--pas); white-space: nowrap; }
.familles-legende strong { color: var(--texte); font-variant-numeric: tabular-nums; }
.familles-puce { width: 8px; height: 8px; border-radius: 2px; background: var(--texte-faible); flex: none; }

/* ---------- Trois panneaux, le terrain du jour, la petite carte ---------- */
.accueil-grille { display: grid; grid-template-columns: minmax(0, 1fr) 260px; grid-template-areas: "panneaux carte" "terrain carte"; grid-template-rows: min-content 1fr; gap: var(--pas-3) var(--pas-4); margin-bottom: var(--pas-6); align-items: start; }
.panneaux { grid-area: panneaux; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pas-3); }
.panneau { background: var(--surface); border: 1px solid var(--bordure); border-top: 3px solid var(--decider); border-radius: var(--rayon-carte); box-shadow: var(--ombre-carte); padding: var(--pas-2) var(--pas-3) var(--pas-3); min-width: 0; }
.panneau[data-panneau="relancer"] { border-top-color: var(--relancer); }
.panneau[data-panneau="examiner"] { border-top-color: var(--examiner); }
.panneau-titre { font-size: var(--taille-petite); letter-spacing: .07em; text-transform: uppercase; font-weight: var(--graisse-grasse); color: var(--decider); margin-bottom: var(--pas-2); }
.panneau[data-panneau="relancer"] .panneau-titre, .panneau[data-panneau="relancer"] .panneau-n { color: var(--relancer); }
.panneau[data-panneau="examiner"] .panneau-titre, .panneau[data-panneau="examiner"] .panneau-n { color: var(--examiner); }
.panneau-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.panneau-cases li + li { border-left: 1px solid var(--bordure); }
.panneau-case { display: flex; flex-direction: column; gap: 2px; padding: 0 var(--pas-2); color: var(--texte); min-width: 0; }
.panneau-cases li:first-child .panneau-case { padding-left: 0; }
.panneau-case:hover { text-decoration: none; }
.panneau-case:hover .panneau-libelle { text-decoration: underline; }
.panneau-n { font-family: var(--police-chiffres); font-variant-numeric: tabular-nums; font-size: var(--taille-chiffre-tuile); font-weight: var(--graisse-grasse); line-height: 1; color: var(--decider); }
.panneau-libelle { font-size: var(--taille-petite); font-weight: var(--graisse-moyenne); color: var(--texte-doux); line-height: var(--interligne-serre); hyphens: auto; }
.panneau-case.est-vide .panneau-n { color: var(--texte-faible); }

.terrain, .minicarte { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon-carte); box-shadow: var(--ombre-carte); min-width: 0; }
.terrain { grid-area: terrain; }
.minicarte { grid-area: carte; }
.terrain > summary, .minicarte > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--pas-2); padding: var(--pas-2) var(--pas-3); flex-wrap: wrap; }
.terrain > summary::-webkit-details-marker, .minicarte > summary::-webkit-details-marker { display: none; }
.terrain-titre, .minicarte-entete span { font-weight: var(--graisse-grasse); font-size: var(--taille-titre-section); }
.terrain-resume { color: var(--texte-doux); font-size: var(--taille-secondaire); min-width: 0; }
.terrain-corps { padding: 0 var(--pas-3) var(--pas-3); }
.terrain-axe { position: relative; height: 18px; margin-left: 132px; font-size: var(--taille-petite); color: var(--texte-faible); }
.terrain-graduation { position: absolute; transform: translateX(-50%); white-space: nowrap; font-variant-numeric: tabular-nums; }
.terrain-graduation:last-child { transform: translateX(-100%); }
.terrain-graduation:first-child { transform: none; }
.terrain-ligne { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: center; min-height: 28px; border-top: 1px solid var(--bordure); }
.terrain-personne { min-width: 0; overflow: hidden; }
.terrain-personne .personne { max-width: 100%; }
.terrain-piste { position: relative; min-height: 28px; }
.terrain-maintenant { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--marque-soleil); }
.terrain-visite { position: absolute; top: 4px; max-width: 34%; padding: 0 var(--pas-2); height: 20px; line-height: 20px; border-left: 3px solid var(--accent); background: var(--accent-clair); color: var(--texte); font-size: var(--taille-petite); border-radius: 0 var(--rayon-petit) var(--rayon-petit) 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.terrain-visite .chiffre { font-family: var(--police-chiffres); font-variant-numeric: tabular-nums; font-weight: var(--graisse-grasse); }
.terrain-sans-heure { border-top: 1px solid var(--bordure); padding-top: var(--pas-2); display: flex; flex-direction: column; gap: var(--pas); font-size: var(--taille-secondaire); }
.terrain-sans-heure li { display: flex; align-items: center; gap: var(--pas-2); flex-wrap: wrap; }
.mot-attention { color: var(--attention); background: var(--attention-fond); border-radius: var(--rayon-petit); padding: 0 var(--pas); font-size: var(--taille-petite); font-weight: var(--graisse-moyenne); }
.terrain-pied { margin-top: var(--pas-2); font-size: var(--taille-secondaire); text-align: right; }
.terrain-vide { padding: 0 var(--pas-3) var(--pas-3); color: var(--texte-doux); font-size: var(--taille-secondaire); }

.minicarte-lien { display: block; padding: 0 var(--pas-3); }
.minicarte-svg { display: block; width: 100%; max-height: 300px; }
.minicarte-svg .carte-terre { fill: var(--carte-terre); stroke: var(--carte-cote); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.minicarte-zone circle { fill: var(--accent-fonce); stroke: var(--surface); stroke-width: 6; }
.minicarte-zone.est-tana circle { fill: var(--accent-fonce); }
.minicarte-n { fill: var(--texte-inverse); font-size: 58px; font-weight: 700; text-anchor: middle; dominant-baseline: central; font-family: var(--police-chiffres); }
.minicarte-nom { fill: var(--texte); font-size: 56px; font-weight: 600; dominant-baseline: central; }
.minicarte-nom.est-a-gauche { text-anchor: end; }
.minicarte-nom.est-au-centre { text-anchor: middle; }
.minicarte-rappel { stroke: var(--texte-doux); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.minicarte-legende { padding: var(--pas-2) var(--pas-3) var(--pas-3); font-size: var(--taille-petite); color: var(--texte-doux); text-align: center; }

/* ---------- La liste « À traiter ce matin » ---------- */
.liste-entete { display: flex; align-items: center; gap: var(--pas-2) var(--pas-4); flex-wrap: wrap; margin-bottom: var(--pas-3); }
.liste-entete h2 { font-family: var(--police-titre); font-size: var(--taille-titre-page); }
.liste-detail { flex: 1 1 280px; color: var(--texte-doux); font-size: var(--taille-secondaire); }
.bloc-repli > summary { list-style: none; cursor: pointer; }
.bloc-repli > summary::-webkit-details-marker { display: none; }
.bloc-repli > summary .bloc-entete h2::before { content: "›"; display: inline-block; width: 12px; color: var(--texte-faible); transition: transform var(--transition); }
.bloc-repli[open] > summary .bloc-entete h2::before { transform: rotate(90deg); }
.bloc-repli:not([open]) .bloc-entete { border-bottom: 0; }

/* Une barre de priorité à gauche de chaque ligne ; le rouge une fois par bloc : sous un titre rouge,
   le retard repasse à l'encre */
.tableau tr[data-priorite="p1"] td:first-child { box-shadow: inset 3px 0 0 var(--alerte); }
.tableau tr[data-priorite="p2"] td:first-child { box-shadow: inset 3px 0 0 var(--attention-vif); }
.tableau tr[data-priorite] td:first-child { padding-left: var(--pas-3); }
.bloc.est-grave .pastille-retard { background: var(--neutre-fond); color: var(--texte); }

/* Densité aérée, au choix de l'utilisateur */
.app.densite-aeree { --hauteur-ligne: 48px; }

/* ---------- Points de rupture de la passe 2 bis ---------- */
@container app (max-width: 1280px) {
  .accueil-grille { grid-template-columns: minmax(0, 1fr); grid-template-areas: "panneaux" "terrain" "carte"; }
  .minicarte-svg { max-height: 380px; }
}
@container app (max-width: 900px) {
  .accueil-entete { grid-template-columns: minmax(0, 1fr); }
}
@container app (max-width: 640px) {
  .accueil-salut h1 { font-size: var(--taille-titre-page); }
  .panneaux { grid-template-columns: minmax(0, 1fr); }
  .terrain-axe, .terrain-maintenant { display: none; }
  .terrain-ligne { grid-template-columns: minmax(0, 1fr); padding: var(--pas-2) 0; gap: var(--pas); }
  .terrain-piste { height: auto !important; display: flex; flex-direction: column; gap: var(--pas); }
  .terrain-visite { position: static; max-width: 100%; top: auto !important; }
  .tableau tr[data-priorite] td:first-child { padding-left: var(--pas-2); }
}

/* Les lignes de tickets deviennent des cartes au téléphone : une carte par ticket, rien de coupé (S-29 : la colonne
   Titre de E01 tombait à 4 px à 360 px). La priorité et le détail, masqués en tableau sous 640 px, reviennent. */
.c-ref { width: 104px; }
@container app (max-width: 640px) {
  .tableau-cartes, .tableau-cartes tbody, .tableau-cartes tr, .tableau-cartes td { display: block; }
  .tableau-cartes thead { display: none; }
  .tableau-cartes tr { display: grid; grid-template-columns: 72px minmax(0, 1fr); grid-template-areas: "prio titre" "ref site" "ref etat" "ref detail"; gap: 2px var(--pas-2); padding: var(--pas-2) var(--pas-3); border-bottom: 1px solid var(--bordure); }
  .tableau-cartes tr[data-priorite="p1"] { box-shadow: inset 3px 0 0 var(--alerte); }
  .tableau-cartes tr[data-priorite="p2"] { box-shadow: inset 3px 0 0 var(--attention-vif); }
  .tableau-cartes tr[data-priorite] td:first-child { box-shadow: none; padding-left: 0; }
  .tableau-cartes td { height: auto; padding: 0; border: 0; white-space: normal; overflow: visible; }
  .tableau-cartes td.l-ref { grid-area: ref; font-size: var(--taille-petite); }
  .tableau-cartes td.l-titre { grid-area: titre; font-weight: var(--graisse-grasse); }
  .tableau-cartes td.l-site { grid-area: site; }
  .tableau-cartes td.l-etat { grid-area: etat; }
  .tableau-cartes td.l-prio, .tableau-cartes td.l-prio.masque-640 { grid-area: prio; display: block; }
  .tableau-cartes td.l-detail, .tableau-cartes td.l-detail.masque-640 { grid-area: detail; display: block; }
  .tableau-cartes td.l-personne, .sans-client .tableau-cartes td.masque-fiche { display: none; }
  .tableau-cartes td.empile a, .tableau-cartes td.empile .empile-second { white-space: normal; overflow: visible; }
  .tableau-cartes .l-etat .pastille-retard { display: none; }             /* le détail le dit déjà */
  .sans-client .tableau-cartes .l-etat .pastille-retard { display: inline-flex; }
  .tableau-cartes tr:hover td { background: none; }
}

/* ---------- E03 · la fiche d'un site dans la direction retenue ---------- */
.fiche-entete-c { display: flex; flex-direction: column; gap: var(--pas-2); margin-bottom: var(--pas-4); }
.fiche-lieu { display: flex; align-items: center; gap: var(--pas-2); flex-wrap: wrap; color: var(--texte-doux); font-size: var(--taille-secondaire); }
.fiche-entete-c h1 { font-family: var(--police-titre); font-size: var(--taille-salut); line-height: 1.15; }
.fiche-actions { display: flex; flex-wrap: wrap; gap: var(--pas-2); }
.fiche-resume { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pas-2) var(--pas-4); padding-top: var(--pas-2); border-top: 1px solid var(--bordure); }
.fiche-resume li { display: inline-flex; align-items: center; gap: var(--pas); min-width: 0; }
.fiche-resume li + li { padding-left: var(--pas-4); border-left: 1px solid var(--bordure); }
.fiche-panneau { align-self: start; background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon-carte); box-shadow: var(--ombre-carte); padding: var(--pas) 0; }
.fiche-panneau > .bloc { border: 0; border-radius: 0; box-shadow: none; margin: 0; background: none; }
.fiche-panneau > .bloc + .bloc { border-top: 1px solid var(--bordure); }
.fiche-panneau > .bloc > .bloc-entete { border-bottom: 0; padding-bottom: var(--pas); }
.fiche-panneau > .bloc > .bloc-entete h2 { font-size: var(--taille-petite); letter-spacing: .07em; text-transform: uppercase; color: var(--texte-doux); }
@container app (max-width: 640px) {
  .fiche-resume li + li { padding-left: 0; border-left: 0; }
  .fiche-entete-c h1 { font-size: var(--taille-titre-page); }
}

/* ---------- Passe 2 bis : ce qui ne doit ni se couper ni se rogner (S-29) ---------- */
/* Une pastille dans une cellule ne dépasse jamais sa cellule : elle passe à la ligne plutôt que d'être rognée. */
.tableau td .pastille { max-width: 100%; white-space: normal; height: auto; min-height: 20px; line-height: var(--interligne-serre); padding-top: 2px; padding-bottom: 2px; text-align: left; }
/* Le nom du client se coupe, jamais sa pastille VIP : le nom rétrécit, la pastille garde sa place. */
.tableau td.empile .empile-second { display: flex; align-items: center; gap: var(--pas); min-width: 0; }
.tableau td.empile .empile-second > a { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tableau td.empile .empile-second > .pastille-vip { flex: none; white-space: nowrap; }
/* Les natures de manque de E38 passent à la ligne au lieu de défiler hors du cadre. */
.segments.segments-defilants { flex-wrap: wrap; overflow: visible; height: auto; }
.nom-pastille { display: flex; align-items: center; gap: var(--pas); min-width: 0; }
.nom-pastille > a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nom-pastille > .pastille { flex: none; }
.barre-theme { display: inline-flex; gap: var(--pas); font-size: var(--taille-petite); }
.barre-theme a { color: var(--nav-texte-doux); padding: 0 var(--pas-2); border-radius: var(--rayon-pastille); }
.barre-theme a[aria-current] { background: var(--nav-actif); color: var(--nav-texte); }
.app.est-repliee .barre-theme { display: none; }

/* Au téléphone, un nom passe à la ligne au lieu d'être coupé : il n'y a pas de survol au doigt (contre-relecture, C1).
   Les tableaux gardent leurs colonnes ; la ligne s'allonge. */
@container app (max-width: 640px) {
  .tableau td.tronque, .tableau td.empile a, .tableau td.empile .empile-second, .tableau td.empile .empile-premier,
  .tableau .nom-pastille > a, .tableau td.empile .empile-second > a { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .tableau .nom-pastille { flex-wrap: wrap; }
  .tableau td.empile .empile-second { display: block; }
  .tableau .deux-lignes { -webkit-line-clamp: unset; display: block; }
  .c-pastille { width: 88px; }
  .tableau th { white-space: normal; overflow: visible; height: auto; padding-top: var(--pas); padding-bottom: var(--pas); line-height: var(--interligne-serre); }
  .segments { flex-wrap: wrap; height: auto; }
}
/* Un libellé du menu passe à la ligne plutôt que d'être coupé (« Intervenants extérieurs », en gras quand il est actif). */
.nav-lien { height: auto; min-height: calc(var(--hauteur-ligne) - var(--pas-2)); }
.nav-libelle { white-space: normal; line-height: var(--interligne-serre); padding: 2px 0; }
.app.est-repliee .nav-lien { height: calc(var(--hauteur-ligne) - var(--pas-2)); }