/* ============================================================
   TT Billom — Boutons : palette par niveaux
   Niveaux : 100 très clair · 200 clair · 500 référence · 700 foncé · 900 très foncé
   Familles : orange, ocre, jaune, lime, vert, turquoise, bleu, indigo, violet
   ============================================================ */

/* --- Base --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: box-shadow 0.2s ease, background 0.2s ease;
}

/* --- Variantes historiques --- */
.btn-primary { background: var(--violet); color: var(--btn-primary-text); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--violet-strong); color: var(--btn-primary-text); }
.btn-primary:active { background: var(--violet-900); color: var(--btn-primary-text); }
.btn-secondary { background: var(--orange); color: var(--btn-secondary-text); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { background: #ffa04a; color: var(--btn-secondary-text); }
.btn-secondary:active { background: var(--orange-900); color: #ffffff; }
.btn-outline { border-color: var(--border); color: var(--text); background: transparent; }
.btn-outline:hover { border-color: var(--violet); color: var(--violet); }
.btn-outline:active { background: var(--violet-soft); color: var(--violet); }
.btn-violet { background: var(--violet); color: #ffffff; box-shadow: var(--shadow-sm); }
.btn-violet:hover { background: var(--violet-strong); color: #ffffff; }
.btn-violet:active { background: var(--violet-900); color: #ffffff; }
.btn-bleu { background: var(--bleu); color: #1c2a3a; box-shadow: var(--shadow-sm); }
.btn-bleu:hover { background: #4a94c9; color: #101b27; }
.btn-bleu:active { background: var(--bleu-900); color: #ffffff; }
.btn-blanc { background: #ffffff; color: #2c2f36; border-color: #ffffff; box-shadow: var(--shadow-sm); }
.btn-blanc:hover { background: #f0f0f0; color: #2c2f36; }
.btn-blanc:active { background: #e0e0e0; color: #2c2f36; }
.btn-anthracite { background: #2c2f36; color: #ffffff; box-shadow: var(--shadow-sm); }
.btn-anthracite:hover { background: #1f2228; color: #ffffff; }
.btn-anthracite:active { background: #14161a; color: #ffffff; }
.btn-noir { background: #000000; color: #ffffff; box-shadow: var(--shadow-sm); }
.btn-noir:hover { background: #1a1a1a; color: #ffffff; }
.btn-noir:active { background: #2e2e2e; color: #ffffff; }

/* --- Variables de couleur par famille et niveau --- */
:root {
  /* Orange */
  --orange-100: #fce9d5;
  --orange-200: #f7ba7f;
  --orange-500: #f28c28;
  --orange-700: #c7680c;
  --orange-900: #834508;

  /* Ocre (orange-jaune) */
  --ocre-100: #fbfad4;
  --ocre-200: #f4ef80;
  --ocre-500: #ede52b;
  --ocre-700: #c0b910;
  --ocre-900: #7e7a0b;

  /* Jaune */
  --jaune-100: #ebfad5;
  --jaune-200: #c4f183;
  --jaune-500: #9ce830;
  --jaune-700: #77bc15;
  --jaune-900: #4e7b0e;

  /* Lime (jaune-vert) */
  --lime-100: #dbf9d6;
  --lime-200: #93ee86;
  --lime-500: #4ce236;
  --lime-700: #2eb61a;
  --lime-900: #1e7811;

  /* Vert */
  --vert-100: #d8f8e3;
  --vert-200: #8aebaa;
  --vert-500: #3cdd71;
  --vert-700: #1fb250;
  --vert-900: #157635;

  /* Turquoise (vert-bleu) */
  --turquoise-100: #e9fbf9;
  --turquoise-200: #9beee2;
  --turquoise-500: #4de0cc;
  --turquoise-700: #22c4ae;
  --turquoise-900: #178778;

  /* Bleu */
  --bleu-100: #f9fcfe;
  --bleu-200: #abd4f0;
  --bleu-500: #5dade2;
  --bleu-700: #268dd2;
  --bleu-900: #1b6595;

  /* Indigo (bleu-violet) */
  --indigo-100: #c8cdee;
  --indigo-200: #828cd9;
  --indigo-500: #3c4cc3;
  --indigo-700: #2b378c;
  --indigo-900: #1a2156;

  /* Violet */
  --violet-100: #b5a3d4;
  --violet-200: #8264b6;
  --violet-500: #563d82;
  --violet-700: #362651;
  --violet-900: #160f21;
}

/* --- Boutons (couleurs retenues, texte conforme AA) --- */

/* Violet */
.btn-violet-500 { background: var(--violet-500); color: #ffffff; }
.btn-violet-500:hover, .btn-violet-500:active { background: var(--violet-700); color: #ffffff; }
.btn-violet-100 { background: var(--violet-100); color: #000000; }
.btn-violet-100:hover, .btn-violet-100:active { background: var(--violet-200); color: #000000; }
.btn-violet-700 { background: var(--violet-700); color: #ffffff; }
.btn-violet-700:hover, .btn-violet-700:active { background: var(--violet-900); color: #ffffff; }
.btn-violet-900 { background: var(--violet-900); color: #ffffff; }
.btn-violet-900:hover, .btn-violet-900:active { background: var(--violet-700); color: #ffffff; }

/* Bleu */
.btn-bleu-500 { background: var(--bleu-500); color: #000000; }
.btn-bleu-500:hover, .btn-bleu-500:active { background: var(--bleu-700); color: #000000; }
.btn-bleu-200 { background: var(--bleu-200); color: #000000; }
.btn-bleu-200:hover, .btn-bleu-200:active { background: var(--bleu-500); color: #000000; }
.btn-bleu-700 { background: var(--bleu-700); color: #000000; }
.btn-bleu-700:hover, .btn-bleu-700:active { background: var(--bleu-900); color: #000000; }
.btn-bleu-900 { background: var(--bleu-900); color: #ffffff; }
.btn-bleu-900:hover, .btn-bleu-900:active { background: var(--bleu-700); color: #ffffff; }

/* Orange */
.btn-orange-500 { background: var(--orange-500); color: #000000; }
.btn-orange-500:hover, .btn-orange-500:active { background: var(--orange-700); color: #000000; }
.btn-orange-200 { background: var(--orange-200); color: #000000; }
.btn-orange-200:hover, .btn-orange-200:active { background: var(--orange-500); color: #000000; }
.btn-orange-700 { background: var(--orange-700); color: #000000; }
.btn-orange-700:hover, .btn-orange-700:active { background: var(--orange-900); color: #000000; }
.btn-orange-900 { background: var(--orange-900); color: #ffffff; }
.btn-orange-900:hover, .btn-orange-900:active { background: var(--orange-700); color: #ffffff; }

/* Lime (jaune-vert) */
.btn-lime-500 { background: var(--lime-500); color: #000000; }
.btn-lime-500:hover, .btn-lime-500:active { background: var(--lime-700); color: #000000; }
.btn-lime-900 { background: var(--lime-900); color: #ffffff; }
.btn-lime-900:hover, .btn-lime-900:active { background: var(--lime-700); color: #ffffff; }

/* Ocre (orange-jaune) */
.btn-ocre-500 { background: var(--ocre-500); color: #000000; }
.btn-ocre-500:hover, .btn-ocre-500:active { background: var(--ocre-700); color: #000000; }