/* =============================================================================
   Composants de la refonte du suivi (SPEC § 4 à 9, contrats § 2.6) : en-tête de
   page, touches, comptes à rebours, alertes, tuiles, panneaux, pastilles,
   segments, codes de dossier, liste dense (tableau natif), groupes, barre de
   sélection, progression, frise texte, barres empilées, lots, cartes de
   dossier, états vides, dialogues.
   Feuille chargée sur toutes les pages (après app.css) : aucune règle ne cible
   un élément nu ni une classe déjà définie ailleurs (.tuile, .carte, .onglet,
   .btn restent à app.css ; le volet est dans volet.css).
   Jetons : ceux de app.css (clair et sombre) ; aucune couleur en dur hors des
   voiles et des touches sur fond coloré. Charte : l'orange (--accent) est
   réservé à l'action principale, au compteur « À valider » et à la ligne
   courante, toujours avec le texte bleu (--on-accent).
   Aucun pictogramme : chevrons, losanges et flèches sont dessinés en CSS.
   ========================================================================== */

/* --- En-tête de page compact ------------------------------------------------ */
.pilote-entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 14px; }
.pilote-entete h1 { margin: 0; }
.pilote-entete-texte { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; min-width: 0; }
.pilote-entete-texte .meta { margin: 0; }
.pilote-entete-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Touche de clavier (dans les boutons, l'aide et la barre du haut) */
.touche { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5em; padding: 0 5px; border: 1px solid var(--border-champ); border-bottom-width: 2px; border-radius: 4px; background: var(--surface-2); color: var(--text-2); font-family: var(--police-mono); font-size: 0.72rem; font-weight: 600; line-height: 1.5; }
.btn .touche { margin-left: 2px; }
.btn-plein .touche { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.35); color: inherit; }
.btn-accent .touche { background: rgba(31, 42, 68, 0.1); border-color: rgba(31, 42, 68, 0.3); color: inherit; }

/* --- Comptes à rebours ------------------------------------------------------ */
.rebours { display: flex; flex-wrap: wrap; gap: 8px; }
.rebours-element { display: inline-flex; align-items: center; gap: 10px; min-height: 30px; padding: 4px 12px 4px 5px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); text-decoration: none; font-size: 0.86rem; }
.rebours-element:hover { border-color: var(--action); }
.rebours-jours { min-width: 44px; padding: 2px 8px; border-radius: 999px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--info-bg); color: var(--info-tx); }
.rebours-proche .rebours-jours { background: var(--warn-bg); color: var(--warn-tx); }
.rebours-loin .rebours-jours { background: var(--neu-bg); color: var(--neu-tx); }

/* --- Alertes sur une ligne -------------------------------------------------- */
.alerte-ligne { display: block; margin: 0 0 12px; padding: 8px 14px; border-radius: var(--radius-md); border-left: 4px solid var(--err); background: var(--err-bg); color: var(--err-tx); font-size: 0.9rem; overflow-wrap: anywhere; }
.alerte-ligne strong { font-weight: 700; margin-right: 6px; }
.alerte-ligne a { color: inherit; font-weight: 600; margin-left: 10px; white-space: nowrap; }
.alerte-info { border-left-color: var(--info); background: var(--info-bg); color: var(--info-tx); }
.alerte-attention { border-left-color: var(--accent); background: var(--warn-bg); color: var(--warn-tx); }
.texte-warn { color: var(--warn-tx); font-weight: 600; }

