/* ============================================================
   BOUTONS — BASE
   Fonctionne sur : <a>, <input type="button">, <button>
   ============================================================ */
.Bouton {
    /* Layout */
    display: inline-block;
    cursor: pointer;
    
    /* Typographie */
    font-family: inherit;   /* input et button n'héritent pas par défaut */
    font-size: inherit;     /* idem */
    font-weight: normal;
    line-height: normal;    /* normalise les différences a / button / input */
    text-align: center;
    text-decoration: none;  /* pour les <a> */
    
    /* Espacement */
    border-radius: 0.25rem;
    border: 1px solid transparent;
    padding: 0.5rem 1rem;
    margin: 0 0.5rem 0.5rem;
    
    /* Reset spécifique button/input */
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;

    /* Vertical align pour aligner avec du texte inline */
    vertical-align: middle;
}

/* ============================================================
   TAILLES
   ============================================================ */
.Bouton.Mini {
    padding: 0.25rem 0.5rem;
    margin: 0 0.25rem 0.25rem;
}

/* ============================================================
   PALETTE
   ============================================================ */
:root {
    --color-bleu:   #007bff;
    --color-jaune:  #FFC300;
    --color-vert:   #2ecc71;
    --color-violet: #a569bd;
    --color-rouge:  #e74c3c;
    --color-gris:   #6c757d;
    --color-grislight:   #9ea8b1;
    --color-orlight:     #DABB52;
    --color-or:     #D4AF37;
    --color-brique: #B22222;
    
    --text-dark:  #000;
    --text-light: #fff;
}

/* ============================================================
   COULEURS
   ============================================================ */
.Bleu   { color: var(--text-light); background-color: var(--color-bleu);    border-color: var(--color-bleu); }
.Jaune  { color: var(--text-dark);  background-color: var(--color-jaune);   border-color: var(--color-jaune); }
.Vert   { color: var(--text-dark);  background-color: var(--color-vert);    border-color: var(--color-vert); }
.Violet { color: var(--text-light); background-color: var(--color-violet);  border-color: var(--color-violet); }
.Brique { color: var(--text-light); background-color: var(--color-brique);  border-color: var(--color-brique); }
.Gris { color: var(--text-dark); background-color: var(--color-gris);  border-color: var(--color-gris); }
.GrisClair { color: var(--text-dark); background-color: var(--color-grislight);  border-color: var(--color-grislight); }

/* ============================================================
   ALIASES SÉMANTIQUES
   ============================================================ */
.Retour      { color: var(--text-light);  background-color: var(--color-gris);  border-color: var(--color-gris);  }
.Enregistrer { color: var(--text-dark);  background-color: var(--color-vert);   border-color: var(--color-vert);   }
.Ajouter     { color: var(--text-light); background-color: var(--color-violet); border-color: var(--color-violet); }
.Modifier     { color: var(--text-light); background-color: var(--color-bleu); border-color: var(--color-bleu); }