/*
 * MOD-IA 2026-09-02 : blocs déplacés tel quels depuis assets/css/style.css
 * (boutons : lignes 115-240 ; pilules de filtre .tdb-suivi-pill : lignes
 * 5107-5134, avant déplacement) dans le cadre du découpage CSS de la charte
 * graphique. Aucune valeur n'a changé. Des renvois d'une ligne restent aux
 * anciens emplacements dans style.css.
 *
 * Famille "Actions" : tout ce sur quoi on clique pour déclencher une action —
 * .btn et ses variantes, .tdb-badge (statut, non cliquable), .tdb-suivi-pill.
 * Voir le tableau de routage dans la charte graphique (page-charte.php).
 */

/* ---------- Boutons ---------- */
/* MOD-IA 2026-09-21 : G2 / H7 / H2 — le sourire et le libellé se calent à
   GAUCHE, et le bouton garde sa largeur naturelle.

   Un .btn est inline-flex, donc déjà à largeur de contenu : le centrage ne se
   voyait que lorsqu'un parent l'ÉTIRAIT (align-items: stretch implicite de
   toute colonne flex — carte du héros, CTA des blocs promo…). Le libellé et le
   badge se retrouvaient alors au milieu d'un bouton trop large, ce que décrit
   le retour client. `width: fit-content` neutralise cet étirement à la source
   et rend caduques les rustines `align-self: flex-start` dispersées dans
   style.css (commentées sur place).

   Exception conservée : .tdb-filtres__carte .btn en mobile, volontairement
   pleine largeur (style.css, requête max-width 767px).
   ANCIEN CODE :
   justify-content: center; */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: fit-content;
    gap: var( --space-xs );
    height: 46px;
    padding: 0 var( --space-sm ); /* MOD-MS 22.09.2026 : changement du padding des boutons */
    border-radius: var( --radius-sm );
    font-family: var( --font-heading );
    font-size: var( --text-button-size );
    line-height: var( --text-button-lh );
    font-weight: var( --weight-medium );
    letter-spacing: var( --tracking-tight );
    white-space: nowrap;
    transition: background-color var( --duration-tdb ) var( --ease-tdb ), color var( --duration-tdb ) var( --ease-tdb );
}

/* MOD-IA 2026-09-08 : un lien habillé en bouton n'est pas souligné.

   .btn n'a jamais neutralisé le soulignement : tant que les <a class="btn"> du
   thème vivaient dans des zones où la règle globale sur `a` ne s'applique pas,
   cela ne se voyait pas. Le lien « Retour » de l'écran de validation repris de
   PassVal, lui, s'affichait souligné à l'intérieur de sa pastille grise. */
a.btn {
    text-decoration: none;
}

/* "BTN mascot orange > noir" (instances 100:1301 "bouton découvrir" /
   539:4536 hero) : survol "orange plein" → "noir plein" + le badge d'icône
   blanc s'inverse en badge orange (icône blanche), voir réaction ON_HOVER
   du prototype Figma. */
.btn--primary {
    background: var( --color-primary );
    color: #000;
}

.btn--primary:hover {
    background: var( --color-ink-strong );
    color: #fff;
}

.btn--primary:hover .btn__icon {
    background: var( --color-primary );
}

.btn--primary:hover .btn__icon img {
    filter: brightness( 0 ) invert( 1 );
}

/* "BTN mascot orange > blanc" (composant 100:1275, variantes "neutre" 100:1265
   / survol 6153:6593) — utilisé par le bouton "Accès prestataire" du footer.
   Relevé Figma : padding 6/15/6/6, gap 10, rayon 10, badge de 34 px au rayon 6.
     neutre : bouton #FC9728, badge #FFFFFF, sourire #FC9728, libellé #000000
     survol : bouton #FFFFFF, badge #FC9728, sourire #FFFFFF, libellé #000000
   Ressort souple (~1,02 s), comme les cartes "étapes". */
.btn--mascot-orange-blanc {
    gap: 10px;
    padding: 6px 15px 6px 6px;
    border-radius: 10px;
    background: var( --color-primary );
    color: #000;
    transition: background-color var( --duration-spring ) var( --ease-spring );
}

.btn--mascot-orange-blanc .btn__icon {
    border-radius: 6px;
    background: #fff;
    transition: background-color var( --duration-spring ) var( --ease-spring );
}

.btn--mascot-orange-blanc .btn__icon img {
    transition: filter var( --duration-spring ) var( --ease-spring );
}

.btn--mascot-orange-blanc:hover {
    background: #fff;
    color: #000;
}