/* --- Tuiles de chiffres cliquables ------------------------------------------ */
.tuiles-pilotage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
@media (min-width: 900px) { .tuiles-pilotage { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 1600px) { .tuiles-pilotage { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.tuiles-pilotage > li { min-width: 0; }
.tuile-chiffre { position: relative; display: grid; grid-template-rows: auto auto 1fr; gap: 2px; height: 100%; padding: 12px 14px 12px 16px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--ombre-douce); color: var(--text); text-decoration: none; }
a.tuile-chiffre:hover { border-color: var(--action); background: var(--ligne-survol); }
a.tuile-chiffre:hover .tuile-chiffre-libelle { text-decoration: underline; }
.tuile-chiffre-libelle { font-size: 0.84rem; font-weight: 600; color: var(--text-2); }
.tuile-chiffre-valeur { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
.tuile-chiffre-unite { font-size: 0.85rem; font-weight: 500; color: var(--muted); }
.tuile-chiffre-detail { font-size: 0.8rem; color: var(--muted); align-self: end; }
.tuile-chiffre-detail strong { color: var(--text-2); font-weight: 600; }
/* Couleurs de corbeille (A --err, B --accent, C --info, D --ok) : sur la tuile seulement. */
.tuile-chiffre.tuile-err, a.tuile-chiffre.tuile-err:hover { border-left-color: var(--err); }
.tuile-chiffre.tuile-err .tuile-chiffre-valeur { color: var(--err-tx); }
.tuile-chiffre.tuile-attention, a.tuile-chiffre.tuile-attention:hover { border-left-color: var(--accent); }
.tuile-chiffre.tuile-info, a.tuile-chiffre.tuile-info:hover { border-left-color: var(--info); }
.tuile-chiffre.tuile-ok, a.tuile-chiffre.tuile-ok:hover { border-left-color: var(--ok); }
.tuile-chiffre.tuile-neu, a.tuile-chiffre.tuile-neu:hover { border-left-color: var(--neu); }
.tuile-jauge { display: block; height: 6px; margin-top: 6px; border-radius: 999px; overflow: hidden; background: var(--surface-3); }
.tuile-jauge svg { display: block; width: 100%; height: 6px; }
.jauge-p1 { fill: var(--err); }
.jauge-autre { fill: var(--action); }
@media (max-width: 640px) {
  .tuile-chiffre { padding: 10px 10px 10px 12px; }
  .tuile-chiffre-valeur { font-size: 1.55rem; }
  .tuile-chiffre-libelle { font-size: 0.78rem; }
  .tuile-chiffre-detail { font-size: 0.74rem; }
}
.tuiles-client { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
@media (max-width: 640px) { .tuiles-client { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- Grilles des tableaux de bord ------------------------------------------- */
/* Administrateur : agenda, lots, « Jusqu'au gel » (3 colonnes dès 1800 px). */
.bord3 { display: grid; gap: 16px; align-items: start; }
.bord3-droite { display: grid; gap: 16px; min-width: 0; }
@media (min-width: 1100px) and (max-width: 1799px) {
  .bord3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bord3-agenda { grid-column: 1 / -1; }
}
@media (min-width: 1800px) { .bord3 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(400px, 1fr); } }
/* Client : « Ce qui vous attend » et colonne de droite. */
.bord-client { display: grid; gap: 16px; align-items: start; }
.bord-client-droite { display: grid; gap: 16px; min-width: 0; }
@media (min-width: 1600px) { .bord-client { grid-template-columns: minmax(0, 1.6fr) minmax(360px, 1fr); } }
@media (min-width: 1100px) and (max-width: 1599px) { .bord-client-droite { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }

/* --- Panneaux --------------------------------------------------------------- */
.panneau { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--ombre-douce); min-width: 0; }
.panneau-espace { margin-top: 16px; }
.panneau-entete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 12px 16px 10px; border-bottom: 1px solid var(--border-leger); }
.panneau-entete h2 { margin: 0; }
/* Titre visible d'un panneau repliable (le h2 est hors du summary, visuellement caché). */
.panneau-titre { font-size: 1.15rem; font-weight: 600; line-height: 1.25; color: var(--text); }
.panneau-entete .meta { margin: 0; }
.panneau-corps { padding: 12px 16px 14px; }
.panneau-corps-plein { padding: 0; }
.panneau-corps-plein:not(.zone-liste) { overflow-x: auto; }
.panneau-corps-plein .liste-dense { border: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.panneau-pied { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 8px 16px 10px; border-top: 1px solid var(--border-leger); font-size: 0.86rem; }
details.panneau > summary { list-style: none; cursor: pointer; }
details.panneau > summary::-webkit-details-marker { display: none; }
details.panneau > summary h2::before { content: ''; display: inline-block; width: 7px; height: 7px; margin: 0 10px 2px 2px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); }
details.panneau[open] > summary h2::before { transform: rotate(45deg); }

/* Petits tableaux compacts (par dossier, par destinataire, répartitions) */
.table-compacte { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.table-compacte th, .table-compacte td { padding: 7px 12px; text-align: left; border-bottom: 1px solid var(--border-leger); }
.table-compacte thead th { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); background: var(--surface-2); }
.table-compacte tbody tr:last-child > * { border-bottom: 0; }
.table-compacte tbody tr:hover > * { background: var(--ligne-survol); }
.table-compacte .nombre { text-align: right; font-variant-numeric: tabular-nums; }
.table-compacte a { color: var(--text); text-decoration: none; font-weight: 500; }
.table-compacte a:hover { color: var(--lien); text-decoration: underline; }
.table-compacte .zero { color: var(--muted); }
.table-compacte tfoot td { font-weight: 600; background: var(--surface-2); }
.table-compacte caption { caption-side: top; text-align: left; padding: 0 0 6px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.table-compacte .code-dossier { margin-right: 6px; }
.table-dossiers .col-barre { width: 22%; min-width: 140px; }
.table-dossiers td.col-barre { vertical-align: middle; }
.table-dossiers .cel-lecteurs { font-size: 0.82rem; color: var(--text-2); }

/* --- Filtres en pastilles, segments, barre d'outils de liste ----------------- */
.outils-liste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0 0 10px; }
.outils-droite { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pastilles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.pastilles-titre { margin-right: 2px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.pastille { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-2); text-decoration: none; font-size: 0.84rem; font-weight: 500; white-space: nowrap; }
.pastille:hover { border-color: var(--action); color: var(--text); }
.pastille[aria-current="true"] { border-color: var(--action); background: var(--selection); color: var(--text); font-weight: 600; box-shadow: inset 0 0 0 1px var(--action); }
.pastille-nombre { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; }
.pastille[aria-current="true"] .pastille-nombre { color: var(--action-texte); }
.pastille-nul { opacity: 0.55; }
.pastille-dossier::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--neu); }
.pastille-societe::before { background: var(--info); }
.pastille-groupe::before { background: var(--ok); }
.pastille-partenaire::before { background: var(--warn); }
.pastille-interne::before { background: var(--muted); }
.segments { display: inline-flex; max-width: 100%; overflow-x: auto; border: 1px solid var(--border-champ); border-radius: var(--radius-md); }
.segments a { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 10px; font-size: 0.82rem; font-weight: 500; color: var(--text-2); text-decoration: none; white-space: nowrap; border-right: 1px solid var(--border-champ); background: var(--surface); }
.segments a:last-child { border-right: 0; }
.segments a:hover { background: var(--surface-2); color: var(--text); }
.segments a[aria-current="true"] { background: var(--action); color: var(--on-action); font-weight: 600; }
.segments-libelle { font-size: 0.8rem; color: var(--muted); }

/* Code court de dossier (administrateur) : étiquette marquée par catégorie */
/* Jamais tronqué : « 22.4280 » coupé devient un autre code (revue de fidélité). */
.code-dossier { display: inline-flex; flex: none; align-items: center; gap: 5px; padding: 0 7px; border-radius: var(--radius-sm); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.7; white-space: nowrap; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); }
.code-dossier::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--neu); }
.code-societe::before { background: var(--info); }
.code-groupe::before { background: var(--ok); }
.code-partenaire::before { background: var(--warn); }
.code-interne::before { background: var(--muted); }
/* Nom de dossier en toutes lettres (client) */
.nom-dossier { font-size: 0.84rem; color: var(--text-2); }
.nom-dossier-fort { font-weight: 600; }

