table[data-resizable] {
    table-layout: auto;
    font-size: 0.8rem;
    /* Bootstrap force width:100% sur .table : sans ce correctif, quand la somme
       des largeurs de colonnes est plus petite que le conteneur (peu de
       colonnes affichées, ex. page Échéances courantes), le navigateur doit
       redistribuer l'espace en trop — et le concentre entièrement dans la 1re
       colonne au lieu de le répartir, créant un grand vide avant les colonnes
       suivantes. En largeur "auto", le tableau ne fait que la somme de ses
       colonnes, sans espace en trop à redistribuer. */
    width: auto;
}

/* La largeur des colonnes se règle directement sur les <th>/<td> (via
   [data-col]), plus sur <col> (Candice, 22/09/2026 — session de diagnostic
   approfondi via la console). "table-layout: fixed" pilotée par <colgroup>
   semblait le bon outil (seule la 1re ligne d'en-tête compte pour son
   algorithme, ce qui évite qu'un <th> de groupe fusionné/colspan ne fausse le
   calcul), mais s'est révélée profondément cassée dans un cas précis et
   pourtant très ordinaire ici : un tableau qui déborde réellement (barre de
   défilement horizontale visible) à l'intérieur d'un conteneur
   "overflow: auto" contenant des en-têtes "position: sticky" — exactement la
   situation de la page Dossiers avec ses 29+ colonnes. Dans ce cas, AUCUNE
   largeur de <col> (ni même de <th>) n'est jamais prise en compte, y compris
   au tout premier rendu — confirmé par des dizaines d'essais isolés en
   console (mutation de style, règle CSS !important, reconstruction complète
   du tableau : rien n'y change). Seule combinaison qui fonctionne de façon
   fiable, y compris dans ce cas : "table-layout: auto" + largeur posée
   directement sur les cellules elles-mêmes via [data-col], pas sur <col>.
   Les trois déclarations width/min-width/max-width à la MÊME valeur sont
   nécessaires ensemble : sans min-width, avec des dizaines de colonnes,
   "table-layout: auto" réduit les colonnes en dessous de leur largeur voulue
   pour essayer de tout faire tenir dans le conteneur plutôt que de déborder
   avec un défilement horizontal — width/max-width seuls ne bornent que
   l'agrandissement, jamais ce rétrécissement (constaté : les largeurs
   personnalisées revenaient systématiquement à une valeur écrasée dès le
   relâchement du clic). Sans max-width, à l'inverse, un contenu long
   agrandirait la colonne au lieu d'être tronqué/renvoyé à la ligne. */
table[data-resizable] th {
    position: relative;
}

table[data-resizable] th,
table[data-resizable] td {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
}

table[data-resizable] :is(th, td)[data-col] {
    width: 2cm;
    min-width: 2cm;
    max-width: 2cm;
}

table[data-resizable] :is(th, td)[data-col="raison_sociale"] {
    width: 5cm;
    min-width: 5cm;
    max-width: 5cm;
}

/* Page Dossiers : les 2cm par défaut (pensés pour les libellés courts des
   pages Échéances comme "TVA" ou "CFE") sont bien trop étroits pour les
   libellés longs de cette page ("Courrier déontologique", "Vérif. pièce
   d'identité"...) — le texte se retrouvait coupé lettre par lettre. */
#table-dossiers :is(th, td)[data-col] {
    width: 4cm;
    min-width: 4cm;
    max-width: 4cm;
}

#table-dossiers :is(th, td)[data-col="raison_sociale"] {
    width: 8cm;
    min-width: 8cm;
    max-width: 8cm;
}

/* Colonne "Dossier" figée à gauche au défilement horizontal, sur le même
   principe que les en-têtes figées à la verticale ci-dessus (Candice,
   19/09/2026) : fond opaque obligatoire pour masquer les colonnes qui
   défilent en-dessous, ce qui fait perdre le zébrage/survol Bootstrap sur
   cette seule colonne — compromis habituel d'une colonne figée. */
#table-dossiers th[data-col="raison_sociale"],
#table-dossiers td[data-col="raison_sociale"] {
    position: sticky;
    left: 0;
    background-color: var(--bs-body-bg, #fff);
}

#table-dossiers td[data-col="raison_sociale"] {
    z-index: 1;
}

/* Le coin figé à la fois en haut et à gauche doit rester au-dessus des autres
   en-têtes (z-index: 3) quand ils défilent horizontalement en-dessous. */
