:root {
  --km-accent: #5ab4c4;
  --km-accent-dark: #3d8e9c;
  --km-text: #1d3b44;
  --km-muted: #7a8c91;
  --km-border: #e6eef0;
  --km-radius: 12px;
}

/* ================= DESKTOP ================= */
/* Le header entier sert de repère au mega menu */
/* .ast-desktop #masthead { position: relative; } */

/* Les conteneurs intermédiaires ne doivent plus servir de repère */
.ast-desktop #masthead .ast-primary-header-bar,
.ast-desktop #masthead .site-primary-header-wrap,
.ast-desktop #masthead .ast-builder-grid-row,
.ast-desktop #masthead .site-header-section,
.ast-desktop #masthead .ast-builder-layout-element,
.ast-desktop #masthead .ast-builder-menu,
.ast-desktop #masthead .main-header-bar-navigation,
.ast-desktop #masthead .main-navigation,
.ast-desktop #masthead .main-header-menu,
.ast-desktop .main-header-menu > .km-marques {
  position: static;
}

/* Écrans moyens (portables) : grille plus compacte */
@media (max-width: 1200px) {
  .ast-desktop .main-header-menu .km-marques > .sub-menu {
    grid-template-columns: 220px repeat(3, 1fr);
  }
  .ast-desktop .km-marques .km-intro { grid-row: span 3; }
}

/* Conteneur du mega menu */
.ast-desktop .main-header-menu .km-marques > .sub-menu {
  left: 0 !important;
  right: 0;
  width: min(1100px, calc(100vw - 40px)) !important;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 260px repeat(4, 1fr);
  gap: 12px;
  padding: 24px;
  background: #fff;
  border: 0;
  border-top: 3px solid var(--km-accent);
  border-radius: 0 0 var(--km-radius) var(--km-radius);
  box-shadow: 0 20px 40px rgba(20, 40, 50, .12);
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.ast-desktop .main-header-menu .km-marques:hover > .sub-menu,
.ast-desktop .main-header-menu .km-marques.focus > .sub-menu,
.ast-desktop .main-header-menu .km-marques:focus-within > .sub-menu {
  transform: translateY(0);
}
.ast-desktop .main-header-menu .km-marques > .sub-menu > .menu-item {
  width: auto;
  border: 0;
}

/* Panneau intro (span 2 = jusqu'à 8 marques ; span 3 au-delà) */
.ast-desktop .km-marques .km-intro { grid-row: span 2; }
.ast-desktop .km-marques .km-intro > .menu-link {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  border-radius: var(--km-radius);
  background: linear-gradient(135deg, var(--km-accent), var(--km-accent-dark));
  color: #fff;
}
.km-intro-titre { font-size: 1.15em; font-weight: 700; line-height: 1.25; }
.km-intro-texte { font-size: .85em; line-height: 1.5; opacity: .9; }
.km-intro-cta {
  margin-top: 6px;
  font-size: .85em;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Cartes marques */
.ast-desktop .km-marques .km-marque > .menu-link {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 10px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--km-border);
  border-radius: var(--km-radius);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.ast-desktop .km-marques .km-marque > .menu-link:hover,
.ast-desktop .km-marques .km-marque > .menu-link:focus-visible {
  border-color: var(--km-accent);
  box-shadow: 0 8px 20px rgba(90, 180, 196, .2);
  transform: translateY(-2px);
}

/* Image carrée*/
.km-logo-wrap {
  display: block;
  width: 100px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 8px;
} 
/* Image carrée 
.km-logo-wrap {
  display: block;
  width: 100%;
  max-width: 140px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 8px;
}*/

.km-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
 mix-blend-mode: multiply;  /* fait disparaître le fond blanc des logos */
  transition: transform .3s ease;
}
.km-marque > .menu-link:hover .km-logo { transform: scale(1.06); }

.km-nom { font-size: .9em; font-weight: 600; color: var(--km-text); }
.km-count { font-size: .75em; color: var(--km-muted); }

/* ================= MOBILE ================= */
.ast-header-break-point .main-header-menu .km-marques > .sub-menu {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 12px;
}
.ast-header-break-point .main-header-menu .km-marques .sub-menu > .menu-item {
  border: 0;
}

/* Masquer les flèches Astra dans le mega menu */
.ast-header-break-point .main-header-menu .km-marques .sub-menu .menu-link .ast-icon,
.ast-header-break-point .main-header-menu .km-marques .sub-menu .menu-link > svg {
  display: none !important;
}

/* Bandeau intro */
.ast-header-break-point .main-header-menu .km-marques .km-intro {
  grid-column: 1 / -1;
}
.ast-header-break-point .main-header-menu .km-marques .km-intro > .menu-link {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 16px !important;
  border-radius: 10px;
  background: var(--km-accent);
}
.ast-header-break-point .km-marques .km-intro-titre,
.ast-header-break-point .km-marques .km-intro-cta {
  margin: 0;
  line-height: 1.3;
}

.ast-header-break-point .main-header-menu .km-marques .km-intro span {
  display: block;
  color: #fff !important;
}
.ast-header-break-point .km-marques .km-intro-titre { font-size: 1em; }
.ast-header-break-point .km-marques .km-intro-texte { display: none !important; }

/* Cartes marques */
.ast-header-break-point .main-header-menu .km-marques .km-marque > .menu-link {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
  padding: 14px 8px !important;
  text-align: center;
  background: #fff;
  border: 1px solid var(--km-border);
  border-radius: 10px; 
}
/*.ast-header-break-point .km-marques .km-logo-wrap {
  width: 75px;
  margin: 0 auto;
} POUR REGLER LES IMAGES EN PX DANS LE MENU (DESACTIVER CELUI DU DESSOUS*/
.ast-header-break-point .km-marques .km-logo-wrap {
  width: 100%;
  max-width: 140px;
  margin: 0 auto;
}

.ast-header-break-point .km-marques .km-nom {
  font-size: .85em;
  line-height: 1.2;
}
.ast-header-break-point .km-marques .km-count { display: none; }

/* Mobile : masquer « NOS MARQUES » et son bouton, grille toujours visible */
.ast-header-break-point .main-header-menu .km-marques > .menu-link,
.ast-header-break-point .main-header-menu .km-marques > .ast-menu-toggle {
  display: none !important;
}
.ast-header-break-point .main-header-menu .km-marques {
  border: 0;
}


/* ================= EN-TÊTE STICKY ================= */
#masthead {
  position: sticky !important;
  top: 0;
  z-index: 999;
  background: #fff;
  transition: box-shadow .25s ease;
}