/* --- Zone de travail : liste et volet (volet.css) --------------------------- */
.zone-travail { display: block; }
@media (min-width: 1600px) {
  .zone-travail { display: grid; grid-template-columns: minmax(0, 1fr) var(--largeur-volet, clamp(460px, 32vw, 720px)); gap: 16px; align-items: start; }
}
.zone-liste { container: liste / inline-size; min-width: 0; }

/* --- Liste dense : vrai tableau (colonnes alignées par construction) --------- */
.liste-dense { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); font-size: 0.88rem; }
.liste-dense-legende { caption-side: top; text-align: left; padding: 0 0 6px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.liste-dense thead th { position: sticky; top: var(--haut-colle, var(--hauteur-barre, 56px)); z-index: 3; padding: 7px 10px; background: var(--surface-2); color: var(--text-2); font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid var(--border); }
.liste-dense thead th:first-child { border-top-left-radius: var(--radius-lg); }
.liste-dense thead th:last-child { border-top-right-radius: var(--radius-lg); }
.liste-dense thead a.tri { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.liste-dense thead a.tri:hover { color: var(--text); text-decoration: underline; }
.liste-dense thead [aria-sort] a.tri { color: var(--action-texte); }
/* Sens du tri : triangle dessiné en CSS */
.liste-dense thead [aria-sort="ascending"] a.tri::after { content: ''; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 5px solid currentColor; }
.liste-dense thead [aria-sort="descending"] a.tri::after { content: ''; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; }
.liste-dense td { padding: 6px 10px; border-bottom: 1px solid var(--border-leger); vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.liste-dense tbody tr.ligne { cursor: pointer; }
.liste-dense tbody tr.ligne:hover > td { background: var(--ligne-survol); }
.liste-dense tbody tr.ligne:has(.case-lot:checked) > td { background: var(--ligne-cochee, rgba(255, 175, 35, 0.14)); }
.liste-dense tbody tr.ligne:focus-within > td,
.liste-dense tbody tr.ligne[aria-current="true"] > td { background: var(--ligne-courante, var(--selection)); }
/* Ligne courante : liseré orange en plus de la couleur (l'état ne repose pas que sur la couleur). */
.liste-dense tbody tr.ligne[aria-current="true"] > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.liste-dense tbody:last-child tr:last-child > td { border-bottom: 0; }
/* Ligne traitée (publiée, masquée ou passée pendant la relecture) */
.liste-dense tr.ligne.ligne-traitee > td { opacity: 0.55; }
.liste-dense tr.ligne.ligne-traitee .cel-titre a { text-decoration: line-through; text-decoration-color: var(--muted); }

/* Largeurs des colonnes (la colonne du titre prend le reste) */
.liste-dense .col-case { width: 38px; }
.liste-dense .col-prio { width: 46px; }
.liste-dense .col-prio-client { width: 104px; }
.liste-dense .col-ref { width: 96px; }
.liste-dense .col-dossier { width: 106px; }
.liste-dense .col-type { width: 136px; }
.liste-dense .col-pour { width: 170px; }
.liste-dense .col-echeance { width: 188px; }
.liste-dense .col-suite { width: 172px; }
.liste-dense .col-statut { width: 112px; }
.liste-dense .col-position { width: 168px; }
.liste-dense .col-assigne { width: 150px; }
.liste-dense .col-date { width: 104px; }
.liste-dense .col-publication { width: 104px; }
.liste-dense .col-motif { width: 250px; }
.liste-dense .col-cible { width: 120px; }
.liste-dense .col-repondre { width: 96px; }
.liste-client .col-ref { width: 84px; }
.liste-client .col-dossier { width: 150px; }

/* Cellules */
.liste-dense td.cel-case { padding-right: 0; }
.liste-dense td.cel-case input { width: 16px; height: 16px; margin: 0; accent-color: var(--action); vertical-align: middle; cursor: pointer; }
/* Double-clic sur une référence : rien ne se surligne. */
.cel-ref { font-family: var(--police-mono); font-size: 0.8rem; color: var(--text-2); user-select: none; -webkit-user-select: none; }
.liste-client .cel-ref { color: var(--muted); font-size: 0.74rem; }
.liste-dense td.cel-titre { white-space: normal; }
.cel-titre a { color: var(--text); font-weight: 500; text-decoration: none; }
.cel-titre a:hover { color: var(--lien); text-decoration: underline; }
.cel-titre a:focus-visible { outline-offset: 1px; }
.cel-titre .badge { margin-left: 6px; }
/* Titre sur deux lignes au plus (au lieu d'une ellipse) */
.titre-2l { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; line-height: 1.35; overflow-wrap: anywhere; }
.cel-type, .cel-pour, .cel-motif { color: var(--text-2); }
.liste-dense td.cel-dossier { overflow: visible; }
/* « Pour » et « Motif » passent sur 2 lignes plutôt que de couper la partie utile. */
.liste-dense td.cel-pour, .liste-dense td.cel-motif { white-space: normal; overflow-wrap: anywhere; }
.liste-dense td.cel-pour > span, .liste-dense td.cel-motif > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; line-height: 1.35; }
@container liste (min-width: 1400px) {
  .liste-dense .col-pour { width: 230px; }
}
.cel-echeance { font-variant-numeric: tabular-nums; }
.echeance-depassee { color: var(--err-tx); font-weight: 700; }
.echeance-jour { color: var(--warn-tx); font-weight: 700; }
.echeance-proche { color: var(--warn-tx); font-weight: 600; }
/* Délai relatif à côté de la date (« dans 2 j », « retard 1 j ») */
.relatif { margin-left: 6px; font-size: 0.76rem; color: var(--muted); font-weight: 500; }
.echeance-depassee + .relatif { color: var(--err-tx); }
.echeance-jour + .relatif, .echeance-proche + .relatif { color: var(--warn-tx); }
.prio { display: inline-flex; min-width: 26px; justify-content: center; padding: 0 5px; border-radius: 4px; font-size: 0.72rem; font-weight: 700; line-height: 1.6; background: var(--neu-bg); color: var(--neu-tx); }
.prio-P1 { background: var(--err-bg); color: var(--err-tx); }
.prio-P2 { background: var(--warn-bg); color: var(--warn-tx); }
.prio-P3 { background: var(--neu-bg); color: var(--neu-tx); }
/* Suite : pastille de la couleur de la corbeille, et le texte. */
.suite { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-2); }
.suite::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--neu); flex: none; }
.suite-moi::before { background: var(--err); }
.suite-publier::before { background: var(--accent); }
.suite-transmettre::before { background: var(--info); }
.suite-destinataire::before { background: var(--ok); }
/* « Répondre » (client) : visible sur la ligne courante, au survol ou au focus ; toujours sur écran tactile. */
.lien-repondre { font-size: 0.84rem; font-weight: 600; opacity: 0; }
.liste-dense tr.ligne:hover .lien-repondre,
.liste-dense tr.ligne:focus-within .lien-repondre,
.liste-dense tr.ligne[aria-current="true"] .lien-repondre,
.lien-repondre:focus { opacity: 1; }
@media (hover: none) { .lien-repondre { opacity: 1; } }

