/* ==========================================================================
   PADC — tableau de gestion (/portail/tableau)
   Barre d'outils (recherche à la frappe + filtres), résultats mis à jour sans
   rechargement, « Non renseigné », badge de divergence, fiche focus et
   comparaison côte à côte.
   Disposition : tableau complet à en-tête collant sur grand écran (≥ 75rem),
   fiches en grille sur tablette, fiches empilées sur mobile (filtres repliables).
   ========================================================================== */

/* --- Barre d'outils -------------------------------------------------------- */
.tableau-outils {
  margin: 0 0 var(--e-6);
}

.tableau-outils__basculer { display: none; }

.tableau-filtres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--e-4);
  align-items: end;
  padding: var(--e-4);
  border: 1px solid var(--trait);
  border-radius: var(--r-3);
  background: var(--surface);
  box-shadow: var(--ombre-1);
}

.tableau-filtres__recherche {
  grid-column: 1 / -1;
}

.tableau-filtres .champ {
  margin: 0;
}

.tableau-filtres__comparaison {
  grid-column: 1 / -1;
}

.tableau-filtres__cmp {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-1);
}

.tableau-filtres__cmp .selection {
  min-width: 9rem;
  flex: 1 1 9rem;
}

.tableau-filtres__actions {
  grid-column: 1 / -1;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--e-2);
}

@media (min-width: 48rem) {
  .tableau-filtres__recherche {
    grid-column: span 2;
  }
}

/* Mobile : filtres repliés derrière le bouton « Filtres » (la recherche reste à un geste). */
@media (max-width: 47.99rem) {
  .tableau-outils__basculer { display: inline-flex; margin-bottom: var(--e-3); }
  .js .tableau-filtres:not(.est-ouvert) { display: none; }
  .tableau-filtres { padding: var(--e-3); gap: var(--e-3); }
  .tableau-filtres__actions .bouton { flex: 1 1 auto; justify-content: center; }
}

/* --- Résultats ----------------------------------------------------------------- */
.tableau__compte {
  font-weight: 500;
  color: var(--encre-3);
  font-size: var(--taille-s);
}

.tableau__non-renseigne {
  color: var(--encre-3);
  font-style: italic;
  font-size: var(--taille-xs);
}

.tableau__divergence {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  margin-inline-start: var(--e-2);
  padding: 0 var(--e-2);
  border-radius: var(--r-pilule);
  background: var(--alerte-fond);
  color: var(--alerte);
  font-size: var(--taille-xs);
  font-weight: 650;
  white-space: nowrap;
}

.tableau__ligne--divergence > td {
  background: color-mix(in srgb, var(--alerte-fond) 38%, var(--surface));
}

.tableau tbody tr.tableau__ligne--divergence:hover > td {
  background: color-mix(in srgb, var(--alerte-fond) 55%, var(--surface));
}

/* Sort final : pastille colorée doublée du libellé. */
.tableau__sort {
  display: inline-block;
  padding: 1px var(--e-2);
  border: 1px solid var(--neutre-trait);
  border-radius: var(--r-pilule);
  background: var(--neutre-fond);
  color: var(--neutre);
  font-size: var(--taille-xs);
  font-weight: 650;
  line-height: 1.5;
}
.tableau__sort--conservation { border-color: var(--succes-trait); background: var(--succes-fond); color: var(--succes); }
.tableau__sort--destruction { border-color: var(--erreur-trait); background: var(--erreur-fond); color: var(--erreur); }
.tableau__sort--tri { border-color: var(--alerte-trait); background: var(--alerte-fond); color: var(--alerte); }
.tableau__sort--conditionnel { border-color: var(--info-trait); background: var(--info-fond); color: var(--info); }

.tableau__actions {
  white-space: nowrap;
}

.chargement {
  padding: var(--e-6);
  text-align: center;
  color: var(--encre-3);
}

/* Mise à jour fluide des résultats (filtres, recherche). */
.tableau--maj { animation: tableau-maj var(--duree-moyenne) var(--courbe-sortie); }
@keyframes tableau-maj { from { opacity: 0.35; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tableau--maj { animation: none; } }
.mouvement-reduit .tableau--maj { animation: none; }

/* Affichage progressif : « Afficher … lignes de plus ». */
.tableau__suite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  margin: var(--e-5) 0 0;
}
.tableau__suite[hidden] { display: none; }
.tableau__affichees { color: var(--encre-3); font-size: var(--taille-s); }

/* --- Grand écran : tableau complet, en-tête collant ---------------------------------- */
@media (min-width: 75rem) {
  .tableau-gestion-zone .tableau-conteneur { overflow: visible; }
  .tableau-gestion { table-layout: auto; }
  .tableau-gestion thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    box-shadow: 0 1px 0 var(--vert-200);
  }
  .tableau-gestion td { overflow-wrap: anywhere; }
  .tableau-gestion .tableau__cellule--categorie { min-width: 9rem; }
  .tableau-gestion .tableau__cellule--type { min-width: 12rem; }
  .tableau-gestion .tableau__cellule--duree { white-space: nowrap; }
  .tableau-gestion .tableau__cellule--observations { min-width: 11rem; font-size: var(--taille-xs); }
  .tableau-gestion .tableau__cellule--maj { white-space: nowrap; font-size: var(--taille-xs); }
}

