/* =========================================================================
   BLESC : un seul jeu de boutons (version 476, d'après la maquette validée le 31/10)
   Chargé après css/pages.css sur les pages qui ont des boutons (même ?v= que les autres
   feuilles : bump-version.sh le met à jour).

   Point de départ : le bouton tuile de l'arène des duels. Une tuile de Scrabble en dur :
   face mate, tranche nette dessous, ombre au sol. Quand on appuie, la face descend sur
   sa tranche, sans se déformer (ni écrasement, ni rebond, ni agrandissement).

   Quatre boutons, pas un de plus :
     .bouton.bouton-principal   l'action de l'écran, UN SEUL par écran, couleur du mode
     .bouton.bouton-secondaire  une autre action utile, tuile ivoire
     .bouton-discret            un lien souligné, sans tuile (Plus tard, Annuler, Renvoyer)
     .bouton.bouton-petit       pour les listes : couleur du mode pour l'action qui lance
                                une partie (Défier, Revanche, Relever), et avec
                                .bouton-secondaire, ivoire pour le reste (Envoyer, Copier,
                                Charger plus, Débloquer)
   Icône : <span class="bouton-icone"><i class="fa-solid fa-bolt"></i></span> devant le
   texte. Dans le principal, l'icône est posée sur une mini tuile ivoire ; ailleurs, l'icône seule.

   États, sans classe à ajouter :
     survol         :hover (souris seulement)   la face s'éclaire à peine
     appui          :active, [aria-pressed="true"]   la face descend sur sa tranche
     désactivé      :disabled, [aria-disabled="true"]   tuile à plat, grisée
     en cours       [aria-busy="true"]   reste à moitié enfoncé, trois cases se remplissent
     focus clavier  :focus-visible   anneau net autour de la tuile

   Couleur du mode, posée sur un parent (body ou section) :
     (rien)            vert : jeu du jour, fin de partie, compte
     .mode-duel        rose, comme la tuile éclair des duels
     .mode-challenge   or, comme la tuile médaille des Challenges
   Fond sombre (arène, page des Challenges, carte sombre) : .fond-nuit sur le parent.

   Largeur : un bouton prend la largeur de son texte, sur téléphone comme sur ordinateur.
   Jamais de width: 100 %, jamais de majuscules, jamais d'italique.
   Couleurs : celles de css/global.css (--color-green, --color-dark, --color-bg, --color-teal).

   Anciennes classes : .btn, .btn-primary, .btn-secondary, .btn-danger et .btn-modal restent dans
   css/global.css le temps de la transition (pages pas encore refaites : voir le commentaire là-bas).
   ========================================================================= */