/* --- Groupes (destinataire, période, dossier, motif) ------------------------ */
.groupe-entete th { padding: 12px 10px 6px; text-align: left; background: var(--surface); border-bottom: 1px solid var(--border); font-weight: 500; white-space: normal; text-transform: none; letter-spacing: normal; }
.groupe-entete-contenu { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; }
.groupe-nom { font-size: 0.9rem; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.groupe-org { color: var(--muted); font-size: 0.84rem; }
.groupe-infos { color: var(--muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.groupe-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.groupe-form { display: inline-flex; margin: 0; }
.groupe-retard .groupe-nom { color: var(--err-tx); }
/* Repère du plan (rappel « Échéance … ») : losange dessiné en CSS */
.groupe-repere, .sous-groupe-repere { flex-basis: 100%; font-size: 0.8rem; color: var(--info-tx); font-weight: 500; text-transform: none; letter-spacing: normal; }
.groupe-repere::before, .sous-groupe-repere::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px; transform: rotate(45deg); border: 2px solid var(--info); vertical-align: 1px; }
.sous-groupe-repere { display: block; margin-top: 2px; }
.groupe-qui { flex-basis: 100%; font-size: 0.8rem; color: var(--muted); font-weight: 500; }
.groupe-qui.texte-warn { color: var(--warn-tx); font-weight: 600; }
/* Sous-titre de période dans un groupe */
.sous-groupe th { padding: 6px 10px 4px 48px; text-align: left; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); background: var(--surface); border-bottom: 1px solid var(--border-leger); white-space: normal; }
.sans-case .sous-groupe th { padding-left: 12px; }
.groupe-suite td { padding: 8px 10px 10px 58px; font-size: 0.84rem; white-space: normal; }
.sans-case .groupe-suite td { padding-left: 12px; }

/* --- Colonnes retirées selon la largeur de la liste (SPEC § 7) --------------
   Une colonne masquée passe à 0 : le tableau garde toute sa largeur. */
@container liste (max-width: 980px) {
  .liste-dense .col-type { width: 0; }
  .liste-dense .cel-type, .liste-dense .th-type { padding: 0; border-left: 0; border-right: 0; visibility: hidden; }
}
@container liste (max-width: 1040px) {
  .liste-dense .col-pour { width: 0; }
  .liste-dense .cel-pour, .liste-dense .th-pour { padding: 0; visibility: hidden; }
}
@container liste (max-width: 700px) {
  .liste-dense .col-suite { width: 0; }
  .liste-dense .cel-suite, .liste-dense .th-suite { padding: 0; visibility: hidden; }
  .liste-dense .col-motif { width: 150px; }
}
/* Sous 640 px : lignes en cartes (P, réf., dossier, échéance, puis titre complet). */
@container liste (max-width: 640px) {
  .liste-dense, .liste-dense tbody, .liste-dense tr { display: block; width: 100%; }
  .liste-dense { border: 0; background: transparent; }
  .liste-dense thead, .liste-dense colgroup { display: none; }
  .liste-dense tbody.groupe { margin-bottom: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
  .liste-dense tr.ligne { display: grid; grid-template-columns: 30px auto auto auto minmax(0, 1fr); grid-template-areas: "case prio ref dossier echeance" "case titre titre titre titre" "case autre autre autre autre"; align-items: center; gap: 2px 8px; padding: 8px 12px 10px 10px; border-bottom: 1px solid var(--border-leger); }
  .liste-dense.sans-case tr.ligne { grid-template-columns: auto auto auto minmax(0, 1fr); grid-template-areas: "prio ref dossier echeance" "titre titre titre titre" "autre autre autre autre"; padding-left: 12px; }
  .liste-dense tr.ligne > td { padding: 0; border: 0; min-width: 0; background: transparent !important; }
  .liste-dense tr.ligne[aria-current="true"] { box-shadow: inset 3px 0 0 var(--accent); background: var(--ligne-courante, var(--selection)); }
  .liste-dense tr.ligne[aria-current="true"] > td:first-child { box-shadow: none; }
  .liste-dense td.cel-case { grid-area: case; }
  .liste-dense td.cel-prio { grid-area: prio; }
  .liste-dense td.cel-ref { grid-area: ref; }
  .liste-dense td.cel-dossier { grid-area: dossier; }
  .liste-dense td.cel-echeance { grid-area: echeance; justify-self: end; font-size: 0.82rem; white-space: normal; text-align: right; }
  /* Le code du dossier garde sa propre largeur (jamais « 2GII » pour « 2GIK »). */
  .liste-dense td.cel-dossier { overflow: visible; }
  .liste-dense td.cel-titre { grid-area: titre; white-space: normal; font-size: 0.92rem; }
  .liste-dense td.cel-titre .titre-2l { -webkit-line-clamp: unset; line-clamp: none; display: inline; }
  .liste-dense td.cel-motif, .liste-dense td.cel-cible, .liste-dense td.cel-repondre { grid-area: autre; white-space: normal; }
  .liste-dense td.cel-type, .liste-dense td.cel-pour, .liste-dense td.cel-suite { display: none; }
  .liste-dense .groupe-entete, .liste-dense .sous-groupe, .liste-dense .groupe-suite { display: block; }
  .liste-dense .groupe-entete th, .liste-dense .sous-groupe th, .liste-dense .groupe-suite td { display: block; padding: 10px 12px 8px; }
  .liste-dense .groupe-actions { margin-left: 0; width: 100%; }
  .liste-dense .lien-repondre { opacity: 1; }
}

/* --- Barre de sélection ------------------------------------------------------
   Collante à 16 px du bas de la liste ; masquée sans sélection (hidden posé par
   pilotage.js). Elle ne recouvre jamais le rappel du bandeau d'aperçu. */
.barre-selection { position: sticky; bottom: 16px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0 0; padding: 8px 10px 8px 16px; border-radius: var(--radius-lg); background: var(--topbar); color: var(--topbar-texte); box-shadow: var(--ombre-carte); }
.barre-selection[hidden] { display: none; }
.barre-selection-compte { font-weight: 700; margin-right: auto; }
.barre-selection .btn-secondaire,
.barre-selection .btn-lien { background: transparent; color: var(--topbar-texte); border-color: rgba(255, 255, 255, 0.45); }
.barre-selection .btn-lien { border-color: transparent; }
.barre-selection .btn-secondaire:hover,
.barre-selection .btn-lien:hover { border-color: var(--accent); color: var(--accent); }
.barre-selection .btn-secondaire .touche { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); color: inherit; }
body:has(.simulation-rappel:not([hidden])) .barre-selection { bottom: 68px; }

/* --- Progression de la relecture (en tête de liste) ------------------------- */
.progression { margin: 0 0 10px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.progression-texte { margin: 0 0 8px; font-size: 0.88rem; }
.progression-lot[hidden] { display: none; }
.progression-aide { margin: 6px 0 0; font-size: 0.78rem; color: var(--muted); }
@media (max-width: 640px) { .progression-aide { display: none; } }
.progression-barre { display: block; width: 100%; height: 8px; border-radius: 999px; overflow: hidden; }
.prog-lot-a { fill: var(--surface-3); }
.prog-lot-b { fill: var(--border-champ); }
.prog-lot-a.prog-lot-courant, .prog-lot-b.prog-lot-courant, .prog-lot-courant { fill: var(--accent); }

/* --- Barres empilées (corbeilles, avancement d'un dossier) ------------------- */
.barre-empilee { display: block; width: 100%; height: 8px; border-radius: 999px; overflow: hidden; }
.barre-fond { fill: var(--surface-3); }
.bc-A { fill: var(--err); }
.bc-B { fill: var(--accent); }
.bc-C { fill: var(--info); }
.bc-D { fill: var(--ok); }
.bc-rep { fill: var(--info); }
.bc-pub { fill: var(--ok); }
.bc-autre { fill: var(--neu); }
/* Légendes en texte à côté des barres (pastille de couleur dessinée en CSS) */
.dec::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: 0; background: var(--neu); }
.dec-A::before { background: var(--err); }
.dec-B::before { background: var(--accent); }
.dec-C::before { background: var(--info); }
.dec-D::before { background: var(--ok); }
.dec-rep::before { background: var(--info); }
.dec-pub::before { background: var(--ok); }
.dec-p1::before { background: var(--err); }
.dec-autre::before { background: var(--neu); }
.leg-inline { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin: 0 4px 0 8px; vertical-align: -1px; background: var(--neu); }
.leg-A { background: var(--err); }
.leg-B { background: var(--accent); }
.leg-C { background: var(--info); }
.leg-D { background: var(--ok); }
.leg-rep { background: var(--info); }

/* --- Frise texte « Jusqu'au gel » -------------------------------------------- */
.frise-texte { list-style: none; margin: 0; padding: 0; }
.frise-ligne { display: grid; grid-template-columns: 6.4rem minmax(0, 1fr); gap: 12px; padding: 7px 0 7px 10px; border-left: 3px solid var(--border); font-size: 0.86rem; }
.frise-ligne + .frise-ligne { border-top: 1px solid var(--border-leger); }
.frise-ligne-cle { border-left-color: var(--accent); background: var(--selection); }
.frise-ligne-cle .frise-titre { font-weight: 700; }
.frise-ligne-retard { border-left-color: var(--err); }
.frise-ligne-retard .frise-date { color: var(--err-tx); }
.frise-date { display: flex; flex-direction: column; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-2); }
.frise-date .relatif { margin-left: 0; }
.frise-corps { display: grid; gap: 4px; min-width: 0; }
.frise-titre { color: var(--text); overflow-wrap: anywhere; }
.frise-dec { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 0.78rem; color: var(--text-2); }
.frise-reste { margin: 6px 0 0; }
.frise-retards { margin: 0 0 8px; padding: 6px 10px; border-left: 3px solid var(--err); font-size: 0.84rem; color: var(--err-tx); }
/* Date sur une seule ligne (« ven. 02.10.2026 ») */
.frise-date { white-space: nowrap; }