/* Décalage sous la barre d'admin WordPress (connecté uniquement) */
.admin-bar #masthead { top: 32px; }
@media (max-width: 782px) { .admin-bar #masthead { top: 46px; } }
@media (max-width: 600px) { .admin-bar #masthead { top: 0; } }

/* Au défilement : ombre + en-tête resserré */
#masthead.km-scrolled {
  box-shadow: 0 6px 20px rgba(20, 40, 50, .08);
}
.ast-desktop #masthead .site-primary-header-wrap {
  transition: min-height .25s ease;
}
.ast-desktop #masthead.km-scrolled .site-primary-header-wrap {
  min-height: 64px !important;
}
#masthead .site-logo-img img {
  transition: max-width .25s ease;
}
.ast-desktop #masthead.km-scrolled .site-logo-img img {
  max-width: 140px;
}


/* Mobile / tablette : la barre sociale défile, la barre principale reste collée */
.ast-header-break-point #masthead {
  top: calc(var(--km-above-h, 0px) * -1);
}

/* Décalages barre d'admin (visibles uniquement quand vous êtes connecté) */
.admin-bar.ast-header-break-point #masthead {
  top: calc(32px - var(--km-above-h, 0px));
}
@media (max-width: 782px) {
  .admin-bar.ast-header-break-point #masthead {
    top: calc(46px - var(--km-above-h, 0px));
  }
}
@media (max-width: 600px) {
  .admin-bar.ast-header-break-point #masthead {
    top: calc(var(--km-above-h, 0px) * -1);
  }
}

/* Mobile : rétrécissement léger au défilement */
.ast-header-break-point #ast-mobile-header .site-primary-header-wrap {
  transition: min-height .25s ease;
}
.ast-header-break-point #masthead.km-scrolled #ast-mobile-header .site-primary-header-wrap {
  min-height: 56px !important;
}
.ast-header-break-point #masthead.km-scrolled #ast-mobile-header .site-logo-img img {
  max-width: 130px;
}