/*
 * Doquéo — © 2026 Igor FRANÇOZO. Tous droits réservés. Voir COPYRIGHT.md.
 *
 * Botões — um só padrão para todas as páginas (index.html, aide.html, tarifs.html).
 * Carregado ANTES do <style> de cada página: regras de componente da página podem ajustar (layout), mas cor, borda,
 * raio, altura, hover, foco, selecionado, desativado e o pisca do clique vêm daqui. Cores = tokens do tema da página
 * (--bg, --card, --row, --txt, --brd, --pri, --err, --inv, --inv-txt).
 */
/* ===== botões: padrão único de TODAS as páginas — site, ajuda, tarifs (Igor 09/11/2026: «tudo padronizado, cores, bordas, pisca, tamanho») =====
   Tokens: mudar aqui muda todos os botões. Tamanhos: normal = altura dos campos (--btnH), .sm = ações secundárias de linha/cabeçalho (--btnHsm).
   Celular e tela de toque: alturas maiores (área de toque); tablet: 48/44 (bloco do tablet em index.html).
   Variantes: padrão (fundo --row, borda --brd) · .pri (contrário da página, --inv; Igor 27/10) · .danger (texto vermelho).
   Estados iguais em todo lugar: hover (com mouse) = borda azul do campo de busca (Igor 30/10: cor só no hover/foco) · foco do teclado = contorno azul ·
   apertar = afunda (scale .97) · clique = pisca 2× devagar (.clk, mais abaixo) · selecionado (.on / aria-selected / aria-pressed) = contrário da página ·
   desativado = meio apagado, sem hover. Exceção pedida pelo Igor (30/10): no «Scanner les produits du BL» (#blcard) principal e selecionado = borda azul.
   Relevo (Igor 09/11/2026: «parecidos com os do Accueil, mas em miniatura, com logos»): face em degradê, borda de baixo de 3 px (--btnEdge)
   e sombra, iguais aos botões do Accueil em tamanho pequeno; ao apertar afunda os 3 px com a borda azul. Cada botão tem um ícone de linha
   (botoes.js põe o ícone pelo texto quando o botão não traz um; «Retour» = seta curva). */
:root { --edge:#050608; --face1:#2a2c31; --face2:#1d1f23; --tileHi:rgba(255,255,255,.14); --tileSh:rgba(0,0,0,.5); --btnBrd:color-mix(in srgb, var(--brd) 70%, #fff 14%); }
:root[data-theme="light"] { --edge:#b9ad99; --face1:#fbf8f3; --face2:#ebe5db; --tileHi:rgba(255,255,255,.95); --tileSh:rgba(60,45,25,.18); --btnBrd:#d3c9ba; }
:root { --btnEdge:3px; --btnH:44px; --btnHsm:34px; --btnR:10px; --btnRlg:12px; --btnPadX:14px; --btnPadXsm:10px; --btnFs:.95rem; --btnFsSm:.85rem; --btnFw:500; --btnFwPri:600;
        --btnHov:color-mix(in srgb, var(--pri) 60%, var(--brd)); --btnRing:var(--pri); }
@media (max-width:639.98px), (pointer:coarse) { :root { --btnHsm:40px; } }
button { max-width:100%; min-height:var(--btnH); padding:6px var(--btnPadX); font:inherit; font-size:var(--btnFs); font-weight:var(--btnFw); line-height:1.2; border:1px solid var(--btnBrd); border-radius:var(--btnR); color:var(--txt); cursor:pointer;
         background:linear-gradient(180deg, var(--face1), var(--face2)); box-shadow:inset 0 1px 0 var(--tileHi), 0 var(--btnEdge) 0 var(--edge), 0 calc(var(--btnEdge) + 3px) 7px var(--tileSh);
         -webkit-tap-highlight-color:transparent; }
@media (hover:hover) { button:hover:not(:disabled) { border-color:var(--btnHov); } }
:where(button, a, summary, [role=button], [tabindex]):focus-visible { outline:2px solid var(--btnRing); outline-offset:2px; }
:where(button:has(> .i)) { display:inline-flex; align-items:center; justify-content:center; gap:7px; }
button.pri { background:linear-gradient(180deg, color-mix(in srgb, var(--inv) 88%, #fff 12%), var(--inv)); border-color:var(--inv); color:var(--inv-txt); font-weight:var(--btnFwPri); }
@media (hover:hover) { button.pri:hover:not(:disabled) { border-color:var(--btnHov); } }
button.danger { color:var(--err); }
@media (hover:hover) { button.danger:hover:not(:disabled) { border-color:color-mix(in srgb, var(--err) 60%, var(--brd)); } }
button.sm { min-height:var(--btnHsm); padding:4px var(--btnPadXsm); font-size:var(--btnFsSm); }
button:disabled { opacity:.5; cursor:not-allowed; }
/* elementos que são <button> mas não têm cara de botão (linhas de lista, itens do menu, opções, olho da senha, caixas de foto): sem relevo */
:where(.menu button, .itemhead, .convrow, [role=option], .pweye, .tbox, .blmaptgl, .rm, .steps button, .bubble .who button) { box-shadow:none; }
button > .i:first-child { flex:none; }
/* selecionado: sempre o contrário da página (Igor 27/10), em qualquer grupo de botões */
button:where(.on, [aria-selected="true"], [aria-pressed="true"]):where(:not(.convrow, [role=option], .itemhead, .pweye)) { background:var(--inv); border-color:var(--inv); color:var(--inv-txt);
  transform:translateY(2px); box-shadow:inset 0 2px 4px var(--tileSh), 0 1px 0 var(--edge); } /* escolhido = fica «apertado» */
button:where(.on, [aria-selected="true"], [aria-pressed="true"]):where(:not(.convrow, [role=option], .itemhead, .pweye)) .i { color:inherit; }

/* clique (Igor, 08/11/2026): tudo o que se clica pisca 2 vezes devagar — borda azul do campo de busca, 2 × 0,35 s (DQ_CLK_MS em botoes.js).
   A ação roda na hora. Nada com movimento reduzido (o JS nem põe a classe). */
@keyframes clkBlink { 0%, 100% { outline:2px solid transparent; } 50% { outline:2px solid var(--pri); } }
.clk { outline-offset:-1px; animation:clkBlink .35s ease-in-out 2 !important; }
/* apertar: como os botões do Accueil — afunda a altura da borda de baixo, a borda some e aparece a borda azul do campo de busca.
   .press = dedo no botão (o Safari do iPhone ignora :active sem toque registrado), posto por botoes.js. Retorno do toque: vale também com movimento reduzido. */
button { transition:transform .08s ease-out, box-shadow .08s ease-out, background-color .15s ease, border-color .15s ease, color .15s ease; touch-action:manipulation; }
:is(button:active, button.press):not(:disabled):not(.hometile) { transform:translateY(var(--btnEdge)); border-color:var(--pri);
  box-shadow:inset 0 2px 5px var(--tileSh), 0 0 0 var(--edge) !important; transition-duration:.04s; }
:where(.menu button, .itemhead, .convrow, [role=option], .pweye, .tbox, .blmaptgl, .rm, .steps button, .bubble .who button):is(:active, .press) { transform:none; box-shadow:none !important; }
@media (prefers-reduced-motion:reduce) { button { transition:none; } }
/* «Retour»: seta curva azul em todas as telas */
:is(.backbtn, [data-back], button.back) > .i:first-child { color:var(--pri); }
/* ícone de linha (o mesmo de index.html), para as páginas que não têm o próprio estilo (ajuda, tarifs) */
:where(svg.i) { width:1.15em; height:1.15em; flex:none; vertical-align:-.2em; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }