/* =========================================================
   BOUTONS

   Une seule ecriture pour tout ce qui se clique comme un bouton,
   dans les deux espaces et sur les pages autonomes :

     <button class="tm-bouton">Enregistrer</button>
     <a class="tm-bouton discret" href="...">Retour</a>

   L'aspect ne se decrit jamais ailleurs : ni style en ligne, ni
   regle de page, ni classe maison. Un gabarit choisit une
   variante, sa mise en page (marge, largeur de colonne) reste a
   son conteneur.

     (aucune)     l'action principale, en couleur d'action
     discret      l'action secondaire, sur fond clair
     danger       l'action qui supprime, refuse ou annule
     inverse      sur un fond soutenu (bandeau, barre laterale)
     puce         un filtre, un onglet, un choix ; .active ou
                  aria-pressed="true" marque le choix courant
     petit        la taille compacte, dans une ligne ou une carte
     pleine       toute la largeur de son conteneur
     icone-seule  un carre autour d'une icone, avec aria-label

   La couleur d'action est une : --action-primary et ses teintes.
   Aucun bouton ne prend la couleur d'un statut pour dire « valider »
   ou « important » : la reussite, l'erreur et l'avertissement
   decrivent un etat, pas une action.

   L'icone s'ecrit avec components/icone.html ; elle prend la
   couleur et la petite taille du bouton.
   ---
   One writing for every button, in both spaces and on standalone
   pages. Look comes only from this sheet; one action colour;
   status colours describe states, never actions.
   ========================================================= */

.tm-bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 38px;
    padding: 0 var(--space-4);
    border: 1px solid var(--action-primary);
    border-radius: var(--radius-sm);
    background: var(--action-primary);
    color: var(--action-primary-on);
    font: inherit;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: var(--ombre-bouton);
    transition: background-color .14s ease, border-color .14s ease,
                color .14s ease, box-shadow .14s ease;
}

.tm-bouton:hover {
    border-color: var(--action-primary-hover);
    background: var(--action-primary-hover);
    color: var(--action-primary-on);
    box-shadow: var(--ombre-bouton-survol);
}

.tm-bouton:active {
    border-color: var(--action-primary-active);
    background: var(--action-primary-active);
    box-shadow: inset 0 1px 2px color-mix(in srgb, var(--shadow-color) 30%, transparent);
}

.tm-bouton:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.tm-bouton:disabled,
.tm-bouton[aria-disabled="true"] {
    border-color: var(--action-disabled);
    background: var(--action-disabled);
    color: var(--action-primary-on);
    box-shadow: none;
    cursor: not-allowed;
}

.tm-bouton .icone {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
}


/* --- discret ------------------------------------------- */

.tm-bouton.discret {
    border-color: var(--border-default);
    background: var(--surface-default);
    color: var(--text-primary);
}

.tm-bouton.discret:hover,
.tm-bouton.discret:active {
    border-color: var(--action-primary-border);
    background: var(--surface-sunken);
    color: var(--text-primary);
}

.tm-bouton.discret:disabled,
.tm-bouton.discret[aria-disabled="true"] {
    border-color: var(--border-subtle);
    background: var(--surface-default);
    color: var(--text-disabled);
}


/* --- danger -------------------------------------------- */

.tm-bouton.danger {
    border-color: var(--status-error-border);
    background: var(--surface-default);
    color: var(--status-error-emphasis);
}

.tm-bouton.danger:hover,
.tm-bouton.danger:active {
    border-color: var(--status-error);
    background: var(--status-error-subtle);
    color: var(--status-error-emphasis);
}


/* --- inverse ------------------------------------------- */

.tm-bouton.inverse {
    border-color: var(--border-inverse);
    background: transparent;
    color: var(--text-inverse);
}

.tm-bouton.inverse:hover,
.tm-bouton.inverse:active {
    border-color: color-mix(in srgb, var(--text-inverse) 40%, transparent);
    background: color-mix(in srgb, var(--text-inverse) 10%, transparent);
    color: var(--text-inverse);
}


/* --- puce ---------------------------------------------- */

.tm-bouton.puce {
    min-height: 30px;
    padding: 0 var(--space-3);
    border-color: var(--border-default);
    border-radius: var(--radius-full);
    background: var(--surface-default);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}

.tm-bouton.puce:hover {
    border-color: var(--action-primary-border);
    background: var(--surface-default);
    color: var(--text-primary);
}

.tm-bouton.puce.active,
.tm-bouton.puce[aria-pressed="true"] {
    border-color: var(--action-primary-border);
    background: var(--action-primary-subtle);
    color: var(--action-primary-emphasis);
}


