.table-container {
    width: 100%;
    overflow-x: auto;
    background-color: #ffffff;
    box-shadow: var(--shadow);
}

/* Variante intégrée dans un panneau qui porte déjà son propre relief */
.table-container--plat {
    box-shadow: none;
    margin: 0;
}

/* Variante intégrée + hauteur bornée avec défilement (résultats de recherche) */
.table-container--plat-scroll {
    box-shadow: none;
    margin: 0 0 12px;
    max-height: 260px;
    overflow-y: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th {
    background-color: var(--primary);
    color: #ffffff;
    text-align: left;
    padding: 18px 24px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
}

td {
    padding: 18px 24px;
    border-bottom: 1px solid var(--tertiary);
    color: var(--text);
    vertical-align: middle;
}

tr:hover td {
    background-color: #e6ebf2;
}

/* Ligne sélectionnée (listes de recherche des modales d'ajout) : rendu volontairement
   très marqué pour qu'elle ne se confonde jamais avec le simple survol ci-dessus. */
tr.ligne-selectionnee td,
tr.ligne-selectionnee:hover td {
    background-color: var(--secondary);
    color: #ffffff;
    font-weight: 700;
}

/* ── Largeurs de colonnes (à poser sur les <th>) ─────────────────────────── */

.col-80  { width: 80px; }
.col-90  { width: 90px; }
.col-100 { width: 100px; }
.col-110 { width: 110px; }
.col-115 { width: 115px; }
.col-120 { width: 120px; }
.col-130 { width: 130px; }
.col-140 { width: 140px; }
.col-150 { width: 150px; }
.col-160 { width: 160px; }
.col-170 { width: 170px; }
.col-180 { width: 180px; }
.col-200 { width: 200px; }
.col-210 { width: 210px; }

/* Colonne réduite à son contenu */
.col-min {
    width: 1%;
    white-space: nowrap;
}

/* ── Cellule d'état vide (aucun résultat / aucune donnée) ────────────────── */

.etat-vide {
    color: var(--text-subtle);
    text-align: center;
    padding: 40px;
}

/* Variante un peu plus lisible */
.etat-vide-clair {
    color: var(--text-muted);
}

/* ==========================================================================
   CELLULE ACTIVABLE (2026-08-25)

   Dix-sept lignes de tableau n'étaient activables qu'à la souris : un @onclick
   sur le <tr>, que le clavier ne peut ni atteindre ni déclencher. Plutôt que de
   rendre la ligne focusable — ce qui obligerait à lui poser un role="button" et
   lui ferait perdre sa sémantique de ligne pour un lecteur d'écran — c'est la
   cellule porteuse de l'identité qui devient un vrai bouton.

   Il ne s'en distingue pas visuellement : le clic sur la ligne entière reste
   disponible pour la souris, le bouton n'ajoute que le chemin clavier.
   ========================================================================== */

.cellule-activable {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    width: auto;
    cursor: pointer;
}

.cellule-activable:hover {
    text-decoration: underline;
}

/* Sur une ligne sélectionnée, le texte passe en blanc (cf. .ligne-selectionnee) :
   l'anneau de focus doit trancher sur ce fond plein. */
.ligne-selectionnee .cellule-activable:focus-visible {
    outline-color: #ffffff;
}