/*
 * MOD-IA 2026-09-02 : blocs déplacés tel quels depuis assets/css/style.css
 * dans le cadre du découpage CSS de la charte graphique. Aucune valeur n'a
 * changé ; des renvois restent aux anciens emplacements dans style.css.
 *
 * Famille « Retours et données » : tout ce qui répond à l'utilisateur ou affiche des
 * données — .tdb-notice, .tdb-table, .tdb-etat-vide.
 * Voir le tableau de routage dans la charte graphique (page-charte.php).
 */

/* ---------- Bandeau d'information ---------- */
.tdb-notice {
    padding: var( --space-md );
    border-radius: var( --radius-sm );
    margin-bottom: var( --space-lg );
    border-left: 4px solid var( --color-status-validated );
    background: var( --color-surface-muted );
}

.tdb-notice--error {
    border-left-color: var( --color-status-expired );
}

/* ---------- Variantes ajoutées du bandeau ---------- */
/* MOD-IA 2026-09-02 : la charte demandait deux variantes que le thème n'avait
   pas — le PHP n'écrivait que --success et --error, et --success n'avait même
   aucune règle (il retombait sur le vert du filet de base, ce qui donnait le
   bon rendu par accident). Les deux variantes ci-dessous rendent l'intention
   explicite et ajoutent les deux cas manquants.
   Aucune frame Figma ne dessine ces bandeaux : couleurs reprises des jetons de
   statut existants, rien n'est inventé. */
.tdb-notice--success {
    border-left-color: var( --color-status-validated );
}

.tdb-notice--warning {
    border-left-color: var( --color-status-pending );
}

.tdb-notice--info {
    border-left-color: var( --color-text-muted );
}

/* ---------- État vide ---------- */
/* MOD-IA 2026-09-02 : composant NOUVEAU (template-parts/ui/etat-vide.php).
   Le thème répondait « rien à afficher » de cinq façons différentes, dont deux
   sans aucun style. Aucune frame Figma ne couvre cet état : mise en forme
   dérivée (fond gris box, rayon de carte, texte secondaire). */
.tdb-etat-vide {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var( --space-sm );
    padding: var( --space-2xl ) var( --space-lg );
    border-radius: var( --radius-card );
    background: var( --color-surface-muted );
    text-align: center;
}

.tdb-etat-vide__titre {
    margin: 0;
    font-family: var( --font-heading );
    font-size: var( --text-h3-size );
    line-height: var( --text-h3-lh );
    font-weight: var( --weight-semibold );
    color: var( --color-text );
}

.tdb-etat-vide__texte {
    margin: 0;
    max-width: 46ch;
    font-size: var( --text-card-desc-size );
    line-height: var( --text-card-desc-lh );
    color: var( --color-text-muted );
}

/* Le bouton d'issue respire davantage que le texte : il n'est pas la suite du
   paragraphe, c'est l'action qui sort de l'état vide. */
.tdb-etat-vide .btn {
    margin-top: var( --space-xs );
}

/* ---------- Tableau ---------- */
.tdb-table-scroll {
    overflow-x: auto;
    background: #fff;
    border: 1px solid var( --color-border );
    border-radius: var( --radius-card );
}

.tdb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var( --text-card-desc-size );
}

.tdb-table th {
    padding: var( --space-md );
    border-bottom: 1px solid var( --color-border );
    text-align: left;
    font-weight: var( --weight-medium );
    color: var( --color-text );
    white-space: nowrap;
}

.tdb-table td {
    padding: var( --space-md );
    border-bottom: 1px solid var( --color-border );
    /* MOD-IA 2026-09-09 : alignement DÉCLARÉ, et non plus hérité — demande
       client du 09.09.2026 sur « Gestion des remboursements » (« aligne
       correctement le contenu avec les en-têtes »).

       Les en-têtes sont à gauche (.tdb-table th ci-dessus), les cellules ne
       disaient rien : elles prenaient donc ce que la cascade leur laissait. Or
       PassVal charge sur TOUT le front-end une feuille qui contient un
       `td { text-align: center }` nu
       (valezy_gutenberg_blocks/css/gestion_bons.css, enqueuée par
       custom_gutenberg_blocks.php pour ses propres tableaux DataTables). Le
       contenu de nos tableaux était donc centré sous des en-têtes alignés à
       gauche — constaté à l'écran sur /gestion-des-remboursements/, où « Le
       Centre Chamoson » commence 120px à droite de « Remboursé à ».

       On ne touche pas à la feuille de PassVal : elle sert ses propres écrans,
       et un composant du thème doit de toute façon poser son alignement
       lui-même plutôt que dépendre de ce qu'aucune extension ne vient écraser.
       La correction vaut pour TOUS les tableaux du composant (suivi des
       transactions, export des ventes, remboursements), pas pour la seule page
       signalée. */
    text-align: left;
    font-weight: var( --weight-light );
    color: var( --color-text );
    font-variant-numeric: tabular-nums;
}

