/* ============================================================================
   BIBLIOTHEQUE UI JABS  -  tables.css
   Depend de : theme.css, buttons.css

   Un tableau sert a COMPARER des lignes entre elles. Si l'utilisateur ne
   compare pas, une liste de cartes est plus lisible.
   Regle tenue partout : sous 640 px, le tableau devient une pile de cartes.
   Un tableau qui defile lateralement sur telephone est un tableau perdu.
   ========================================================================= */

.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); background: var(--c-surface); }
.tbl th {
  padding: var(--sp-3);
  text-align: left;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--c-text-muted);
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-border);
  white-space: nowrap;
}
.tbl td { padding: var(--sp-3); color: var(--c-text); vertical-align: middle; border-top: 1px solid var(--c-border); }
.tbl tbody tr:hover { background: var(--c-surface-2); }
.tbl__cadre { width: 100%; border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; background: var(--c-surface); }
.tbl__nombre { text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--fw-semi); }

/* ===========================================================================
   FAMILLE A  -  TABLEAUX
   ======================================================================== */

/* @v TBL-A1
@nom Tableau de base
@usage Le socle : en-tetes, lignes, colonnes de nombres alignees a droite en chiffres tabulaires pour que les montants se comparent d'un coup d'oeil.
@html
<div class="tbl__cadre">
  <table class="tbl">
    <thead><tr><th>Reference</th><th>Client</th><th>Statut</th><th class="tbl__nombre">Montant</th></tr></thead>
    <tbody>
      <tr><td><code>2026-103</code></td><td>Krissi Julien</td><td><span class="doc-etiq doc-etiq--ok">Signe</span></td><td class="tbl__nombre">4 280,00 EUR</td></tr>
      <tr><td><code>2026-118</code></td><td>Martin Sophie</td><td><span class="doc-etiq doc-etiq--attente">Envoye</span></td><td class="tbl__nombre">1 890,00 EUR</td></tr>
      <tr><td><code>2026-121</code></td><td>Durand Paul</td><td><span class="doc-etiq doc-etiq--neutre">Brouillon</span></td><td class="tbl__nombre">12 400,00 EUR</td></tr>
    </tbody>
  </table>
</div>
@tw w-full text-sm [&_th]:bg-slate-50 [&_th]:p-3 [&_th]:text-left [&_td]:border-t [&_td]:p-3
@end */
.tbl code { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-text-soft); }
/* @endv */

/* @v TBL-A2
@nom Densites
@usage Trois densites pour le meme tableau. Le mode compact sert aux ecrans de saisie, le mode confortable aux consultations sur tablette.
@html
<div class="demo-col demo-col--large">
  <div class="tbl__cadre"><table class="tbl tbl--compact">
    <thead><tr><th>Reference</th><th>Client</th><th class="tbl__nombre">Montant</th></tr></thead>
    <tbody><tr><td><code>2026-103</code></td><td>Krissi Julien</td><td class="tbl__nombre">4 280,00</td></tr>
    <tr><td><code>2026-118</code></td><td>Martin Sophie</td><td class="tbl__nombre">1 890,00</td></tr></tbody></table></div>
  <div class="tbl__cadre"><table class="tbl tbl--confort">
    <thead><tr><th>Reference</th><th>Client</th><th class="tbl__nombre">Montant</th></tr></thead>
    <tbody><tr><td><code>2026-103</code></td><td>Krissi Julien</td><td class="tbl__nombre">4 280,00</td></tr>
    <tr><td><code>2026-118</code></td><td>Martin Sophie</td><td class="tbl__nombre">1 890,00</td></tr></tbody></table></div>
</div>
@tw [&_td]:py-1.5 (compact) / [&_td]:py-4 (confortable)
@end */
.tbl--compact th, .tbl--compact td { padding: 6px var(--sp-3); font-size: var(--fs-xs); }
.tbl--confort th, .tbl--confort td { padding: var(--sp-4) var(--sp-3); }
/* @endv */