/* --- Lots d'envoi (tableau de bord) ------------------------------------------ */
.lots { list-style: none; margin: 0; padding: 0; }
.lots .lot { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-leger); }
.lots .lot:last-child { border-bottom: 0; }
.lot-texte { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.lot-nom { font-weight: 600; font-size: 0.9rem; overflow-wrap: anywhere; }
.lot-infos { flex-basis: 100%; font-size: 0.8rem; color: var(--muted); }
.lot-infos .code-dossier { font-size: 0.7rem; }

/* --- « Ce qui a bougé depuis lundi » ----------------------------------------- */
.bouge { list-style: none; margin: 0; padding: 0; font-size: 0.86rem; }
.bouge li { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--border-leger); }
.bouge li:last-child { border-bottom: 0; }
.bouge-jour { margin: 8px 0 2px; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); white-space: nowrap; }
.bouge-jour:first-child { margin-top: 0; }
.bouge li.bouge-evenement { grid-template-columns: minmax(0, 1fr); }
.bouge-date { color: var(--muted); font-variant-numeric: tabular-nums; }
.bouge-texte { min-width: 0; overflow-wrap: anywhere; }

/* --- Cartes de dossier (client, fiche de dossier) ---------------------------- */
.cartes-dossiers { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.carte-dossier { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); min-width: 0; }
.carte-dossier p { margin: 0; }
.carte-dossier-titre { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.carte-dossier-actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* --- État vide réel ---------------------------------------------------------- */
.etat-vide { padding: 40px 20px; text-align: center; background: var(--surface); border: 1px dashed var(--border-champ); border-radius: var(--radius-lg); }
.etat-vide p { margin: 0 0 6px; }
.etat-vide-titre { font-weight: 600; color: var(--text); }
.etat-vide-texte { color: var(--text-2); max-width: 78ch; margin-left: auto !important; margin-right: auto !important; }

/* --- Pagination compacte ----------------------------------------------------- */
.pagination-compacte { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin: 8px 0 0; font-size: 0.84rem; color: var(--muted); }

/* --- Message discret après une action (repris de tableau.css) ---------------- */
.annonce { position: fixed; left: 50%; bottom: 20px; z-index: 60; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100vw - 32px); padding: 8px 8px 8px 16px; border-radius: var(--radius-md); background: var(--topbar); color: var(--topbar-texte); box-shadow: var(--ombre-carte); font-size: 0.92rem; }
.annonce[hidden] { display: none; }
body:has(.barre-selection:not([hidden])) .annonce { bottom: 84px; }
.annonce button { font: inherit; font-size: 0.84rem; cursor: pointer; color: var(--accent); background: none; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 6px 8px; font-weight: 600; }

