/* MAJ tailles menu nav (30 avr 2026 v3.1) — desktop links 15px, CTA 13.5px, submenu 14px */
/* ════════════════════════════════════════════════════════════════
   NAV CADRIA UNIFIÉE (30 avr 2026 v3) — couleurs hardcodées
   Source de vérité : _nav.html à la racine cadria.fr
   ════════════════════════════════════════════════════════════════ */

/* FIRST-BAR (bandeau supérieur) */
.first-bar {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 100 !important;
  background: #131932 !important;
  color: #FFF8E8 !important;
  padding: 14px 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 26px !important;
  font-family: 'IBM Plex Mono', 'Courier New', monospace !important;
  font-size: 11.5px !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  border-bottom: 1px solid #c9a452 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
.first-bar * { box-sizing: border-box; }
.first-bar .star {
  width: 22px !important;
  height: 22px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #c9a452 !important;
  color: #131932 !important;
  font-weight: 800 !important;
  font-family: 'Barlow Condensed', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 16px !important;
  font-style: italic !important;
}
.first-bar strong { color: #c9a452 !important; font-weight: 800 !important; }
.first-bar .fb-short { display: none !important; }
.first-bar .fb-long { display: inline !important; }

/* TOPNAV (barre de navigation) */
.topnav {
  position: fixed !important;
  top: var(--nav-offset, 50px) !important;
  left: 0 !important; right: 0 !important;
  z-index: 99 !important;
  padding: 26px 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  background: #f7f1e3 !important;
  box-shadow: 0 2px 0 rgba(140,106,42,0.06), 0 6px 20px rgba(19,25,50,0.08) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
.topnav * { box-sizing: border-box; }

body { padding-top: var(--total-nav-offset, 130px) !important; }

.topnav .brand-logo {
  height: 32px !important;
  max-height: 32px !important;
  width: auto !important;
  max-width: 200px !important;
  display: block !important;
  transition: opacity 200ms ease !important;
}
.topnav .brand-logo:hover { opacity: 0.85 !important; }
@media (max-width: 1100px) {
  .topnav .brand-logo { height: 26px !important; max-height: 26px !important; max-width: 160px !important; }
}

.topnav .nav-links {
  display: flex !important;
  gap: 36px !important;
  align-items: center !important;
}
.topnav .nav-links a {
  font-family: 'Barlow Condensed', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #131932 !important;
  letter-spacing: 0.6px !important;
  position: relative !important;
  padding: 4px 0 !important;
  text-decoration: none !important;
  transition: color 200ms ease !important;
  text-transform: uppercase !important;
}
.topnav .nav-links a::after {
  content: '' !important; position: absolute !important;
  bottom: -2px !important; left: 0 !important;
  width: 0 !important; height: 1.5px !important;
  background: #c9a452 !important;
  transition: width 220ms ease !important;
}
.topnav .nav-links a:hover { color: #c9a452 !important; }
.topnav .nav-links a:hover::after { width: 100% !important; }
.topnav .nav-links a.active { color: #c9a452 !important; }
.topnav .nav-links a.active::after { width: 100% !important; }

.topnav .nav-cta {
  padding: 11px 24px !important;
  background: #131932 !important;
  color: #f7f1e3 !important;
  font-family: 'Barlow Condensed', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: all 200ms ease !important;
  border: 0 !important;
}
.topnav .nav-cta:hover { background: #c9a452 !important; color: #131932 !important; }

.topnav .nav-group { position: relative !important; }
.topnav .nav-group .nav-trigger { cursor: default !important; }
.topnav .nav-arrow { display: inline-block !important; font-size: 0.7em !important; margin-left: 3px !important; transition: transform 200ms ease !important; }
.topnav .nav-group:hover .nav-arrow { transform: rotate(180deg) !important; color: #c9a452 !important; }
.topnav .nav-submenu {
  position: absolute !important;
  top: 100% !important; left: -14px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  border-top: 2px solid #c9a452 !important;
  padding: 12px 0 !important;
  min-width: 240px !important;
  box-shadow: 0 12px 30px rgba(19,25,50,0.10) !important;
  opacity: 0 !important; visibility: hidden !important;
  transform: translateY(-4px) !important;
  transition: opacity 200ms ease, transform 200ms ease, visibility 200ms !important;
  z-index: 50 !important;
}
.topnav .nav-group:hover .nav-submenu, .topnav .nav-group:focus-within .nav-submenu {
  opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important;
}
.topnav .nav-submenu a {
  display: block !important;
  padding: 9px 22px !important;
  font-family: 'Barlow Condensed', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0.3px !important;
  color: #4a5066 !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  text-transform: none !important;
}
.topnav .nav-submenu a::after { display: none !important; }
.topnav .nav-submenu a:hover { background: #f7f1e3 !important; color: #c9a452 !important; }

.topnav .nav-burger {
  display: none !important;
  background: transparent !important;
  border: 0 !important;
  padding: 6px !important;
  cursor: pointer !important;
  margin-left: 12px !important;
  z-index: 60 !important;
  position: relative !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 0 !important;
}
.topnav .nav-burger span {
  display: block !important;
  width: 28px !important;
  height: 2px !important;
  background: #131932 !important;
  margin: 4px 0 !important;
  transition: transform 220ms ease, opacity 220ms !important;
}
.topnav .nav-burger.active span:nth-child(1) { transform: rotate(45deg) translate(7px, 7px) !important; }
.topnav .nav-burger.active span:nth-child(2) { opacity: 0 !important; }
.topnav .nav-burger.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px) !important; }

@media (max-width: 1100px) {
  .first-bar {
    padding: 12px 24px !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    font-size: 11px !important;
    letter-spacing: 1.8px !important;
  }
  .first-bar .star { width: 18px !important; height: 18px !important; font-size: 13px !important; }
  .topnav { padding: 20px 24px !important; }
  .topnav .nav-burger { display: flex !important; }
  .topnav .nav-links {
    display: none !important;
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    background: #f7f1e3 !important;
    flex-direction: column !important;
    padding: 100px 28px 40px !important;
    gap: 0 !important;
    z-index: 50 !important;
    overflow-y: auto !important;
    border-top: 2px solid #c9a452 !important;
  }
  .topnav .nav-links.open { display: flex !important; }
  .topnav .nav-links.open a {
    font-family: 'Barlow Condensed', 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 1.6rem !important;
    padding: 18px 4px !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    width: 100% !important;
    color: #131932 !important;
    text-align: left !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }
  .topnav .nav-links.open a.active { color: #c9a452 !important; }
  .topnav .nav-cta { display: none !important; }
  .topnav .nav-group { width: 100% !important; }
  .topnav .nav-arrow { display: none !important; }
  .topnav .nav-submenu {
    position: static !important;
    opacity: 1 !important; visibility: visible !important;
    transform: none !important; transition: none !important;
    box-shadow: none !important;
    border: none !important; border-left: 2px solid #c9a452 !important;
    padding: 0 0 8px 18px !important;
    margin-top: 4px !important;
    background: transparent !important;
    min-width: 0 !important;
  }
  .topnav .nav-submenu a { padding: 8px 0 !important; font-size: 1rem !important; color: #4a5066 !important; }
}
@media (max-width: 700px) {
  .first-bar .fb-long { display: none !important; }
  .first-bar .fb-short { display: inline !important; }
  .first-bar {
    padding: 8px 16px !important;
    font-size: 9px !important;
    letter-spacing: 1.5px !important;
    gap: 8px !important;
    text-align: center !important;
  }
  .first-bar .star { width: 12px !important; height: 12px !important; font-size: 10px !important; flex-shrink: 0 !important; }
}

/* JS qui calcule --nav-offset / --total-nav-offset (inclus dans _nav.js) */