/* @v TBL-A3
@nom Lignes zebrees et bordures
@usage La zebrure aide a suivre une ligne longue. Au-dela de 5 colonnes elle vaut mieux qu'une bordure verticale, qui hache la lecture.
@html
<div class="demo-col demo-col--large">
  <div class="tbl__cadre"><table class="tbl tbl--zebre">
    <thead><tr><th>Piece</th><th>Reference</th><th class="tbl__nombre">Qte</th><th class="tbl__nombre">PU</th></tr></thead>
    <tbody>
      <tr><td>Pompe a chaleur 11 kW</td><td><code>PAC-11-M</code></td><td class="tbl__nombre">1</td><td class="tbl__nombre">3 200,00</td></tr>
      <tr><td>Ballon tampon 50 L</td><td><code>BT-50</code></td><td class="tbl__nombre">1</td><td class="tbl__nombre">340,00</td></tr>
      <tr><td>Raccord cuivre 16 mm</td><td><code>RC-16</code></td><td class="tbl__nombre">12</td><td class="tbl__nombre">4,20</td></tr>
      <tr><td>Gaine isolee</td><td><code>GI-20</code></td><td class="tbl__nombre">18 m</td><td class="tbl__nombre">6,90</td></tr>
    </tbody>
  </table></div>
</div>
@tw [&_tbody_tr:nth-child(odd)]:bg-slate-50/60
@end */
.tbl--zebre tbody tr:nth-child(odd) { background: color-mix(in srgb, var(--c-surface-2) 60%, var(--c-surface)); }
.tbl--zebre tbody tr:hover { background: var(--c-surface-3); }
.tbl--lignes td, .tbl--lignes th { border-right: 1px solid var(--c-border); }
.tbl--lignes td:last-child, .tbl--lignes th:last-child { border-right: none; }
/* @endv */

/* @v TBL-A4
@nom En-tetes triables
@usage La fleche indique le sens actif ; les colonnes inactives montrent un chevron pale au survol. aria-sort porte l'etat pour les lecteurs d'ecran.
@html
<div class="tbl__cadre">
  <table class="tbl">
    <thead><tr>
      <th><button class="btn btn--tri">Reference {{icon:sort}}</button></th>
      <th><button class="btn btn--tri">Client {{icon:sort}}</button></th>
      <th aria-sort="descending"><button class="btn btn--tri is-actif">Montant {{icon:arrow-up}}</button></th>
      <th><button class="btn btn--tri">Date {{icon:sort}}</button></th>
    </tr></thead>
    <tbody>
      <tr><td><code>2026-121</code></td><td>Durand Paul</td><td class="tbl__nombre">12 400,00</td><td>02/09</td></tr>
      <tr><td><code>2026-103</code></td><td>Krissi Julien</td><td class="tbl__nombre">4 280,00</td><td>12/08</td></tr>
      <tr><td><code>2026-118</code></td><td>Martin Sophie</td><td class="tbl__nombre">1 890,00</td><td>29/08</td></tr>
    </tbody>
  </table>
</div>
@tw [&_th]:p-0 [&_button]:w-full [&_button]:justify-start aria-sort:text-blue-700
@end */
.tbl th:has(.btn--tri) { padding: 0; }
.tbl .btn--tri { width: 100%; justify-content: flex-start; height: 38px; border-radius: 0; padding: 0 var(--sp-3); }
.tbl th[aria-sort] .btn--tri { color: var(--c-primary-ink); background: var(--c-primary-soft); }
.tbl th[aria-sort="descending"] .btn--tri svg { transform: rotate(180deg); }
/* @endv */

/* @v TBL-A5
@nom Selection de lignes
@usage La case de l'en-tete coche tout ce qui est VISIBLE, pas tout ce qui existe : la distinction doit etre dite quand un filtre est actif.
@html
<div class="tbl__cadre">
  <table class="tbl">
    <thead><tr>
      <th style="width:40px"><label class="coche"><input type="checkbox"><span class="coche__boite"></span></label></th>
      <th>Reference</th><th>Client</th><th class="tbl__nombre">Montant</th>
    </tr></thead>
    <tbody>
      <tr class="is-choisie"><td><label class="coche"><input type="checkbox" checked><span class="coche__boite"></span></label></td><td><code>2026-103</code></td><td>Krissi Julien</td><td class="tbl__nombre">4 280,00</td></tr>
      <tr><td><label class="coche"><input type="checkbox"><span class="coche__boite"></span></label></td><td><code>2026-118</code></td><td>Martin Sophie</td><td class="tbl__nombre">1 890,00</td></tr>
      <tr class="is-choisie"><td><label class="coche"><input type="checkbox" checked><span class="coche__boite"></span></label></td><td><code>2026-121</code></td><td>Durand Paul</td><td class="tbl__nombre">12 400,00</td></tr>
    </tbody>
  </table>
</div>
@tw [&_tr:has(:checked)]:bg-blue-50
@end */
.tbl tbody tr:has(input:checked), .tbl tbody tr.is-choisie { background: var(--c-primary-soft); }
.tbl tbody tr:has(input:checked):hover { background: color-mix(in srgb, var(--c-primary-soft) 80%, var(--c-primary)); }
/* @endv */

