/* ═══════════════════════════════════════════════════════════
   KLAMPAC — Thème bleu (couleurs du logo)
   À charger dans le <head> de TOUTES les pages, AVANT les autres CSS du site.
   Le noir des boutons, du bouton « Compte », des onglets actifs… devient le bleu du logo.
   ═══════════════════════════════════════════════════════════ */
:root {
  --kl-blue: #1E2F65;          /* bleu exact du logo : boutons, liens actifs */
  --kl-blue-hover: #16244F;    /* survol */
  --kl-blue-soft: #EEF1F8;     /* fonds légers (sélection, badges) */
  --kl-red: #E3463D;           /* rouge du logo : uniquement petites touches (badge panier, erreurs) */
  --kl-ink: #111A33;           /* texte principal */
  --kl-muted: #677087;         /* texte secondaire */
  --kl-line: #E3E6EE;          /* traits, bordures */
  --kl-bg-soft: #F6F7FA;       /* fonds des champs, cartes */
  --kl-radius: 8px;

  /* Les composants du kit suivent automatiquement le thème */
  --kld-primary: var(--kl-blue);
  --kld-primary-hover: var(--kl-blue-hover);
  --klc-navy: var(--kl-blue);
  --kls-ink: var(--kl-ink);
  --klf-ink: var(--kl-ink);
}

/* Classes prêtes à l'emploi pour les boutons du site */
.kl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--kl-blue);
  background: var(--kl-blue); color: #fff; font: inherit; font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: background-color .25s, color .25s, transform .3s;
}
.kl-btn:hover { background: var(--kl-blue-hover); border-color: var(--kl-blue-hover) }
.kl-btn-line { background: transparent; color: var(--kl-blue) }
.kl-btn-line:hover { background: var(--kl-blue); color: #fff }
.kl-badge { background: var(--kl-red); color: #fff }

/* Titres de section en bleu du logo (le texte courant reste bleu nuit pour la lisibilité) */
.kl-heading, h1.kl-heading, h2.kl-heading { color: var(--kl-blue) }


/* ═══════════════════════════════════════════════════════════
   RÈGLES DU THÈME BLEU KLAMPAC (#1E2F65)
   - Titres de section en bleu
   - Boutons pleins en bleu
   - Blocs sombres en bleu
   - Navigation en bleu
   ═══════════════════════════════════════════════════════════ */

[hidden] { display: none !important; }

/* Typographie globale */
body { color: var(--kl-ink); }
p { color: var(--kl-ink); }

/* Grands titres de sections en bleu logo */
h1:not(.kla-h),
h2:not(.kla-h),
.klt-title,
.section-title,
.kl-heading {
  color: var(--kl-blue) !important;
}

/* ── MENU DE NAVIGATION & EN-TÊTE EN BLEU DU LOGO ── */
header nav a {
  color: var(--kl-blue) !important;
  font-weight: 700 !important;
  transition: color 0.2s ease, border-color 0.2s ease !important;
  position: relative !important;
}
header nav a:hover {
  color: var(--kl-blue-hover) !important;
}
header nav a.nav-active,
header nav a.active,
header nav a[aria-current="page"] {
  color: var(--kl-blue) !important;
  border-bottom: 2px solid var(--kl-blue) !important;
  padding-bottom: 2px !important;
}

/* Icônes recherche, panier, menu burger dans l'en-tête */
header #open-search,
header #menu-btn,
header a[href="cart.html"],
header a[href="infos.html"] {
  color: var(--kl-blue) !important;
}
header #open-search .material-symbols-outlined,
header #menu-btn .material-symbols-outlined,
header a[href="cart.html"] .material-symbols-outlined,
header a[href="infos.html"] .material-symbols-outlined {
  color: var(--kl-blue) !important;
}

/* Bouton « Compte » en-tête desktop : bleu plein avec texte blanc */
header a[href="account.html"] {
  background-color: var(--kl-blue) !important;
  color: #ffffff !important;
  border: 1px solid var(--kl-blue) !important;
}
header a[href="account.html"]:hover {
  background-color: var(--kl-blue-hover) !important;
  border-color: var(--kl-blue-hover) !important;
}

/* Badge panier en rouge du logo */
#cart-count-badge,
#cart-count-badge-bottom {
  background-color: var(--kl-red) !important;
  color: #ffffff !important;
}

/* Menu Mobile tiroir (Drawer) */
#menu-drawer nav a {
  color: var(--kl-blue) !important;
}
#menu-drawer nav a:hover,
#menu-drawer nav a.active {
  background-color: var(--kl-blue-soft) !important;
  color: var(--kl-blue) !important;
}
#menu-drawer a[href="account.html"] {
  background-color: var(--kl-blue) !important;
  color: #ffffff !important;
}

/* Barre de navigation mobile inférieure (Bottom Nav) */
.bottom-nav a {
  color: var(--kl-blue) !important;
}
.bottom-nav a.active,
.bottom-nav a.text-black {
  color: var(--kl-blue) !important;
  font-weight: 800 !important;
}
.bottom-nav .material-symbols-outlined {
  color: var(--kl-blue) !important;
}

/* Boutons pleins du site qui étaient noirs */
.bg-black,
button.bg-black,
a.bg-black {
  background-color: var(--kl-blue) !important;
  color: #ffffff !important;
  border-color: var(--kl-blue) !important;
}
.bg-black:hover,
button.bg-black:hover,
a.bg-black:hover,
.hover\:bg-gray-800:hover,
.hover\:bg-gray-900:hover,
.hover\:bg-black:hover {
  background-color: var(--kl-blue-hover) !important;
  border-color: var(--kl-blue-hover) !important;
}

.border-black {
  border-color: var(--kl-blue) !important;
}

/* Encadrés et bandeaux sombres qui passent en bleu avec texte blanc */
.bg-zinc-900,
.bg-gray-900,
.bg-neutral-900,
.bg-black.text-white {
  background-color: var(--kl-blue) !important;
  color: #ffffff !important;
}
.bg-zinc-900 *,
.bg-gray-900 *,
.bg-neutral-900 *,
.bg-black.text-white * {
  color: #ffffff !important;
}

/* Pas de défilement horizontal */
body, html {
  max-width: 100vw;
  overflow-x: hidden;
}