.btn--mascot-orange-blanc:hover .btn__icon {
    background: var( --color-primary );
}

.btn--mascot-orange-blanc:hover .btn__icon img {
    filter: brightness( 0 ) invert( 1 );
}

.btn--dark {
    background: var( --color-ink );
    color: #fff;
}

.btn--ghost {
    background: var( --color-surface-muted );
    color: var( --color-ink );
}

/* MOD-IA 2026-09-02 : survols de .btn--dark et .btn--ghost, jusqu'ici
   inexistants — ces deux variantes du back-office ne donnaient AUCUN retour
   au passage de la souris, alors que les quatre autres variantes en ont un.
   Écart relevé en comparant la charte graphique (qui les montrait déjà) au
   thème. Aucune frame Figma ne couvre ces deux variantes en survol : dérivés
   dans l'esprit de la charte — le sombre bascule vers l'orange comme le fait
   .tdb-carousel-nav__btn en sens inverse, le fantôme se contente d'assombrir
   son gris (gris box → filet neutre). Même statut que .btn:disabled ci-après :
   dessiné, pas relevé. La règle « cinq états, toujours » de la charte les
   rendait de toute façon obligatoires. */
.btn--dark:hover,
.btn--dark:focus-visible {
    background: var( --color-primary );
    color: #000;
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
    background: var( --color-border );
}

.btn--small {
    height: 44px;
    padding: 0 var( --space-md );
    font-size: var( --text-button-size-mobile );
}

/* MOD-IA 2026-09-21 : G2 — pleine largeur ASSUMÉE.

   `width: fit-content` ci-dessus supprime les étirements subis ; restent les
   cas où un bouton doit vraiment occuper toute la largeur de son conteneur —
   aujourd'hui les deux boutons de bas de filtres en mobile, « Afficher sur la
   carte » et « Retour à ma sélection »
   (template-parts/commercant/filtres.php). Ces cas le DEMANDENT par une
   classe, lisible dans le gabarit, au lieu de dépendre du align-items: stretch
   implicite d'un parent : c'est la différence entre un bouton large voulu et
   le bouton large accidentel que décrit le retour client.

   Le contenu y revient au centre. L'alignement à gauche vaut pour un bouton à
   largeur naturelle, où sourire et libellé se suivent sans vide ; sur une
   barre pleine largeur, il recréerait exactement le déséquilibre que G2
   corrige. */
.btn--pleine-largeur {
    width: 100%;
    justify-content: center;
}

@media ( max-width: 767px ) {
    .btn--pleine-largeur-mobile {
        width: 100%;
        justify-content: center;
    }
}

.btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var( --radius-sm );
    background: #fff;
    transition: background-color var( --duration-tdb ) var( --ease-tdb );
}

.btn__icon img {
    transition: filter var( --duration-tdb ) var( --ease-tdb );
}

/* MOD-IA 2026-09-02 : état désactivé, absent de la maquette Figma — dessiné
   dans l'esprit de la charte (gris épuisé, curseur interdit) pour couvrir un
   cas que le design ne traite pas. Voir la charte graphique, section
   "Boutons secondaires". */
.btn:disabled,
.btn.is-disabled {
    background: var( --color-status-depleted );
    color: #fff;
    cursor: not-allowed;
}

/* ---------- Badges de statut (bons) ---------- */
/* "BTN fiche états" (6002:5428) : pastille de statut carrée à rayon 5px et
   padding de 8px — pas une pilule arrondie. */
.tdb-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border-radius: var( --radius-badge );
    background: var( --badge-color, var( --color-surface-muted ) );
    color: var( --color-ink );
    font-size: var( --text-caption-size );
    line-height: var( --text-caption-lh );
    font-weight: var( --weight-medium );
    letter-spacing: var( --tracking-tight );
    white-space: nowrap;
}

/* ---------- Pilules de filtre (suivi des bons) ---------- */
.tdb-suivi-pill {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 16px;
    background: #fff;
    border: 1px solid var( --color-border );
    border-radius: var( --radius-pill );
    font-size: 14px;
    color: var( --color-text );
    text-decoration: none;
    transition:
        background-color var( --duration-tdb-snap ) var( --ease-tdb ),
        border-color var( --duration-tdb-snap ) var( --ease-tdb ),
        color var( --duration-tdb-snap ) var( --ease-tdb );
}

.tdb-suivi-pill:hover,
.tdb-suivi-pill:focus-visible {
    border-color: var( --color-primary );
    color: var( --color-primary );
}

.tdb-suivi-pill.is-active {
    background: var( --color-primary );
    border-color: var( --color-primary );
    color: #fff;
}