/* @v TBL-A6
@nom Colonne figee
@usage Beaucoup de colonnes sur grand ecran : la premiere reste visible pendant le defilement lateral, sinon on ne sait plus quelle ligne on lit.
@html
<div class="tbl__cadre tbl__cadre--defile">
  <table class="tbl tbl--fige">
    <thead><tr><th>Client</th><th>Reference</th><th>Ville</th><th>Operation</th><th>Statut</th><th class="tbl__nombre">Montant HT</th><th class="tbl__nombre">TVA</th><th class="tbl__nombre">TTC</th></tr></thead>
    <tbody>
      <tr><th scope="row">Krissi Julien</th><td><code>2026-103</code></td><td>Neuilly-sur-Marne</td><td>PAC air/eau</td><td><span class="doc-etiq doc-etiq--ok">Signe</span></td><td class="tbl__nombre">4 000,00</td><td class="tbl__nombre">5,5 %</td><td class="tbl__nombre">4 220,00</td></tr>
      <tr><th scope="row">Martin Sophie</th><td><code>2026-118</code></td><td>Colombes</td><td>Chauffe-eau</td><td><span class="doc-etiq doc-etiq--attente">Envoye</span></td><td class="tbl__nombre">1 790,00</td><td class="tbl__nombre">10 %</td><td class="tbl__nombre">1 969,00</td></tr>
    </tbody>
  </table>
</div>
@tw overflow-x-auto [&_th:first-child]:sticky [&_th:first-child]:left-0 [&_th:first-child]:bg-white
@end */
.tbl__cadre--defile { overflow-x: auto; }
.tbl--fige th:first-child, .tbl--fige tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--c-surface);
  text-align: left;
  font-weight: var(--fw-semi);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-sm);
  color: var(--c-text);
  box-shadow: 1px 0 0 var(--c-border);
}
.tbl--fige thead th:first-child { background: var(--c-surface-2); z-index: 2; }
.tbl--fige tbody tr:hover th { background: var(--c-surface-2); }
/* @endv */

/* @v TBL-A7
@nom Ligne depliante
@usage Le detail sans quitter la liste. Le chevron pivote, et la ligne ouverte reste visuellement rattachee a son detail.
@html
<div class="tbl__cadre">
  <table class="tbl">
    <thead><tr><th style="width:40px"></th><th>Reference</th><th>Client</th><th class="tbl__nombre">Montant</th></tr></thead>
    <tbody>
      <tr class="is-ouverte"><td><button class="btn btn--icone btn--fantome btn--sm" aria-expanded="true" aria-label="Replier">{{icon:chevron-down}}</button></td><td><code>2026-103</code></td><td>Krissi Julien</td><td class="tbl__nombre">4 280,00</td></tr>
      <tr class="tbl__detail"><td></td><td colspan="3">
        <dl class="tbl__detail-liste">
          <div><dt>Operation</dt><dd>PAC air/eau 11 kW</dd></div>
          <div><dt>Pose prevue</dt><dd>24 septembre 2026</dd></div>
          <div><dt>Equipe</dt><dd>Nord - Sophie M.</dd></div>
          <div><dt>Aide</dt><dd>MaPrimeRenov 2 400 EUR</dd></div>
        </dl>
      </td></tr>
      <tr><td><button class="btn btn--icone btn--fantome btn--sm" aria-expanded="false" aria-label="Deplier">{{icon:chevron-down}}</button></td><td><code>2026-118</code></td><td>Martin Sophie</td><td class="tbl__nombre">1 890,00</td></tr>
    </tbody>
  </table>
</div>
@tw [&_button[aria-expanded=true]_svg]:rotate-180 [&_.detail]:bg-slate-50
@end */
.tbl [aria-expanded] svg { transition: transform var(--t-base); }
.tbl [aria-expanded="true"] svg { transform: rotate(180deg); }
.tbl tbody tr.is-ouverte { background: var(--c-surface-2); }
.tbl__detail td { background: var(--c-surface-2); border-top: none; }
.tbl__detail-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-3); margin: 0; }
.tbl__detail-liste dt { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-text-muted); }
.tbl__detail-liste dd { margin: 2px 0 0; font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--c-text); }
/* @endv */