/* --- Tablette et mobile : fiches ------------------------------------------------------- */
@media (max-width: 74.99rem) {
  .tableau-gestion-zone .tableau-conteneur {
    overflow: visible;
    border: 0;
    background: none;
    box-shadow: none;
  }
  .tableau-gestion,
  .tableau-gestion tbody { display: block; width: 100%; }
  .tableau-gestion thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tableau-gestion tbody {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
    gap: var(--e-3);
  }
  .tableau-gestion tr {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--e-3) var(--e-4);
    border: 1px solid var(--trait);
    border-inline-start: 4px solid var(--vert-500);
    border-radius: var(--r-3);
    background: var(--surface);
    box-shadow: var(--ombre-1);
  }
  .tableau-gestion tr.tableau__ligne--divergence { border-inline-start-color: var(--alerte-trait); }
  .tableau-gestion tbody tr:nth-child(even) > *,
  .tableau-gestion tbody tr:hover > *,
  .tableau-gestion tr.tableau__ligne--divergence > td { background: transparent; }
  .tableau-gestion td {
    display: grid;
    grid-template-columns: minmax(7.5rem, 38%) 1fr;
    gap: var(--e-3);
    padding: 3px 0;
    border: 0;
    overflow-wrap: anywhere;
  }
  .tableau-gestion td::before {
    content: attr(data-label);
    padding-top: 2px;
    color: var(--encre-3);
    font-size: var(--taille-xs);
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  /* En tête de fiche : juridiction, catégorie, puis la durée mise en avant. */
  .tableau-gestion .tableau__cellule--juridiction { order: -3; display: block; padding-bottom: 0; font-weight: 700; color: var(--vert-800); }
  .tableau-gestion .tableau__cellule--categorie { order: -2; display: block; padding-top: 0; color: var(--encre-2); font-size: var(--taille-s); }
  .tableau-gestion .tableau__cellule--juridiction::before,
  .tableau-gestion .tableau__cellule--categorie::before { content: none; }
  .tableau-gestion .tableau__cellule--duree { order: -1; margin-top: var(--e-2); padding: var(--e-2) var(--e-3); border-radius: var(--r-2); background: var(--vert-50); }
  .tableau-gestion .tableau__cellule--duree strong { font-size: var(--taille-m); color: var(--vert-900); }
  .tableau-gestion .tableau__actions {
    order: 99;
    display: block;
    margin-top: var(--e-2);
    padding-top: var(--e-3);
    border-top: 1px dashed var(--trait);
    white-space: normal;
  }
  .tableau-gestion .tableau__actions::before { content: none; }
  .tableau-gestion .tableau__actions .bouton { width: 100%; justify-content: center; }
}

@media (max-width: 30rem) {
  .tableau-gestion td { grid-template-columns: 1fr; gap: 0; }
  .tableau-gestion tr { padding: var(--e-3); }
}

/* --- Fiche focus (paramètre ?focus=) --------------------------------------- */
.focus-carte {
  margin: 0 0 var(--e-6);
  padding: var(--e-5);
  border: 1px solid var(--info-trait);
  border-radius: var(--r-3);
  background: var(--surface);
  box-shadow: var(--ombre-1);
}

.focus-carte h2 {
  margin-top: 0;
}

.focus-carte .faits {
  margin: var(--e-4) 0;
}

.focus__historique {
  margin: var(--e-3) 0 0;
  padding-inline-start: var(--e-5);
}

.focus__historique li {
  margin-bottom: var(--e-2);
}

.focus__historique-vide {
  color: var(--encre-3);
  font-style: italic;
}

/* --- Comparaison côte à côte ------------------------------------------------ */
.comparaison {
  margin-top: var(--e-7);
}

.comparaison__vide {
  color: var(--encre-3);
  display: flex;
  align-items: center;
  gap: var(--e-2);
}

.tableau-comparaison th[scope="row"] {
  min-width: 12rem;
}

.comparaison__regle {
  margin: 0 0 var(--e-3);
  padding-bottom: var(--e-3);
  border-bottom: 1px dashed var(--trait);
  display: grid;
  gap: 2px;
}

.comparaison__regle:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.comparaison__regle strong {
  font-size: var(--taille-m);
}

.comparaison__regle span {
  color: var(--encre-2);
  font-size: var(--taille-xs);
}

.comparaison__regle a {
  font-size: var(--taille-xs);
}

/* --- En-tête de page : action principale ----------------------------------- */
.entete-page__action {
  margin: var(--e-4) 0 0;
}

/* --- Impression : tableau complet ---------------------------------------------------- */
@media print {
  .tableau-outils, .tableau__suite, .tableau__actions { display: none !important; }
}