/* --- Dialogues natifs (aide des raccourcis, confirmation) -------------------- */
.dialogue { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); box-shadow: var(--ombre-carte); }
.dialogue::backdrop { background: rgba(10, 14, 24, 0.55); }
.dialogue-entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border-leger); }
.dialogue-entete h2 { margin: 0; }
.dialogue-corps { display: grid; gap: 18px; padding: 14px 18px 18px; }
@media (min-width: 700px) { .dialogue-corps { grid-template-columns: 1fr 1fr; } }
.dialogue-corps-simple { grid-template-columns: minmax(0, 1fr) !important; }
.dialogue-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 0 18px 16px; }
.raccourcis { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 0.88rem; align-items: baseline; }
.raccourcis dt { white-space: nowrap; }
.raccourcis dd { margin: 0; color: var(--text-2); }
.raccourcis-titre { margin: 0 0 8px; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }

/* --- Petits boutons ---------------------------------------------------------- */
.btn-mini { min-height: 24px; padding: 1px 8px; font-size: 0.76rem; margin-left: 4px; }
.btn-bloc { display: flex; width: 100%; margin-bottom: 12px; }

/* --- Téléphone : touches masquées, cibles de 40 px ----------------------------- */
@media (max-width: 640px) {
  .touche, [data-ouvrir-aide] { display: none; }
  .pastille, .segments a, .rebours-element { min-height: 40px; }
  .liste-dense td.cel-case input { width: 22px; height: 22px; }
  .frise-ligne { grid-template-columns: 5.2rem minmax(0, 1fr); }
  .liste-dense .col-echeance { width: 120px; }
  .barre-selection { bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .tuile-chiffre, .pastille, .segments a, .rebours-element, .barre-selection { transition: none !important; animation: none !important; }
}

/* --- Fiche de dossier (lot L9, ajout) ----------------------------------------
   Barre d'avancement espacée de son chiffre ; sur téléphone, le menu Plus
   (placé près du bord gauche) s'ouvre dans le flux au lieu de déborder de
   l'écran. */
.dossier-barre { margin: 8px 0 12px; }
@media (max-width: 640px) {
  .dossier-entete .fiche-plus-menu { position: static; margin-top: 6px; box-shadow: none; }
}

/* --- Impression : ni barres ni progression ; en-têtes de tableau non collants - */
@media print {
  .barre-selection, .progression, .outils-liste, .groupe-actions, .touche { display: none !important; }
  .zone-travail { display: block; }
  .liste-dense thead th { position: static; }
  .liste-dense tr.ligne { break-inside: avoid; }
  .lien-repondre { opacity: 1; }
}

/* Second titre d'un panneau (« Autres fiches en cours de vos dossiers », vue client) */
.panneau-entete-second { border-top: 1px solid var(--border); }
.panneau-entete-second h3 { margin: 0; font-size: 1rem; }
/* Prochaines dates (client) : « ven. 02.10.2026 » sur une ligne. */
.bord-client .frise-ligne { grid-template-columns: 7.8rem minmax(0, 1fr); }