/*! layout.css — bundle CSS généré par tools/build_css.py
    Sources : shared-hero.css, modern-enhancements.css
    Regénérer : python3 tools/build_css.py */

/* ── shared-hero.css ──────────────────────────────────── */

/* Shared Hero Section Styles - Applied to all pages except index.html */

/* Hero Section */
section.about-us-hero {
  position: relative;
  background: linear-gradient(135deg, rgba(26, 58, 92, 0.95) 0%, rgba(0, 27, 77, 0.95) 100%);
  padding: 120px 0 80px;
  text-align: center;
  color: #fff;
}

.au-hero-text h1 {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #fff;
}

.au-hero-text p {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 30px;
}

/* Breadcrumb styling (shared with product pages) */
.breadcrumb-custom {
  margin-top: 50px;
}

.breadcrumb-custom .breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
  justify-content: center;
}

.breadcrumb-custom .breadcrumb-item {
  color: #fff !important;
}

.breadcrumb-custom .breadcrumb-item a {
  color: #fff !important;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.breadcrumb-custom .breadcrumb-item a:hover {
  opacity: 0.8;
  color: #fff !important;
}

.breadcrumb-custom .breadcrumb-item.active {
  color: rgba(255, 255, 255, 0.9) !important;
}

.breadcrumb-custom .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, 0.7) !important;
  content: "/";
  padding: 0 10px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  section.about-us-hero {
    padding: 80px 0 60px;
    margin-top: 0 !important;
    padding-top: 80px !important;
  }
  
  /* Ensure no gap between header and hero section */
  .header-area + section.about-us-hero,
  header + section.about-us-hero,
  #shared-header + section.about-us-hero,
  div#shared-header + section.about-us-hero {
    margin-top: 0 !important;
    padding-top: 80px !important;
  }
  
  .au-hero-text {
    padding: 0 15px;
  }
  
  .au-hero-text h1 {
    font-size: 36px;
    margin-bottom: 15px;
  }
  
  .au-hero-text p {
    font-size: 16px;
    margin-bottom: 25px;
  }

  .breadcrumb-custom {
    margin-top: 30px;
    margin-bottom: 0;
  }
  
  .breadcrumb-custom .breadcrumb-item,
  .breadcrumb-custom .breadcrumb-item a {
    font-size: 16px;
  }
}

@media (max-width: 576px) {
  section.about-us-hero {
    padding: 60px 0 40px;
    margin-top: 0 !important;
    padding-top: 60px !important;
  }
  
  /* Ensure no gap between header and hero section on small screens */
  .header-area + section.about-us-hero,
  header + section.about-us-hero,
  #shared-header + section.about-us-hero,
  div#shared-header + section.about-us-hero {
    margin-top: 0 !important;
    padding-top: 60px !important;
  }
  
  .au-hero-text {
    padding: 0 12px;
  }
  
  .au-hero-text h1 {
    font-size: 28px;
    margin-bottom: 12px;
  }
  
  .au-hero-text p {
    font-size: 14px;
    margin-bottom: 20px;
  }

  .breadcrumb-custom {
    margin-top: 25px;
    margin-bottom: 0;
  }
  
  .breadcrumb-custom .breadcrumb-item,
  .breadcrumb-custom .breadcrumb-item a {
    font-size: 14px;
  }
}

/* ── modern-enhancements.css ──────────────────────────────────── */

/* === modern-enhancements.css — Header, Footer & Navigation Upgrades ===
   Glassmorphism nav, dropdown transitions, mobile stagger, social hover,
   circle scrollup button.
   ====================================================================== */

/* ─── Brand tokens ─────────────────────────────────────────────── */
:root {
  --brand-navy:       #1a3a5c;
  --brand-blue:       #169bd7;
  --brand-gold:       #f9aa04;
  --brand-gold-glow:  rgba(249, 170, 4, 0.30);
  --ease-standard:    cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Desktop sticky header — glassmorphism ─────────────────────
   Triggers when JS adds .nav-fixed at scroll > 50 px.
   Not applied on mobile (mobile CSS already forces fixed + navy bg). */
@media (min-width: 768px) {
  header.header-area.h-style3 {
    transition: background 0.35s var(--ease-standard),
                box-shadow  0.35s var(--ease-standard);
  }

  header.header-area.nav-fixed {
    /* Frosted-glass navy instead of old bright #169bd7 */
    background: rgba(26, 58, 92, 0.92) !important;
    backdrop-filter: blur(14px) saturate(1.6);
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.22),
                inset 0 -1px 0 rgba(255, 255, 255, 0.07) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    /* Kill the old fadeInDown jank */
    animation: none !important;
  }
}

/* ─── Footer social icons — modern lift-and-glow hover ──────────*/
section.footer-details .f-details .social li {
  transition: transform 0.25s var(--ease-standard),
              box-shadow  0.25s var(--ease-standard);
}

section.footer-details .f-details .social li:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px var(--brand-gold-glow) !important;
}

/* Icon colour pop on hover (FA6 <i> tags) */
section.footer-details .f-details .social li a i {
  transition: color 0.25s var(--ease-standard);
}

section.footer-details .f-details .social li:hover a i {
  color: #fff;
}

/* ─── Hero pagination — override Swiper's forced width: 100% ────
   Swiper injects width:100% on .swiper-pagination via its own CSS;
   the hero line-indicator needs width:auto so it stays centred.    */
section.hero-4 .hero4-slide .swiper-pagination {
  width: auto !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}

