/* ============================================================
   Escrime Stuff — thème bleu, blanc, rouge (version ardoise)
   S'ajoute après styles.css, mobile.css et menu.css sans les modifier.
   Principe : le bleu porte l'interface, le blanc fait respirer,
   le rouge reste rare (signature tricolore et onglet actif) pour que
   les alertes rouges gardent tout leur sens.
   ============================================================ */
:root{
  --tri-bleu:  #1F4BB0;   /* bleu des boutons et des accents */
  --tri-rouge: #D3303B;   /* rouge de la signature tricolore */
  --tri-blanc: #FFFFFF;
  --accent:      #1F4BB0;
  --accent-soft: #E5ECFA;
  --brand-navy:  #26365A; /* barre du haut et menu : bleu ardoise */
  --tri-bleu-fonce: #142E62; /* survol des boutons bleus */
}

/* ---------- Le liseré tricolore sous la barre du haut ---------- */
.topbar{ position: relative; }
.topbar::after{
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg,
    #4A7BEA 0 33.33%, var(--tri-blanc) 33.33% 66.66%, var(--tri-rouge) 66.66% 100%);
}

/* ---------- La lame du logo devient un petit drapeau ---------- */
.brand .mark{
  width: 15px; height: 22px;
  background: linear-gradient(90deg,
    #4A7BEA 0 33.33%, var(--tri-blanc) 33.33% 66.66%, var(--tri-rouge) 66.66% 100%);
}

/* ---------- Petites barres d'accent (connexion, pages vides) ---------- */
.login-card .piste,
.main-empty .piste{
  width: 54px;
  background: linear-gradient(90deg,
    var(--tri-bleu) 0 33.33%, #DCE3EF 33.33% 66.66%, var(--tri-rouge) 66.66% 100%);
}

/* ---------- Boutons principaux en bleu ---------- */
.btn-primary,
.btn-new,
.btn-edit{ background: var(--tri-bleu); border-color: var(--tri-bleu); color: #fff; }
.btn-primary:hover,
.btn-new:hover,
.btn-edit:hover{ background: var(--tri-bleu-fonce); border-color: var(--tri-bleu-fonce); }
.btn-edit.active{ background: var(--panel); color: var(--tri-bleu); border-color: var(--tri-bleu); }
.btn-ghost:hover{ border-color: var(--tri-bleu); color: var(--tri-bleu); }

/* ---------- Menu : onglet actif marqué en rouge ---------- */
.menu-nav .tab-btn.active::before{ background: var(--tri-rouge); }
.menu-nav .tab-btn.active{ background: rgba(255,255,255,.13); }

/* ---------- Accueil : chiffres clés soulignés de bleu ---------- */
.stat-card{ border-top-color: var(--tri-bleu); }
.stat-card .num{ color: var(--tri-bleu-fonce); }

/* ---------- Listes : sélection en bleu ---------- */
.eq-item.active{ border-left-color: var(--tri-bleu); background: var(--accent-soft); }
.bar-fill{ background: var(--tri-bleu); }

/* ---------- Focus clavier visible et cohérent ---------- */
input:focus-visible, select:focus-visible, textarea:focus-visible,
.btn-primary:focus-visible, .btn-new:focus-visible, .btn-ghost:focus-visible{
  outline: 2px solid var(--tri-bleu); outline-offset: 1px;
}