#table-dossiers thead th[data-col="raison_sociale"] {
    z-index: 5;
}

/* Colonnes aux libellés de valeur particulièrement longs (ex. "Prélèvement
   automatique compte Pro", "Cabinet (suppléant)", "Collaboratif internalisé",
   "Cabinet sous-traité") : élargies pour rester sur 2 lignes maximum, quitte
   à voir moins de colonnes au premier coup d'œil et à défiler vers la droite
   pour la suite (Candice, 08/09/2026). */
#table-dossiers :is(th, td)[data-col="mode_paiement"],
#table-dossiers :is(th, td)[data-col="compte_impots_gouv"],
#table-dossiers :is(th, td)[data-col="plan_pennylane"],
#table-dossiers :is(th, td)[data-col="gestion_juridique"],
#table-dossiers :is(th, td)[data-col="mission_paie"],
#table-dossiers :is(th, td)[data-col="parametrage_facturation"],
#table-dossiers :is(th, td)[data-col="statut"],
#table-dossiers :is(th, td)[data-col="recuperation_ca"] {
    width: 5cm;
    min-width: 5cm;
    max-width: 5cm;
}

/* Page Échéances Bilan : beaucoup de colonnes, la colonne Dossier reste large (5cm). */
#table-echeances-bilan :is(th, td)[data-col="dossier"] {
    width: 5cm;
    min-width: 5cm;
    max-width: 5cm;
}

/* Page Échéances courante : la colonne Dossier reste large pour ne pas
   tronquer les raisons sociales longues. */
#table-echeances :is(th, td)[data-col="dossier"] {
    width: 7cm;
    min-width: 7cm;
    max-width: 7cm;
}

/* QLAB/QPMEC : la cellule (champ date + case N/A, sur une seule ligne compacte)
   a besoin d'un peu plus de place que les colonnes de statut classiques (2cm). */
table[data-resizable] :is(th, td)[data-col="QLAB"],
table[data-resizable] :is(th, td)[data-col="QPMEC"] {
    width: 3cm;
    min-width: 3cm;
    max-width: 3cm;
}

/* Page Échéances Bilan : 2cm par défaut pour toutes les colonnes de "Pièces
   reçues" à la dernière (redondant avec la règle générique ci-dessus, mais
   explicite : QLAB/QPMEC et Dossier gardent leur propre largeur, cf. ci-dessus). */
#table-echeances-bilan :is(th, td)[data-col]:not([data-col="dossier"]):not([data-col="QLAB"]):not([data-col="QPMEC"]) {
    width: 2cm;
    min-width: 2cm;
    max-width: 2cm;
}

/* Page Échéances courantes : 4cm par défaut pour toutes les colonnes de
   contenu (Dossier garde sa propre largeur, cf. ci-dessus). */
#table-echeances :is(th, td)[data-col]:not([data-col="dossier"]) {
    width: 4cm;
    min-width: 4cm;
    max-width: 4cm;
}

/* Zone cliquable élargie (Candice, 22/09/2026 : vidéo montrant des essais de
   redimensionnement répétés, à plusieurs frontières de colonnes, qui ne
   "prennent" jamais). 6px centré exactement sur la frontière était trop fin :
   un clic à quelques pixels près ratait la poignée et atterrissait sur le
   lien de tri de l'en-tête juste en-dessous — d'où l'impression que la
   largeur "ne se met pas à jour" (le redimensionnement n'a en réalité jamais
   commencé). La ligne visible (survol) reste fine, seule la zone de
   détection s'élargit, débordant de part et d'autre de la frontière réelle. */
table[data-resizable] .col-resize-handle {
    position: absolute;
    top: 0;
    right: -5px;
    width: 12px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    z-index: 6;
}

table[data-resizable] .col-resize-handle:hover {
    background-color: rgba(0, 0, 0, 0.15);
}

body.col-resizing {
    cursor: col-resize !important;
    user-select: none !important;
}

