/**
 * PlayAwale — Composant bouton
 * -----------------------------------------------------------------------------
 * Bouton principal du site, utilisable indifféremment sur un <button> ou sur
 * un <a> : le rendu et les états sont identiques dans les deux cas.
 *
 *     <button class="btn">Jouer Solo</button>
 *     <a class="btn" href="…">Voir des parties</a>
 *
 * Trois modificateurs, et pas un de plus :
 *
 *     .btn--accent   celui qu'on désigne — un seul par écran
 *     .btn--quiet    celui qu'on prend pour ne rien faire — fermer, annuler
 *     .btn--danger   celui qui ne se reprend pas
 *     .picker-button la ligne large d'un écran de choix (voir picker.css)
 *
 * Les boutons empilés verticalement se placent dans un .btn-group, qui gère
 * l'espacement et l'apparition en cascade.
 *
 * @package   PlayAwale
 * @version   2.0
 * @author    Nicolas Lion — Développeur web — https://nlion.fr
 * @copyright 2026 Nicolas Lion
 */

/* =============================================================================
   BOUTON
   -----------------------------------------------------------------------------
   UN OBJET POSÉ SUR UNE TABLE, PAS UN RECTANGLE COLORÉ
   Une arête claire au sommet — la lumière tombe de haut —, une tranche sombre
   en bas, et une ombre qui le décolle du sable. Les trois viennent de
   tokens.css, et servent à l'identique aux panneaux, aux jetons et aux
   pastilles d'outils : c'est CE vocabulaire, et lui seul, qui donne au site son
   unité.
   ============================================================================= */