:root {
    /* tuile ivoire (le secondaire, l'icône du principal) : la tuile du jeu */
    --tuile-ivoire: #fbf2df;
    --tuile-ivoire-tranche: #d9c7a1;
    --tuile-ombre: rgba(5, 11, 20, 0.22);

    /* couleur du mode : vert par défaut */
    --mode-face: var(--color-green, #609E7C);
    --mode-tranche: #46775c;
    --mode-encre: #fff;                       /* 3,1:1, réservé au grand format (texte large) */
    --mode-face-petit: var(--color-green-hover, #4d7e63);   /* petit format : 4,7:1 */
    --mode-tranche-petit: #375c48;
    --mode-icone: #46775c;                    /* icône sur la mini tuile ivoire */
    --mode-encre-douce: rgba(255, 255, 255, 0.4);

    --bouton-anneau: var(--color-teal, #17586a);
    --bouton-discret-encre: var(--color-dark, #21333E);
}
.mode-duel {
    --mode-face: #ee8a86;                     /* face de la tuile éclair (images/icones/duel) */
    --mode-tranche: #c45f5b;
    --mode-encre: var(--color-dark, #21333E); /* 5,4:1 (le blanc n'avait que 2,4:1) */
    --mode-face-petit: #ee8a86;
    --mode-tranche-petit: #c45f5b;
    --mode-icone: #c45f5b;
    --mode-encre-douce: rgba(33, 51, 62, 0.25);
}
.mode-challenge {
    --mode-face: #f5c842;                     /* face de la tuile médaille (images/icones/challenges) */
    --mode-tranche: #c9970f;
    --mode-encre: var(--color-dark, #21333E); /* 8,2:1 */
    --mode-face-petit: #f5c842;
    --mode-tranche-petit: #c9970f;
    --mode-icone: #b9850f;
    --mode-encre-douce: rgba(33, 51, 62, 0.25);
}
.fond-nuit {
    --bouton-anneau: #f5c842;
    --bouton-discret-encre: var(--color-bg, #fef3d8);
    --tuile-ombre: rgba(0, 0, 0, 0.38);
}

/* ---------- La tuile : commune au principal, au secondaire et au petit ---------- */
.bouton {
    /* réglages de la variante (écrasés plus bas) */
    --face: var(--tuile-ivoire);
    --tranche: var(--tuile-ivoire-tranche);
    --encre: var(--color-dark, #21333E);
    --h: 5px;                 /* épaisseur de la tranche */
    --haut: 48px;             /* hauteur de la face */
    --pad: 20px;
    --rayon: 14px;
    --taille: 1rem;
    --gap: 9px;

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap);
    box-sizing: border-box;
    min-height: var(--haut);
    max-width: 100%;
    margin: 0 0 var(--h);     /* la tranche dépasse sous la face : on lui garde sa place */
    padding: 0 var(--pad);
    border: 0;
    border-radius: var(--rayon);
    background: var(--face);
    color: var(--encre);
    font: 800 var(--taille)/1.15 var(--font-main, 'Inter', Arial, sans-serif);
    letter-spacing: 0.005em;
    text-transform: none;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 var(--h) 0 var(--tranche), 0 calc(var(--h) + 6px) 14px var(--tuile-ombre);
    transform: translateY(0);
    transition: transform 0.07s linear, box-shadow 0.07s linear;
}
.bouton:visited { color: var(--encre); }
/* (global.css pâlit les liens au survol : pas une tuile) */
a.bouton:hover { opacity: 1; }
.bouton > i, .bouton .bouton-icone > i { font-size: 0.95em; }
.bouton .bouton-icone { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--mode-icone); }

/* Principal : couleur du mode, grand, icône sur une mini tuile ivoire */
.bouton-principal {
    --face: var(--mode-face);
    --tranche: var(--mode-tranche);
    --encre: var(--mode-encre);
    --h: 6px;
    --haut: 56px;
    --pad: 26px;
    --rayon: 16px;
    --taille: 1.17rem;        /* 18,7 px gras : « texte large » pour le contraste */
    --gap: 12px;
    --mini: 34px;
}
.bouton-principal .bouton-icone {
    width: var(--mini);
    height: var(--mini);
    margin-left: calc(var(--pad) * -1 + 11px);   /* la mini tuile se cale à 11 px du bord */
    border-radius: 8px;
    background: var(--tuile-ivoire);
    color: var(--mode-icone);
    font-size: 1rem;
    box-shadow: 0 3px 0 var(--tuile-ivoire-tranche);
    transform: rotate(-4deg);
}

/* Secondaire : tuile ivoire, un cran plus petite */
.bouton-secondaire {
    --face: var(--tuile-ivoire);
    --tranche: var(--tuile-ivoire-tranche);
    --encre: var(--color-dark, #21333E);
}
/* sur le fond crème de la page, un filet garde le bord de la tuile lisible */
.bouton-secondaire { box-shadow: inset 0 0 0 1px rgba(33, 51, 62, 0.08), 0 var(--h) 0 var(--tranche), 0 calc(var(--h) + 6px) 14px var(--tuile-ombre); }

/* Petit : pour les listes et les cartes (Défier, Revanche, Relever ; ivoire : Envoyer, Copier) */
.bouton-petit {
    --face: var(--mode-face-petit);
    --tranche: var(--mode-tranche-petit);
    --encre: var(--mode-encre);
    --h: 4px;
    --haut: 38px;
    --pad: 14px;
    --rayon: 11px;
    --taille: 0.88rem;
    --gap: 7px;
}
/* (en vert, le petit garde l'encre blanche sur un vert plus profond : 4,7:1) */
.bouton-petit.bouton-secondaire { --face: var(--tuile-ivoire); --tranche: var(--tuile-ivoire-tranche); --encre: var(--color-dark, #21333E); }
.bouton-petit .bouton-icone { color: inherit; }
.bouton-secondaire .bouton-icone { color: var(--mode-icone); }
/* zone de toucher de 44 px au moins, sans agrandir la tuile */
.bouton-petit::after { content: ''; position: absolute; inset: -4px -2px calc(var(--h) * -1 - 2px); }

/* ---------- Survol (souris seulement) : la face s'éclaire, la mini tuile pivote d'un coup ---------- */
@media (hover: hover) and (pointer: fine) {
    .bouton:hover { filter: brightness(1.06); }
    .bouton-principal:hover .bouton-icone { transform: rotate(4deg); }
}

/* ---------- Appui : la face descend sur sa tranche ---------- */
.bouton:active,
.bouton[aria-pressed="true"] {
    transform: translateY(calc(var(--h) - 1px));
    box-shadow: 0 1px 0 var(--tranche), 0 2px 4px var(--tuile-ombre);
    filter: none;
}
.bouton-secondaire:active,
.bouton-secondaire[aria-pressed="true"] {
    box-shadow: inset 0 0 0 1px rgba(33, 51, 62, 0.08), 0 1px 0 var(--tranche), 0 2px 4px var(--tuile-ombre);
}

/* ---------- Focus clavier : un anneau net, à distance de la tuile ---------- */
.bouton:focus { outline: none; }
.bouton:focus-visible {
    outline: 3px solid var(--bouton-anneau);
    outline-offset: 3px;
}

/* ---------- Désactivé : la tuile est à plat, grisée, rien ne bouge ---------- */
.bouton:disabled,
.bouton[aria-disabled="true"] {
    --face: #e8e1d1;
    --tranche: #d3c9b4;
    --encre: rgba(33, 51, 62, 0.45);
    cursor: not-allowed;
    filter: none;
    transform: translateY(calc(var(--h) - 2px));
    box-shadow: 0 2px 0 var(--tranche);
    pointer-events: none;
}
.bouton:disabled .bouton-icone,
.bouton[aria-disabled="true"] .bouton-icone { opacity: 0.5; transform: none; }
.fond-nuit .bouton:disabled,
.fond-nuit .bouton[aria-disabled="true"] {
    --face: rgba(254, 243, 216, 0.12);
    --tranche: rgba(254, 243, 216, 0.06);
    --encre: rgba(254, 243, 216, 0.42);
}

/* ---------- En cours : la tuile reste à moitié enfoncée, trois cases se remplissent ---------- */
.bouton[aria-busy="true"] {
    cursor: progress;
    pointer-events: none;
    filter: none;
    transform: translateY(calc(var(--h) / 2));
    box-shadow: 0 calc(var(--h) / 2) 0 var(--tranche), 0 calc(var(--h) / 2 + 4px) 10px var(--tuile-ombre);
}
.bouton[aria-busy="true"] .bouton-icone,
.bouton[aria-busy="true"] > i { display: none; }
.bouton[aria-busy="true"]::before {
    --plein: currentColor;
    --vide: var(--case-vide, rgba(33, 51, 62, 0.22));
    content: '';
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    margin-right: 20px;       /* place des deux cases dessinées à droite */
    border-radius: 2px;
    background: var(--plein);
    box-shadow: 10px 0 0 var(--vide), 20px 0 0 var(--vide);
    animation: bouton-cases 1.2s steps(1, end) infinite;
}
.bouton-principal[aria-busy="true"]::before { width: 8px; height: 8px; margin-right: 24px; box-shadow: 12px 0 0 var(--vide), 24px 0 0 var(--vide); animation-name: bouton-cases-grand; }
/* cases vides : couleur douce de l'encre de la tuile */
.bouton-principal, .bouton-petit { --case-vide: var(--mode-encre-douce); }
.bouton-secondaire, .bouton-petit.bouton-secondaire { --case-vide: rgba(33, 51, 62, 0.22); }
@keyframes bouton-cases {
    0%   { background-color: var(--plein); box-shadow: 10px 0 0 var(--vide), 20px 0 0 var(--vide); }
    25%  { background-color: var(--plein); box-shadow: 10px 0 0 var(--plein), 20px 0 0 var(--vide); }
    50%  { background-color: var(--plein); box-shadow: 10px 0 0 var(--plein), 20px 0 0 var(--plein); }
    75%  { background-color: var(--vide); box-shadow: 10px 0 0 var(--vide), 20px 0 0 var(--vide); }
}
@keyframes bouton-cases-grand {
    0%   { background-color: var(--plein); box-shadow: 12px 0 0 var(--vide), 24px 0 0 var(--vide); }
    25%  { background-color: var(--plein); box-shadow: 12px 0 0 var(--plein), 24px 0 0 var(--vide); }
    50%  { background-color: var(--plein); box-shadow: 12px 0 0 var(--plein), 24px 0 0 var(--plein); }
    75%  { background-color: var(--vide); box-shadow: 12px 0 0 var(--vide), 24px 0 0 var(--vide); }
}

/* ---------- Discret : un lien, pas une tuile ---------- */
.bouton-discret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;         /* zone de toucher */
    padding: 0 6px;
    border: 0;
    background: none;
    color: var(--bouton-discret-encre);
    font: 600 0.92rem/1.2 var(--font-main, 'Inter', Arial, sans-serif);
    text-transform: none;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
    opacity: 0.78;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.bouton-discret:visited { color: var(--bouton-discret-encre); }
@media (hover: hover) and (pointer: fine) {
    .bouton-discret:hover { opacity: 1; text-decoration-thickness: 2.5px; }
}
.bouton-discret:active { opacity: 1; transform: translateY(1px); }
.bouton-discret:focus { outline: none; }
.bouton-discret:focus-visible { outline: 3px solid var(--bouton-anneau); outline-offset: 0; border-radius: 6px; opacity: 1; }
.bouton-discret:disabled,
.bouton-discret[aria-disabled="true"] { opacity: 0.35; text-decoration: none; cursor: not-allowed; pointer-events: none; }
.bouton-discret[aria-busy="true"] { cursor: progress; pointer-events: none; text-decoration: none; }
.bouton-discret[aria-busy="true"]::before {
    --plein: currentColor;
    --vide: rgba(33, 51, 62, 0.2);
    content: '';
    width: 6px; height: 6px; margin-right: 16px; border-radius: 1.5px;
    background: var(--plein);
    box-shadow: 8px 0 0 var(--vide), 16px 0 0 var(--vide);
    animation: bouton-cases-discret 1.2s steps(1, end) infinite;
}
.fond-nuit .bouton-discret[aria-busy="true"]::before { --vide: rgba(254, 243, 216, 0.25); }
@keyframes bouton-cases-discret {
    0%   { background-color: var(--plein); box-shadow: 8px 0 0 var(--vide), 16px 0 0 var(--vide); }
    25%  { background-color: var(--plein); box-shadow: 8px 0 0 var(--plein), 16px 0 0 var(--vide); }
    50%  { background-color: var(--plein); box-shadow: 8px 0 0 var(--plein), 16px 0 0 var(--plein); }
    75%  { background-color: var(--vide); box-shadow: 8px 0 0 var(--vide), 16px 0 0 var(--vide); }
}

/* ---------- Les cartes qui mènent à une page restent des cartes ----------
   Même geste que les boutons : la carte descend sur sa tranche quand on appuie,
   au lieu de rétrécir (le scale(0.98) de .home-card:active est retiré de pages.css). */
.carte-tuile,
.home-card.carte-tuile {
    --tranche-carte: rgba(33, 51, 62, 0.10);
    box-shadow: 0 4px 0 var(--tranche-carte), 0 8px 16px rgba(33, 51, 62, 0.06);
    transition: transform 0.07s linear, box-shadow 0.07s linear;
}
.carte-tuile.home-card-primary,
.carte-tuile.carte-nuit { --tranche-carte: #0d1a22; }
.carte-tuile:active,
.home-card.carte-tuile:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 var(--tranche-carte), 0 2px 4px rgba(33, 51, 62, 0.08);
}
.carte-tuile:focus { outline: none; }
.carte-tuile:focus-visible { outline: 3px solid var(--color-teal, #17586a); outline-offset: 3px; }

/* ---------- Ordinateur : un peu plus grand, toujours à la largeur du texte ---------- */
@media (min-width: 900px) {
    .bouton { --haut: 50px; --pad: 22px; --taille: 1.02rem; }
    .bouton-principal { --haut: 60px; --pad: 30px; --taille: 1.2rem; --mini: 38px; }
    .bouton-petit { --haut: 36px; --pad: 14px; --taille: 0.86rem; }
    .bouton-discret { min-height: 32px; font-size: 0.9rem; }
}

/* ---------- Petits téléphones : le principal peut passer à la ligne plutôt que déborder ---------- */
@media (max-width: 360px) {
    .bouton-principal { --pad: 20px; --taille: 1.08rem; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
    .bouton, .carte-tuile, .bouton .bouton-icone { transition: none; }
    .bouton[aria-busy="true"]::before,
    .bouton-discret[aria-busy="true"]::before { animation: none; box-shadow: 10px 0 0 var(--plein), 20px 0 0 var(--vide); }
}