/* @v TBL-A8
@nom Ligne de totaux
@usage Sous les lignes, jamais melangee a elles. Fond distinct, texte gras, et le pied reste visible si le tableau defile.
@html
<div class="tbl__cadre">
  <table class="tbl">
    <thead><tr><th>Poste</th><th class="tbl__nombre">Qte</th><th class="tbl__nombre">PU HT</th><th class="tbl__nombre">Total HT</th></tr></thead>
    <tbody>
      <tr><td>Pompe a chaleur 11 kW</td><td class="tbl__nombre">1</td><td class="tbl__nombre">3 200,00</td><td class="tbl__nombre">3 200,00</td></tr>
      <tr><td>Main d'oeuvre</td><td class="tbl__nombre">2 j</td><td class="tbl__nombre">400,00</td><td class="tbl__nombre">800,00</td></tr>
    </tbody>
    <tfoot>
      <tr><td colspan="3">Total HT</td><td class="tbl__nombre">4 000,00</td></tr>
      <tr><td colspan="3">TVA 5,5 %</td><td class="tbl__nombre">220,00</td></tr>
      <tr class="tbl__total"><td colspan="3">Total TTC</td><td class="tbl__nombre">4 220,00</td></tr>
    </tfoot>
  </table>
</div>
@tw [&_tfoot]:bg-slate-50 [&_tfoot_tr:last-child]:text-base [&_tfoot_tr:last-child]:font-extrabold
@end */
.tbl tfoot td { background: var(--c-surface-2); font-weight: var(--fw-semi); border-top: 1px solid var(--c-border); }
.tbl tfoot td:first-child { text-align: right; color: var(--c-text-soft); }
.tbl__total td { font-size: var(--fs-lg); font-weight: 800; color: var(--c-text); border-top: 2px solid var(--c-border-strong); }
/* @endv */

/* @v TBL-A9
@nom Tableau responsive
@usage Sous 640 px chaque ligne devient une carte, l'intitule de colonne passe a gauche de la valeur. Le tableau reste lisible sans defilement lateral.
@html
<div class="tbl__cadre">
  <table class="tbl tbl--cartes">
    <thead><tr><th>Reference</th><th>Client</th><th>Ville</th><th class="tbl__nombre">Montant</th></tr></thead>
    <tbody>
      <tr><td data-col="Reference"><code>2026-103</code></td><td data-col="Client">Krissi Julien</td><td data-col="Ville">Neuilly-sur-Marne</td><td data-col="Montant" class="tbl__nombre">4 280,00 EUR</td></tr>
      <tr><td data-col="Reference"><code>2026-118</code></td><td data-col="Client">Martin Sophie</td><td data-col="Ville">Colombes</td><td data-col="Montant" class="tbl__nombre">1 890,00 EUR</td></tr>
    </tbody>
  </table>
</div>
@tw max-sm:[&_thead]:hidden max-sm:[&_td]:flex max-sm:[&_td]:justify-between max-sm:[&_td]:before:content-[attr(data-col)]
@end */
@media (max-width: 640px) {
  .tbl--cartes thead { display: none; }
  .tbl--cartes, .tbl--cartes tbody, .tbl--cartes tr, .tbl--cartes td { display: block; width: 100%; }
  .tbl--cartes tr { padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--c-border); }
  .tbl--cartes td { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); padding: 4px 0; border: none; text-align: left; }
  .tbl--cartes td::before { content: attr(data-col); font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--c-text-muted); }
  .tbl--cartes .tbl__nombre { text-align: right; }
}
/* @endv */

/* ===========================================================================
   FAMILLE B  -  LISTES
   ======================================================================== */

