/* ==========================================================================
   boutons.css — le bouton « Polyfeed », reutilisable sur n'importe quel site.

   MODELE : les boutons et tuiles de polyfeedapp.netlify.app, releves au pixel :
     sombre : fond #323232, liseré 1 px #3d3d3d, texte blanc gras, rayon 8 px,
              survol = fond a 80 % ;
     clair  : fond blanc, texte #252525 (le fond de leur page), liseré blanc,
              survol = blanc a 90 %. C'est l'etat « choisi » / l'action principale.
   Pense pour un fond de page sombre (#252525 chez eux, marche jusqu'au noir).

   UTILISATION :
     <link rel="stylesheet" href="/kit/boutons.css">
     <button class="bouton">Annuler</button>
     <button class="bouton bouton-clair">Valider</button>
     <a class="bouton bouton-grand bouton-clair" href="/">Commencer</a>
     <button class="bouton bouton-mini" aria-pressed="true">Jour</button>
     <div class="tuile"><span>Paris</span><b>0</b></div>

   Tailles : mini 20 px (filtres), petit 32 px, normal 40 px, grand 48 px.
   Un bouton avec aria-pressed="true" ou aria-current="page" passe tout seul en
   clair : c'est l'onglet ou le filtre actif, comme chez Polyfeed.
   Pour changer de teinte sans toucher au reste, redefinir les variables --bouton-*.
   ========================================================================== */

:root {
  --bouton-fond: #323232;
  --bouton-fond-survol: rgba(50, 50, 50, 0.8);
  --bouton-lisere: #3d3d3d;
  --bouton-texte: #ffffff;
  --bouton-clair-fond: #ffffff;
  --bouton-clair-fond-survol: rgba(255, 255, 255, 0.9);
  --bouton-clair-texte: #252525;
  --bouton-rayon: 8px;
  --bouton-transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-sizing: border-box; height: 40px; padding: 0 20px;
  background: var(--bouton-fond); color: var(--bouton-texte);
  border: 1px solid var(--bouton-lisere); border-radius: var(--bouton-rayon);
  font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: var(--bouton-transition);
}
.bouton:hover { background: var(--bouton-fond-survol); }
.bouton:active { transform: scale(0.98); }
.bouton:focus-visible { outline: 2px solid var(--bouton-texte); outline-offset: 2px; }
.bouton:disabled, .bouton[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }

/* Variante claire = action principale, ou element choisi. */
.bouton-clair,
.bouton[aria-pressed="true"],
.bouton[aria-current="page"] {
  background: var(--bouton-clair-fond); color: var(--bouton-clair-texte);
  border-color: var(--bouton-clair-fond);
}
.bouton-clair:hover,
.bouton[aria-pressed="true"]:hover,
.bouton[aria-current="page"]:hover { background: var(--bouton-clair-fond-survol); }

/* Tailles. */
.bouton-mini  { height: 20px; padding: 0 8px;  font-size: 12px; min-width: 72px; }
.bouton-petit { height: 32px; padding: 0 12px; font-size: 13px; }
.bouton-grand { height: 48px; padding: 0 26px; font-size: 17px; }
.bouton-large { width: 100%; }

/* Tuile de chiffre (le « Bets 0 » de Polyfeed) : meme matiere que le bouton. */
.tuile {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  box-sizing: border-box; min-width: 0; height: 80px; padding-top: 6px;
  background: var(--bouton-fond); color: var(--bouton-texte);
  border: 1px solid var(--bouton-lisere); border-radius: var(--bouton-rayon);
  font-weight: 700;
}
.tuile > :first-child { font-size: 14px; line-height: 20px; }
.tuile > :last-child  { margin-top: 12px; font-size: 20px; line-height: 1; }

@media (prefers-reduced-motion: reduce) {
  .bouton { transition: none; }
  .bouton:active { transform: none; }
}