/* ==========================================================================
   TBF DIGITAL — Composants partagés (navigation, boutons, footer)
   Chargé sur les 6 pages principales. Contenu identique à ce qui était
   auparavant dupliqué dans le <style> de chaque page.
   ========================================================================== */

/* ===== MODE SOMBRE : composants Bootstrap (modales, formulaires) =====
   Bootstrap est chargé avant ce fichier : ces règles gagnent la cascade
   sans avoir besoin de !important. */
[data-theme="dark"] .modal-content {
  background: var(--surface);
  color: var(--ink);
}
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
  border-color: var(--border);
}
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background-color: var(--input-bg);
  color: var(--ink);
  border-color: var(--border);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background-color: var(--input-bg);
  color: var(--ink);
}
[data-theme="dark"] .form-label { color: var(--ink); }
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* ===== NAV ===== */
/* Navbar flottante avec effet verre depoli (glassmorphism) */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 14px 16px 10px;
  background: transparent;
}
nav.wrap {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 22px;
  border-radius: 18px;
  background: rgba(11, 31, 58, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 10px 30px rgba(3, 10, 25, 0.20);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  animation: navFadeIn 0.6s cubic-bezier(.16,1,.3,1) both;
  transition: height 0.35s cubic-bezier(.4,0,.2,1),
              background-color 0.35s ease,
              box-shadow 0.35s ease,
              border-color 0.35s ease;
}
/* Repli propre si le navigateur ne supporte pas le flou */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  nav.wrap { background: var(--navy); }
}
@keyframes navFadeIn {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Scroll intelligent : navbar plus compacte et plus opaque au defilement */
header.header-scrolled nav.wrap {
  height: 58px;
  background: rgba(11, 31, 58, 0.88);
  box-shadow: 0 14px 34px rgba(3, 10, 25, 0.30);
}

.logo { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; color: var(--white); letter-spacing: -0.3px; }
.logo img { width: 32px; height: 32px; border-radius: 7px; display: block; transition: transform 0.35s cubic-bezier(.34,1.56,.64,1); }
.logo:hover img { transform: scale(1.08) rotate(-4deg); }
.logo span { color: var(--glass); }

.nav-links { display: flex; gap: 20px; }
.nav-links a {
  position: relative;
  color: rgba(255,255,255,0.75); font-size: 14px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 1px;
  white-space: nowrap;
  transition: color 0.25s ease, transform 0.25s ease;
}
/* Soulignement anime au survol / focus */
.nav-links a::after {
  content: "";
  position: absolute; left: 0; bottom: -4px;
  width: 100%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--glass), var(--blue));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(.4,0,.2,1);
}
.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--white);
  transform: translateY(-1px);
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after { transform: scaleX(1); }
/* Lien actif : indicateur permanent + couleur plus marquee */
.nav-links a.active { color: var(--white); font-weight: 600; }
.nav-links a.active::after { transform: scaleX(1); background: var(--glass); }

.nav-icon { font-size: 14px; flex: 0 0 auto; opacity: 0.85; line-height: 1; }

/* Bouton CTA premium : degrade subtil, hover et clic animes */
.nav-cta {
  background: linear-gradient(135deg, var(--blue), #2d80f4);
  color: var(--white); font-weight: 600; font-size: 14px;
  padding: 10px 20px; border-radius: 10px;
  display: flex; align-items: center; gap: 8px;
  box-shadow: 0 6px 18px rgba(30,111,232,0.30);
  transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), box-shadow 0.25s ease, filter 0.2s ease;
}
.nav-cta:hover {
  transform: translateY(-1px) scale(1.035);
  box-shadow: 0 10px 26px rgba(30,111,232,0.42);
  filter: brightness(1.06);
}
.nav-cta:active { transform: scale(0.96); box-shadow: 0 4px 12px rgba(30,111,232,0.28); }

