/* Reset and base styles */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, system-ui, 'Segoe UI', Tahoma, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--color-bg-page);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* ============================================================
   Focus ring : desactivation globale "nucleaire".
   ------------------------------------------------------------
   Le user a explicitement demande "ne rien voir" au clic sur les
   elements cliquables (KPI tiles, mini cards H2H, liens texte,
   nav items, etc.).

   Couverture :
   - outline natif browser (Chrome, Firefox, Safari)
   - box-shadow focus (Bootstrap, Mantine)
   - ::-moz-focus-inner (Firefox button border interne)
   - -webkit-tap-highlight-color (Mobile Safari touch)
   - border-color: Bootstrap utilise parfois border bleu sur focus
     -> on garde la border initiale meme apres clic
   - text-decoration : sur les <a> Bootstrap re-applique underline
     sur focus, on neutralise

   Exception : inputs (input/textarea/select) conservent un focus
   discret pour l'UX de saisie.
   ============================================================ */
* {
    -webkit-tap-highlight-color: transparent;
}

*:focus,
*:focus-visible,
*:focus-within,
*:active,
a:focus,
a:focus-visible,
a:active,
button:focus,
button:focus-visible,
button:active,
[role="button"]:focus,
[role="button"]:focus-visible,
[role="button"]:active,
[role="tab"]:focus,
[role="tab"]:focus-visible,
[tabindex]:focus,
[tabindex]:focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}

/* Firefox : bordure dotted interne sur button */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border: 0 !important;
    outline: 0 !important;
}

/* Bootstrap btn focus shadow (.btn:focus, .btn-check:focus + .btn) */
.btn:focus,
.btn:focus-visible,
.btn:active,
.btn.focus,
.btn-check:focus + .btn,
.btn-check:focus-visible + .btn {
    outline: none !important;
    box-shadow: none !important;
}

/* Liens : pas d'underline ni de changement de couleur a aucun moment.
   Bootstrap re-active text-decoration: underline sur a:hover et a:focus,
   on neutralise tous les etats. La couleur bleue Bootstrap (--bs-link-color)
   est aussi neutralisee : les liens heritent de la couleur de leur parent. */
a,
a:link,
a:visited,
a:hover,
a:focus,
a:focus-visible,
a:active {
    text-decoration: none !important;
    color: inherit;
    /* Nuclear : pas d'outline / border / box-shadow ajoute par d'autres
       regles (Bootstrap, Mantine, browser default) au focus/active. */
    outline: none !important;
    outline-width: 0 !important;
    outline-color: transparent !important;
    box-shadow: none !important;
}

/* Cible <a href="/..."> qui contiennent un <div> ou <span> en enfant direct
   (= cliquables KPI tile, player card, mini-card). Force aucun cadre quel
   que soit l'etat. */
a[href]:focus,
a[href]:focus-visible,
a[href]:active,
a[href]:hover {
    outline: none !important;
    outline-width: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* Nucleaire : toute occurrence d'underline sur les liens est ecrasee.
   Exceptions explicites via .keep-underline si jamais on veut souligner
   un lien specifique. */
a:not(.keep-underline),
a:not(.keep-underline):link,
a:not(.keep-underline):visited,
a:not(.keep-underline):hover,
a:not(.keep-underline):focus,
a:not(.keep-underline):active {
    text-decoration: none !important;
    text-decoration-line: none !important;
}

/* Exception : inputs de formulaire conservent un focus discret */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 2px var(--color-focus-ring) !important;
}