/* ─── Scrollup button — circle redesign ─────────────────────────*/
.scrollup .scrollup-icon {
  width:  44px !important;
  height: 44px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: var(--brand-gold) !important;
  box-shadow: 0 4px 16px var(--brand-gold-glow);
  transition: background    0.25s var(--ease-standard),
              transform     0.25s var(--ease-standard),
              box-shadow    0.25s var(--ease-standard) !important;
}

.scrollup .scrollup-icon:hover {
  background:  var(--brand-navy) !important;
  transform:   translateY(-3px);
  box-shadow:  0 8px 24px rgba(26, 58, 92, 0.40) !important;
}

/* ═══════════════════════════════════════════════════════════════
   NAVIGATION — MODERN ENHANCEMENTS
   Desktop: hover underline + smooth dropdown transition
   Mobile:  staggered entrance + overlay + buttery hamburger morph
   ═══════════════════════════════════════════════════════════════ */

/* ─── Shared keyframes ───────────────────────────────────────── */
@keyframes navItemIn {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0);     }
}

@keyframes menuDrawerIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0);     }
}

@keyframes overlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─── Desktop & tablet nav (≥ 768 px) ───────────────────────── */
@media (min-width: 768px) {

  /* 1 — Slightly larger, better-tracked links */
  .h-style3 .sm-mint > li > a {
    font-size: 13px !important;
    letter-spacing: 0.03em !important;
  }

  /* 2 — Hover: underline scales in from centre on non-active links */
  .h-style3 .sm-mint > li > a::before {
    content: '' !important;
    position: absolute !important;
    bottom: 10px !important;
    left: 50% !important;
    width: calc(100% - 34px) !important;
    height: 2px !important;
    background: rgba(255, 255, 255, 0.8) !important;
    border-radius: 2px !important;
    transform: translateX(-50%) scaleX(0) !important;
    transform-origin: center !important;
    transition: transform 0.28s var(--ease-standard) !important;
    pointer-events: none !important;
  }

  .h-style3 .sm-mint > li > a:not(.is-current-page):not(.is-current-parent):hover::before {
    transform: translateX(-50%) scaleX(1) !important;
  }

  /* 3 — Dropdown: fade + slide instead of an instant display snap
         The trick: keep display:block always, hide via visibility+opacity.
         CSS transitions can't animate display; they CAN animate these. */
  .h-style3 .sm-mint ul {
    display:        block !important;  /* always rendered (was display:none) */
    visibility:     hidden !important;
    opacity:        0 !important;
    transform:      translateY(-8px) !important;
    pointer-events: none !important;
    transition:
      opacity    0.22s var(--ease-standard),
      visibility 0.22s var(--ease-standard),
      transform  0.22s var(--ease-standard) !important;
  }

  .h-style3 .sm-mint > li:hover > ul,
  .h-style3 .sm-mint > li.highlighted > ul {
    visibility:     visible !important;
    opacity:        1 !important;
    transform:      translateY(0) !important;
    pointer-events: auto !important;
  }

  /* 4 — Dropdown item: brand-blue left-border accent on hover */
  .h-style3 .sm-mint ul li a {
    border-left: 2px solid transparent !important;
    transition:
      background    0.15s var(--ease-standard),
      border-color  0.15s var(--ease-standard),
      padding-left  0.18s var(--ease-standard) !important;
  }

  .h-style3 .sm-mint ul li a:hover,
  .h-style3 .sm-mint ul li a:focus {
    border-left-color: var(--brand-blue) !important;
  }
}

/* ─── Mobile nav (< 768 px) ─────────────────────────────────── */
@media (max-width: 767px) {

  /* 5 — Smoother drawer entrance (overrides old slideDown 0.3s ease) */
  #main-menu.active,
  body #main-menu.active {
    animation: menuDrawerIn 0.32s cubic-bezier(0.23, 1, 0.32, 1) both !important;
  }

  /* 6 — Staggered item entrance — each li slides in from the left */
  #main-menu.active > li,
  body #main-menu.active > li {
    animation: navItemIn 0.30s var(--ease-standard) both !important;
  }
  #main-menu.active > li:nth-child(1),
  body #main-menu.active > li:nth-child(1) { animation-delay: 0.05s !important; }
  #main-menu.active > li:nth-child(2),
  body #main-menu.active > li:nth-child(2) { animation-delay: 0.10s !important; }
  #main-menu.active > li:nth-child(3),
  body #main-menu.active > li:nth-child(3) { animation-delay: 0.14s !important; }
  #main-menu.active > li:nth-child(4),
  body #main-menu.active > li:nth-child(4) { animation-delay: 0.18s !important; }
  #main-menu.active > li:nth-child(5),
  body #main-menu.active > li:nth-child(5) { animation-delay: 0.22s !important; }
  #main-menu.active > li:nth-child(6),
  body #main-menu.active > li:nth-child(6) { animation-delay: 0.26s !important; }

  /* 7 — Buttery hamburger → × morph (easeOutQuint curve) */
  .h-style3 .nh3-navber .main-nav .main-menu-btn-icon,
  .h-style3 .nh3-navber .main-nav .main-menu-btn-icon::before,
  .h-style3 .nh3-navber .main-nav .main-menu-btn-icon::after {
    transition:
      transform    0.38s cubic-bezier(0.23, 1, 0.32, 1),
      background   0.38s cubic-bezier(0.23, 1, 0.32, 1),
      top          0.38s cubic-bezier(0.23, 1, 0.32, 1) !important;
  }

  /* 8 — Dimmed page backdrop behind the open drawer
         pointer-events:none lets clicks pass through to the body
         so the existing "click outside → close" handler still fires. */
  body.menu-active::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.48);
    z-index: 9998;           /* below menu (99999), above page content */
    pointer-events: none;
    animation: overlayFadeIn 0.28s ease both;
  }
}