.nav-right { display: flex; align-items: center; gap: 14px; }
.lang-toggle {
  background: transparent; border: 1.5px solid rgba(255,255,255,0.3); color: var(--white);
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.5px;
  padding: 7px 11px; border-radius: 6px; cursor: pointer; transition: border-color 0.2s ease, transform 0.15s ease;
  display: inline-flex; align-items: center; gap: 7px;
}
.flag-icon { width: 18px; height: 12px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,0.25); flex: 0 0 auto; display: block; }
.flag-hidden { display: none; }
.visually-hidden { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lang-toggle:hover { border-color: rgba(255,255,255,0.65); }
.lang-toggle:active { transform: scale(0.94); }

/* Bouton hamburger : morphing propre vers une croix */
.burger {
  display: none;
  position: relative;
  width: 38px; height: 38px;
  color: var(--white); cursor: pointer;
  background: transparent; border: none; border-radius: 8px;
  transition: background-color 0.2s ease;
}
.burger:hover { background: rgba(255,255,255,0.08); }
.burger-box { position: absolute; inset: 0; margin: auto; width: 22px; height: 16px; }
.burger-bar {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: var(--white);
  transition: transform 0.35s cubic-bezier(.4,0,.2,1), opacity 0.25s ease, top 0.35s cubic-bezier(.4,0,.2,1);
}
.burger-bar:nth-child(1) { top: 0; }
.burger-bar:nth-child(2) { top: 7px; }
.burger-bar:nth-child(3) { top: 14px; }
.nav-open .burger-bar:nth-child(1) { top: 7px; transform: rotate(45deg); }
.nav-open .burger-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-open .burger-bar:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* Fond flou derriere le menu mobile ouvert */
.nav-backdrop {
  position: fixed; inset: 0; z-index: 1;
  background: rgba(6,14,28,0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.nav-open .nav-backdrop { opacity: 1; visibility: visible; pointer-events: auto; }

body.nav-scroll-lock { overflow: hidden; }

.nav-open nav.wrap {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  height: auto;
  padding: 18px 22px 22px;
}
.nav-open .nav-links {
  flex-direction: column;
  width: 100%;
  gap: 14px;
}
.nav-open .nav-links a {
  padding: 10px 0;
}
.nav-open .nav-right {
  width: 100%;
  flex-direction: column;
  gap: 10px;
  order: 2;
}
.nav-open .nav-cta {
  width: 100%;
  justify-content: center;
}
button.burger:focus-visible,
.option-btn:focus-visible,
.filter-chip:focus-visible,
.btn:focus-visible,
.lang-toggle:focus-visible,
.nav-cta:focus-visible,
.nav-links a:focus-visible {
  outline: 3px solid rgba(30,111,232,0.35);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ===== BASCULE MENU MOBILE =====
   Seuil relevé à 1180px (largeur max de nav.wrap) : en dessous, 6 liens de nav
   + bascule de langue/thème + CTA WhatsApp ne tiennent plus sur une ligne
   sans se chevaucher. Isolé de l'ancien media query 860px (qui garde ses
   propres règles de mise en page par page) pour ne pas y toucher. */
@media (max-width: 1180px) {
  .nav-links, .nav-right {
    display: flex;
    max-height: 0;
    min-width: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: max-height 0.45s cubic-bezier(.4,0,.2,1), opacity 0.3s ease, visibility 0s linear 0.45s;
  }
  .nav-open .nav-links,
  .nav-open .nav-right {
    max-height: 480px;
    opacity: 1;
    visibility: visible;
    transition: max-height 0.45s cubic-bezier(.4,0,.2,1), opacity 0.35s ease 0.05s, visibility 0s linear 0s;
  }
  .burger { display: block; }
}

/* ===== BOUTONS =====
   Socle commun. Les variantes de couleur propres à chaque page
   (.btn-navy-outline, .btn-wood, .btn-outline-white, .btn-block, ...)
   restent définies dans le <style> de la page concernée. */
.btn { font-weight: 600; font-size: 15px; padding: 14px 28px; border-radius: 10px; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform 0.2s cubic-bezier(.34,1.56,.64,1), box-shadow 0.25s ease, background-position 0.6s ease; }
.btn:hover { transform: translateY(-1px) scale(1.02); }
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: linear-gradient(120deg, var(--blue) 0%, var(--blue) 45%, #2d80f4 55%, var(--blue) 100%);
  background-size: 250% 100%; background-position: 100% 0;
  color: var(--white);
  box-shadow: 0 8px 20px rgba(30,111,232,0.28);
}
.btn-primary:hover { background-position: 0% 0; box-shadow: 0 14px 32px rgba(30,111,232,0.40); }
.btn-secondary { background: var(--bg); color: var(--navy); border: 1.5px solid var(--border); }
.btn-secondary:hover { background: var(--border); }

/* ===== CONTACT / FOOTER =====
   Valeurs par défaut pour les pages standard (4 colonnes, sans newsletter).
   index.html redéfinit certaines de ces règles avec des valeurs propres
   (footer plus compact, dégradé, bloc newsletter) : son <style> étant chargé
   après ce fichier, ses valeurs prennent le dessus normalement en cascade. */
footer { background: var(--navy); padding: 48px 0 28px; margin-top: 60px; }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 32px; }
.footer-logo-lockup { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.footer-logo-lockup img { width: 32px; height: 32px; border-radius: 8px; box-shadow: 0 6px 16px rgba(30,111,232,0.32); }
.footer-logo-lockup strong { font-size: 16px; font-weight: 800; color: var(--white); letter-spacing: -0.2px; }
.footer-logo-lockup strong span { color: var(--glass); }
.footer-col h5 { color: var(--white); font-size: 13px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 14px; }
.footer-col a, .footer-col p { color: rgba(255,255,255,0.65); font-size: 13.5px; display: block; margin-bottom: 8px; }
.footer-col a { position: relative; width: fit-content; transition: color 0.25s ease, transform 0.25s ease; }
.footer-col a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background: var(--glass);
  transition: width 0.3s cubic-bezier(.16,1,.3,1);
}
.footer-col a:hover { color: var(--white); transform: translateX(3px); }
.footer-col a:hover::after { width: 100%; }
.footer-socials { display: flex; flex-direction: column; gap: 8px; }
.social-link {
  display: inline-flex; align-items: center; gap: 10px;
  color: rgba(255,255,255,0.65); font-size: 13.5px;
  transition: color 0.2s ease, transform 0.2s ease;
}
.social-link i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
  font-size: 14px; transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.social-link:hover, .social-link:focus-visible { color: var(--white); transform: translateX(2px); }
.social-link:hover i, .social-link:focus-visible i { border-color: transparent; }
.social-link[href*="facebook"]:hover i { background: #1877F2; box-shadow: 0 6px 14px rgba(24,119,242,0.4); }
.social-link[href*="instagram"]:hover i { background: linear-gradient(135deg,#f58529,#dd2a7b,#8134af,#515bd4); box-shadow: 0 6px 14px rgba(221,42,123,0.4); }
.social-link[href*="wa.me"]:hover i { background: #25D366; box-shadow: 0 6px 14px rgba(37,211,102,0.4); }
.footer-hours { display: flex; align-items: center; gap: 8px; }
.footer-payments { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,0.08); font-size: 12.5px; color: rgba(255,255,255,0.55); }
.footer-payments-label { font-weight: 600; color: rgba(255,255,255,0.7); }
.footer-payments .payment-item { display: inline-flex; align-items: center; gap: 6px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; text-align: center; color: rgba(255,255,255,0.4); font-size: 12.5px; }
.footer-bottom a { color: rgba(255,255,255,0.6); }
.footer-bottom a:hover { color: var(--white); }