/* En-têtes figés au scroll vertical de la page. */
table[data-resizable] thead th {
    position: sticky;
    background-color: var(--bs-body-bg, #fff);
    z-index: 3;
}

/* Titres/sous-titres de colonnes : tronqués avec "…" au-delà d'un nombre de
   lignes par défaut (2), plutôt que d'agrandir la ligne indéfiniment — le
   texte complet reste consultable en survolant (title). --lignes-titre est
   augmentée par la poignée d'agrandissement (voir table_resize.js), pour la
   ligne de sous-titres uniquement (celle des groupes reste à la valeur par
   défaut). */
table[data-resizable] thead {
    --lignes-titre: 2;
}

.tri-lien,
.titre-cellule {
    color: inherit;
    text-decoration: none;
    display: -webkit-inline-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--lignes-titre, 2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-word;
    max-width: 100%;
    vertical-align: top;
}

.tri-lien:hover {
    text-decoration: underline;
}

/* Tri cliquable côté client des petits tableaux intégrés à une fiche (voir
   table_sort.js) — même principe visuel (curseur + flèche) que .tri-lien
   ci-dessus, sans passer par un lien/rechargement de page. */
.th-triable {
    cursor: pointer;
    user-select: none;
}

.th-triable:hover {
    text-decoration: underline;
}

.fleche-tri {
    font-size: 0.75em;
    white-space: nowrap;
}

/* Poignée d'agrandissement de la ligne de sous-titres (glisser vers le bas).
   Pas besoin d'un "position: relative" dédié sur ces <th> : "position: sticky"
   (déjà appliqué à tous les <th> d'en-tête, ci-dessus) sert aussi de contexte
   de positionnement pour la poignée. En rajouter un aurait remplacé "sticky"
   par "relative" sur ces cellules (une seule valeur de position possible à la
   fois) et cassé l'effet figé, décalant toute la ligne de sous-titres vers le
   bas jusqu'à chevaucher la 1re ligne du tableau. */
table[data-resizable] .row-resize-handle {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    cursor: row-resize;
    user-select: none;
    z-index: 5;
}

table[data-resizable] .row-resize-handle:hover {
    background-color: rgba(0, 0, 0, 0.15);
}

body.row-resizing {
    cursor: row-resize !important;
    user-select: none !important;
}

/* Tableaux "pleine largeur" : réduit les marges gauche/droite héritées du conteneur. */
.table-full-bleed {
    margin-left: calc(-1 * var(--bs-gutter-x, 1.5rem) * 0.5);
    margin-right: calc(-1 * var(--bs-gutter-x, 1.5rem) * 0.5);
}

/* En-têtes figées : Bootstrap donne "overflow-x: auto" à .table-responsive,
   ce qui — même sans overflow-y explicite — en fait aussi un conteneur de
   défilement vertical au sens CSS (une valeur "visible" à côté d'une valeur
   non-"visible" sur l'autre axe est traitée comme "auto"). Sans hauteur
   propre, ce conteneur ne défile jamais lui-même : c'est la PAGE qui défile,
   et "position: sticky" (qui ne réagit qu'au défilement de son propre
   conteneur) ne fait donc jamais rien. En lui donnant une hauteur et un vrai
   défilement vertical, les en-têtes collantes fonctionnent enfin en
   descendant dans la liste. */
.table-responsive.table-full-bleed {
    max-height: 75vh;
    overflow-y: auto;
}

/* Page Dossiers : séparateur discret entre les grands groupes de colonnes
   (Identification / Fiscal / Mission & déontologie/LAB / Facturation & paiement /
   Autres), sans aller jusqu'à un tableau entièrement quadrillé. */
#table-dossiers th.col-separateur,
#table-dossiers td.col-separateur {
    border-left: 1px solid rgba(0, 0, 0, 0.15);
}

/* Anomalie de paramétrage : contrôle affiché à la volée, jamais un statut qu'on choisit. */
.anomalie-parametrage {
    background-color: #fff700 !important;
    color: #212529 !important;
    border: 2px solid #dc3545 !important;
    font-weight: 700;
}

/* Page Dossiers : modification directe d'une cellule (Candice, 06/10/2026 —
   voir apps.dossiers.inline_edit). Le crayon au survol signale qu'un clic
   ouvre la modification ; le vert bref confirme l'enregistrement. */
#table-dossiers td.cellule-modifiable {
    cursor: pointer;
    position: relative;
}
#table-dossiers td.cellule-modifiable:not([data-etat]):hover {
    outline: 1px dashed rgba(0, 0, 0, 0.35);
    outline-offset: -2px;
}
#table-dossiers td.cellule-modifiable:not([data-etat]):hover::after {
    content: "\270E";
    position: absolute;
    top: 1px;
    right: 3px;
    font-size: 0.85em;
    opacity: 0.55;
}
#table-dossiers td.cellule-modifiable[data-etat] {
    cursor: default;
    min-width: 9rem;
}
#table-dossiers td.cellule-enregistree {
    background-color: #d1e7dd !important;
    transition: background-color 0.3s;
}