/* @v TBL-B1
@nom Liste de lignes
@usage L'alternative au tableau quand on ne compare pas colonne par colonne. Plus lisible sur telephone, plus souple a mettre en page.
@html
<ul class="liste">
  <li><a href="#">
    <span class="personne__avatar">JK</span>
    <span class="liste__bloc"><strong>Krissi Julien</strong><small>Neuilly-sur-Marne (93) - PAC air/eau</small></span>
    <span class="liste__droite"><strong>4 280 EUR</strong><span class="doc-etiq doc-etiq--ok">Signe</span></span>
    {{icon:chevron-right}}
  </a></li>
  <li><a href="#">
    <span class="personne__avatar personne__avatar--vert">MS</span>
    <span class="liste__bloc"><strong>Martin Sophie</strong><small>Colombes (92) - chauffe-eau</small></span>
    <span class="liste__droite"><strong>1 890 EUR</strong><span class="doc-etiq doc-etiq--attente">Envoye</span></span>
    {{icon:chevron-right}}
  </a></li>
</ul>
@tw divide-y rounded-xl border [&_a]:flex [&_a]:items-center [&_a]:gap-3 [&_a]:p-3
@end */
.liste { list-style: none; margin: 0; padding: 0; width: 100%; border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; background: var(--c-surface); }
.liste > li + li { border-top: 1px solid var(--c-border); }
.liste a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--t-fast);
}
.liste a:hover { background: var(--c-surface-2); }
.liste a:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; }
.liste__bloc { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.liste__bloc strong { font-size: var(--fs-md); font-weight: var(--fw-semi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste__bloc small  { font-size: var(--fs-xs); color: var(--c-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste__droite { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.liste__droite strong { font-size: var(--fs-md); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.liste > li > a > svg:last-child { width: 17px; height: 17px; color: var(--c-text-muted); flex: none; }
@media (max-width: 560px) { .liste__droite { align-items: flex-end; } .liste__bloc small { white-space: normal; } }
/* @endv */

/* @v TBL-B2
@nom Liste avec en-tetes colles
@usage Repertoire, agenda, journal. L'intitule du groupe reste visible tant qu'on est dedans : on sait toujours quel jour ou quelle lettre on lit.
@html
<div class="liste-groupes">
  <h4>Aujourd'hui</h4>
  <ul class="liste">
    <li><a href="#"><span class="liste__bloc"><strong>Pose PAC - Krissi</strong><small>08:30 - Neuilly-sur-Marne</small></span><span class="doc-etiq doc-etiq--ok">Confirme</span></a></li>
    <li><a href="#"><span class="liste__bloc"><strong>Visite technique - Durand</strong><small>14:00 - Le Raincy</small></span><span class="doc-etiq doc-etiq--attente">A confirmer</span></a></li>
  </ul>
  <h4>Demain</h4>
  <ul class="liste">
    <li><a href="#"><span class="liste__bloc"><strong>Entretien annuel - Martin</strong><small>09:00 - Colombes</small></span><span class="doc-etiq doc-etiq--ok">Confirme</span></a></li>
  </ul>
</div>
@tw [&>h4]:sticky [&>h4]:top-0 [&>h4]:z-10 [&>h4]:bg-white [&>h4]:py-2
@end */
.liste-groupes { display: flex; flex-direction: column; gap: var(--sp-2); width: 100%; }
.liste-groupes h4 {
  position: sticky; top: 0; z-index: 2;
  margin: var(--sp-3) 0 0;
  padding: var(--sp-2) 0;
  background: var(--c-bg);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-text-muted);
}
.liste-groupes h4:first-child { margin-top: 0; }
/* @endv */

/* @v TBL-B3
@nom Liste ordonnable
@usage Reorganiser des postes de devis, des etapes. La poignee est explicite : rendre toute la ligne glissable empeche la selection du texte.
@html
<ul class="liste liste--ordonnable">
  <li><span class="liste__poignee" aria-label="Deplacer">{{icon:liste}}</span><span class="liste__bloc"><strong>Depose ancienne chaudiere</strong><small>1 jour</small></span><span class="tbl__nombre">400,00</span></li>
  <li class="is-attrapee"><span class="liste__poignee" aria-label="Deplacer">{{icon:liste}}</span><span class="liste__bloc"><strong>Pose unite exterieure</strong><small>1 jour</small></span><span class="tbl__nombre">800,00</span></li>
  <li><span class="liste__poignee" aria-label="Deplacer">{{icon:liste}}</span><span class="liste__bloc"><strong>Mise en service</strong><small>0,5 jour</small></span><span class="tbl__nombre">200,00</span></li>
</ul>
@tw [&_li]:flex [&_li]:items-center [&_li]:gap-3 [&_li]:p-3 [&_.poignee]:cursor-grab
@end */
.liste--ordonnable > li { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); background: var(--c-surface); }
.liste__poignee { color: var(--c-text-muted); cursor: grab; flex: none; touch-action: none; }
.liste__poignee svg { width: 17px; height: 17px; }
.liste__poignee:active { cursor: grabbing; }
.liste--ordonnable > li.is-attrapee {
  background: var(--c-primary-soft);
  box-shadow: var(--sh-2);
  opacity: .95;
}
/* @endv */

/* @v TBL-B4
@nom Liste de description
@usage Fiche recapitulative : etiquette a gauche, valeur a droite. Sur mobile l'etiquette passe au-dessus plutot que de comprimer la valeur.
@html
<dl class="desc">
  <div><dt>Reference</dt><dd><code>2026-103</code></dd></div>
  <div><dt>Client</dt><dd>Krissi Julien</dd></div>
  <div><dt>Adresse du chantier</dt><dd>12 rue des Lilas, 93330 Neuilly-sur-Marne</dd></div>
  <div><dt>Operation</dt><dd>Pompe a chaleur air/eau 11 kW</dd></div>
  <div><dt>Montant TTC</dt><dd><strong>4 280,00 EUR</strong></dd></div>
  <div><dt>Statut</dt><dd><span class="doc-etiq doc-etiq--ok">Signe le 12 aout 2026</span></dd></div>
</dl>
@tw grid grid-cols-[200px_1fr] gap-y-3 max-sm:grid-cols-1 [&_dt]:text-slate-500
@end */
.desc { width: 100%; margin: 0; display: flex; flex-direction: column; }
.desc > div {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--c-border);
}
.desc > div:first-child { border-top: none; }
.desc dt { font-size: var(--fs-sm); color: var(--c-text-muted); }
.desc dd { margin: 0; font-size: var(--fs-md); color: var(--c-text); }
@media (max-width: 560px) { .desc > div { grid-template-columns: 1fr; gap: 3px; } }
/* @endv */

/* @v TBL-B5
@nom Barre d'outils de tableau
@usage Au-dessus du tableau : recherche, filtres, densite, export. Le compte de resultats est affiche a cote, sinon un filtre trop restrictif passe inapercu.
@html
<div class="tbl-outils">
  <label class="doc-recherche">{{icon:loupe}}<input type="search" placeholder="Rechercher un dossier"></label>
  <button class="btn btn--secondaire">{{icon:filtre}} Filtres <span class="btn__badge">2</span></button>
  <span class="cat-head__spacer"></span>
  <span class="tbl-outils__compte">24 dossiers</span>
  <div class="btn-segmente"><button class="btn is-actif" aria-label="Vue tableau">{{icon:liste}}</button><button class="btn" aria-label="Vue grille">{{icon:grille}}</button></div>
  <button class="btn btn--secondaire">{{icon:download}} Exporter</button>
</div>
@tw flex flex-wrap items-center gap-2 border-b pb-3
@end */
.tbl-outils {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-border);
}
.tbl-outils__compte { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--c-text-muted); white-space: nowrap; }
.tbl-outils .doc-recherche { max-width: 260px; }
/* @endv */

/* @v TBL-B6
@nom Pied de tableau
@usage Compte affiche, choix du nombre de lignes, pagination. Toujours preciser « 1 a 10 sur 24 », pas seulement le numero de page.
@html
<div class="tbl-pied">
  <span>1 a 10 sur 24 dossiers</span>
  <label class="tbl-pied__par">Lignes
    <div class="saisie-select"><select class="saisie"><option>10</option><option>25</option><option>50</option></select>{{icon:chevron-down}}</div>
  </label>
  <nav class="btn-pagination" aria-label="Pagination">
    <button class="btn btn--icone btn--secondaire btn--sm" disabled aria-label="Precedent">{{icon:chevron-left}}</button>
    <button class="btn btn--sm is-actif" aria-current="page">1</button>
    <button class="btn btn--sm">2</button>
    <button class="btn btn--sm">3</button>
    <button class="btn btn--icone btn--secondaire btn--sm" aria-label="Suivant">{{icon:chevron-right}}</button>
  </nav>
</div>
@tw flex flex-wrap items-center justify-between gap-3 border-t p-3 text-sm
@end */
.tbl-pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3);
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}
.tbl-pied__par { display: inline-flex; align-items: center; gap: var(--sp-2); }
.tbl-pied__par .saisie-select { width: auto; }
.tbl-pied__par .saisie { height: 32px; width: 74px; font-size: var(--fs-sm); }
/* @endv */