/* MOD-IA 2026-09-09 : deux règles ajoutées avec l'écran « Gestion des
   commerçants », qui est le premier à mettre dans un tableau du composant à la
   fois un lien et une ligne de total.

   `strong` d'abord : sa valeur par défaut est `bolder`, une graisse RELATIVE.
   Dans une cellule en `--weight-light` (300), « plus gras » vaut 400 — c'est-à-
   dire le poids du texte courant : la ligne « Montant restant à rembourser »
   était mise en évidence sans que rien ne se voie. On nomme donc la graisse
   d'arrivée au lieu de la laisser se calculer. */
.tdb-table td strong {
    font-weight: var( --weight-medium );
}

/* Les liens ensuite : sans couleur ni soulignement, le « Détails » de la
   colonne Action se lisait comme du texte mort. Il prend l'orange de la charte,
   et son soulignement n'apparaît qu'au survol — un tableau dont toute une
   colonne est soulignée devient illisible. */
.tdb-table td a {
    color: var( --color-primary );
    text-decoration: none;
}

.tdb-table td a:hover,
.tdb-table td a:focus-visible {
    text-decoration: underline;
}

.tdb-table tbody tr:last-child td {
    border-bottom: 0;
}

.tdb-table tbody tr:hover td {
    background: var( --color-surface-muted );
}

/* MOD-IA 2026-09-09 : sélecteur renforcé en `.tdb-table td.tdb-table__vide`.
   La ligne « aucune donnée » reste centrée : elle occupe toute la largeur du
   tableau (colspan) et ne se range sous aucun en-tête. Sans ce renforcement,
   le `text-align: left` ajouté juste au-dessus sur `.tdb-table td` (0,1,1)
   l'emportait sur `.tdb-table__vide` (0,1,0) et collait le message à gauche.
   ANCIEN CODE :
   .tdb-table__vide { */
.tdb-table td.tdb-table__vide {
    text-align: center;
    color: var( --color-text-muted );
}

/* ---------- Bandeau : icône de statut et variante « carte » ---------- */
/* MOD-IA 2026-09-04 : deux ajouts à la famille « Retours et données », repérés
   en comparant la page /cart/ réelle à la maquette validée du panier
   (artefact « Panier toutdebons.ch ») :
     - l'icône ronde de statut devant le message. Le bandeau du thème n'avait
       que son filet de couleur à gauche ; la maquette montre en plus une
       pastille ✓ verte, qui donne au message d'ajout au panier la même lecture
       immédiate que les badges de statut de la famille « Actions » ;
     - la variante « carte » (fond blanc + ombre de carte) pour les bandeaux
       posés sur un FOND GRIS. Le fond gris box du bandeau de base disparaît
       sur la page panier, dont le fond devient lui aussi gris box (voir
       body.woocommerce-cart dans style.css) : sans cette variante, le bandeau
       n'a plus aucune limite visible.
   Le bandeau de base n'est pas touché : les 13 appels existants gardent leur
   apparence, seuls les appels qui demandent 'icone' / 'carte' changent
   (template-parts/ui/notice.php). Aucune frame Figma ne dessine ces bandeaux —
   valeurs reprises des jetons de statut et de l'ombre de carte existants. */
.tdb-notice--icone {
    display: flex;
    align-items: flex-start;
    gap: var( --space-sm );
}

.tdb-notice__icone {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var( --color-status-validated );
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.tdb-notice--error .tdb-notice__icone {
    background: var( --color-status-expired );
}

.tdb-notice--warning .tdb-notice__icone {
    background: var( --color-status-pending );
    color: var( --color-ink );
}

.tdb-notice--info .tdb-notice__icone {
    background: var( --color-text-muted );
}

.tdb-notice__contenu {
    min-width: 0;
}

/* Le dernier paragraphe du message ne doit pas ajouter de marge sous le
   bandeau : les notices WooCommerce arrivent souvent balisées en <p>. */
.tdb-notice__contenu > :last-child {
    margin-bottom: 0;
}

.tdb-notice--carte {
    background: var( --color-surface );
    box-shadow: var( --shadow-card );
}

/* ---------- État vide : glyphe et variante « carte » ---------- */
/* MOD-IA 2026-09-04 : mêmes deux ajouts pour l'état vide, pour la même raison
   (maquette du panier vide : glyphe 🛒 au-dessus du titre, carte blanche sur
   fond gris). Dérivés de la charte comme le composant d'origine — aucune frame
   Figma ne dessine cet état. */
.tdb-etat-vide__glyphe {
    font-size: 2.5rem;
    line-height: 1;
}

.tdb-etat-vide--carte {
    /* background: var( --color-surface ); */
    /* box-shadow: var( --shadow-card ); */
}