/* --- etape --------------------------------------------
   Une etape d'un fil : un trait en haut, un carre numerote, un
   libelle et son aide. Faite : trait et carre indigo, une coche.
   En cours : carre indigo 800, libelle en gras. A venir : en
   retrait. Angles nets, aucune pilule.
   ---
   A step of a step bar: top rule, numbered square, label, hint. */

.tm-bouton.etape {
    box-shadow: none;
    justify-content: flex-start;
    gap: var(--space-3);
    min-height: 0;
    padding: var(--space-3) var(--space-2) var(--space-2) 0;
    border: 0;
    border-top: 3px solid var(--border-default);
    border-radius: 0;
    background: transparent;
    color: var(--text-muted);
    font-weight: var(--weight-semibold);
    text-align: left;
    white-space: normal;
}

.tm-bouton.etape:hover {
    box-shadow: none;
    border-top-color: var(--action-primary-border);
    background: transparent;
    color: var(--text-titre);
}

.tm-bouton.etape .etape-num {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--carre-doux);
    color: var(--carre-doux-on);
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
}

.tm-bouton.etape .etape-coche {
    display: none;
}

.tm-bouton.etape .etape-texte b {
    display: block;
    font-size: var(--text-md);
}

.tm-bouton.etape .etape-texte small {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-normal);
}

.tm-bouton.etape.faite {
    border-top-color: var(--action-primary);
    color: var(--text-titre);
}

.tm-bouton.etape.faite .etape-num {
    background: var(--carre-plein);
    color: var(--text-inverse);
}

.tm-bouton.etape.faite .etape-chiffre {
    display: none;
}

.tm-bouton.etape.faite .etape-coche {
    display: block;
}

.tm-bouton.etape.active {
    border-top-color: var(--action-primary);
    background: linear-gradient(var(--action-primary-subtle), transparent 80%);
    color: var(--text-titre);
}

.tm-bouton.etape.active .etape-num {
    background: var(--surface-emphase);
    color: var(--text-inverse);
}

.tm-bouton.etape.active .etape-texte b {
    font-weight: var(--weight-bold);
}


/* --- rang ---------------------------------------------
   Un rang de liste qui agit : pleine largeur, 64 px, texte a
   gauche, sans fond ni contour. Sert dans la liste de la feuille
   de photo (Retirer la photo), dont les autres rangs sont des
   liens ou des libelles.
   ---
   A list row that acts: full width, 64 px, left text, no chrome. */

.tm-bouton.rang {
    box-shadow: none;
    justify-content: flex-start;
    gap: 14px;
    width: 100%;
    min-height: 64px;
    padding: 12px 12px 12px 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-primary);
    font-weight: var(--weight-normal);
    text-align: left;
    white-space: normal;
}

.tm-bouton.rang:hover,
.tm-bouton.rang:active {
    border: 0;
    box-shadow: none;
    background: color-mix(in srgb, var(--surface-page) 60%, var(--surface-default));
    color: var(--text-primary);
}

.tm-bouton.rang.danger strong {
    color: var(--status-error-emphasis);
}


/* --- contour --------------------------------------------
   L'action secondaire d'une bande d'appel : fond blanc, contour
   et texte indigo.
   ---
   Secondary action of a call-to-action band: indigo outline. */

.tm-bouton.contour {
    border-color: var(--action-primary);
    background: var(--surface-default);
    color: var(--text-accent);
}

.tm-bouton.contour:hover,
.tm-bouton.contour:active {
    border-color: var(--action-primary-hover);
    background: var(--surface-sunken);
    color: var(--text-accent);
}


/* --- tailles ------------------------------------------- */

.tm-bouton.petit {
    min-height: 30px;
    padding: 0 var(--space-3);
    font-size: var(--text-sm);
}

/* Au telephone, une zone de contact d'au moins 44 px.
   ---
   Phone touch target of at least 44 px. */
.tm-bouton.tactile {
    min-height: 48px;
    font-size: var(--text-lg);
}

.tm-bouton.tactile.contour {
    min-height: 44px;
}

.tm-bouton.pleine {
    display: flex;
    width: 100%;
}

.tm-bouton.icone-seule {
    width: 38px;
    padding: 0;
}

.tm-bouton.petit.icone-seule {
    width: 30px;
}


/* --- pastille de compte -------------------------------- */

.tm-bouton .tm-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-full);
    background: var(--status-error);
    color: var(--status-error-on);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    line-height: 1;
}