.btn {
  /* Centre le libellé, et une éventuelle icône, sur les deux axes. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);

  padding: 15px 75px;

  font-family: var(--font-display);
  font-size: var(--font-size-button);
  font-weight: bold;
  line-height: var(--line-height-tight);
  color: var(--color-text);
  text-align: center;

  background-color: var(--color-surface);
  background-image: var(--gradient-surface-raised);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-raised);
  cursor: pointer;

  transition:
    transform var(--duration-base) ease,
    box-shadow var(--duration-base) ease,
    background-color var(--duration-base) ease;
}

/* Survol et focus clavier partagent le même retour visuel : l'état est donc
   perceptible aussi bien à la souris qu'au clavier.

   L'OBJET MONTE, IL NE GROSSIT PAS
   L'agrandissement de 5 % déplaçait tout ce qui se trouvait au bord d'un bouton
   large — un taux de réussite, un chevron — de plusieurs pixels, et donnait à
   une liste entière l'air de respirer. Une élévation de deux pixels, avec
   l'ombre qui suit, dit la même chose sans rien déranger autour.

   L'ambre reste la couleur du survol : elle l'était déjà partout, et c'est ce
   que le joueur a appris. */
.btn:hover:not(:disabled):not([aria-disabled='true']),
.btn:focus-visible:not(:disabled):not([aria-disabled='true']) {
  background-color: var(--color-surface-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-raised-hover);
}

/* Au clic il s'enfonce : la tranche disparaît sous lui. */
.btn:active:not(:disabled):not([aria-disabled='true']) {
  transform: translateY(2px);
  box-shadow: var(--shadow-sm);
}

/* DEUX ÉTATS ÉTEINTS, ET ILS NE DISENT PAS LA MÊME CHOSE

   « disabled » est un bouton HORS D'USAGE : le temps d'une requête, ou parce
   qu'il n'y a rien à reprendre. Il perd toute matière — il n'y a plus rien à
   saisir — et le gris le dit sans détour.

   « aria-disabled » est une ANNONCE : le bouton existe, il n'est pas encore
   ouvert. Il garde donc la matière du site, simplement en retrait, et c'est la
   mention qui l'accompagne — « bientôt » — qui porte l'information. Le gris
   serait ici un contresens : plusieurs boutons gris de suite ne disent plus
   « pas encore », ils donnent l'impression d'une page en panne.

   Il reste atteignable au clavier — c'est tout l'intérêt d'aria-disabled sur
   l'attribut —, donc son focus doit se voir. */
.btn:disabled {
  background-color: #ccc;
  background-image: none;
  color: #999;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.btn[aria-disabled='true'],
.btn[aria-disabled='true']:hover,
.btn[aria-disabled='true']:focus-visible {
  background-color: var(--color-surface);
  background-image: var(--gradient-surface-raised);
  color: var(--color-text);
  box-shadow: var(--shadow-raised);
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.btn[aria-disabled='true']:focus-visible {
  opacity: 0.92;
}


/* -----------------------------------------------------------------------------
   Le bouton qui désigne
   -----------------------------------------------------------------------------
   UNE SEULE ENTRÉE PORTE L'AMBRE
   Plusieurs boutons de même couleur laissent choisir ; un seul en ambre
   DÉSIGNE — celui par lequel on commence, celui qui conclut une fenêtre. Sa
   tranche est de l'ambre sombre et non du sable : un objet repose sur sa propre
   matière.

   Il n'y en a jamais deux sur le même écran. Deux accents ne s'additionnent
   pas, ils s'annulent.
   -------------------------------------------------------------------------- */
.btn--accent {
  background-color: var(--color-brand-amber);
  background-image: var(--gradient-amber-raised);
  box-shadow: var(--shadow-raised-amber);
}

.btn--accent:hover:not(:disabled):not([aria-disabled='true']),
.btn--accent:focus-visible:not(:disabled):not([aria-disabled='true']) {
  background-color: var(--color-brand-amber);
  box-shadow: var(--shadow-raised-amber-hover);
}


/* Action secondaire — annuler, revenir en arrière. Discrète, pour que le
   choix principal reste évident au premier regard. */
.btn--quiet {
  background: transparent;
  box-shadow: none;
  color: var(--color-text-muted);
  font-size: 0.9em;
}

.btn--quiet:hover:not(:disabled),
.btn--quiet:focus-visible:not(:disabled) {
  background: rgba(60, 39, 35, 0.08);
  color: var(--color-text);
}


/* -----------------------------------------------------------------------------
   Le bouton qui efface
   -----------------------------------------------------------------------------
   Pour les gestes qui ne se reprennent pas : effacer un profil, renoncer pour
   de bon. Il ne CRIE pas — un bouton rouge vif au milieu du sable jurerait avec
   tout le reste — mais il ne se confond pas non plus avec ses voisins.

   Il n'est jamais seul : ces gestes-là passent toujours par une confirmation,
   et c'est elle qui porte l'avertissement. Le bouton, lui, se contente de ne
   pas ressembler aux autres.
   -------------------------------------------------------------------------- */
.btn--danger {
  color: var(--color-danger);
  background-color: var(--color-danger-surface);
}

.btn--danger:hover:not(:disabled),
.btn--danger:focus-visible:not(:disabled) {
  color: var(--color-brand-cream);
  background-color: var(--color-danger);
}


/* =============================================================================
   GROUPE DE BOUTONS
   Pile verticale de boutons de largeur identique.
   ============================================================================= */

.btn-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

/* Tous les boutons du groupe adoptent la largeur du plus large : la pile
   reste alignée quelle que soit la longueur des libellés traduits. */
.btn-group .btn {
  width: 100%;
}


/* =============================================================================
   APPARITION EN CASCADE
   Les boutons entrent l'un après l'autre, une fois la carte affichée.
   La classe s'applique au groupe, pas à chaque bouton.
   ============================================================================= */

.btn-group--animated .btn {
  /* Invisibles jusqu'à leur propre tour. */
  opacity: 0;
  animation: btn-appear var(--duration-fast) ease-out forwards;
}

.btn-group--animated .btn:nth-child(1) { animation-delay: var(--delay-button-1); }
.btn-group--animated .btn:nth-child(2) { animation-delay: var(--delay-button-2); }
.btn-group--animated .btn:nth-child(3) { animation-delay: var(--delay-button-3); }

@keyframes btn-appear {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* Sans animation (réglage système « réduire les animations »), les boutons
   doivent rester visibles : le reset neutralise la durée, pas l'opacité
   initiale, d'où cette règle explicite. */
@media (prefers-reduced-motion: reduce) {
  .btn-group--animated .btn {
    opacity: 1;
  }

  /* Ni élévation ni enfoncement : le changement de teinte suffit à dire que le
     bouton est visé. */
  .btn {
    transition: background-color var(--duration-base) ease;
  }

  .btn:hover,
  .btn:focus-visible,
  .btn:active {
    transform: none;
  }
}


/* =============================================================================
   ADAPTATION AUX PETITS ÉCRANS
   ============================================================================= */

@media (max-width: 800px) {
  .btn {
    padding: var(--space-xs) 35px;
  }

  .btn-group {
    gap: var(--space-md);
  }
}

@media (max-width: 480px) {
  .btn {
    padding: var(--space-xs) 26px;
  }
}